@wordpress/components 28.6.0 → 28.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +77 -0
- package/CONTRIBUTING.md +42 -19
- package/build/alignment-matrix-control/cell.js +4 -7
- package/build/alignment-matrix-control/cell.js.map +1 -1
- package/build/alignment-matrix-control/icon.js +31 -19
- package/build/alignment-matrix-control/icon.js.map +1 -1
- package/build/alignment-matrix-control/index.js +55 -51
- package/build/alignment-matrix-control/index.js.map +1 -1
- package/build/alignment-matrix-control/styles.js +73 -0
- package/build/alignment-matrix-control/styles.js.map +1 -0
- package/build/alignment-matrix-control/types.js.map +1 -1
- package/build/angle-picker-control/angle-circle.js +9 -9
- package/build/angle-picker-control/angle-circle.js.map +1 -1
- package/build/border-control/border-control/component.js +18 -13
- package/build/border-control/border-control/component.js.map +1 -1
- package/build/circular-option-picker/circular-option-picker-option.js +15 -9
- package/build/circular-option-picker/circular-option-picker-option.js.map +1 -1
- package/build/circular-option-picker/circular-option-picker.js +15 -12
- package/build/circular-option-picker/circular-option-picker.js.map +1 -1
- package/build/circular-option-picker/types.js.map +1 -1
- package/build/clipboard-button/index.js +6 -6
- package/build/clipboard-button/index.js.map +1 -1
- package/build/color-palette/utils.js +1 -2
- package/build/color-palette/utils.js.map +1 -1
- package/build/color-picker/color-copy-button.js +8 -8
- package/build/color-picker/color-copy-button.js.map +1 -1
- package/build/color-picker/hex-input.js +8 -8
- package/build/color-picker/hex-input.js.map +1 -1
- package/build/color-picker/input-with-slider.js +8 -8
- package/build/color-picker/input-with-slider.js.map +1 -1
- package/build/color-picker/styles.js +8 -8
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/types.js.map +1 -1
- package/build/composite/group-label.js +33 -0
- package/build/composite/group-label.js.map +1 -0
- package/build/composite/group.js +33 -0
- package/build/composite/group.js.map +1 -0
- package/build/composite/hover.js +33 -0
- package/build/composite/hover.js.map +1 -0
- package/build/composite/index.js +50 -96
- package/build/composite/index.js.map +1 -1
- package/build/composite/item.js +33 -0
- package/build/composite/item.js.map +1 -0
- package/build/composite/legacy/index.js +2 -1
- package/build/composite/legacy/index.js.map +1 -1
- package/build/composite/row.js +33 -0
- package/build/composite/row.js.map +1 -0
- package/build/composite/store.js +54 -0
- package/build/composite/store.js.map +1 -0
- package/build/composite/typeahead.js +33 -0
- package/build/composite/typeahead.js.map +1 -0
- package/build/composite/types.js.map +1 -1
- package/build/custom-gradient-picker/gradient-bar/control-points.js +8 -8
- package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build/custom-select-control-v2/styles.js +12 -14
- package/build/custom-select-control-v2/styles.js.map +1 -1
- package/build/date-time/date/styles.js +8 -8
- package/build/date-time/date/styles.js.map +1 -1
- package/build/date-time/time/time-input/index.js +17 -19
- package/build/date-time/time/time-input/index.js.map +1 -1
- package/build/dimension-control/index.js +6 -1
- package/build/dimension-control/index.js.map +1 -1
- package/build/draggable/index.js +4 -4
- package/build/draggable/index.js.map +1 -1
- package/build/dropdown-menu-v2/checkbox-item.js +69 -0
- package/build/dropdown-menu-v2/checkbox-item.js.map +1 -0
- package/build/dropdown-menu-v2/context.js +17 -0
- package/build/dropdown-menu-v2/context.js.map +1 -0
- package/build/dropdown-menu-v2/group-label.js +40 -0
- package/build/dropdown-menu-v2/group-label.js.map +1 -0
- package/build/dropdown-menu-v2/group.js +29 -0
- package/build/dropdown-menu-v2/group.js.map +1 -0
- package/build/dropdown-menu-v2/index.js +58 -146
- package/build/dropdown-menu-v2/index.js.map +1 -1
- package/build/dropdown-menu-v2/item-help-text.js +27 -0
- package/build/dropdown-menu-v2/item-help-text.js.map +1 -0
- package/build/dropdown-menu-v2/item-label.js +27 -0
- package/build/dropdown-menu-v2/item-label.js.map +1 -0
- package/build/dropdown-menu-v2/item.js +53 -0
- package/build/dropdown-menu-v2/item.js.map +1 -0
- package/build/dropdown-menu-v2/radio-item.js +79 -0
- package/build/dropdown-menu-v2/radio-item.js.map +1 -0
- package/build/dropdown-menu-v2/separator.js +30 -0
- package/build/dropdown-menu-v2/separator.js.map +1 -0
- package/build/dropdown-menu-v2/styles.js +54 -78
- package/build/dropdown-menu-v2/styles.js.map +1 -1
- package/build/dropdown-menu-v2/types.js.map +1 -1
- package/build/dropdown-menu-v2/use-temporary-focus-visible-fix.js +27 -0
- package/build/dropdown-menu-v2/use-temporary-focus-visible-fix.js.map +1 -0
- package/build/focal-point-picker/styles/focal-point-style.js +7 -2
- package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
- package/build/form-token-field/types.js.map +1 -1
- package/build/index.js +6 -0
- package/build/index.js.map +1 -1
- package/build/input-control/index.js +2 -2
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/input-base.js +5 -10
- package/build/input-control/input-base.js.map +1 -1
- package/build/input-control/input-prefix-wrapper.js +3 -3
- package/build/input-control/input-prefix-wrapper.js.map +1 -1
- package/build/input-control/input-suffix-wrapper.js +2 -3
- package/build/input-control/input-suffix-wrapper.js.map +1 -1
- package/build/input-control/reducer/reducer.js +8 -8
- package/build/input-control/reducer/reducer.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +75 -45
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/input-control/types.js.map +1 -1
- package/build/input-control/utils.js +3 -3
- package/build/input-control/utils.js.map +1 -1
- package/build/item-group/styles.js +10 -10
- package/build/item-group/styles.js.map +1 -1
- package/build/modal/index.js +5 -5
- package/build/modal/index.js.map +1 -1
- package/build/navigation/index.js +4 -4
- package/build/navigation/index.js.map +1 -1
- package/build/navigation/styles/navigation-styles.js +13 -13
- package/build/navigation/styles/navigation-styles.js.map +1 -1
- package/build/navigator/index.js +12 -13
- package/build/navigator/index.js.map +1 -1
- package/build/navigator/navigator-back-button/hook.js +2 -2
- package/build/navigator/navigator-back-button/hook.js.map +1 -1
- package/build/navigator/navigator-button/hook.js +2 -2
- package/build/navigator/navigator-button/hook.js.map +1 -1
- package/build/navigator/navigator-provider/component.js +99 -67
- package/build/navigator/navigator-provider/component.js.map +1 -1
- package/build/navigator/navigator-to-parent-button/component.js +2 -2
- package/build/navigator/navigator-to-parent-button/component.js.map +1 -1
- package/build/navigator/types.js.map +1 -1
- package/build/navigator/use-navigator.js +1 -2
- package/build/navigator/use-navigator.js.map +1 -1
- package/build/palette-edit/index.js +2 -2
- package/build/palette-edit/index.js.map +1 -1
- package/build/private-apis.js +5 -9
- package/build/private-apis.js.map +1 -1
- package/build/range-control/styles/range-control-styles.js +30 -30
- package/build/range-control/styles/range-control-styles.js.map +1 -1
- package/build/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js +4 -4
- package/build/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js.map +1 -1
- package/build/select-control/styles/select-control-styles.js +12 -12
- package/build/select-control/styles/select-control-styles.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/fill.js +4 -4
- package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build/snackbar/index.js +4 -4
- package/build/snackbar/index.js.map +1 -1
- package/build/tabs/index.js +4 -4
- package/build/tabs/index.js.map +1 -1
- package/build/tabs/styles.js +3 -3
- package/build/tabs/styles.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/utils.js +6 -6
- package/build/toggle-group-control/toggle-group-control/utils.js.map +1 -1
- package/build/tools-panel/tools-panel/hook.js +6 -6
- package/build/tools-panel/tools-panel/hook.js.map +1 -1
- package/build/unit-control/styles/unit-control-styles.js +7 -7
- package/build/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build/utils/config-values.js +6 -4
- package/build/utils/config-values.js.map +1 -1
- package/build/utils/hooks/use-update-effect.js +4 -4
- package/build/utils/hooks/use-update-effect.js.map +1 -1
- package/build-module/alignment-matrix-control/cell.js +2 -5
- package/build-module/alignment-matrix-control/cell.js.map +1 -1
- package/build-module/alignment-matrix-control/icon.js +31 -19
- package/build-module/alignment-matrix-control/icon.js.map +1 -1
- package/build-module/alignment-matrix-control/index.js +55 -50
- package/build-module/alignment-matrix-control/index.js.map +1 -1
- package/build-module/alignment-matrix-control/styles.js +70 -0
- package/build-module/alignment-matrix-control/styles.js.map +1 -0
- package/build-module/alignment-matrix-control/types.js.map +1 -1
- package/build-module/angle-picker-control/angle-circle.js +9 -9
- package/build-module/angle-picker-control/angle-circle.js.map +1 -1
- package/build-module/border-control/border-control/component.js +18 -13
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker-option.js +16 -10
- package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker.js +16 -13
- package/build-module/circular-option-picker/circular-option-picker.js.map +1 -1
- package/build-module/circular-option-picker/types.js.map +1 -1
- package/build-module/clipboard-button/index.js +6 -6
- package/build-module/clipboard-button/index.js.map +1 -1
- package/build-module/color-palette/utils.js +1 -2
- package/build-module/color-palette/utils.js.map +1 -1
- package/build-module/color-picker/color-copy-button.js +8 -8
- package/build-module/color-picker/color-copy-button.js.map +1 -1
- package/build-module/color-picker/hex-input.js +7 -8
- package/build-module/color-picker/hex-input.js.map +1 -1
- package/build-module/color-picker/input-with-slider.js +7 -8
- package/build-module/color-picker/input-with-slider.js.map +1 -1
- package/build-module/color-picker/styles.js +8 -8
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/types.js.map +1 -1
- package/build-module/composite/group-label.js +25 -0
- package/build-module/composite/group-label.js.map +1 -0
- package/build-module/composite/group.js +25 -0
- package/build-module/composite/group.js.map +1 -0
- package/build-module/composite/hover.js +25 -0
- package/build-module/composite/hover.js.map +1 -0
- package/build-module/composite/index.js +51 -96
- package/build-module/composite/index.js.map +1 -1
- package/build-module/composite/item.js +25 -0
- package/build-module/composite/item.js.map +1 -0
- package/build-module/composite/legacy/index.js +2 -1
- package/build-module/composite/legacy/index.js.map +1 -1
- package/build-module/composite/row.js +25 -0
- package/build-module/composite/row.js.map +1 -0
- package/build-module/composite/store.js +46 -0
- package/build-module/composite/store.js.map +1 -0
- package/build-module/composite/typeahead.js +25 -0
- package/build-module/composite/typeahead.js.map +1 -0
- package/build-module/composite/types.js.map +1 -1
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js +8 -8
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build-module/custom-select-control-v2/styles.js +12 -14
- package/build-module/custom-select-control-v2/styles.js.map +1 -1
- package/build-module/date-time/date/styles.js +8 -8
- package/build-module/date-time/date/styles.js.map +1 -1
- package/build-module/date-time/time/time-input/index.js +17 -19
- package/build-module/date-time/time/time-input/index.js.map +1 -1
- package/build-module/dimension-control/index.js +6 -1
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/draggable/index.js +4 -4
- package/build-module/draggable/index.js.map +1 -1
- package/build-module/dropdown-menu-v2/checkbox-item.js +62 -0
- package/build-module/dropdown-menu-v2/checkbox-item.js.map +1 -0
- package/build-module/dropdown-menu-v2/context.js +11 -0
- package/build-module/dropdown-menu-v2/context.js.map +1 -0
- package/build-module/dropdown-menu-v2/group-label.js +32 -0
- package/build-module/dropdown-menu-v2/group-label.js.map +1 -0
- package/build-module/dropdown-menu-v2/group.js +21 -0
- package/build-module/dropdown-menu-v2/group.js.map +1 -0
- package/build-module/dropdown-menu-v2/index.js +57 -144
- package/build-module/dropdown-menu-v2/index.js.map +1 -1
- package/build-module/dropdown-menu-v2/item-help-text.js +19 -0
- package/build-module/dropdown-menu-v2/item-help-text.js.map +1 -0
- package/build-module/dropdown-menu-v2/item-label.js +19 -0
- package/build-module/dropdown-menu-v2/item-label.js.map +1 -0
- package/build-module/dropdown-menu-v2/item.js +46 -0
- package/build-module/dropdown-menu-v2/item.js.map +1 -0
- package/build-module/dropdown-menu-v2/radio-item.js +72 -0
- package/build-module/dropdown-menu-v2/radio-item.js.map +1 -0
- package/build-module/dropdown-menu-v2/separator.js +22 -0
- package/build-module/dropdown-menu-v2/separator.js.map +1 -0
- package/build-module/dropdown-menu-v2/styles.js +54 -78
- package/build-module/dropdown-menu-v2/styles.js.map +1 -1
- package/build-module/dropdown-menu-v2/types.js.map +1 -1
- package/build-module/dropdown-menu-v2/use-temporary-focus-visible-fix.js +20 -0
- package/build-module/dropdown-menu-v2/use-temporary-focus-visible-fix.js.map +1 -0
- package/build-module/focal-point-picker/styles/focal-point-style.js +6 -2
- package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
- package/build-module/form-token-field/types.js.map +1 -1
- package/build-module/index.js +2 -1
- package/build-module/index.js.map +1 -1
- package/build-module/input-control/index.js +2 -2
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/input-base.js +6 -11
- package/build-module/input-control/input-base.js.map +1 -1
- package/build-module/input-control/input-prefix-wrapper.js +4 -3
- package/build-module/input-control/input-prefix-wrapper.js.map +1 -1
- package/build-module/input-control/input-suffix-wrapper.js +3 -3
- package/build-module/input-control/input-suffix-wrapper.js.map +1 -1
- package/build-module/input-control/reducer/reducer.js +8 -8
- package/build-module/input-control/reducer/reducer.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +74 -44
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/input-control/types.js.map +1 -1
- package/build-module/input-control/utils.js +3 -3
- package/build-module/input-control/utils.js.map +1 -1
- package/build-module/item-group/styles.js +10 -10
- package/build-module/item-group/styles.js.map +1 -1
- package/build-module/modal/index.js +5 -5
- package/build-module/modal/index.js.map +1 -1
- package/build-module/navigation/index.js +4 -4
- package/build-module/navigation/index.js.map +1 -1
- package/build-module/navigation/styles/navigation-styles.js +14 -14
- package/build-module/navigation/styles/navigation-styles.js.map +1 -1
- package/build-module/navigator/index.js +6 -6
- package/build-module/navigator/index.js.map +1 -1
- package/build-module/navigator/navigator-back-button/hook.js +1 -1
- package/build-module/navigator/navigator-back-button/hook.js.map +1 -1
- package/build-module/navigator/navigator-button/hook.js +1 -1
- package/build-module/navigator/navigator-button/hook.js.map +1 -1
- package/build-module/navigator/navigator-provider/component.js +99 -67
- package/build-module/navigator/navigator-provider/component.js.map +1 -1
- package/build-module/navigator/navigator-to-parent-button/component.js +1 -1
- package/build-module/navigator/navigator-to-parent-button/component.js.map +1 -1
- package/build-module/navigator/types.js.map +1 -1
- package/build-module/navigator/use-navigator.js +1 -2
- package/build-module/navigator/use-navigator.js.map +1 -1
- package/build-module/palette-edit/index.js +2 -2
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/private-apis.js +5 -9
- package/build-module/private-apis.js.map +1 -1
- package/build-module/range-control/styles/range-control-styles.js +31 -31
- package/build-module/range-control/styles/range-control-styles.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js +5 -5
- package/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js.map +1 -1
- package/build-module/select-control/styles/select-control-styles.js +13 -13
- package/build-module/select-control/styles/select-control-styles.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/fill.js +4 -4
- package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build-module/snackbar/index.js +4 -4
- package/build-module/snackbar/index.js.map +1 -1
- package/build-module/tabs/index.js +4 -4
- package/build-module/tabs/index.js.map +1 -1
- package/build-module/tabs/styles.js +4 -4
- package/build-module/tabs/styles.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/utils.js +6 -6
- package/build-module/toggle-group-control/toggle-group-control/utils.js.map +1 -1
- package/build-module/tools-panel/tools-panel/hook.js +6 -6
- package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
- package/build-module/unit-control/styles/unit-control-styles.js +7 -7
- package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build-module/utils/config-values.js +6 -4
- package/build-module/utils/config-values.js.map +1 -1
- package/build-module/utils/hooks/use-update-effect.js +4 -4
- package/build-module/utils/hooks/use-update-effect.js.map +1 -1
- package/build-style/style-rtl.css +11 -23
- package/build-style/style.css +11 -23
- package/build-types/alignment-matrix-control/cell.d.ts +1 -1
- package/build-types/alignment-matrix-control/cell.d.ts.map +1 -1
- package/build-types/alignment-matrix-control/icon.d.ts +1 -1
- package/build-types/alignment-matrix-control/icon.d.ts.map +1 -1
- package/build-types/alignment-matrix-control/index.d.ts +16 -6
- package/build-types/alignment-matrix-control/index.d.ts.map +1 -1
- package/build-types/alignment-matrix-control/stories/index.story.d.ts.map +1 -1
- package/build-types/alignment-matrix-control/{styles/alignment-matrix-control-styles.d.ts → styles.d.ts} +9 -10
- package/build-types/alignment-matrix-control/styles.d.ts.map +1 -0
- package/build-types/alignment-matrix-control/types.d.ts +12 -1
- package/build-types/alignment-matrix-control/types.d.ts.map +1 -1
- package/build-types/angle-picker-control/angle-circle.d.ts.map +1 -1
- package/build-types/border-control/border-control/component.d.ts.map +1 -1
- package/build-types/box-control/stories/index.story.d.ts.map +1 -1
- package/build-types/circular-option-picker/circular-option-picker-option.d.ts.map +1 -1
- package/build-types/circular-option-picker/circular-option-picker.d.ts.map +1 -1
- package/build-types/circular-option-picker/types.d.ts +2 -2
- package/build-types/circular-option-picker/types.d.ts.map +1 -1
- package/build-types/color-palette/utils.d.ts.map +1 -1
- package/build-types/color-picker/color-copy-button.d.ts.map +1 -1
- package/build-types/color-picker/hex-input.d.ts.map +1 -1
- package/build-types/color-picker/input-with-slider.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/combobox-control/types.d.ts +1 -0
- package/build-types/combobox-control/types.d.ts.map +1 -1
- package/build-types/composite/group-label.d.ts +3 -0
- package/build-types/composite/group-label.d.ts.map +1 -0
- package/build-types/composite/group.d.ts +3 -0
- package/build-types/composite/group.d.ts.map +1 -0
- package/build-types/composite/hover.d.ts +3 -0
- package/build-types/composite/hover.d.ts.map +1 -0
- package/build-types/composite/index.d.ts +30 -26
- package/build-types/composite/index.d.ts.map +1 -1
- package/build-types/composite/item.d.ts +3 -0
- package/build-types/composite/item.d.ts.map +1 -0
- package/build-types/composite/legacy/index.d.ts +1 -4
- package/build-types/composite/legacy/index.d.ts.map +1 -1
- package/build-types/composite/row.d.ts +3 -0
- package/build-types/composite/row.d.ts.map +1 -0
- package/build-types/composite/store.d.ts +25 -0
- package/build-types/composite/store.d.ts.map +1 -0
- package/build-types/composite/stories/index.story.d.ts +1 -0
- package/build-types/composite/stories/index.story.d.ts.map +1 -1
- package/build-types/composite/typeahead.d.ts +3 -0
- package/build-types/composite/typeahead.d.ts.map +1 -0
- package/build-types/composite/types.d.ts +2 -2
- package/build-types/composite/types.d.ts.map +1 -1
- package/build-types/date-time/time/time-input/index.d.ts.map +1 -1
- package/build-types/dimension-control/index.d.ts +1 -1
- package/build-types/dimension-control/index.d.ts.map +1 -1
- package/build-types/dimension-control/stories/index.story.d.ts +5 -0
- package/build-types/dimension-control/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2/checkbox-item.d.ts +3 -0
- package/build-types/dropdown-menu-v2/checkbox-item.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/context.d.ts +6 -0
- package/build-types/dropdown-menu-v2/context.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/group-label.d.ts +3 -0
- package/build-types/dropdown-menu-v2/group-label.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/group.d.ts +3 -0
- package/build-types/dropdown-menu-v2/group.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/index.d.ts +39 -18
- package/build-types/dropdown-menu-v2/index.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2/item-help-text.d.ts +6 -0
- package/build-types/dropdown-menu-v2/item-help-text.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/item-label.d.ts +6 -0
- package/build-types/dropdown-menu-v2/item-label.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/item.d.ts +3 -0
- package/build-types/dropdown-menu-v2/item.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/radio-item.d.ts +3 -0
- package/build-types/dropdown-menu-v2/radio-item.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/separator.d.ts +3 -0
- package/build-types/dropdown-menu-v2/separator.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/stories/index.story.d.ts +10 -10
- package/build-types/dropdown-menu-v2/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2/styles.d.ts +14 -6
- package/build-types/dropdown-menu-v2/styles.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2/types.d.ts +6 -0
- package/build-types/dropdown-menu-v2/types.d.ts.map +1 -1
- package/build-types/dropdown-menu-v2/use-temporary-focus-visible-fix.d.ts +8 -0
- package/build-types/dropdown-menu-v2/use-temporary-focus-visible-fix.d.ts.map +1 -0
- package/build-types/focal-point-picker/styles/focal-point-style.d.ts.map +1 -1
- package/build-types/form-token-field/types.d.ts +1 -0
- package/build-types/form-token-field/types.d.ts.map +1 -1
- package/build-types/index.d.ts +3 -1
- package/build-types/index.d.ts.map +1 -1
- package/build-types/input-control/input-base.d.ts.map +1 -1
- package/build-types/input-control/input-prefix-wrapper.d.ts +2 -2
- package/build-types/input-control/input-prefix-wrapper.d.ts.map +1 -1
- package/build-types/input-control/input-suffix-wrapper.d.ts +2 -2
- package/build-types/input-control/input-suffix-wrapper.d.ts.map +1 -1
- package/build-types/input-control/reducer/reducer.d.ts.map +1 -1
- package/build-types/input-control/stories/index.story.d.ts +9 -0
- package/build-types/input-control/stories/index.story.d.ts.map +1 -1
- package/build-types/input-control/styles/input-control-styles.d.ts +15 -9
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/input-control/types.d.ts +23 -6
- package/build-types/input-control/types.d.ts.map +1 -1
- package/build-types/navigation/styles/navigation-styles.d.ts.map +1 -1
- package/build-types/navigator/index.d.ts +6 -6
- package/build-types/navigator/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
- package/build-types/navigator/stories/index.story.d.ts +1 -1
- package/build-types/navigator/stories/index.story.d.ts.map +1 -1
- package/build-types/navigator/types.d.ts +3 -1
- package/build-types/navigator/types.d.ts.map +1 -1
- package/build-types/navigator/use-navigator.d.ts +1 -2
- package/build-types/navigator/use-navigator.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
- package/build-types/resizable-box/resize-tooltip/styles/resize-tooltip.styles.d.ts.map +1 -1
- package/build-types/select-control/styles/select-control-styles.d.ts +1 -1
- package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
- package/build-types/tabs/index.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
- package/build-types/utils/config-values.d.ts +3 -3
- package/package.json +19 -19
- package/src/alignment-matrix-control/README.md +1 -5
- package/src/alignment-matrix-control/cell.tsx +3 -9
- package/src/alignment-matrix-control/icon.tsx +48 -30
- package/src/alignment-matrix-control/index.tsx +60 -50
- package/src/alignment-matrix-control/stories/index.story.tsx +3 -12
- package/src/alignment-matrix-control/styles.ts +113 -0
- package/src/alignment-matrix-control/types.ts +12 -1
- package/src/angle-picker-control/angle-circle.tsx +11 -9
- package/src/border-control/border-control/component.tsx +23 -16
- package/src/circular-option-picker/circular-option-picker-option.tsx +16 -19
- package/src/circular-option-picker/circular-option-picker.tsx +26 -12
- package/src/circular-option-picker/types.ts +2 -2
- package/src/clipboard-button/index.tsx +6 -6
- package/src/color-palette/test/utils.ts +21 -2
- package/src/color-palette/utils.ts +1 -3
- package/src/color-picker/color-copy-button.tsx +10 -8
- package/src/color-picker/hex-input.tsx +6 -10
- package/src/color-picker/input-with-slider.tsx +6 -10
- package/src/color-picker/styles.ts +1 -1
- package/src/combobox-control/types.ts +1 -0
- package/src/composite/group-label.tsx +30 -0
- package/src/composite/group.tsx +30 -0
- package/src/composite/hover.tsx +30 -0
- package/src/composite/index.tsx +61 -145
- package/src/composite/item.tsx +30 -0
- package/src/composite/legacy/index.tsx +2 -1
- package/src/composite/row.tsx +30 -0
- package/src/composite/store.ts +46 -0
- package/src/composite/stories/index.story.tsx +138 -265
- package/src/composite/typeahead.tsx +30 -0
- package/src/composite/types.ts +2 -2
- package/src/custom-gradient-picker/gradient-bar/control-points.tsx +10 -10
- package/src/custom-gradient-picker/style.scss +2 -21
- package/src/custom-select-control-v2/styles.ts +4 -4
- package/src/date-time/date/styles.ts +2 -2
- package/src/date-time/time/test/index.tsx +3 -6
- package/src/date-time/time/time-input/index.tsx +25 -25
- package/src/date-time/time/time-input/test/index.tsx +6 -7
- package/src/dimension-control/README.md +4 -0
- package/src/dimension-control/index.tsx +7 -1
- package/src/dimension-control/stories/index.story.tsx +7 -2
- package/src/dimension-control/test/__snapshots__/index.test.js.snap +16 -16
- package/src/dimension-control/test/index.test.js +1 -0
- package/src/draggable/index.tsx +4 -4
- package/src/dropdown-menu-v2/README.md +73 -60
- package/src/dropdown-menu-v2/checkbox-item.tsx +63 -0
- package/src/dropdown-menu-v2/context.tsx +13 -0
- package/src/dropdown-menu-v2/group-label.tsx +37 -0
- package/src/dropdown-menu-v2/group.tsx +26 -0
- package/src/dropdown-menu-v2/index.tsx +57 -197
- package/src/dropdown-menu-v2/item-help-text.tsx +23 -0
- package/src/dropdown-menu-v2/item-label.tsx +23 -0
- package/src/dropdown-menu-v2/item.tsx +50 -0
- package/src/dropdown-menu-v2/radio-item.tsx +70 -0
- package/src/dropdown-menu-v2/separator.tsx +27 -0
- package/src/dropdown-menu-v2/stories/index.story.tsx +295 -262
- package/src/dropdown-menu-v2/styles.ts +102 -66
- package/src/dropdown-menu-v2/test/index.tsx +159 -132
- package/src/dropdown-menu-v2/types.ts +7 -0
- package/src/dropdown-menu-v2/use-temporary-focus-visible-fix.ts +22 -0
- package/src/focal-point-picker/styles/focal-point-style.ts +6 -1
- package/src/form-toggle/style.scss +1 -1
- package/src/form-token-field/style.scss +2 -3
- package/src/form-token-field/types.ts +1 -0
- package/src/index.ts +5 -1
- package/src/input-control/index.tsx +2 -2
- package/src/input-control/input-base.tsx +4 -14
- package/src/input-control/input-prefix-wrapper.tsx +8 -4
- package/src/input-control/input-suffix-wrapper.tsx +4 -6
- package/src/input-control/reducer/reducer.ts +13 -10
- package/src/input-control/stories/index.story.tsx +31 -12
- package/src/input-control/styles/input-control-styles.tsx +42 -11
- package/src/input-control/types.ts +23 -7
- package/src/input-control/utils.ts +3 -3
- package/src/item-group/styles.ts +3 -3
- package/src/item-group/test/__snapshots__/index.js.snap +3 -3
- package/src/modal/index.tsx +5 -5
- package/src/modal/style.scss +5 -4
- package/src/navigation/index.tsx +4 -4
- package/src/navigation/styles/navigation-styles.tsx +3 -3
- package/src/navigator/index.ts +6 -6
- package/src/navigator/navigator-back-button/hook.ts +1 -1
- package/src/navigator/navigator-button/hook.ts +1 -1
- package/src/navigator/navigator-provider/README.md +2 -3
- package/src/navigator/navigator-provider/component.tsx +97 -82
- package/src/navigator/navigator-to-parent-button/component.tsx +1 -1
- package/src/navigator/stories/index.story.tsx +82 -253
- package/src/navigator/types.ts +3 -1
- package/src/navigator/use-navigator.ts +1 -3
- package/src/palette-edit/index.tsx +2 -2
- package/src/private-apis.ts +5 -18
- package/src/range-control/styles/range-control-styles.ts +7 -7
- package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts +2 -2
- package/src/resizable-box/style.scss +2 -2
- package/src/select-control/styles/select-control-styles.ts +5 -5
- package/src/slot-fill/bubbles-virtually/fill.tsx +4 -4
- package/src/snackbar/index.tsx +4 -4
- package/src/tab-panel/style.scss +0 -1
- package/src/tabs/index.tsx +8 -4
- package/src/tabs/styles.ts +2 -3
- package/src/text-control/style.scss +3 -2
- package/src/toggle-group-control/toggle-group-control/utils.ts +7 -7
- package/src/tools-panel/tools-panel/hook.ts +6 -6
- package/src/unit-control/styles/unit-control-styles.ts +2 -1
- package/src/utils/config-values.js +6 -4
- package/src/utils/hooks/use-update-effect.js +4 -4
- package/tsconfig.tsbuildinfo +1 -1
- package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js +0 -66
- package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js.map +0 -1
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +0 -77
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +0 -1
- package/build/navigator/navigator-back-button/index.js +0 -14
- package/build/navigator/navigator-back-button/index.js.map +0 -1
- package/build/navigator/navigator-button/index.js +0 -14
- package/build/navigator/navigator-button/index.js.map +0 -1
- package/build/navigator/navigator-provider/index.js +0 -14
- package/build/navigator/navigator-provider/index.js.map +0 -1
- package/build/navigator/navigator-screen/index.js +0 -14
- package/build/navigator/navigator-screen/index.js.map +0 -1
- package/build/navigator/navigator-to-parent-button/index.js +0 -14
- package/build/navigator/navigator-to-parent-button/index.js.map +0 -1
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js +0 -63
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js.map +0 -1
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +0 -72
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +0 -1
- package/build-module/navigator/navigator-back-button/index.js +0 -2
- package/build-module/navigator/navigator-back-button/index.js.map +0 -1
- package/build-module/navigator/navigator-button/index.js +0 -2
- package/build-module/navigator/navigator-button/index.js.map +0 -1
- package/build-module/navigator/navigator-provider/index.js +0 -2
- package/build-module/navigator/navigator-provider/index.js.map +0 -1
- package/build-module/navigator/navigator-screen/index.js +0 -2
- package/build-module/navigator/navigator-screen/index.js.map +0 -1
- package/build-module/navigator/navigator-to-parent-button/index.js +0 -2
- package/build-module/navigator/navigator-to-parent-button/index.js.map +0 -1
- package/build-types/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.d.ts +0 -18
- package/build-types/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.d.ts.map +0 -1
- package/build-types/alignment-matrix-control/styles/alignment-matrix-control-styles.d.ts.map +0 -1
- package/build-types/navigator/navigator-back-button/index.d.ts +0 -2
- package/build-types/navigator/navigator-back-button/index.d.ts.map +0 -1
- package/build-types/navigator/navigator-button/index.d.ts +0 -2
- package/build-types/navigator/navigator-button/index.d.ts.map +0 -1
- package/build-types/navigator/navigator-provider/index.d.ts +0 -2
- package/build-types/navigator/navigator-provider/index.d.ts.map +0 -1
- package/build-types/navigator/navigator-screen/index.d.ts +0 -2
- package/build-types/navigator/navigator-screen/index.d.ts.map +0 -1
- package/build-types/navigator/navigator-to-parent-button/index.d.ts +0 -2
- package/build-types/navigator/navigator-to-parent-button/index.d.ts.map +0 -1
- package/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts +0 -77
- package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts +0 -102
- package/src/navigator/navigator-back-button/index.ts +0 -1
- package/src/navigator/navigator-button/index.ts +0 -1
- package/src/navigator/navigator-provider/index.ts +0 -1
- package/src/navigator/navigator-screen/index.ts +0 -1
- package/src/navigator/navigator-to-parent-button/index.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["@wordpress/components/src/composite/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as Ariakit from '@ariakit/react';\n\nexport type CompositeContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * Object returned by the `useCompositeStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.CompositeStore;\n\t }\n\t| undefined;\n\nexport type CompositeStoreProps = {\n\t/**\n\t * The current active item `id`. The active item is the element within the\n\t * composite widget that has either DOM or virtual focus (in case\n\t * the `virtualFocus` prop is enabled).\n\t * - `null` represents the base composite element (the one with a [composite\n\t * role](https://w3c.github.io/aria/#composite)). Users will be able to\n\t * navigate out of it using arrow keys.\n\t * - If `activeId` is initially set to `null`, the base composite element\n\t * itself will have focus and users will be able to navigate to it using\n\t * arrow keys.\n\t */\n\tactiveId?: Ariakit.CompositeStoreProps[ 'activeId' ];\n\t/**\n\t * The composite item id that should be active by default when the composite\n\t * widget is rendered. If `null`, the composite element itself will have focus\n\t * and users will be able to navigate to it using arrow keys. If `undefined`,\n\t * the first enabled item will be focused.\n\t */\n\tdefaultActiveId?: Ariakit.CompositeStoreProps[ 'defaultActiveId' ];\n\t/**\n\t * A callback that gets called when the `activeId` state changes.\n\t */\n\tsetActiveId?: Ariakit.CompositeStoreProps[ 'setActiveId' ];\n\t/**\n\t * Determines how the focus behaves when the user reaches the end of the\n\t * composite widget.\n\t *\n\t * On one-dimensional composite widgets:\n\t * - `true` loops from the last item to the first item and vice-versa.\n\t * - `horizontal` loops only if `orientation` is `horizontal` or not set.\n\t * - `vertical` loops only if `orientation` is `vertical` or not set.\n\t * - If `activeId` is initially set to `null`, the composite element will\n\t * be focused in between the last and first items.\n\t *\n\t * On two-dimensional composite widgets (ie. when using `CompositeRow`):\n\t * - `true` loops from the last row/column item to the first item in the same\n\t * row/column and vice-versa. If it's the last item in the last row, it\n\t * moves to the first item in the first row and vice-versa.\n\t * - `horizontal` loops only from the last row item to the first item in the\n\t * same row.\n\t * - `vertical` loops only from the last column item to the first item in the\n\t * column row.\n\t * - If `activeId` is initially set to `null`, vertical loop will have no\n\t * effect as moving down from the last row or up from the first row will\n\t * focus on the composite element.\n\t * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the\n\t * last item in the last row or column and the first item in the first row or\n\t * column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusLoop?: Ariakit.CompositeStoreProps[ 'focusLoop' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus on the first item in the next row or column and vice-versa.\n\t * - `true` wraps between rows and columns.\n\t * - `horizontal` wraps only between rows.\n\t * - `vertical` wraps only between columns.\n\t * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the\n\t * last item in the last row or column and the first item in the first row or\n\t * column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusWrap?: Ariakit.CompositeStoreProps[ 'focusWrap' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving up or down when there's no next item or when the next\n\t * item is disabled will shift to the item right before it.\n\t *\n\t * @default false\n\t */\n\tfocusShift?: Ariakit.CompositeStoreProps[ 'focusShift' ];\n\t/**\n\t * If enabled, the composite element will act as an\n\t * [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)\n\t * container instead of [roving\n\t * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).\n\t * DOM focus will remain on the composite element while its items receive\n\t * virtual focus.\n\t *\n\t * In both scenarios, the item in focus will carry the `data-active-item`\n\t * attribute.\n\t *\n\t * @default false\n\t */\n\tvirtualFocus?: Ariakit.CompositeStoreProps[ 'virtualFocus' ];\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the `orientation` value determines\n\t * which arrow keys can be used to move focus:\n\t * - `both`: all arrow keys work.\n\t * - `horizontal`: only left and right arrow keys work.\n\t * - `vertical`: only up and down arrow keys work.\n\t *\n\t * It doesn't have any effect on two-dimensional composites.\n\t *\n\t * @default \"both\"\n\t */\n\torientation?: Ariakit.CompositeStoreProps[ 'orientation' ];\n\t/**\n\t * Determines how the `store`'s `next` and `previous` functions will behave.\n\t * If `rtl` is set to `true`, they will be inverted.\n\t *\n\t * This only affects the composite widget behavior. You still need to set\n\t * `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: Ariakit.CompositeStoreProps[ 'rtl' ];\n};\n\nexport type CompositeProps = {\n\t/**\n\t * Object returned by the `useCompositeStore` hook.\n\t */\n\tstore: Ariakit.CompositeStore;\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeProps[ 'render' ];\n\t/**\n\t * Makes the component a focusable element. When this element gains keyboard\n\t * focus, it gets a `data-focus-visible` attribute and triggers the\n\t * `onFocusVisible` prop.\n\t * The component supports the `disabled` prop even for those elements not\n\t * supporting the native `disabled` attribute. Disabled elements may be\n\t * still accessible via keyboard by using the the `accessibleWhenDisabled`\n\t * prop.\n\t * Non-native focusable elements will lose their focusability entirely.\n\t * However, native focusable elements will retain their inherent focusability.\n\t */\n\tfocusable?: Ariakit.CompositeProps[ 'focusable' ];\n\t/**\n\t * Determines if the element is disabled. This sets the `aria-disabled`\n\t * attribute accordingly, enabling support for all elements, including those\n\t * that don't support the native `disabled` attribute.\n\t *\n\t * This feature can be combined with the `accessibleWhenDisabled` prop to\n\t * make disabled elements still accessible via keyboard.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to\n\t * `true`, if it's not set by default.\n\t *\n\t * @default false\n\t */\n\tdisabled?: Ariakit.CompositeProps[ 'disabled' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeProps[ 'accessibleWhenDisabled' ];\n\t/**\n\t * Custom event handler invoked when the element gains focus through keyboard\n\t * interaction or a key press occurs while the element is in focus. This is\n\t * the programmatic equivalent of the `data-focus-visible` attribute.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to `true`\n\t * if it's not set by default.\n\t */\n\tonFocusVisible?: Ariakit.CompositeProps[ 'onFocusVisible' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeProps[ 'children' ];\n};\n\nexport type CompositeGroupProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupProps[ 'children' ];\n};\n\nexport type CompositeGroupLabelProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupLabelProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupLabelProps[ 'children' ];\n};\n\nexport type CompositeItemProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeItemProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeItemProps[ 'children' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeItemProps[ 'accessibleWhenDisabled' ];\n};\n\nexport type CompositeRowProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeRowProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeRowProps[ 'children' ];\n};\n\nexport type CompositeHoverProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeHoverProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeHoverProps[ 'children' ];\n};\n\nexport type CompositeTypeaheadProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeTypeaheadProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeTypeaheadProps[ 'children' ];\n};\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/composite/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as Ariakit from '@ariakit/react';\n\nexport type CompositeContextProps =\n\t| {\n\t\t\t/**\n\t\t\t * Object returned by the `useCompositeStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.CompositeStore;\n\t }\n\t| undefined;\n\nexport type CompositeStoreProps = {\n\t/**\n\t * The current active item `id`. The active item is the element within the\n\t * composite widget that has either DOM or virtual focus (in case\n\t * the `virtualFocus` prop is enabled).\n\t * - `null` represents the base composite element (the one with a [composite\n\t * role](https://w3c.github.io/aria/#composite)). Users will be able to\n\t * navigate out of it using arrow keys.\n\t * - If `activeId` is initially set to `null`, the base composite element\n\t * itself will have focus and users will be able to navigate to it using\n\t * arrow keys.\n\t */\n\tactiveId?: Ariakit.CompositeStoreProps[ 'activeId' ];\n\t/**\n\t * The composite item id that should be active by default when the composite\n\t * widget is rendered. If `null`, the composite element itself will have focus\n\t * and users will be able to navigate to it using arrow keys. If `undefined`,\n\t * the first enabled item will be focused.\n\t */\n\tdefaultActiveId?: Ariakit.CompositeStoreProps[ 'defaultActiveId' ];\n\t/**\n\t * A callback that gets called when the `activeId` state changes.\n\t */\n\tsetActiveId?: Ariakit.CompositeStoreProps[ 'setActiveId' ];\n\t/**\n\t * Determines how the focus behaves when the user reaches the end of the\n\t * composite widget.\n\t *\n\t * On one-dimensional composite widgets:\n\t * - `true` loops from the last item to the first item and vice-versa.\n\t * - `horizontal` loops only if `orientation` is `horizontal` or not set.\n\t * - `vertical` loops only if `orientation` is `vertical` or not set.\n\t * - If `activeId` is initially set to `null`, the composite element will\n\t * be focused in between the last and first items.\n\t *\n\t * On two-dimensional composite widgets (ie. when using `CompositeRow`):\n\t * - `true` loops from the last row/column item to the first item in the same\n\t * row/column and vice-versa. If it's the last item in the last row, it\n\t * moves to the first item in the first row and vice-versa.\n\t * - `horizontal` loops only from the last row item to the first item in the\n\t * same row.\n\t * - `vertical` loops only from the last column item to the first item in the\n\t * column row.\n\t * - If `activeId` is initially set to `null`, vertical loop will have no\n\t * effect as moving down from the last row or up from the first row will\n\t * focus on the composite element.\n\t * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the\n\t * last item in the last row or column and the first item in the first row or\n\t * column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusLoop?: Ariakit.CompositeStoreProps[ 'focusLoop' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus on the first item in the next row or column and vice-versa.\n\t * - `true` wraps between rows and columns.\n\t * - `horizontal` wraps only between rows.\n\t * - `vertical` wraps only between columns.\n\t * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the\n\t * last item in the last row or column and the first item in the first row or\n\t * column and vice-versa.\n\t *\n\t * @default false\n\t */\n\tfocusWrap?: Ariakit.CompositeStoreProps[ 'focusWrap' ];\n\t/**\n\t * **Works only on two-dimensional composite widgets**.\n\t *\n\t * If enabled, moving up or down when there's no next item or when the next\n\t * item is disabled will shift to the item right before it.\n\t *\n\t * @default false\n\t */\n\tfocusShift?: Ariakit.CompositeStoreProps[ 'focusShift' ];\n\t/**\n\t * If enabled, the composite element will act as an\n\t * [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)\n\t * container instead of [roving\n\t * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).\n\t * DOM focus will remain on the composite element while its items receive\n\t * virtual focus.\n\t *\n\t * In both scenarios, the item in focus will carry the `data-active-item`\n\t * attribute.\n\t *\n\t * @default false\n\t */\n\tvirtualFocus?: Ariakit.CompositeStoreProps[ 'virtualFocus' ];\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the `orientation` value determines\n\t * which arrow keys can be used to move focus:\n\t * - `both`: all arrow keys work.\n\t * - `horizontal`: only left and right arrow keys work.\n\t * - `vertical`: only up and down arrow keys work.\n\t *\n\t * It doesn't have any effect on two-dimensional composites.\n\t *\n\t * @default \"both\"\n\t */\n\torientation?: Ariakit.CompositeStoreProps[ 'orientation' ];\n\t/**\n\t * Determines how the `store`'s `next` and `previous` functions will behave.\n\t * If `rtl` is set to `true`, they will be inverted.\n\t *\n\t * This only affects the composite widget behavior. You still need to set\n\t * `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: Ariakit.CompositeStoreProps[ 'rtl' ];\n};\n\nexport type CompositeProps = CompositeStoreProps & {\n\t/**\n\t * Object returned by the `useCompositeStore` hook.\n\t */\n\tstore?: Ariakit.CompositeStore;\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeProps[ 'render' ];\n\t/**\n\t * Makes the component a focusable element. When this element gains keyboard\n\t * focus, it gets a `data-focus-visible` attribute and triggers the\n\t * `onFocusVisible` prop.\n\t * The component supports the `disabled` prop even for those elements not\n\t * supporting the native `disabled` attribute. Disabled elements may be\n\t * still accessible via keyboard by using the the `accessibleWhenDisabled`\n\t * prop.\n\t * Non-native focusable elements will lose their focusability entirely.\n\t * However, native focusable elements will retain their inherent focusability.\n\t */\n\tfocusable?: Ariakit.CompositeProps[ 'focusable' ];\n\t/**\n\t * Determines if the element is disabled. This sets the `aria-disabled`\n\t * attribute accordingly, enabling support for all elements, including those\n\t * that don't support the native `disabled` attribute.\n\t *\n\t * This feature can be combined with the `accessibleWhenDisabled` prop to\n\t * make disabled elements still accessible via keyboard.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to\n\t * `true`, if it's not set by default.\n\t *\n\t * @default false\n\t */\n\tdisabled?: Ariakit.CompositeProps[ 'disabled' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeProps[ 'accessibleWhenDisabled' ];\n\t/**\n\t * Custom event handler invoked when the element gains focus through keyboard\n\t * interaction or a key press occurs while the element is in focus. This is\n\t * the programmatic equivalent of the `data-focus-visible` attribute.\n\t *\n\t * **Note**: For this prop to work, the `focusable` prop must be set to `true`\n\t * if it's not set by default.\n\t */\n\tonFocusVisible?: Ariakit.CompositeProps[ 'onFocusVisible' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeProps[ 'children' ];\n};\n\nexport type CompositeGroupProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupProps[ 'children' ];\n};\n\nexport type CompositeGroupLabelProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeGroupLabelProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeGroupLabelProps[ 'children' ];\n};\n\nexport type CompositeItemProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeItemProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeItemProps[ 'children' ];\n\t/**\n\t * Indicates whether the element should be focusable even when it is\n\t * `disabled`.\n\t *\n\t * This is important when discoverability is a concern. For example:\n\t *\n\t * > A toolbar in an editor contains a set of special smart paste functions\n\t * that are disabled when the clipboard is empty or when the function is not\n\t * applicable to the current content of the clipboard. It could be helpful to\n\t * keep the disabled buttons focusable if the ability to discover their\n\t * functionality is primarily via their presence on the toolbar.\n\t *\n\t * Learn more on [Focusability of disabled\n\t * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\n\t */\n\taccessibleWhenDisabled?: Ariakit.CompositeItemProps[ 'accessibleWhenDisabled' ];\n};\n\nexport type CompositeRowProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeRowProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeRowProps[ 'children' ];\n};\n\nexport type CompositeHoverProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeHoverProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeHoverProps[ 'children' ];\n};\n\nexport type CompositeTypeaheadProps = {\n\t/**\n\t * Allows the component to be rendered as a different HTML element or React\n\t * component. The value can be a React element or a function that takes in the\n\t * original component props and gives back a React element with the props\n\t * merged.\n\t */\n\trender?: Ariakit.CompositeTypeaheadProps[ 'render' ];\n\t/**\n\t * The contents of the component.\n\t */\n\tchildren?: Ariakit.CompositeTypeaheadProps[ 'children' ];\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -91,9 +91,9 @@ function ControlPoints({
|
|
|
91
91
|
onStopControlPointChange,
|
|
92
92
|
__experimentalIsRenderedInSidebar
|
|
93
93
|
}) {
|
|
94
|
-
const
|
|
94
|
+
const controlPointMoveStateRef = (0, _element.useRef)();
|
|
95
95
|
const onMouseMove = event => {
|
|
96
|
-
if (
|
|
96
|
+
if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
99
|
const relativePosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current);
|
|
@@ -101,18 +101,18 @@ function ControlPoints({
|
|
|
101
101
|
initialPosition,
|
|
102
102
|
index,
|
|
103
103
|
significantMoveHappened
|
|
104
|
-
} =
|
|
104
|
+
} = controlPointMoveStateRef.current;
|
|
105
105
|
if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= _constants.MINIMUM_SIGNIFICANT_MOVE) {
|
|
106
|
-
|
|
106
|
+
controlPointMoveStateRef.current.significantMoveHappened = true;
|
|
107
107
|
}
|
|
108
108
|
onChange((0, _utils.updateControlPointPosition)(controlPoints, index, relativePosition));
|
|
109
109
|
};
|
|
110
110
|
const cleanEventListeners = () => {
|
|
111
|
-
if (window && window.removeEventListener &&
|
|
111
|
+
if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {
|
|
112
112
|
window.removeEventListener('mousemove', onMouseMove);
|
|
113
113
|
window.removeEventListener('mouseup', cleanEventListeners);
|
|
114
114
|
onStopControlPointChange();
|
|
115
|
-
|
|
115
|
+
controlPointMoveStateRef.current.listenersActivated = false;
|
|
116
116
|
}
|
|
117
117
|
};
|
|
118
118
|
|
|
@@ -137,7 +137,7 @@ function ControlPoints({
|
|
|
137
137
|
onToggle
|
|
138
138
|
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlPointButton, {
|
|
139
139
|
onClick: () => {
|
|
140
|
-
if (
|
|
140
|
+
if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {
|
|
141
141
|
return;
|
|
142
142
|
}
|
|
143
143
|
if (isOpen) {
|
|
@@ -149,7 +149,7 @@ function ControlPoints({
|
|
|
149
149
|
},
|
|
150
150
|
onMouseDown: () => {
|
|
151
151
|
if (window && window.addEventListener) {
|
|
152
|
-
|
|
152
|
+
controlPointMoveStateRef.current = {
|
|
153
153
|
initialPosition,
|
|
154
154
|
index,
|
|
155
155
|
significantMoveHappened: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_clsx","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_clsx","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveStateRef = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveStateRef.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveStateRef.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveStateRef.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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","ignoreList":[]}
|