From b1a6c5dfa0c170ac88b1573c8eed2eb93220670e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josef=20Kub=C3=AD=C4=8Dek?= Date: Thu, 20 Apr 2023 11:40:15 +0200 Subject: [PATCH 1/6] feat(StructuredList): rename to tsx #13538 --- .../StructuredList/{StructuredList.js => StructuredList.tsx} | 0 .../react/src/components/StructuredList/{index.js => index.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/react/src/components/StructuredList/{StructuredList.js => StructuredList.tsx} (100%) rename packages/react/src/components/StructuredList/{index.js => index.tsx} (100%) diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.tsx similarity index 100% rename from packages/react/src/components/StructuredList/StructuredList.js rename to packages/react/src/components/StructuredList/StructuredList.tsx diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.tsx similarity index 100% rename from packages/react/src/components/StructuredList/index.js rename to packages/react/src/components/StructuredList/index.tsx From 6b7b15cbb97db6996470e2660ccff9414dfb6127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josef=20Kub=C3=AD=C4=8Dek?= Date: Thu, 20 Apr 2023 12:01:15 +0200 Subject: [PATCH 2/6] feat(StructuredList): add types #13538 --- .../StructuredList/StructuredList.tsx | 246 +++++++++++++----- 1 file changed, 180 insertions(+), 66 deletions(-) diff --git a/packages/react/src/components/StructuredList/StructuredList.tsx b/packages/react/src/components/StructuredList/StructuredList.tsx index fa6eb775ca6c..0ef1aca234eb 100644 --- a/packages/react/src/components/StructuredList/StructuredList.tsx +++ b/packages/react/src/components/StructuredList/StructuredList.tsx @@ -5,34 +5,84 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useState } from 'react'; +import React, { + useState, + type HTMLAttributes, + type ReactNode, + type KeyboardEvent, + type ChangeEvent, +} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useId } from '../../internal/useId'; import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; -const GridSelectedRowStateContext = React.createContext(null); -const GridSelectedRowDispatchContext = React.createContext(null); +type DivAttrs = HTMLAttributes; -export function StructuredListWrapper(props) { +type GridSelectedRowState = null | string; +type GridSelectedRowSetter = null | ((value: GridSelectedRowState) => void); +const GridSelectedRowStateContext = + React.createContext(null); +const GridSelectedRowDispatchContext = + React.createContext(null); + +export interface StructuredListWrapperProps extends DivAttrs { + /** + * Specify a label to be read by screen readers on the container node + */ + 'aria-label'?: string; + + /** + * Provide the contents of your StructuredListWrapper + */ + children?: ReactNode; + + /** + * Specify an optional className to be applied to the container node + */ + className?: string; + + /** + * Specify if structured list is condensed, default is false + */ + isCondensed?: boolean; + + /** + * Specify if structured list is flush, default is false + */ + isFlush?: boolean; + + /** + * Specify whether your StructuredListWrapper should have selections + */ + selection?: boolean; +} +export function StructuredListWrapper(props: StructuredListWrapperProps) { const { children, selection, className, - ['aria-label']: ariaLabel, + ['aria-label']: ariaLabel = 'Structured list section', + // @ts-expect-error: Deprecated prop ariaLabel: deprecatedAriaLabel, isCondensed, isFlush, ...other } = props; + const prefix = usePrefix(); - const classes = classNames(`${prefix}--structured-list`, className, { - [`${prefix}--structured-list--selection`]: selection, - [`${prefix}--structured-list--condensed`]: isCondensed, - [`${prefix}--structured-list--flush`]: isFlush && !selection, - }); - const [selectedRow, setSelectedRow] = React.useState(null); + const classes = classNames( + `${prefix}--structured-list`, + { + [`${prefix}--structured-list--selection`]: selection, + [`${prefix}--structured-list--condensed`]: isCondensed, + [`${prefix}--structured-list--flush`]: isFlush && !selection, + }, + className + ); + const [selectedRow, setSelectedRow] = + React.useState(null); return ( @@ -48,7 +98,6 @@ export function StructuredListWrapper(props) { ); } - StructuredListWrapper.propTypes = { /** * Specify a label to be read by screen readers on the container node @@ -90,13 +139,17 @@ StructuredListWrapper.propTypes = { selection: PropTypes.bool, }; -StructuredListWrapper.defaultProps = { - selection: false, - isCondensed: false, - isFlush: false, - ['aria-label']: 'Structured list section', -}; +export interface StructuredListHeadProps extends DivAttrs { + /** + * Provide the contents of your StructuredListHead + */ + children?: ReactNode; + /** + * Specify an optional className to be applied to the node + */ + className?: string; +} export function StructuredListHead(props) { const { children, className, ...other } = props; const prefix = usePrefix(); @@ -108,7 +161,6 @@ export function StructuredListHead(props) { ); } - StructuredListHead.propTypes = { /** * Provide the contents of your StructuredListHead @@ -121,7 +173,25 @@ StructuredListHead.propTypes = { className: PropTypes.string, }; -export function StructuredListBody(props) { +export interface StructuredListBodyProps extends DivAttrs { + /** + * Provide the contents of your StructuredListBody + */ + children?: ReactNode; + + /** + * Specify an optional className to be applied to the container node + */ + className?: string; + + head?: boolean; + + /** + * Provide a handler that is invoked on the key down event for the control + */ + onKeyDown?(event: KeyboardEvent): void; +} +export function StructuredListBody(props: StructuredListBodyProps) { const { children, className, ...other } = props; const prefix = usePrefix(); const classes = classNames(`${prefix}--structured-list-tbody`, className); @@ -132,7 +202,6 @@ export function StructuredListBody(props) { ); } - StructuredListBody.propTypes = { /** * Provide the contents of your StructuredListBody @@ -152,13 +221,30 @@ StructuredListBody.propTypes = { onKeyDown: PropTypes.func, }; -StructuredListBody.defaultProps = { - onKeyDown: () => {}, -}; +const GridRowContext = React.createContext(null); -const GridRowContext = React.createContext(null); +export interface StructuredListRowProps extends DivAttrs { + /** + * Provide the contents of your StructuredListRow + */ + children?: ReactNode; -export function StructuredListRow(props) { + /** + * Specify an optional className to be applied to the container node + */ + className?: string; + + /** + * Specify whether your StructuredListRow should be used as a header row + */ + head?: boolean; + + /** + * Provide a handler that is invoked on the key down event for the control, + */ + onKeyDown?(event: KeyboardEvent): void; +} +export function StructuredListRow(props: StructuredListRowProps) { const { onKeyDown, children, className, head, ...other } = props; const [hasFocusWithin, setHasFocusWithin] = useState(false); const id = useId('grid-input'); @@ -166,11 +252,15 @@ export function StructuredListRow(props) { const setSelectedRow = React.useContext(GridSelectedRowDispatchContext); const prefix = usePrefix(); const value = { id }; - const classes = classNames(`${prefix}--structured-list-row`, className, { - [`${prefix}--structured-list-row--header-row`]: head, - [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin, - [`${prefix}--structured-list-row--selected`]: selectedRow === id, - }); + const classes = classNames( + `${prefix}--structured-list-row`, + { + [`${prefix}--structured-list-row--header-row`]: head, + [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin, + [`${prefix}--structured-list-row--selected`]: selectedRow === id, + }, + className + ); return head ? (
@@ -182,7 +272,7 @@ export function StructuredListRow(props) { {...other} role="row" className={classes} - onClick={() => setSelectedRow(id)} + onClick={() => setSelectedRow?.(id)} onFocus={() => { setHasFocusWithin(true); }} @@ -196,7 +286,6 @@ export function StructuredListRow(props) {
); } - StructuredListRow.propTypes = { /** * Provide the contents of your StructuredListRow @@ -227,12 +316,33 @@ StructuredListRow.propTypes = { onKeyDown: PropTypes.func, }; -StructuredListRow.defaultProps = { - head: false, - onKeyDown: () => {}, -}; +export interface StructuredListInputProps extends DivAttrs { + /** + * Specify an optional className to be applied to the input + */ + className?: string; + + /** + * Specify a custom `id` for the input + */ + id?: string; + + /** + * Provide a `name` for the input + */ + name?: string; + + /** + * Provide an optional hook that is called each time the input is updated + */ + onChange?(event: ChangeEvent): void; -export function StructuredListInput(props) { + /** + * Provide a `title` for the input + */ + title?: string; +} +export function StructuredListInput(props: StructuredListInputProps) { const defaultId = useId('structureListInput'); const { className, @@ -257,11 +367,11 @@ export function StructuredListInput(props) { {...other} type="radio" tabIndex={0} - checked={row && row.id === selectedRow} + checked={!!row && row.id === selectedRow} value={row?.id ?? ''} onChange={(event) => { - setSelectedRow(event.target.value); - onChange(event); + setSelectedRow?.(event.target.value); + onChange?.(event); }} id={id ?? defaultId} className={classes} @@ -270,7 +380,6 @@ export function StructuredListInput(props) { /> ); } - StructuredListInput.propTypes = { /** * Specify an optional className to be applied to the input @@ -314,18 +423,38 @@ StructuredListInput.propTypes = { ), }; -StructuredListInput.defaultProps = { - title: 'title', -}; +export interface StructuredListCellProps extends DivAttrs { + /** + * Provide the contents of your StructuredListCell + */ + children?: ReactNode; -export function StructuredListCell(props) { + /** + * Specify an optional className to be applied to the container node + */ + className?: string; + + /** + * Specify whether your StructuredListCell should be used as a header cell + */ + head?: boolean; + + /** + * Specify whether your StructuredListCell should have text wrapping + */ + noWrap?: boolean; +} +export function StructuredListCell(props: StructuredListCellProps) { const { children, className, head, noWrap, ...other } = props; const prefix = usePrefix(); - const classes = classNames(className, { - [`${prefix}--structured-list-th`]: head, - [`${prefix}--structured-list-td`]: !head, - [`${prefix}--structured-list-content--nowrap`]: noWrap, - }); + const classes = classNames( + { + [`${prefix}--structured-list-th`]: head, + [`${prefix}--structured-list-td`]: !head, + [`${prefix}--structured-list-content--nowrap`]: noWrap, + }, + className + ); if (head) { return ( @@ -341,7 +470,6 @@ export function StructuredListCell(props) { ); } - StructuredListCell.propTypes = { /** * Provide the contents of your StructuredListCell @@ -363,17 +491,3 @@ StructuredListCell.propTypes = { */ noWrap: PropTypes.bool, }; - -StructuredListCell.defaultProps = { - head: false, - noWrap: false, -}; - -export default { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListInput, - StructuredListCell, -}; From b0df4cd41093b928a1e8a7b870f09bd9ec5547bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josef=20Kub=C3=AD=C4=8Dek?= Date: Thu, 20 Apr 2023 12:01:51 +0200 Subject: [PATCH 3/6] feat(StructuredListSkeleton): rename to tsx #13539 --- .../{StructuredList.Skeleton.js => StructuredList.Skeleton.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/react/src/components/StructuredList/{StructuredList.Skeleton.js => StructuredList.Skeleton.tsx} (100%) diff --git a/packages/react/src/components/StructuredList/StructuredList.Skeleton.js b/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx similarity index 100% rename from packages/react/src/components/StructuredList/StructuredList.Skeleton.js rename to packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx From 65997640c74046ed7936cc0f947b4b63cf2de479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josef=20Kub=C3=AD=C4=8Dek?= Date: Thu, 20 Apr 2023 12:06:28 +0200 Subject: [PATCH 4/6] feat(StructuredListSkeleton): add types #13539 --- .../__snapshots__/PublicAPI-test.js.snap | 20 ------- .../StructuredList.Skeleton.tsx | 54 +++++++++++-------- .../src/components/StructuredList/index.tsx | 5 +- 3 files changed, 35 insertions(+), 44 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 200a63d9cfce..ed87ec603cc4 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -6942,9 +6942,6 @@ Map { "render": [Function], }, "StructuredListBody" => Object { - "defaultProps": Object { - "onKeyDown": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -6961,10 +6958,6 @@ Map { }, }, "StructuredListCell" => Object { - "defaultProps": Object { - "head": false, - "noWrap": false, - }, "propTypes": Object { "children": Object { "type": "node", @@ -6991,9 +6984,6 @@ Map { }, }, "StructuredListInput" => Object { - "defaultProps": Object { - "title": "title", - }, "propTypes": Object { "className": Object { "type": "string", @@ -7015,10 +7005,6 @@ Map { }, }, "StructuredListRow" => Object { - "defaultProps": Object { - "head": false, - "onKeyDown": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -7049,12 +7035,6 @@ Map { }, }, "StructuredListWrapper" => Object { - "defaultProps": Object { - "aria-label": "Structured list section", - "isCondensed": false, - "isFlush": false, - "selection": false, - }, "propTypes": Object { "aria-label": Object { "type": "string", diff --git a/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx b/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx index 45d8d490e5bd..273b56f18358 100644 --- a/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx +++ b/packages/react/src/components/StructuredList/StructuredList.Skeleton.tsx @@ -10,26 +10,40 @@ import React from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; -const StructuredListSkeleton = ({ rowCount, className, ...rest }) => { +export interface StructuredListSkeletonProps { + /** + * Specify an optional className to add. + */ + className?: string; + + /** + * number of table rows + */ + rowCount?: number; +} + +export default function StructuredListSkeleton({ + rowCount = 5, + className, + ...rest +}: StructuredListSkeletonProps) { const prefix = usePrefix(); - const StructuredListSkeletonClasses = cx(className, { - [`${prefix}--skeleton`]: true, - [`${prefix}--structured-list`]: true, - }); + const classNames = cx( + `${prefix}--skeleton`, + `${prefix}--structured-list`, + className + ); - const rows = []; - for (var i = 0; i < rowCount; i++) { - rows.push( -
-
-
-
-
- ); - } + const rows = new Array(rowCount).fill(null).map((_, i) => ( +
+
+
+
+
+ )); return ( -
+
@@ -47,7 +61,7 @@ const StructuredListSkeleton = ({ rowCount, className, ...rest }) => {
{rows}
); -}; +} StructuredListSkeleton.propTypes = { /** @@ -60,9 +74,3 @@ StructuredListSkeleton.propTypes = { */ rowCount: PropTypes.number, }; - -StructuredListSkeleton.defaultProps = { - rowCount: 5, -}; - -export default StructuredListSkeleton; diff --git a/packages/react/src/components/StructuredList/index.tsx b/packages/react/src/components/StructuredList/index.tsx index 610cc71aac64..901c75d59928 100644 --- a/packages/react/src/components/StructuredList/index.tsx +++ b/packages/react/src/components/StructuredList/index.tsx @@ -6,4 +6,7 @@ */ export * from './StructuredList'; -export { default as StructuredListSkeleton } from './StructuredList.Skeleton'; +export { + default as StructuredListSkeleton, + type StructuredListSkeletonProps, +} from './StructuredList.Skeleton'; From 7be4acc455fb4d4a2790fd1f957fca0ee4242622 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Tue, 2 May 2023 09:27:20 -0600 Subject: [PATCH 5/6] Update packages/react/src/components/StructuredList/StructuredList.tsx --- packages/react/src/components/StructuredList/StructuredList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/StructuredList/StructuredList.tsx b/packages/react/src/components/StructuredList/StructuredList.tsx index 0ef1aca234eb..b73dba03857d 100644 --- a/packages/react/src/components/StructuredList/StructuredList.tsx +++ b/packages/react/src/components/StructuredList/StructuredList.tsx @@ -240,7 +240,7 @@ export interface StructuredListRowProps extends DivAttrs { head?: boolean; /** - * Provide a handler that is invoked on the key down event for the control, + * Provide a handler that is invoked on the key down event for the control */ onKeyDown?(event: KeyboardEvent): void; } From 83b95114a74ae4b43322e83316e3095b16aa91f2 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Wed, 13 Sep 2023 08:30:17 -0500 Subject: [PATCH 6/6] chore: update snapshots --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 --- .../DataTable/__tests__/__snapshots__/DataTable-test.js.snap | 4 ++-- .../__tests__/__snapshots__/TableToolbarSearch-test.js.snap | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a3d756190009..19f00ec9f8c4 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7369,9 +7369,6 @@ Map { }, }, "StructuredListSkeleton" => Object { - "defaultProps": Object { - "rowCount": 5, - }, "propTypes": Object { "className": Object { "type": "string", diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index b52f35d08ff2..fd26bf34c9d8 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -535,7 +535,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho xmlns="http://www.w3.org/2000/svg" > @@ -961,7 +961,7 @@ exports[`DataTable renders as expected - Component API should render and match s xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap index 6eb7f7836dd1..78e6eb54d7ae 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap @@ -60,7 +60,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1` xmlns="http://www.w3.org/2000/svg" >