@wordpress/components 32.0.2-next.v.0 → 32.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -1
- package/build/alignment-matrix-control/cell.cjs +6 -121
- package/build/alignment-matrix-control/cell.cjs.map +2 -2
- package/build/alignment-matrix-control/icon.cjs +2 -3
- package/build/alignment-matrix-control/icon.cjs.map +2 -2
- package/build/alignment-matrix-control/index.cjs +6 -121
- package/build/alignment-matrix-control/index.cjs.map +2 -2
- package/build/angle-picker-control/angle-circle.cjs +6 -85
- package/build/angle-picker-control/angle-circle.cjs.map +2 -2
- package/build/autocomplete/autocompleter-ui.cjs +1 -2
- package/build/autocomplete/autocompleter-ui.cjs.map +2 -2
- package/build/box-control/input-control.cjs +8 -12
- package/build/box-control/input-control.cjs.map +2 -2
- package/build/button/index.cjs +6 -12
- package/build/button/index.cjs.map +2 -2
- package/build/calendar/date-calendar/index.cjs +2 -2
- package/build/calendar/date-calendar/index.cjs.map +2 -2
- package/build/calendar/date-range-calendar/index.cjs +4 -6
- package/build/calendar/date-range-calendar/index.cjs.map +2 -2
- package/build/card/card/hook.cjs +1 -2
- package/build/card/card/hook.cjs.map +2 -2
- package/build/color-palette/utils.cjs +2 -2
- package/build/color-palette/utils.cjs.map +2 -2
- package/build/combobox-control/index.cjs +1 -2
- package/build/combobox-control/index.cjs.map +2 -2
- package/build/composite/group-label.cjs +1 -2
- package/build/composite/group-label.cjs.map +2 -2
- package/build/composite/group.cjs +1 -2
- package/build/composite/group.cjs.map +2 -2
- package/build/composite/hover.cjs +1 -2
- package/build/composite/hover.cjs.map +2 -2
- package/build/composite/index.cjs +1 -1
- package/build/composite/index.cjs.map +2 -2
- package/build/composite/item.cjs +1 -2
- package/build/composite/item.cjs.map +2 -2
- package/build/composite/legacy/index.cjs +1 -2
- package/build/composite/legacy/index.cjs.map +2 -2
- package/build/composite/row.cjs +1 -2
- package/build/composite/row.cjs.map +2 -2
- package/build/composite/typeahead.cjs +1 -2
- package/build/composite/typeahead.cjs.map +2 -2
- package/build/confirm-dialog/component.cjs +2 -2
- package/build/confirm-dialog/component.cjs.map +2 -2
- package/build/context/context-system-provider.cjs +1 -1
- package/build/context/context-system-provider.cjs.map +2 -2
- package/build/custom-gradient-picker/index.cjs +1 -2
- package/build/custom-gradient-picker/index.cjs.map +2 -2
- package/build/custom-gradient-picker/utils.cjs +1 -1
- package/build/custom-gradient-picker/utils.cjs.map +2 -2
- package/build/custom-select-control/index.cjs +2 -3
- package/build/custom-select-control/index.cjs.map +2 -2
- package/build/custom-select-control-v2/custom-select.cjs +1 -1
- package/build/custom-select-control-v2/custom-select.cjs.map +2 -2
- package/build/custom-select-control-v2/item.cjs +2 -3
- package/build/custom-select-control-v2/item.cjs.map +2 -2
- package/build/date-time/date/index.cjs +1 -1
- package/build/date-time/date/index.cjs.map +2 -2
- package/build/date-time/time/index.cjs +2 -2
- package/build/date-time/time/index.cjs.map +2 -2
- package/build/date-time/utils.cjs +1 -2
- package/build/date-time/utils.cjs.map +2 -2
- package/build/divider/styles.cjs +2 -2
- package/build/divider/styles.cjs.map +2 -2
- package/build/dropdown-menu/index.cjs +2 -3
- package/build/dropdown-menu/index.cjs.map +2 -2
- package/build/duotone-picker/duotone-picker.cjs +1 -1
- package/build/duotone-picker/duotone-picker.cjs.map +2 -2
- package/build/flex/flex/hook.cjs +1 -1
- package/build/flex/flex/hook.cjs.map +2 -2
- package/build/focal-point-picker/index.cjs +1 -2
- package/build/focal-point-picker/index.cjs.map +2 -2
- package/build/font-size-picker/font-size-picker-select.cjs +1 -2
- package/build/font-size-picker/font-size-picker-select.cjs.map +2 -2
- package/build/font-size-picker/index.cjs +2 -2
- package/build/font-size-picker/index.cjs.map +2 -2
- package/build/guide/index.cjs +2 -3
- package/build/guide/index.cjs.map +2 -2
- package/build/higher-order/navigate-regions/index.cjs +1 -2
- package/build/higher-order/navigate-regions/index.cjs.map +2 -2
- package/build/input-control/input-field.cjs +1 -1
- package/build/input-control/input-field.cjs.map +2 -2
- package/build/input-control/reducer/reducer.cjs +2 -4
- package/build/input-control/reducer/reducer.cjs.map +2 -2
- package/build/keyboard-shortcuts/index.cjs +1 -1
- package/build/keyboard-shortcuts/index.cjs.map +2 -2
- package/build/menu/index.cjs +1 -1
- package/build/menu/index.cjs.map +2 -2
- package/build/menu/item.cjs +1 -1
- package/build/menu/item.cjs.map +2 -2
- package/build/menu/popover.cjs +2 -2
- package/build/menu/popover.cjs.map +2 -2
- package/build/modal/index.cjs +2 -4
- package/build/modal/index.cjs.map +2 -2
- package/build/navigator/navigator/component.cjs +8 -13
- package/build/navigator/navigator/component.cjs.map +2 -2
- package/build/navigator/navigator-screen/component.cjs +1 -1
- package/build/navigator/navigator-screen/component.cjs.map +2 -2
- package/build/number-control/index.cjs +2 -3
- package/build/number-control/index.cjs.map +2 -2
- package/build/palette-edit/index.cjs +3 -4
- package/build/palette-edit/index.cjs.map +2 -2
- package/build/popover/index.cjs +1 -2
- package/build/popover/index.cjs.map +2 -2
- package/build/popover/overlay-middlewares.cjs +1 -2
- package/build/popover/overlay-middlewares.cjs.map +2 -2
- package/build/popover/utils.cjs +3 -8
- package/build/popover/utils.cjs.map +2 -2
- package/build/private-apis.cjs +1 -0
- package/build/private-apis.cjs.map +2 -2
- package/build/radio-group/index.cjs +1 -1
- package/build/radio-group/index.cjs.map +2 -2
- package/build/range-control/index.cjs +4 -4
- package/build/range-control/index.cjs.map +2 -2
- package/build/range-control/utils.cjs +1 -1
- package/build/range-control/utils.cjs.map +2 -2
- package/build/search-control/index.cjs +3 -3
- package/build/search-control/index.cjs.map +2 -2
- package/build/slot-fill/fill.cjs +1 -2
- package/build/slot-fill/fill.cjs.map +2 -2
- package/build/slot-fill/slot.cjs +1 -2
- package/build/slot-fill/slot.cjs.map +2 -2
- package/build/tabs/tab.cjs +1 -2
- package/build/tabs/tab.cjs.map +2 -2
- package/build/tabs/tablist.cjs +7 -11
- package/build/tabs/tablist.cjs.map +2 -2
- package/build/toggle-group-control/toggle-group-control/as-radio-group.cjs +1 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.cjs.map +2 -2
- package/build/toggle-group-control/toggle-group-control/utils.cjs +1 -1
- package/build/toggle-group-control/toggle-group-control/utils.cjs.map +2 -2
- package/build/tree-grid/index.cjs +1 -2
- package/build/tree-grid/index.cjs.map +2 -2
- package/build/unit-control/index.cjs +4 -5
- package/build/unit-control/index.cjs.map +2 -2
- package/build/unit-control/utils.cjs +2 -2
- package/build/unit-control/utils.cjs.map +2 -2
- package/build/utils/element-rect.cjs +3 -4
- package/build/utils/element-rect.cjs.map +2 -2
- package/build/utils/font.cjs +1 -2
- package/build/utils/font.cjs.map +2 -2
- package/build/utils/strings.cjs +1 -2
- package/build/utils/strings.cjs.map +2 -2
- package/build/utils/use-deprecated-props.cjs +1 -1
- package/build/utils/use-deprecated-props.cjs.map +2 -2
- package/build/utils/values.cjs +1 -2
- package/build/utils/values.cjs.map +2 -2
- package/build/validated-form-controls/components/combobox-control.cjs +1 -1
- package/build/validated-form-controls/components/combobox-control.cjs.map +2 -2
- package/build/validated-form-controls/components/toggle-control.cjs +1 -1
- package/build/validated-form-controls/components/toggle-control.cjs.map +2 -2
- package/build/validated-form-controls/control-with-error.cjs +3 -6
- package/build/validated-form-controls/control-with-error.cjs.map +2 -2
- package/build-module/alignment-matrix-control/cell.mjs +6 -121
- package/build-module/alignment-matrix-control/cell.mjs.map +2 -2
- package/build-module/alignment-matrix-control/icon.mjs +2 -3
- package/build-module/alignment-matrix-control/icon.mjs.map +2 -2
- package/build-module/alignment-matrix-control/index.mjs +6 -121
- package/build-module/alignment-matrix-control/index.mjs.map +2 -2
- package/build-module/angle-picker-control/angle-circle.mjs +6 -85
- package/build-module/angle-picker-control/angle-circle.mjs.map +2 -2
- package/build-module/autocomplete/autocompleter-ui.mjs +1 -2
- package/build-module/autocomplete/autocompleter-ui.mjs.map +2 -2
- package/build-module/box-control/input-control.mjs +8 -12
- package/build-module/box-control/input-control.mjs.map +2 -2
- package/build-module/button/index.mjs +6 -12
- package/build-module/button/index.mjs.map +2 -2
- package/build-module/calendar/date-calendar/index.mjs +2 -2
- package/build-module/calendar/date-calendar/index.mjs.map +2 -2
- package/build-module/calendar/date-range-calendar/index.mjs +4 -6
- package/build-module/calendar/date-range-calendar/index.mjs.map +2 -2
- package/build-module/card/card/hook.mjs +1 -2
- package/build-module/card/card/hook.mjs.map +2 -2
- package/build-module/color-palette/utils.mjs +2 -2
- package/build-module/color-palette/utils.mjs.map +2 -2
- package/build-module/combobox-control/index.mjs +1 -2
- package/build-module/combobox-control/index.mjs.map +2 -2
- package/build-module/composite/group-label.mjs +1 -2
- package/build-module/composite/group-label.mjs.map +2 -2
- package/build-module/composite/group.mjs +1 -2
- package/build-module/composite/group.mjs.map +2 -2
- package/build-module/composite/hover.mjs +1 -2
- package/build-module/composite/hover.mjs.map +2 -2
- package/build-module/composite/index.mjs +1 -1
- package/build-module/composite/index.mjs.map +2 -2
- package/build-module/composite/item.mjs +1 -2
- package/build-module/composite/item.mjs.map +2 -2
- package/build-module/composite/legacy/index.mjs +1 -2
- package/build-module/composite/legacy/index.mjs.map +2 -2
- package/build-module/composite/row.mjs +1 -2
- package/build-module/composite/row.mjs.map +2 -2
- package/build-module/composite/typeahead.mjs +1 -2
- package/build-module/composite/typeahead.mjs.map +2 -2
- package/build-module/confirm-dialog/component.mjs +2 -2
- package/build-module/confirm-dialog/component.mjs.map +2 -2
- package/build-module/context/context-system-provider.mjs +1 -1
- package/build-module/context/context-system-provider.mjs.map +2 -2
- package/build-module/custom-gradient-picker/index.mjs +1 -2
- package/build-module/custom-gradient-picker/index.mjs.map +2 -2
- package/build-module/custom-gradient-picker/utils.mjs +1 -1
- package/build-module/custom-gradient-picker/utils.mjs.map +2 -2
- package/build-module/custom-select-control/index.mjs +2 -3
- package/build-module/custom-select-control/index.mjs.map +2 -2
- package/build-module/custom-select-control-v2/custom-select.mjs +1 -1
- package/build-module/custom-select-control-v2/custom-select.mjs.map +2 -2
- package/build-module/custom-select-control-v2/item.mjs +2 -3
- package/build-module/custom-select-control-v2/item.mjs.map +2 -2
- package/build-module/date-time/date/index.mjs +1 -1
- package/build-module/date-time/date/index.mjs.map +2 -2
- package/build-module/date-time/time/index.mjs +2 -2
- package/build-module/date-time/time/index.mjs.map +2 -2
- package/build-module/date-time/utils.mjs +1 -2
- package/build-module/date-time/utils.mjs.map +2 -2
- package/build-module/divider/styles.mjs +2 -2
- package/build-module/divider/styles.mjs.map +2 -2
- package/build-module/dropdown-menu/index.mjs +2 -3
- package/build-module/dropdown-menu/index.mjs.map +2 -2
- package/build-module/duotone-picker/duotone-picker.mjs +1 -1
- package/build-module/duotone-picker/duotone-picker.mjs.map +2 -2
- package/build-module/flex/flex/hook.mjs +1 -1
- package/build-module/flex/flex/hook.mjs.map +2 -2
- package/build-module/focal-point-picker/index.mjs +1 -2
- package/build-module/focal-point-picker/index.mjs.map +2 -2
- package/build-module/font-size-picker/font-size-picker-select.mjs +1 -2
- package/build-module/font-size-picker/font-size-picker-select.mjs.map +2 -2
- package/build-module/font-size-picker/index.mjs +2 -2
- package/build-module/font-size-picker/index.mjs.map +2 -2
- package/build-module/guide/index.mjs +2 -3
- package/build-module/guide/index.mjs.map +2 -2
- package/build-module/higher-order/navigate-regions/index.mjs +1 -2
- package/build-module/higher-order/navigate-regions/index.mjs.map +2 -2
- package/build-module/input-control/input-field.mjs +1 -1
- package/build-module/input-control/input-field.mjs.map +2 -2
- package/build-module/input-control/reducer/reducer.mjs +2 -4
- package/build-module/input-control/reducer/reducer.mjs.map +2 -2
- package/build-module/keyboard-shortcuts/index.mjs +1 -1
- package/build-module/keyboard-shortcuts/index.mjs.map +2 -2
- package/build-module/menu/index.mjs +1 -1
- package/build-module/menu/index.mjs.map +2 -2
- package/build-module/menu/item.mjs +1 -1
- package/build-module/menu/item.mjs.map +2 -2
- package/build-module/menu/popover.mjs +2 -2
- package/build-module/menu/popover.mjs.map +2 -2
- package/build-module/modal/index.mjs +2 -4
- package/build-module/modal/index.mjs.map +2 -2
- package/build-module/navigator/navigator/component.mjs +8 -13
- package/build-module/navigator/navigator/component.mjs.map +2 -2
- package/build-module/navigator/navigator-screen/component.mjs +1 -1
- package/build-module/navigator/navigator-screen/component.mjs.map +2 -2
- package/build-module/number-control/index.mjs +2 -3
- package/build-module/number-control/index.mjs.map +2 -2
- package/build-module/palette-edit/index.mjs +3 -4
- package/build-module/palette-edit/index.mjs.map +2 -2
- package/build-module/popover/index.mjs +1 -2
- package/build-module/popover/index.mjs.map +2 -2
- package/build-module/popover/overlay-middlewares.mjs +1 -2
- package/build-module/popover/overlay-middlewares.mjs.map +2 -2
- package/build-module/popover/utils.mjs +3 -8
- package/build-module/popover/utils.mjs.map +2 -2
- package/build-module/private-apis.mjs +2 -1
- package/build-module/private-apis.mjs.map +2 -2
- package/build-module/radio-group/index.mjs +1 -1
- package/build-module/radio-group/index.mjs.map +2 -2
- package/build-module/range-control/index.mjs +4 -4
- package/build-module/range-control/index.mjs.map +2 -2
- package/build-module/range-control/utils.mjs +1 -1
- package/build-module/range-control/utils.mjs.map +2 -2
- package/build-module/search-control/index.mjs +3 -3
- package/build-module/search-control/index.mjs.map +2 -2
- package/build-module/slot-fill/fill.mjs +1 -2
- package/build-module/slot-fill/fill.mjs.map +2 -2
- package/build-module/slot-fill/slot.mjs +1 -2
- package/build-module/slot-fill/slot.mjs.map +2 -2
- package/build-module/tabs/tab.mjs +1 -2
- package/build-module/tabs/tab.mjs.map +2 -2
- package/build-module/tabs/tablist.mjs +7 -11
- package/build-module/tabs/tablist.mjs.map +2 -2
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs +1 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs.map +2 -2
- package/build-module/toggle-group-control/toggle-group-control/utils.mjs +1 -1
- package/build-module/toggle-group-control/toggle-group-control/utils.mjs.map +2 -2
- package/build-module/tree-grid/index.mjs +1 -2
- package/build-module/tree-grid/index.mjs.map +2 -2
- package/build-module/unit-control/index.mjs +4 -5
- package/build-module/unit-control/index.mjs.map +2 -2
- package/build-module/unit-control/utils.mjs +2 -2
- package/build-module/unit-control/utils.mjs.map +2 -2
- package/build-module/utils/element-rect.mjs +3 -4
- package/build-module/utils/element-rect.mjs.map +2 -2
- package/build-module/utils/font.mjs +1 -2
- package/build-module/utils/font.mjs.map +2 -2
- package/build-module/utils/strings.mjs +1 -2
- package/build-module/utils/strings.mjs.map +2 -2
- package/build-module/utils/use-deprecated-props.mjs +1 -1
- package/build-module/utils/use-deprecated-props.mjs.map +2 -2
- package/build-module/utils/values.mjs +1 -2
- package/build-module/utils/values.mjs.map +2 -2
- package/build-module/validated-form-controls/components/combobox-control.mjs +1 -1
- package/build-module/validated-form-controls/components/combobox-control.mjs.map +2 -2
- package/build-module/validated-form-controls/components/toggle-control.mjs +1 -1
- package/build-module/validated-form-controls/components/toggle-control.mjs.map +2 -2
- package/build-module/validated-form-controls/control-with-error.mjs +3 -6
- package/build-module/validated-form-controls/control-with-error.mjs.map +2 -2
- package/build-types/private-apis.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/private-apis.ts +2 -0
|
@@ -22,7 +22,7 @@ var DateCalendar = ({
|
|
|
22
22
|
mode: "single"
|
|
23
23
|
});
|
|
24
24
|
const onChange = useCallback((selected2, triggerDate, modifiers, e) => {
|
|
25
|
-
onSelect?.(selected2
|
|
25
|
+
onSelect?.(selected2 ?? void 0, triggerDate, modifiers, e);
|
|
26
26
|
}, [onSelect]);
|
|
27
27
|
const [selected, setSelected] = useControlledValue({
|
|
28
28
|
defaultValue: defaultSelected,
|
|
@@ -35,7 +35,7 @@ var DateCalendar = ({
|
|
|
35
35
|
...props,
|
|
36
36
|
mode: "single",
|
|
37
37
|
numberOfMonths: clampNumberOfMonths(numberOfMonths),
|
|
38
|
-
selected: selected
|
|
38
|
+
selected: selected ?? void 0,
|
|
39
39
|
onSelect: setSelected
|
|
40
40
|
});
|
|
41
41
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/calendar/date-calendar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { DayPicker } from 'react-day-picker';\nimport { enUS } from 'react-day-picker/locale';\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { COMMON_PROPS } from '../utils/constants';\nimport { clampNumberOfMonths } from '../utils/misc';\nimport { useControlledValue } from '../../utils/hooks';\nimport { useLocalizationProps } from '../utils/use-localization-props';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * `DateCalendar` is a React component that provides a customizable calendar\n * interface for **single date** selection.\n *\n * The component is built with accessibility in mind and follows ARIA best\n * practices for calendar widgets. It provides keyboard navigation, screen reader\n * support, and customizable labels for internationalization.\n */\nexport const DateCalendar = ({\n defaultSelected,\n selected: selectedProp,\n onSelect,\n numberOfMonths = 1,\n locale = enUS,\n timeZone,\n ...props\n}) => {\n const localizationProps = useLocalizationProps({\n locale,\n timeZone,\n mode: 'single'\n });\n const onChange = useCallback((selected, triggerDate, modifiers, e) => {\n // Convert internal `null` to `undefined` for the public event handler.\n onSelect?.(selected
|
|
5
|
-
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAIrB,SAAS,mBAAmB;AAI5B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,OAAO,YAAY;AASrB,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,qBAAqB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,WAAW,YAAY,CAACA,WAAU,aAAa,WAAW,MAAM;AAEpE,eAAWA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { DayPicker } from 'react-day-picker';\nimport { enUS } from 'react-day-picker/locale';\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { COMMON_PROPS } from '../utils/constants';\nimport { clampNumberOfMonths } from '../utils/misc';\nimport { useControlledValue } from '../../utils/hooks';\nimport { useLocalizationProps } from '../utils/use-localization-props';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * `DateCalendar` is a React component that provides a customizable calendar\n * interface for **single date** selection.\n *\n * The component is built with accessibility in mind and follows ARIA best\n * practices for calendar widgets. It provides keyboard navigation, screen reader\n * support, and customizable labels for internationalization.\n */\nexport const DateCalendar = ({\n defaultSelected,\n selected: selectedProp,\n onSelect,\n numberOfMonths = 1,\n locale = enUS,\n timeZone,\n ...props\n}) => {\n const localizationProps = useLocalizationProps({\n locale,\n timeZone,\n mode: 'single'\n });\n const onChange = useCallback((selected, triggerDate, modifiers, e) => {\n // Convert internal `null` to `undefined` for the public event handler.\n onSelect?.(selected ?? undefined, triggerDate, modifiers, e);\n }, [onSelect]);\n const [selected, setSelected] = useControlledValue({\n defaultValue: defaultSelected,\n value: selectedProp,\n onChange\n });\n return /*#__PURE__*/_jsx(DayPicker, {\n ...COMMON_PROPS,\n ...localizationProps,\n ...props,\n mode: \"single\",\n numberOfMonths: clampNumberOfMonths(numberOfMonths),\n selected: selected ?? undefined,\n onSelect: setSelected\n });\n};"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAIrB,SAAS,mBAAmB;AAI5B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,OAAO,YAAY;AASrB,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,qBAAqB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,WAAW,YAAY,CAACA,WAAU,aAAa,WAAW,MAAM;AAEpE,eAAWA,aAAY,QAAW,aAAa,WAAW,CAAC;AAAA,EAC7D,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,CAAC,UAAU,WAAW,IAAI,mBAAmB;AAAA,IACjD,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,WAAW;AAAA,IAClC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,gBAAgB,oBAAoB,cAAc;AAAA,IAClD,UAAU,YAAY;AAAA,IACtB,UAAU;AAAA,EACZ,CAAC;AACH;",
|
|
6
6
|
"names": ["selected"]
|
|
7
7
|
}
|
|
@@ -23,14 +23,13 @@ function usePreviewRange({
|
|
|
23
23
|
let previewHighlight;
|
|
24
24
|
let potentialNewRange;
|
|
25
25
|
if (hoveredDate < selected.from) {
|
|
26
|
-
var _selected$to;
|
|
27
26
|
previewHighlight = {
|
|
28
27
|
from: hoveredDate,
|
|
29
28
|
to: selected.from
|
|
30
29
|
};
|
|
31
30
|
potentialNewRange = {
|
|
32
31
|
from: hoveredDate,
|
|
33
|
-
to:
|
|
32
|
+
to: selected.to ?? selected.from
|
|
34
33
|
};
|
|
35
34
|
} else if (selected.to && hoveredDate > selected.from && hoveredDate < selected.to) {
|
|
36
35
|
previewHighlight = {
|
|
@@ -42,9 +41,8 @@ function usePreviewRange({
|
|
|
42
41
|
to: hoveredDate
|
|
43
42
|
};
|
|
44
43
|
} else if (hoveredDate > selected.from) {
|
|
45
|
-
var _selected$to2;
|
|
46
44
|
previewHighlight = {
|
|
47
|
-
from:
|
|
45
|
+
from: selected.to ?? selected.from,
|
|
48
46
|
to: hoveredDate
|
|
49
47
|
};
|
|
50
48
|
potentialNewRange = {
|
|
@@ -92,7 +90,7 @@ var DateRangeCalendar = ({
|
|
|
92
90
|
mode: "range"
|
|
93
91
|
});
|
|
94
92
|
const onChange = useCallback((selected2, triggerDate, modifiers2, e) => {
|
|
95
|
-
onSelect?.(selected2
|
|
93
|
+
onSelect?.(selected2 ?? void 0, triggerDate, modifiers2, e);
|
|
96
94
|
}, [onSelect]);
|
|
97
95
|
const [selected, setSelected] = useControlledValue({
|
|
98
96
|
defaultValue: defaultSelected,
|
|
@@ -125,7 +123,7 @@ var DateRangeCalendar = ({
|
|
|
125
123
|
excludeDisabled,
|
|
126
124
|
min,
|
|
127
125
|
max,
|
|
128
|
-
selected: selected
|
|
126
|
+
selected: selected ?? void 0,
|
|
129
127
|
onSelect: setSelected,
|
|
130
128
|
onDayMouseEnter: (date) => setHoveredDate(date),
|
|
131
129
|
onDayMouseLeave: () => setHoveredDate(void 0),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/calendar/date-range-calendar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { differenceInCalendarDays } from 'date-fns';\nimport { DayPicker, rangeContainsModifiers } from 'react-day-picker';\nimport { enUS } from 'react-day-picker/locale';\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { COMMON_PROPS, MODIFIER_CLASSNAMES } from '../utils/constants';\nimport { clampNumberOfMonths } from '../utils/misc';\nimport { useControlledValue } from '../../utils/hooks';\nimport { useLocalizationProps } from '../utils/use-localization-props';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function usePreviewRange({\n selected,\n hoveredDate,\n excludeDisabled,\n min,\n max,\n disabled\n}) {\n return useMemo(() => {\n if (!hoveredDate || !selected?.from) {\n return;\n }\n let previewHighlight;\n let potentialNewRange;\n\n // Hovering on a date before the start of the selected range\n if (hoveredDate < selected.from) {\n
|
|
5
|
-
"mappings": ";AAGA,SAAS,gCAAgC;AACzC,SAAS,WAAW,8BAA8B;AAClD,SAAS,YAAY;AAIrB,SAAS,SAAS,UAAU,mBAAmB;AAI/C,SAAS,cAAc,2BAA2B;AAClD,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,OAAO,YAAY;AACrB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,eAAe,CAAC,UAAU,MAAM;AACnC;AAAA,IACF;AACA,QAAI;AACJ,QAAI;AAGJ,QAAI,cAAc,SAAS,MAAM;AAC/B,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { differenceInCalendarDays } from 'date-fns';\nimport { DayPicker, rangeContainsModifiers } from 'react-day-picker';\nimport { enUS } from 'react-day-picker/locale';\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { COMMON_PROPS, MODIFIER_CLASSNAMES } from '../utils/constants';\nimport { clampNumberOfMonths } from '../utils/misc';\nimport { useControlledValue } from '../../utils/hooks';\nimport { useLocalizationProps } from '../utils/use-localization-props';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function usePreviewRange({\n selected,\n hoveredDate,\n excludeDisabled,\n min,\n max,\n disabled\n}) {\n return useMemo(() => {\n if (!hoveredDate || !selected?.from) {\n return;\n }\n let previewHighlight;\n let potentialNewRange;\n\n // Hovering on a date before the start of the selected range\n if (hoveredDate < selected.from) {\n previewHighlight = {\n from: hoveredDate,\n to: selected.from\n };\n potentialNewRange = {\n from: hoveredDate,\n to: selected.to ?? selected.from\n };\n } else if (selected.to && hoveredDate > selected.from && hoveredDate < selected.to) {\n // Hovering on a date between the start and end of the selected range\n previewHighlight = {\n from: selected.from,\n to: hoveredDate\n };\n potentialNewRange = {\n from: selected.from,\n to: hoveredDate\n };\n } else if (hoveredDate > selected.from) {\n // Hovering on a date after the end of the selected range (either\n // because it's greater than selected.to, or because it's not defined)\n previewHighlight = {\n from: selected.to ?? selected.from,\n to: hoveredDate\n };\n potentialNewRange = {\n from: selected.from,\n to: hoveredDate\n };\n }\n if (min !== undefined && min > 0 && potentialNewRange && differenceInCalendarDays(potentialNewRange.to, potentialNewRange.from) < min) {\n previewHighlight = {\n from: hoveredDate,\n to: hoveredDate\n };\n }\n if (max !== undefined && max > 0 && potentialNewRange && differenceInCalendarDays(potentialNewRange.to, potentialNewRange.from) > max) {\n previewHighlight = {\n from: hoveredDate,\n to: hoveredDate\n };\n }\n if (excludeDisabled && disabled && potentialNewRange && rangeContainsModifiers(potentialNewRange, disabled)) {\n previewHighlight = {\n from: hoveredDate,\n to: hoveredDate\n };\n }\n return previewHighlight;\n }, [selected, hoveredDate, excludeDisabled, min, max, disabled]);\n}\n\n/**\n * `DateRangeCalendar` is a React component that provides a customizable calendar\n * interface for **date range** selection.\n *\n * The component is built with accessibility in mind and follows ARIA best\n * practices for calendar widgets. It provides keyboard navigation, screen reader\n * support, and customizable labels for internationalization.\n */\nexport const DateRangeCalendar = ({\n defaultSelected,\n selected: selectedProp,\n onSelect,\n numberOfMonths = 1,\n excludeDisabled,\n min,\n max,\n disabled,\n locale = enUS,\n timeZone,\n ...props\n}) => {\n const localizationProps = useLocalizationProps({\n locale,\n timeZone,\n mode: 'range'\n });\n const onChange = useCallback((selected, triggerDate, modifiers, e) => {\n // Convert internal `null` to `undefined` for the public event handler.\n onSelect?.(selected ?? undefined, triggerDate, modifiers, e);\n }, [onSelect]);\n const [selected, setSelected] = useControlledValue({\n defaultValue: defaultSelected,\n value: selectedProp,\n onChange\n });\n const [hoveredDate, setHoveredDate] = useState(undefined);\n\n // Compute the preview range for hover effect\n const previewRange = usePreviewRange({\n selected,\n hoveredDate,\n excludeDisabled,\n min,\n max,\n disabled\n });\n const modifiers = useMemo(() => {\n return {\n preview: previewRange,\n preview_start: previewRange?.from,\n preview_end: previewRange?.to\n };\n }, [previewRange]);\n return /*#__PURE__*/_jsx(DayPicker, {\n ...COMMON_PROPS,\n ...localizationProps,\n ...props,\n mode: \"range\",\n numberOfMonths: clampNumberOfMonths(numberOfMonths),\n disabled: disabled,\n excludeDisabled: excludeDisabled,\n min: min,\n max: max,\n selected: selected ?? undefined,\n onSelect: setSelected,\n onDayMouseEnter: date => setHoveredDate(date),\n onDayMouseLeave: () => setHoveredDate(undefined),\n modifiers: modifiers,\n modifiersClassNames: MODIFIER_CLASSNAMES\n });\n};"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["selected", "modifiers"]
|
|
7
7
|
}
|
|
@@ -15,12 +15,11 @@ function useDeprecatedProps({
|
|
|
15
15
|
};
|
|
16
16
|
let computedElevation = elevation;
|
|
17
17
|
if (isElevated) {
|
|
18
|
-
var _computedElevation;
|
|
19
18
|
deprecated("Card isElevated prop", {
|
|
20
19
|
since: "5.9",
|
|
21
20
|
alternative: "elevation"
|
|
22
21
|
});
|
|
23
|
-
|
|
22
|
+
computedElevation ??= 2;
|
|
24
23
|
}
|
|
25
24
|
if (typeof computedElevation !== "undefined") {
|
|
26
25
|
propsToReturn.elevation = computedElevation;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/card/card/hook.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport { useSurface } from '../../surface';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nfunction useDeprecatedProps({\n elevation,\n isElevated,\n ...otherProps\n}) {\n const propsToReturn = {\n ...otherProps\n };\n let computedElevation = elevation;\n if (isElevated) {\n
|
|
5
|
-
"mappings": ";AAGA,OAAO,gBAAgB;AACvB,SAAS,eAAe;AAMxB,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,EACL;AACA,MAAI,oBAAoB;AACxB,MAAI,YAAY;AACd,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport { useSurface } from '../../surface';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nfunction useDeprecatedProps({\n elevation,\n isElevated,\n ...otherProps\n}) {\n const propsToReturn = {\n ...otherProps\n };\n let computedElevation = elevation;\n if (isElevated) {\n deprecated('Card isElevated prop', {\n since: '5.9',\n alternative: 'elevation'\n });\n computedElevation ??= 2;\n }\n\n // The `elevation` prop should only be passed when it's not `undefined`,\n // otherwise it will override the value that gets derived from `useContextSystem`.\n if (typeof computedElevation !== 'undefined') {\n propsToReturn.elevation = computedElevation;\n }\n return propsToReturn;\n}\nexport function useCard(props) {\n const {\n className,\n elevation = 0,\n isBorderless = false,\n isRounded = true,\n size = 'medium',\n ...otherProps\n } = useContextSystem(useDeprecatedProps(props), 'Card');\n const cx = useCx();\n const classes = useMemo(() => {\n return cx(styles.Card, isBorderless && styles.boxShadowless, isRounded && styles.rounded, className);\n }, [className, cx, isBorderless, isRounded]);\n const surfaceProps = useSurface({\n ...otherProps,\n className: classes\n });\n return {\n ...surfaceProps,\n elevation,\n isBorderless,\n isRounded,\n size\n };\n}"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,gBAAgB;AACvB,SAAS,eAAe;AAMxB,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,EACL;AACA,MAAI,oBAAoB;AACxB,MAAI,YAAY;AACd,eAAW,wBAAwB;AAAA,MACjC,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AACD,0BAAsB;AAAA,EACxB;AAIA,MAAI,OAAO,sBAAsB,aAAa;AAC5C,kBAAc,YAAY;AAAA,EAC5B;AACA,SAAO;AACT;AACO,SAAS,QAAQ,OAAO;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,iBAAiB,mBAAmB,KAAK,GAAG,MAAM;AACtD,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,aAAM,gBAAuB,sBAAe,aAAoB,gBAAS,SAAS;AAAA,EACrG,GAAG,CAAC,WAAW,IAAI,cAAc,SAAS,CAAC;AAC3C,QAAM,eAAe,WAAW;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW;AAAA,EACb,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,8 +5,8 @@ import a11yPlugin from "colord/plugins/a11y";
|
|
|
5
5
|
import { __ } from "@wordpress/i18n";
|
|
6
6
|
extend([namesPlugin, a11yPlugin]);
|
|
7
7
|
var isSimpleCSSColor = (value) => {
|
|
8
|
-
const valueIsCssVariable = /var\(/.test(value
|
|
9
|
-
const valueIsColorMix = /color-mix\(/.test(value
|
|
8
|
+
const valueIsCssVariable = /var\(/.test(value ?? "");
|
|
9
|
+
const valueIsColorMix = /color-mix\(/.test(value ?? "");
|
|
10
10
|
return !valueIsCssVariable && !valueIsColorMix;
|
|
11
11
|
};
|
|
12
12
|
var extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/color-palette/utils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n const valueIsCssVariable = /var\\(/.test(value
|
|
5
|
-
"mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,UAAU;AAMnB,OAAO,CAAC,aAAa,UAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n const valueIsCssVariable = /var\\(/.test(value ?? '');\n const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {\n if (!currentValue) {\n return '';\n }\n const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n // Normalize format of `colors` to simplify the following loop\n\n const colorPalettes = showMultiplePalettes ? colors : [{\n colors: colors\n }];\n for (const {\n colors: paletteColors\n } of colorPalettes) {\n for (const {\n name: colorName,\n color: colorValue\n } of paletteColors) {\n const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n if (normalizedCurrentValue === normalizedColorValue) {\n return colorName;\n }\n }\n }\n\n // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n if (!value || !element || isSimpleCSSColor(value)) {\n return value;\n }\n const {\n ownerDocument\n } = element;\n const {\n defaultView\n } = ownerDocument;\n const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,UAAU;AAMnB,OAAO,CAAC,aAAa,UAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,UAAU;AAC3G,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,4BAA4B,OAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT,KAAK,eAAe;AAClB,YAAM,uBAAuB,4BAA4B,OAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,SAAO,GAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,0BAA0B,OAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,6 @@ var DetectOutside = withFocusOutside(class DetectOutsideComponent extends Compon
|
|
|
31
31
|
});
|
|
32
32
|
var getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);
|
|
33
33
|
function ComboboxControl(props) {
|
|
34
|
-
var _currentOption$label;
|
|
35
34
|
const {
|
|
36
35
|
__next40pxDefaultSize = false,
|
|
37
36
|
value: valueProp,
|
|
@@ -56,7 +55,7 @@ function ComboboxControl(props) {
|
|
|
56
55
|
onChange: onChangeProp
|
|
57
56
|
});
|
|
58
57
|
const currentOption = options.find((option) => option.value === value);
|
|
59
|
-
const currentLabel =
|
|
58
|
+
const currentLabel = currentOption?.label ?? "";
|
|
60
59
|
const instanceId = useInstanceId(ComboboxControl, "combobox-control");
|
|
61
60
|
const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);
|
|
62
61
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/combobox-control/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n handleFocusOutside(event) {\n this.props.onFocusOutside(event);\n }\n render() {\n return this.props.children;\n }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n var _currentOption$label;\n const {\n __next40pxDefaultSize = false,\n value: valueProp,\n label,\n options,\n onChange: onChangeProp,\n onFilterValueChange = noop,\n hideLabelFromVision,\n help,\n allowReset = true,\n className,\n isLoading = false,\n messages = {\n selected: __('Item selected.')\n },\n __experimentalRenderItem,\n expandOnFocus = true,\n placeholder\n } = useDeprecated36pxDefaultSizeProp(props);\n const [value, setValue] = useControlledValue({\n value: valueProp,\n onChange: onChangeProp\n });\n const currentOption = options.find(option => option.value === value);\n const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';\n // Use a custom prefix when generating the `instanceId` to avoid having\n // duplicate input IDs when rendering this component and `FormTokenField`\n // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [inputHasFocus, setInputHasFocus] = useState(false);\n const [inputValue, setInputValue] = useState('');\n const inputContainer = useRef(null);\n const matchingSuggestions = useMemo(() => {\n const startsWithMatch = [];\n const containsMatch = [];\n const match = normalizeTextString(inputValue);\n options.forEach(option => {\n const index = normalizeTextString(option.label).indexOf(match);\n if (index === 0) {\n startsWithMatch.push(option);\n } else if (index > 0) {\n containsMatch.push(option);\n }\n });\n return startsWithMatch.concat(containsMatch);\n }, [inputValue, options]);\n const onSuggestionSelected = newSelectedSuggestion => {\n if (newSelectedSuggestion.disabled) {\n return;\n }\n setValue(newSelectedSuggestion.value);\n speak(messages.selected, 'assertive');\n setSelectedSuggestion(newSelectedSuggestion);\n setInputValue('');\n setIsExpanded(false);\n };\n const handleArrowNavigation = (offset = 1) => {\n const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n let nextIndex = index + offset;\n if (nextIndex < 0) {\n nextIndex = matchingSuggestions.length - 1;\n } else if (nextIndex >= matchingSuggestions.length) {\n nextIndex = 0;\n }\n setSelectedSuggestion(matchingSuggestions[nextIndex]);\n setIsExpanded(true);\n };\n const onKeyDown = withIgnoreIMEEvents(event => {\n let preventDefault = false;\n if (event.defaultPrevented) {\n return;\n }\n switch (event.code) {\n case 'Enter':\n if (selectedSuggestion) {\n onSuggestionSelected(selectedSuggestion);\n preventDefault = true;\n }\n break;\n case 'ArrowUp':\n handleArrowNavigation(-1);\n preventDefault = true;\n break;\n case 'ArrowDown':\n handleArrowNavigation(1);\n preventDefault = true;\n break;\n case 'Escape':\n setIsExpanded(false);\n setSelectedSuggestion(null);\n preventDefault = true;\n break;\n default:\n break;\n }\n if (preventDefault) {\n event.preventDefault();\n }\n });\n const onBlur = () => {\n setInputHasFocus(false);\n };\n const onFocus = () => {\n setInputHasFocus(true);\n if (expandOnFocus) {\n setIsExpanded(true);\n }\n onFilterValueChange('');\n setInputValue('');\n };\n const onClick = () => {\n setIsExpanded(true);\n };\n const onFocusOutside = () => {\n setIsExpanded(false);\n };\n const onInputChange = event => {\n const text = event.value;\n setInputValue(text);\n onFilterValueChange(text);\n if (inputHasFocus) {\n setIsExpanded(true);\n }\n };\n const handleOnReset = () => {\n setValue(null);\n inputContainer.current?.focus();\n };\n\n // Stop propagation of the keydown event when pressing Enter on the Reset\n // button to prevent calling the onKeydown callback on the container div\n // element which actually sets the selected suggestion.\n const handleResetStopPropagation = event => {\n event.stopPropagation();\n };\n\n // Update current selections when the filter input changes.\n useEffect(() => {\n const hasMatchingSuggestions = matchingSuggestions.length > 0;\n const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n setSelectedSuggestion(matchingSuggestions[0]);\n }\n }, [matchingSuggestions, selectedSuggestion]);\n\n // Announcements.\n useEffect(() => {\n const hasMatchingSuggestions = matchingSuggestions.length > 0;\n if (isExpanded) {\n const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n speak(message, 'polite');\n }\n }, [matchingSuggestions, isExpanded]);\n maybeWarnDeprecated36pxSize({\n componentName: 'ComboboxControl',\n __next40pxDefaultSize,\n size: undefined\n });\n\n // Disable reason: There is no appropriate role which describes the\n // input container intended accessible usability.\n // TODO: Refactor click detection to use blur to stop propagation.\n /* eslint-disable jsx-a11y/no-static-element-interactions */\n return /*#__PURE__*/_jsx(DetectOutside, {\n onFocusOutside: onFocusOutside,\n children: /*#__PURE__*/_jsx(BaseControl, {\n className: clsx(className, 'components-combobox-control'),\n label: label,\n id: `components-form-token-input-${instanceId}`,\n hideLabelFromVision: hideLabelFromVision,\n help: help,\n children: /*#__PURE__*/_jsxs(\"div\", {\n className: \"components-combobox-control__suggestions-container\",\n tabIndex: -1,\n onKeyDown: onKeyDown,\n children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n __next40pxDefaultSize: __next40pxDefaultSize,\n children: [/*#__PURE__*/_jsx(FlexBlock, {\n children: /*#__PURE__*/_jsx(TokenInput, {\n className: \"components-combobox-control__input\",\n instanceId: instanceId,\n ref: inputContainer,\n placeholder: placeholder,\n value: isExpanded ? inputValue : currentLabel,\n onFocus: onFocus,\n onBlur: onBlur,\n onClick: onClick,\n isExpanded: isExpanded,\n selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n onChange: onInputChange\n })\n }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n size: \"small\",\n icon: closeSmall,\n onClick: handleOnReset,\n onKeyDown: handleResetStopPropagation,\n label: __('Reset')\n })]\n }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n instanceId: instanceId\n // The empty string for `value` here is not actually used, but is\n // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n ,\n match: {\n label: inputValue,\n value: ''\n },\n displayTransform: suggestion => suggestion.label,\n suggestions: matchingSuggestions,\n selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n onHover: setSelectedSuggestion,\n onSelect: onSuggestionSelected,\n scrollIntoView: true,\n __experimentalRenderItem: __experimentalRenderItem\n })]\n })\n })\n });\n /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,WAAW,UAAU,SAAS,QAAQ,iBAAiB;AAChE,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAK3B,SAAS,wBAAwB;AACjC,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAC1B,OAAO,sBAAsB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,OAAO,aAAa;AACpB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,gBAAgB,iBAAiB,MAAM,+BAA+B,UAAU;AAAA,EACpF,mBAAmB,OAAO;AACxB,SAAK,MAAM,eAAe,KAAK;AAAA,EACjC;AAAA,EACA,SAAS;AACP,WAAO,KAAK,MAAM;AAAA,EACpB;AACF,CAAC;AACD,IAAM,+BAA+B,CAAC,oBAAoB,wBAAwB,uBAAuB,OAAO,KAAK,oBAAoB,QAAQ,kBAAkB;AAmDnK,SAAS,gBAAgB,OAAO;AAC9B,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n handleFocusOutside(event) {\n this.props.onFocusOutside(event);\n }\n render() {\n return this.props.children;\n }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n const {\n __next40pxDefaultSize = false,\n value: valueProp,\n label,\n options,\n onChange: onChangeProp,\n onFilterValueChange = noop,\n hideLabelFromVision,\n help,\n allowReset = true,\n className,\n isLoading = false,\n messages = {\n selected: __('Item selected.')\n },\n __experimentalRenderItem,\n expandOnFocus = true,\n placeholder\n } = useDeprecated36pxDefaultSizeProp(props);\n const [value, setValue] = useControlledValue({\n value: valueProp,\n onChange: onChangeProp\n });\n const currentOption = options.find(option => option.value === value);\n const currentLabel = currentOption?.label ?? '';\n // Use a custom prefix when generating the `instanceId` to avoid having\n // duplicate input IDs when rendering this component and `FormTokenField`\n // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [inputHasFocus, setInputHasFocus] = useState(false);\n const [inputValue, setInputValue] = useState('');\n const inputContainer = useRef(null);\n const matchingSuggestions = useMemo(() => {\n const startsWithMatch = [];\n const containsMatch = [];\n const match = normalizeTextString(inputValue);\n options.forEach(option => {\n const index = normalizeTextString(option.label).indexOf(match);\n if (index === 0) {\n startsWithMatch.push(option);\n } else if (index > 0) {\n containsMatch.push(option);\n }\n });\n return startsWithMatch.concat(containsMatch);\n }, [inputValue, options]);\n const onSuggestionSelected = newSelectedSuggestion => {\n if (newSelectedSuggestion.disabled) {\n return;\n }\n setValue(newSelectedSuggestion.value);\n speak(messages.selected, 'assertive');\n setSelectedSuggestion(newSelectedSuggestion);\n setInputValue('');\n setIsExpanded(false);\n };\n const handleArrowNavigation = (offset = 1) => {\n const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n let nextIndex = index + offset;\n if (nextIndex < 0) {\n nextIndex = matchingSuggestions.length - 1;\n } else if (nextIndex >= matchingSuggestions.length) {\n nextIndex = 0;\n }\n setSelectedSuggestion(matchingSuggestions[nextIndex]);\n setIsExpanded(true);\n };\n const onKeyDown = withIgnoreIMEEvents(event => {\n let preventDefault = false;\n if (event.defaultPrevented) {\n return;\n }\n switch (event.code) {\n case 'Enter':\n if (selectedSuggestion) {\n onSuggestionSelected(selectedSuggestion);\n preventDefault = true;\n }\n break;\n case 'ArrowUp':\n handleArrowNavigation(-1);\n preventDefault = true;\n break;\n case 'ArrowDown':\n handleArrowNavigation(1);\n preventDefault = true;\n break;\n case 'Escape':\n setIsExpanded(false);\n setSelectedSuggestion(null);\n preventDefault = true;\n break;\n default:\n break;\n }\n if (preventDefault) {\n event.preventDefault();\n }\n });\n const onBlur = () => {\n setInputHasFocus(false);\n };\n const onFocus = () => {\n setInputHasFocus(true);\n if (expandOnFocus) {\n setIsExpanded(true);\n }\n onFilterValueChange('');\n setInputValue('');\n };\n const onClick = () => {\n setIsExpanded(true);\n };\n const onFocusOutside = () => {\n setIsExpanded(false);\n };\n const onInputChange = event => {\n const text = event.value;\n setInputValue(text);\n onFilterValueChange(text);\n if (inputHasFocus) {\n setIsExpanded(true);\n }\n };\n const handleOnReset = () => {\n setValue(null);\n inputContainer.current?.focus();\n };\n\n // Stop propagation of the keydown event when pressing Enter on the Reset\n // button to prevent calling the onKeydown callback on the container div\n // element which actually sets the selected suggestion.\n const handleResetStopPropagation = event => {\n event.stopPropagation();\n };\n\n // Update current selections when the filter input changes.\n useEffect(() => {\n const hasMatchingSuggestions = matchingSuggestions.length > 0;\n const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n setSelectedSuggestion(matchingSuggestions[0]);\n }\n }, [matchingSuggestions, selectedSuggestion]);\n\n // Announcements.\n useEffect(() => {\n const hasMatchingSuggestions = matchingSuggestions.length > 0;\n if (isExpanded) {\n const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n speak(message, 'polite');\n }\n }, [matchingSuggestions, isExpanded]);\n maybeWarnDeprecated36pxSize({\n componentName: 'ComboboxControl',\n __next40pxDefaultSize,\n size: undefined\n });\n\n // Disable reason: There is no appropriate role which describes the\n // input container intended accessible usability.\n // TODO: Refactor click detection to use blur to stop propagation.\n /* eslint-disable jsx-a11y/no-static-element-interactions */\n return /*#__PURE__*/_jsx(DetectOutside, {\n onFocusOutside: onFocusOutside,\n children: /*#__PURE__*/_jsx(BaseControl, {\n className: clsx(className, 'components-combobox-control'),\n label: label,\n id: `components-form-token-input-${instanceId}`,\n hideLabelFromVision: hideLabelFromVision,\n help: help,\n children: /*#__PURE__*/_jsxs(\"div\", {\n className: \"components-combobox-control__suggestions-container\",\n tabIndex: -1,\n onKeyDown: onKeyDown,\n children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n __next40pxDefaultSize: __next40pxDefaultSize,\n children: [/*#__PURE__*/_jsx(FlexBlock, {\n children: /*#__PURE__*/_jsx(TokenInput, {\n className: \"components-combobox-control__input\",\n instanceId: instanceId,\n ref: inputContainer,\n placeholder: placeholder,\n value: isExpanded ? inputValue : currentLabel,\n onFocus: onFocus,\n onBlur: onBlur,\n onClick: onClick,\n isExpanded: isExpanded,\n selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n onChange: onInputChange\n })\n }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n size: \"small\",\n icon: closeSmall,\n onClick: handleOnReset,\n onKeyDown: handleResetStopPropagation,\n label: __('Reset')\n })]\n }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n instanceId: instanceId\n // The empty string for `value` here is not actually used, but is\n // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n ,\n match: {\n label: inputValue,\n value: ''\n },\n displayTransform: suggestion => suggestion.label,\n suggestions: matchingSuggestions,\n selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n onHover: setSelectedSuggestion,\n onSelect: onSuggestionSelected,\n scrollIntoView: true,\n __experimentalRenderItem: __experimentalRenderItem\n })]\n })\n })\n });\n /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeGroupLabel2 = forwardRef(function CompositeGroupLabel3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeGroupLabel, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/group-label.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(props, ref) {\n
|
|
5
|
-
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,uBAAsB,WAAW,SAASA,qBAAoB,OAAO,KAAK;AACrF,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(props, ref) {\n const context = useCompositeContext();\n\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer. The `store` prop is documented, but its type is\n // obfuscated to discourage its use outside of the component's internals.\n const store = props.store ?? context.store;\n return /*#__PURE__*/_jsx(Ariakit.CompositeGroupLabel, {\n store: store,\n ...props,\n ref: ref\n });\n});"],
|
|
5
|
+
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,uBAAsB,WAAW,SAASA,qBAAoB,OAAO,KAAK;AACrF,QAAM,UAAU,oBAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,qBAAa,6BAAqB;AAAA,IACpD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeGroupLabel"]
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeGroup2 = forwardRef(function CompositeGroup3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeGroup, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/group.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroup = forwardRef(function CompositeGroup(props, ref) {\n
|
|
5
|
-
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,kBAAiB,WAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroup = forwardRef(function CompositeGroup(props, ref) {\n const context = useCompositeContext();\n\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer. The `store` prop is documented, but its type is\n // obfuscated to discourage its use outside of the component's internals.\n const store = props.store ?? context.store;\n return /*#__PURE__*/_jsx(Ariakit.CompositeGroup, {\n store: store,\n ...props,\n ref: ref\n });\n});"],
|
|
5
|
+
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,kBAAiB,WAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,UAAU,oBAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,qBAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeGroup"]
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeHover2 = forwardRef(function CompositeHover3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeHover, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/hover.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeHover = forwardRef(function CompositeHover(props, ref) {\n
|
|
5
|
-
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,kBAAiB,WAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeHover = forwardRef(function CompositeHover(props, ref) {\n const context = useCompositeContext();\n\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer. The `store` prop is documented, but its type is\n // obfuscated to discourage its use outside of the component's internals.\n const store = props.store ?? context.store;\n return /*#__PURE__*/_jsx(Ariakit.CompositeHover, {\n store: store,\n ...props,\n ref: ref\n });\n});"],
|
|
5
|
+
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,kBAAiB,WAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,UAAU,oBAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,qBAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeHover"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ var Composite2 = Object.assign(forwardRef(function Composite3({
|
|
|
39
39
|
orientation,
|
|
40
40
|
rtl
|
|
41
41
|
});
|
|
42
|
-
const store = storeProp
|
|
42
|
+
const store = storeProp ?? internalStore;
|
|
43
43
|
const contextValue = useMemo(() => ({
|
|
44
44
|
store
|
|
45
45
|
}), [store]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(forwardRef(function Composite({\n // Composite store props\n activeId,\n defaultActiveId,\n setActiveId,\n focusLoop = false,\n focusWrap = false,\n focusShift = false,\n virtualFocus = false,\n orientation = 'both',\n rtl = isRTL(),\n // Composite component props\n children,\n disabled = false,\n // Rest props\n ...props\n}, ref) {\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer.\n const storeProp = props.store;\n const internalStore = Ariakit.useCompositeStore({\n activeId,\n defaultActiveId,\n setActiveId,\n focusLoop,\n focusWrap,\n focusShift,\n virtualFocus,\n orientation,\n rtl\n });\n const store = storeProp
|
|
5
|
-
"mappings": ";AAaA,YAAY,aAAa;AAKzB,SAAS,aAAa;AACtB,SAAS,SAAS,kBAAkB;AAMpC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,OAAO,YAAY;AAgBrB,IAAMA,aAAY,OAAO,OAAO,WAAW,SAASA,WAAU;AAAA;AAAA,EAEnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,MAAM,MAAM;AAAA;AAAA,EAEZ;AAAA,EACA,WAAW;AAAA;AAAA,EAEX,GAAG;AACL,GAAG,KAAK;AAGN,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAwB,0BAAkB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ,
|
|
4
|
+
"sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(forwardRef(function Composite({\n // Composite store props\n activeId,\n defaultActiveId,\n setActiveId,\n focusLoop = false,\n focusWrap = false,\n focusShift = false,\n virtualFocus = false,\n orientation = 'both',\n rtl = isRTL(),\n // Composite component props\n children,\n disabled = false,\n // Rest props\n ...props\n}, ref) {\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer.\n const storeProp = props.store;\n const internalStore = Ariakit.useCompositeStore({\n activeId,\n defaultActiveId,\n setActiveId,\n focusLoop,\n focusWrap,\n focusShift,\n virtualFocus,\n orientation,\n rtl\n });\n const store = storeProp ?? internalStore;\n const contextValue = useMemo(() => ({\n store\n }), [store]);\n return /*#__PURE__*/_jsx(Ariakit.Composite, {\n disabled: disabled,\n store: store,\n ...props,\n ref: ref,\n children: /*#__PURE__*/_jsx(CompositeContext.Provider, {\n value: contextValue,\n children: children\n })\n });\n}), {\n /**\n * Renders a group element for composite items.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Group>\n * <Composite.GroupLabel>Label</Composite.GroupLabel>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </CompositeGroup>\n * </Composite>\n * ```\n */\n Group: Object.assign(CompositeGroup, {\n displayName: 'Composite.Group'\n }),\n /**\n * Renders a label in a composite group. This component must be wrapped with\n * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n * composite group element.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Group>\n * <Composite.GroupLabel>Label</Composite.GroupLabel>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </CompositeGroup>\n * </Composite>\n * ```\n */\n GroupLabel: Object.assign(CompositeGroupLabel, {\n displayName: 'Composite.GroupLabel'\n }),\n /**\n * Renders a composite item.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * <Composite.Item>Item 3</Composite.Item>\n * </Composite>\n * ```\n */\n Item: Object.assign(CompositeItem, {\n displayName: 'Composite.Item'\n }),\n /**\n * Renders a composite row. Wrapping `Composite.Item` elements within\n * `Composite.Row` will create a two-dimensional composite widget, such as a\n * grid.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Row>\n * <Composite.Item>Item 1.1</Composite.Item>\n * <Composite.Item>Item 1.2</Composite.Item>\n * <Composite.Item>Item 1.3</Composite.Item>\n * </Composite.Row>\n * <Composite.Row>\n * <Composite.Item>Item 2.1</Composite.Item>\n * <Composite.Item>Item 2.2</Composite.Item>\n * <Composite.Item>Item 2.3</Composite.Item>\n * </Composite.Row>\n * </Composite>\n * ```\n */\n Row: Object.assign(CompositeRow, {\n displayName: 'Composite.Row'\n }),\n /**\n * Renders an element in a composite widget that receives focus on mouse move\n * and loses focus to the composite base element on mouse leave. This should\n * be combined with the `Composite.Item` component.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n * <Composite.Hover render={ <Composite.Item /> }>\n * Item 1\n * </Composite.Hover>\n * <Composite.Hover render={ <Composite.Item /> }>\n * Item 2\n * </Composite.Hover>\n * </Composite>\n * ```\n */\n Hover: Object.assign(CompositeHover, {\n displayName: 'Composite.Hover'\n }),\n /**\n * Renders a component that adds typeahead functionality to composite\n * components. Hitting printable character keys will move focus to the next\n * composite item that begins with the input characters.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite render={ <CompositeTypeahead /> }>\n * <Composite.Item>Item 1</Composite.Item>\n * <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\n Typeahead: Object.assign(CompositeTypeahead, {\n displayName: 'Composite.Typeahead'\n }),\n /**\n * The React context used by the composite components. It can be used by\n * to access the composite store, and to forward the context when composite\n * sub-components are rendered across portals (ie. `SlotFill` components)\n * that would not otherwise forward the context to the `Fill` children.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n * import { useContext } from '@wordpress/element';\n *\n * const compositeContext = useContext( Composite.Context );\n * ```\n */\n Context: Object.assign(CompositeContext, {\n displayName: 'Composite.Context'\n })\n});"],
|
|
5
|
+
"mappings": ";AAaA,YAAY,aAAa;AAKzB,SAAS,aAAa;AACtB,SAAS,SAAS,kBAAkB;AAMpC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,OAAO,YAAY;AAgBrB,IAAMA,aAAY,OAAO,OAAO,WAAW,SAASA,WAAU;AAAA;AAAA,EAEnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,MAAM,MAAM;AAAA;AAAA,EAEZ;AAAA,EACA,WAAW;AAAA;AAAA,EAEX,GAAG;AACL,GAAG,KAAK;AAGN,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAwB,0BAAkB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ,aAAa;AAC3B,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,KAAK,CAAC;AACX,SAAoB,qBAAa,mBAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA,UAAuB,qBAAK,iBAAiB,UAAU;AAAA,MACrD,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBF,OAAO,OAAO,OAAO,gBAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBD,YAAY,OAAO,OAAO,qBAAqB;AAAA,IAC7C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,MAAM,OAAO,OAAO,eAAe;AAAA,IACjC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBD,KAAK,OAAO,OAAO,cAAc;AAAA,IAC/B,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBD,OAAO,OAAO,OAAO,gBAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBD,WAAW,OAAO,OAAO,oBAAoB;AAAA,IAC3C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,SAAS,OAAO,OAAO,kBAAkB;AAAA,IACvC,aAAa;AAAA,EACf,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["Composite"]
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeItem2 = forwardRef(function CompositeItem3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeItem, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/item.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n
|
|
5
|
-
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,iBAAgB,WAAW,SAASA,eAAc,OAAO,KAAK;AACzE,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n const context = useCompositeContext();\n\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer. The `store` prop is documented, but its type is\n // obfuscated to discourage its use outside of the component's internals.\n const store = props.store ?? context.store;\n return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {\n store: store,\n ...props,\n ref: ref\n });\n});"],
|
|
5
|
+
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,iBAAgB,WAAW,SAASA,eAAc,OAAO,KAAK;AACzE,QAAM,UAAU,oBAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,qBAAa,uBAAe;AAAA,IAC9C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeItem"]
|
|
7
7
|
}
|
|
@@ -30,8 +30,7 @@ var LEGACY_TO_NEW_DISPLAY_NAME = {
|
|
|
30
30
|
__unstableUseCompositeState: "Composite"
|
|
31
31
|
};
|
|
32
32
|
function proxyComposite(ProxiedComponent, propMap = {}) {
|
|
33
|
-
|
|
34
|
-
const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : "";
|
|
33
|
+
const displayName = ProxiedComponent.displayName ?? "";
|
|
35
34
|
const Component = (legacyProps) => {
|
|
36
35
|
deprecated(`wp.components.${displayName}`, {
|
|
37
36
|
since: "6.7",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/composite/legacy/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * This file aims at providing components that are as close as possible to the\n * original `reakit`-based implementation (which was removed from the codebase),\n * although it is recommended that consumers of the package switch to the stable,\n * un-prefixed, `ariakit`-based version of `Composite`.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Composite as Current } from '..';\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction mapLegacyStatePropsToComponentProps(legacyProps) {\n // If a `state` prop is provided, we unpack that; otherwise,\n // the necessary props are provided directly in `legacyProps`.\n if (legacyProps.state) {\n const {\n state,\n ...rest\n } = legacyProps;\n const {\n store,\n ...props\n } = mapLegacyStatePropsToComponentProps(state);\n return {\n ...rest,\n ...props,\n store\n };\n }\n return legacyProps;\n}\nconst LEGACY_TO_NEW_DISPLAY_NAME = {\n __unstableComposite: 'Composite',\n __unstableCompositeGroup: 'Composite.Group or Composite.Row',\n __unstableCompositeItem: 'Composite.Item',\n __unstableUseCompositeState: 'Composite'\n};\nfunction proxyComposite(ProxiedComponent, propMap = {}) {\n
|
|
5
|
-
"mappings": ";AAkBA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,OAAO,gBAAgB;AAKvB,SAAS,aAAa,eAAe;AAMrC,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,aAAa;AAGxD,MAAI,YAAY,OAAO;AACrB,UAAM;AAAA,MACJ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM;AAAA,MACJ;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oCAAoC,KAAK;AAC7C,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AACA,IAAM,6BAA6B;AAAA,EACjC,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA,EACzB,6BAA6B;AAC/B;AACA,SAAS,eAAe,kBAAkB,UAAU,CAAC,GAAG;AACtD,
|
|
4
|
+
"sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * This file aims at providing components that are as close as possible to the\n * original `reakit`-based implementation (which was removed from the codebase),\n * although it is recommended that consumers of the package switch to the stable,\n * un-prefixed, `ariakit`-based version of `Composite`.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Composite as Current } from '..';\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction mapLegacyStatePropsToComponentProps(legacyProps) {\n // If a `state` prop is provided, we unpack that; otherwise,\n // the necessary props are provided directly in `legacyProps`.\n if (legacyProps.state) {\n const {\n state,\n ...rest\n } = legacyProps;\n const {\n store,\n ...props\n } = mapLegacyStatePropsToComponentProps(state);\n return {\n ...rest,\n ...props,\n store\n };\n }\n return legacyProps;\n}\nconst LEGACY_TO_NEW_DISPLAY_NAME = {\n __unstableComposite: 'Composite',\n __unstableCompositeGroup: 'Composite.Group or Composite.Row',\n __unstableCompositeItem: 'Composite.Item',\n __unstableUseCompositeState: 'Composite'\n};\nfunction proxyComposite(ProxiedComponent, propMap = {}) {\n const displayName = ProxiedComponent.displayName ?? '';\n const Component = legacyProps => {\n deprecated(`wp.components.${displayName}`, {\n since: '6.7',\n alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined\n });\n const {\n store,\n ...rest\n } = mapLegacyStatePropsToComponentProps(legacyProps);\n let props = rest;\n props = {\n ...props,\n id: useInstanceId(store, props.baseId, props.id)\n };\n Object.entries(propMap).forEach(([from, to]) => {\n if (props.hasOwnProperty(from)) {\n Object.assign(props, {\n [to]: props[from]\n });\n delete props[from];\n }\n });\n delete props.baseId;\n return /*#__PURE__*/_jsx(ProxiedComponent, {\n ...props,\n store: store\n });\n };\n Component.displayName = displayName;\n return Component;\n}\n\n// The old `CompositeGroup` used to behave more like the current\n// `CompositeRow`, but this has been split into two different\n// components. We handle that difference by checking on the\n// provided role, and returning the appropriate component.\nconst UnproxiedCompositeGroup = forwardRef(({\n role,\n ...props\n}, ref) => {\n const Component = role === 'row' ? Current.Row : Current.Group;\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n role: role,\n ...props\n });\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport const Composite = proxyComposite(Object.assign(Current, {\n displayName: '__unstableComposite'\n}), {\n baseId: 'id'\n});\n/**\n * _Note: please use the `Composite.Row` or `Composite.Group` components instead._\n *\n * @deprecated\n */\nexport const CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {\n displayName: '__unstableCompositeGroup'\n}));\n/**\n * _Note: please use the `Composite.Item` component instead._\n *\n * @deprecated\n */\nexport const CompositeItem = proxyComposite(Object.assign(Current.Item, {\n displayName: '__unstableCompositeItem'\n}), {\n focusable: 'accessibleWhenDisabled'\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport function useCompositeState(legacyStateOptions = {}) {\n deprecated(`wp.components.__unstableUseCompositeState`, {\n since: '6.7',\n alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState\n });\n const {\n baseId,\n currentId: defaultActiveId,\n orientation,\n rtl = false,\n loop: focusLoop = false,\n wrap: focusWrap = false,\n shift: focusShift = false,\n unstable_virtual: virtualFocus\n } = legacyStateOptions;\n return {\n baseId: useInstanceId(Composite, 'composite', baseId),\n store: Ariakit.useCompositeStore({\n defaultActiveId,\n rtl,\n orientation,\n focusLoop,\n focusShift,\n focusWrap,\n virtualFocus\n })\n };\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeRow2 = forwardRef(function CompositeRow3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeRow, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/composite/row.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeRow = forwardRef(function CompositeRow(props, ref) {\n
|
|
5
|
-
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,gBAAe,WAAW,SAASA,cAAa,OAAO,KAAK;AACvE,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeRow = forwardRef(function CompositeRow(props, ref) {\n const context = useCompositeContext();\n\n // @ts-expect-error The store prop is undocumented and only used by the\n // legacy compat layer. The `store` prop is documented, but its type is\n // obfuscated to discourage its use outside of the component's internals.\n const store = props.store ?? context.store;\n return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {\n store: store,\n ...props,\n ref: ref\n });\n});"],
|
|
5
|
+
"mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,kBAAkB;AAM3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,YAAY;AACrB,IAAMA,gBAAe,WAAW,SAASA,cAAa,OAAO,KAAK;AACvE,QAAM,UAAU,oBAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,qBAAa,sBAAc;AAAA,IAC7C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeRow"]
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { useCompositeContext } from "./context.mjs";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var CompositeTypeahead2 = forwardRef(function CompositeTypeahead3(props, ref) {
|
|
7
|
-
var _props$store;
|
|
8
7
|
const context = useCompositeContext();
|
|
9
|
-
const store =
|
|
8
|
+
const store = props.store ?? context.store;
|
|
10
9
|
return /* @__PURE__ */ _jsx(Ariakit.CompositeTypeahead, {
|
|
11
10
|
store,
|
|
12
11
|
...props,
|