@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
|
@@ -93,7 +93,6 @@ function BoxInputControl({
|
|
|
93
93
|
presetKey,
|
|
94
94
|
...props
|
|
95
95
|
}) {
|
|
96
|
-
var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
|
|
97
96
|
const defaultValuesToModify = getSidesToModify(side, sides);
|
|
98
97
|
const handleOnFocus = (event) => {
|
|
99
98
|
onFocus(event, {
|
|
@@ -162,14 +161,11 @@ function BoxInputControl({
|
|
|
162
161
|
value: 0,
|
|
163
162
|
label: "",
|
|
164
163
|
tooltip: (0, import_i18n.__)("None")
|
|
165
|
-
}, ...presets.map((preset, index) => {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
|
|
171
|
-
};
|
|
172
|
-
})] : [];
|
|
164
|
+
}, ...presets.map((preset, index) => ({
|
|
165
|
+
value: index + 1,
|
|
166
|
+
label: "",
|
|
167
|
+
tooltip: preset.name ?? preset.slug
|
|
168
|
+
}))] : [];
|
|
173
169
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_box_control_styles.InputWrapper, {
|
|
174
170
|
expanded: true,
|
|
175
171
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.FlexedBoxControlIcon, {
|
|
@@ -206,9 +202,9 @@ function BoxInputControl({
|
|
|
206
202
|
handleOnValueChange(newValue !== void 0 ? [newValue, computedUnit].join("") : void 0);
|
|
207
203
|
},
|
|
208
204
|
min: isFinite(min) ? min : 0,
|
|
209
|
-
max:
|
|
210
|
-
step:
|
|
211
|
-
value: parsedQuantity
|
|
205
|
+
max: import_utils2.CUSTOM_VALUE_SETTINGS[computedUnit ?? "px"]?.max ?? 10,
|
|
206
|
+
step: import_utils2.CUSTOM_VALUE_SETTINGS[computedUnit ?? "px"]?.step ?? 0.1,
|
|
207
|
+
value: parsedQuantity ?? 0,
|
|
212
208
|
withInputField: false
|
|
213
209
|
})]
|
|
214
210
|
}), hasPresets && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.FlexedRangeControl, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/box-control/input-control.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n const allowedSides = getAllowedSides(sides);\n let modifiedSides = [];\n switch (side) {\n case 'all':\n modifiedSides = ['top', 'bottom', 'left', 'right'];\n break;\n case 'horizontal':\n modifiedSides = ['left', 'right'];\n break;\n case 'vertical':\n modifiedSides = ['top', 'bottom'];\n break;\n default:\n modifiedSides = [side];\n }\n if (isAlt) {\n switch (side) {\n case 'top':\n modifiedSides.push('bottom');\n break;\n case 'bottom':\n modifiedSides.push('top');\n break;\n case 'left':\n modifiedSides.push('left');\n break;\n case 'right':\n modifiedSides.push('right');\n break;\n }\n }\n return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n __next40pxDefaultSize,\n onChange = noop,\n onFocus = noop,\n values,\n selectedUnits,\n setSelectedUnits,\n sides,\n side,\n min = 0,\n presets,\n presetKey,\n ...props\n}) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,kBAAmB;AACnB,qBAAyB;AACzB,mBAAyB;AAKzB,qBAAoB;AACpB,mBAAiD;AACjD,IAAAA,gBAA+K;AAC/K,gCAA0F;AAC1F,oBAAmB;AACnB,yBAAkE;AAClE,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,iBAAiB,MAAM,OAAO,OAAO;AAC5C,QAAM,mBAAe,+BAAgB,KAAK;AAC1C,MAAI,gBAAgB,CAAC;AACrB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,sBAAgB,CAAC,OAAO,UAAU,QAAQ,OAAO;AACjD;AAAA,IACF,KAAK;AACH,sBAAgB,CAAC,QAAQ,OAAO;AAChC;AAAA,IACF,KAAK;AACH,sBAAgB,CAAC,OAAO,QAAQ;AAChC;AAAA,IACF;AACE,sBAAgB,CAAC,IAAI;AAAA,EACzB;AACA,MAAI,OAAO;AACT,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,sBAAc,KAAK,QAAQ;AAC3B;AAAA,MACF,KAAK;AACH,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF,KAAK;AACH,sBAAc,KAAK,MAAM;AACzB;AAAA,MACF,KAAK;AACH,sBAAc,KAAK,OAAO;AAC1B;AAAA,IACJ;AAAA,EACF;AACA,SAAO,cAAc,OAAO,OAAK,aAAa,IAAI,CAAC,CAAC;AACtD;AACe,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n const allowedSides = getAllowedSides(sides);\n let modifiedSides = [];\n switch (side) {\n case 'all':\n modifiedSides = ['top', 'bottom', 'left', 'right'];\n break;\n case 'horizontal':\n modifiedSides = ['left', 'right'];\n break;\n case 'vertical':\n modifiedSides = ['top', 'bottom'];\n break;\n default:\n modifiedSides = [side];\n }\n if (isAlt) {\n switch (side) {\n case 'top':\n modifiedSides.push('bottom');\n break;\n case 'bottom':\n modifiedSides.push('top');\n break;\n case 'left':\n modifiedSides.push('left');\n break;\n case 'right':\n modifiedSides.push('right');\n break;\n }\n }\n return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n __next40pxDefaultSize,\n onChange = noop,\n onFocus = noop,\n values,\n selectedUnits,\n setSelectedUnits,\n sides,\n side,\n min = 0,\n presets,\n presetKey,\n ...props\n}) {\n const defaultValuesToModify = getSidesToModify(side, sides);\n const handleOnFocus = event => {\n onFocus(event, {\n side\n });\n };\n const handleOnChange = nextValues => {\n onChange(nextValues);\n };\n const handleRawOnValueChange = next => {\n const nextValues = {\n ...values\n };\n defaultValuesToModify.forEach(modifiedSide => {\n nextValues[modifiedSide] = next;\n });\n handleOnChange(nextValues);\n };\n const handleOnValueChange = (next, extra) => {\n const nextValues = {\n ...values\n };\n const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n const nextValue = isNumeric ? next : undefined;\n const modifiedSides = getSidesToModify(side, sides,\n /**\n * Supports changing pair sides. For example, holding the ALT key\n * when changing the TOP will also update BOTTOM.\n */\n // @ts-expect-error - TODO: event.altKey is only present when the change event was\n // triggered by a keyboard event. Should this feature be implemented differently so\n // it also works with drag events?\n !!extra?.event.altKey);\n modifiedSides.forEach(modifiedSide => {\n nextValues[modifiedSide] = nextValue;\n });\n handleOnChange(nextValues);\n };\n const handleOnUnitChange = next => {\n const newUnits = {\n ...selectedUnits\n };\n defaultValuesToModify.forEach(modifiedSide => {\n newUnits[modifiedSide] = next;\n });\n setSelectedUnits(newUnits);\n };\n const mergedValue = getMergedValue(values, defaultValuesToModify);\n const hasValues = isValuesDefined(values);\n const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n const inputId = [generatedId, side].join('-');\n const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n const hasPresets = presets && presets.length > 0 && presetKey;\n const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n const marks = hasPresets ? [{\n value: 0,\n label: '',\n tooltip: __('None')\n }, ...presets.map((preset, index) => ({\n value: index + 1,\n label: '',\n tooltip: preset.name ?? preset.slug\n }))] : [];\n return /*#__PURE__*/_jsxs(InputWrapper, {\n expanded: true,\n children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n side: side,\n sides: sides\n }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(Tooltip, {\n placement: \"top-end\",\n text: LABELS[side],\n children: /*#__PURE__*/_jsx(StyledUnitControl, {\n ...props,\n min: min,\n __shouldNotWarnDeprecated36pxSize: true,\n __next40pxDefaultSize: __next40pxDefaultSize,\n className: \"component-box-control__unit-control\",\n id: inputId,\n isPressEnterToChange: true,\n disableUnits: isMixed || isMixedUnit,\n value: usedValue,\n onChange: handleOnValueChange,\n onUnitChange: handleOnUnitChange,\n onFocus: handleOnFocus,\n label: LABELS[side],\n placeholder: mixedPlaceholder,\n hideLabelFromVision: true\n })\n }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n __next40pxDefaultSize: __next40pxDefaultSize,\n __shouldNotWarnDeprecated36pxSize: true,\n \"aria-controls\": inputId,\n label: LABELS[side],\n hideLabelFromVision: true,\n onChange: newValue => {\n handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n },\n min: isFinite(min) ? min : 0,\n max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n value: parsedQuantity ?? 0,\n withInputField: false\n })]\n }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n __next40pxDefaultSize: true,\n className: \"spacing-sizes-control__range-control\",\n value: presetIndex !== undefined ? presetIndex + 1 : 0,\n onChange: newIndex => {\n const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n handleRawOnValueChange(newValue);\n },\n withInputField: false,\n \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n min: 0,\n max: marks.length - 1,\n marks: marks,\n label: LABELS[side],\n hideLabelFromVision: true\n }), hasPresets && /*#__PURE__*/_jsx(Button, {\n label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n icon: settings,\n onClick: () => {\n setShowCustomValueControl(!showCustomValueControl);\n },\n isPressed: showCustomValueControl,\n size: \"small\",\n iconSize: 24\n })]\n }, `box-control-${side}`);\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_utils", "_jsxs", "_jsx", "_Fragment", "Tooltip", "Button"]
|
|
7
7
|
}
|
package/build/button/index.cjs
CHANGED
|
@@ -68,32 +68,26 @@ function useDeprecatedProps({
|
|
|
68
68
|
description: describedBy
|
|
69
69
|
};
|
|
70
70
|
if (isSmall) {
|
|
71
|
-
|
|
72
|
-
(_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = "small";
|
|
71
|
+
computedSize ??= "small";
|
|
73
72
|
}
|
|
74
73
|
if (isPrimary) {
|
|
75
|
-
|
|
76
|
-
(_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = "primary";
|
|
74
|
+
computedVariant ??= "primary";
|
|
77
75
|
}
|
|
78
76
|
if (isTertiary) {
|
|
79
|
-
|
|
80
|
-
(_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = "tertiary";
|
|
77
|
+
computedVariant ??= "tertiary";
|
|
81
78
|
}
|
|
82
79
|
if (isSecondary) {
|
|
83
|
-
|
|
84
|
-
(_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = "secondary";
|
|
80
|
+
computedVariant ??= "secondary";
|
|
85
81
|
}
|
|
86
82
|
if (isDefault) {
|
|
87
|
-
var _computedVariant4;
|
|
88
83
|
(0, import_deprecated.default)("wp.components.Button `isDefault` prop", {
|
|
89
84
|
since: "5.4",
|
|
90
85
|
alternative: 'variant="secondary"'
|
|
91
86
|
});
|
|
92
|
-
|
|
87
|
+
computedVariant ??= "secondary";
|
|
93
88
|
}
|
|
94
89
|
if (isLink) {
|
|
95
|
-
|
|
96
|
-
(_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = "link";
|
|
90
|
+
computedVariant ??= "link";
|
|
97
91
|
}
|
|
98
92
|
return {
|
|
99
93
|
...newProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/button/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\nfunction useDeprecatedProps({\n __experimentalIsFocusable,\n isDefault,\n isPrimary,\n isSecondary,\n isTertiary,\n isLink,\n isPressed,\n isSmall,\n size,\n variant,\n describedBy,\n ...otherProps\n}) {\n let computedSize = size;\n let computedVariant = variant;\n const newProps = {\n accessibleWhenDisabled: __experimentalIsFocusable,\n // @todo Mark `isPressed` as deprecated\n 'aria-pressed': isPressed,\n description: describedBy\n };\n if (isSmall) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,wBAAuB;AACvB,qBAA2B;AAC3B,qBAA8B;AAK9B,qBAAoB;AACpB,kBAAiB;AACjB,6BAA+B;AAC/B,mBAAoC;AACpC,yBAAkE;AAClE,IAAM,iCAAiC,CAAC,eAAe,SAAS;AAChE,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,MAAI,eAAe;AACnB,MAAI,kBAAkB;AACtB,QAAM,WAAW;AAAA,IACf,wBAAwB;AAAA;AAAA,IAExB,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AACA,MAAI,SAAS;AACX,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\nfunction useDeprecatedProps({\n __experimentalIsFocusable,\n isDefault,\n isPrimary,\n isSecondary,\n isTertiary,\n isLink,\n isPressed,\n isSmall,\n size,\n variant,\n describedBy,\n ...otherProps\n}) {\n let computedSize = size;\n let computedVariant = variant;\n const newProps = {\n accessibleWhenDisabled: __experimentalIsFocusable,\n // @todo Mark `isPressed` as deprecated\n 'aria-pressed': isPressed,\n description: describedBy\n };\n if (isSmall) {\n computedSize ??= 'small';\n }\n if (isPrimary) {\n computedVariant ??= 'primary';\n }\n if (isTertiary) {\n computedVariant ??= 'tertiary';\n }\n if (isSecondary) {\n computedVariant ??= 'secondary';\n }\n if (isDefault) {\n deprecated('wp.components.Button `isDefault` prop', {\n since: '5.4',\n alternative: 'variant=\"secondary\"'\n });\n computedVariant ??= 'secondary';\n }\n if (isLink) {\n computedVariant ??= 'link';\n }\n return {\n ...newProps,\n ...otherProps,\n size: computedSize,\n variant: computedVariant\n };\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n * <Button\n * variant=\"primary\"\n * onClick={ handleClick }\n * >\n * Click here\n * </Button>\n * );\n * ```\n */\nexport function UnforwardedButton(props, ref) {\n const {\n __next40pxDefaultSize,\n accessibleWhenDisabled,\n isBusy,\n isDestructive,\n className,\n disabled,\n icon,\n iconPosition = 'left',\n iconSize,\n showTooltip,\n tooltipPosition,\n shortcut,\n label,\n children,\n size = 'default',\n text,\n variant,\n description,\n ...buttonOrAnchorProps\n } = useDeprecatedProps(props);\n const {\n href,\n target,\n 'aria-checked': ariaChecked,\n 'aria-pressed': ariaPressed,\n 'aria-selected': ariaSelected,\n ...additionalProps\n } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {\n href: undefined,\n target: undefined,\n ...buttonOrAnchorProps\n };\n const instanceId = useInstanceId(Button, 'components-button__description');\n const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&\n // Tooltip should not considered as a child\n children?.[0]?.props?.className !== 'components-tooltip';\n const truthyAriaPressedValues = [true, 'true', 'mixed'];\n const classes = clsx('components-button', className, {\n 'is-next-40px-default-size': __next40pxDefaultSize,\n 'is-secondary': variant === 'secondary',\n 'is-primary': variant === 'primary',\n 'is-small': size === 'small',\n 'is-compact': size === 'compact',\n 'is-tertiary': variant === 'tertiary',\n 'is-pressed': truthyAriaPressedValues.includes(ariaPressed),\n 'is-pressed-mixed': ariaPressed === 'mixed',\n 'is-busy': isBusy,\n 'is-link': variant === 'link',\n 'is-destructive': isDestructive,\n 'has-text': !!icon && (hasChildren || text),\n 'has-icon': !!icon,\n 'has-icon-right': iconPosition === 'right'\n });\n const trulyDisabled = disabled && !accessibleWhenDisabled;\n const Tag = href !== undefined && !disabled ? 'a' : 'button';\n const buttonProps = Tag === 'button' ? {\n type: 'button',\n disabled: trulyDisabled,\n 'aria-checked': ariaChecked,\n 'aria-pressed': ariaPressed,\n 'aria-selected': ariaSelected\n } : {};\n const anchorProps = Tag === 'a' ? {\n href,\n target\n } : {};\n const disableEventProps = {};\n if (disabled && accessibleWhenDisabled) {\n // In this case, the button will be disabled, but still focusable and\n // perceivable by screen reader users.\n buttonProps['aria-disabled'] = true;\n anchorProps['aria-disabled'] = true;\n for (const disabledEvent of disabledEventsOnDisabledButton) {\n disableEventProps[disabledEvent] = event => {\n if (event) {\n event.stopPropagation();\n event.preventDefault();\n }\n };\n }\n }\n\n // Should show the tooltip if...\n const shouldShowTooltip = !trulyDisabled && (\n // An explicit tooltip is passed or...\n showTooltip && !!label ||\n // There's a shortcut or...\n !!shortcut ||\n // There's a label and...\n !!label &&\n // The children are empty and...\n !children?.length &&\n // The tooltip is not explicitly disabled.\n false !== showTooltip);\n const descriptionId = description ? instanceId : undefined;\n const describedById = additionalProps['aria-describedby'] || descriptionId;\n const commonProps = {\n className: classes,\n 'aria-label': additionalProps['aria-label'] || label,\n 'aria-describedby': describedById,\n ref\n };\n const elementChildren = /*#__PURE__*/_jsxs(_Fragment, {\n children: [icon && iconPosition === 'left' && /*#__PURE__*/_jsx(Icon, {\n icon: icon,\n size: iconSize\n }), text && /*#__PURE__*/_jsx(_Fragment, {\n children: text\n }), children, icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n icon: icon,\n size: iconSize\n })]\n });\n const element = Tag === 'a' ? /*#__PURE__*/_jsx(\"a\", {\n ...anchorProps,\n ...additionalProps,\n ...disableEventProps,\n ...commonProps,\n children: elementChildren\n }) : /*#__PURE__*/_jsx(\"button\", {\n ...buttonProps,\n ...additionalProps,\n ...disableEventProps,\n ...commonProps,\n children: elementChildren\n });\n\n // In order to avoid some React reconciliation issues, we are always rendering\n // the `Tooltip` component even when `shouldShowTooltip` is `false`.\n // In order to make sure that the tooltip doesn't show when it shouldn't,\n // we don't pass the props to the `Tooltip` component.\n const tooltipProps = shouldShowTooltip ? {\n text: children?.length && description ? description : label,\n shortcut,\n placement: tooltipPosition &&\n // Convert legacy `position` values to be used with the new `placement` prop\n positionToPlacement(tooltipPosition)\n } : {};\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(Tooltip, {\n ...tooltipProps,\n children: element\n }), description && /*#__PURE__*/_jsx(VisuallyHidden, {\n children: /*#__PURE__*/_jsx(\"span\", {\n id: descriptionId,\n children: description\n })\n })]\n });\n}\nexport const Button = forwardRef(UnforwardedButton);\nButton.displayName = 'Button';\nexport default Button;"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["deprecated", "clsx", "_jsxs", "_Fragment", "_jsx", "Icon", "Tooltip"]
|
|
7
7
|
}
|
|
@@ -46,7 +46,7 @@ var DateCalendar = ({
|
|
|
46
46
|
mode: "single"
|
|
47
47
|
});
|
|
48
48
|
const onChange = (0, import_element.useCallback)((selected2, triggerDate, modifiers, e) => {
|
|
49
|
-
onSelect?.(selected2
|
|
49
|
+
onSelect?.(selected2 ?? void 0, triggerDate, modifiers, e);
|
|
50
50
|
}, [onSelect]);
|
|
51
51
|
const [selected, setSelected] = (0, import_hooks.useControlledValue)({
|
|
52
52
|
defaultValue: defaultSelected,
|
|
@@ -59,7 +59,7 @@ var DateCalendar = ({
|
|
|
59
59
|
...props,
|
|
60
60
|
mode: "single",
|
|
61
61
|
numberOfMonths: (0, import_misc.clampNumberOfMonths)(numberOfMonths),
|
|
62
|
-
selected: selected
|
|
62
|
+
selected: selected ?? void 0,
|
|
63
63
|
onSelect: setSelected
|
|
64
64
|
});
|
|
65
65
|
};
|
|
@@ -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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,8BAA0B;AAC1B,oBAAqB;AAIrB,qBAA4B;AAI5B,uBAA6B;AAC7B,kBAAoC;AACpC,mBAAmC;AACnC,oCAAqC;AACrC,yBAA4B;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,wBAAoB,oDAAqB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,eAAW,4BAAY,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,8BAA0B;AAC1B,oBAAqB;AAIrB,qBAA4B;AAI5B,uBAA6B;AAC7B,kBAAoC;AACpC,mBAAmC;AACnC,oCAAqC;AACrC,yBAA4B;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,wBAAoB,oDAAqB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,eAAW,4BAAY,CAACA,WAAU,aAAa,WAAW,MAAM;AAEpE,eAAWA,aAAY,QAAW,aAAa,WAAW,CAAC;AAAA,EAC7D,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,CAAC,UAAU,WAAW,QAAI,iCAAmB;AAAA,IACjD,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,mCAAW;AAAA,IAClC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,oBAAgB,iCAAoB,cAAc;AAAA,IAClD,UAAU,YAAY;AAAA,IACtB,UAAU;AAAA,EACZ,CAAC;AACH;",
|
|
6
6
|
"names": ["selected", "_jsx"]
|
|
7
7
|
}
|
|
@@ -48,14 +48,13 @@ function usePreviewRange({
|
|
|
48
48
|
let previewHighlight;
|
|
49
49
|
let potentialNewRange;
|
|
50
50
|
if (hoveredDate < selected.from) {
|
|
51
|
-
var _selected$to;
|
|
52
51
|
previewHighlight = {
|
|
53
52
|
from: hoveredDate,
|
|
54
53
|
to: selected.from
|
|
55
54
|
};
|
|
56
55
|
potentialNewRange = {
|
|
57
56
|
from: hoveredDate,
|
|
58
|
-
to:
|
|
57
|
+
to: selected.to ?? selected.from
|
|
59
58
|
};
|
|
60
59
|
} else if (selected.to && hoveredDate > selected.from && hoveredDate < selected.to) {
|
|
61
60
|
previewHighlight = {
|
|
@@ -67,9 +66,8 @@ function usePreviewRange({
|
|
|
67
66
|
to: hoveredDate
|
|
68
67
|
};
|
|
69
68
|
} else if (hoveredDate > selected.from) {
|
|
70
|
-
var _selected$to2;
|
|
71
69
|
previewHighlight = {
|
|
72
|
-
from:
|
|
70
|
+
from: selected.to ?? selected.from,
|
|
73
71
|
to: hoveredDate
|
|
74
72
|
};
|
|
75
73
|
potentialNewRange = {
|
|
@@ -117,7 +115,7 @@ var DateRangeCalendar = ({
|
|
|
117
115
|
mode: "range"
|
|
118
116
|
});
|
|
119
117
|
const onChange = (0, import_element.useCallback)((selected2, triggerDate, modifiers2, e) => {
|
|
120
|
-
onSelect?.(selected2
|
|
118
|
+
onSelect?.(selected2 ?? void 0, triggerDate, modifiers2, e);
|
|
121
119
|
}, [onSelect]);
|
|
122
120
|
const [selected, setSelected] = (0, import_hooks.useControlledValue)({
|
|
123
121
|
defaultValue: defaultSelected,
|
|
@@ -150,7 +148,7 @@ var DateRangeCalendar = ({
|
|
|
150
148
|
excludeDisabled,
|
|
151
149
|
min,
|
|
152
150
|
max,
|
|
153
|
-
selected: selected
|
|
151
|
+
selected: selected ?? void 0,
|
|
154
152
|
onSelect: setSelected,
|
|
155
153
|
onDayMouseEnter: (date) => setHoveredDate(date),
|
|
156
154
|
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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAyC;AACzC,8BAAkD;AAClD,oBAAqB;AAIrB,qBAA+C;AAI/C,uBAAkD;AAClD,kBAAoC;AACpC,mBAAmC;AACnC,oCAAqC;AACrC,yBAA4B;AACrB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,aAAO,wBAAQ,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", "_jsx"]
|
|
7
7
|
}
|
package/build/card/card/hook.cjs
CHANGED
|
@@ -49,12 +49,11 @@ function useDeprecatedProps({
|
|
|
49
49
|
};
|
|
50
50
|
let computedElevation = elevation;
|
|
51
51
|
if (isElevated) {
|
|
52
|
-
var _computedElevation;
|
|
53
52
|
(0, import_deprecated.default)("Card isElevated prop", {
|
|
54
53
|
since: "5.9",
|
|
55
54
|
alternative: "elevation"
|
|
56
55
|
});
|
|
57
|
-
|
|
56
|
+
computedElevation ??= 2;
|
|
58
57
|
}
|
|
59
58
|
if (typeof computedElevation !== "undefined") {
|
|
60
59
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAuB;AACvB,qBAAwB;AAMxB,qBAAiC;AACjC,qBAA2B;AAC3B,aAAwB;AACxB,oBAAsB;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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAuB;AACvB,qBAAwB;AAMxB,qBAAiC;AACjC,qBAA2B;AAC3B,aAAwB;AACxB,oBAAsB;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,0BAAAA,SAAW,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,QAAI,iCAAiB,mBAAmB,KAAK,GAAG,MAAM;AACtD,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,aAAM,gBAAuB,sBAAe,aAAoB,gBAAS,SAAS;AAAA,EACrG,GAAG,CAAC,WAAW,IAAI,cAAc,SAAS,CAAC;AAC3C,QAAM,mBAAe,2BAAW;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": ["deprecated"]
|
|
7
7
|
}
|
|
@@ -42,8 +42,8 @@ var import_a11y = __toESM(require("colord/plugins/a11y"));
|
|
|
42
42
|
var import_i18n = require("@wordpress/i18n");
|
|
43
43
|
(0, import_colord.extend)([import_names.default, import_a11y.default]);
|
|
44
44
|
var isSimpleCSSColor = (value) => {
|
|
45
|
-
const valueIsCssVariable = /var\(/.test(value
|
|
46
|
-
const valueIsColorMix = /color-mix\(/.test(value
|
|
45
|
+
const valueIsCssVariable = /var\(/.test(value ?? "");
|
|
46
|
+
const valueIsColorMix = /color-mix\(/.test(value ?? "");
|
|
47
47
|
return !valueIsCssVariable && !valueIsColorMix;
|
|
48
48
|
};
|
|
49
49
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,mBAAwB;AACxB,kBAAuB;AAKvB,kBAAmB;AAAA,IAMnB,sBAAO,CAAC,aAAAA,SAAa,YAAAC,OAAU,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,mBAAwB;AACxB,kBAAuB;AAKvB,kBAAmB;AAAA,IAMnB,sBAAO,CAAC,aAAAA,SAAa,YAAAC,OAAU,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,gCAA4B,sBAAO,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,gCAA4B,sBAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,aAAO,gBAAG,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,8BAA0B,sBAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
|
|
6
6
|
"names": ["namesPlugin", "a11yPlugin"]
|
|
7
7
|
}
|
|
@@ -65,7 +65,6 @@ var DetectOutside = (0, import_with_focus_outside.default)(class DetectOutsideCo
|
|
|
65
65
|
});
|
|
66
66
|
var getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);
|
|
67
67
|
function ComboboxControl(props) {
|
|
68
|
-
var _currentOption$label;
|
|
69
68
|
const {
|
|
70
69
|
__next40pxDefaultSize = false,
|
|
71
70
|
value: valueProp,
|
|
@@ -90,7 +89,7 @@ function ComboboxControl(props) {
|
|
|
90
89
|
onChange: onChangeProp
|
|
91
90
|
});
|
|
92
91
|
const currentOption = options.find((option) => option.value === value);
|
|
93
|
-
const currentLabel =
|
|
92
|
+
const currentLabel = currentOption?.label ?? "";
|
|
94
93
|
const instanceId = (0, import_compose.useInstanceId)(ComboboxControl, "combobox-control");
|
|
95
94
|
const [selectedSuggestion, setSelectedSuggestion] = (0, import_element.useState)(currentOption || null);
|
|
96
95
|
const [isExpanded, setIsExpanded] = (0, import_element.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAgC;AAChC,qBAAgE;AAChE,qBAA8B;AAC9B,kBAAsB;AACtB,mBAA2B;AAK3B,oBAAiC;AACjC,yBAAuB;AACvB,8BAA4B;AAC5B,0BAAwB;AACxB,oBAAmB;AACnB,kBAA0B;AAC1B,gCAA6B;AAC7B,mBAAmC;AACnC,qBAAoC;AACpC,kCAAiD;AACjD,oCAAoC;AACpC,kCAA4C;AAC5C,qBAAoB;AACpB,yBAA2C;AAC3C,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,oBAAgB,0BAAAA,SAAiB,MAAM,+BAA+B,yBAAU;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": ["withFocusOutside", "_jsx", "BaseControl", "clsx", "_jsxs", "TokenInput", "Spinner", "Button", "SuggestionsList"]
|
|
7
7
|
}
|
|
@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
|
|
|
38
38
|
var import_context = require("./context.cjs");
|
|
39
39
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
40
|
var CompositeGroupLabel2 = (0, import_element.forwardRef)(function CompositeGroupLabel3(props, ref) {
|
|
41
|
-
var _props$store;
|
|
42
41
|
const context = (0, import_context.useCompositeContext)();
|
|
43
|
-
const store =
|
|
42
|
+
const store = props.store ?? context.store;
|
|
44
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeGroupLabel, {
|
|
45
44
|
store,
|
|
46
45
|
...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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,2BAAsB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,2BAAsB,2BAAW,SAASA,qBAAoB,OAAO,KAAK;AACrF,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,6BAAqB;AAAA,IACpD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeGroupLabel", "_jsx"]
|
|
7
7
|
}
|
|
@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
|
|
|
38
38
|
var import_context = require("./context.cjs");
|
|
39
39
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
40
|
var CompositeGroup2 = (0, import_element.forwardRef)(function CompositeGroup3(props, ref) {
|
|
41
|
-
var _props$store;
|
|
42
41
|
const context = (0, import_context.useCompositeContext)();
|
|
43
|
-
const store =
|
|
42
|
+
const store = props.store ?? context.store;
|
|
44
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeGroup, {
|
|
45
44
|
store,
|
|
46
45
|
...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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
|
|
6
6
|
"names": ["CompositeGroup", "_jsx"]
|
|
7
7
|
}
|