@wordpress/components 35.0.1 → 36.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 +38 -0
- package/CONTRIBUTING.md +33 -26
- package/build/alignment-matrix-control/cell.cjs +1 -1
- package/build/alignment-matrix-control/cell.cjs.map +2 -2
- package/build/alignment-matrix-control/index.cjs +1 -1
- package/build/alignment-matrix-control/index.cjs.map +2 -2
- package/build/angle-picker-control/angle-circle.cjs +1 -1
- package/build/angle-picker-control/angle-circle.cjs.map +2 -2
- package/build/angle-picker-control/index.cjs +2 -2
- package/build/autocomplete/get-autocomplete-match.cjs.map +1 -1
- package/build/autocomplete/index.cjs.map +1 -1
- package/build/base-control/styles/base-control-styles.cjs +6 -6
- package/build/base-control/styles/base-control-styles.cjs.map +2 -2
- package/build/border-control/styles.cjs +17 -14
- package/build/border-control/styles.cjs.map +2 -2
- package/build/box-control/{input-control.cjs → box-input-control.cjs} +9 -9
- package/build/box-control/box-input-control.cjs.map +7 -0
- package/build/box-control/index.cjs +9 -25
- package/build/box-control/index.cjs.map +3 -3
- package/build/button/index.cjs +3 -7
- package/build/button/index.cjs.map +2 -2
- package/build/card/card-divider/hook.cjs.map +2 -2
- package/build/color-palette/index.cjs.map +1 -1
- package/build/color-picker/component.cjs.map +1 -1
- package/build/date-time/utils.cjs.map +1 -1
- package/build/disabled/index.cjs.map +2 -2
- package/build/divider/component.cjs +108 -3
- package/build/divider/component.cjs.map +4 -4
- package/build/draggable/index.cjs.map +1 -1
- package/build/external-link/index.cjs +1 -1
- package/build/external-link/index.cjs.map +1 -1
- package/build/higher-order/with-fallback-styles/index.cjs +18 -44
- package/build/higher-order/with-fallback-styles/index.cjs.map +2 -2
- package/build/menu/popover.cjs.map +1 -1
- package/build/menu/styles.cjs +17 -17
- package/build/menu/styles.cjs.map +2 -2
- package/build/modal/index.cjs.map +1 -1
- package/build/modal/use-modal-exit-animation.cjs +37 -52
- package/build/modal/use-modal-exit-animation.cjs.map +2 -2
- package/build/palette-edit/index.cjs +1 -1
- package/build/progress-bar/index.cjs +1 -1
- package/build/progress-bar/index.cjs.map +2 -2
- package/build/query-controls/index.cjs +2 -2
- package/build/query-controls/index.cjs.map +2 -2
- package/build/range-control/index.cjs.map +1 -1
- package/build/sandbox/index.cjs +7 -1
- package/build/sandbox/index.cjs.map +2 -2
- package/build/snackbar/index.cjs +1 -1
- package/build/spinner/styles.cjs +4 -4
- package/build/spinner/styles.cjs.map +2 -2
- package/build/tabs/index.cjs +0 -18
- package/build/tabs/index.cjs.map +2 -2
- package/build/tabs/tablist.cjs +5 -15
- package/build/tabs/tablist.cjs.map +2 -2
- package/build/text-control/index.cjs +3 -12
- package/build/text-control/index.cjs.map +3 -3
- package/build/tools-panel/styles.cjs +13 -13
- package/build/tools-panel/styles.cjs.map +2 -2
- package/build/tools-panel/tools-panel/hook.cjs.map +1 -1
- package/build/tree-select/index.cjs +1 -1
- package/build/tree-select/index.cjs.map +1 -1
- package/build/truncate/utils.cjs +1 -1
- package/build/truncate/utils.cjs.map +1 -1
- package/build/utils/colors-values.cjs +12 -12
- package/build/utils/colors-values.cjs.map +2 -2
- package/build/utils/config-values.cjs +2 -2
- package/build/utils/config-values.cjs.map +2 -2
- package/build/utils/dropdown-motion.cjs.map +2 -2
- package/build/utils/strings.cjs.map +1 -1
- package/build/validated-form-controls/components/text-control.cjs +0 -1
- package/build/validated-form-controls/components/text-control.cjs.map +2 -2
- package/build-module/alignment-matrix-control/cell.mjs +1 -1
- package/build-module/alignment-matrix-control/cell.mjs.map +2 -2
- package/build-module/alignment-matrix-control/index.mjs +1 -1
- package/build-module/alignment-matrix-control/index.mjs.map +2 -2
- package/build-module/angle-picker-control/angle-circle.mjs +1 -1
- package/build-module/angle-picker-control/angle-circle.mjs.map +2 -2
- package/build-module/angle-picker-control/index.mjs +2 -2
- package/build-module/autocomplete/get-autocomplete-match.mjs.map +1 -1
- package/build-module/autocomplete/index.mjs.map +1 -1
- package/build-module/base-control/styles/base-control-styles.mjs +6 -6
- package/build-module/base-control/styles/base-control-styles.mjs.map +2 -2
- package/build-module/border-control/styles.mjs +17 -14
- package/build-module/border-control/styles.mjs.map +2 -2
- package/build-module/box-control/{input-control.mjs → box-input-control.mjs} +6 -6
- package/build-module/box-control/box-input-control.mjs.map +7 -0
- package/build-module/box-control/index.mjs +9 -25
- package/build-module/box-control/index.mjs.map +2 -2
- package/build-module/button/index.mjs +2 -5
- package/build-module/button/index.mjs.map +2 -2
- package/build-module/card/card-divider/hook.mjs.map +2 -2
- package/build-module/color-palette/index.mjs.map +1 -1
- package/build-module/color-picker/component.mjs.map +1 -1
- package/build-module/date-time/utils.mjs.map +1 -1
- package/build-module/disabled/index.mjs.map +2 -2
- package/build-module/divider/component.mjs +108 -3
- package/build-module/divider/component.mjs.map +3 -3
- package/build-module/draggable/index.mjs.map +1 -1
- package/build-module/external-link/index.mjs +1 -1
- package/build-module/external-link/index.mjs.map +1 -1
- package/build-module/higher-order/with-fallback-styles/index.mjs +20 -46
- package/build-module/higher-order/with-fallback-styles/index.mjs.map +2 -2
- package/build-module/menu/popover.mjs.map +1 -1
- package/build-module/menu/styles.mjs +17 -17
- package/build-module/menu/styles.mjs.map +2 -2
- package/build-module/modal/index.mjs.map +1 -1
- package/build-module/modal/use-modal-exit-animation.mjs +37 -52
- package/build-module/modal/use-modal-exit-animation.mjs.map +2 -2
- package/build-module/palette-edit/index.mjs +1 -1
- package/build-module/progress-bar/index.mjs +1 -1
- package/build-module/progress-bar/index.mjs.map +2 -2
- package/build-module/query-controls/index.mjs +2 -2
- package/build-module/query-controls/index.mjs.map +2 -2
- package/build-module/range-control/index.mjs.map +1 -1
- package/build-module/sandbox/index.mjs +3 -1
- package/build-module/sandbox/index.mjs.map +2 -2
- package/build-module/snackbar/index.mjs +1 -1
- package/build-module/spinner/styles.mjs +4 -4
- package/build-module/spinner/styles.mjs.map +2 -2
- package/build-module/tabs/index.mjs +1 -19
- package/build-module/tabs/index.mjs.map +2 -2
- package/build-module/tabs/tablist.mjs +5 -15
- package/build-module/tabs/tablist.mjs.map +2 -2
- package/build-module/text-control/index.mjs +3 -12
- package/build-module/text-control/index.mjs.map +2 -2
- package/build-module/tools-panel/styles.mjs +13 -13
- package/build-module/tools-panel/styles.mjs.map +2 -2
- package/build-module/tools-panel/tools-panel/hook.mjs.map +1 -1
- package/build-module/tree-select/index.mjs +1 -1
- package/build-module/tree-select/index.mjs.map +1 -1
- package/build-module/truncate/utils.mjs +1 -1
- package/build-module/truncate/utils.mjs.map +1 -1
- package/build-module/utils/colors-values.mjs +12 -12
- package/build-module/utils/colors-values.mjs.map +2 -2
- package/build-module/utils/config-values.mjs +2 -2
- package/build-module/utils/config-values.mjs.map +2 -2
- package/build-module/utils/dropdown-motion.mjs.map +2 -2
- package/build-module/utils/strings.mjs.map +1 -1
- package/build-module/validated-form-controls/components/text-control.mjs +0 -1
- package/build-module/validated-form-controls/components/text-control.mjs.map +2 -2
- package/build-style/style-rtl.css +85 -101
- package/build-style/style.css +85 -101
- package/build-types/base-control/styles/base-control-styles.d.ts.map +1 -1
- package/build-types/border-control/styles.d.ts.map +1 -1
- package/build-types/box-control/box-input-control.d.ts +3 -0
- package/build-types/box-control/box-input-control.d.ts.map +1 -0
- package/build-types/box-control/index.d.ts +2 -6
- package/build-types/box-control/index.d.ts.map +1 -1
- package/build-types/box-control/stories/index.story.d.ts.map +1 -1
- package/build-types/box-control/types.d.ts +7 -6
- package/build-types/box-control/types.d.ts.map +1 -1
- package/build-types/button/index.d.ts +0 -2
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/card/card-divider/hook.d.ts +1 -274
- package/build-types/card/card-divider/hook.d.ts.map +1 -1
- package/build-types/composite/stories/index.story.d.ts.map +1 -1
- package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/disabled/index.d.ts +0 -1
- package/build-types/disabled/index.d.ts.map +1 -1
- package/build-types/disabled/stories/index.story.d.ts.map +1 -1
- package/build-types/divider/component.d.ts.map +1 -1
- package/build-types/dropdown/stories/index.story.d.ts.map +1 -1
- package/build-types/higher-order/with-fallback-styles/index.d.ts +1 -35
- package/build-types/higher-order/with-fallback-styles/index.d.ts.map +1 -1
- package/build-types/higher-order/with-fallback-styles/test/index.d.ts.map +1 -0
- package/build-types/icon/stories/index.story.d.ts +0 -1
- package/build-types/icon/stories/index.story.d.ts.map +1 -1
- package/build-types/menu/styles.d.ts.map +1 -1
- package/build-types/menu/types.d.ts +2 -2
- package/build-types/placeholder/stories/index.story.d.ts.map +1 -1
- package/build-types/resizable-box/index.d.ts +0 -2
- package/build-types/resizable-box/index.d.ts.map +1 -1
- package/build-types/resizable-box/stories/index.story.d.ts +0 -2
- package/build-types/resizable-box/stories/index.story.d.ts.map +1 -1
- package/build-types/sandbox/index.d.ts +15 -0
- package/build-types/sandbox/index.d.ts.map +1 -1
- package/build-types/spinner/styles.d.ts.map +1 -1
- package/build-types/tabs/index.d.ts.map +1 -1
- package/build-types/tabs/tablist.d.ts.map +1 -1
- package/build-types/text-control/index.d.ts +0 -1
- package/build-types/text-control/index.d.ts.map +1 -1
- package/build-types/text-control/stories/index.story.d.ts.map +1 -1
- package/build-types/text-control/types.d.ts +2 -1
- package/build-types/text-control/types.d.ts.map +1 -1
- package/build-types/tools-panel/styles.d.ts.map +1 -1
- package/build-types/utils/colors-values.d.ts.map +1 -1
- package/build-types/utils/dropdown-motion.d.ts.map +1 -1
- package/build-types/validated-form-controls/components/combobox-control.d.ts +2 -2
- package/build-types/validated-form-controls/components/text-control.d.ts +2 -2
- package/build-types/validated-form-controls/components/text-control.d.ts.map +1 -1
- package/package.json +34 -28
- package/src/angle-picker-control/angle-circle.tsx +3 -3
- package/src/base-control/README.md +2 -2
- package/src/base-control/styles/base-control-styles.ts +1 -0
- package/src/border-control/styles.ts +1 -0
- package/src/box-control/README.md +1 -13
- package/src/box-control/{input-control.tsx → box-input-control.tsx} +4 -4
- package/src/box-control/index.tsx +5 -23
- package/src/box-control/stories/index.story.tsx +1 -3
- package/src/box-control/test/index.tsx +15 -2
- package/src/box-control/types.ts +7 -6
- package/src/button/index.tsx +2 -4
- package/src/button/style.scss +3 -3
- package/src/card/card-divider/hook.ts +5 -1
- package/src/card/test/__snapshots__/index.tsx.snap +7 -9
- package/src/checkbox-control/test/__snapshots__/index.tsx.snap +4 -3
- package/src/composite/stories/index.story.tsx +5 -0
- package/src/confirm-dialog/stories/index.story.tsx +1 -0
- package/src/custom-select-control/test/index.tsx +1 -1
- package/src/disabled/README.md +0 -1
- package/src/disabled/index.tsx +0 -1
- package/src/disabled/stories/index.story.tsx +0 -1
- package/src/divider/component.tsx +27 -3
- package/src/divider/style.module.scss +21 -0
- package/src/divider/test/index.tsx +21 -11
- package/src/dropdown/stories/index.story.tsx +5 -0
- package/src/dropdown-menu/style.scss +1 -1
- package/src/external-link/style.scss +4 -4
- package/src/form-toggle/style.scss +1 -1
- package/src/heading/test/__snapshots__/index.tsx.snap +4 -4
- package/src/higher-order/with-constrained-tabbing/README.md +0 -2
- package/src/higher-order/with-fallback-styles/index.tsx +31 -61
- package/src/higher-order/with-fallback-styles/test/index.tsx +47 -0
- package/src/higher-order/with-focus-return/README.md +0 -2
- package/src/icon/stories/index.story.tsx +0 -15
- package/src/menu/README.md +2 -2
- package/src/menu/styles.ts +2 -0
- package/src/menu/test/index.tsx +104 -87
- package/src/menu/types.ts +2 -2
- package/src/menu-item/test/__snapshots__/index.js.snap +2 -0
- package/src/modal/style.scss +1 -1
- package/src/modal/test/index.tsx +0 -24
- package/src/modal/use-modal-exit-animation.ts +2 -2
- package/src/navigable-container/test/navigable-menu.tsx +0 -16
- package/src/navigable-container/test/tababble-container.tsx +0 -16
- package/src/navigator/test/index.tsx +0 -24
- package/src/notice/style.scss +11 -13
- package/src/notice/test/__snapshots__/index.tsx.snap +1 -0
- package/src/panel/README.md +2 -0
- package/src/panel/stories/index.story.tsx +2 -2
- package/src/panel/style.scss +1 -1
- package/src/placeholder/stories/index.story.tsx +0 -1
- package/src/radio-control/style.scss +1 -1
- package/src/resizable-box/index.tsx +1 -2
- package/src/sandbox/index.tsx +18 -1
- package/src/sandbox/test/index.tsx +44 -1
- package/src/spinner/styles.ts +1 -0
- package/src/tab-panel/style.scss +6 -6
- package/src/tab-panel/test/index.tsx +0 -17
- package/src/tabs/index.tsx +1 -26
- package/src/tabs/tablist.tsx +5 -21
- package/src/tabs/test/index.tsx +16 -44
- package/src/text/test/__snapshots__/index.tsx.snap +3 -3
- package/src/text-control/README.md +0 -9
- package/src/text-control/index.tsx +3 -14
- package/src/text-control/stories/index.story.tsx +0 -2
- package/src/text-control/style.scss +7 -11
- package/src/text-control/test/text-control.tsx +1 -5
- package/src/text-control/types.ts +2 -1
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +38 -26
- package/src/toolbar/toolbar-group/style.scss +2 -2
- package/src/tools-panel/styles.ts +1 -1
- package/src/tools-panel/tools-panel/README.md +0 -2
- package/src/tooltip/stories/index.story.tsx +2 -2
- package/src/tree-grid/test/index.tsx +0 -23
- package/src/utils/colors-values.js +36 -16
- package/src/utils/config-values.js +2 -2
- package/src/utils/dropdown-motion.ts +6 -4
- package/src/utils/theme-variables.scss +18 -13
- package/src/validated-form-controls/components/text-control.tsx +2 -10
- package/build/box-control/input-control.cjs.map +0 -7
- package/build/divider/styles.cjs +0 -98
- package/build/divider/styles.cjs.map +0 -7
- package/build-module/box-control/input-control.mjs.map +0 -7
- package/build-module/divider/styles.mjs +0 -63
- package/build-module/divider/styles.mjs.map +0 -7
- package/build-types/box-control/input-control.d.ts +0 -3
- package/build-types/box-control/input-control.d.ts.map +0 -1
- package/build-types/card/context.d.ts +0 -3
- package/build-types/card/context.d.ts.map +0 -1
- package/build-types/date-time/date/index.d.ts +0 -23
- package/build-types/date-time/date/index.d.ts.map +0 -1
- package/build-types/date-time/date/styles.d.ts +0 -45
- package/build-types/date-time/date/styles.d.ts.map +0 -1
- package/build-types/date-time/date/test/index.d.ts.map +0 -1
- package/build-types/date-time/date/test/use-lilius.d.ts +0 -2
- package/build-types/date-time/date/test/use-lilius.d.ts.map +0 -1
- package/build-types/date-time/date/use-lilius/index.d.ts +0 -169
- package/build-types/date-time/date/use-lilius/index.d.ts.map +0 -1
- package/build-types/date-time/time/index.d.ts +0 -27
- package/build-types/date-time/time/index.d.ts.map +0 -1
- package/build-types/date-time/time/styles.d.ts +0 -93
- package/build-types/date-time/time/styles.d.ts.map +0 -1
- package/build-types/date-time/time/test/index.d.ts +0 -2
- package/build-types/date-time/time/test/index.d.ts.map +0 -1
- package/build-types/date-time/time/time-input/index.d.ts +0 -4
- package/build-types/date-time/time/time-input/index.d.ts.map +0 -1
- package/build-types/date-time/time/time-input/test/index.d.ts +0 -2
- package/build-types/date-time/time/time-input/test/index.d.ts.map +0 -1
- package/build-types/date-time/time/timezone.d.ts +0 -7
- package/build-types/date-time/time/timezone.d.ts.map +0 -1
- package/build-types/divider/styles.d.ts +0 -10
- package/build-types/divider/styles.d.ts.map +0 -1
- package/build-types/mobile/image/constants.d.ts +0 -5
- package/build-types/mobile/image/constants.d.ts.map +0 -1
- 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/build-types/visually-hidden/test/index.d.ts +0 -2
- package/build-types/visually-hidden/test/index.d.ts.map +0 -1
- package/src/divider/styles.ts +0 -81
- package/src/divider/test/__snapshots__/index.tsx.snap +0 -71
- /package/build-types/{date-time/date → higher-order/with-fallback-styles}/test/index.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 36.0.0 (2026-06-24)
|
|
6
|
+
|
|
7
|
+
### Breaking Changes
|
|
8
|
+
|
|
9
|
+
- The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed ([#79386](https://github.com/WordPress/gutenberg/pull/79386), [#79419](https://github.com/WordPress/gutenberg/pull/79419)):
|
|
10
|
+
- `BoxControl`
|
|
11
|
+
- `TextControl`
|
|
12
|
+
|
|
13
|
+
### Enhancements
|
|
14
|
+
|
|
15
|
+
- `BaseControl`: Apply `text-wrap: pretty` to help text to avoid typographic widows ([#79112](https://github.com/WordPress/gutenberg/pull/79112)).
|
|
16
|
+
- `Button`, `DropdownMenu`, `FormToggle`, `Modal`, `Panel`, `RadioControl`, `Toolbar`: Migrate hardcoded border and stroke colors to WPDS tokens ([#79244](https://github.com/WordPress/gutenberg/pull/79244)).
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
- `SandBox`: Fix the viewport-unit (`vh`, `vw`, etc.) stripping so user-supplied HTML using these units in `width`/`height` no longer triggers a runaway resize loop in the preview ([#78677](https://github.com/WordPress/gutenberg/pull/78677)).
|
|
21
|
+
- `BoxControl`: Respect a consumer-supplied `placeholder` passed via `inputProps`, falling back to it when there is no mixed-value placeholder ([#79466](https://github.com/WordPress/gutenberg/pull/79466)).
|
|
22
|
+
|
|
23
|
+
### Internal
|
|
24
|
+
|
|
25
|
+
- `ResizableBox`: Make the `children` prop optional ([#79370](https://github.com/WordPress/gutenberg/pull/79370)).
|
|
26
|
+
- Add documentation and lint guardrails for the ongoing Emotion migration ([#79442](https://github.com/WordPress/gutenberg/pull/79442)).
|
|
27
|
+
- `Divider`: Migrate styles from Emotion to SCSS Modules ([#79444](https://github.com/WordPress/gutenberg/pull/79444)).
|
|
28
|
+
- Adopt `--wpds-dimension-size-*` design tokens [#79093](https://github.com/WordPress/gutenberg/pull/79093).
|
|
29
|
+
- Point the legacy `--wp-components-*` color fallbacks at the design system tokens (`--wpds-*` / `--wp-admin-theme-color*`), so component styles get sensible defaults from the prebuilt token stylesheet without a runtime `<ThemeProvider>` ([#78664](https://github.com/WordPress/gutenberg/pull/78664)).
|
|
30
|
+
- `withFallbackStyles`: Refactor from a class component to a function component with hooks ([#78837](https://github.com/WordPress/gutenberg/pull/78837)).
|
|
31
|
+
|
|
32
|
+
### Documentation
|
|
33
|
+
|
|
34
|
+
- `Menu`: Fix `overriden` typo to `overridden` in `CheckboxItemProps` and `RadioItemProps`. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
|
|
35
|
+
|
|
36
|
+
### Code Quality
|
|
37
|
+
|
|
38
|
+
- Move `@types/react` from `dependencies` to an optional peer dependency so consumers' React type version is used [#79095](https://github.com/WordPress/gutenberg/pull/79095).
|
|
39
|
+
|
|
5
40
|
## 35.0.1 (2026-06-16)
|
|
6
41
|
|
|
7
42
|
## 35.0.0 (2026-06-10)
|
|
@@ -25,6 +60,8 @@
|
|
|
25
60
|
### Internal
|
|
26
61
|
|
|
27
62
|
- `UnitControl`: Remove dead native code branches now that `Platform.OS` is always `'web'` following the React Native removal ([#79031](https://github.com/WordPress/gutenberg/pull/79031)).
|
|
63
|
+
- `Tabs`: Update `@ariakit/react` to `0.4.29`, adopting the upstream fix that moves focus to the selected tab on a controlled selection change, and removing the now-unnecessary controlled-mode focus workarounds ([#79055](https://github.com/WordPress/gutenberg/pull/79055)).
|
|
64
|
+
- `ToggleGroupControl`: Radio options now render an auto-generated `name` attribute, following Ariakit's `Radio` behavior ([#79055](https://github.com/WordPress/gutenberg/pull/79055)).
|
|
28
65
|
- Dependency updates ([#77954](https://github.com/WordPress/gutenberg/pull/77954)).
|
|
29
66
|
|
|
30
67
|
## 34.0.0 (2026-05-27)
|
|
@@ -39,6 +76,7 @@
|
|
|
39
76
|
|
|
40
77
|
### Enhancements
|
|
41
78
|
|
|
79
|
+
- `Tooltip`: Mark as not recommended for use in a WordPress environment, in favour of `Tooltip` from `@wordpress/ui` ([#78693](https://github.com/WordPress/gutenberg/pull/78693)).
|
|
42
80
|
- `Tabs`, `TabPanel`: Align selected tab colors and indicators with `@wordpress/ui` `Tabs` ([#78418](https://github.com/WordPress/gutenberg/pull/78418)).
|
|
43
81
|
- `NoticeList`: Add vertical spacing between notices in a list.
|
|
44
82
|
- `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)).
|
package/CONTRIBUTING.md
CHANGED
|
@@ -191,10 +191,10 @@ function useExampleComponent(
|
|
|
191
191
|
);
|
|
192
192
|
|
|
193
193
|
// Any other reusable rendering logic (e.g. computing className, state, event listeners...)
|
|
194
|
-
const
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
194
|
+
const classes = clsx(
|
|
195
|
+
styles.example,
|
|
196
|
+
isVisible && styles.visible,
|
|
197
|
+
className
|
|
198
198
|
);
|
|
199
199
|
|
|
200
200
|
return {
|
|
@@ -416,9 +416,11 @@ On the component's main named export, add a JSDoc comment that includes the main
|
|
|
416
416
|
|
|
417
417
|
## Styling
|
|
418
418
|
|
|
419
|
-
All new
|
|
419
|
+
All new components should be styled using SCSS Modules.
|
|
420
420
|
|
|
421
|
-
|
|
421
|
+
Place component-local styles in a `style.module.scss` file next to the component, import the module from JavaScript or TypeScript, and compose class names with `clsx`. Preserve existing public `components-*` class names where consumers may rely on them. For dynamic values, prefer inline CSS custom properties consumed by the SCSS module. For variants and state, prefer conditional module classes composed with `clsx`.
|
|
422
|
+
|
|
423
|
+
Legacy components may still use Emotion while they are being migrated, but new Emotion usage should not be added.
|
|
422
424
|
|
|
423
425
|
### Deprecating styles
|
|
424
426
|
|
|
@@ -426,10 +428,11 @@ Changing the styles of a non-experimental component must be done with care. To p
|
|
|
426
428
|
|
|
427
429
|
```jsx
|
|
428
430
|
// component.tsx
|
|
431
|
+
import clsx from 'clsx';
|
|
429
432
|
import deprecated from '@wordpress/deprecated';
|
|
430
|
-
import
|
|
433
|
+
import styles from './style.module.scss';
|
|
431
434
|
|
|
432
|
-
function MyComponent( { __nextHasNoOuterMargins = false } ) {
|
|
435
|
+
function MyComponent( { __nextHasNoOuterMargins = false, className } ) {
|
|
433
436
|
if ( ! __nextHasNoOuterMargins ) {
|
|
434
437
|
deprecated( 'Outer margin styles for wp.components.MyComponent', {
|
|
435
438
|
since: '6.0',
|
|
@@ -437,27 +440,31 @@ function MyComponent( { __nextHasNoOuterMargins = false } ) {
|
|
|
437
440
|
hint: 'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
|
|
438
441
|
} );
|
|
439
442
|
}
|
|
440
|
-
return
|
|
443
|
+
return (
|
|
444
|
+
<div
|
|
445
|
+
className={ clsx(
|
|
446
|
+
'components-my-component',
|
|
447
|
+
styles.root,
|
|
448
|
+
! __nextHasNoOuterMargins &&
|
|
449
|
+
styles.deprecatedOuterMargins,
|
|
450
|
+
className
|
|
451
|
+
) }
|
|
452
|
+
/>
|
|
453
|
+
);
|
|
441
454
|
}
|
|
442
455
|
```
|
|
443
456
|
|
|
444
457
|
Styles should be structured so the deprecated styles are cleanly encapsulated, and can be easily removed when the deprecation version arrives.
|
|
445
458
|
|
|
446
|
-
```
|
|
447
|
-
//
|
|
448
|
-
|
|
449
|
-
if ( ! __nextHasNoOuterMargins ) {
|
|
450
|
-
return css`
|
|
451
|
-
margin: 8px;
|
|
452
|
-
`;
|
|
453
|
-
}
|
|
454
|
-
};
|
|
455
|
-
|
|
456
|
-
export const Wrapper = styled.div`
|
|
459
|
+
```scss
|
|
460
|
+
// style.module.scss
|
|
461
|
+
.root {
|
|
457
462
|
margin: 0;
|
|
463
|
+
}
|
|
458
464
|
|
|
459
|
-
|
|
460
|
-
|
|
465
|
+
.deprecatedOuterMargins {
|
|
466
|
+
margin: 8px;
|
|
467
|
+
}
|
|
461
468
|
```
|
|
462
469
|
|
|
463
470
|
Once deprecated, code examples in docs/stories should include the opt-in prop set to `true` so that new consumers are encouraged to adopt it from the start.
|
|
@@ -683,7 +690,7 @@ component-name/
|
|
|
683
690
|
├── hook.ts
|
|
684
691
|
├── index.ts
|
|
685
692
|
├── README.md
|
|
686
|
-
├──
|
|
693
|
+
├── style.module.scss
|
|
687
694
|
└── types.ts
|
|
688
695
|
```
|
|
689
696
|
|
|
@@ -696,13 +703,13 @@ component-family-name/
|
|
|
696
703
|
│ ├── component.tsx
|
|
697
704
|
│ ├── hook.ts
|
|
698
705
|
│ ├── README.md
|
|
699
|
-
│ └──
|
|
706
|
+
│ └── style.module.scss
|
|
700
707
|
├── sub-component-name/
|
|
701
708
|
│ ├── index.ts
|
|
702
709
|
│ ├── component.tsx
|
|
703
710
|
│ ├── hook.ts
|
|
704
711
|
│ ├── README.md
|
|
705
|
-
│ └──
|
|
712
|
+
│ └── style.module.scss
|
|
706
713
|
├── stories
|
|
707
714
|
│ └── index.js
|
|
708
715
|
├── test
|
|
@@ -742,7 +749,7 @@ This second approach involves creating a new, separate version (ie. export) of t
|
|
|
742
749
|
|
|
743
750
|
If possible, the legacy version of the component should be rewritten so that it uses the same underlying implementation of the new version, with an extra API "translation" layer to adapt the legacy API surface to the new API surface, e.g:
|
|
744
751
|
|
|
745
|
-
```
|
|
752
|
+
```tsx
|
|
746
753
|
// legacy-component/index.tsx
|
|
747
754
|
|
|
748
755
|
function LegacyComponent( props ) {
|
|
@@ -118,7 +118,7 @@ function registerStyle(hash, css) {
|
|
|
118
118
|
|
|
119
119
|
// packages/components/src/alignment-matrix-control/style.module.scss
|
|
120
120
|
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
121
|
-
registerStyle("
|
|
121
|
+
registerStyle("0c5e50ec66", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
|
|
122
122
|
}
|
|
123
123
|
var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
|
|
124
124
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/alignment-matrix-control/cell.tsx", "../../../style-runtime/src/index.ts", "../../src/alignment-matrix-control/style.module.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n id,\n value,\n ...props\n}) {\n return /*#__PURE__*/_jsx(Tooltip, {\n text: ALIGNMENT_LABEL[value],\n children: /*#__PURE__*/_jsxs(Composite.Item, {\n id: id,\n render: /*#__PURE__*/_jsx(\"span\", {\n ...props,\n className: clsx(styles.cell, props.className),\n role: \"gridcell\"\n }),\n children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n children: value\n }), /*#__PURE__*/_jsx(\"span\", {\n className: styles.point,\n role: \"presentation\"\n })]\n })\n });\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n id,\n value,\n ...props\n}) {\n return /*#__PURE__*/_jsx(Tooltip, {\n text: ALIGNMENT_LABEL[value],\n children: /*#__PURE__*/_jsxs(Composite.Item, {\n id: id,\n render: /*#__PURE__*/_jsx(\"span\", {\n ...props,\n className: clsx(styles.cell, props.className),\n role: \"gridcell\"\n }),\n children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n children: value\n }), /*#__PURE__*/_jsx(\"span\", {\n className: styles.point,\n role: \"presentation\"\n })]\n })\n });\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"0c5e50ec66\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
|
|
7
7
|
}
|
|
@@ -122,7 +122,7 @@ function registerStyle(hash, css) {
|
|
|
122
122
|
|
|
123
123
|
// packages/components/src/alignment-matrix-control/style.module.scss
|
|
124
124
|
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
125
|
-
registerStyle("
|
|
125
|
+
registerStyle("0c5e50ec66", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
|
|
126
126
|
}
|
|
127
127
|
var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };
|
|
128
128
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/alignment-matrix-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/alignment-matrix-control/style.module.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n className,\n id,\n label = __('Alignment Matrix Control'),\n defaultValue = 'center center',\n value,\n onChange,\n width = 92,\n ...props\n}) {\n const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n const setActiveId = useCallback(nextActiveId => {\n const nextValue = getItemValue(baseId, nextActiveId);\n if (nextValue) {\n onChange?.(nextValue);\n }\n }, [baseId, onChange]);\n const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n return /*#__PURE__*/_jsx(Composite, {\n defaultActiveId: getItemId(baseId, defaultValue),\n activeId: getItemId(baseId, value),\n setActiveId: setActiveId,\n rtl: isRTL(),\n render: /*#__PURE__*/_jsx(\"div\", {\n ...props,\n className: classes,\n \"aria-label\": label,\n id: baseId,\n role: \"grid\",\n style: {\n width: `${width}px`\n }\n }),\n children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n render: /*#__PURE__*/_jsx(\"div\", {\n className: styles['grid-row'],\n role: \"row\"\n }),\n children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n id: getItemId(baseId, cell),\n value: cell\n }, cell))\n }, index))\n });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n /**\n * Render an alignment matrix as an icon.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n *\n * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n * ```\n */\n Icon: Object.assign(AlignmentMatrixControlIcon, {\n displayName: 'AlignmentMatrixControl.Icon'\n })\n});\nexport default AlignmentMatrixControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,kBAAuC;AACvC,mBAA8C;;;AClB9C,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n className,\n id,\n label = __('Alignment Matrix Control'),\n defaultValue = 'center center',\n value,\n onChange,\n width = 92,\n ...props\n}) {\n const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n const setActiveId = useCallback(nextActiveId => {\n const nextValue = getItemValue(baseId, nextActiveId);\n if (nextValue) {\n onChange?.(nextValue);\n }\n }, [baseId, onChange]);\n const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n return /*#__PURE__*/_jsx(Composite, {\n defaultActiveId: getItemId(baseId, defaultValue),\n activeId: getItemId(baseId, value),\n setActiveId: setActiveId,\n rtl: isRTL(),\n render: /*#__PURE__*/_jsx(\"div\", {\n ...props,\n className: classes,\n \"aria-label\": label,\n id: baseId,\n role: \"grid\",\n style: {\n width: `${width}px`\n }\n }),\n children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n render: /*#__PURE__*/_jsx(\"div\", {\n className: styles['grid-row'],\n role: \"row\"\n }),\n children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n id: getItemId(baseId, cell),\n value: cell\n }, cell))\n }, index))\n });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n /**\n * Render an alignment matrix as an icon.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n *\n * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n * ```\n */\n Icon: Object.assign(AlignmentMatrixControlIcon, {\n displayName: 'AlignmentMatrixControl.Icon'\n })\n});\nexport default AlignmentMatrixControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"0c5e50ec66\", \"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\");\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
|
|
7
7
|
}
|
|
@@ -116,7 +116,7 @@ function registerStyle(hash, css) {
|
|
|
116
116
|
|
|
117
117
|
// packages/components/src/angle-picker-control/style.module.scss
|
|
118
118
|
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
119
|
-
registerStyle("
|
|
119
|
+
registerStyle("cbb20ea39f", "._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}");
|
|
120
120
|
}
|
|
121
121
|
var style_module_default = { "circle-root": "_8f57b8d483c51fbe__circle-root", "circle-indicator-wrapper": "b1bae984ac10fcc3__circle-indicator-wrapper", "circle-indicator": "_6d2fe0a2cbb31bf0__circle-indicator" };
|
|
122
122
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../../style-runtime/src/index.ts", "../../src/angle-picker-control/style.module.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n value,\n onChange,\n className,\n ...props\n}) {\n const angleCircleRef = useRef(null);\n const angleCircleCenterRef = useRef(undefined);\n const previousCursorValueRef = useRef(undefined);\n const setAngleCircleCenter = () => {\n if (angleCircleRef.current === null) {\n return;\n }\n const rect = angleCircleRef.current.getBoundingClientRect();\n angleCircleCenterRef.current = {\n x: rect.x + rect.width / 2,\n y: rect.y + rect.height / 2\n };\n };\n const changeAngleToPosition = event => {\n if (event === undefined) {\n return;\n }\n\n // Prevent (drag) mouse events from selecting and accidentally\n // triggering actions from other elements.\n event.preventDefault();\n // Input control needs to lose focus and by preventDefault above, it doesn't.\n event.target?.focus();\n if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n const {\n x: centerX,\n y: centerY\n } = angleCircleCenterRef.current;\n onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n }\n };\n const {\n startDrag,\n isDragging\n } = useDragging({\n onDragStart: event => {\n setAngleCircleCenter();\n changeAngleToPosition(event);\n },\n onDragMove: changeAngleToPosition,\n onDragEnd: changeAngleToPosition\n });\n useEffect(() => {\n if (isDragging) {\n if (previousCursorValueRef.current === undefined) {\n previousCursorValueRef.current = document.body.style.cursor;\n }\n document.body.style.cursor = 'grabbing';\n } else {\n document.body.style.cursor = previousCursorValueRef.current || '';\n previousCursorValueRef.current = undefined;\n }\n }, [isDragging]);\n return (\n /*#__PURE__*/\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n _jsx(\"div\", {\n ref: angleCircleRef,\n onMouseDown: startDrag,\n className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n ...props,\n children: /*#__PURE__*/_jsx(\"div\", {\n style: value ? {\n transform: `rotate(${value}deg)`\n } : undefined,\n className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n tabIndex: -1,\n children: /*#__PURE__*/_jsx(\"div\", {\n className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n })\n })\n })\n );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n const y = pointY - centerY;\n const x = pointX - centerX;\n const angleInRadians = Math.atan2(y, x);\n const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n if (angleInDeg < 0) {\n return 360 + angleInDeg;\n }\n return angleInDeg;\n}\nexport default AngleCircle;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAkC;AAClC,qBAAyD;;;ACTzD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n value,\n onChange,\n className,\n ...props\n}) {\n const angleCircleRef = useRef(null);\n const angleCircleCenterRef = useRef(undefined);\n const previousCursorValueRef = useRef(undefined);\n const setAngleCircleCenter = () => {\n if (angleCircleRef.current === null) {\n return;\n }\n const rect = angleCircleRef.current.getBoundingClientRect();\n angleCircleCenterRef.current = {\n x: rect.x + rect.width / 2,\n y: rect.y + rect.height / 2\n };\n };\n const changeAngleToPosition = event => {\n if (event === undefined) {\n return;\n }\n\n // Prevent (drag) mouse events from selecting and accidentally\n // triggering actions from other elements.\n event.preventDefault();\n // Input control needs to lose focus and by preventDefault above, it doesn't.\n event.target?.focus();\n if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n const {\n x: centerX,\n y: centerY\n } = angleCircleCenterRef.current;\n onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n }\n };\n const {\n startDrag,\n isDragging\n } = useDragging({\n onDragStart: event => {\n setAngleCircleCenter();\n changeAngleToPosition(event);\n },\n onDragMove: changeAngleToPosition,\n onDragEnd: changeAngleToPosition\n });\n useEffect(() => {\n if (isDragging) {\n if (previousCursorValueRef.current === undefined) {\n previousCursorValueRef.current = document.body.style.cursor;\n }\n document.body.style.cursor = 'grabbing';\n } else {\n document.body.style.cursor = previousCursorValueRef.current || '';\n previousCursorValueRef.current = undefined;\n }\n }, [isDragging]);\n return (\n /*#__PURE__*/\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n _jsx(\"div\", {\n ref: angleCircleRef,\n onMouseDown: startDrag,\n className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n ...props,\n children: /*#__PURE__*/_jsx(\"div\", {\n style: value ? {\n transform: `rotate(${value}deg)`\n } : undefined,\n className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n tabIndex: -1,\n children: /*#__PURE__*/_jsx(\"div\", {\n className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n })\n })\n })\n );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n const y = pointY - centerY;\n const x = pointX - centerX;\n const angleInRadians = Math.atan2(y, x);\n const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n if (angleInDeg < 0) {\n return 360 + angleInDeg;\n }\n return angleInDeg;\n}\nexport default AngleCircle;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n const globalScope = globalThis;\n if (globalScope.__wpStyleRuntime) {\n return globalScope.__wpStyleRuntime;\n }\n globalScope.__wpStyleRuntime = {\n documents: new Map(),\n styles: new Map(),\n injectedStyles: new WeakMap()\n };\n if (typeof document !== 'undefined') {\n registerDocument(document);\n }\n return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n if (!targetDocument.head) {\n return false;\n }\n for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n return true;\n }\n }\n return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n if (!targetDocument.head) {\n return;\n }\n const runtime = getRuntime();\n let injectedStyles = runtime.injectedStyles.get(targetDocument);\n if (!injectedStyles) {\n injectedStyles = new Set();\n runtime.injectedStyles.set(targetDocument, injectedStyles);\n }\n if (injectedStyles.has(hash)) {\n return;\n }\n\n // Older generated CSS module output can still inject matching style tags\n // after this document's cache is created, so keep the DOM as the fallback\n // source of truth on cache misses.\n if (documentContainsStyleHash(targetDocument, hash)) {\n injectedStyles.add(hash);\n return;\n }\n const style = targetDocument.createElement('style');\n style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n style.appendChild(targetDocument.createTextNode(css));\n targetDocument.head.appendChild(style);\n injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n const runtime = getRuntime();\n runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n for (const [hash, css] of runtime.styles) {\n injectStyle(targetDocument, hash, css);\n }\n return () => {\n const count = runtime.documents.get(targetDocument);\n if (count === undefined) {\n return;\n }\n if (count <= 1) {\n runtime.documents.delete(targetDocument);\n return;\n }\n runtime.documents.set(targetDocument, count - 1);\n };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n const runtime = getRuntime();\n runtime.styles.set(hash, css);\n for (const targetDocument of runtime.documents.keys()) {\n injectStyle(targetDocument, hash, css);\n }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"cbb20ea39f\", \"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\");\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["useDragging", "_jsx", "clsx"]
|
|
7
7
|
}
|
|
@@ -62,11 +62,11 @@ function UnforwardedAnglePickerControl(props, ref) {
|
|
|
62
62
|
const classes = (0, import_clsx.default)("components-angle-picker-control", className);
|
|
63
63
|
const prefixOrSuffixProp = (0, import_i18n.isRTL)() ? {
|
|
64
64
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_prefix_wrapper.default, {
|
|
65
|
-
children: "
|
|
65
|
+
children: "°"
|
|
66
66
|
})
|
|
67
67
|
} : {
|
|
68
68
|
suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_suffix_wrapper.default, {
|
|
69
|
-
children: "
|
|
69
|
+
children: "°"
|
|
70
70
|
})
|
|
71
71
|
};
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_flex.Flex, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/autocomplete/get-autocomplete-match.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * Internal dependencies\n */\n\nexport function getAutocompleteMatch(textContent, completers, options) {\n const {\n matchCount,\n isBackspacing,\n getTextAfterSelection,\n lastCompletion\n } = options;\n if (!textContent) {\n return null;\n }\n\n // Find the completer whose trigger prefix ends closest to the cursor\n // (rightmost end position). Comparing end positions instead of start\n // positions correctly resolves overlapping prefixes like \"@\" and \"@@\".\n let completer = null;\n let triggerIndex = -1;\n let matchedEndIndex = -1;\n let matchedPrefixLength = 0;\n for (const currentCompleter of completers) {\n const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n if (currentIndex < 0) {\n continue;\n }\n const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;\n if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {\n completer = currentCompleter;\n triggerIndex = currentIndex;\n matchedEndIndex = currentEndIndex;\n matchedPrefixLength = currentCompleter.triggerPrefix.length;\n }\n }\n if (!completer) {\n return null;\n }\n const {\n allowContext,\n triggerPrefix\n } = completer;\n const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n\n // Prevent matching with an extremely long string, which causes\n // the editor to slow-down significantly. This could happen, for\n // example, if `matchingWhileBackspacing` is true and one of the\n // \"words\" ends up being too long. Returning null here intentionally\n // resets the autocompleter state in the caller.\n if (textWithoutTrigger.length > 50) {\n return null;\n }\n const mismatch = matchCount === 0;\n const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n\n // Allow matching when typing a trigger + the match string or when\n // clicking in an existing trigger word on the page.\n // E.g. \"Some text @a\"
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * Internal dependencies\n */\n\nexport function getAutocompleteMatch(textContent, completers, options) {\n const {\n matchCount,\n isBackspacing,\n getTextAfterSelection,\n lastCompletion\n } = options;\n if (!textContent) {\n return null;\n }\n\n // Find the completer whose trigger prefix ends closest to the cursor\n // (rightmost end position). Comparing end positions instead of start\n // positions correctly resolves overlapping prefixes like \"@\" and \"@@\".\n let completer = null;\n let triggerIndex = -1;\n let matchedEndIndex = -1;\n let matchedPrefixLength = 0;\n for (const currentCompleter of completers) {\n const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n if (currentIndex < 0) {\n continue;\n }\n const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;\n if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {\n completer = currentCompleter;\n triggerIndex = currentIndex;\n matchedEndIndex = currentEndIndex;\n matchedPrefixLength = currentCompleter.triggerPrefix.length;\n }\n }\n if (!completer) {\n return null;\n }\n const {\n allowContext,\n triggerPrefix\n } = completer;\n const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n\n // Prevent matching with an extremely long string, which causes\n // the editor to slow-down significantly. This could happen, for\n // example, if `matchingWhileBackspacing` is true and one of the\n // \"words\" ends up being too long. Returning null here intentionally\n // resets the autocompleter state in the caller.\n if (textWithoutTrigger.length > 50) {\n return null;\n }\n const mismatch = matchCount === 0;\n const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n\n // Allow matching when typing a trigger + the match string or when\n // clicking in an existing trigger word on the page.\n // E.g. \"Some text @a\" — \"@a\" is detected as a trigger word.\n const hasOneTriggerWord = wordsFromTrigger.length === 1;\n\n // Allow matching when backspacing near a trigger word (up to 3\n // words from the trigger character). This lets us recover from a\n // mismatch when backspacing while still imposing sane limits.\n // E.g. \"Some text @marcelo sekkkk\" — backspacing \"kkkk\" re-shows\n // the popup once the text matches again.\n const matchingWhileBackspacing = isBackspacing && wordsFromTrigger.length <= 3;\n if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n return null;\n }\n if (allowContext && !allowContext(textContent.slice(0, triggerIndex), getTextAfterSelection())) {\n return null;\n }\n if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n return null;\n }\n\n // After a completion whose value starts with the trigger prefix\n // (e.g. @username), the trigger remains in the text and would\n // re-activate the autocompleter. Suppress the match when the\n // filter value still corresponds to the recently completed text.\n if (lastCompletion && lastCompletion.name === completer.name && textWithoutTrigger.trimEnd() === lastCompletion.value) {\n return null;\n }\n return {\n completer,\n filterValue: removeAccents(textWithoutTrigger)\n };\n}"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA0B;AAMnB,SAAS,qBAAqB,aAAa,YAAY,SAAS;AACrE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAKA,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,kBAAkB;AACtB,MAAI,sBAAsB;AAC1B,aAAW,oBAAoB,YAAY;AACzC,UAAM,eAAe,YAAY,YAAY,iBAAiB,aAAa;AAC3E,QAAI,eAAe,GAAG;AACpB;AAAA,IACF;AACA,UAAM,kBAAkB,eAAe,iBAAiB,cAAc;AACtE,QAAI,kBAAkB,mBAAmB,oBAAoB,mBAAmB,iBAAiB,cAAc,SAAS,qBAAqB;AAC3I,kBAAY;AACZ,qBAAe;AACf,wBAAkB;AAClB,4BAAsB,iBAAiB,cAAc;AAAA,IACvD;AAAA,EACF;AACA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,YAAY,MAAM,eAAe,cAAc,MAAM;AAOhF,MAAI,mBAAmB,SAAS,IAAI;AAClC,WAAO;AAAA,EACT;AACA,QAAM,WAAW,eAAe;AAChC,QAAM,mBAAmB,mBAAmB,MAAM,IAAI;AAKtD,QAAM,oBAAoB,iBAAiB,WAAW;AAOtD,QAAM,2BAA2B,iBAAiB,iBAAiB,UAAU;AAC7E,MAAI,YAAY,EAAE,4BAA4B,oBAAoB;AAChE,WAAO;AAAA,EACT;AACA,MAAI,gBAAgB,CAAC,aAAa,YAAY,MAAM,GAAG,YAAY,GAAG,sBAAsB,CAAC,GAAG;AAC9F,WAAO;AAAA,EACT;AACA,MAAI,MAAM,KAAK,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,GAAG;AACvE,WAAO;AAAA,EACT;AAMA,MAAI,kBAAkB,eAAe,SAAS,UAAU,QAAQ,mBAAmB,QAAQ,MAAM,eAAe,OAAO;AACrH,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL;AAAA,IACA,iBAAa,sBAAAA,SAAc,kBAAkB;AAAA,EAC/C;AACF;",
|
|
6
6
|
"names": ["removeAccents"]
|
|
7
7
|
}
|
|
@@ -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, 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}"],
|
|
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 —\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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["composePrivateApis", "getNodeText", "_jsx", "_jsxs", "_Fragment"]
|
|
7
7
|
}
|