From 1bc93ba866fec6805f987d16a864cc903c527434 Mon Sep 17 00:00:00 2001 From: Alessandra Davila <adavila91@gmail.com> Date: Thu, 10 Nov 2022 16:59:21 -0600 Subject: [PATCH] chore(structured-list): remove next folder (#12590) * chore(structured-list): remove next folder * chore(structured-list): update snapshots * Apply suggestions from code review * Update index.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../__snapshots__/PublicAPI-test.js.snap | 120 +++++- .../StructuredList/StructuredList-test.js | 36 +- .../StructuredList/StructuredList.js | 144 ++++--- .../{next => }/StructuredList.stories.js | 4 +- .../src/components/StructuredList/index.js | 54 +-- .../next/StructuredList-test.js | 205 ---------- .../StructuredList/next/StructuredList.js | 364 ------------------ .../StructuredList/next/StructuredList.mdx | 23 -- 8 files changed, 228 insertions(+), 722 deletions(-) rename packages/react/src/components/StructuredList/{next => }/StructuredList.stories.js (98%) delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList-test.js delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList.js delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList.mdx diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index aba68710915e..27e7b1fdfd05 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -6708,24 +6708,96 @@ Map { "render": [Function], }, "StructuredListBody" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "defaultProps": Object { + "onKeyDown": [Function], + }, + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "head": Object { + "type": "bool", + }, + "onKeyDown": Object { + "type": "func", + }, + }, }, "StructuredListCell" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "defaultProps": Object { + "head": false, + "noWrap": false, + }, + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "head": Object { + "type": "bool", + }, + "noWrap": Object { + "type": "bool", + }, + }, }, "StructuredListHead" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + }, }, "StructuredListInput" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "defaultProps": Object { + "title": "title", + }, + "propTypes": Object { + "className": Object { + "type": "string", + }, + "defaultChecked": [Function], + "id": Object { + "type": "string", + }, + "name": Object { + "type": "string", + }, + "onChange": [Function], + "title": Object { + "type": "string", + }, + "value": [Function], + }, }, "StructuredListRow" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "defaultProps": Object { + "head": false, + "onKeyDown": [Function], + }, + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "head": Object { + "type": "bool", + }, + "label": [Function], + "onKeyDown": Object { + "type": "func", + }, + }, }, "StructuredListSkeleton" => Object { "defaultProps": Object { @@ -6745,8 +6817,32 @@ Map { }, }, "StructuredListWrapper" => Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], + "defaultProps": Object { + "ariaLabel": "Structured list section", + "isCondensed": false, + "isFlush": false, + "selection": false, + }, + "propTypes": Object { + "ariaLabel": Object { + "type": "string", + }, + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "isCondensed": Object { + "type": "bool", + }, + "isFlush": Object { + "type": "bool", + }, + "selection": Object { + "type": "bool", + }, + }, }, "Switch" => Object { "$$typeof": Symbol(react.forward_ref), diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js index 3afc1cbe4985..510347f55049 100644 --- a/packages/react/src/components/StructuredList/StructuredList-test.js +++ b/packages/react/src/components/StructuredList/StructuredList-test.js @@ -25,11 +25,13 @@ describe('StructuredListWrapper', () => { ); it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list`)).toEqual(true); + expect( + wrapper.find('div').hasClass(`${prefix}--structured-list`) + ).toEqual(true); }); it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); + expect(wrapper.find('div').hasClass('extra-class')).toEqual(true); }); it('By default, selection prop is false', () => { @@ -40,9 +42,23 @@ describe('StructuredListWrapper', () => { it('Should add the modifier class for selection when selection prop is true', () => { wrapper.setProps({ selection: true }); - expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual( - true - ); + expect( + wrapper.find('div').hasClass(`${prefix}--structured-list--selection`) + ).toEqual(true); + }); + + it('Should add the modifier class for condensed when isCondensed prop is true', () => { + wrapper.setProps({ isCondensed: true }); + expect( + wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`) + ).toEqual(true); + }); + + it('Should add the modifier class for flush when isFlush prop is true', () => { + wrapper.setProps({ isFlush: true }); + expect( + wrapper.find('div').hasClass(`${prefix}--structured-list--flush`) + ).toEqual(true); }); }); }); @@ -119,16 +135,6 @@ describe('StructuredListRow', () => { ).toEqual(true); }); - it('should use <div> HTML by default (or when label prop is false)', () => { - const wrapperLabel = shallow(<StructuredListRow />); - expect(wrapperLabel.getElement().type).toEqual('div'); - }); - - it('should use <label> HTML when label prop is true', () => { - const wrapperLabel = shallow(<StructuredListRow label />); - expect(wrapperLabel.getElement().type).toEqual('label'); - }); - it('Should accept other props from ...other', () => { const wrapperProps = shallow( <StructuredListRow title="title">hi</StructuredListRow> diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js index 0d779247f53e..e3fc3b829dcf 100644 --- a/packages/react/src/components/StructuredList/StructuredList.js +++ b/packages/react/src/components/StructuredList/StructuredList.js @@ -5,14 +5,15 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import setupGetInstanceId from '../../tools/setupGetInstanceId'; +import { useId } from '../../internal/useId'; import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; -const getInstanceId = setupGetInstanceId(); +const GridSelectedRowStateContext = React.createContext(null); +const GridSelectedRowDispatchContext = React.createContext(null); export function StructuredListWrapper(props) { const { @@ -22,7 +23,6 @@ export function StructuredListWrapper(props) { ariaLabel, isCondensed, isFlush, - border: _border, ...other } = props; const prefix = usePrefix(); @@ -31,11 +31,16 @@ export function StructuredListWrapper(props) { [`${prefix}--structured-list--condensed`]: isCondensed, [`${prefix}--structured-list--flush`]: isFlush, }); + const [selectedRow, setSelectedRow] = React.useState(null); return ( - <div role="table" className={classes} {...other} aria-label={ariaLabel}> - {children} - </div> + <GridSelectedRowStateContext.Provider value={selectedRow}> + <GridSelectedRowDispatchContext.Provider value={setSelectedRow}> + <div role="table" className={classes} {...other} aria-label={ariaLabel}> + {children} + </div> + </GridSelectedRowDispatchContext.Provider> + </GridSelectedRowStateContext.Provider> ); } @@ -45,14 +50,6 @@ StructuredListWrapper.propTypes = { */ ariaLabel: PropTypes.string, - /** - * Specify whether a border should be added to your StructuredListWrapper - */ - border: deprecate( - PropTypes.bool, - `\nThe prop \`border\` will be removed in the next major version of Carbon.` - ), - /** * Provide the contents of your StructuredListWrapper */ @@ -81,9 +78,9 @@ StructuredListWrapper.propTypes = { StructuredListWrapper.defaultProps = { selection: false, - ariaLabel: 'Structured list section', isCondensed: false, isFlush: false, + ariaLabel: 'Structured list section', }; export function StructuredListHead(props) { @@ -145,26 +142,41 @@ StructuredListBody.defaultProps = { onKeyDown: () => {}, }; +const GridRowContext = React.createContext(null); + export function StructuredListRow(props) { - const { onKeyDown, tabIndex, children, className, head, label, ...other } = - props; + const { onKeyDown, children, className, head, ...other } = props; + const [hasFocusWithin, setHasFocusWithin] = useState(false); + const id = useId('grid-input'); + 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, }); - return label ? ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions - <label + return head ? ( + <div role="row" {...other} className={classes}> + {children} + </div> + ) : ( + // eslint-disable-next-line jsx-a11y/interactive-supports-focus + <div {...other} - tabIndex={tabIndex} + role="row" className={classes} + onClick={() => setSelectedRow(id)} + onFocus={() => { + setHasFocusWithin(true); + }} + onBlur={() => { + setHasFocusWithin(false); + }} onKeyDown={onKeyDown}> - {children} - </label> - ) : ( - <div role="row" {...other} className={classes}> - {children} + <GridRowContext.Provider value={value}> + {children} + </GridRowContext.Provider> </div> ); } @@ -188,41 +200,53 @@ StructuredListRow.propTypes = { /** * Specify whether a `<label>` should be used */ - label: PropTypes.bool, + label: deprecate( + PropTypes.bool, + `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.` + ), /** * Provide a handler that is invoked on the key down event for the control, - * if `<label>` is in use */ onKeyDown: PropTypes.func, - - /** - * Specify the tab index of the container node, if `<label>` is in use - */ - tabIndex: PropTypes.number, }; StructuredListRow.defaultProps = { head: false, - label: false, - tabIndex: 0, onKeyDown: () => {}, }; export function StructuredListInput(props) { - const { className, value, name, title, id, ...other } = props; + const defaultId = useId('structureListInput'); + const { + className, + name = `structured-list-input-${defaultId}`, + title, + id, + ...other + } = props; const prefix = usePrefix(); - const classes = classNames(`${prefix}--structured-list-input`, className); - const instanceId = id || getInstanceId(); + const classes = classNames( + `${prefix}--structured-list-input`, + `${prefix}--visually-hidden`, + className + ); + const row = React.useContext(GridRowContext); + const selectedRow = React.useContext(GridSelectedRowStateContext); + const setSelectedRow = React.useContext(GridSelectedRowDispatchContext); return ( <input {...other} type="radio" - tabIndex={-1} - id={instanceId} + tabIndex={0} + checked={row && row.id === selectedRow} + value={row?.id ?? ''} + onChange={(event) => { + setSelectedRow(event.target.value); + }} + id={id ?? defaultId} className={classes} - value={value} name={name} title={title} /> @@ -238,7 +262,10 @@ StructuredListInput.propTypes = { /** * Specify whether the underlying input should be checked by default */ - defaultChecked: PropTypes.bool, + defaultChecked: deprecate( + PropTypes.bool, + `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.` + ), /** * Specify a custom `id` for the input @@ -253,7 +280,10 @@ StructuredListInput.propTypes = { /** * Provide an optional hook that is called each time the input is updated */ - onChange: PropTypes.func, + onChange: deprecate( + PropTypes.func, + `\nThe prop \`onChange\` will be removed in the next major version of Carbon.` + ), /** * Provide a `title` for the input @@ -263,12 +293,13 @@ StructuredListInput.propTypes = { /** * Specify the value of the input */ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + value: deprecate( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + `\nThe prop \`value\` will be removed in the next major version of Carbon.` + ), }; StructuredListInput.defaultProps = { - onChange: () => {}, - value: 'value', title: 'title', }; @@ -281,8 +312,16 @@ export function StructuredListCell(props) { [`${prefix}--structured-list-content--nowrap`]: noWrap, }); + if (head) { + return ( + <span className={classes} role="columnheader" {...other}> + {children} + </span> + ); + } + return ( - <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}> + <div className={classes} role="cell" {...other}> {children} </div> ); @@ -314,3 +353,12 @@ StructuredListCell.defaultProps = { head: false, noWrap: false, }; + +export default { + StructuredListWrapper, + StructuredListHead, + StructuredListBody, + StructuredListRow, + StructuredListInput, + StructuredListCell, +}; diff --git a/packages/react/src/components/StructuredList/next/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js similarity index 98% rename from packages/react/src/components/StructuredList/next/StructuredList.stories.js rename to packages/react/src/components/StructuredList/StructuredList.stories.js index ae5f879dee50..2b7d13e3f404 100644 --- a/packages/react/src/components/StructuredList/next/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -16,8 +16,8 @@ import { StructuredListRow, StructuredListInput, StructuredListCell, -} from './StructuredList'; -import StructuredListSkeleton from '../StructuredList.Skeleton'; +} from './'; +import StructuredListSkeleton from './StructuredList.Skeleton'; const prefix = 'cds'; diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js index 5a66977aa16c..9fc3f1a77021 100644 --- a/packages/react/src/components/StructuredList/index.js +++ b/packages/react/src/components/StructuredList/index.js @@ -4,58 +4,6 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { - StructuredListWrapper as StructuredListWrapperNext, - StructuredListHead as StructuredListHeadNext, - StructuredListInput as StructuredListInputNext, - StructuredListBody as StructuredListBodyNext, - StructuredListRow as StructuredListRowNext, - StructuredListCell as StructuredListCellNext, -} from './next/StructuredList'; -import { - StructuredListWrapper as StructuredListWrapperClassic, - StructuredListHead as StructuredListHeadClassic, - StructuredListInput as StructuredListInputClassic, - StructuredListBody as StructuredListBodyClassic, - StructuredListRow as StructuredListRowClassic, - StructuredListCell as StructuredListCellClassic, -} from './StructuredList'; -import { createComponentToggle } from '../../internal/ComponentToggle'; - -export const StructuredListWrapper = createComponentToggle({ - name: 'StructuredListWrapper', - next: StructuredListWrapperNext, - classic: StructuredListWrapperClassic, -}); - -export const StructuredListHead = createComponentToggle({ - name: 'StructuredListHead', - next: StructuredListHeadNext, - classic: StructuredListHeadClassic, -}); - -export const StructuredListInput = createComponentToggle({ - name: 'StructuredListInput', - next: StructuredListInputNext, - classic: StructuredListInputClassic, -}); - -export const StructuredListBody = createComponentToggle({ - name: 'StructuredListBody', - next: StructuredListBodyNext, - classic: StructuredListBodyClassic, -}); - -export const StructuredListRow = createComponentToggle({ - name: 'StructuredListRow', - next: StructuredListRowNext, - classic: StructuredListRowClassic, -}); - -export const StructuredListCell = createComponentToggle({ - name: 'StructuredListCell', - next: StructuredListCellNext, - classic: StructuredListCellClassic, -}); +export * from './StructuredList'; export { default as StructuredListSkeleton } from './StructuredList.Skeleton'; diff --git a/packages/react/src/components/StructuredList/next/StructuredList-test.js b/packages/react/src/components/StructuredList/next/StructuredList-test.js deleted file mode 100644 index 47d645b139d1..000000000000 --- a/packages/react/src/components/StructuredList/next/StructuredList-test.js +++ /dev/null @@ -1,205 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import { - StructuredListWrapper, - StructuredListHead, - StructuredListInput, - StructuredListBody, - StructuredListRow, - StructuredListCell, -} from '../StructuredList'; -import { mount, shallow } from 'enzyme'; - -const prefix = 'cds'; - -describe('StructuredListWrapper', () => { - describe('Renders as expected', () => { - const wrapper = shallow( - <StructuredListWrapper className="extra-class">hi</StructuredListWrapper> - ); - - it('should have the expected classes', () => { - expect( - wrapper.find('div').hasClass(`${prefix}--structured-list`) - ).toEqual(true); - }); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.find('div').hasClass('extra-class')).toEqual(true); - }); - - it('By default, selection prop is false', () => { - expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual( - false - ); - }); - - it('Should add the modifier class for selection when selection prop is true', () => { - wrapper.setProps({ selection: true }); - expect( - wrapper.find('div').hasClass(`${prefix}--structured-list--selection`) - ).toEqual(true); - }); - - it('Should add the modifier class for condensed when isCondensed prop is true', () => { - wrapper.setProps({ isCondensed: true }); - expect( - wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`) - ).toEqual(true); - }); - - it('Should add the modifier class for flush when isFlush prop is true', () => { - wrapper.setProps({ isFlush: true }); - expect( - wrapper.find('div').hasClass(`${prefix}--structured-list--flush`) - ).toEqual(true); - }); - }); -}); - -describe('StructuredListHead', () => { - describe('Renders as expected', () => { - const wrapper = shallow( - <StructuredListHead className="extra-class">hi</StructuredListHead> - ); - - it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list-thead`)).toEqual( - true - ); - }); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('Should accept other props from ...other', () => { - const wrapperProps = shallow( - <StructuredListHead title="title">hi</StructuredListHead> - ); - expect(wrapperProps.props().title).toEqual('title'); - }); - }); -}); - -describe('StructuredListInput', () => { - describe('Renders as expected', () => { - const wrapper = shallow(<StructuredListInput className="extra-class" />); - - it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list-input`)).toEqual( - true - ); - }); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('Should accept other props from ...other', () => { - const wrapperProps = shallow(<StructuredListInput title="title" />); - expect(wrapperProps.props().title).toEqual('title'); - }); - - it('Should render unique id with multiple inputs when no id prop is given', () => { - const wrapper1 = mount(<StructuredListInput className="extra-class" />); - const wrapper2 = mount(<StructuredListInput className="extra-class" />); - expect(wrapper1.find('[id]')).not.toEqual(wrapper2.find('[id]')); - }); - }); -}); - -describe('StructuredListRow', () => { - describe('Renders as expected', () => { - const wrapper = shallow(<StructuredListRow className="extra-class" />); - - it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list-row`)).toEqual(true); - }); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('should use correct class when head prop is true', () => { - wrapper.setProps({ head: true }); - - expect( - wrapper.hasClass(`${prefix}--structured-list-row--header-row`) - ).toEqual(true); - }); - - it('Should accept other props from ...other', () => { - const wrapperProps = shallow( - <StructuredListRow title="title">hi</StructuredListRow> - ); - expect(wrapperProps.props().title).toEqual('title'); - }); - }); -}); - -describe('StructuredListBody', () => { - describe('Renders as expected', () => { - const wrapper = shallow( - <StructuredListBody className="extra-class">hi</StructuredListBody> - ); - - it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list-tbody`)).toEqual( - true - ); - }); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('Should accept other props from ...other', () => { - const wrapperProps = shallow( - <StructuredListBody title="title">hi</StructuredListBody> - ); - expect(wrapperProps.props().title).toEqual('title'); - }); - }); -}); - -describe('StructuredListCell', () => { - describe('Renders as expected', () => { - const wrapper = shallow( - <StructuredListCell className="extra-class">hi</StructuredListCell> - ); - - it('Should add extra classes that are passed via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('should have the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--structured-list-td`)).toEqual(true); - }); - - it('should use correct class when head prop is true', () => { - wrapper.setProps({ head: true }); - expect(wrapper.hasClass(`${prefix}--structured-list-th`)).toEqual(true); - }); - - it('should use correct class when noWrap prop is true', () => { - wrapper.setProps({ noWrap: true }); - expect( - wrapper.hasClass(`${prefix}--structured-list-content--nowrap`) - ).toEqual(true); - }); - - it('Should accept other props from ...other', () => { - const wrapperProps = shallow( - <StructuredListCell title="title">hi</StructuredListCell> - ); - expect(wrapperProps.props().title).toEqual('title'); - }); - }); -}); diff --git a/packages/react/src/components/StructuredList/next/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js deleted file mode 100644 index d502d57a1d01..000000000000 --- a/packages/react/src/components/StructuredList/next/StructuredList.js +++ /dev/null @@ -1,364 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, { useState } 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); - -export function StructuredListWrapper(props) { - const { - children, - selection, - className, - ariaLabel, - 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, - }); - const [selectedRow, setSelectedRow] = React.useState(null); - - return ( - <GridSelectedRowStateContext.Provider value={selectedRow}> - <GridSelectedRowDispatchContext.Provider value={setSelectedRow}> - <div role="table" className={classes} {...other} aria-label={ariaLabel}> - {children} - </div> - </GridSelectedRowDispatchContext.Provider> - </GridSelectedRowStateContext.Provider> - ); -} - -StructuredListWrapper.propTypes = { - /** - * Specify a label to be read by screen readers on the container node - */ - ariaLabel: PropTypes.string, - - /** - * Provide the contents of your StructuredListWrapper - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the container node - */ - className: PropTypes.string, - - /** - * Specify if structured list is condensed, default is false - */ - isCondensed: PropTypes.bool, - - /** - * Specify if structured list is flush, default is false - */ - isFlush: PropTypes.bool, - - /** - * Specify whether your StructuredListWrapper should have selections - */ - selection: PropTypes.bool, -}; - -StructuredListWrapper.defaultProps = { - selection: false, - isCondensed: false, - isFlush: false, - ariaLabel: 'Structured list section', -}; - -export function StructuredListHead(props) { - const { children, className, ...other } = props; - const prefix = usePrefix(); - const classes = classNames(`${prefix}--structured-list-thead`, className); - - return ( - <div role="rowgroup" className={classes} {...other}> - {children} - </div> - ); -} - -StructuredListHead.propTypes = { - /** - * Provide the contents of your StructuredListHead - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the node - */ - className: PropTypes.string, -}; - -export function StructuredListBody(props) { - const { children, className, ...other } = props; - const prefix = usePrefix(); - const classes = classNames(`${prefix}--structured-list-tbody`, className); - - return ( - <div className={classes} role="rowgroup" {...other}> - {children} - </div> - ); -} - -StructuredListBody.propTypes = { - /** - * Provide the contents of your StructuredListBody - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the container node - */ - className: PropTypes.string, - - head: PropTypes.bool, - - /** - * Provide a handler that is invoked on the key down event for the control - */ - onKeyDown: PropTypes.func, -}; - -StructuredListBody.defaultProps = { - onKeyDown: () => {}, -}; - -const GridRowContext = React.createContext(null); - -export function StructuredListRow(props) { - const { onKeyDown, children, className, head, ...other } = props; - const [hasFocusWithin, setHasFocusWithin] = useState(false); - const id = useId('grid-input'); - 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, - }); - - return head ? ( - <div role="row" {...other} className={classes}> - {children} - </div> - ) : ( - // eslint-disable-next-line jsx-a11y/interactive-supports-focus - <div - {...other} - role="row" - className={classes} - onClick={() => setSelectedRow(id)} - onFocus={() => { - setHasFocusWithin(true); - }} - onBlur={() => { - setHasFocusWithin(false); - }} - onKeyDown={onKeyDown}> - <GridRowContext.Provider value={value}> - {children} - </GridRowContext.Provider> - </div> - ); -} - -StructuredListRow.propTypes = { - /** - * Provide the contents of your StructuredListRow - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the container node - */ - className: PropTypes.string, - - /** - * Specify whether your StructuredListRow should be used as a header row - */ - head: PropTypes.bool, - - /** - * Specify whether a `<label>` should be used - */ - label: deprecate( - PropTypes.bool, - `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.` - ), - - /** - * Provide a handler that is invoked on the key down event for the control, - */ - onKeyDown: PropTypes.func, -}; - -StructuredListRow.defaultProps = { - head: false, - onKeyDown: () => {}, -}; - -export function StructuredListInput(props) { - const defaultId = useId('structureListInput'); - const { - className, - name = `structured-list-input-${defaultId}`, - title, - id, - ...other - } = props; - const prefix = usePrefix(); - const classes = classNames( - `${prefix}--structured-list-input`, - `${prefix}--visually-hidden`, - className - ); - const row = React.useContext(GridRowContext); - const selectedRow = React.useContext(GridSelectedRowStateContext); - const setSelectedRow = React.useContext(GridSelectedRowDispatchContext); - - return ( - <input - {...other} - type="radio" - tabIndex={0} - checked={row && row.id === selectedRow} - value={row?.id ?? ''} - onChange={(event) => { - setSelectedRow(event.target.value); - }} - id={id ?? defaultId} - className={classes} - name={name} - title={title} - /> - ); -} - -StructuredListInput.propTypes = { - /** - * Specify an optional className to be applied to the input - */ - className: PropTypes.string, - - /** - * Specify whether the underlying input should be checked by default - */ - defaultChecked: deprecate( - PropTypes.bool, - `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.` - ), - - /** - * Specify a custom `id` for the input - */ - id: PropTypes.string, - - /** - * Provide a `name` for the input - */ - name: PropTypes.string, - - /** - * Provide an optional hook that is called each time the input is updated - */ - onChange: deprecate( - PropTypes.func, - `\nThe prop \`onChange\` will be removed in the next major version of Carbon.` - ), - - /** - * Provide a `title` for the input - */ - title: PropTypes.string, - - /** - * Specify the value of the input - */ - value: deprecate( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - `\nThe prop \`value\` will be removed in the next major version of Carbon.` - ), -}; - -StructuredListInput.defaultProps = { - title: 'title', -}; - -export function StructuredListCell(props) { - 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, - }); - - if (head) { - return ( - <span className={classes} role="columnheader" {...other}> - {children} - </span> - ); - } - - return ( - <div className={classes} role="cell" {...other}> - {children} - </div> - ); -} - -StructuredListCell.propTypes = { - /** - * Provide the contents of your StructuredListCell - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the container node - */ - className: PropTypes.string, - - /** - * Specify whether your StructuredListCell should be used as a header cell - */ - head: PropTypes.bool, - - /** - * Specify whether your StructuredListCell should have text wrapping - */ - noWrap: PropTypes.bool, -}; - -StructuredListCell.defaultProps = { - head: false, - noWrap: false, -}; - -export default { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListInput, - StructuredListCell, -}; diff --git a/packages/react/src/components/StructuredList/next/StructuredList.mdx b/packages/react/src/components/StructuredList/next/StructuredList.mdx deleted file mode 100644 index 6632318ffd71..000000000000 --- a/packages/react/src/components/StructuredList/next/StructuredList.mdx +++ /dev/null @@ -1,23 +0,0 @@ -import { Props } from '@storybook/addon-docs'; - -# StructuredList - -[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/StructuredList) - | -[Usage guidelines](https://www.carbondesignsystem.com/components/structured-list/usage) - | -[Accessibility](https://www.carbondesignsystem.com/components/structured-list/accessibility) - -## Table of Contents - -## Overview - -## Component API - -<Props /> - -## Feedback - -Help us improve this component by providing feedback, asking questions on Slack, -or updating this file on -[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/StructuredList/StructuredList.mdx).