@wordpress/components 33.1.1-next.v.202605131032.0 → 34.0.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 +30 -1
- package/build/autocomplete/index.cjs +5 -4
- package/build/autocomplete/index.cjs.map +3 -3
- package/build/border-control/border-control-dropdown/component.cjs +33 -33
- package/build/border-control/border-control-dropdown/component.cjs.map +3 -3
- package/build/box-control/index.cjs +0 -6
- package/build/box-control/index.cjs.map +2 -2
- package/build/box-control/utils.cjs +0 -38
- package/build/box-control/utils.cjs.map +3 -3
- package/build/custom-gradient-picker/gradient-bar/index.cjs.map +2 -2
- package/build/disabled/index.cjs +1 -1
- package/build/disabled/index.cjs.map +2 -2
- package/build/draggable/index.cjs +101 -7
- package/build/draggable/index.cjs.map +3 -3
- package/build/form-token-field/index.cjs +41 -7
- package/build/form-token-field/index.cjs.map +2 -2
- package/build/higher-order/with-notices/index.cjs +3 -15
- package/build/higher-order/with-notices/index.cjs.map +2 -2
- package/build/index.cjs +0 -17
- package/build/index.cjs.map +2 -2
- package/build/input-control/input-base.cjs +31 -34
- package/build/input-control/input-base.cjs.map +2 -2
- package/build/notice/index.cjs +33 -35
- package/build/notice/index.cjs.map +2 -2
- package/build/popover/index.cjs +12 -0
- package/build/popover/index.cjs.map +2 -2
- package/build/responsive-wrapper/index.cjs +4 -3
- package/build/responsive-wrapper/index.cjs.map +2 -2
- package/build/tabs/styles.cjs +5 -5
- package/build/tabs/styles.cjs.map +2 -2
- package/build/tooltip/index.cjs +2 -1
- package/build/tooltip/index.cjs.map +2 -2
- package/build-module/autocomplete/index.mjs +6 -5
- package/build-module/autocomplete/index.mjs.map +2 -2
- package/build-module/border-control/border-control-dropdown/component.mjs +34 -34
- package/build-module/border-control/border-control-dropdown/component.mjs.map +2 -2
- package/build-module/box-control/index.mjs +0 -2
- package/build-module/box-control/index.mjs.map +2 -2
- package/build-module/box-control/utils.mjs +0 -27
- package/build-module/box-control/utils.mjs.map +2 -2
- package/build-module/custom-gradient-picker/gradient-bar/index.mjs.map +2 -2
- package/build-module/disabled/index.mjs +1 -1
- package/build-module/disabled/index.mjs.map +2 -2
- package/build-module/draggable/index.mjs +101 -7
- package/build-module/draggable/index.mjs.map +3 -3
- package/build-module/form-token-field/index.mjs +41 -7
- package/build-module/form-token-field/index.mjs.map +2 -2
- package/build-module/higher-order/with-notices/index.mjs +4 -16
- package/build-module/higher-order/with-notices/index.mjs.map +2 -2
- package/build-module/index.mjs +87 -99
- package/build-module/index.mjs.map +2 -2
- package/build-module/input-control/input-base.mjs +31 -34
- package/build-module/input-control/input-base.mjs.map +2 -2
- package/build-module/notice/index.mjs +34 -36
- package/build-module/notice/index.mjs.map +2 -2
- package/build-module/popover/index.mjs +12 -0
- package/build-module/popover/index.mjs.map +2 -2
- package/build-module/responsive-wrapper/index.mjs +4 -3
- package/build-module/responsive-wrapper/index.mjs.map +2 -2
- package/build-module/tabs/styles.mjs +5 -5
- package/build-module/tabs/styles.mjs.map +2 -2
- package/build-module/tooltip/index.mjs +2 -1
- package/build-module/tooltip/index.mjs.map +2 -2
- package/build-style/style-rtl.css +64 -66
- package/build-style/style.css +64 -66
- package/build-types/autocomplete/index.d.ts.map +1 -1
- package/build-types/badge/stories/e2e/index.story.d.ts +7 -0
- package/build-types/badge/stories/e2e/index.story.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control/hook.d.ts +24 -10
- package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +26 -12
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +24 -10
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts +25 -11
- package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -1
- package/build-types/border-control/border-control/hook.d.ts +24 -10
- package/build-types/border-control/border-control/hook.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/hook.d.ts +23 -9
- package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
- package/build-types/box-control/index.d.ts +0 -1
- package/build-types/box-control/index.d.ts.map +1 -1
- package/build-types/box-control/styles/box-control-styles.d.ts +3 -4
- package/build-types/box-control/styles/box-control-styles.d.ts.map +1 -1
- package/build-types/box-control/utils.d.ts +0 -13
- package/build-types/box-control/utils.d.ts.map +1 -1
- package/build-types/button/stories/e2e/index.story.d.ts +1 -0
- package/build-types/button/stories/e2e/index.story.d.ts.map +1 -1
- package/build-types/card/card/hook.d.ts +25 -11
- package/build-types/card/card/hook.d.ts.map +1 -1
- package/build-types/card/card-body/hook.d.ts +25 -11
- package/build-types/card/card-body/hook.d.ts.map +1 -1
- package/build-types/card/card-divider/hook.d.ts +26 -12
- package/build-types/card/card-divider/hook.d.ts.map +1 -1
- package/build-types/card/card-footer/hook.d.ts +25 -11
- package/build-types/card/card-footer/hook.d.ts.map +1 -1
- package/build-types/card/card-header/hook.d.ts +25 -11
- package/build-types/card/card-header/hook.d.ts.map +1 -1
- package/build-types/card/card-media/hook.d.ts +25 -11
- package/build-types/card/card-media/hook.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +3 -4
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/composite/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/gradient-bar/index.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/styles.d.ts +4 -12
- package/build-types/custom-select-control-v2/styles.d.ts.map +1 -1
- package/build-types/date-time/time-picker/styles.d.ts +4 -4
- package/build-types/draggable/index.d.ts.map +1 -1
- package/build-types/draggable/stories/index.story.d.ts +4 -5
- package/build-types/draggable/stories/index.story.d.ts.map +1 -1
- package/build-types/draggable/types.d.ts +4 -0
- package/build-types/draggable/types.d.ts.map +1 -1
- package/build-types/elevation/hook.d.ts +25 -11
- package/build-types/elevation/hook.d.ts.map +1 -1
- package/build-types/flex/flex/hook.d.ts +25 -11
- package/build-types/flex/flex/hook.d.ts.map +1 -1
- package/build-types/flex/flex-block/hook.d.ts +25 -11
- package/build-types/flex/flex-block/hook.d.ts.map +1 -1
- package/build-types/flex/flex-item/hook.d.ts +25 -11
- package/build-types/flex/flex-item/hook.d.ts.map +1 -1
- package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +1 -1
- package/build-types/form-token-field/index.d.ts.map +1 -1
- package/build-types/grid/hook.d.ts +25 -11
- package/build-types/grid/hook.d.ts.map +1 -1
- package/build-types/h-stack/hook.d.ts +25 -11
- package/build-types/h-stack/hook.d.ts.map +1 -1
- package/build-types/heading/hook.d.ts +25 -11
- package/build-types/heading/hook.d.ts.map +1 -1
- package/build-types/higher-order/with-fallback-styles/index.d.ts +1 -3
- package/build-types/higher-order/with-filters/index.d.ts +1 -6
- package/build-types/higher-order/with-filters/index.d.ts.map +1 -1
- package/build-types/higher-order/with-notices/index.d.ts +2 -4
- package/build-types/higher-order/with-notices/index.d.ts.map +1 -1
- package/build-types/icon/stories/index.story.d.ts +0 -6
- package/build-types/icon/stories/index.story.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -6
- package/build-types/index.d.ts.map +1 -1
- package/build-types/input-control/reducer/reducer.d.ts +1 -1
- package/build-types/item-group/item/hook.d.ts +25 -11
- package/build-types/item-group/item/hook.d.ts.map +1 -1
- package/build-types/item-group/item-group/hook.d.ts +25 -11
- package/build-types/item-group/item-group/hook.d.ts.map +1 -1
- package/build-types/menu/stories/index.story.d.ts.map +1 -1
- package/build-types/menu/styles.d.ts +7 -21
- package/build-types/menu/styles.d.ts.map +1 -1
- package/build-types/modal/use-modal-exit-animation.d.ts +1 -1
- package/build-types/navigator/navigator-back-button/hook.d.ts +26 -12
- package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/hook.d.ts +26 -12
- package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
- package/build-types/notice/index.d.ts.map +1 -1
- package/build-types/notice/types.d.ts +1 -2
- package/build-types/notice/types.d.ts.map +1 -1
- package/build-types/number-control/index.d.ts +1 -1
- package/build-types/number-control/index.d.ts.map +1 -1
- package/build-types/number-control/stories/index.story.d.ts +1 -1
- package/build-types/number-control/stories/index.story.d.ts.map +1 -1
- package/build-types/popover/index.d.ts.map +1 -1
- package/build-types/popover/types.d.ts +2 -2
- package/build-types/popover/types.d.ts.map +1 -1
- package/build-types/range-control/index.d.ts +2 -3
- package/build-types/range-control/index.d.ts.map +1 -1
- package/build-types/range-control/stories/index.story.d.ts.map +1 -1
- package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
- package/build-types/range-control/types.d.ts +1 -5
- package/build-types/range-control/types.d.ts.map +1 -1
- package/build-types/responsive-wrapper/index.d.ts.map +1 -1
- package/build-types/scrollable/hook.d.ts +25 -11
- package/build-types/scrollable/hook.d.ts.map +1 -1
- package/build-types/snackbar/index.d.ts +2 -2
- package/build-types/snackbar/types.d.ts +2 -2
- package/build-types/snackbar/types.d.ts.map +1 -1
- package/build-types/spacer/hook.d.ts +25 -11
- package/build-types/spacer/hook.d.ts.map +1 -1
- package/build-types/surface/hook.d.ts +25 -11
- package/build-types/surface/hook.d.ts.map +1 -1
- package/build-types/tab-panel/stories/index.story.d.ts +0 -6
- package/build-types/tab-panel/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/stories/index.story.d.ts +0 -6
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts +3 -9
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/text/hook.d.ts +25 -11
- package/build-types/text/hook.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel/hook.d.ts +25 -11
- package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-header/hook.d.ts +25 -11
- package/build-types/tools-panel/tools-panel-header/hook.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-item/hook.d.ts +25 -11
- package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
- package/build-types/tooltip/index.d.ts.map +1 -1
- package/build-types/truncate/hook.d.ts +25 -11
- package/build-types/truncate/hook.d.ts.map +1 -1
- package/build-types/unit-control/index.d.ts +1 -1
- package/build-types/unit-control/index.d.ts.map +1 -1
- package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -1
- package/build-types/utils/get-node-text.d.ts.map +1 -1
- package/build-types/v-stack/hook.d.ts +25 -11
- package/build-types/v-stack/hook.d.ts.map +1 -1
- package/build-types/validated-form-controls/components/number-control.d.ts +1 -1
- package/build-types/validated-form-controls/components/number-control.d.ts.map +1 -1
- package/build-types/validated-form-controls/components/range-control.d.ts +2 -3
- package/build-types/validated-form-controls/components/range-control.d.ts.map +1 -1
- package/build-types/validated-form-controls/control-with-error.d.ts +4 -1
- package/build-types/validated-form-controls/control-with-error.d.ts.map +1 -1
- package/package.json +27 -25
- package/src/autocomplete/README.md +1 -1
- package/src/autocomplete/index.tsx +25 -7
- package/src/badge/stories/e2e/index.story.tsx +21 -0
- package/src/border-control/border-control-dropdown/component.tsx +36 -37
- package/src/box-control/index.tsx +0 -1
- package/src/box-control/utils.ts +0 -43
- package/src/button/stories/e2e/index.story.tsx +11 -0
- package/src/composite/stories/index.story.tsx +0 -1
- package/src/custom-gradient-picker/gradient-bar/index.tsx +1 -1
- package/src/disabled/index.tsx +1 -1
- package/src/draggable/index.tsx +32 -10
- package/src/draggable/stories/index.story.tsx +11 -6
- package/src/draggable/style.module.scss +29 -0
- package/src/draggable/types.ts +4 -0
- package/src/form-file-upload/README.md +1 -1
- package/src/form-token-field/index.tsx +84 -8
- package/src/form-token-field/test/index.tsx +189 -0
- package/src/h-stack/hook.tsx +1 -1
- package/src/higher-order/with-notices/index.tsx +4 -21
- package/src/higher-order/with-notices/test/index.tsx +0 -18
- package/src/icon/stories/index.story.tsx +2 -14
- package/src/index.ts +0 -6
- package/src/input-control/input-base.tsx +2 -2
- package/src/menu/README.md +7 -7
- package/src/menu/stories/index.story.tsx +0 -1
- package/src/menu/test/index.tsx +9 -4
- package/src/modal/style.scss +2 -1
- package/src/notice/README.md +1 -2
- package/src/notice/index.tsx +57 -64
- package/src/notice/style.scss +49 -41
- package/src/notice/test/__snapshots__/index.tsx.snap +23 -23
- package/src/notice/test/index.tsx +5 -5
- package/src/notice/types.ts +1 -2
- package/src/popover/index.tsx +29 -1
- package/src/popover/test/index.tsx +138 -1
- package/src/popover/types.ts +2 -4
- package/src/range-control/stories/index.story.tsx +0 -1
- package/src/range-control/types.ts +1 -5
- package/src/responsive-wrapper/index.tsx +7 -3
- package/src/snackbar/README.md +1 -1
- package/src/snackbar/types.ts +2 -2
- package/src/style.scss +0 -1
- package/src/tab-panel/stories/index.story.tsx +2 -13
- package/src/tab-panel/style.scss +36 -14
- package/src/tabs/README.md +1 -1
- package/src/tabs/stories/index.story.tsx +2 -14
- package/src/tabs/styles.ts +3 -8
- package/src/tabs/tablist.tsx +1 -1
- package/src/tooltip/index.tsx +7 -1
- package/src/tree-grid/test/cell.tsx +0 -1
- package/src/tree-grid/test/roving-tab-index-item.tsx +0 -1
- package/src/tree-select/README.md +1 -1
- package/src/utils/get-node-text.ts +7 -1
- package/src/validated-form-controls/control-with-error.tsx +6 -1
- package/build/navigation/back-button/index.cjs +0 -86
- package/build/navigation/back-button/index.cjs.map +0 -7
- package/build/navigation/constants.cjs +0 -34
- package/build/navigation/constants.cjs.map +0 -7
- package/build/navigation/context.cjs +0 -58
- package/build/navigation/context.cjs.map +0 -7
- package/build/navigation/group/context.cjs +0 -38
- package/build/navigation/group/context.cjs.map +0 -7
- package/build/navigation/group/index.cjs +0 -88
- package/build/navigation/group/index.cjs.map +0 -7
- package/build/navigation/index.cjs +0 -113
- package/build/navigation/index.cjs.map +0 -7
- package/build/navigation/item/base-content.cjs +0 -44
- package/build/navigation/item/base-content.cjs.map +0 -7
- package/build/navigation/item/base.cjs +0 -66
- package/build/navigation/item/base.cjs.map +0 -7
- package/build/navigation/item/index.cjs +0 -119
- package/build/navigation/item/index.cjs.map +0 -7
- package/build/navigation/item/use-navigation-tree-item.cjs +0 -64
- package/build/navigation/item/use-navigation-tree-item.cjs.map +0 -7
- package/build/navigation/menu/context.cjs +0 -39
- package/build/navigation/menu/context.cjs.map +0 -7
- package/build/navigation/menu/index.cjs +0 -114
- package/build/navigation/menu/index.cjs.map +0 -7
- package/build/navigation/menu/menu-title-search.cjs +0 -111
- package/build/navigation/menu/menu-title-search.cjs.map +0 -7
- package/build/navigation/menu/menu-title.cjs +0 -104
- package/build/navigation/menu/menu-title.cjs.map +0 -7
- package/build/navigation/menu/search-no-results-found.cjs +0 -48
- package/build/navigation/menu/search-no-results-found.cjs.map +0 -7
- package/build/navigation/menu/use-navigation-tree-menu.cjs +0 -51
- package/build/navigation/menu/use-navigation-tree-menu.cjs.map +0 -7
- package/build/navigation/styles/navigation-styles.cjs +0 -170
- package/build/navigation/styles/navigation-styles.cjs.map +0 -7
- package/build/navigation/types.cjs +0 -19
- package/build/navigation/types.cjs.map +0 -7
- package/build/navigation/use-create-navigation-tree.cjs +0 -103
- package/build/navigation/use-create-navigation-tree.cjs.map +0 -7
- package/build/navigation/use-navigation-tree-nodes.cjs +0 -60
- package/build/navigation/use-navigation-tree-nodes.cjs.map +0 -7
- package/build/navigation/utils.cjs +0 -45
- package/build/navigation/utils.cjs.map +0 -7
- package/build-module/navigation/back-button/index.mjs +0 -51
- package/build-module/navigation/back-button/index.mjs.map +0 -7
- package/build-module/navigation/constants.mjs +0 -8
- package/build-module/navigation/constants.mjs.map +0 -7
- package/build-module/navigation/context.mjs +0 -32
- package/build-module/navigation/context.mjs.map +0 -7
- package/build-module/navigation/group/context.mjs +0 -12
- package/build-module/navigation/group/context.mjs.map +0 -7
- package/build-module/navigation/group/index.mjs +0 -53
- package/build-module/navigation/group/index.mjs.map +0 -7
- package/build-module/navigation/index.mjs +0 -78
- package/build-module/navigation/index.mjs.map +0 -7
- package/build-module/navigation/item/base-content.mjs +0 -23
- package/build-module/navigation/item/base-content.mjs.map +0 -7
- package/build-module/navigation/item/base.mjs +0 -35
- package/build-module/navigation/item/base.mjs.map +0 -7
- package/build-module/navigation/item/index.mjs +0 -84
- package/build-module/navigation/item/index.mjs.map +0 -7
- package/build-module/navigation/item/use-navigation-tree-item.mjs +0 -39
- package/build-module/navigation/item/use-navigation-tree-item.mjs.map +0 -7
- package/build-module/navigation/menu/context.mjs +0 -13
- package/build-module/navigation/menu/context.mjs.map +0 -7
- package/build-module/navigation/menu/index.mjs +0 -79
- package/build-module/navigation/menu/index.mjs.map +0 -7
- package/build-module/navigation/menu/menu-title-search.mjs +0 -80
- package/build-module/navigation/menu/menu-title-search.mjs.map +0 -7
- package/build-module/navigation/menu/menu-title.mjs +0 -73
- package/build-module/navigation/menu/menu-title.mjs.map +0 -7
- package/build-module/navigation/menu/search-no-results-found.mjs +0 -27
- package/build-module/navigation/menu/search-no-results-found.mjs.map +0 -7
- package/build-module/navigation/menu/use-navigation-tree-menu.mjs +0 -26
- package/build-module/navigation/menu/use-navigation-tree-menu.mjs.map +0 -7
- package/build-module/navigation/styles/navigation-styles.mjs +0 -124
- package/build-module/navigation/styles/navigation-styles.mjs.map +0 -7
- package/build-module/navigation/types.mjs +0 -1
- package/build-module/navigation/types.mjs.map +0 -7
- package/build-module/navigation/use-create-navigation-tree.mjs +0 -78
- package/build-module/navigation/use-create-navigation-tree.mjs.map +0 -7
- package/build-module/navigation/use-navigation-tree-nodes.mjs +0 -35
- package/build-module/navigation/use-navigation-tree-nodes.mjs.map +0 -7
- package/build-module/navigation/utils.mjs +0 -9
- package/build-module/navigation/utils.mjs.map +0 -7
- package/build-types/navigation/back-button/index.d.ts +0 -7
- package/build-types/navigation/back-button/index.d.ts.map +0 -1
- package/build-types/navigation/constants.d.ts +0 -3
- package/build-types/navigation/constants.d.ts.map +0 -1
- package/build-types/navigation/context.d.ts +0 -4
- package/build-types/navigation/context.d.ts.map +0 -1
- package/build-types/navigation/group/context.d.ts +0 -7
- package/build-types/navigation/group/context.d.ts.map +0 -1
- package/build-types/navigation/group/index.d.ts +0 -7
- package/build-types/navigation/group/index.d.ts.map +0 -1
- package/build-types/navigation/index.d.ts +0 -46
- package/build-types/navigation/index.d.ts.map +0 -1
- package/build-types/navigation/item/base-content.d.ts +0 -3
- package/build-types/navigation/item/base-content.d.ts.map +0 -1
- package/build-types/navigation/item/base.d.ts +0 -3
- package/build-types/navigation/item/base.d.ts.map +0 -1
- package/build-types/navigation/item/index.d.ts +0 -7
- package/build-types/navigation/item/index.d.ts.map +0 -1
- package/build-types/navigation/item/use-navigation-tree-item.d.ts +0 -3
- package/build-types/navigation/item/use-navigation-tree-item.d.ts.map +0 -1
- package/build-types/navigation/menu/context.d.ts +0 -7
- package/build-types/navigation/menu/context.d.ts.map +0 -1
- package/build-types/navigation/menu/index.d.ts +0 -7
- package/build-types/navigation/menu/index.d.ts.map +0 -1
- package/build-types/navigation/menu/menu-title-search.d.ts +0 -3
- package/build-types/navigation/menu/menu-title-search.d.ts.map +0 -1
- package/build-types/navigation/menu/menu-title.d.ts +0 -3
- package/build-types/navigation/menu/menu-title.d.ts.map +0 -1
- package/build-types/navigation/menu/search-no-results-found.d.ts +0 -3
- package/build-types/navigation/menu/search-no-results-found.d.ts.map +0 -1
- package/build-types/navigation/menu/use-navigation-tree-menu.d.ts +0 -3
- package/build-types/navigation/menu/use-navigation-tree-menu.d.ts.map +0 -1
- package/build-types/navigation/stories/index.story.d.ts +0 -23
- package/build-types/navigation/stories/index.story.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/controlled-state.d.ts +0 -7
- package/build-types/navigation/stories/utils/controlled-state.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/default.d.ts +0 -10
- package/build-types/navigation/stories/utils/default.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/group.d.ts +0 -10
- package/build-types/navigation/stories/utils/group.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/hide-if-empty.d.ts +0 -10
- package/build-types/navigation/stories/utils/hide-if-empty.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/more-examples.d.ts +0 -10
- package/build-types/navigation/stories/utils/more-examples.d.ts.map +0 -1
- package/build-types/navigation/stories/utils/search.d.ts +0 -10
- package/build-types/navigation/stories/utils/search.d.ts.map +0 -1
- package/build-types/navigation/styles/navigation-styles.d.ts +0 -55
- package/build-types/navigation/styles/navigation-styles.d.ts.map +0 -1
- package/build-types/navigation/test/index.d.ts +0 -2
- package/build-types/navigation/test/index.d.ts.map +0 -1
- package/build-types/navigation/types.d.ts +0 -266
- package/build-types/navigation/types.d.ts.map +0 -1
- package/build-types/navigation/use-create-navigation-tree.d.ts +0 -15
- package/build-types/navigation/use-create-navigation-tree.d.ts.map +0 -1
- package/build-types/navigation/use-navigation-tree-nodes.d.ts +0 -10
- package/build-types/navigation/use-navigation-tree-nodes.d.ts.map +0 -1
- package/build-types/navigation/utils.d.ts +0 -3
- package/build-types/navigation/utils.d.ts.map +0 -1
- package/src/draggable/style.scss +0 -21
- package/src/navigation/README.md +0 -267
- package/src/navigation/back-button/index.tsx +0 -73
- package/src/navigation/constants.tsx +0 -2
- package/src/navigation/context.tsx +0 -40
- package/src/navigation/group/context.tsx +0 -16
- package/src/navigation/group/index.tsx +0 -73
- package/src/navigation/index.tsx +0 -152
- package/src/navigation/item/base-content.tsx +0 -31
- package/src/navigation/item/base.tsx +0 -42
- package/src/navigation/item/index.tsx +0 -112
- package/src/navigation/item/use-navigation-tree-item.tsx +0 -47
- package/src/navigation/menu/context.tsx +0 -20
- package/src/navigation/menu/index.tsx +0 -105
- package/src/navigation/menu/menu-title-search.tsx +0 -99
- package/src/navigation/menu/menu-title.tsx +0 -100
- package/src/navigation/menu/search-no-results-found.tsx +0 -34
- package/src/navigation/menu/use-navigation-tree-menu.tsx +0 -29
- package/src/navigation/stories/index.story.tsx +0 -62
- package/src/navigation/stories/style.css +0 -25
- package/src/navigation/stories/utils/controlled-state.tsx +0 -149
- package/src/navigation/stories/utils/default.tsx +0 -92
- package/src/navigation/stories/utils/group.tsx +0 -61
- package/src/navigation/stories/utils/hide-if-empty.tsx +0 -66
- package/src/navigation/stories/utils/more-examples.tsx +0 -162
- package/src/navigation/stories/utils/search.tsx +0 -91
- package/src/navigation/styles/navigation-styles.tsx +0 -197
- package/src/navigation/test/index.tsx +0 -347
- package/src/navigation/types.ts +0 -325
- package/src/navigation/use-create-navigation-tree.tsx +0 -110
- package/src/navigation/use-navigation-tree-nodes.tsx +0 -31
- package/src/navigation/utils.tsx +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 34.0.0 (2026-05-27)
|
|
6
|
+
|
|
7
|
+
### Breaking Changes
|
|
8
|
+
|
|
9
|
+
- Upgrade React to v19 ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
|
|
10
|
+
- `BoxControl`: Remove deprecated `__experimentalApplyValueToSides` export ([#78528](https://github.com/WordPress/gutenberg/pull/78528)).
|
|
11
|
+
- `Navigation`: Completely remove deprecated component family ([#78529](https://github.com/WordPress/gutenberg/pull/78529)).
|
|
12
|
+
- `Notice`: Rework internal DOM structure and class names ([#78231](https://github.com/WordPress/gutenberg/pull/78231)). Consumers relying on those implementation details should update their projects accordingly:
|
|
13
|
+
- Removed the `is-dismissible` class name on the root wrapper.
|
|
14
|
+
- Moved the `.components-notice__actions` wrapper as a sibling of `.components-notice__content` (it was previously nested inside it).
|
|
15
|
+
|
|
16
|
+
### Enhancements
|
|
17
|
+
|
|
18
|
+
- `Tabs`, `TabPanel`: Align selected tab colors and indicators with `@wordpress/ui` `Tabs` ([#78418](https://github.com/WordPress/gutenberg/pull/78418)).
|
|
19
|
+
- `NoticeList`: Add vertical spacing between notices in a list.
|
|
20
|
+
- `Draggable`: Render the drag clone inside the `@wordpress/ui` compat overlay slot so it shares stacking with `@wordpress/ui` overlays opened mid-drag. Auto-enabled in WordPress environments; other hosts can opt in via `useEnableWpCompatOverlaySlot()` ([#78183](https://github.com/WordPress/gutenberg/pull/78183), [#78354](https://github.com/WordPress/gutenberg/pull/78354)).
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
- `Popover`: Don't close when focus moves into the `@wordpress/ui` compat overlay slot, or is restored to the popover from any portaled descendant. This unblocks nested overlays such as `@wordpress/ui` `Select`, which previously dismissed the host `Popover` on hover and on overlay dismissal ([#78407](https://github.com/WordPress/gutenberg/pull/78407)).
|
|
25
|
+
- `RangeControl`: Remove the `icon` prop from the web types. It was added in error during the TypeScript migration and never had any effect on web; use `beforeIcon` or `afterIcon` instead. The prop remains functional in the native (mobile) implementation ([#78444](https://github.com/WordPress/gutenberg/pull/78444)).
|
|
26
|
+
|
|
27
|
+
### Internal
|
|
28
|
+
|
|
29
|
+
- `Autocomplete`: Share the per-instance `keydown` listener across instances via `subscribeDelegatedListener` so a typical post-editor mount adds 1 native keydown listener on the document instead of one per `RichText` ([#78310](https://github.com/WordPress/gutenberg/pull/78310)).
|
|
30
|
+
- Declare `@emotion/native` as a direct dependency; it was previously a phantom dependency relying on hoisting ([#78687](https://github.com/WordPress/gutenberg/pull/78687)).
|
|
31
|
+
|
|
32
|
+
## 33.1.0 (2026-05-14)
|
|
6
33
|
|
|
7
34
|
### Enhancements
|
|
8
35
|
|
|
@@ -10,12 +37,14 @@
|
|
|
10
37
|
- `Button`: Align `link` variant underline (offset and thickness) with `ExternalLink` and `Link` from `@wordpress/ui` ([#77842](https://github.com/WordPress/gutenberg/pull/77842)).
|
|
11
38
|
- `Modal`: render as a bottom sheet on mobile so the height adapts to the content and CTAs stay within thumb reach ([#77956](https://github.com/WordPress/gutenberg/pull/77956)).
|
|
12
39
|
- `Text`: Use a theme-aware gray token for the muted variant ([#77999](https://github.com/WordPress/gutenberg/pull/77999)).
|
|
40
|
+
- `Notice`: Align appearance with `Notice` from `@wordpress/ui` (full border, rounded corners, tinted intent surfaces, design-token-driven colors and spacing, `closeSmall` dismiss icon, compact action buttons, and grid layout that places actions in their own row for symmetric padding) ([#78231](https://github.com/WordPress/gutenberg/pull/78231)).
|
|
13
41
|
|
|
14
42
|
### Bug Fixes
|
|
15
43
|
|
|
16
44
|
- `TabPanel`: Fix tab indicator animation while switching tabs ([#77812](https://github.com/WordPress/gutenberg/pull/77812)).
|
|
17
45
|
- `ColorPicker`: Fix issue where clearing the hex input entirely doesn't reset the selected color to black ([#77912](https://github.com/WordPress/gutenberg/pull/77912)).
|
|
18
46
|
- `ExternalLink`: Fix focus outline rendered in wp-admin ([#77935](https://github.com/WordPress/gutenberg/pull/77935)).
|
|
47
|
+
- `FormTokenField`: Correct `preventDefault` handling for `__experimentalValidateInput` and validate pasted delimiter-separated tokens ([#77181](https://github.com/WordPress/gutenberg/pull/77181)).
|
|
19
48
|
- `ColorPalette`: Fix duplicate-key warnings and incorrect selected swatch behavior when multiple palette entries share the same color value ([#78004](https://github.com/WordPress/gutenberg/pull/78004)).
|
|
20
49
|
|
|
21
50
|
### Internal
|
|
@@ -45,7 +45,11 @@ var import_autocompleter_ui = require("./autocompleter-ui.cjs");
|
|
|
45
45
|
var import_get_autocomplete_match = require("./get-autocomplete-match.cjs");
|
|
46
46
|
var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events.cjs");
|
|
47
47
|
var import_get_node_text = __toESM(require("../utils/get-node-text.cjs"));
|
|
48
|
+
var import_lock_unlock = require("../lock-unlock.cjs");
|
|
48
49
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
50
|
+
var {
|
|
51
|
+
subscribeDelegatedListener
|
|
52
|
+
} = (0, import_lock_unlock.unlock)(import_compose.privateApis);
|
|
49
53
|
var EMPTY_FILTERED_OPTIONS = [];
|
|
50
54
|
var AUTOCOMPLETE_HOOK_REFERENCE = {};
|
|
51
55
|
function getCompletionObject(completion) {
|
|
@@ -311,10 +315,7 @@ function useAutocompleteProps(options) {
|
|
|
311
315
|
function _onKeyDown(event) {
|
|
312
316
|
onKeyDownRef.current?.(event);
|
|
313
317
|
}
|
|
314
|
-
element
|
|
315
|
-
return () => {
|
|
316
|
-
element.removeEventListener("keydown", _onKeyDown);
|
|
317
|
-
};
|
|
318
|
+
return subscribeDelegatedListener(element, "keydown", _onKeyDown, true);
|
|
318
319
|
}, [])]);
|
|
319
320
|
const didUserInput = record.text !== previousRecord?.text;
|
|
320
321
|
if (!didUserInput) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/autocomplete/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n return completion;\n }\n return {\n action: 'insert-at-caret',\n value: completion\n };\n}\nconst initialState = {\n selectedIndex: 0,\n filteredOptions: EMPTY_FILTERED_OPTIONS,\n filterValue: '',\n autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n switch (action.type) {\n case 'RESET':\n return initialState;\n case 'SELECT':\n return {\n ...state,\n selectedIndex: action.index\n };\n case 'OPTIONS':\n return {\n ...state,\n filteredOptions: action.options,\n selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n };\n case 'MATCH':\n return {\n ...state,\n autocompleter: action.completer,\n filterValue: action.query\n };\n }\n}\nexport function useAutocomplete({\n record,\n onChange,\n onReplace,\n completers,\n contentRef\n}) {\n const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n const {\n selectedIndex,\n filteredOptions,\n filterValue,\n autocompleter\n } = state;\n const backspacingRef = useRef(false);\n const prevRecordTextRef = useRef('');\n const lastCompletionRef = useRef(null);\n function insertCompletion(replacement) {\n if (autocompleter === null) {\n return '';\n }\n const end = record.start;\n const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n const toInsert = create({\n html: renderToString(replacement)\n });\n onChange(insert(record, toInsert, start, end));\n return getTextContent(toInsert);\n }\n function select(option) {\n if (option.isDisabled || !autocompleter) {\n return;\n }\n const {\n getOptionCompletion\n } = autocompleter;\n if (!getOptionCompletion) {\n dispatch({\n type: 'RESET'\n });\n contentRef.current?.focus();\n return;\n }\n const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n if ('replace' === completionObject.action) {\n onReplace([completionObject.value]);\n // When replacing, the component will unmount, so don't reset\n // state (below) on an unmounted component.\n return;\n }\n if ('insert-at-caret' === completionObject.action) {\n const completionText = insertCompletion(completionObject.value);\n // When the completion value starts with the trigger prefix\n // (e.g. @username), the trigger stays in the text and would\n // re-activate the autocompleter. Store the completed text so\n // the effect can suppress the stale re-match.\n if (completionText.startsWith(autocompleter.triggerPrefix)) {\n const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n if (afterPrefix) {\n lastCompletionRef.current = {\n name: autocompleter.name,\n value: afterPrefix\n };\n }\n }\n }\n\n // Reset autocomplete state after insertion rather than before\n // so insertion events don't cause the completion menu to redisplay.\n dispatch({\n type: 'RESET'\n });\n\n // Make sure that the content remains focused after making a selection\n // and that the text cursor position is not lost.\n contentRef.current?.focus();\n }\n function onChangeOptions(options) {\n dispatch({\n type: 'OPTIONS',\n options\n });\n }\n function handleKeyDown(event) {\n backspacingRef.current = event.key === 'Backspace';\n if (!autocompleter) {\n return;\n }\n if (filteredOptions.length === 0) {\n return;\n }\n if (event.defaultPrevented) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n {\n const offset = event.key === 'ArrowUp' ? -1 : 1;\n const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n dispatch({\n type: 'SELECT',\n index: newIndex\n });\n // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n if (isAppleOS()) {\n speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n }\n break;\n }\n case 'Escape':\n dispatch({\n type: 'RESET'\n });\n event.preventDefault();\n break;\n case 'Enter':\n select(filteredOptions[selectedIndex]);\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n dispatch({\n type: 'RESET'\n });\n return;\n default:\n return;\n }\n\n // Any handled key should prevent original behavior. This relies on\n // the early return in the default case.\n event.preventDefault();\n }\n\n // textContent is a primitive (string), memoizing is not strictly necessary\n // but this is a preemptive performance improvement, since the autocompleter\n // is a potential bottleneck for the editor type metric.\n const textContent = useMemo(() => {\n if (isCollapsed(record)) {\n return getTextContent(slice(record, 0));\n }\n return '';\n }, [record]);\n useEffect(() => {\n const isTextChange = record.text !== prevRecordTextRef.current;\n prevRecordTextRef.current = record.text;\n function getTextAfterSelection() {\n return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n }\n const match = getAutocompleteMatch(textContent, completers, {\n matchCount: filteredOptions.length,\n isBackspacing: backspacingRef.current,\n getTextAfterSelection,\n lastCompletion: lastCompletionRef.current\n });\n if (!match) {\n if (autocompleter) {\n dispatch({\n type: 'RESET'\n });\n }\n return;\n }\n const {\n completer,\n filterValue: query\n } = match;\n\n // Don't re-activate a dismissed autocompleter on cursor-only\n // movement. `textContent` (text before cursor) changes with the\n // caret, so the effect re-runs, but `record.text` does not.\n // Complements the render-time `didUserInput` gate in\n // `useAutocompleteProps` for callers using this hook directly.\n if (!autocompleter && !isTextChange) {\n return;\n }\n\n // Clear stale completion ref when the user types a new trigger\n // for the same completer (the previous completion is no longer\n // relevant). Must be after the cursor-only check so that mere\n // cursor movement doesn't discard the suppression state.\n if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n lastCompletionRef.current = null;\n }\n dispatch({\n type: 'MATCH',\n completer,\n query\n });\n // We want to avoid introducing unexpected side effects.\n // See https://github.com/WordPress/gutenberg/pull/41820\n }, [textContent]);\n const {\n key: selectedKey = ''\n } = filteredOptions[selectedIndex] || {};\n const {\n className\n } = autocompleter || {};\n const isExpanded = !!autocompleter && filteredOptions.length > 0;\n const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n const hasSelection = record.start !== undefined;\n const showPopover = !!textContent && hasSelection && !!autocompleter;\n return {\n listBoxId,\n activeId,\n onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n autocompleter: autocompleter,\n className: className,\n filterValue: filterValue,\n instanceId: instanceId,\n listBoxId: listBoxId,\n selectedIndex: selectedIndex,\n onChangeOptions: onChangeOptions,\n onSelect: select,\n contentRef: contentRef,\n reset: () => dispatch({\n type: 'RESET'\n })\n }, autocompleter.name + autocompleter.triggerPrefix)\n };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n const history = useRef([]);\n const lastEntry = history.current[history.current.length - 1];\n\n // Only add to history if the value is meaningfully different from\n // the most recent entry (analogous to Set.add being a no-op for\n // duplicate references in the original implementation).\n if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n history.current.push(value);\n }\n\n // Keep the history size to 2.\n if (history.current.length > 2) {\n history.current.shift();\n }\n return history.current[0];\n}\nexport function useAutocompleteProps(options) {\n const ref = useRef(null);\n const onKeyDownRef = useRef(undefined);\n const {\n record\n } = options;\n const previousRecord = useLastDifferentValue(record);\n const {\n popover,\n listBoxId,\n activeId,\n onKeyDown\n } = useAutocomplete({\n ...options,\n contentRef: ref\n });\n onKeyDownRef.current = onKeyDown;\n const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n function _onKeyDown(event) {\n onKeyDownRef.current?.(event);\n }\n element.addEventListener('keydown', _onKeyDown);\n return () => {\n element.removeEventListener('keydown', _onKeyDown);\n };\n }, [])]);\n\n // We only want to show the popover if the user has typed something.\n const didUserInput = record.text !== previousRecord?.text;\n if (!didUserInput) {\n return {\n ref: mergedRefs\n };\n }\n return {\n ref: mergedRefs,\n children: popover,\n 'aria-autocomplete': listBoxId ? 'list' : undefined,\n 'aria-owns': listBoxId,\n 'aria-activedescendant': activeId\n };\n}\nexport default function Autocomplete({\n children,\n isSelected,\n ...options\n}) {\n const {\n popover,\n ...props\n } = useAutocomplete(options);\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [children(props), isSelected && popover]\n });\n}"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAuE;AACvE,
|
|
6
|
-
"names": ["getNodeText", "_jsx", "_jsxs", "_Fragment"]
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect, privateApis as composePrivateApis } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { unlock } from '../lock-unlock';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst {\n subscribeDelegatedListener\n} = unlock(composePrivateApis);\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n return completion;\n }\n return {\n action: 'insert-at-caret',\n value: completion\n };\n}\nconst initialState = {\n selectedIndex: 0,\n filteredOptions: EMPTY_FILTERED_OPTIONS,\n filterValue: '',\n autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n switch (action.type) {\n case 'RESET':\n return initialState;\n case 'SELECT':\n return {\n ...state,\n selectedIndex: action.index\n };\n case 'OPTIONS':\n return {\n ...state,\n filteredOptions: action.options,\n selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n };\n case 'MATCH':\n return {\n ...state,\n autocompleter: action.completer,\n filterValue: action.query\n };\n }\n}\nexport function useAutocomplete({\n record,\n onChange,\n onReplace,\n completers,\n contentRef\n}) {\n const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n const {\n selectedIndex,\n filteredOptions,\n filterValue,\n autocompleter\n } = state;\n const backspacingRef = useRef(false);\n const prevRecordTextRef = useRef('');\n const lastCompletionRef = useRef(null);\n function insertCompletion(replacement) {\n if (autocompleter === null) {\n return '';\n }\n const end = record.start;\n const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n const toInsert = create({\n html: renderToString(replacement)\n });\n onChange(insert(record, toInsert, start, end));\n return getTextContent(toInsert);\n }\n function select(option) {\n if (option.isDisabled || !autocompleter) {\n return;\n }\n const {\n getOptionCompletion\n } = autocompleter;\n if (!getOptionCompletion) {\n dispatch({\n type: 'RESET'\n });\n contentRef.current?.focus();\n return;\n }\n const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n if ('replace' === completionObject.action) {\n onReplace([completionObject.value]);\n // When replacing, the component will unmount, so don't reset\n // state (below) on an unmounted component.\n return;\n }\n if ('insert-at-caret' === completionObject.action) {\n const completionText = insertCompletion(completionObject.value);\n // When the completion value starts with the trigger prefix\n // (e.g. @username), the trigger stays in the text and would\n // re-activate the autocompleter. Store the completed text so\n // the effect can suppress the stale re-match.\n if (completionText.startsWith(autocompleter.triggerPrefix)) {\n const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n if (afterPrefix) {\n lastCompletionRef.current = {\n name: autocompleter.name,\n value: afterPrefix\n };\n }\n }\n }\n\n // Reset autocomplete state after insertion rather than before\n // so insertion events don't cause the completion menu to redisplay.\n dispatch({\n type: 'RESET'\n });\n\n // Make sure that the content remains focused after making a selection\n // and that the text cursor position is not lost.\n contentRef.current?.focus();\n }\n function onChangeOptions(options) {\n dispatch({\n type: 'OPTIONS',\n options\n });\n }\n function handleKeyDown(event) {\n backspacingRef.current = event.key === 'Backspace';\n if (!autocompleter) {\n return;\n }\n if (filteredOptions.length === 0) {\n return;\n }\n if (event.defaultPrevented) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n {\n const offset = event.key === 'ArrowUp' ? -1 : 1;\n const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n dispatch({\n type: 'SELECT',\n index: newIndex\n });\n // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n if (isAppleOS()) {\n speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n }\n break;\n }\n case 'Escape':\n dispatch({\n type: 'RESET'\n });\n event.preventDefault();\n break;\n case 'Enter':\n select(filteredOptions[selectedIndex]);\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n dispatch({\n type: 'RESET'\n });\n return;\n default:\n return;\n }\n\n // Any handled key should prevent original behavior. This relies on\n // the early return in the default case.\n event.preventDefault();\n }\n\n // textContent is a primitive (string), memoizing is not strictly necessary\n // but this is a preemptive performance improvement, since the autocompleter\n // is a potential bottleneck for the editor type metric.\n const textContent = useMemo(() => {\n if (isCollapsed(record)) {\n return getTextContent(slice(record, 0));\n }\n return '';\n }, [record]);\n useEffect(() => {\n const isTextChange = record.text !== prevRecordTextRef.current;\n prevRecordTextRef.current = record.text;\n function getTextAfterSelection() {\n return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n }\n const match = getAutocompleteMatch(textContent, completers, {\n matchCount: filteredOptions.length,\n isBackspacing: backspacingRef.current,\n getTextAfterSelection,\n lastCompletion: lastCompletionRef.current\n });\n if (!match) {\n if (autocompleter) {\n dispatch({\n type: 'RESET'\n });\n }\n return;\n }\n const {\n completer,\n filterValue: query\n } = match;\n\n // Don't re-activate a dismissed autocompleter on cursor-only\n // movement. `textContent` (text before cursor) changes with the\n // caret, so the effect re-runs, but `record.text` does not.\n // Complements the render-time `didUserInput` gate in\n // `useAutocompleteProps` for callers using this hook directly.\n if (!autocompleter && !isTextChange) {\n return;\n }\n\n // Clear stale completion ref when the user types a new trigger\n // for the same completer (the previous completion is no longer\n // relevant). Must be after the cursor-only check so that mere\n // cursor movement doesn't discard the suppression state.\n if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n lastCompletionRef.current = null;\n }\n dispatch({\n type: 'MATCH',\n completer,\n query\n });\n // We want to avoid introducing unexpected side effects.\n // See https://github.com/WordPress/gutenberg/pull/41820\n }, [textContent]);\n const {\n key: selectedKey = ''\n } = filteredOptions[selectedIndex] || {};\n const {\n className\n } = autocompleter || {};\n const isExpanded = !!autocompleter && filteredOptions.length > 0;\n const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n const hasSelection = record.start !== undefined;\n const showPopover = !!textContent && hasSelection && !!autocompleter;\n return {\n listBoxId,\n activeId,\n onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n autocompleter: autocompleter,\n className: className,\n filterValue: filterValue,\n instanceId: instanceId,\n listBoxId: listBoxId,\n selectedIndex: selectedIndex,\n onChangeOptions: onChangeOptions,\n onSelect: select,\n contentRef: contentRef,\n reset: () => dispatch({\n type: 'RESET'\n })\n }, autocompleter.name + autocompleter.triggerPrefix)\n };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n const history = useRef([]);\n const lastEntry = history.current[history.current.length - 1];\n\n // Only add to history if the value is meaningfully different from\n // the most recent entry (analogous to Set.add being a no-op for\n // duplicate references in the original implementation).\n if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n history.current.push(value);\n }\n\n // Keep the history size to 2.\n if (history.current.length > 2) {\n history.current.shift();\n }\n return history.current[0];\n}\nexport function useAutocompleteProps(options) {\n const ref = useRef(null);\n const onKeyDownRef = useRef(undefined);\n const {\n record\n } = options;\n const previousRecord = useLastDifferentValue(record);\n const {\n popover,\n listBoxId,\n activeId,\n onKeyDown\n } = useAutocomplete({\n ...options,\n contentRef: ref\n });\n onKeyDownRef.current = onKeyDown;\n const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n function _onKeyDown(event) {\n onKeyDownRef.current?.(event);\n }\n // Capture phase. When the autocomplete popover is open,\n // Up/Down/Enter/Escape must navigate the completion list \u2014\n // they shouldn't be consumed by ancestor handlers (e.g.\n // block-editor's writing-flow) for block navigation, block\n // splitting, or \"move out of parent\" actions. Those handlers\n // fire at bubble phase and gate on `event.defaultPrevented`,\n // so firing in capture lets us preventDefault first when the\n // popover is active.\n return subscribeDelegatedListener(element, 'keydown', _onKeyDown, true);\n }, [])]);\n\n // We only want to show the popover if the user has typed something.\n const didUserInput = record.text !== previousRecord?.text;\n if (!didUserInput) {\n return {\n ref: mergedRefs\n };\n }\n return {\n ref: mergedRefs,\n children: popover,\n 'aria-autocomplete': listBoxId ? 'list' : undefined,\n 'aria-owns': listBoxId,\n 'aria-activedescendant': activeId\n };\n}\nexport default function Autocomplete({\n children,\n isSelected,\n ...options\n}) {\n const {\n popover,\n ...props\n } = useAutocomplete(options);\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [children(props), isSelected && popover]\n });\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["composePrivateApis", "getNodeText", "_jsx", "_jsxs", "_Fragment"]
|
|
7
7
|
}
|
|
@@ -133,6 +133,8 @@ var BorderControlDropdown = (props, forwardedRef) => {
|
|
|
133
133
|
resetButtonWrapperClassName,
|
|
134
134
|
size,
|
|
135
135
|
__unstablePopoverProps,
|
|
136
|
+
onToggle: onToggleProp,
|
|
137
|
+
// Remove from `otherProps` to avoid type errors (native HTML `onToggle` vs `Dropdown` `onToggle`).
|
|
136
138
|
...otherProps
|
|
137
139
|
} = (0, import_hook.useBorderControlDropdown)(props);
|
|
138
140
|
const {
|
|
@@ -161,40 +163,38 @@ var BorderControlDropdown = (props, forwardedRef) => {
|
|
|
161
163
|
})
|
|
162
164
|
})
|
|
163
165
|
});
|
|
164
|
-
const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime.
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
onChange: onStyleChange
|
|
183
|
-
})]
|
|
184
|
-
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
185
|
-
className: resetButtonWrapperClassName,
|
|
186
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
|
|
187
|
-
variant: "tertiary",
|
|
188
|
-
onClick: () => {
|
|
189
|
-
onReset();
|
|
190
|
-
},
|
|
191
|
-
disabled: !enableResetButton,
|
|
192
|
-
accessibleWhenDisabled: true,
|
|
193
|
-
__next40pxDefaultSize: true,
|
|
194
|
-
children: (0, import_i18n.__)("Reset")
|
|
195
|
-
})
|
|
166
|
+
const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_content_wrapper.default, {
|
|
167
|
+
paddingSize: "medium",
|
|
168
|
+
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
|
|
169
|
+
className: popoverControlsClassName,
|
|
170
|
+
spacing: 6,
|
|
171
|
+
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
|
|
172
|
+
className: popoverContentClassName,
|
|
173
|
+
value: color,
|
|
174
|
+
onChange: onColorChange,
|
|
175
|
+
colors,
|
|
176
|
+
disableCustomColors,
|
|
177
|
+
__experimentalIsRenderedInSidebar,
|
|
178
|
+
clearable: false,
|
|
179
|
+
enableAlpha
|
|
180
|
+
}), enableStyle && isStyleSettable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_control_style_picker.default, {
|
|
181
|
+
label: (0, import_i18n.__)("Style"),
|
|
182
|
+
value: style,
|
|
183
|
+
onChange: onStyleChange
|
|
196
184
|
})]
|
|
197
|
-
})
|
|
185
|
+
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
186
|
+
className: resetButtonWrapperClassName,
|
|
187
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
|
|
188
|
+
variant: "tertiary",
|
|
189
|
+
onClick: () => {
|
|
190
|
+
onReset();
|
|
191
|
+
},
|
|
192
|
+
disabled: !enableResetButton,
|
|
193
|
+
accessibleWhenDisabled: true,
|
|
194
|
+
__next40pxDefaultSize: true,
|
|
195
|
+
children: (0, import_i18n.__)("Reset")
|
|
196
|
+
})
|
|
197
|
+
})]
|
|
198
198
|
});
|
|
199
199
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.default, {
|
|
200
200
|
renderToggle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/border-control/border-control-dropdown/component.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,kBAA4B;AAK5B,yCAAqC;AACrC,oBAAmB;AACnB,6BAA2B;AAC3B,2BAAyB;AACzB,sBAAqB;AACrB,qBAAuB;AACvB,qBAA+B;AAC/B,kBAAyC;AACzC,sCAAmC;AACnC,mBAAuC;AACvC,
|
|
6
|
-
"names": ["_jsx", "Button", "ColorIndicator", "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n if (!colorValue || !colors) {\n return;\n }\n if (isMultiplePaletteArray(colors)) {\n // Multiple origins\n let matchedColor;\n colors.some(origin => origin.colors.some(color => {\n if (color.color === colorValue) {\n matchedColor = color;\n return true;\n }\n return false;\n }));\n return matchedColor;\n }\n\n // Single origin\n return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n if (isStyleEnabled) {\n if (colorObject) {\n const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n return style ? sprintf(\n // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'), colorObject.name, ariaLabelValue, style) : sprintf(\n // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n }\n if (colorValue) {\n const ariaLabelValue = getAriaLabelColorValue(colorValue);\n return style ? sprintf(\n // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n __('Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'), ariaLabelValue, style) : sprintf(\n // translators: %s: The color's hex code e.g: \"#f00\".\n __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n }\n return __('Border color and style picker.');\n }\n if (colorObject) {\n return sprintf(\n // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n }\n if (colorValue) {\n return sprintf(\n // translators: %s: The color's hex code e.g: \"#f00\".\n __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n }\n return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n const {\n __experimentalIsRenderedInSidebar,\n border,\n colors,\n disableCustomColors,\n enableAlpha,\n enableStyle,\n indicatorClassName,\n indicatorWrapperClassName,\n isStyleSettable,\n onReset,\n onColorChange,\n onStyleChange,\n popoverContentClassName,\n popoverControlsClassName,\n resetButtonWrapperClassName,\n size,\n __unstablePopoverProps,\n onToggle: onToggleProp,\n // Remove from `otherProps` to avoid type errors (native HTML `onToggle` vs `Dropdown` `onToggle`).\n ...otherProps\n } = useBorderControlDropdown(props);\n const {\n color,\n style\n } = border || {};\n const colorObject = getColorObject(color, colors);\n const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n const enableResetButton = color || style && style !== 'none';\n const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n const renderToggle = ({\n onToggle\n }) => /*#__PURE__*/_jsx(Button, {\n onClick: onToggle,\n variant: \"tertiary\",\n \"aria-label\": toggleAriaLabel,\n tooltipPosition: dropdownPosition,\n label: __('Border color and style picker'),\n showTooltip: true,\n __next40pxDefaultSize: size === '__unstable-large',\n children: /*#__PURE__*/_jsx(\"span\", {\n className: indicatorWrapperClassName,\n children: /*#__PURE__*/_jsx(ColorIndicator, {\n className: indicatorClassName,\n colorValue: color\n })\n })\n });\n const renderContent = () => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n paddingSize: \"medium\",\n children: [/*#__PURE__*/_jsxs(VStack, {\n className: popoverControlsClassName,\n spacing: 6,\n children: [/*#__PURE__*/_jsx(ColorPalette, {\n className: popoverContentClassName,\n value: color,\n onChange: onColorChange,\n colors,\n disableCustomColors,\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n clearable: false,\n enableAlpha: enableAlpha\n }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n label: __('Style'),\n value: style,\n onChange: onStyleChange\n })]\n }), /*#__PURE__*/_jsx(\"div\", {\n className: resetButtonWrapperClassName,\n children: /*#__PURE__*/_jsx(Button, {\n variant: \"tertiary\",\n onClick: () => {\n onReset();\n },\n disabled: !enableResetButton,\n accessibleWhenDisabled: true,\n __next40pxDefaultSize: true,\n children: __('Reset')\n })\n })]\n });\n return /*#__PURE__*/_jsx(Dropdown, {\n renderToggle: renderToggle,\n renderContent: renderContent,\n popoverProps: {\n ...__unstablePopoverProps\n },\n ...otherProps,\n ref: forwardedRef\n });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_jsx", "Button", "ColorIndicator", "_jsxs", "DropdownContentWrapper", "ColorPalette", "BorderControlStylePicker", "Dropdown"]
|
|
7
7
|
}
|
|
@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// packages/components/src/box-control/index.tsx
|
|
31
31
|
var box_control_exports = {};
|
|
32
32
|
__export(box_control_exports, {
|
|
33
|
-
applyValueToSides: () => import_utils3.applyValueToSides,
|
|
34
33
|
default: () => box_control_default
|
|
35
34
|
});
|
|
36
35
|
module.exports = __toCommonJS(box_control_exports);
|
|
@@ -48,7 +47,6 @@ var import_utils2 = require("./utils.cjs");
|
|
|
48
47
|
var import_hooks = require("../utils/hooks/index.cjs");
|
|
49
48
|
var import_deprecated_36px_size = require("../utils/deprecated-36px-size.cjs");
|
|
50
49
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
51
|
-
var import_utils3 = require("./utils.cjs");
|
|
52
50
|
var defaultInputProps = {
|
|
53
51
|
min: 0
|
|
54
52
|
};
|
|
@@ -175,8 +173,4 @@ function BoxControl({
|
|
|
175
173
|
});
|
|
176
174
|
}
|
|
177
175
|
var box_control_default = BoxControl;
|
|
178
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
179
|
-
0 && (module.exports = {
|
|
180
|
-
applyValueToSides
|
|
181
|
-
});
|
|
182
176
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/box-control/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl({\n __next40pxDefaultSize = false,\n id: idProp,\n inputProps = defaultInputProps,\n onChange = noop,\n label = __('Box Control'),\n values: valuesProp,\n units,\n sides,\n splitOnAxis = false,\n allowReset = true,\n resetValues = DEFAULT_VALUES,\n presets,\n presetKey,\n onMouseOver,\n onMouseOut\n}) {\n const [values, setValues] = useControlledState(valuesProp, {\n fallback: DEFAULT_VALUES\n });\n const inputValues = values || DEFAULT_VALUES;\n const hasInitialValue = isValuesDefined(valuesProp);\n const hasOneSide = sides?.length === 1;\n const [isDirty, setIsDirty] = useState(hasInitialValue);\n const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n // Tracking selected units via internal state allows filtering of CSS unit\n // only values from being saved while maintaining preexisting unit selection\n // behaviour. Filtering CSS only values prevents invalid style values.\n const [selectedUnits, setSelectedUnits] = useState({\n top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n });\n const id = useUniqueId(idProp);\n const headingId = `${id}-heading`;\n const toggleLinked = () => {\n setIsLinked(!isLinked);\n };\n const handleOnChange = nextValues => {\n onChange(nextValues);\n setValues(nextValues);\n setIsDirty(true);\n };\n const handleOnReset = () => {\n onChange(resetValues);\n setValues(resetValues);\n setSelectedUnits(resetValues);\n setIsDirty(false);\n };\n const inputControlProps = {\n onMouseOver,\n onMouseOut,\n ...inputProps,\n onChange: handleOnChange,\n isLinked,\n units,\n selectedUnits,\n setSelectedUnits,\n sides,\n values: inputValues,\n __next40pxDefaultSize,\n presets,\n presetKey\n };\n maybeWarnDeprecated36pxSize({\n componentName: 'BoxControl',\n __next40pxDefaultSize,\n size: undefined\n });\n const sidesToRender = getAllowedSides(sides);\n if (presets && !presetKey || !presets && presetKey) {\n const definedProp = presets ? 'presets' : 'presetKey';\n const missingProp = presets ? 'presetKey' : 'presets';\n globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n }\n return /*#__PURE__*/_jsxs(Grid, {\n id: id,\n columns: 3,\n templateColumns: \"1fr min-content min-content\",\n role: \"group\",\n \"aria-labelledby\": headingId,\n children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n id: headingId,\n children: label\n }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n children: /*#__PURE__*/_jsx(InputControl, {\n side: \"all\",\n ...inputControlProps\n })\n }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n children: /*#__PURE__*/_jsx(LinkedButton, {\n onClick: toggleLinked,\n isLinked: isLinked\n })\n }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis =>\n /*#__PURE__*/\n // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n _jsx(InputControl, {\n side: axis,\n ...inputControlProps\n }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis =>\n /*#__PURE__*/\n // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n _jsx(InputControl, {\n side: axis,\n ...inputControlProps\n }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n className: \"component-box-control__reset-button\",\n variant: \"secondary\",\n size: \"small\",\n onClick: handleOnReset,\n disabled: !isDirty,\n children: __('Reset')\n })]\n });\n}\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl({\n __next40pxDefaultSize = false,\n id: idProp,\n inputProps = defaultInputProps,\n onChange = noop,\n label = __('Box Control'),\n values: valuesProp,\n units,\n sides,\n splitOnAxis = false,\n allowReset = true,\n resetValues = DEFAULT_VALUES,\n presets,\n presetKey,\n onMouseOver,\n onMouseOut\n}) {\n const [values, setValues] = useControlledState(valuesProp, {\n fallback: DEFAULT_VALUES\n });\n const inputValues = values || DEFAULT_VALUES;\n const hasInitialValue = isValuesDefined(valuesProp);\n const hasOneSide = sides?.length === 1;\n const [isDirty, setIsDirty] = useState(hasInitialValue);\n const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n // Tracking selected units via internal state allows filtering of CSS unit\n // only values from being saved while maintaining preexisting unit selection\n // behaviour. Filtering CSS only values prevents invalid style values.\n const [selectedUnits, setSelectedUnits] = useState({\n top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n });\n const id = useUniqueId(idProp);\n const headingId = `${id}-heading`;\n const toggleLinked = () => {\n setIsLinked(!isLinked);\n };\n const handleOnChange = nextValues => {\n onChange(nextValues);\n setValues(nextValues);\n setIsDirty(true);\n };\n const handleOnReset = () => {\n onChange(resetValues);\n setValues(resetValues);\n setSelectedUnits(resetValues);\n setIsDirty(false);\n };\n const inputControlProps = {\n onMouseOver,\n onMouseOut,\n ...inputProps,\n onChange: handleOnChange,\n isLinked,\n units,\n selectedUnits,\n setSelectedUnits,\n sides,\n values: inputValues,\n __next40pxDefaultSize,\n presets,\n presetKey\n };\n maybeWarnDeprecated36pxSize({\n componentName: 'BoxControl',\n __next40pxDefaultSize,\n size: undefined\n });\n const sidesToRender = getAllowedSides(sides);\n if (presets && !presetKey || !presets && presetKey) {\n const definedProp = presets ? 'presets' : 'presetKey';\n const missingProp = presets ? 'presetKey' : 'presets';\n globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n }\n return /*#__PURE__*/_jsxs(Grid, {\n id: id,\n columns: 3,\n templateColumns: \"1fr min-content min-content\",\n role: \"group\",\n \"aria-labelledby\": headingId,\n children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n id: headingId,\n children: label\n }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n children: /*#__PURE__*/_jsx(InputControl, {\n side: \"all\",\n ...inputControlProps\n })\n }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n children: /*#__PURE__*/_jsx(LinkedButton, {\n onClick: toggleLinked,\n isLinked: isLinked\n })\n }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis =>\n /*#__PURE__*/\n // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n _jsx(InputControl, {\n side: axis,\n ...inputControlProps\n }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis =>\n /*#__PURE__*/\n // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n _jsx(InputControl, {\n side: axis,\n ...inputControlProps\n }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n className: \"component-box-control__reset-button\",\n variant: \"secondary\",\n size: \"small\",\n onClick: handleOnReset,\n disabled: !isDirty,\n children: __('Reset')\n })]\n });\n}\nexport default BoxControl;"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_utils", "warning", "_jsxs", "_jsx", "InputControl", "LinkedButton"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
|
|
30
20
|
// packages/components/src/box-control/utils.ts
|
|
@@ -34,7 +24,6 @@ __export(utils_exports, {
|
|
|
34
24
|
CUSTOM_VALUE_SETTINGS: () => CUSTOM_VALUE_SETTINGS,
|
|
35
25
|
DEFAULT_VALUES: () => DEFAULT_VALUES,
|
|
36
26
|
LABELS: () => LABELS,
|
|
37
|
-
applyValueToSides: () => applyValueToSides,
|
|
38
27
|
getAllUnitFallback: () => getAllUnitFallback,
|
|
39
28
|
getAllowedSides: () => getAllowedSides,
|
|
40
29
|
getMergedValue: () => getMergedValue,
|
|
@@ -46,7 +35,6 @@ __export(utils_exports, {
|
|
|
46
35
|
normalizeSides: () => normalizeSides
|
|
47
36
|
});
|
|
48
37
|
module.exports = __toCommonJS(utils_exports);
|
|
49
|
-
var import_deprecated = __toESM(require("@wordpress/deprecated"));
|
|
50
38
|
var import_i18n = require("@wordpress/i18n");
|
|
51
39
|
var CUSTOM_VALUE_SETTINGS = {
|
|
52
40
|
px: {
|
|
@@ -222,31 +210,6 @@ function normalizeSides(sides) {
|
|
|
222
210
|
}
|
|
223
211
|
return filteredSides;
|
|
224
212
|
}
|
|
225
|
-
function applyValueToSides(currentValues, newValue, sides) {
|
|
226
|
-
(0, import_deprecated.default)("applyValueToSides", {
|
|
227
|
-
since: "6.8",
|
|
228
|
-
version: "7.0"
|
|
229
|
-
});
|
|
230
|
-
const newValues = {
|
|
231
|
-
...currentValues
|
|
232
|
-
};
|
|
233
|
-
if (sides?.length) {
|
|
234
|
-
sides.forEach((side) => {
|
|
235
|
-
if (side === "vertical") {
|
|
236
|
-
newValues.top = newValue;
|
|
237
|
-
newValues.bottom = newValue;
|
|
238
|
-
} else if (side === "horizontal") {
|
|
239
|
-
newValues.left = newValue;
|
|
240
|
-
newValues.right = newValue;
|
|
241
|
-
} else {
|
|
242
|
-
newValues[side] = newValue;
|
|
243
|
-
}
|
|
244
|
-
});
|
|
245
|
-
} else {
|
|
246
|
-
ALL_SIDES.forEach((side) => newValues[side] = newValue);
|
|
247
|
-
}
|
|
248
|
-
return newValues;
|
|
249
|
-
}
|
|
250
213
|
function getAllowedSides(sides) {
|
|
251
214
|
const allowedSides = new Set(!sides ? ALL_SIDES : []);
|
|
252
215
|
sides?.forEach((allowedSide) => {
|
|
@@ -289,7 +252,6 @@ function getPresetValueFromIndex(index, presetKey, presets) {
|
|
|
289
252
|
CUSTOM_VALUE_SETTINGS,
|
|
290
253
|
DEFAULT_VALUES,
|
|
291
254
|
LABELS,
|
|
292
|
-
applyValueToSides,
|
|
293
255
|
getAllUnitFallback,
|
|
294
256
|
getAllowedSides,
|
|
295
257
|
getMergedValue,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/box-control/utils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nexport const CUSTOM_VALUE_SETTINGS = {\n px: {\n max: 300,\n step: 1\n },\n '%': {\n max: 100,\n step: 1\n },\n vw: {\n max: 100,\n step: 1\n },\n vh: {\n max: 100,\n step: 1\n },\n em: {\n max: 10,\n step: 0.1\n },\n rm: {\n max: 10,\n step: 0.1\n },\n svw: {\n max: 100,\n step: 1\n },\n lvw: {\n max: 100,\n step: 1\n },\n dvw: {\n max: 100,\n step: 1\n },\n svh: {\n max: 100,\n step: 1\n },\n lvh: {\n max: 100,\n step: 1\n },\n dvh: {\n max: 100,\n step: 1\n },\n vi: {\n max: 100,\n step: 1\n },\n svi: {\n max: 100,\n step: 1\n },\n lvi: {\n max: 100,\n step: 1\n },\n dvi: {\n max: 100,\n step: 1\n },\n vb: {\n max: 100,\n step: 1\n },\n svb: {\n max: 100,\n step: 1\n },\n lvb: {\n max: 100,\n step: 1\n },\n dvb: {\n max: 100,\n step: 1\n },\n vmin: {\n max: 100,\n step: 1\n },\n svmin: {\n max: 100,\n step: 1\n },\n lvmin: {\n max: 100,\n step: 1\n },\n dvmin: {\n max: 100,\n step: 1\n },\n vmax: {\n max: 100,\n step: 1\n },\n svmax: {\n max: 100,\n step: 1\n },\n lvmax: {\n max: 100,\n step: 1\n },\n dvmax: {\n max: 100,\n step: 1\n }\n};\nexport const LABELS = {\n all: __('All sides'),\n top: __('Top side'),\n bottom: __('Bottom side'),\n left: __('Left side'),\n right: __('Right side'),\n vertical: __('Top and bottom sides'),\n horizontal: __('Left and right sides')\n};\nexport const DEFAULT_VALUES = {\n top: undefined,\n right: undefined,\n bottom: undefined,\n left: undefined\n};\nexport const ALL_SIDES = ['top', 'right', 'bottom', 'left'];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param arr Array of items to check.\n * @return The item with the most occurrences.\n */\nfunction mode(arr) {\n return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();\n}\n\n/**\n * Gets the merged input value and unit from values data.\n *\n * @param values Box values.\n * @param availableSides Available box sides to evaluate.\n *\n * @return A value + unit for the 'all' input.\n */\nexport function getMergedValue(values = {}, availableSides = ALL_SIDES) {\n const sides = normalizeSides(availableSides);\n if (sides.every(side => values[side] === values[sides[0]])) {\n return values[sides[0]];\n }\n return undefined;\n}\n\n/**\n * Checks if the values are mixed.\n *\n * @param values Box values.\n * @param availableSides Available box sides to evaluate.\n * @return Whether the values are mixed.\n */\nexport function isValueMixed(values = {}, availableSides = ALL_SIDES) {\n const sides = normalizeSides(availableSides);\n return sides.some(side => values[side] !== values[sides[0]]);\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param selectedUnits Current unit selections for individual sides.\n * @return Most common unit selection.\n */\nexport function getAllUnitFallback(selectedUnits) {\n if (!selectedUnits || typeof selectedUnits !== 'object') {\n return undefined;\n }\n const filteredUnits = Object.values(selectedUnits).filter(Boolean);\n return mode(filteredUnits);\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param values Box values.\n *\n * @return Whether values are mixed.\n */\nexport function isValuesDefined(values) {\n return values && Object.values(values).filter(\n // Switching units when input is empty causes values only\n // containing units. This gives false positive on mixed values\n // unless filtered.\n value => !!value && /\\d/.test(value)).length > 0;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param sides Available sides for box control.\n * @return Normalized sides configuration.\n */\nexport function normalizeSides(sides) {\n const filteredSides = [];\n if (!sides?.length) {\n return ALL_SIDES;\n }\n if (sides.includes('vertical')) {\n filteredSides.push(...['top', 'bottom']);\n } else if (sides.includes('horizontal')) {\n filteredSides.push(...['left', 'right']);\n } else {\n const newSides = ALL_SIDES.filter(side => sides.includes(side));\n filteredSides.push(...newSides);\n }\n return filteredSides;\n}\n\n/**\n * Return the allowed sides based on the sides configuration.\n *\n * @param sides Sides configuration.\n * @return Allowed sides.\n */\nexport function getAllowedSides(sides) {\n const allowedSides = new Set(!sides ? ALL_SIDES : []);\n sides?.forEach(allowedSide => {\n if (allowedSide === 'vertical') {\n allowedSides.add('top');\n allowedSides.add('bottom');\n } else if (allowedSide === 'horizontal') {\n allowedSides.add('right');\n allowedSides.add('left');\n } else {\n allowedSides.add(allowedSide);\n }\n });\n return allowedSides;\n}\n\n/**\n * Checks if a value is a preset value.\n *\n * @param value The value to check.\n * @param presetKey The preset key to check against.\n * @return Whether the value is a preset value.\n */\nexport function isValuePreset(value, presetKey) {\n return value.startsWith(`var:preset|${presetKey}|`);\n}\n\n/**\n * Returns the index of the preset value in the presets array.\n *\n * @param value The value to check.\n * @param presetKey The preset key to check against.\n * @param presets The array of presets to search.\n * @return The index of the preset value in the presets array.\n */\nexport function getPresetIndexFromValue(value, presetKey, presets) {\n if (!isValuePreset(value, presetKey)) {\n return undefined;\n }\n const match = value.match(new RegExp(`^var:preset\\\\|${presetKey}\\\\|(.+)$`));\n if (!match) {\n return undefined;\n }\n const slug = match[1];\n const index = presets.findIndex(preset => {\n return preset.slug === slug;\n });\n return index !== -1 ? index : undefined;\n}\n\n/**\n * Returns the preset value from the index.\n *\n * @param index The index of the preset value in the presets array.\n * @param presetKey The preset key to check against.\n * @param presets The array of presets to search.\n * @return The preset value from the index.\n */\nexport function getPresetValueFromIndex(index, presetKey, presets) {\n const preset = presets[index];\n return `var:preset|${presetKey}|${preset.slug}`;\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/custom-gradient-picker/gradient-bar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n switch (action.type) {\n case 'MOVE_INSERTER':\n if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n return {\n id: 'MOVING_INSERTER',\n insertPosition: action.insertPosition\n };\n }\n break;\n case 'STOP_INSERTER_MOVE':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'OPEN_INSERTER':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'INSERTING_CONTROL_POINT',\n insertPosition: state.insertPosition\n };\n }\n break;\n case 'CLOSE_INSERTER':\n if (state.id === 'INSERTING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'START_CONTROL_CHANGE':\n if (state.id === 'IDLE') {\n return {\n id: 'MOVING_CONTROL_POINT'\n };\n }\n break;\n case 'STOP_CONTROL_CHANGE':\n if (state.id === 'MOVING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n }\n return state;\n};\nconst customGradientBarReducerInitialState = {\n id: 'IDLE'\n};\nexport default function CustomGradientBar({\n background,\n hasGradient,\n value: controlPoints,\n onChange,\n disableInserter = false,\n disableAlpha = false,\n __experimentalIsRenderedInSidebar = false\n}) {\n const gradientMarkersContainerDomRef = useRef(null);\n const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n const onMouseEnterAndMove = event => {\n if (!gradientMarkersContainerDomRef.current) {\n return;\n }\n const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n // If the insert point is close to an existing control point don't show it.\n if (controlPoints.some(({\n position\n }) => {\n return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n })) {\n if (gradientBarState.id === 'MOVING_INSERTER') {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n }\n return;\n }\n gradientBarStateDispatch({\n type: 'MOVE_INSERTER',\n insertPosition\n });\n };\n const onMouseLeave = () => {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n };\n const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n return /*#__PURE__*/_jsxs(\"div\", {\n className: clsx('components-custom-gradient-picker__gradient-bar', {\n 'has-gradient': hasGradient\n }),\n onMouseEnter: onMouseEnterAndMove,\n onMouseMove: onMouseEnterAndMove,\n onMouseLeave: onMouseLeave,\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: \"components-custom-gradient-picker__gradient-bar-background\",\n style: {\n background,\n opacity: hasGradient ? 1 : 0.4\n }\n }), /*#__PURE__*/_jsxs(\"div\", {\n ref: gradientMarkersContainerDomRef,\n className: \"components-custom-gradient-picker__markers-container\",\n children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n insertPosition: gradientBarState.insertPosition,\n value: controlPoints,\n onChange: onChange,\n onOpenInserter: () => {\n gradientBarStateDispatch({\n type: 'OPEN_INSERTER'\n });\n },\n onCloseInserter: () => {\n gradientBarStateDispatch({\n type: 'CLOSE_INSERTER'\n });\n }\n }), /*#__PURE__*/_jsx(ControlPoints, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n disableRemove: disableInserter,\n gradientPickerDomRef: gradientMarkersContainerDomRef,\n ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n value: controlPoints,\n onChange: onChange,\n onStartControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'START_CONTROL_CHANGE'\n });\n },\n onStopControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'STOP_CONTROL_CHANGE'\n });\n }\n })]\n })]\n });\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_jsxs", "clsx", "_jsx", "ControlPoints"]
|
|
7
7
|
}
|
package/build/disabled/index.cjs
CHANGED
|
@@ -52,7 +52,7 @@ function Disabled({
|
|
|
52
52
|
value: isDisabled,
|
|
53
53
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
54
54
|
// @ts-ignore Reason: inert is a recent HTML attribute
|
|
55
|
-
inert: isDisabled ?
|
|
55
|
+
inert: isDisabled ? true : void 0,
|
|
56
56
|
className: isDisabled ? cx(import_disabled_styles.disabledStyles, className, "components-disabled") : void 0,
|
|
57
57
|
...props,
|
|
58
58
|
children
|