@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
|
@@ -39,18 +39,16 @@ function UnforwardedControlWithError({
|
|
|
39
39
|
return () => validityTarget?.removeEventListener("invalid", handler);
|
|
40
40
|
}, [getValidityTarget]);
|
|
41
41
|
useEffect(() => {
|
|
42
|
-
var _validityTarget$close;
|
|
43
42
|
const validityTarget = getValidityTarget();
|
|
44
43
|
const suppressNativePopover = (event) => {
|
|
45
|
-
var _target$form$elements;
|
|
46
44
|
event.preventDefault();
|
|
47
45
|
const target = event.target;
|
|
48
|
-
const firstErrorInForm = Array.from(
|
|
46
|
+
const firstErrorInForm = Array.from(target.form?.elements ?? []).find((el) => !el.validity.valid);
|
|
49
47
|
if (!target.form || firstErrorInForm === target) {
|
|
50
48
|
target.focus();
|
|
51
49
|
}
|
|
52
50
|
};
|
|
53
|
-
const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from(
|
|
51
|
+
const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type="radio"][name="${validityTarget?.name}"]`) ?? []).filter((sibling) => sibling !== validityTarget) : [];
|
|
54
52
|
validityTarget?.addEventListener("invalid", suppressNativePopover);
|
|
55
53
|
radioSibilings.forEach((sibling) => sibling.addEventListener("invalid", suppressNativePopover));
|
|
56
54
|
return () => {
|
|
@@ -86,8 +84,7 @@ function UnforwardedControlWithError({
|
|
|
86
84
|
break;
|
|
87
85
|
}
|
|
88
86
|
case "invalid": {
|
|
89
|
-
|
|
90
|
-
validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
|
|
87
|
+
validityTarget?.setCustomValidity(customValidity.message ?? "");
|
|
91
88
|
setErrorMessage(validityTarget?.validationMessage);
|
|
92
89
|
setStatusMessage(void 0);
|
|
93
90
|
break;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/validated-form-controls/control-with-error.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n if (required && !markWhenOptional) {\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [label, \" \", `(${__('Required')})`]\n });\n }\n if (!required && markWhenOptional) {\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [label, \" \", `(${__('Optional')})`]\n });\n }\n return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n required,\n markWhenOptional,\n customValidity,\n getValidityTarget,\n children\n}, forwardedRef) {\n const [errorMessage, setErrorMessage] = useState();\n const [statusMessage, setStatusMessage] = useState();\n const [showMessage, setShowMessage] = useState(false);\n const [isTouched, setIsTouched] = useState(false);\n\n // Ensure that error messages are visible when an `invalid` event is triggered,\n // e.g. when a form is submitted or reportValidity() is called.\n useEffect(() => {\n const validityTarget = getValidityTarget();\n const handler = () => {\n setShowMessage(true);\n validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n };\n validityTarget?.addEventListener('invalid', handler);\n return () => validityTarget?.removeEventListener('invalid', handler);\n }, [getValidityTarget]);\n\n // Suppress the native error popover, while keeping the focus behavior intact.\n useEffect(() => {\n
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,cAAc,YAAY,WAAW,gBAAgB;AAM9D,SAAS,yBAAyB;AAClC,SAAS,YAAY,WAAW,QAAQ,OAAO,OAAO,YAAY;AAClE,SAAS,wBAAwB,OAAO,UAAU,kBAAkB;AAClE,MAAI,YAAY,CAAC,kBAAkB;AACjC,WAAoB,sBAAM,WAAW;AAAA,MACnC,UAAU,CAAC,OAAO,KAAK,IAAI,GAAG,UAAU,CAAC,GAAG;AAAA,IAC9C,CAAC;AAAA,EACH;AACA,MAAI,CAAC,YAAY,kBAAkB;AACjC,WAAoB,sBAAM,WAAW;AAAA,MACnC,UAAU,CAAC,OAAO,KAAK,IAAI,GAAG,UAAU,CAAC,GAAG;AAAA,IAC9C,CAAC;AAAA,EACH;AACA,SAAO;AACT;AACA,IAAM,6BAA6B;AACnC,IAAM,YAAY;AAWlB,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,cAAc;AACf,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS;AACjD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS;AACnD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAIhD,YAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,UAAU,MAAM;AACpB,qBAAe,IAAI;AACnB,sBAAgB,aAAa,4BAA4B,EAAE;AAAA,IAC7D;AACA,oBAAgB,iBAAiB,WAAW,OAAO;AACnD,WAAO,MAAM,gBAAgB,oBAAoB,WAAW,OAAO;AAAA,EACrE,GAAG,CAAC,iBAAiB,CAAC;AAGtB,YAAU,MAAM;AACd,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n if (required && !markWhenOptional) {\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [label, \" \", `(${__('Required')})`]\n });\n }\n if (!required && markWhenOptional) {\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [label, \" \", `(${__('Optional')})`]\n });\n }\n return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n required,\n markWhenOptional,\n customValidity,\n getValidityTarget,\n children\n}, forwardedRef) {\n const [errorMessage, setErrorMessage] = useState();\n const [statusMessage, setStatusMessage] = useState();\n const [showMessage, setShowMessage] = useState(false);\n const [isTouched, setIsTouched] = useState(false);\n\n // Ensure that error messages are visible when an `invalid` event is triggered,\n // e.g. when a form is submitted or reportValidity() is called.\n useEffect(() => {\n const validityTarget = getValidityTarget();\n const handler = () => {\n setShowMessage(true);\n validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n };\n validityTarget?.addEventListener('invalid', handler);\n return () => validityTarget?.removeEventListener('invalid', handler);\n }, [getValidityTarget]);\n\n // Suppress the native error popover, while keeping the focus behavior intact.\n useEffect(() => {\n const validityTarget = getValidityTarget();\n const suppressNativePopover = event => {\n event.preventDefault();\n const target = event.target;\n const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n if (!target.form || firstErrorInForm === target) {\n target.focus();\n }\n };\n\n // Radio inputs need special handling because all radio inputs with the\n // same `name` will be marked as invalid. Without this handling, the last radio option\n // will be focused with an unsuppressed native popover.\n const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n validityTarget?.addEventListener('invalid', suppressNativePopover);\n radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n return () => {\n validityTarget?.removeEventListener('invalid', suppressNativePopover);\n radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n };\n }, [getValidityTarget]);\n\n // Handle validity messages.\n useEffect(() => {\n const validityTarget = getValidityTarget();\n if (!customValidity?.type) {\n validityTarget?.setCustomValidity('');\n setErrorMessage(validityTarget?.validationMessage);\n setStatusMessage(undefined);\n return;\n }\n switch (customValidity.type) {\n case 'validating':\n {\n validityTarget?.setCustomValidity('');\n setErrorMessage(undefined);\n setStatusMessage({\n type: 'validating',\n message: customValidity.message\n });\n break;\n }\n case 'valid':\n {\n validityTarget?.setCustomValidity('');\n setErrorMessage(validityTarget?.validationMessage);\n setStatusMessage({\n type: 'valid',\n message: customValidity.message\n });\n break;\n }\n case 'invalid':\n {\n validityTarget?.setCustomValidity(customValidity.message ?? '');\n setErrorMessage(validityTarget?.validationMessage);\n setStatusMessage(undefined);\n break;\n }\n }\n }, [customValidity, getValidityTarget]);\n\n // Show messages if field has been touched (i.e. has blurred at least once),\n // or validation has been triggered by the consumer/user.\n useEffect(() => {\n if (!isTouched || showMessage) {\n return;\n }\n if (customValidity?.type === 'validating') {\n // Don't show validating indicators for quick calls that take less than 1 sec.\n const timer = setTimeout(() => {\n setShowMessage(true);\n }, 1000);\n return () => clearTimeout(timer);\n }\n setShowMessage(true);\n }, [isTouched, customValidity?.type, showMessage]);\n\n // Mark blurred fields as touched.\n const onBlur = event => {\n if (isTouched) {\n return;\n }\n\n // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n // This prevents unnecessary blurs from components with multiple focusable elements.\n if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n setIsTouched(true);\n getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n }\n };\n const message = () => {\n if (errorMessage) {\n return /*#__PURE__*/_jsx(ValidityIndicator, {\n type: \"invalid\",\n message: errorMessage\n });\n }\n if (statusMessage?.type) {\n return /*#__PURE__*/_jsx(ValidityIndicator, {\n type: statusMessage.type,\n message: statusMessage.message\n });\n }\n return null;\n };\n return /*#__PURE__*/_jsxs(\"div\", {\n className: className,\n ref: forwardedRef,\n onBlur: onBlur,\n children: [cloneElement(children, {\n label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n required\n }), /*#__PURE__*/_jsx(\"div\", {\n \"aria-live\": \"polite\",\n children: showMessage && message()\n })]\n });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AA6BA,eAAO,MAAM,WAAW,IAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.1.0",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -64,24 +64,24 @@
|
|
|
64
64
|
"@types/highlight-words-core": "1.2.1",
|
|
65
65
|
"@types/react": "^18.3.27",
|
|
66
66
|
"@use-gesture/react": "^10.3.1",
|
|
67
|
-
"@wordpress/a11y": "^4.
|
|
68
|
-
"@wordpress/base-styles": "^6.
|
|
69
|
-
"@wordpress/compose": "^7.
|
|
70
|
-
"@wordpress/date": "^5.
|
|
71
|
-
"@wordpress/deprecated": "^4.
|
|
72
|
-
"@wordpress/dom": "^4.
|
|
73
|
-
"@wordpress/element": "^6.
|
|
74
|
-
"@wordpress/escape-html": "^3.
|
|
75
|
-
"@wordpress/hooks": "^4.
|
|
76
|
-
"@wordpress/html-entities": "^4.
|
|
77
|
-
"@wordpress/i18n": "^6.
|
|
78
|
-
"@wordpress/icons": "^11.
|
|
79
|
-
"@wordpress/is-shallow-equal": "^5.
|
|
80
|
-
"@wordpress/keycodes": "^4.
|
|
81
|
-
"@wordpress/primitives": "^4.
|
|
82
|
-
"@wordpress/private-apis": "^1.
|
|
83
|
-
"@wordpress/rich-text": "^7.
|
|
84
|
-
"@wordpress/warning": "^3.
|
|
67
|
+
"@wordpress/a11y": "^4.39.0",
|
|
68
|
+
"@wordpress/base-styles": "^6.15.0",
|
|
69
|
+
"@wordpress/compose": "^7.39.0",
|
|
70
|
+
"@wordpress/date": "^5.39.0",
|
|
71
|
+
"@wordpress/deprecated": "^4.39.0",
|
|
72
|
+
"@wordpress/dom": "^4.39.0",
|
|
73
|
+
"@wordpress/element": "^6.39.0",
|
|
74
|
+
"@wordpress/escape-html": "^3.39.0",
|
|
75
|
+
"@wordpress/hooks": "^4.39.0",
|
|
76
|
+
"@wordpress/html-entities": "^4.39.0",
|
|
77
|
+
"@wordpress/i18n": "^6.12.0",
|
|
78
|
+
"@wordpress/icons": "^11.6.0",
|
|
79
|
+
"@wordpress/is-shallow-equal": "^5.39.0",
|
|
80
|
+
"@wordpress/keycodes": "^4.39.0",
|
|
81
|
+
"@wordpress/primitives": "^4.39.0",
|
|
82
|
+
"@wordpress/private-apis": "^1.39.0",
|
|
83
|
+
"@wordpress/rich-text": "^7.39.0",
|
|
84
|
+
"@wordpress/warning": "^3.39.0",
|
|
85
85
|
"change-case": "^4.1.2",
|
|
86
86
|
"clsx": "^2.1.1",
|
|
87
87
|
"colord": "^2.7.0",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"@storybook/react-vite": "^10.1.11",
|
|
108
108
|
"@testing-library/jest-dom": "^6.6.3",
|
|
109
109
|
"@types/jest": "^29.5.14",
|
|
110
|
-
"@wordpress/jest-console": "^8.
|
|
110
|
+
"@wordpress/jest-console": "^8.39.0",
|
|
111
111
|
"snapshot-diff": "^0.10.0",
|
|
112
112
|
"storybook": "^10.1.11",
|
|
113
113
|
"timezone-mock": "^1.3.6"
|
|
@@ -119,5 +119,5 @@
|
|
|
119
119
|
"publishConfig": {
|
|
120
120
|
"access": "public"
|
|
121
121
|
},
|
|
122
|
-
"gitHead": "
|
|
122
|
+
"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
|
|
123
123
|
}
|
package/src/private-apis.ts
CHANGED
|
@@ -14,6 +14,7 @@ import Badge from './badge';
|
|
|
14
14
|
import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
|
|
15
15
|
import {
|
|
16
16
|
ValidatedCheckboxControl,
|
|
17
|
+
ValidatedComboboxControl,
|
|
17
18
|
ValidatedInputControl,
|
|
18
19
|
ValidatedNumberControl,
|
|
19
20
|
ValidatedSelectControl,
|
|
@@ -43,6 +44,7 @@ lock( privateApis, {
|
|
|
43
44
|
Picker,
|
|
44
45
|
ValidatedInputControl,
|
|
45
46
|
ValidatedCheckboxControl,
|
|
47
|
+
ValidatedComboboxControl,
|
|
46
48
|
ValidatedNumberControl,
|
|
47
49
|
ValidatedSelectControl,
|
|
48
50
|
ValidatedRadioControl,
|