@wordpress/components 35.0.0 → 35.0.1
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 +20 -1
- 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/color-palette/index.cjs +3 -0
- package/build/color-palette/index.cjs.map +2 -2
- package/build/custom-gradient-picker/gradient-bar/index.cjs.map +2 -2
- package/build/draggable/index.cjs +1 -1
- package/build/draggable/index.cjs.map +2 -2
- package/build/navigable-container/container.cjs +15 -21
- package/build/navigable-container/container.cjs.map +2 -2
- package/build/unit-control/utils.cjs +33 -35
- package/build/unit-control/utils.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/color-palette/index.mjs +3 -0
- package/build-module/color-palette/index.mjs.map +2 -2
- package/build-module/custom-gradient-picker/gradient-bar/index.mjs.map +2 -2
- package/build-module/draggable/index.mjs +1 -1
- package/build-module/draggable/index.mjs.map +2 -2
- package/build-module/navigable-container/container.mjs +16 -22
- package/build-module/navigable-container/container.mjs.map +2 -2
- package/build-module/unit-control/utils.mjs +33 -35
- package/build-module/unit-control/utils.mjs.map +2 -2
- package/build-style/style-rtl.css +41 -10
- package/build-style/style.css +41 -10
- package/build-types/card/context.d.ts +3 -0
- package/build-types/card/context.d.ts.map +1 -0
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/gradient-bar/index.d.ts.map +1 -1
- package/build-types/date-time/date/index.d.ts +23 -0
- package/build-types/date-time/date/index.d.ts.map +1 -0
- package/build-types/date-time/date/styles.d.ts +45 -0
- package/build-types/date-time/date/styles.d.ts.map +1 -0
- package/build-types/date-time/date/test/index.d.ts +2 -0
- package/build-types/date-time/date/test/index.d.ts.map +1 -0
- package/build-types/date-time/date/test/use-lilius.d.ts +2 -0
- package/build-types/date-time/date/test/use-lilius.d.ts.map +1 -0
- package/build-types/date-time/date/use-lilius/index.d.ts +169 -0
- package/build-types/date-time/date/use-lilius/index.d.ts.map +1 -0
- package/build-types/date-time/time/index.d.ts +27 -0
- package/build-types/date-time/time/index.d.ts.map +1 -0
- package/build-types/date-time/time/styles.d.ts +93 -0
- package/build-types/date-time/time/styles.d.ts.map +1 -0
- package/build-types/date-time/time/test/index.d.ts +2 -0
- package/build-types/date-time/time/test/index.d.ts.map +1 -0
- package/build-types/date-time/time/time-input/index.d.ts +4 -0
- package/build-types/date-time/time/time-input/index.d.ts.map +1 -0
- package/build-types/date-time/time/time-input/test/index.d.ts +2 -0
- package/build-types/date-time/time/time-input/test/index.d.ts.map +1 -0
- package/build-types/date-time/time/timezone.d.ts +7 -0
- package/build-types/date-time/time/timezone.d.ts.map +1 -0
- package/build-types/navigable-container/container.d.ts.map +1 -1
- package/build-types/navigation/back-button/index.d.ts +7 -0
- package/build-types/navigation/back-button/index.d.ts.map +1 -0
- package/build-types/navigation/constants.d.ts +3 -0
- package/build-types/navigation/constants.d.ts.map +1 -0
- package/build-types/navigation/context.d.ts +4 -0
- package/build-types/navigation/context.d.ts.map +1 -0
- package/build-types/navigation/group/context.d.ts +7 -0
- package/build-types/navigation/group/context.d.ts.map +1 -0
- package/build-types/navigation/group/index.d.ts +7 -0
- package/build-types/navigation/group/index.d.ts.map +1 -0
- package/build-types/navigation/index.d.ts +46 -0
- package/build-types/navigation/index.d.ts.map +1 -0
- package/build-types/navigation/item/base-content.d.ts +3 -0
- package/build-types/navigation/item/base-content.d.ts.map +1 -0
- package/build-types/navigation/item/base.d.ts +3 -0
- package/build-types/navigation/item/base.d.ts.map +1 -0
- package/build-types/navigation/item/index.d.ts +7 -0
- package/build-types/navigation/item/index.d.ts.map +1 -0
- package/build-types/navigation/item/use-navigation-tree-item.d.ts +3 -0
- package/build-types/navigation/item/use-navigation-tree-item.d.ts.map +1 -0
- package/build-types/navigation/menu/context.d.ts +7 -0
- package/build-types/navigation/menu/context.d.ts.map +1 -0
- package/build-types/navigation/menu/index.d.ts +7 -0
- package/build-types/navigation/menu/index.d.ts.map +1 -0
- package/build-types/navigation/menu/menu-title-search.d.ts +3 -0
- package/build-types/navigation/menu/menu-title-search.d.ts.map +1 -0
- package/build-types/navigation/menu/menu-title.d.ts +3 -0
- package/build-types/navigation/menu/menu-title.d.ts.map +1 -0
- package/build-types/navigation/menu/search-no-results-found.d.ts +3 -0
- package/build-types/navigation/menu/search-no-results-found.d.ts.map +1 -0
- package/build-types/navigation/menu/use-navigation-tree-menu.d.ts +3 -0
- package/build-types/navigation/menu/use-navigation-tree-menu.d.ts.map +1 -0
- package/build-types/navigation/stories/index.story.d.ts +23 -0
- package/build-types/navigation/stories/index.story.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/controlled-state.d.ts +7 -0
- package/build-types/navigation/stories/utils/controlled-state.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/default.d.ts +10 -0
- package/build-types/navigation/stories/utils/default.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/group.d.ts +10 -0
- package/build-types/navigation/stories/utils/group.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/hide-if-empty.d.ts +10 -0
- package/build-types/navigation/stories/utils/hide-if-empty.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/more-examples.d.ts +10 -0
- package/build-types/navigation/stories/utils/more-examples.d.ts.map +1 -0
- package/build-types/navigation/stories/utils/search.d.ts +10 -0
- package/build-types/navigation/stories/utils/search.d.ts.map +1 -0
- package/build-types/navigation/styles/navigation-styles.d.ts +55 -0
- package/build-types/navigation/styles/navigation-styles.d.ts.map +1 -0
- package/build-types/navigation/test/index.d.ts +2 -0
- package/build-types/navigation/test/index.d.ts.map +1 -0
- package/build-types/navigation/types.d.ts +266 -0
- package/build-types/navigation/types.d.ts.map +1 -0
- package/build-types/navigation/use-create-navigation-tree.d.ts +15 -0
- package/build-types/navigation/use-create-navigation-tree.d.ts.map +1 -0
- package/build-types/navigation/use-navigation-tree-nodes.d.ts +10 -0
- package/build-types/navigation/use-navigation-tree-nodes.d.ts.map +1 -0
- package/build-types/navigation/utils.d.ts +3 -0
- package/build-types/navigation/utils.d.ts.map +1 -0
- package/build-types/unit-control/utils.d.ts.map +1 -1
- package/build-types/validated-form-controls/components/combobox-control.d.ts +2 -2
- package/build-types/visually-hidden/test/index.d.ts +2 -0
- package/build-types/visually-hidden/test/index.d.ts.map +1 -0
- package/package.json +34 -32
- package/src/card/card/README.md +4 -4
- package/src/checkbox-control/README.md +1 -1
- package/src/clipboard-button/README.md +4 -4
- package/src/color-palette/index.tsx +5 -0
- package/src/color-palette/test/index.tsx +30 -0
- package/src/combobox-control/README.md +1 -1
- package/src/confirm-dialog/README.md +1 -1
- package/src/custom-gradient-picker/gradient-bar/index.tsx +1 -1
- package/src/flex/flex/README.md +1 -1
- package/src/navigable-container/container.tsx +22 -30
- package/src/popover/README.md +1 -1
- package/src/scrollable/README.md +1 -1
- package/src/tooltip/style.scss +1 -1
- package/src/unit-control/utils.ts +33 -52
- package/build/mobile/image/constants.cjs +0 -34
- package/build/mobile/image/constants.cjs.map +0 -7
- package/build-module/mobile/image/constants.mjs +0 -9
- package/build-module/mobile/image/constants.mjs.map +0 -7
- package/src/autocomplete/autocompleter-ui.native.js +0 -211
- package/src/autocomplete/background-view.android.js +0 -25
- package/src/autocomplete/background-view.ios.js +0 -23
- package/src/autocomplete/style.android.scss +0 -7
- package/src/autocomplete/style.native.scss +0 -74
- package/src/base-control/index.native.js +0 -14
- package/src/button/index.native.js +0 -236
- package/src/button/style.native.scss +0 -9
- package/src/color-control/index.native.js +0 -24
- package/src/color-indicator/index.native.js +0 -80
- package/src/color-indicator/style.native.scss +0 -51
- package/src/color-palette/index.native.js +0 -360
- package/src/color-palette/style.native.scss +0 -49
- package/src/color-picker/hsv-color-picker.native.js +0 -88
- package/src/color-picker/hue-picker.native.js +0 -198
- package/src/color-picker/index.native.js +0 -215
- package/src/color-picker/saturation-picker.native.js +0 -167
- package/src/color-picker/style.native.scss +0 -87
- package/src/custom-gradient-picker/index.native.js +0 -110
- package/src/custom-gradient-picker/style.native.scss +0 -3
- package/src/dashicon/index.native.js +0 -18
- package/src/disabled/index.native.js +0 -10
- package/src/draggable/index.native.js +0 -234
- package/src/draggable/style.native.scss +0 -3
- package/src/draggable/test/index.native.js +0 -138
- package/src/dropdown/index.native.js +0 -59
- package/src/dropdown-menu/index.native.js +0 -152
- package/src/external-link/index.native.js +0 -25
- package/src/focal-point-picker/focal-point.native.js +0 -30
- package/src/focal-point-picker/index.native.js +0 -281
- package/src/focal-point-picker/tooltip/index.native.js +0 -144
- package/src/focal-point-picker/tooltip/style.native.scss +0 -42
- package/src/font-size-picker/index.native.js +0 -190
- package/src/font-size-picker/style.native.scss +0 -6
- package/src/footer-message-control/index.native.js +0 -14
- package/src/higher-order/with-focus-outside/index.native.js +0 -38
- package/src/index.native.js +0 -134
- package/src/keyboard-shortcuts/index.native.js +0 -2
- package/src/mobile/README.md +0 -3
- package/src/mobile/autocompletion-items.native.js +0 -11
- package/src/mobile/badge/README.md +0 -31
- package/src/mobile/badge/index.native.js +0 -27
- package/src/mobile/badge/style.scss +0 -18
- package/src/mobile/bottom-sheet/borderStyles.android.scss +0 -8
- package/src/mobile/bottom-sheet/borderStyles.ios.scss +0 -9
- package/src/mobile/bottom-sheet/bottom-sheet-context.native.js +0 -40
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md +0 -101
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js +0 -16
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +0 -193
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +0 -146
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss +0 -11
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +0 -197
- package/src/mobile/bottom-sheet/button.native.js +0 -19
- package/src/mobile/bottom-sheet/cell.native.js +0 -464
- package/src/mobile/bottom-sheet/cellStyles.android.scss +0 -15
- package/src/mobile/bottom-sheet/cellStyles.ios.scss +0 -19
- package/src/mobile/bottom-sheet/chevron-back.native.js +0 -18
- package/src/mobile/bottom-sheet/color-cell.native.js +0 -35
- package/src/mobile/bottom-sheet/cycle-picker-cell.native.js +0 -31
- package/src/mobile/bottom-sheet/footer-message-cell.native.js +0 -23
- package/src/mobile/bottom-sheet/footer-message-link/README.md +0 -37
- package/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js +0 -26
- package/src/mobile/bottom-sheet/footer-message-link/styles.native.scss +0 -7
- package/src/mobile/bottom-sheet/index.native.js +0 -646
- package/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js +0 -125
- package/src/mobile/bottom-sheet/link-cell.native.js +0 -35
- package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +0 -92
- package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss +0 -27
- package/src/mobile/bottom-sheet/lock-icon/index.native.js +0 -19
- package/src/mobile/bottom-sheet/lock-icon/styles.native.scss +0 -8
- package/src/mobile/bottom-sheet/nav-bar/README.md +0 -63
- package/src/mobile/bottom-sheet/nav-bar/action-button.native.js +0 -30
- package/src/mobile/bottom-sheet/nav-bar/apply-button.native.js +0 -53
- package/src/mobile/bottom-sheet/nav-bar/back-button.native.js +0 -94
- package/src/mobile/bottom-sheet/nav-bar/heading.native.js +0 -33
- package/src/mobile/bottom-sheet/nav-bar/index.native.js +0 -23
- package/src/mobile/bottom-sheet/nav-bar/styles.native.scss +0 -69
- package/src/mobile/bottom-sheet/picker-cell.native.js +0 -40
- package/src/mobile/bottom-sheet/radio-cell.native.js +0 -39
- package/src/mobile/bottom-sheet/range-cell.native.js +0 -274
- package/src/mobile/bottom-sheet/range-cell.native.scss +0 -40
- package/src/mobile/bottom-sheet/range-text-input.native.js +0 -248
- package/src/mobile/bottom-sheet/ripple.native.js +0 -83
- package/src/mobile/bottom-sheet/ripple.native.scss +0 -11
- package/src/mobile/bottom-sheet/stepper-cell/index.native.js +0 -264
- package/src/mobile/bottom-sheet/stepper-cell/stepper.android.js +0 -78
- package/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js +0 -64
- package/src/mobile/bottom-sheet/stepper-cell/style.native.scss +0 -89
- package/src/mobile/bottom-sheet/styles.native.scss +0 -333
- package/src/mobile/bottom-sheet/sub-sheet/README.md +0 -90
- package/src/mobile/bottom-sheet/sub-sheet/index.native.js +0 -49
- package/src/mobile/bottom-sheet/switch-cell.native.js +0 -75
- package/src/mobile/bottom-sheet/test/index.native.js +0 -24
- package/src/mobile/bottom-sheet/test/range-cell.native.js +0 -73
- package/src/mobile/bottom-sheet-select-control/README.md +0 -97
- package/src/mobile/bottom-sheet-select-control/index.native.js +0 -124
- package/src/mobile/bottom-sheet-select-control/style.native.scss +0 -3
- package/src/mobile/bottom-sheet-text-control/README.md +0 -98
- package/src/mobile/bottom-sheet-text-control/index.native.js +0 -104
- package/src/mobile/bottom-sheet-text-control/styles.scss +0 -25
- package/src/mobile/clipboard/index.native.js +0 -18
- package/src/mobile/color-settings/gradient-picker-screen.native.js +0 -37
- package/src/mobile/color-settings/index.native.js +0 -88
- package/src/mobile/color-settings/palette.screen.native.js +0 -232
- package/src/mobile/color-settings/picker-screen.native.js +0 -60
- package/src/mobile/color-settings/style.native.scss +0 -62
- package/src/mobile/color-settings/utils.native.js +0 -36
- package/src/mobile/cycle-select-control/README.md +0 -3
- package/src/mobile/cycle-select-control/index.native.js +0 -39
- package/src/mobile/dashicons/index.native.js +0 -22
- package/src/mobile/focal-point-settings-panel/index.native.js +0 -84
- package/src/mobile/focal-point-settings-panel/styles.native.scss +0 -3
- package/src/mobile/gradient/index.native.js +0 -188
- package/src/mobile/gradient/style.native.scss +0 -8
- package/src/mobile/gradient/test/index.native.js +0 -114
- package/src/mobile/gridicons/index.native.js +0 -39
- package/src/mobile/html-text-input/index.native.js +0 -169
- package/src/mobile/html-text-input/style.android.scss +0 -8
- package/src/mobile/html-text-input/style.ios.scss +0 -10
- package/src/mobile/html-text-input/style.scss +0 -45
- package/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap +0 -48
- package/src/mobile/html-text-input/test/index.native.js +0 -118
- package/src/mobile/image/constants.js +0 -1
- package/src/mobile/image/icon-customize.native.js +0 -10
- package/src/mobile/image/icon-retry.native.js +0 -11
- package/src/mobile/image/image-editing-button.native.js +0 -63
- package/src/mobile/image/index.native.js +0 -401
- package/src/mobile/image/style.native.scss +0 -179
- package/src/mobile/image/utils/index.native.js +0 -58
- package/src/mobile/keyboard-avoiding-view/index.android.js +0 -8
- package/src/mobile/keyboard-avoiding-view/index.ios.js +0 -143
- package/src/mobile/keyboard-avoiding-view/styles.native.scss +0 -9
- package/src/mobile/keyboard-aware-flat-list/index.android.js +0 -81
- package/src/mobile/keyboard-aware-flat-list/index.ios.js +0 -147
- package/src/mobile/keyboard-aware-flat-list/shared.native.js +0 -26
- package/src/mobile/keyboard-aware-flat-list/styles.native.scss +0 -8
- package/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js +0 -203
- package/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-section.native.js +0 -142
- package/src/mobile/keyboard-aware-flat-list/test/use-scroll.native.js +0 -71
- package/src/mobile/keyboard-aware-flat-list/test/use-text-input-caret-position.native.js +0 -82
- package/src/mobile/keyboard-aware-flat-list/test/use-text-input-offset.native.js +0 -147
- package/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js +0 -87
- package/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js +0 -41
- package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +0 -100
- package/src/mobile/keyboard-aware-flat-list/use-scroll.native.js +0 -100
- package/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js +0 -36
- package/src/mobile/keyboard-aware-flat-list/use-text-input-offset.native.js +0 -54
- package/src/mobile/layout-animation/index.native.js +0 -16
- package/src/mobile/link-picker/index.native.js +0 -160
- package/src/mobile/link-picker/link-picker-results.native.js +0 -129
- package/src/mobile/link-picker/link-picker-screen.native.js +0 -60
- package/src/mobile/link-picker/styles.native.scss +0 -45
- package/src/mobile/link-picker/test/performance/index.native.js +0 -35
- package/src/mobile/link-settings/index.native.js +0 -332
- package/src/mobile/link-settings/link-rel.native.js +0 -10
- package/src/mobile/link-settings/link-settings-navigation.native.js +0 -50
- package/src/mobile/link-settings/link-settings-screen.native.js +0 -44
- package/src/mobile/link-settings/style.native.scss +0 -4
- package/src/mobile/link-settings/test/edit.native.js +0 -325
- package/src/mobile/link-settings/test/link-settings-navigation.native.js +0 -94
- package/src/mobile/media-edit/index.native.js +0 -125
- package/src/mobile/picker/index.android.js +0 -104
- package/src/mobile/picker/index.ios.js +0 -96
- package/src/mobile/picker/styles.native.scss +0 -29
- package/src/mobile/segmented-control/index.native.js +0 -186
- package/src/mobile/segmented-control/style.native.scss +0 -99
- package/src/mobile/utils/alignments.native.js +0 -78
- package/src/mobile/utils/get-px-from-css-unit.native.js +0 -329
- package/src/mobile/utils/index.native.js +0 -12
- package/src/mobile/utils/test/get-px-from-css-unit.native.js +0 -172
- package/src/mobile/utils/test/index.native.js +0 -134
- package/src/mobile/utils/use-is-floating-keyboard.native.js +0 -31
- package/src/mobile/utils/use-unit-converter-to-mobile.native.js +0 -90
- package/src/notice/index.native.js +0 -123
- package/src/notice/list.native.js +0 -55
- package/src/notice/style.native.scss +0 -60
- package/src/panel/actions.native.js +0 -46
- package/src/panel/actions.native.scss +0 -12
- package/src/panel/body.native.js +0 -29
- package/src/panel/body.native.scss +0 -11
- package/src/panel/bottom-separator-cover.native.js +0 -27
- package/src/panel/bottom-separator-cover.native.scss +0 -9
- package/src/private-apis.native.js +0 -13
- package/src/query-controls/index.native.js +0 -103
- package/src/radio-control/index.native.js +0 -24
- package/src/range-control/index.native.js +0 -73
- package/src/resizable-box/index.native.js +0 -32
- package/src/resizable-box/style.native.scss +0 -14
- package/src/sandbox/index.native.js +0 -392
- package/src/sandbox/style.native.scss +0 -7
- package/src/search-control/index.native.js +0 -274
- package/src/search-control/platform-style.android.scss +0 -57
- package/src/search-control/platform-style.ios.scss +0 -43
- package/src/search-control/style.native.scss +0 -63
- package/src/select-control/index.native.js +0 -41
- package/src/slot-fill/index.native.js +0 -25
- package/src/spinner/index.native.js +0 -22
- package/src/spinner/style.native.scss +0 -4
- package/src/style-provider/index.native.js +0 -3
- package/src/text/index.native.js +0 -13
- package/src/text/styles/emotion-css.native.js +0 -6
- package/src/text/styles/font-family.native.js +0 -1
- package/src/text/styles/text-mixins.native.js +0 -163
- package/src/text-control/index.native.js +0 -41
- package/src/textarea-control/index.native.js +0 -26
- package/src/toggle-control/index.native.js +0 -31
- package/src/toolbar/toolbar/style.native.scss +0 -11
- package/src/toolbar/toolbar/toolbar-container.native.js +0 -8
- package/src/toolbar/toolbar-button/toolbar-button-container.native.js +0 -8
- package/src/toolbar/toolbar-group/style.native.scss +0 -10
- package/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js +0 -36
- package/src/toolbar/toolbar-group/toolbar-group-container.native.js +0 -26
- package/src/toolbar/toolbar-item/index.native.js +0 -17
- package/src/tooltip/index.native.js +0 -292
- package/src/tooltip/style.native.scss +0 -39
- package/src/tooltip/test/index.native.js +0 -98
- package/src/unit-control/index.native.js +0 -202
- package/src/unit-control/style.native.scss +0 -19
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/custom-gradient-picker/gradient-bar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n switch (action.type) {\n case 'MOVE_INSERTER':\n if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n return {\n id: 'MOVING_INSERTER',\n insertPosition: action.insertPosition\n };\n }\n break;\n case 'STOP_INSERTER_MOVE':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'OPEN_INSERTER':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'INSERTING_CONTROL_POINT',\n insertPosition: state.insertPosition\n };\n }\n break;\n case 'CLOSE_INSERTER':\n if (state.id === 'INSERTING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'START_CONTROL_CHANGE':\n if (state.id === 'IDLE') {\n return {\n id: 'MOVING_CONTROL_POINT'\n };\n }\n break;\n case 'STOP_CONTROL_CHANGE':\n if (state.id === 'MOVING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n }\n return state;\n};\nconst customGradientBarReducerInitialState = {\n id: 'IDLE'\n};\nexport default function CustomGradientBar({\n background,\n hasGradient,\n value: controlPoints,\n onChange,\n disableInserter = false,\n disableAlpha = false,\n __experimentalIsRenderedInSidebar = false\n}) {\n const gradientMarkersContainerDomRef = useRef(null);\n const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n const onMouseEnterAndMove = event => {\n if (!gradientMarkersContainerDomRef.current) {\n return;\n }\n const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n // If the insert point is close to an existing control point don't show it.\n if (controlPoints.some(({\n position\n }) => {\n return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n })) {\n if (gradientBarState.id === 'MOVING_INSERTER') {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n }\n return;\n }\n gradientBarStateDispatch({\n type: 'MOVE_INSERTER',\n insertPosition\n });\n };\n const onMouseLeave = () => {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n };\n const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n return /*#__PURE__*/_jsxs(\"div\", {\n className: clsx('components-custom-gradient-picker__gradient-bar', {\n 'has-gradient': hasGradient\n }),\n onMouseEnter: onMouseEnterAndMove,\n onMouseMove: onMouseEnterAndMove,\n onMouseLeave: onMouseLeave,\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: \"components-custom-gradient-picker__gradient-bar-background\",\n style: {\n background,\n opacity: hasGradient ? 1 : 0.4\n }\n }), /*#__PURE__*/_jsxs(\"div\", {\n ref: gradientMarkersContainerDomRef,\n className: \"components-custom-gradient-picker__markers-container\",\n children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n insertPosition: gradientBarState.insertPosition,\n value: controlPoints,\n onChange: onChange,\n onOpenInserter: () => {\n gradientBarStateDispatch({\n type: 'OPEN_INSERTER'\n });\n },\n onCloseInserter: () => {\n gradientBarStateDispatch({\n type: 'CLOSE_INSERTER'\n });\n }\n }), /*#__PURE__*/_jsx(ControlPoints, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n disableRemove: disableInserter,\n gradientPickerDomRef: gradientMarkersContainerDomRef,\n ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n value: controlPoints,\n onChange: onChange,\n onStartControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'START_CONTROL_CHANGE'\n });\n },\n onStopControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'STOP_CONTROL_CHANGE'\n });\n }\n })]\n })]\n });\n}"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst customGradientBarReducer = (state, action) => {\n switch (action.type) {\n case 'MOVE_INSERTER':\n if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {\n return {\n id: 'MOVING_INSERTER',\n insertPosition: action.insertPosition\n };\n }\n break;\n case 'STOP_INSERTER_MOVE':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'OPEN_INSERTER':\n if (state.id === 'MOVING_INSERTER') {\n return {\n id: 'INSERTING_CONTROL_POINT',\n insertPosition: state.insertPosition\n };\n }\n break;\n case 'CLOSE_INSERTER':\n if (state.id === 'INSERTING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n case 'START_CONTROL_CHANGE':\n if (state.id === 'IDLE') {\n return {\n id: 'MOVING_CONTROL_POINT'\n };\n }\n break;\n case 'STOP_CONTROL_CHANGE':\n if (state.id === 'MOVING_CONTROL_POINT') {\n return {\n id: 'IDLE'\n };\n }\n break;\n }\n return state;\n};\nconst customGradientBarReducerInitialState = {\n id: 'IDLE'\n};\nexport default function CustomGradientBar({\n background,\n hasGradient,\n value: controlPoints,\n onChange,\n disableInserter = false,\n disableAlpha = false,\n __experimentalIsRenderedInSidebar = false\n}) {\n const gradientMarkersContainerDomRef = useRef(null);\n const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);\n const onMouseEnterAndMove = event => {\n if (!gradientMarkersContainerDomRef.current) {\n return;\n }\n const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);\n\n // If the insert point is close to an existing control point don't show it.\n if (controlPoints.some(({\n position\n }) => {\n return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\n })) {\n if (gradientBarState.id === 'MOVING_INSERTER') {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n }\n return;\n }\n gradientBarStateDispatch({\n type: 'MOVE_INSERTER',\n insertPosition\n });\n };\n const onMouseLeave = () => {\n gradientBarStateDispatch({\n type: 'STOP_INSERTER_MOVE'\n });\n };\n const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';\n return /*#__PURE__*/_jsxs(\"div\", {\n className: clsx('components-custom-gradient-picker__gradient-bar', {\n 'has-gradient': hasGradient\n }),\n onMouseEnter: onMouseEnterAndMove,\n onMouseMove: onMouseEnterAndMove,\n onMouseLeave: onMouseLeave,\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: \"components-custom-gradient-picker__gradient-bar-background\",\n style: {\n background,\n opacity: hasGradient ? 1 : 0.4\n }\n }), /*#__PURE__*/_jsxs(\"div\", {\n ref: gradientMarkersContainerDomRef,\n className: \"components-custom-gradient-picker__markers-container\",\n children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/_jsx(ControlPoints.InsertPoint, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n insertPosition: gradientBarState.insertPosition,\n value: controlPoints,\n onChange: onChange,\n onOpenInserter: () => {\n gradientBarStateDispatch({\n type: 'OPEN_INSERTER'\n });\n },\n onCloseInserter: () => {\n gradientBarStateDispatch({\n type: 'CLOSE_INSERTER'\n });\n }\n }), /*#__PURE__*/_jsx(ControlPoints, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: disableAlpha,\n disableRemove: disableInserter,\n gradientPickerDomRef: gradientMarkersContainerDomRef,\n ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,\n value: controlPoints,\n onChange: onChange,\n onStartControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'START_CONTROL_CHANGE'\n });\n },\n onStopControlPointChange: () => {\n gradientBarStateDispatch({\n type: 'STOP_CONTROL_CHANGE'\n });\n }\n })]\n })]\n });\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,7 +82,7 @@ function registerStyle(hash, css) {
|
|
|
82
82
|
|
|
83
83
|
// packages/components/src/draggable/style.module.scss
|
|
84
84
|
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
85
|
-
registerStyle("
|
|
85
|
+
registerStyle("e7e88c1781", "._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}");
|
|
86
86
|
}
|
|
87
87
|
var style_module_default = { "invisible-drag-image": "_3476c2e530687f96__invisible-drag-image", "clone": "_6f00e51ab7574306__clone", "is-in-compat-slot": "_664ecd37377558df__is-in-compat-slot" };
|
|
88
88
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/draggable/index.tsx", "../../../style-runtime/src/index.ts", "../../src/draggable/style.module.scss"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\n\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class \u2014 shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n * <div id=\"draggable-panel\">\n * <Panel header=\"Draggable panel\">\n * <PanelBody>\n * <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n * { ( { onDraggableStart, onDraggableEnd } ) => (\n * <div\n * className=\"example-drag-handle\"\n * draggable\n * onDragStart={ onDraggableStart }\n * onDragEnd={ onDraggableEnd }\n * >\n * <Icon icon={ more } />\n * </div>\n * ) }\n * </Draggable>\n * </PanelBody>\n * </Panel>\n * </div>\n * );\n * ```\n */\nexport function Draggable({\n children,\n onDragStart,\n onDragOver,\n onDragEnd,\n appendToOwnerDocument = false,\n cloneClassname,\n elementId,\n transferData,\n __experimentalTransferDataType: transferDataType = 'text',\n __experimentalDragComponent: dragComponent\n}) {\n const dragComponentRef = useRef(null);\n const cleanupRef = useRef(() => {});\n\n /**\n * Removes the element clone, resets cursor, and removes drag listener.\n *\n * @param event The non-custom DragEvent.\n */\n function end(event) {\n event.preventDefault();\n cleanupRef.current();\n if (onDragEnd) {\n onDragEnd(event);\n }\n }\n\n /**\n * This method does a couple of things:\n *\n * - Clones the current element and spawns clone over original element.\n * - Adds a fake temporary drag image to avoid browser defaults.\n * - Sets transfer data.\n * - Adds dragover listener.\n *\n * @param event The non-custom DragEvent.\n */\n function start(event) {\n const {\n ownerDocument\n } = event.target;\n // Only use the slot when it lives in the same document as the\n // dragged element, so coordinate resolution stays in one space.\n const slot = getWpCompatOverlaySlot();\n const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n const cloneWrapper = ownerDocument.createElement('div');\n // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n cloneWrapper.style.top = '0';\n cloneWrapper.style.left = '0';\n const dragImage = ownerDocument.createElement('div');\n\n // Set a fake drag image to avoid browser defaults. Remove from DOM\n // right after. event.dataTransfer.setDragImage is not supported yet in\n // IE, we need to check for its existence first.\n if ('function' === typeof event.dataTransfer.setDragImage) {\n dragImage.classList.add(...dragImageClasses);\n // Invisible \u2014 stays at the document body, no slot needed.\n ownerDocument.body.appendChild(dragImage);\n event.dataTransfer.setDragImage(dragImage, 0, 0);\n }\n cloneWrapper.classList.add(...cloneWrapperClasses);\n const inSlotClass = styles['is-in-compat-slot'];\n if (compatSlot && inSlotClass) {\n cloneWrapper.classList.add(inSlotClass);\n }\n if (cloneClassname) {\n cloneWrapper.classList.add(cloneClassname);\n }\n let x = 0;\n let y = 0;\n // If a dragComponent is defined, the following logic will clone the\n // HTML node and inject it into the cloneWrapper.\n if (dragComponentRef.current) {\n // Position dragComponent at the same position as the cursor.\n x = event.clientX;\n y = event.clientY;\n cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n const clonedDragComponent = ownerDocument.createElement('div');\n clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n cloneWrapper.appendChild(clonedDragComponent);\n (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n } else {\n const element = ownerDocument.getElementById(elementId);\n\n // Prepare element clone and append to element wrapper.\n const elementRect = element.getBoundingClientRect();\n const elementWrapper = element.parentNode;\n const elementTopOffset = elementRect.top;\n const elementLeftOffset = elementRect.left;\n cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n const clone = element.cloneNode(true);\n clone.id = `clone-${elementId}`;\n\n // Position clone right over the original element (20px padding).\n x = elementLeftOffset - clonePadding;\n y = elementTopOffset - clonePadding;\n cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n cloneWrapper.appendChild(clone);\n if (compatSlot) {\n compatSlot.appendChild(cloneWrapper);\n } else if (appendToOwnerDocument) {\n ownerDocument.body.appendChild(cloneWrapper);\n } else {\n elementWrapper?.appendChild(cloneWrapper);\n }\n }\n\n // Mark the current cursor coordinates.\n let cursorLeft = event.clientX;\n let cursorTop = event.clientY;\n function over(e) {\n // Skip doing any work if mouse has not moved.\n if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n return;\n }\n const nextX = x + e.clientX - cursorLeft;\n const nextY = y + e.clientY - cursorTop;\n cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n cursorLeft = e.clientX;\n cursorTop = e.clientY;\n x = nextX;\n y = nextY;\n if (onDragOver) {\n onDragOver(e);\n }\n }\n\n // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n // note that browsers may throttle raf below 60fps in certain conditions.\n // @ts-ignore\n const throttledDragOver = throttle(over, 16);\n ownerDocument.addEventListener('dragover', throttledDragOver);\n\n // Update cursor to 'grabbing', document wide.\n ownerDocument.body.classList.add(bodyClass);\n if (onDragStart) {\n onDragStart(event);\n }\n cleanupRef.current = () => {\n // Remove drag clone.\n if (cloneWrapper && cloneWrapper.parentNode) {\n cloneWrapper.parentNode.removeChild(cloneWrapper);\n }\n if (dragImage && dragImage.parentNode) {\n dragImage.parentNode.removeChild(dragImage);\n }\n\n // Reset cursor.\n ownerDocument.body.classList.remove(bodyClass);\n ownerDocument.removeEventListener('dragover', throttledDragOver);\n };\n }\n useEffect(() => () => {\n cleanupRef.current();\n }, []);\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [children({\n onDraggableStart: start,\n onDraggableEnd: end\n }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n className: \"components-draggable-drag-component-root\",\n style: {\n display: 'none'\n },\n ref: dragComponentRef,\n children: dragComponent\n })]\n });\n}\nexport default Draggable;", "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(\"f8d1257e92\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:#0000;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
|
|
5
|
-
"mappings": ";AAOA,SAAS,gBAAgB;AACzB,SAAS,WAAW,cAAc;AAClC,SAAS,8BAA8B;;;ACTvC,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 */\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\n\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class \u2014 shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n * <div id=\"draggable-panel\">\n * <Panel header=\"Draggable panel\">\n * <PanelBody>\n * <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n * { ( { onDraggableStart, onDraggableEnd } ) => (\n * <div\n * className=\"example-drag-handle\"\n * draggable\n * onDragStart={ onDraggableStart }\n * onDragEnd={ onDraggableEnd }\n * >\n * <Icon icon={ more } />\n * </div>\n * ) }\n * </Draggable>\n * </PanelBody>\n * </Panel>\n * </div>\n * );\n * ```\n */\nexport function Draggable({\n children,\n onDragStart,\n onDragOver,\n onDragEnd,\n appendToOwnerDocument = false,\n cloneClassname,\n elementId,\n transferData,\n __experimentalTransferDataType: transferDataType = 'text',\n __experimentalDragComponent: dragComponent\n}) {\n const dragComponentRef = useRef(null);\n const cleanupRef = useRef(() => {});\n\n /**\n * Removes the element clone, resets cursor, and removes drag listener.\n *\n * @param event The non-custom DragEvent.\n */\n function end(event) {\n event.preventDefault();\n cleanupRef.current();\n if (onDragEnd) {\n onDragEnd(event);\n }\n }\n\n /**\n * This method does a couple of things:\n *\n * - Clones the current element and spawns clone over original element.\n * - Adds a fake temporary drag image to avoid browser defaults.\n * - Sets transfer data.\n * - Adds dragover listener.\n *\n * @param event The non-custom DragEvent.\n */\n function start(event) {\n const {\n ownerDocument\n } = event.target;\n // Only use the slot when it lives in the same document as the\n // dragged element, so coordinate resolution stays in one space.\n const slot = getWpCompatOverlaySlot();\n const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n const cloneWrapper = ownerDocument.createElement('div');\n // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n cloneWrapper.style.top = '0';\n cloneWrapper.style.left = '0';\n const dragImage = ownerDocument.createElement('div');\n\n // Set a fake drag image to avoid browser defaults. Remove from DOM\n // right after. event.dataTransfer.setDragImage is not supported yet in\n // IE, we need to check for its existence first.\n if ('function' === typeof event.dataTransfer.setDragImage) {\n dragImage.classList.add(...dragImageClasses);\n // Invisible \u2014 stays at the document body, no slot needed.\n ownerDocument.body.appendChild(dragImage);\n event.dataTransfer.setDragImage(dragImage, 0, 0);\n }\n cloneWrapper.classList.add(...cloneWrapperClasses);\n const inSlotClass = styles['is-in-compat-slot'];\n if (compatSlot && inSlotClass) {\n cloneWrapper.classList.add(inSlotClass);\n }\n if (cloneClassname) {\n cloneWrapper.classList.add(cloneClassname);\n }\n let x = 0;\n let y = 0;\n // If a dragComponent is defined, the following logic will clone the\n // HTML node and inject it into the cloneWrapper.\n if (dragComponentRef.current) {\n // Position dragComponent at the same position as the cursor.\n x = event.clientX;\n y = event.clientY;\n cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n const clonedDragComponent = ownerDocument.createElement('div');\n clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n cloneWrapper.appendChild(clonedDragComponent);\n (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n } else {\n const element = ownerDocument.getElementById(elementId);\n\n // Prepare element clone and append to element wrapper.\n const elementRect = element.getBoundingClientRect();\n const elementWrapper = element.parentNode;\n const elementTopOffset = elementRect.top;\n const elementLeftOffset = elementRect.left;\n cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n const clone = element.cloneNode(true);\n clone.id = `clone-${elementId}`;\n\n // Position clone right over the original element (20px padding).\n x = elementLeftOffset - clonePadding;\n y = elementTopOffset - clonePadding;\n cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n cloneWrapper.appendChild(clone);\n if (compatSlot) {\n compatSlot.appendChild(cloneWrapper);\n } else if (appendToOwnerDocument) {\n ownerDocument.body.appendChild(cloneWrapper);\n } else {\n elementWrapper?.appendChild(cloneWrapper);\n }\n }\n\n // Mark the current cursor coordinates.\n let cursorLeft = event.clientX;\n let cursorTop = event.clientY;\n function over(e) {\n // Skip doing any work if mouse has not moved.\n if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n return;\n }\n const nextX = x + e.clientX - cursorLeft;\n const nextY = y + e.clientY - cursorTop;\n cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n cursorLeft = e.clientX;\n cursorTop = e.clientY;\n x = nextX;\n y = nextY;\n if (onDragOver) {\n onDragOver(e);\n }\n }\n\n // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n // note that browsers may throttle raf below 60fps in certain conditions.\n // @ts-ignore\n const throttledDragOver = throttle(over, 16);\n ownerDocument.addEventListener('dragover', throttledDragOver);\n\n // Update cursor to 'grabbing', document wide.\n ownerDocument.body.classList.add(bodyClass);\n if (onDragStart) {\n onDragStart(event);\n }\n cleanupRef.current = () => {\n // Remove drag clone.\n if (cloneWrapper && cloneWrapper.parentNode) {\n cloneWrapper.parentNode.removeChild(cloneWrapper);\n }\n if (dragImage && dragImage.parentNode) {\n dragImage.parentNode.removeChild(dragImage);\n }\n\n // Reset cursor.\n ownerDocument.body.classList.remove(bodyClass);\n ownerDocument.removeEventListener('dragover', throttledDragOver);\n };\n }\n useEffect(() => () => {\n cleanupRef.current();\n }, []);\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [children({\n onDraggableStart: start,\n onDraggableEnd: end\n }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n className: \"components-draggable-drag-component-root\",\n style: {\n display: 'none'\n },\n ref: dragComponentRef,\n children: dragComponent\n })]\n });\n}\nexport default Draggable;", "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(\"e7e88c1781\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// packages/components/src/navigable-container/container.tsx
|
|
2
|
-
import { forwardRef, useRef, useEffect
|
|
2
|
+
import { forwardRef, useRef, useEffect } from "@wordpress/element";
|
|
3
3
|
import { useMergeRefs } from "@wordpress/compose";
|
|
4
4
|
import { focus } from "@wordpress/dom";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -15,6 +15,19 @@ function cycleValue(value, total, offset) {
|
|
|
15
15
|
}
|
|
16
16
|
return nextValue;
|
|
17
17
|
}
|
|
18
|
+
function getFocusableContext(container, target, tabbableOnly) {
|
|
19
|
+
const finder = tabbableOnly ? focus.tabbable : focus.focusable;
|
|
20
|
+
const focusables = finder.find(container);
|
|
21
|
+
const index = focusables.indexOf(target);
|
|
22
|
+
if (index > -1) {
|
|
23
|
+
return {
|
|
24
|
+
index,
|
|
25
|
+
target,
|
|
26
|
+
focusables
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
18
31
|
function UnforwardedNavigableContainer({
|
|
19
32
|
children,
|
|
20
33
|
stopNavigationEvents,
|
|
@@ -26,25 +39,6 @@ function UnforwardedNavigableContainer({
|
|
|
26
39
|
...restProps
|
|
27
40
|
}, ref) {
|
|
28
41
|
const containerRef = useRef(null);
|
|
29
|
-
const getFocusableIndex = useCallback((focusables, target) => {
|
|
30
|
-
return focusables.indexOf(target);
|
|
31
|
-
}, []);
|
|
32
|
-
const getFocusableContext = useCallback((target) => {
|
|
33
|
-
if (!containerRef.current) {
|
|
34
|
-
return null;
|
|
35
|
-
}
|
|
36
|
-
const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
|
|
37
|
-
const focusables = finder.find(containerRef.current);
|
|
38
|
-
const index = getFocusableIndex(focusables, target);
|
|
39
|
-
if (index > -1 && target) {
|
|
40
|
-
return {
|
|
41
|
-
index,
|
|
42
|
-
target,
|
|
43
|
-
focusables
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
return null;
|
|
47
|
-
}, [onlyBrowserTabstops, getFocusableIndex]);
|
|
48
42
|
useEffect(() => {
|
|
49
43
|
const container = containerRef.current;
|
|
50
44
|
if (!container) {
|
|
@@ -70,7 +64,7 @@ function UnforwardedNavigableContainer({
|
|
|
70
64
|
if (!activeElement) {
|
|
71
65
|
return;
|
|
72
66
|
}
|
|
73
|
-
const context = getFocusableContext(activeElement);
|
|
67
|
+
const context = getFocusableContext(container, activeElement, !!onlyBrowserTabstops);
|
|
74
68
|
if (!context) {
|
|
75
69
|
return;
|
|
76
70
|
}
|
|
@@ -91,7 +85,7 @@ function UnforwardedNavigableContainer({
|
|
|
91
85
|
return () => {
|
|
92
86
|
container.removeEventListener("keydown", handleKeyDown);
|
|
93
87
|
};
|
|
94
|
-
}, [onKeyDown, eventToOffset, stopNavigationEvents, cycle, onNavigate,
|
|
88
|
+
}, [onKeyDown, eventToOffset, stopNavigationEvents, cycle, onNavigate, onlyBrowserTabstops]);
|
|
95
89
|
const mergedRef = useMergeRefs([containerRef, ref]);
|
|
96
90
|
return /* @__PURE__ */ _jsx("div", {
|
|
97
91
|
ref: mergedRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/navigable-container/container.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect
|
|
5
|
-
"mappings": ";AAOA,SAAS,YAAY,QAAQ,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox'];\nfunction cycleValue(value, total, offset) {\n const nextValue = value + offset;\n if (nextValue < 0) {\n return total + nextValue;\n } else if (nextValue >= total) {\n return nextValue - total;\n }\n return nextValue;\n}\nfunction getFocusableContext(container, target, tabbableOnly) {\n const finder = tabbableOnly ? focus.tabbable : focus.focusable;\n const focusables = finder.find(container);\n const index = focusables.indexOf(target);\n if (index > -1) {\n return {\n index,\n target,\n focusables\n };\n }\n return null;\n}\nfunction UnforwardedNavigableContainer({\n children,\n stopNavigationEvents,\n eventToOffset,\n onNavigate = noop,\n onKeyDown,\n cycle = true,\n onlyBrowserTabstops,\n ...restProps\n}, ref) {\n const containerRef = useRef(null);\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n function handleKeyDown(event) {\n if (onKeyDown) {\n onKeyDown(event);\n }\n const offset = eventToOffset(event);\n\n // eventToOffset returns undefined if the event is not handled by the component.\n if (offset !== undefined && stopNavigationEvents) {\n // Prevents arrow key handlers bound to the document directly interfering.\n event.stopImmediatePropagation();\n\n // When navigating a collection of items, prevent scroll containers\n // from scrolling. The preventDefault also prevents Voiceover from\n // 'handling' the event, as voiceover will try to use arrow keys\n // for highlighting text.\n const targetRole = event.target?.getAttribute('role');\n const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);\n if (targetHasMenuItemRole) {\n event.preventDefault();\n }\n }\n if (!offset) {\n return;\n }\n const activeElement = event.target?.ownerDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n const context = getFocusableContext(container, activeElement, !!onlyBrowserTabstops);\n if (!context) {\n return;\n }\n const {\n index,\n focusables\n } = context;\n const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset;\n if (nextIndex >= 0 && nextIndex < focusables.length) {\n focusables[nextIndex].focus();\n onNavigate(nextIndex, focusables[nextIndex]);\n\n // `preventDefault()` on tab to avoid having the browser move the focus\n // after this component has already moved it.\n if (event.code === 'Tab') {\n event.preventDefault();\n }\n }\n }\n\n // We use DOM event listeners instead of React event listeners\n // because we want to catch events from the underlying DOM tree.\n // The React Tree can be different from the DOM tree when using\n // portals. Block Toolbars for instance are rendered in a separate\n // React Trees.\n container.addEventListener('keydown', handleKeyDown);\n return () => {\n container.removeEventListener('keydown', handleKeyDown);\n };\n }, [onKeyDown, eventToOffset, stopNavigationEvents, cycle, onNavigate, onlyBrowserTabstops]);\n const mergedRef = useMergeRefs([containerRef, ref]);\n return /*#__PURE__*/_jsx(\"div\", {\n ref: mergedRef,\n ...restProps,\n children: children\n });\n}\nconst NavigableContainer = forwardRef(UnforwardedNavigableContainer);\nNavigableContainer.displayName = 'NavigableContainer';\nexport default NavigableContainer;"],
|
|
5
|
+
"mappings": ";AAOA,SAAS,YAAY,QAAQ,iBAAiB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAKtB,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,IAAM,kBAAkB,CAAC,YAAY,iBAAiB,kBAAkB;AACxE,SAAS,WAAW,OAAO,OAAO,QAAQ;AACxC,QAAM,YAAY,QAAQ;AAC1B,MAAI,YAAY,GAAG;AACjB,WAAO,QAAQ;AAAA,EACjB,WAAW,aAAa,OAAO;AAC7B,WAAO,YAAY;AAAA,EACrB;AACA,SAAO;AACT;AACA,SAAS,oBAAoB,WAAW,QAAQ,cAAc;AAC5D,QAAM,SAAS,eAAe,MAAM,WAAW,MAAM;AACrD,QAAM,aAAa,OAAO,KAAK,SAAS;AACxC,QAAM,QAAQ,WAAW,QAAQ,MAAM;AACvC,MAAI,QAAQ,IAAI;AACd,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AACA,SAAS,8BAA8B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,eAAe,OAAO,IAAI;AAChC,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,aAAS,cAAc,OAAO;AAC5B,UAAI,WAAW;AACb,kBAAU,KAAK;AAAA,MACjB;AACA,YAAM,SAAS,cAAc,KAAK;AAGlC,UAAI,WAAW,UAAa,sBAAsB;AAEhD,cAAM,yBAAyB;AAM/B,cAAM,aAAa,MAAM,QAAQ,aAAa,MAAM;AACpD,cAAM,wBAAwB,CAAC,CAAC,cAAc,gBAAgB,SAAS,UAAU;AACjF,YAAI,uBAAuB;AACzB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AACA,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,QAAQ,eAAe;AACnD,UAAI,CAAC,eAAe;AAClB;AAAA,MACF;AACA,YAAM,UAAU,oBAAoB,WAAW,eAAe,CAAC,CAAC,mBAAmB;AACnF,UAAI,CAAC,SAAS;AACZ;AAAA,MACF;AACA,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI;AACJ,YAAM,YAAY,QAAQ,WAAW,OAAO,WAAW,QAAQ,MAAM,IAAI,QAAQ;AACjF,UAAI,aAAa,KAAK,YAAY,WAAW,QAAQ;AACnD,mBAAW,SAAS,EAAE,MAAM;AAC5B,mBAAW,WAAW,WAAW,SAAS,CAAC;AAI3C,YAAI,MAAM,SAAS,OAAO;AACxB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAOA,cAAU,iBAAiB,WAAW,aAAa;AACnD,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,aAAa;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,eAAe,sBAAsB,OAAO,YAAY,mBAAmB,CAAC;AAC3F,QAAM,YAAY,aAAa,CAAC,cAAc,GAAG,CAAC;AAClD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,6BAA6B;AACnE,mBAAmB,cAAc;AACjC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,203 +1,201 @@
|
|
|
1
1
|
// packages/components/src/unit-control/utils.ts
|
|
2
2
|
import { __, _x } from "@wordpress/i18n";
|
|
3
|
-
import { Platform } from "@wordpress/element";
|
|
4
|
-
var isWeb = Platform.OS === "web";
|
|
5
3
|
var allUnits = {
|
|
6
4
|
px: {
|
|
7
5
|
value: "px",
|
|
8
|
-
label:
|
|
6
|
+
label: "px",
|
|
9
7
|
a11yLabel: __("Pixels (px)"),
|
|
10
8
|
step: 1
|
|
11
9
|
},
|
|
12
10
|
"%": {
|
|
13
11
|
value: "%",
|
|
14
|
-
label:
|
|
12
|
+
label: "%",
|
|
15
13
|
a11yLabel: __("Percent (%)"),
|
|
16
14
|
step: 0.1
|
|
17
15
|
},
|
|
18
16
|
em: {
|
|
19
17
|
value: "em",
|
|
20
|
-
label:
|
|
18
|
+
label: "em",
|
|
21
19
|
a11yLabel: _x("ems", "Relative to parent font size (em)"),
|
|
22
20
|
step: 0.01
|
|
23
21
|
},
|
|
24
22
|
rem: {
|
|
25
23
|
value: "rem",
|
|
26
|
-
label:
|
|
24
|
+
label: "rem",
|
|
27
25
|
a11yLabel: _x("rems", "Relative to root font size (rem)"),
|
|
28
26
|
step: 0.01
|
|
29
27
|
},
|
|
30
28
|
vw: {
|
|
31
29
|
value: "vw",
|
|
32
|
-
label:
|
|
30
|
+
label: "vw",
|
|
33
31
|
a11yLabel: __("Viewport width (vw)"),
|
|
34
32
|
step: 0.1
|
|
35
33
|
},
|
|
36
34
|
vh: {
|
|
37
35
|
value: "vh",
|
|
38
|
-
label:
|
|
36
|
+
label: "vh",
|
|
39
37
|
a11yLabel: __("Viewport height (vh)"),
|
|
40
38
|
step: 0.1
|
|
41
39
|
},
|
|
42
40
|
vmin: {
|
|
43
41
|
value: "vmin",
|
|
44
|
-
label:
|
|
42
|
+
label: "vmin",
|
|
45
43
|
a11yLabel: __("Viewport smallest dimension (vmin)"),
|
|
46
44
|
step: 0.1
|
|
47
45
|
},
|
|
48
46
|
vmax: {
|
|
49
47
|
value: "vmax",
|
|
50
|
-
label:
|
|
48
|
+
label: "vmax",
|
|
51
49
|
a11yLabel: __("Viewport largest dimension (vmax)"),
|
|
52
50
|
step: 0.1
|
|
53
51
|
},
|
|
54
52
|
ch: {
|
|
55
53
|
value: "ch",
|
|
56
|
-
label:
|
|
54
|
+
label: "ch",
|
|
57
55
|
a11yLabel: __("Width of the zero (0) character (ch)"),
|
|
58
56
|
step: 0.01
|
|
59
57
|
},
|
|
60
58
|
ex: {
|
|
61
59
|
value: "ex",
|
|
62
|
-
label:
|
|
60
|
+
label: "ex",
|
|
63
61
|
a11yLabel: __("x-height of the font (ex)"),
|
|
64
62
|
step: 0.01
|
|
65
63
|
},
|
|
66
64
|
cm: {
|
|
67
65
|
value: "cm",
|
|
68
|
-
label:
|
|
66
|
+
label: "cm",
|
|
69
67
|
a11yLabel: __("Centimeters (cm)"),
|
|
70
68
|
step: 1e-3
|
|
71
69
|
},
|
|
72
70
|
mm: {
|
|
73
71
|
value: "mm",
|
|
74
|
-
label:
|
|
72
|
+
label: "mm",
|
|
75
73
|
a11yLabel: __("Millimeters (mm)"),
|
|
76
74
|
step: 0.1
|
|
77
75
|
},
|
|
78
76
|
in: {
|
|
79
77
|
value: "in",
|
|
80
|
-
label:
|
|
78
|
+
label: "in",
|
|
81
79
|
a11yLabel: __("Inches (in)"),
|
|
82
80
|
step: 1e-3
|
|
83
81
|
},
|
|
84
82
|
pc: {
|
|
85
83
|
value: "pc",
|
|
86
|
-
label:
|
|
84
|
+
label: "pc",
|
|
87
85
|
a11yLabel: __("Picas (pc)"),
|
|
88
86
|
step: 1
|
|
89
87
|
},
|
|
90
88
|
pt: {
|
|
91
89
|
value: "pt",
|
|
92
|
-
label:
|
|
90
|
+
label: "pt",
|
|
93
91
|
a11yLabel: __("Points (pt)"),
|
|
94
92
|
step: 1
|
|
95
93
|
},
|
|
96
94
|
svw: {
|
|
97
95
|
value: "svw",
|
|
98
|
-
label:
|
|
96
|
+
label: "svw",
|
|
99
97
|
a11yLabel: __("Small viewport width (svw)"),
|
|
100
98
|
step: 0.1
|
|
101
99
|
},
|
|
102
100
|
svh: {
|
|
103
101
|
value: "svh",
|
|
104
|
-
label:
|
|
102
|
+
label: "svh",
|
|
105
103
|
a11yLabel: __("Small viewport height (svh)"),
|
|
106
104
|
step: 0.1
|
|
107
105
|
},
|
|
108
106
|
svi: {
|
|
109
107
|
value: "svi",
|
|
110
|
-
label:
|
|
108
|
+
label: "svi",
|
|
111
109
|
a11yLabel: __("Small viewport width or height (svi)"),
|
|
112
110
|
step: 0.1
|
|
113
111
|
},
|
|
114
112
|
svb: {
|
|
115
113
|
value: "svb",
|
|
116
|
-
label:
|
|
114
|
+
label: "svb",
|
|
117
115
|
a11yLabel: __("Small viewport width or height (svb)"),
|
|
118
116
|
step: 0.1
|
|
119
117
|
},
|
|
120
118
|
svmin: {
|
|
121
119
|
value: "svmin",
|
|
122
|
-
label:
|
|
120
|
+
label: "svmin",
|
|
123
121
|
a11yLabel: __("Small viewport smallest dimension (svmin)"),
|
|
124
122
|
step: 0.1
|
|
125
123
|
},
|
|
126
124
|
lvw: {
|
|
127
125
|
value: "lvw",
|
|
128
|
-
label:
|
|
126
|
+
label: "lvw",
|
|
129
127
|
a11yLabel: __("Large viewport width (lvw)"),
|
|
130
128
|
step: 0.1
|
|
131
129
|
},
|
|
132
130
|
lvh: {
|
|
133
131
|
value: "lvh",
|
|
134
|
-
label:
|
|
132
|
+
label: "lvh",
|
|
135
133
|
a11yLabel: __("Large viewport height (lvh)"),
|
|
136
134
|
step: 0.1
|
|
137
135
|
},
|
|
138
136
|
lvi: {
|
|
139
137
|
value: "lvi",
|
|
140
|
-
label:
|
|
138
|
+
label: "lvi",
|
|
141
139
|
a11yLabel: __("Large viewport width or height (lvi)"),
|
|
142
140
|
step: 0.1
|
|
143
141
|
},
|
|
144
142
|
lvb: {
|
|
145
143
|
value: "lvb",
|
|
146
|
-
label:
|
|
144
|
+
label: "lvb",
|
|
147
145
|
a11yLabel: __("Large viewport width or height (lvb)"),
|
|
148
146
|
step: 0.1
|
|
149
147
|
},
|
|
150
148
|
lvmin: {
|
|
151
149
|
value: "lvmin",
|
|
152
|
-
label:
|
|
150
|
+
label: "lvmin",
|
|
153
151
|
a11yLabel: __("Large viewport smallest dimension (lvmin)"),
|
|
154
152
|
step: 0.1
|
|
155
153
|
},
|
|
156
154
|
dvw: {
|
|
157
155
|
value: "dvw",
|
|
158
|
-
label:
|
|
156
|
+
label: "dvw",
|
|
159
157
|
a11yLabel: __("Dynamic viewport width (dvw)"),
|
|
160
158
|
step: 0.1
|
|
161
159
|
},
|
|
162
160
|
dvh: {
|
|
163
161
|
value: "dvh",
|
|
164
|
-
label:
|
|
162
|
+
label: "dvh",
|
|
165
163
|
a11yLabel: __("Dynamic viewport height (dvh)"),
|
|
166
164
|
step: 0.1
|
|
167
165
|
},
|
|
168
166
|
dvi: {
|
|
169
167
|
value: "dvi",
|
|
170
|
-
label:
|
|
168
|
+
label: "dvi",
|
|
171
169
|
a11yLabel: __("Dynamic viewport width or height (dvi)"),
|
|
172
170
|
step: 0.1
|
|
173
171
|
},
|
|
174
172
|
dvb: {
|
|
175
173
|
value: "dvb",
|
|
176
|
-
label:
|
|
174
|
+
label: "dvb",
|
|
177
175
|
a11yLabel: __("Dynamic viewport width or height (dvb)"),
|
|
178
176
|
step: 0.1
|
|
179
177
|
},
|
|
180
178
|
dvmin: {
|
|
181
179
|
value: "dvmin",
|
|
182
|
-
label:
|
|
180
|
+
label: "dvmin",
|
|
183
181
|
a11yLabel: __("Dynamic viewport smallest dimension (dvmin)"),
|
|
184
182
|
step: 0.1
|
|
185
183
|
},
|
|
186
184
|
dvmax: {
|
|
187
185
|
value: "dvmax",
|
|
188
|
-
label:
|
|
186
|
+
label: "dvmax",
|
|
189
187
|
a11yLabel: __("Dynamic viewport largest dimension (dvmax)"),
|
|
190
188
|
step: 0.1
|
|
191
189
|
},
|
|
192
190
|
svmax: {
|
|
193
191
|
value: "svmax",
|
|
194
|
-
label:
|
|
192
|
+
label: "svmax",
|
|
195
193
|
a11yLabel: __("Small viewport largest dimension (svmax)"),
|
|
196
194
|
step: 0.1
|
|
197
195
|
},
|
|
198
196
|
lvmax: {
|
|
199
197
|
value: "lvmax",
|
|
200
|
-
label:
|
|
198
|
+
label: "lvmax",
|
|
201
199
|
a11yLabel: __("Large viewport largest dimension (lvmax)"),
|
|
202
200
|
step: 0.1
|
|
203
201
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/unit-control/utils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nconst isWeb = Platform.OS === 'web';\nconst allUnits = {\n px: {\n value: 'px',\n label: isWeb ? 'px' : __('Pixels (px)'),\n a11yLabel: __('Pixels (px)'),\n step: 1\n },\n '%': {\n value: '%',\n label: isWeb ? '%' : __('Percentage (%)'),\n a11yLabel: __('Percent (%)'),\n step: 0.1\n },\n em: {\n value: 'em',\n label: isWeb ? 'em' : __('Relative to parent font size (em)'),\n a11yLabel: _x('ems', 'Relative to parent font size (em)'),\n step: 0.01\n },\n rem: {\n value: 'rem',\n label: isWeb ? 'rem' : __('Relative to root font size (rem)'),\n a11yLabel: _x('rems', 'Relative to root font size (rem)'),\n step: 0.01\n },\n vw: {\n value: 'vw',\n label: isWeb ? 'vw' : __('Viewport width (vw)'),\n a11yLabel: __('Viewport width (vw)'),\n step: 0.1\n },\n vh: {\n value: 'vh',\n label: isWeb ? 'vh' : __('Viewport height (vh)'),\n a11yLabel: __('Viewport height (vh)'),\n step: 0.1\n },\n vmin: {\n value: 'vmin',\n label: isWeb ? 'vmin' : __('Viewport smallest dimension (vmin)'),\n a11yLabel: __('Viewport smallest dimension (vmin)'),\n step: 0.1\n },\n vmax: {\n value: 'vmax',\n label: isWeb ? 'vmax' : __('Viewport largest dimension (vmax)'),\n a11yLabel: __('Viewport largest dimension (vmax)'),\n step: 0.1\n },\n ch: {\n value: 'ch',\n label: isWeb ? 'ch' : __('Width of the zero (0) character (ch)'),\n a11yLabel: __('Width of the zero (0) character (ch)'),\n step: 0.01\n },\n ex: {\n value: 'ex',\n label: isWeb ? 'ex' : __('x-height of the font (ex)'),\n a11yLabel: __('x-height of the font (ex)'),\n step: 0.01\n },\n cm: {\n value: 'cm',\n label: isWeb ? 'cm' : __('Centimeters (cm)'),\n a11yLabel: __('Centimeters (cm)'),\n step: 0.001\n },\n mm: {\n value: 'mm',\n label: isWeb ? 'mm' : __('Millimeters (mm)'),\n a11yLabel: __('Millimeters (mm)'),\n step: 0.1\n },\n in: {\n value: 'in',\n label: isWeb ? 'in' : __('Inches (in)'),\n a11yLabel: __('Inches (in)'),\n step: 0.001\n },\n pc: {\n value: 'pc',\n label: isWeb ? 'pc' : __('Picas (pc)'),\n a11yLabel: __('Picas (pc)'),\n step: 1\n },\n pt: {\n value: 'pt',\n label: isWeb ? 'pt' : __('Points (pt)'),\n a11yLabel: __('Points (pt)'),\n step: 1\n },\n svw: {\n value: 'svw',\n label: isWeb ? 'svw' : __('Small viewport width (svw)'),\n a11yLabel: __('Small viewport width (svw)'),\n step: 0.1\n },\n svh: {\n value: 'svh',\n label: isWeb ? 'svh' : __('Small viewport height (svh)'),\n a11yLabel: __('Small viewport height (svh)'),\n step: 0.1\n },\n svi: {\n value: 'svi',\n label: isWeb ? 'svi' : __('Viewport smallest size in the inline direction (svi)'),\n a11yLabel: __('Small viewport width or height (svi)'),\n step: 0.1\n },\n svb: {\n value: 'svb',\n label: isWeb ? 'svb' : __('Viewport smallest size in the block direction (svb)'),\n a11yLabel: __('Small viewport width or height (svb)'),\n step: 0.1\n },\n svmin: {\n value: 'svmin',\n label: isWeb ? 'svmin' : __('Small viewport smallest dimension (svmin)'),\n a11yLabel: __('Small viewport smallest dimension (svmin)'),\n step: 0.1\n },\n lvw: {\n value: 'lvw',\n label: isWeb ? 'lvw' : __('Large viewport width (lvw)'),\n a11yLabel: __('Large viewport width (lvw)'),\n step: 0.1\n },\n lvh: {\n value: 'lvh',\n label: isWeb ? 'lvh' : __('Large viewport height (lvh)'),\n a11yLabel: __('Large viewport height (lvh)'),\n step: 0.1\n },\n lvi: {\n value: 'lvi',\n label: isWeb ? 'lvi' : __('Large viewport width or height (lvi)'),\n a11yLabel: __('Large viewport width or height (lvi)'),\n step: 0.1\n },\n lvb: {\n value: 'lvb',\n label: isWeb ? 'lvb' : __('Large viewport width or height (lvb)'),\n a11yLabel: __('Large viewport width or height (lvb)'),\n step: 0.1\n },\n lvmin: {\n value: 'lvmin',\n label: isWeb ? 'lvmin' : __('Large viewport smallest dimension (lvmin)'),\n a11yLabel: __('Large viewport smallest dimension (lvmin)'),\n step: 0.1\n },\n dvw: {\n value: 'dvw',\n label: isWeb ? 'dvw' : __('Dynamic viewport width (dvw)'),\n a11yLabel: __('Dynamic viewport width (dvw)'),\n step: 0.1\n },\n dvh: {\n value: 'dvh',\n label: isWeb ? 'dvh' : __('Dynamic viewport height (dvh)'),\n a11yLabel: __('Dynamic viewport height (dvh)'),\n step: 0.1\n },\n dvi: {\n value: 'dvi',\n label: isWeb ? 'dvi' : __('Dynamic viewport width or height (dvi)'),\n a11yLabel: __('Dynamic viewport width or height (dvi)'),\n step: 0.1\n },\n dvb: {\n value: 'dvb',\n label: isWeb ? 'dvb' : __('Dynamic viewport width or height (dvb)'),\n a11yLabel: __('Dynamic viewport width or height (dvb)'),\n step: 0.1\n },\n dvmin: {\n value: 'dvmin',\n label: isWeb ? 'dvmin' : __('Dynamic viewport smallest dimension (dvmin)'),\n a11yLabel: __('Dynamic viewport smallest dimension (dvmin)'),\n step: 0.1\n },\n dvmax: {\n value: 'dvmax',\n label: isWeb ? 'dvmax' : __('Dynamic viewport largest dimension (dvmax)'),\n a11yLabel: __('Dynamic viewport largest dimension (dvmax)'),\n step: 0.1\n },\n svmax: {\n value: 'svmax',\n label: isWeb ? 'svmax' : __('Small viewport largest dimension (svmax)'),\n a11yLabel: __('Small viewport largest dimension (svmax)'),\n step: 0.1\n },\n lvmax: {\n value: 'lvmax',\n label: isWeb ? 'lvmax' : __('Large viewport largest dimension (lvmax)'),\n a11yLabel: __('Large viewport largest dimension (lvmax)'),\n step: 0.1\n }\n};\n\n/**\n * An array of all available CSS length units.\n */\nexport const ALL_CSS_UNITS = Object.values(allUnits);\n\n/**\n * Units of measurements. `a11yLabel` is used by screenreaders.\n */\nexport const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];\nexport const DEFAULT_UNIT = allUnits.px;\n\n/**\n * Handles legacy value + unit handling.\n * This component use to manage both incoming value and units separately.\n *\n * Moving forward, ideally the value should be a string that contains both\n * the value and unit, example: '10px'\n *\n * @param rawValue The raw value as a string (may or may not contain the unit)\n * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {\n const initialValue = fallbackUnit ? `${rawValue ?? ''}${fallbackUnit}` : rawValue;\n return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);\n}\n\n/**\n * Checks if units are defined.\n *\n * @param units List of units.\n * @return Whether the list actually contains any units.\n */\nexport function hasUnits(units) {\n // Although the `isArray` check shouldn't be necessary (given the signature of\n // this typed function), it's better to stay on the side of caution, since\n // this function may be called from un-typed environments.\n return Array.isArray(units) && !!units.length;\n}\n\n/**\n * Parses a quantity and unit from a raw string value, given a list of allowed\n * units and otherwise falling back to the default unit.\n *\n * @param rawValue The raw value as a string (may or may not contain the unit)\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {\n let trimmedValue;\n let quantityToReturn;\n if (typeof rawValue !== 'undefined' || rawValue === null) {\n trimmedValue = `${rawValue}`.trim();\n const parsedQuantity = parseFloat(trimmedValue);\n quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;\n }\n const unitMatch = trimmedValue?.match(/[\\d.\\-\\+]*\\s*(.*)/);\n const matchedUnit = unitMatch?.[1]?.toLowerCase();\n let unitToReturn;\n if (hasUnits(allowedUnits)) {\n const match = allowedUnits.find(item => item.value === matchedUnit);\n unitToReturn = match?.value;\n } else {\n unitToReturn = DEFAULT_UNIT.value;\n }\n return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Parses quantity and unit from a raw value. Validates parsed value, using fallback\n * value if invalid.\n *\n * @param rawValue The next value.\n * @param allowedUnits Units to derive from.\n * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.\n * @param fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The\n * unit can be `undefined` only if the unit parsed from the raw value could not be matched against\n * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of\n * `allowedUnits` is passed empty.\n */\nexport function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {\n const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);\n\n // The parsed value from `parseQuantityAndUnitFromRawValue` should now be\n // either a real number or undefined. If undefined, use the fallback value.\n const quantityToReturn = parsedQuantity ?? fallbackQuantity;\n\n // If no unit is parsed from the raw value, or if the fallback unit is not\n // defined, use the first value from the list of allowed units as fallback.\n let unitToReturn = parsedUnit || fallbackUnit;\n if (!unitToReturn && hasUnits(allowedUnits)) {\n unitToReturn = allowedUnits[0].value;\n }\n return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Takes a unit value and finds the matching accessibility label for the\n * unit abbreviation.\n *\n * @param unit Unit value (example: `px`)\n * @return a11y label for the unit abbreviation\n */\nexport function getAccessibleLabelForUnit(unit) {\n const match = ALL_CSS_UNITS.find(item => item.value === unit);\n return match?.a11yLabel ? match?.a11yLabel : match?.value;\n}\n\n/**\n * Filters available units based on values defined a list of allowed unit values.\n *\n * @param allowedUnitValues Collection of allowed unit value strings.\n * @param availableUnits Collection of available unit objects.\n * @return Filtered units.\n */\nexport function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {\n // Although the `isArray` check shouldn't be necessary (given the signature of\n // this typed function), it's better to stay on the side of caution, since\n // this function may be called from un-typed environments.\n return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];\n}\n\n/**\n * Custom hook to retrieve and consolidate units setting from add_theme_support().\n * TODO: ideally this hook shouldn't be needed\n * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823\n *\n * @param args An object containing units, settingPath & defaultUnits.\n * @param args.units Collection of all potentially available units.\n * @param args.availableUnits Collection of unit value strings for filtering available units.\n * @param args.defaultValues Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.\n *\n * @return Filtered list of units, with their default values updated following the `defaultValues`\n * argument's property.\n */\nexport const useCustomUnits = ({\n units = ALL_CSS_UNITS,\n availableUnits = [],\n defaultValues\n}) => {\n const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);\n if (!defaultValues) {\n return customUnitsToReturn;\n }\n return customUnitsToReturn.map(unit => {\n const [defaultValue] = defaultValues[unit.value] ? parseQuantityAndUnitFromRawValue(defaultValues[unit.value]) : [];\n return {\n ...unit,\n default: defaultValue\n };\n });\n};\n\n/**\n * Get available units with the unit for the currently selected value\n * prepended if it is not available in the list of units.\n *\n * This is useful to ensure that the current value's unit is always\n * accurately displayed in the UI, even if the intention is to hide\n * the availability of that unit.\n *\n * @param rawValue Selected value to parse.\n * @param legacyUnit Legacy unit value, if rawValue needs it appended.\n * @param units List of available units.\n *\n * @return A collection of units containing the unit for the current value.\n */\nexport function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {\n const unitsToReturn = Array.isArray(units) ? [...units] : [];\n const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);\n if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {\n if (allUnits[currentUnit]) {\n unitsToReturn.unshift(allUnits[currentUnit]);\n }\n }\n return unitsToReturn;\n}"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,IAAI,UAAU;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nconst allUnits = {\n px: {\n value: 'px',\n label: 'px',\n a11yLabel: __('Pixels (px)'),\n step: 1\n },\n '%': {\n value: '%',\n label: '%',\n a11yLabel: __('Percent (%)'),\n step: 0.1\n },\n em: {\n value: 'em',\n label: 'em',\n a11yLabel: _x('ems', 'Relative to parent font size (em)'),\n step: 0.01\n },\n rem: {\n value: 'rem',\n label: 'rem',\n a11yLabel: _x('rems', 'Relative to root font size (rem)'),\n step: 0.01\n },\n vw: {\n value: 'vw',\n label: 'vw',\n a11yLabel: __('Viewport width (vw)'),\n step: 0.1\n },\n vh: {\n value: 'vh',\n label: 'vh',\n a11yLabel: __('Viewport height (vh)'),\n step: 0.1\n },\n vmin: {\n value: 'vmin',\n label: 'vmin',\n a11yLabel: __('Viewport smallest dimension (vmin)'),\n step: 0.1\n },\n vmax: {\n value: 'vmax',\n label: 'vmax',\n a11yLabel: __('Viewport largest dimension (vmax)'),\n step: 0.1\n },\n ch: {\n value: 'ch',\n label: 'ch',\n a11yLabel: __('Width of the zero (0) character (ch)'),\n step: 0.01\n },\n ex: {\n value: 'ex',\n label: 'ex',\n a11yLabel: __('x-height of the font (ex)'),\n step: 0.01\n },\n cm: {\n value: 'cm',\n label: 'cm',\n a11yLabel: __('Centimeters (cm)'),\n step: 0.001\n },\n mm: {\n value: 'mm',\n label: 'mm',\n a11yLabel: __('Millimeters (mm)'),\n step: 0.1\n },\n in: {\n value: 'in',\n label: 'in',\n a11yLabel: __('Inches (in)'),\n step: 0.001\n },\n pc: {\n value: 'pc',\n label: 'pc',\n a11yLabel: __('Picas (pc)'),\n step: 1\n },\n pt: {\n value: 'pt',\n label: 'pt',\n a11yLabel: __('Points (pt)'),\n step: 1\n },\n svw: {\n value: 'svw',\n label: 'svw',\n a11yLabel: __('Small viewport width (svw)'),\n step: 0.1\n },\n svh: {\n value: 'svh',\n label: 'svh',\n a11yLabel: __('Small viewport height (svh)'),\n step: 0.1\n },\n svi: {\n value: 'svi',\n label: 'svi',\n a11yLabel: __('Small viewport width or height (svi)'),\n step: 0.1\n },\n svb: {\n value: 'svb',\n label: 'svb',\n a11yLabel: __('Small viewport width or height (svb)'),\n step: 0.1\n },\n svmin: {\n value: 'svmin',\n label: 'svmin',\n a11yLabel: __('Small viewport smallest dimension (svmin)'),\n step: 0.1\n },\n lvw: {\n value: 'lvw',\n label: 'lvw',\n a11yLabel: __('Large viewport width (lvw)'),\n step: 0.1\n },\n lvh: {\n value: 'lvh',\n label: 'lvh',\n a11yLabel: __('Large viewport height (lvh)'),\n step: 0.1\n },\n lvi: {\n value: 'lvi',\n label: 'lvi',\n a11yLabel: __('Large viewport width or height (lvi)'),\n step: 0.1\n },\n lvb: {\n value: 'lvb',\n label: 'lvb',\n a11yLabel: __('Large viewport width or height (lvb)'),\n step: 0.1\n },\n lvmin: {\n value: 'lvmin',\n label: 'lvmin',\n a11yLabel: __('Large viewport smallest dimension (lvmin)'),\n step: 0.1\n },\n dvw: {\n value: 'dvw',\n label: 'dvw',\n a11yLabel: __('Dynamic viewport width (dvw)'),\n step: 0.1\n },\n dvh: {\n value: 'dvh',\n label: 'dvh',\n a11yLabel: __('Dynamic viewport height (dvh)'),\n step: 0.1\n },\n dvi: {\n value: 'dvi',\n label: 'dvi',\n a11yLabel: __('Dynamic viewport width or height (dvi)'),\n step: 0.1\n },\n dvb: {\n value: 'dvb',\n label: 'dvb',\n a11yLabel: __('Dynamic viewport width or height (dvb)'),\n step: 0.1\n },\n dvmin: {\n value: 'dvmin',\n label: 'dvmin',\n a11yLabel: __('Dynamic viewport smallest dimension (dvmin)'),\n step: 0.1\n },\n dvmax: {\n value: 'dvmax',\n label: 'dvmax',\n a11yLabel: __('Dynamic viewport largest dimension (dvmax)'),\n step: 0.1\n },\n svmax: {\n value: 'svmax',\n label: 'svmax',\n a11yLabel: __('Small viewport largest dimension (svmax)'),\n step: 0.1\n },\n lvmax: {\n value: 'lvmax',\n label: 'lvmax',\n a11yLabel: __('Large viewport largest dimension (lvmax)'),\n step: 0.1\n }\n};\n\n/**\n * An array of all available CSS length units.\n */\nexport const ALL_CSS_UNITS = Object.values(allUnits);\n\n/**\n * Units of measurements. `a11yLabel` is used by screenreaders.\n */\nexport const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];\nexport const DEFAULT_UNIT = allUnits.px;\n\n/**\n * Handles legacy value + unit handling.\n * This component use to manage both incoming value and units separately.\n *\n * Moving forward, ideally the value should be a string that contains both\n * the value and unit, example: '10px'\n *\n * @param rawValue The raw value as a string (may or may not contain the unit)\n * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {\n const initialValue = fallbackUnit ? `${rawValue ?? ''}${fallbackUnit}` : rawValue;\n return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);\n}\n\n/**\n * Checks if units are defined.\n *\n * @param units List of units.\n * @return Whether the list actually contains any units.\n */\nexport function hasUnits(units) {\n // Although the `isArray` check shouldn't be necessary (given the signature of\n // this typed function), it's better to stay on the side of caution, since\n // this function may be called from un-typed environments.\n return Array.isArray(units) && !!units.length;\n}\n\n/**\n * Parses a quantity and unit from a raw string value, given a list of allowed\n * units and otherwise falling back to the default unit.\n *\n * @param rawValue The raw value as a string (may or may not contain the unit)\n * @param allowedUnits Units to derive from.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed\n * from the raw value could not be matched against the list of allowed units.\n */\nexport function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {\n let trimmedValue;\n let quantityToReturn;\n if (typeof rawValue !== 'undefined' || rawValue === null) {\n trimmedValue = `${rawValue}`.trim();\n const parsedQuantity = parseFloat(trimmedValue);\n quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;\n }\n const unitMatch = trimmedValue?.match(/[\\d.\\-\\+]*\\s*(.*)/);\n const matchedUnit = unitMatch?.[1]?.toLowerCase();\n let unitToReturn;\n if (hasUnits(allowedUnits)) {\n const match = allowedUnits.find(item => item.value === matchedUnit);\n unitToReturn = match?.value;\n } else {\n unitToReturn = DEFAULT_UNIT.value;\n }\n return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Parses quantity and unit from a raw value. Validates parsed value, using fallback\n * value if invalid.\n *\n * @param rawValue The next value.\n * @param allowedUnits Units to derive from.\n * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.\n * @param fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value.\n * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value\n * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The\n * unit can be `undefined` only if the unit parsed from the raw value could not be matched against\n * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of\n * `allowedUnits` is passed empty.\n */\nexport function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {\n const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);\n\n // The parsed value from `parseQuantityAndUnitFromRawValue` should now be\n // either a real number or undefined. If undefined, use the fallback value.\n const quantityToReturn = parsedQuantity ?? fallbackQuantity;\n\n // If no unit is parsed from the raw value, or if the fallback unit is not\n // defined, use the first value from the list of allowed units as fallback.\n let unitToReturn = parsedUnit || fallbackUnit;\n if (!unitToReturn && hasUnits(allowedUnits)) {\n unitToReturn = allowedUnits[0].value;\n }\n return [quantityToReturn, unitToReturn];\n}\n\n/**\n * Takes a unit value and finds the matching accessibility label for the\n * unit abbreviation.\n *\n * @param unit Unit value (example: `px`)\n * @return a11y label for the unit abbreviation\n */\nexport function getAccessibleLabelForUnit(unit) {\n const match = ALL_CSS_UNITS.find(item => item.value === unit);\n return match?.a11yLabel ? match?.a11yLabel : match?.value;\n}\n\n/**\n * Filters available units based on values defined a list of allowed unit values.\n *\n * @param allowedUnitValues Collection of allowed unit value strings.\n * @param availableUnits Collection of available unit objects.\n * @return Filtered units.\n */\nexport function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {\n // Although the `isArray` check shouldn't be necessary (given the signature of\n // this typed function), it's better to stay on the side of caution, since\n // this function may be called from un-typed environments.\n return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];\n}\n\n/**\n * Custom hook to retrieve and consolidate units setting from add_theme_support().\n * TODO: ideally this hook shouldn't be needed\n * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823\n *\n * @param args An object containing units, settingPath & defaultUnits.\n * @param args.units Collection of all potentially available units.\n * @param args.availableUnits Collection of unit value strings for filtering available units.\n * @param args.defaultValues Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.\n *\n * @return Filtered list of units, with their default values updated following the `defaultValues`\n * argument's property.\n */\nexport const useCustomUnits = ({\n units = ALL_CSS_UNITS,\n availableUnits = [],\n defaultValues\n}) => {\n const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);\n if (!defaultValues) {\n return customUnitsToReturn;\n }\n return customUnitsToReturn.map(unit => {\n const [defaultValue] = defaultValues[unit.value] ? parseQuantityAndUnitFromRawValue(defaultValues[unit.value]) : [];\n return {\n ...unit,\n default: defaultValue\n };\n });\n};\n\n/**\n * Get available units with the unit for the currently selected value\n * prepended if it is not available in the list of units.\n *\n * This is useful to ensure that the current value's unit is always\n * accurately displayed in the UI, even if the intention is to hide\n * the availability of that unit.\n *\n * @param rawValue Selected value to parse.\n * @param legacyUnit Legacy unit value, if rawValue needs it appended.\n * @param units List of available units.\n *\n * @return A collection of units containing the unit for the current value.\n */\nexport function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {\n const unitsToReturn = Array.isArray(units) ? [...units] : [];\n const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);\n if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {\n if (allUnits[currentUnit]) {\n unitsToReturn.unshift(allUnits[currentUnit]);\n }\n }\n return unitsToReturn;\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|