From 8d22c3d25d6f6600a21362868e39add419b72aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:29:00 +0200 Subject: [PATCH 01/13] tweak exclusion config --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 82ccf8a..bc5f566 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -38,7 +38,7 @@ export default { require('tailwindcss-animate'), require('tailwindcss-react-aria-components'), scopedPreflightStyles({ - isolationStrategy: isolateOutsideOfContainer(['.es-uic-no-css-reset', '.wp-list-table'], { + isolationStrategy: isolateOutsideOfContainer(['.es-uic-no-css-reset', '.wp-admin'], { plus: '.es-uic-has-css-reset', }), }), From 14b2cec670c7a2918f357172f22d12a58ce58c9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:29:46 +0200 Subject: [PATCH 02/13] tweak switch transforms --- lib/components/toggle/switch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/toggle/switch.jsx b/lib/components/toggle/switch.jsx index fdc0a4b..3b55848 100644 --- a/lib/components/toggle/switch.jsx +++ b/lib/components/toggle/switch.jsx @@ -54,7 +54,7 @@ export const Switch = (props) => { Date: Wed, 11 Sep 2024 15:30:35 +0200 Subject: [PATCH 03/13] tweak exports --- lib/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/index.js b/lib/components/index.js index a08fd7a..8f1caaa 100644 --- a/lib/components/index.js +++ b/lib/components/index.js @@ -9,7 +9,7 @@ export { ColorSwatch } from './color-pickers/color-swatch'; export { ColorPicker } from './color-pickers/color-picker'; export { ColumnConfigSlider, ColumnConfigSliderOutput } from './slider/column-config-slider'; export { DraggableList } from './draggable-list/draggable-list'; -export { DraggableListItem } from './draggable-list/draggable-list-item'; +export { DraggableListItem, DraggableListItemHandle } from './draggable-list/draggable-list-item'; export { Expandable } from './expandable/expandable'; export { FilePlaceholder } from './placeholders/file-placeholder'; export { GradientEditor } from './color-pickers/gradient-editor'; From a4cf096e23666bbedebd05ebcbc1eb2160bee34a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 11 Sep 2024 17:13:14 +0200 Subject: [PATCH 04/13] rework draggablelist --- .../draggable-list/draggable-list-context.js | 3 + .../draggable-list/draggable-list-item.jsx | 70 ++++--- .../draggable-list/draggable-list.jsx | 198 ++++++++++-------- 3 files changed, 156 insertions(+), 115 deletions(-) create mode 100644 lib/components/draggable-list/draggable-list-context.js diff --git a/lib/components/draggable-list/draggable-list-context.js b/lib/components/draggable-list/draggable-list-context.js new file mode 100644 index 0000000..9af06d6 --- /dev/null +++ b/lib/components/draggable-list/draggable-list-context.js @@ -0,0 +1,3 @@ +import { createContext } from 'react'; + +export const DraggableListContext = createContext(); diff --git a/lib/components/draggable-list/draggable-list-item.jsx b/lib/components/draggable-list/draggable-list-item.jsx index 6232818..650857f 100644 --- a/lib/components/draggable-list/draggable-list-item.jsx +++ b/lib/components/draggable-list/draggable-list-item.jsx @@ -1,9 +1,8 @@ -import { GridListItem } from 'react-aria-components'; -import { Button } from '../button/button'; -import { icons } from '../../icons/icons'; import { clsx } from 'clsx/lite'; import { __ } from '@wordpress/i18n'; import { RichLabel } from '../rich-label/rich-label'; +import { DraggableListContext } from './draggable-list-context'; +import { useContext } from 'react'; /** * A DraggableList item. @@ -15,7 +14,8 @@ import { RichLabel } from '../rich-label/rich-label'; * @param {string} [props.subtitle] - Subtitle to display. * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label. * @param {string} [props.textValue] - The text value of the item. - * @param {string} [props.className] - Classes to pass to the item. + * @param {string} [props.className] - Classes to pass to the label. + * @param {string} [props.containerClassName] - Classes to pass to the item container. * * @returns {JSX.Element} The DraggableList component. * @@ -24,46 +24,52 @@ import { RichLabel } from '../rich-label/rich-label'; * @preserve */ export const DraggableListItem = (props) => { - const { children, icon, label, subtitle, 'aria-label': ariaLabel, className, textValue, ...rest } = props; + const { children, icon, label, subtitle, className, containerClassName, textValue, itemIndex, ...rest } = props; - let a11yLabel = textValue; + const { labelAsHandle } = useContext(DraggableListContext); - if (label?.length > 0) { - a11yLabel = label; - } - - if (a11yLabel === '' || !a11yLabel) { - a11yLabel = __('New item', 'eightshift-ui-components'); - } + const labelElement = ( +