@wordpress/components 28.9.0 → 28.10.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 +22 -0
- package/build/alignment-matrix-control/icon.js.map +1 -1
- package/build/alignment-matrix-control/types.js.map +1 -1
- package/build/alignment-matrix-control/utils.js.map +1 -1
- package/build/angle-picker-control/angle-circle.js.map +1 -1
- package/build/autocomplete/autocompleter-ui.js +3 -3
- package/build/autocomplete/autocompleter-ui.js.map +1 -1
- package/build/autocomplete/get-default-use-items.js.map +1 -1
- package/build/autocomplete/index.js +1 -0
- package/build/autocomplete/index.js.map +1 -1
- package/build/base-control/hooks.js.map +1 -1
- package/build/base-control/index.js.map +1 -1
- package/build/border-box-control/border-box-control/hook.js.map +1 -1
- package/build/border-box-control/styles.js.map +1 -1
- package/build/border-box-control/utils.js.map +1 -1
- package/build/border-control/border-control/hook.js.map +1 -1
- package/build/border-control/styles.js.map +1 -1
- package/build/box-control/axial-input-controls.js.map +1 -1
- package/build/box-control/icon.js.map +1 -1
- package/build/box-control/index.js.map +1 -1
- package/build/box-control/input-controls.js.map +1 -1
- package/build/button/index.native.js +1 -1
- package/build/button/index.native.js.map +1 -1
- package/build/card/card/component.js +1 -1
- package/build/card/card/component.js.map +1 -1
- package/build/card/styles.js.map +1 -1
- package/build/color-palette/index.js.map +1 -1
- package/build/color-palette/index.native.js +2 -1
- package/build/color-palette/index.native.js.map +1 -1
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/index.js +1 -1
- package/build/combobox-control/index.js.map +1 -1
- package/build/composite/legacy/index.js.map +1 -1
- package/build/context/context-connect.js +1 -0
- package/build/context/context-connect.js.map +1 -1
- package/build/context/context-system-provider.js +1 -1
- package/build/context/context-system-provider.js.map +1 -1
- package/build/context/get-styled-class-name-from-key.js.map +1 -1
- package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build/custom-gradient-picker/index.js.map +1 -1
- package/build/custom-gradient-picker/serializer.js.map +1 -1
- package/build/custom-gradient-picker/utils.js.map +1 -1
- package/build/custom-select-control-v2/styles.js.map +1 -1
- package/build/dashicon/index.js.map +1 -1
- package/build/date-time/date/styles.js.map +1 -1
- package/build/date-time/time/timezone.js.map +1 -1
- package/build/draggable/index.js.map +1 -1
- package/build/drop-zone/index.js +1 -2
- package/build/drop-zone/index.js.map +1 -1
- package/build/dropdown-menu-v2/styles.js.map +1 -1
- package/build/duotone-picker/color-list-picker/index.js.map +1 -1
- package/build/duotone-picker/utils.js.map +1 -1
- package/build/elevation/hook.js.map +1 -1
- package/build/external-link/index.js +20 -23
- package/build/external-link/index.js.map +1 -1
- package/build/focal-point-picker/index.js.map +1 -1
- package/build/focal-point-picker/index.native.js.map +1 -1
- package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
- package/build/font-size-picker/index.js.map +1 -1
- package/build/form-token-field/index.js +2 -1
- package/build/form-token-field/index.js.map +1 -1
- package/build/form-token-field/suggestions-list.js.map +1 -1
- package/build/form-token-field/token-input.js.map +1 -1
- package/build/form-token-field/token.js +1 -1
- package/build/form-token-field/token.js.map +1 -1
- package/build/gradient-picker/index.js.map +1 -1
- package/build/grid/hook.js.map +1 -1
- package/build/guide/page-control.js +1 -1
- package/build/guide/page-control.js.map +1 -1
- package/build/h-stack/hook.js.map +1 -1
- package/build/heading/hook.js.map +1 -1
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/input-base.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/item-group/styles.js.map +1 -1
- package/build/menu-group/index.js.map +1 -1
- package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
- package/build/mobile/bottom-sheet/cell.native.js +4 -4
- package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet/range-cell.native.js +1 -1
- package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js +1 -1
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet/switch-cell.native.js +4 -4
- package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build/mobile/cycle-select-control/index.native.js.map +1 -1
- package/build/mobile/gradient/index.native.js.map +1 -1
- package/build/mobile/image/index.native.js.map +1 -1
- package/build/mobile/link-picker/index.native.js +1 -1
- package/build/mobile/link-picker/index.native.js.map +1 -1
- package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
- package/build/mobile/picker/index.android.js.map +1 -1
- package/build/mobile/segmented-control/index.native.js.map +1 -1
- package/build/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
- package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
- package/build/modal/aria-helper.js +2 -1
- package/build/modal/aria-helper.js.map +1 -1
- package/build/modal/index.js +2 -1
- package/build/modal/index.js.map +1 -1
- package/build/modal/use-modal-exit-animation.js.map +1 -1
- package/build/navigation/group/index.js.map +1 -1
- package/build/navigation/item/base.js.map +1 -1
- package/build/navigation/menu/index.js.map +1 -1
- package/build/navigation/menu/menu-title-search.js +2 -2
- package/build/navigation/menu/menu-title-search.js.map +1 -1
- package/build/navigation/menu/menu-title.js.map +1 -1
- package/build/navigation/styles/navigation-styles.js.map +1 -1
- package/build/navigator/navigator/component.js.map +1 -1
- package/build/navigator/navigator-button/hook.js.map +1 -1
- package/build/number-control/styles/number-control-styles.js.map +1 -1
- package/build/palette-edit/index.js +25 -2
- package/build/palette-edit/index.js.map +1 -1
- package/build/popover/index.js +1 -1
- package/build/popover/index.js.map +1 -1
- package/build/popover/overlay-middlewares.js.map +1 -1
- package/build/popover/utils.js.map +1 -1
- package/build/progress-bar/index.js.map +1 -1
- package/build/progress-bar/styles.js.map +1 -1
- package/build/query-controls/index.js.map +1 -1
- package/build/query-controls/index.native.js.map +1 -1
- package/build/radio-control/index.js.map +1 -1
- package/build/radio-control/index.native.js.map +1 -1
- package/build/range-control/index.js.map +1 -1
- package/build/range-control/index.native.js.map +1 -1
- package/build/range-control/rail.js.map +1 -1
- package/build/range-control/styles/range-control-styles.js +32 -32
- package/build/range-control/styles/range-control-styles.js.map +1 -1
- package/build/range-control/tooltip.js +1 -1
- package/build/range-control/tooltip.js.map +1 -1
- package/build/range-control/utils.js.map +1 -1
- package/build/resizable-box/resize-tooltip/label.js.map +1 -1
- package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
- package/build/responsive-wrapper/index.js.map +1 -1
- package/build/sandbox/index.js.map +1 -1
- package/build/sandbox/index.native.js.map +1 -1
- package/build/search-control/index.js +6 -0
- package/build/search-control/index.js.map +1 -1
- package/build/search-control/index.native.js.map +1 -1
- package/build/search-control/types.js.map +1 -1
- package/build/select-control/index.js.map +1 -1
- package/build/select-control/index.native.js.map +1 -1
- package/build/slot-fill/index.js.map +1 -1
- package/build/spinner/styles.js.map +1 -1
- package/build/style-provider/index.js +1 -0
- package/build/style-provider/index.js.map +1 -1
- package/build/surface/hook.js.map +1 -1
- package/build/surface/styles.js.map +1 -1
- package/build/tab-panel/index.js.map +1 -1
- package/build/tabs/index.js.map +1 -1
- package/build/tabs/styles.js +30 -12
- package/build/tabs/styles.js.map +1 -1
- package/build/tabs/tab.js +7 -2
- package/build/tabs/tab.js.map +1 -1
- package/build/tabs/tablist.js +47 -48
- package/build/tabs/tablist.js.map +1 -1
- package/build/tabs/tabpanel.js.map +1 -1
- package/build/text/get-line-height.js.map +1 -1
- package/build/text/styles/text-mixins.native.js.map +1 -1
- package/build/text/utils.js.map +1 -1
- package/build/text-control/index.native.js.map +1 -1
- package/build/text-highlight/index.js.map +1 -1
- package/build/textarea-control/index.js.map +1 -1
- package/build/theme/color-algorithms.js.map +1 -1
- package/build/theme/styles.js.map +1 -1
- package/build/toggle-control/index.js.map +1 -1
- package/build/toggle-control/index.native.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js +9 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +2 -60
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-base/component.js +10 -10
- package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build/toggle-group-control/types.js.map +1 -1
- package/build/toolbar/toolbar/index.js.map +1 -1
- package/build/tools-panel/styles.js.map +1 -1
- package/build/tooltip/index.js +5 -1
- package/build/tooltip/index.js.map +1 -1
- package/build/unit-control/index.js.map +1 -1
- package/build/unit-control/utils.js.map +1 -1
- package/build/utils/breakpoint.js.map +1 -1
- package/build/utils/colors-values.js.map +1 -1
- package/build/utils/config-values.js.map +1 -1
- package/build/utils/font-size.js.map +1 -1
- package/build/utils/hooks/use-animated-offset-rect.js +80 -0
- package/build/utils/hooks/use-animated-offset-rect.js.map +1 -0
- package/build/utils/hooks/use-cx.js.map +1 -1
- package/build/utils/math.js +2 -2
- package/build/utils/math.js.map +1 -1
- package/build/utils/space.js.map +1 -1
- package/build/utils/unit-values.js.map +1 -1
- package/build/utils/use-responsive-value.js.map +1 -1
- package/build-module/alignment-matrix-control/cell.js +1 -2
- package/build-module/alignment-matrix-control/cell.js.map +1 -1
- package/build-module/alignment-matrix-control/icon.js.map +1 -1
- package/build-module/alignment-matrix-control/types.js.map +1 -1
- package/build-module/alignment-matrix-control/utils.js.map +1 -1
- package/build-module/angle-picker-control/angle-circle.js.map +1 -1
- package/build-module/angle-picker-control/index.js +1 -2
- package/build-module/angle-picker-control/index.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.js +4 -6
- package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.native.js +1 -2
- package/build-module/autocomplete/autocompleter-ui.native.js.map +1 -1
- package/build-module/autocomplete/get-default-use-items.js.map +1 -1
- package/build-module/autocomplete/index.js +2 -3
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/base-control/hooks.js.map +1 -1
- package/build-module/base-control/index.js +1 -2
- package/build-module/base-control/index.js.map +1 -1
- package/build-module/base-control/index.native.js +1 -2
- package/build-module/base-control/index.native.js.map +1 -1
- package/build-module/border-box-control/border-box-control/component.js +1 -2
- package/build-module/border-box-control/border-box-control/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/component.js +1 -2
- package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build-module/border-box-control/styles.js.map +1 -1
- package/build-module/border-box-control/utils.js.map +1 -1
- package/build-module/border-control/border-control/component.js +1 -2
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/border-control/border-control/hook.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/component.js +1 -3
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
- package/build-module/border-control/styles.js.map +1 -1
- package/build-module/box-control/all-input-control.js +1 -3
- package/build-module/box-control/all-input-control.js.map +1 -1
- package/build-module/box-control/axial-input-controls.js +1 -3
- package/build-module/box-control/axial-input-controls.js.map +1 -1
- package/build-module/box-control/icon.js +1 -2
- package/build-module/box-control/icon.js.map +1 -1
- package/build-module/box-control/index.js +1 -2
- package/build-module/box-control/index.js.map +1 -1
- package/build-module/box-control/input-controls.js +1 -3
- package/build-module/box-control/input-controls.js.map +1 -1
- package/build-module/button/index.js +1 -3
- package/build-module/button/index.js.map +1 -1
- package/build-module/button/index.native.js +2 -3
- package/build-module/button/index.native.js.map +1 -1
- package/build-module/card/card/component.js +2 -3
- package/build-module/card/card/component.js.map +1 -1
- package/build-module/card/styles.js.map +1 -1
- package/build-module/checkbox-control/index.js +1 -2
- package/build-module/checkbox-control/index.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker-option.js +1 -2
- package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker.js +1 -2
- package/build-module/circular-option-picker/circular-option-picker.js.map +1 -1
- package/build-module/color-indicator/index.native.js +1 -2
- package/build-module/color-indicator/index.native.js.map +1 -1
- package/build-module/color-palette/index.js +1 -2
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-palette/index.native.js +3 -4
- package/build-module/color-palette/index.native.js.map +1 -1
- package/build-module/color-picker/component.js +1 -2
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/hsl-input.js +1 -3
- package/build-module/color-picker/hsl-input.js.map +1 -1
- package/build-module/color-picker/hsv-color-picker.native.js +1 -2
- package/build-module/color-picker/hsv-color-picker.native.js.map +1 -1
- package/build-module/color-picker/hue-picker.native.js +1 -2
- package/build-module/color-picker/hue-picker.native.js.map +1 -1
- package/build-module/color-picker/index.native.js +1 -3
- package/build-module/color-picker/index.native.js.map +1 -1
- package/build-module/color-picker/input-with-slider.js +1 -2
- package/build-module/color-picker/input-with-slider.js.map +1 -1
- package/build-module/color-picker/rgb-input.js +1 -3
- package/build-module/color-picker/rgb-input.js.map +1 -1
- package/build-module/color-picker/saturation-picker.native.js +1 -2
- package/build-module/color-picker/saturation-picker.native.js.map +1 -1
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/index.js +2 -3
- package/build-module/combobox-control/index.js.map +1 -1
- package/build-module/composite/legacy/index.js.map +1 -1
- package/build-module/confirm-dialog/component.js +1 -3
- package/build-module/confirm-dialog/component.js.map +1 -1
- package/build-module/context/context-connect.js +1 -0
- package/build-module/context/context-connect.js.map +1 -1
- package/build-module/context/context-system-provider.js +1 -1
- package/build-module/context/context-system-provider.js.map +1 -1
- package/build-module/context/get-styled-class-name-from-key.js.map +1 -1
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js +1 -3
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build-module/custom-gradient-picker/gradient-bar/index.js +1 -2
- package/build-module/custom-gradient-picker/gradient-bar/index.js.map +1 -1
- package/build-module/custom-gradient-picker/index.js +1 -2
- package/build-module/custom-gradient-picker/index.js.map +1 -1
- package/build-module/custom-gradient-picker/index.native.js +1 -3
- package/build-module/custom-gradient-picker/index.native.js.map +1 -1
- package/build-module/custom-gradient-picker/serializer.js.map +1 -1
- package/build-module/custom-gradient-picker/utils.js.map +1 -1
- package/build-module/custom-select-control/index.js +1 -3
- package/build-module/custom-select-control/index.js.map +1 -1
- package/build-module/custom-select-control-v2/custom-select.js +1 -2
- package/build-module/custom-select-control-v2/custom-select.js.map +1 -1
- package/build-module/custom-select-control-v2/item.js +1 -2
- package/build-module/custom-select-control-v2/item.js.map +1 -1
- package/build-module/custom-select-control-v2/styles.js.map +1 -1
- package/build-module/dashicon/index.js.map +1 -1
- package/build-module/date-time/date/index.js +1 -2
- package/build-module/date-time/date/index.js.map +1 -1
- package/build-module/date-time/date/styles.js.map +1 -1
- package/build-module/date-time/date-time/index.js +1 -3
- package/build-module/date-time/date-time/index.js.map +1 -1
- package/build-module/date-time/time/index.js +1 -2
- package/build-module/date-time/time/index.js.map +1 -1
- package/build-module/date-time/time/time-input/index.js +1 -2
- package/build-module/date-time/time/time-input/index.js.map +1 -1
- package/build-module/date-time/time/timezone.js.map +1 -1
- package/build-module/dimension-control/index.js +1 -3
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/draggable/index.js +1 -3
- package/build-module/draggable/index.js.map +1 -1
- package/build-module/drop-zone/index.js +2 -4
- package/build-module/drop-zone/index.js.map +1 -1
- package/build-module/dropdown/index.js +1 -2
- package/build-module/dropdown/index.js.map +1 -1
- package/build-module/dropdown/index.native.js +1 -2
- package/build-module/dropdown/index.native.js.map +1 -1
- package/build-module/dropdown-menu/index.js +1 -2
- package/build-module/dropdown-menu/index.js.map +1 -1
- package/build-module/dropdown-menu/index.native.js +1 -2
- package/build-module/dropdown-menu/index.native.js.map +1 -1
- package/build-module/dropdown-menu-v2/checkbox-item.js +1 -2
- package/build-module/dropdown-menu-v2/checkbox-item.js.map +1 -1
- package/build-module/dropdown-menu-v2/index.js +1 -3
- package/build-module/dropdown-menu-v2/index.js.map +1 -1
- package/build-module/dropdown-menu-v2/item.js +1 -2
- package/build-module/dropdown-menu-v2/item.js.map +1 -1
- package/build-module/dropdown-menu-v2/radio-item.js +1 -2
- package/build-module/dropdown-menu-v2/radio-item.js.map +1 -1
- package/build-module/dropdown-menu-v2/styles.js.map +1 -1
- package/build-module/duotone-picker/color-list-picker/index.js +1 -3
- package/build-module/duotone-picker/color-list-picker/index.js.map +1 -1
- package/build-module/duotone-picker/duotone-picker.js +1 -2
- package/build-module/duotone-picker/duotone-picker.js.map +1 -1
- package/build-module/duotone-picker/utils.js.map +1 -1
- package/build-module/elevation/hook.js.map +1 -1
- package/build-module/external-link/index.js +21 -25
- package/build-module/external-link/index.js.map +1 -1
- package/build-module/external-link/index.native.js +1 -2
- package/build-module/external-link/index.native.js.map +1 -1
- package/build-module/focal-point-picker/controls.js +1 -2
- package/build-module/focal-point-picker/controls.js.map +1 -1
- package/build-module/focal-point-picker/focal-point.native.js +1 -2
- package/build-module/focal-point-picker/focal-point.native.js.map +1 -1
- package/build-module/focal-point-picker/grid.js +1 -2
- package/build-module/focal-point-picker/grid.js.map +1 -1
- package/build-module/focal-point-picker/index.js +1 -2
- package/build-module/focal-point-picker/index.js.map +1 -1
- package/build-module/focal-point-picker/index.native.js +1 -2
- package/build-module/focal-point-picker/index.native.js.map +1 -1
- package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
- package/build-module/focal-point-picker/tooltip/index.native.js +1 -2
- package/build-module/focal-point-picker/tooltip/index.native.js.map +1 -1
- package/build-module/font-size-picker/index.js +1 -2
- package/build-module/font-size-picker/index.js.map +1 -1
- package/build-module/font-size-picker/index.native.js +1 -3
- package/build-module/font-size-picker/index.native.js.map +1 -1
- package/build-module/form-file-upload/index.js +1 -2
- package/build-module/form-file-upload/index.js.map +1 -1
- package/build-module/form-toggle/index.js +1 -2
- package/build-module/form-toggle/index.js.map +1 -1
- package/build-module/form-token-field/index.js +3 -3
- package/build-module/form-token-field/index.js.map +1 -1
- package/build-module/form-token-field/suggestions-list.js +1 -2
- package/build-module/form-token-field/suggestions-list.js.map +1 -1
- package/build-module/form-token-field/token-input.js.map +1 -1
- package/build-module/form-token-field/token.js +2 -3
- package/build-module/form-token-field/token.js.map +1 -1
- package/build-module/gradient-picker/index.js +1 -2
- package/build-module/gradient-picker/index.js.map +1 -1
- package/build-module/grid/hook.js.map +1 -1
- package/build-module/guide/index.js +1 -2
- package/build-module/guide/index.js.map +1 -1
- package/build-module/guide/page-control.js +1 -1
- package/build-module/guide/page-control.js.map +1 -1
- package/build-module/h-stack/hook.js.map +1 -1
- package/build-module/heading/hook.js.map +1 -1
- package/build-module/higher-order/with-fallback-styles/index.js +3 -4
- package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/input-base.js +1 -2
- package/build-module/input-control/input-base.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/item-group/styles.js.map +1 -1
- package/build-module/keyboard-shortcuts/index.js +1 -3
- package/build-module/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/menu-group/index.js +1 -2
- package/build-module/menu-group/index.js.map +1 -1
- package/build-module/menu-item/index.js +1 -2
- package/build-module/menu-item/index.js.map +1 -1
- package/build-module/menu-items-choice/index.js +1 -2
- package/build-module/menu-items-choice/index.js.map +1 -1
- package/build-module/mobile/badge/index.native.js +1 -3
- package/build-module/mobile/badge/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -2
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/cell.native.js +5 -6
- package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/color-cell.native.js +1 -2
- package/build-module/mobile/bottom-sheet/color-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/index.native.js +1 -3
- package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js +1 -2
- package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js +1 -2
- package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/range-cell.native.js +2 -3
- package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/range-text-input.native.js +1 -2
- package/build-module/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +2 -3
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js +1 -2
- package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js.map +1 -1
- package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js +1 -2
- package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js.map +1 -1
- package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js +1 -3
- package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/switch-cell.native.js +4 -4
- package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-select-control/index.native.js +1 -3
- package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-text-control/index.native.js +1 -3
- package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
- package/build-module/mobile/color-settings/gradient-picker-screen.native.js +1 -2
- package/build-module/mobile/color-settings/gradient-picker-screen.native.js.map +1 -1
- package/build-module/mobile/color-settings/index.native.js +1 -2
- package/build-module/mobile/color-settings/index.native.js.map +1 -1
- package/build-module/mobile/color-settings/palette.screen.native.js +1 -3
- package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
- package/build-module/mobile/cycle-select-control/index.native.js.map +1 -1
- package/build-module/mobile/focal-point-settings-panel/index.native.js +1 -2
- package/build-module/mobile/focal-point-settings-panel/index.native.js.map +1 -1
- package/build-module/mobile/gradient/index.native.js +1 -2
- package/build-module/mobile/gradient/index.native.js.map +1 -1
- package/build-module/mobile/html-text-input/index.native.js +1 -2
- package/build-module/mobile/html-text-input/index.native.js.map +1 -1
- package/build-module/mobile/image/icon-retry.native.js +1 -2
- package/build-module/mobile/image/icon-retry.native.js.map +1 -1
- package/build-module/mobile/image/image-editing-button.native.js +1 -2
- package/build-module/mobile/image/image-editing-button.native.js.map +1 -1
- package/build-module/mobile/image/index.native.js +1 -3
- package/build-module/mobile/image/index.native.js.map +1 -1
- package/build-module/mobile/keyboard-avoiding-view/index.ios.js +1 -2
- package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
- package/build-module/mobile/link-picker/index.native.js +2 -3
- package/build-module/mobile/link-picker/index.native.js.map +1 -1
- package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
- package/build-module/mobile/link-settings/index.native.js +1 -3
- package/build-module/mobile/link-settings/index.native.js.map +1 -1
- package/build-module/mobile/link-settings/link-settings-navigation.native.js +1 -2
- package/build-module/mobile/link-settings/link-settings-navigation.native.js.map +1 -1
- package/build-module/mobile/picker/index.android.js +1 -2
- package/build-module/mobile/picker/index.android.js.map +1 -1
- package/build-module/mobile/segmented-control/index.native.js +1 -2
- package/build-module/mobile/segmented-control/index.native.js.map +1 -1
- package/build-module/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
- package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
- package/build-module/modal/aria-helper.js +2 -1
- package/build-module/modal/aria-helper.js.map +1 -1
- package/build-module/modal/index.js +3 -4
- package/build-module/modal/index.js.map +1 -1
- package/build-module/modal/use-modal-exit-animation.js.map +1 -1
- package/build-module/navigation/back-button/index.js +1 -2
- package/build-module/navigation/back-button/index.js.map +1 -1
- package/build-module/navigation/group/index.js +1 -2
- package/build-module/navigation/group/index.js.map +1 -1
- package/build-module/navigation/item/base-content.js +1 -3
- package/build-module/navigation/item/base-content.js.map +1 -1
- package/build-module/navigation/item/base.js.map +1 -1
- package/build-module/navigation/item/index.js +1 -2
- package/build-module/navigation/item/index.js.map +1 -1
- package/build-module/navigation/menu/index.js +1 -2
- package/build-module/navigation/menu/index.js.map +1 -1
- package/build-module/navigation/menu/menu-title-search.js +2 -2
- package/build-module/navigation/menu/menu-title-search.js.map +1 -1
- package/build-module/navigation/menu/menu-title.js +1 -2
- package/build-module/navigation/menu/menu-title.js.map +1 -1
- package/build-module/navigation/menu/search-no-results-found.js +1 -2
- package/build-module/navigation/menu/search-no-results-found.js.map +1 -1
- package/build-module/navigation/styles/navigation-styles.js.map +1 -1
- package/build-module/navigator/navigator/component.js.map +1 -1
- package/build-module/navigator/navigator-button/hook.js.map +1 -1
- package/build-module/notice/index.js +1 -2
- package/build-module/notice/index.js.map +1 -1
- package/build-module/notice/index.native.js +1 -3
- package/build-module/notice/index.native.js.map +1 -1
- package/build-module/number-control/index.js +1 -3
- package/build-module/number-control/index.js.map +1 -1
- package/build-module/number-control/styles/number-control-styles.js.map +1 -1
- package/build-module/palette-edit/index.js +25 -5
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/panel/actions.native.js +1 -2
- package/build-module/panel/actions.native.js.map +1 -1
- package/build-module/panel/body.js +1 -2
- package/build-module/panel/body.js.map +1 -1
- package/build-module/panel/body.native.js +1 -2
- package/build-module/panel/body.native.js.map +1 -1
- package/build-module/panel/header.js +1 -2
- package/build-module/panel/header.js.map +1 -1
- package/build-module/panel/index.js +1 -2
- package/build-module/panel/index.js.map +1 -1
- package/build-module/placeholder/index.js +1 -2
- package/build-module/placeholder/index.js.map +1 -1
- package/build-module/popover/index.js +2 -4
- package/build-module/popover/index.js.map +1 -1
- package/build-module/popover/overlay-middlewares.js.map +1 -1
- package/build-module/popover/utils.js.map +1 -1
- package/build-module/progress-bar/index.js +1 -2
- package/build-module/progress-bar/index.js.map +1 -1
- package/build-module/progress-bar/styles.js.map +1 -1
- package/build-module/query-controls/index.js.map +1 -1
- package/build-module/query-controls/index.native.js +1 -3
- package/build-module/query-controls/index.native.js.map +1 -1
- package/build-module/radio-control/index.js +1 -2
- package/build-module/radio-control/index.js.map +1 -1
- package/build-module/radio-control/index.native.js +1 -2
- package/build-module/radio-control/index.native.js.map +1 -1
- package/build-module/range-control/index.js +1 -2
- package/build-module/range-control/index.js.map +1 -1
- package/build-module/range-control/index.native.js.map +1 -1
- package/build-module/range-control/mark.js +1 -3
- package/build-module/range-control/mark.js.map +1 -1
- package/build-module/range-control/rail.js +1 -3
- package/build-module/range-control/rail.js.map +1 -1
- package/build-module/range-control/styles/range-control-styles.js +32 -32
- package/build-module/range-control/styles/range-control-styles.js.map +1 -1
- package/build-module/range-control/tooltip.js +1 -1
- package/build-module/range-control/tooltip.js.map +1 -1
- package/build-module/range-control/utils.js.map +1 -1
- package/build-module/resizable-box/index.js +1 -2
- package/build-module/resizable-box/index.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/index.js +1 -2
- package/build-module/resizable-box/resize-tooltip/index.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/label.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
- package/build-module/responsive-wrapper/index.js.map +1 -1
- package/build-module/sandbox/index.js +1 -2
- package/build-module/sandbox/index.js.map +1 -1
- package/build-module/sandbox/index.native.js +1 -2
- package/build-module/sandbox/index.native.js.map +1 -1
- package/build-module/search-control/index.js +6 -0
- package/build-module/search-control/index.js.map +1 -1
- package/build-module/search-control/index.native.js +1 -2
- package/build-module/search-control/index.native.js.map +1 -1
- package/build-module/search-control/types.js.map +1 -1
- package/build-module/select-control/index.js.map +1 -1
- package/build-module/select-control/index.native.js.map +1 -1
- package/build-module/slot-fill/index.js +1 -3
- package/build-module/slot-fill/index.js.map +1 -1
- package/build-module/slot-fill/slot.js +1 -2
- package/build-module/slot-fill/slot.js.map +1 -1
- package/build-module/snackbar/index.js +1 -2
- package/build-module/snackbar/index.js.map +1 -1
- package/build-module/snackbar/list.js +1 -2
- package/build-module/snackbar/list.js.map +1 -1
- package/build-module/spinner/index.js +1 -2
- package/build-module/spinner/index.js.map +1 -1
- package/build-module/spinner/styles.js.map +1 -1
- package/build-module/style-provider/index.js +1 -0
- package/build-module/style-provider/index.js.map +1 -1
- package/build-module/surface/hook.js.map +1 -1
- package/build-module/surface/styles.js.map +1 -1
- package/build-module/tab-panel/index.js +1 -2
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-module/tabs/index.js.map +1 -1
- package/build-module/tabs/styles.js +28 -6
- package/build-module/tabs/styles.js.map +1 -1
- package/build-module/tabs/tab.js +9 -4
- package/build-module/tabs/tab.js.map +1 -1
- package/build-module/tabs/tablist.js +47 -48
- package/build-module/tabs/tablist.js.map +1 -1
- package/build-module/tabs/tabpanel.js.map +1 -1
- package/build-module/text/get-line-height.js.map +1 -1
- package/build-module/text/styles/text-mixins.native.js.map +1 -1
- package/build-module/text/utils.js.map +1 -1
- package/build-module/text-control/index.native.js.map +1 -1
- package/build-module/text-highlight/index.js +1 -2
- package/build-module/text-highlight/index.js.map +1 -1
- package/build-module/textarea-control/index.js.map +1 -1
- package/build-module/theme/color-algorithms.js.map +1 -1
- package/build-module/theme/styles.js.map +1 -1
- package/build-module/tip/index.js +1 -2
- package/build-module/tip/index.js.map +1 -1
- package/build-module/toggle-control/index.js +1 -2
- package/build-module/toggle-control/index.js.map +1 -1
- package/build-module/toggle-control/index.native.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +10 -2
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +4 -65
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +11 -12
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build-module/toggle-group-control/types.js.map +1 -1
- package/build-module/toolbar/toolbar/index.js.map +1 -1
- package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js +2 -2
- package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -1
- package/build-module/toolbar/toolbar-group/index.js +1 -2
- package/build-module/toolbar/toolbar-group/index.js.map +1 -1
- package/build-module/tools-panel/styles.js.map +1 -1
- package/build-module/tools-panel/tools-panel/component.js +1 -2
- package/build-module/tools-panel/tools-panel/component.js.map +1 -1
- package/build-module/tools-panel/tools-panel-header/component.js +1 -3
- package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
- package/build-module/tooltip/index.js +6 -3
- package/build-module/tooltip/index.js.map +1 -1
- package/build-module/tooltip/index.native.js +1 -3
- package/build-module/tooltip/index.native.js.map +1 -1
- package/build-module/tree-grid/cell.js +1 -2
- package/build-module/tree-grid/cell.js.map +1 -1
- package/build-module/unit-control/index.js.map +1 -1
- package/build-module/unit-control/index.native.js +1 -3
- package/build-module/unit-control/index.native.js.map +1 -1
- package/build-module/unit-control/utils.js.map +1 -1
- package/build-module/utils/breakpoint.js.map +1 -1
- package/build-module/utils/colors-values.js.map +1 -1
- package/build-module/utils/config-values.js.map +1 -1
- package/build-module/utils/font-size.js.map +1 -1
- package/build-module/utils/hooks/use-animated-offset-rect.js +74 -0
- package/build-module/utils/hooks/use-animated-offset-rect.js.map +1 -0
- package/build-module/utils/hooks/use-cx.js.map +1 -1
- package/build-module/utils/math.js +2 -2
- package/build-module/utils/math.js.map +1 -1
- package/build-module/utils/space.js.map +1 -1
- package/build-module/utils/unit-values.js.map +1 -1
- package/build-module/utils/use-responsive-value.js.map +1 -1
- package/build-style/style-rtl.css +8 -5
- package/build-style/style.css +8 -5
- package/build-types/alignment-matrix-control/types.d.ts +2 -0
- package/build-types/alignment-matrix-control/types.d.ts.map +1 -1
- package/build-types/drop-zone/index.d.ts.map +1 -1
- package/build-types/modal/aria-helper.d.ts.map +1 -1
- package/build-types/palette-edit/index.d.ts +3 -0
- package/build-types/palette-edit/index.d.ts.map +1 -1
- package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
- package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
- package/build-types/search-control/index.d.ts.map +1 -1
- package/build-types/search-control/stories/index.story.d.ts +0 -8
- package/build-types/search-control/stories/index.story.d.ts.map +1 -1
- package/build-types/search-control/types.d.ts +3 -0
- package/build-types/search-control/types.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts +7 -0
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/tabs/tablist.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/types.d.ts +1 -0
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/tooltip/index.d.ts.map +1 -1
- package/build-types/utils/hooks/use-animated-offset-rect.d.ts +62 -0
- package/build-types/utils/hooks/use-animated-offset-rect.d.ts.map +1 -0
- package/package.json +20 -20
- package/schemas/docs-manifest.json +38 -0
- package/src/alignment-matrix-control/README.md +46 -36
- package/src/alignment-matrix-control/docs-manifest.json +12 -0
- package/src/alignment-matrix-control/types.ts +2 -0
- package/src/angle-picker-control/README.md +36 -23
- package/src/angle-picker-control/docs-manifest.json +5 -0
- package/src/button/style.scss +5 -1
- package/src/composite/test/index.tsx +629 -38
- package/src/drop-zone/index.tsx +1 -2
- package/src/drop-zone/style.scss +1 -1
- package/src/modal/aria-helper.ts +1 -0
- package/src/palette-edit/index.tsx +30 -5
- package/src/palette-edit/test/index.tsx +50 -1
- package/src/range-control/styles/range-control-styles.ts +19 -10
- package/src/range-control/tooltip.tsx +1 -1
- package/src/search-control/README.md +2 -0
- package/src/search-control/index.tsx +7 -0
- package/src/search-control/stories/index.story.tsx +0 -15
- package/src/search-control/test/index.tsx +4 -1
- package/src/search-control/types.ts +3 -0
- package/src/tabs/styles.ts +116 -47
- package/src/tabs/tab.tsx +8 -2
- package/src/tabs/tablist.tsx +48 -49
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -6
- package/src/toggle-group-control/test/index.tsx +39 -0
- package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +11 -1
- package/src/toggle-group-control/toggle-group-control/component.tsx +3 -98
- package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +15 -15
- package/src/toggle-group-control/types.ts +1 -0
- package/src/tooltip/index.tsx +8 -1
- package/src/tooltip/test/index.tsx +78 -0
- package/src/utils/hooks/use-animated-offset-rect.ts +107 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -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","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":[]}
|
|
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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_anglePickerControl","_interopRequireDefault","_gradientBar","_flex","_selectControl","_vStack","_utils","_serializer","_constants","_customGradientPickerStyles","_jsxRuntime","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","serializeGradient","type","jsx","default","GradientTypePicker","onSetLinearGradient","undefined","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","__nextHasNoMarginBottom","className","label","__","labelPosition","options","GRADIENT_OPTIONS","size","CustomGradientPicker","__experimentalIsRenderedInSidebar","getGradientAstWithDefault","background","getLinearGradientRepresentation","controlPoints","colorStops","map","colorStop","color","getStopCssColor","position","parseInt","length","jsxs","VStack","spacing","children","newControlPoints","getGradientAstWithControlPoints","Flex","gap","SelectWrapper","AccessoryWrapper","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { type LinearGradientNode } from 'gradient-parser';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} satisfies LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n *\n * return (\n * <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n */\nexport function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_i18n","require","_anglePickerControl","_interopRequireDefault","_gradientBar","_flex","_selectControl","_vStack","_utils","_serializer","_constants","_customGradientPickerStyles","_jsxRuntime","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","serializeGradient","type","jsx","default","GradientTypePicker","onSetLinearGradient","undefined","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","__nextHasNoMarginBottom","className","label","__","labelPosition","options","GRADIENT_OPTIONS","size","CustomGradientPicker","__experimentalIsRenderedInSidebar","getGradientAstWithDefault","background","getLinearGradientRepresentation","controlPoints","colorStops","map","colorStop","color","getStopCssColor","position","parseInt","length","jsxs","VStack","spacing","children","newControlPoints","getGradientAstWithControlPoints","Flex","gap","SelectWrapper","AccessoryWrapper","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { type LinearGradientNode } from 'gradient-parser';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} satisfies LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n *\n * return (\n * <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n */\nexport function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":";;;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAMA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAKA,IAAAU,2BAAA,GAAAV,OAAA;AAGgD,IAAAW,WAAA,GAAAX,OAAA;AAjChD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AA4BA,MAAMY,mBAAmB,GAAGA,CAAE;EAC7BC,WAAW;EACXC,WAAW;EACXC;AACyB,CAAC,KAAM;EAAA,IAAAC,qBAAA;EAChC,MAAMC,KAAK,IAAAD,qBAAA,GACVH,WAAW,EAAEK,WAAW,EAAEC,KAAK,cAAAH,qBAAA,cAAAA,qBAAA,GAAII,wCAA6B;EACjE,MAAMC,aAAa,GAAKC,QAAgB,IAAM;IAC7CP,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGV,WAAW;MACdK,WAAW,EAAE;QACZM,IAAI,EAAE,SAAS;QACfL,KAAK,EAAE,GAAIG,QAAQ;MACpB;IACD,CAAE,CACH,CAAC;EACF,CAAC;EACD,oBACC,IAAAX,WAAA,CAAAc,GAAA,EAACxB,mBAAA,CAAAyB,OAAkB;IAClBX,QAAQ,EAAGM,aAAe;IAC1BF,KAAK,EAAGL,WAAW,GAAGG,KAAK,GAAG;EAAI,CAClC,CAAC;AAEJ,CAAC;AAED,MAAMU,kBAAkB,GAAGA,CAAE;EAC5Bd,WAAW;EACXC,WAAW;EACXC;AACwB,CAAC,KAAM;EAC/B,MAAM;IAAES;EAAK,CAAC,GAAGX,WAAW;EAE5B,MAAMe,mBAAmB,GAAGA,CAAA,KAAM;IACjCb,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGV,WAAW;MACdK,WAAW,EAAEL,WAAW,CAACK,WAAW,GACjCW,SAAS,GACTC,0CAA+B;MAClCN,IAAI,EAAE;IACP,CAA+B,CAChC,CAAC;EACF,CAAC;EAED,MAAMO,mBAAmB,GAAGA,CAAA,KAAM;IACjC,MAAM;MAAEb,WAAW;MAAE,GAAGc;IAAgB,CAAC,GAAGnB,WAAW;IACvDE,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGS,eAAe;MAClBR,IAAI,EAAE;IACP,CAAE,CACH,CAAC;EACF,CAAC;EAED,MAAMS,cAAc,GAAKC,IAAY,IAAM;IAC1C,IAAKA,IAAI,KAAK,iBAAiB,EAAG;MACjCN,mBAAmB,CAAC,CAAC;IACtB;IACA,IAAKM,IAAI,KAAK,iBAAiB,EAAG;MACjCH,mBAAmB,CAAC,CAAC;IACtB;EACD,CAAC;EAED,oBACC,IAAApB,WAAA,CAAAc,GAAA,EAACpB,cAAA,CAAAqB,OAAa;IACbS,uBAAuB;IACvBC,SAAS,EAAC,gDAAgD;IAC1DC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,aAAa,EAAC,KAAK;IACnBxB,QAAQ,EAAGkB,cAAgB;IAC3BO,OAAO,EAAGC,2BAAkB;IAC5BC,IAAI,EAAC,kBAAkB;IACvBvB,KAAK,EAAGL,WAAW,GAAGU,IAAI,GAAGK;EAAW,CACxC,CAAC;AAEJ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASc,oBAAoBA,CAAE;EACrCxB,KAAK;EACLJ,QAAQ;EACR6B,iCAAiC,GAAG;AACV,CAAC,EAAG;EAC9B,MAAM;IAAE/B,WAAW;IAAEC;EAAY,CAAC,GAAG,IAAA+B,gCAAyB,EAAE1B,KAAM,CAAC;;EAEvE;EACA;EACA;EACA,MAAM2B,UAAU,GAAG,IAAAC,sCAA+B,EAAElC,WAAY,CAAC;;EAEjE;EACA;EACA,MAAMmC,aAAa,GAAGnC,WAAW,CAACoC,UAAU,CAACC,GAAG,CAAIC,SAAS,IAAM;IAClE,OAAO;MACNC,KAAK,EAAE,IAAAC,sBAAe,EAAEF,SAAU,CAAC;MACnC;MACA;MACA;MACAG,QAAQ,EAAEC,QAAQ,CAAEJ,SAAS,CAACK,MAAM,CAACrC,KAAM;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,oBACC,IAAAR,WAAA,CAAA8C,IAAA,EAACnD,OAAA,CAAAoD,MAAM;IAACC,OAAO,EAAG,CAAG;IAACvB,SAAS,EAAC,mCAAmC;IAAAwB,QAAA,gBAClE,IAAAjD,WAAA,CAAAc,GAAA,EAACtB,YAAA,CAAAuB,OAAiB;MACjBkB,iCAAiC,EAChCA,iCACA;MACDE,UAAU,EAAGA,UAAY;MACzBhC,WAAW,EAAGA,WAAa;MAC3BK,KAAK,EAAG6B,aAAe;MACvBjC,QAAQ,EAAK8C,gBAAgB,IAAM;QAClC9C,QAAQ,CACP,IAAAQ,6BAAiB,EAChB,IAAAuC,sCAA+B,EAC9BjD,WAAW,EACXgD,gBACD,CACD,CACD,CAAC;MACF;IAAG,CACH,CAAC,eACF,IAAAlD,WAAA,CAAA8C,IAAA,EAACrD,KAAA,CAAA2D,IAAI;MACJC,GAAG,EAAG,CAAG;MACT5B,SAAS,EAAC,4CAA4C;MAAAwB,QAAA,gBAEtD,IAAAjD,WAAA,CAAAc,GAAA,EAACf,2BAAA,CAAAuD,aAAa;QAAAL,QAAA,eACb,IAAAjD,WAAA,CAAAc,GAAA,EAACE,kBAAkB;UAClBd,WAAW,EAAGA,WAAa;UAC3BC,WAAW,EAAGA,WAAa;UAC3BC,QAAQ,EAAGA;QAAU,CACrB;MAAC,CACY,CAAC,eAChB,IAAAJ,WAAA,CAAAc,GAAA,EAACf,2BAAA,CAAAwD,gBAAgB;QAAAN,QAAA,EACd/C,WAAW,CAACW,IAAI,KAAK,iBAAiB,iBACvC,IAAAb,WAAA,CAAAc,GAAA,EAACb,mBAAmB;UACnBC,WAAW,EAAGA,WAAa;UAC3BC,WAAW,EAAGA,WAAa;UAC3BC,QAAQ,EAAGA;QAAU,CACrB;MACD,CACgB,CAAC;IAAA,CACd,CAAC;EAAA,CACA,CAAC;AAEX;AAAC,IAAAoD,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAEciB,oBAAoB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;;AAGO,SAASA,sBAAsBA,CAAE;EACvCC,IAAI;EACJC;AACyB,CAAC,EAAG;EAC7B,IAAKD,IAAI,KAAK,SAAS,EAAG;IACzB,OAAOC,KAAK;EACb;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,
|
|
1
|
+
{"version":3,"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;;AAGO,SAASA,sBAAsBA,CAAE;EACvCC,IAAI;EACJC;AACyB,CAAC,EAAG;EAC7B,IAAKD,IAAI,KAAK,SAAS,EAAG;IACzB,OAAOC,KAAK;EACb;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,OAAO,IAAKC,KAAK,EAAG;EACrB;EACA,OAAO,GAAID,IAAI,IAAMC,KAAK,CAACC,IAAI,CAAE,GAAI,CAAC,GAAI;AAC3C;AAEO,SAASC,yBAAyBA,CACxCC,QAA8C,EAC7C;EACD,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,EAAE;EACV;EACA,MAAM;IAAEH,KAAK;IAAED;EAAK,CAAC,GAAGI,QAAQ;EAChC,OAAO,GAAIH,KAAK,GAAKD,IAAI,EAAG;AAC7B;AAEO,SAASK,0BAA0BA,CAAE;EAC3CL,IAAI;EACJC,KAAK;EACLK;AACyB,CAAC,EAAG;EAC7B,OAAO,GAAIP,sBAAsB,CAAE;IAClCC,IAAI;IACJC;EACD,CAA8B,CAAC,IAAME,yBAAyB,CAAEG,MAAO,CAAC,EAAG;AAC5E;AAEO,SAASC,4BAA4BA,CAC3CC,WAAyD,EACxD;EACD,IACCC,KAAK,CAACC,OAAO,CAAEF,WAAY,CAAC,IAC5B,CAAEA,WAAW,IACbA,WAAW,CAACR,IAAI,KAAK,SAAS,EAC7B;IACD;EACD;EACA,OAAO,GAAIQ,WAAW,CAACP,KAAK,KAAM;AACnC;AAEO,SAASU,iBAAiBA,CAAE;EAClCX,IAAI;EACJQ,WAAW;EACXI;AAC4B,CAAC,EAAG;EAChC,MAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAY,CAAC;EACzE,MAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAAI,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAAM;IACpC,MAAMC,mBAAmB,GACxBC,SAAmC,IAC/B;MACJ,OAAOA,SAAS,EAAEb,MAAM,EAAEL,KAAK,KAAKmB,SAAS,GAC1C,CAAC,GACDC,QAAQ,CAAEF,SAAS,CAACb,MAAM,CAACL,KAAM,CAAC;IACtC,CAAC;IAED,OACCiB,mBAAmB,CAAEF,UAAW,CAAC,GACjCE,mBAAmB,CAAED,UAAW,CAAC;EAEnC,CAAE,CAAC,CACFK,GAAG,CAAEjB,0BAA2B,CAAC;EACnC,OAAO,GAAIL,IAAI,IAAM,CAAEa,qBAAqB,EAAE,GAAGC,oBAAoB,CAAE,CACrES,MAAM,CAAEC,OAAQ,CAAC,CACjBtB,IAAI,CAAE,GAAI,CAAC,GAAI;AAClB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_gradientParser","_interopRequireDefault","require","_colord","_names","_constants","_serializer","extend","namesPlugin","getLinearGradientRepresentation","gradientAST","serializeGradient","type","orientation","HORIZONTAL_GRADIENT_ORIENTATION","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","hasGradient","valueToParse","DEFAULT_GRADIENT","gradientParser","parse","error","console","warn","Array","isArray","DIRECTIONAL_ORIENTATION_ANGLE_MAP","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","colord","toRgb","getStopCssColor","colorStop","join"],"sources":["@wordpress/components/src/custom-gradient-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\nimport type { ControlPoint } from './types';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation(\n\tgradientAST: gradientParser.GradientNode\n) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item: gradientParser.ColorStop ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value?: string | null ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST: gradientParser.GradientNode | undefined;\n\tlet hasGradient = !! value;\n\n\tconst valueToParse = value ?? DEFAULT_GRADIENT;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( valueToParse )[ 0 ];\n\t} catch ( error ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.CustomGradientPicker failed to parse the gradient with error',\n\t\t\terror\n\t\t);\n\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\thasGradient = false;\n\t}\n\n\tif (\n\t\t! Array.isArray( gradientAST.orientation ) &&\n\t\tgradientAST.orientation?.type === 'directional'\n\t) {\n\t\tgradientAST.orientation = {\n\t\t\ttype: 'angular',\n\t\t\tvalue: DIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString(),\n\t\t};\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: `${ step * index }`,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t}\n\n\treturn { gradientAST, hasGradient };\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST: gradientParser.GradientNode,\n\tnewControlPoints: ControlPoint[]\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue:\n\t\t\t\t\ta < 1\n\t\t\t\t\t\t? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]\n\t\t\t\t\t\t: [ `${ r }`, `${ g }`, `${ b }` ],\n\t\t\t};\n\t\t} ),\n\t} as gradientParser.GradientNode;\n}\n\nexport function getStopCssColor( colorStop: gradientParser.ColorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"],"mappings":";;;;;;;;;;AAGA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAKA,IAAAG,UAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AASA,IAAAK,cAAM,EAAE,CAAEC,cAAW,CAAG,CAAC;AAElB,SAASC,+BAA+BA,CAC9CC,WAAwC,EACvC;EACD,OAAO,IAAAC,6BAAiB,EAAE;IACzBC,IAAI,EAAE,iBAAiB;IACvBC,WAAW,EAAEC,0CAA+B;IAC5CC,UAAU,EAAEL,WAAW,CAACK;EACzB,CAAE,CAAC;AACJ;AAEA,SAASC,oBAAoBA,CAAEC,IAA8B,EAAG;EAC/D,OAAOA,IAAI,CAACC,MAAM,KAAKC,SAAS,IAAIF,IAAI,CAACC,MAAM,CAACN,IAAI,KAAK,GAAG;AAC7D;AAEO,SAASQ,yBAAyBA,CAAEC,KAAqB,EAAG;EAClE;EACA;EACA,IAAIX,WAAoD;EACxD,IAAIY,WAAW,GAAG,CAAC,CAAED,KAAK;EAE1B,MAAME,YAAY,GAAGF,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIG,2BAAgB;EAE9C,IAAI;IACHd,WAAW,GAAGe,uBAAc,CAACC,KAAK,CAAEH,YAAa,CAAC,CAAE,CAAC,CAAE;EACxD,CAAC,CAAC,OAAQI,KAAK,EAAG;IACjB;IACAC,OAAO,CAACC,IAAI,CACX,4EAA4E,EAC5EF,KACD,CAAC;IAEDjB,WAAW,GAAGe,uBAAc,CAACC,KAAK,CAAEF,2BAAiB,CAAC,CAAE,CAAC,CAAE;IAC3DF,WAAW,GAAG,KAAK;EACpB;EAEA,IACC,CAAEQ,KAAK,CAACC,OAAO,CAAErB,WAAW,CAACG,WAAY,CAAC,IAC1CH,WAAW,CAACG,WAAW,EAAED,IAAI,KAAK,aAAa,EAC9C;IACDF,WAAW,CAACG,WAAW,GAAG;MACzBD,IAAI,EAAE,SAAS;MACfS,KAAK,EAAEW,4CAAiC,CACvCtB,WAAW,CAACG,WAAW,CAACQ,KAAK,CAC7B,CAACY,QAAQ,CAAC;IACZ,CAAC;EACF;EAEA,IAAKvB,WAAW,CAACK,UAAU,CAACmB,IAAI,CAAElB,oBAAqB,CAAC,EAAG;IAC1D,MAAM;MAAED;IAAW,CAAC,GAAGL,WAAW;IAClC,MAAMyB,IAAI,GAAG,GAAG,IAAKpB,UAAU,CAACG,MAAM,GAAG,CAAC,CAAE;IAC5CH,UAAU,CAACqB,OAAO,CAAE,CAAEC,IAAI,EAAEC,KAAK,KAAM;MACtCD,IAAI,CAACnB,MAAM,GAAG;QACbG,KAAK,
|
|
1
|
+
{"version":3,"names":["_gradientParser","_interopRequireDefault","require","_colord","_names","_constants","_serializer","extend","namesPlugin","getLinearGradientRepresentation","gradientAST","serializeGradient","type","orientation","HORIZONTAL_GRADIENT_ORIENTATION","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","hasGradient","valueToParse","DEFAULT_GRADIENT","gradientParser","parse","error","console","warn","Array","isArray","DIRECTIONAL_ORIENTATION_ANGLE_MAP","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","colord","toRgb","getStopCssColor","colorStop","join"],"sources":["@wordpress/components/src/custom-gradient-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\nimport type { ControlPoint } from './types';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation(\n\tgradientAST: gradientParser.GradientNode\n) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item: gradientParser.ColorStop ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value?: string | null ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST: gradientParser.GradientNode | undefined;\n\tlet hasGradient = !! value;\n\n\tconst valueToParse = value ?? DEFAULT_GRADIENT;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( valueToParse )[ 0 ];\n\t} catch ( error ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.CustomGradientPicker failed to parse the gradient with error',\n\t\t\terror\n\t\t);\n\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\thasGradient = false;\n\t}\n\n\tif (\n\t\t! Array.isArray( gradientAST.orientation ) &&\n\t\tgradientAST.orientation?.type === 'directional'\n\t) {\n\t\tgradientAST.orientation = {\n\t\t\ttype: 'angular',\n\t\t\tvalue: DIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString(),\n\t\t};\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: `${ step * index }`,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t}\n\n\treturn { gradientAST, hasGradient };\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST: gradientParser.GradientNode,\n\tnewControlPoints: ControlPoint[]\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue:\n\t\t\t\t\ta < 1\n\t\t\t\t\t\t? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]\n\t\t\t\t\t\t: [ `${ r }`, `${ g }`, `${ b }` ],\n\t\t\t};\n\t\t} ),\n\t} as gradientParser.GradientNode;\n}\n\nexport function getStopCssColor( colorStop: gradientParser.ColorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_selectControlStyles","_inputControlStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","INLINE_PADDING","compact","CONFIG","controlPaddingXSmall","small","controlPaddingX","getSelectSize","size","heightProperty","sizes","paddingInlineStart","paddingInlineEnd","chevronIconSize","getSelectItemSize","checkmarkCorrection","Select","exports","_base","process","env","NODE_ENV","shouldForwardProp","prop","target","label","hasCustomRenderProp","css","COLORS","theme","background","foreground","truncateStyles","fontSizeStyles","inputSize","slideDownAndFade","keyframes","opacity","transform","SelectPopover","radiusSmall","elevationMedium","SelectItem","fontSize","space","gray","name","styles","map","toString","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","WithHintItemWrapper","WithHintItemHint","fontLineHeightBase","SelectedItemCheck","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport { chevronIconSize } from '../select-control/styles/select-control-styles';\nimport { fontSizeStyles } from '../input-control/styles/input-control-styles';\nimport type { CustomSelectButtonSize } from './types';\n\n// TODO: extract to common utils and apply to relevant components\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst INLINE_PADDING = {\n\tcompact: CONFIG.controlPaddingXSmall,\n\tsmall: CONFIG.controlPaddingXSmall,\n\tdefault: CONFIG.controlPaddingX,\n};\n\nconst getSelectSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >,\n\theightProperty: 'minHeight' | 'height'\n) => {\n\tconst sizes = {\n\t\tcompact: {\n\t\t\t[ heightProperty ]: 32,\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,\n\t\t},\n\t\tdefault: {\n\t\t\t[ heightProperty ]: 40,\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default + chevronIconSize,\n\t\t},\n\t\tsmall: {\n\t\t\t[ heightProperty ]: 24,\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small + chevronIconSize,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nconst getSelectItemSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >\n) => {\n\t// Used to visually align the checkmark with the chevron\n\tconst checkmarkCorrection = 6;\n\tconst sizes = {\n\t\tcompact: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,\n\t\t},\n\t\tdefault: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,\n\t\t},\n\t\tsmall: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nexport const Select = styled( Ariakit.Select, {\n\t// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component\n\tshouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',\n} )(\n\t( {\n\t\tsize,\n\t\thasCustomRenderProp,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t\thasCustomRenderProp: boolean;\n\t} ) => css`\n\t\tdisplay: block;\n\t\tbackground-color: ${ COLORS.theme.background };\n\t\tborder: none;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\ttext-align: start;\n\t\tuser-select: none;\n\t\twidth: 100%;\n\n\t\t&[data-focus-visible] {\n\t\t\toutline: none; // handled by InputBase component\n\t\t}\n\n\t\t${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }\n\t\t${ ! hasCustomRenderProp && truncateStyles }\n\t\t${ fontSizeStyles( { inputSize: size } ) }\n\t`\n);\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nexport const SelectPopover = styled( Ariakit.SelectPopover )`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground-color: ${ COLORS.theme.background };\n\tborder-radius: ${ CONFIG.radiusSmall };\n\tborder: 1px solid ${ COLORS.theme.foreground };\n\tbox-shadow: ${ CONFIG.elevationMedium };\n\n\t/* z-index(\".components-popover\") */\n\tz-index: 1000000;\n\n\tmax-height: min( var( --popover-available-height, 400px ), 400px );\n\toverflow: auto;\n\toverscroll-behavior: contain;\n\n\t/* The smallest size without overflowing the container. */\n\tmin-width: min-content;\n\n\t/* Animation */\n\t&[data-open] {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\t\t\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\t\tanimation-name: ${ slideDownAndFade };\n\t\t\twill-change: transform, opacity;\n\t\t}\n\t}\n\n\t&[data-focus-visible] {\n\t\t/* The outline will be on the trigger, rather than the popover. */\n\t\toutline: none;\n\t}\n`;\n\nexport const SelectItem = styled( Ariakit.SelectItem )(\n\t( {\n\t\tsize,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t} ) => css`\n\t\tcursor: default;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tfont-size: ${ CONFIG.fontSize };\n\t\t// TODO: reassess line-height for non-legacy v2\n\t\tline-height: 28px;\n\t\tpadding-block: ${ space( 2 ) };\n\t\tscroll-margin: ${ space( 1 ) };\n\t\tuser-select: none;\n\n\t\t&[aria-disabled='true'] {\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&[data-active-item] {\n\t\t\tbackground-color: ${ COLORS.theme.gray[ 300 ] };\n\t\t}\n\n\t\t${ getSelectItemSize( size ) }\n\t`\n);\n\nconst truncateStyles = css`\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nexport const SelectedExperimentalHintWrapper = styled.div`\n\t${ truncateStyles }\n`;\n\nexport const SelectedExperimentalHintItem = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\tmargin-inline-start: ${ space( 2 ) };\n`;\n\nexport const WithHintItemWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tflex: 1;\n\tcolumn-gap: ${ space( 4 ) };\n`;\n\nexport const WithHintItemHint = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\ttext-align: initial;\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\tpadding-inline-end: ${ space( 1 ) };\n\tmargin-block: ${ space( 1 ) };\n`;\n\nexport const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-inline-start: ${ space( 2 ) };\n\n\t// Keep the checkmark vertically aligned at the top. Since the item text has a\n\t// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin\n\t// is applied to keep the correct alignment between the text and the checkmark.\n\talign-self: start;\n\tmargin-block-start: 2px;\n\n\t// Since the checkmark's dimensions are applied with 'em' units, setting a\n\t// font size of 0 allows the space reserved for the checkmark to collapse for\n\t// items that are not selected or that don't have an associated item hint.\n\tfont-size: 0;\n\t${ WithHintItemWrapper } ~ &,\n\t&:not(:empty) {\n\t\tfont-size: 24px; // Size of checkmark icon\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_selectControlStyles","_inputControlStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","INLINE_PADDING","compact","CONFIG","controlPaddingXSmall","small","controlPaddingX","getSelectSize","size","heightProperty","sizes","paddingInlineStart","paddingInlineEnd","chevronIconSize","getSelectItemSize","checkmarkCorrection","Select","exports","_base","process","env","NODE_ENV","shouldForwardProp","prop","target","label","hasCustomRenderProp","css","COLORS","theme","background","foreground","truncateStyles","fontSizeStyles","inputSize","slideDownAndFade","keyframes","opacity","transform","SelectPopover","radiusSmall","elevationMedium","SelectItem","fontSize","space","gray","name","styles","map","toString","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","WithHintItemWrapper","WithHintItemHint","fontLineHeightBase","SelectedItemCheck","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport { chevronIconSize } from '../select-control/styles/select-control-styles';\nimport { fontSizeStyles } from '../input-control/styles/input-control-styles';\nimport type { CustomSelectButtonSize } from './types';\n\n// TODO: extract to common utils and apply to relevant components\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst INLINE_PADDING = {\n\tcompact: CONFIG.controlPaddingXSmall,\n\tsmall: CONFIG.controlPaddingXSmall,\n\tdefault: CONFIG.controlPaddingX,\n};\n\nconst getSelectSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >,\n\theightProperty: 'minHeight' | 'height'\n) => {\n\tconst sizes = {\n\t\tcompact: {\n\t\t\t[ heightProperty ]: 32,\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,\n\t\t},\n\t\tdefault: {\n\t\t\t[ heightProperty ]: 40,\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default + chevronIconSize,\n\t\t},\n\t\tsmall: {\n\t\t\t[ heightProperty ]: 24,\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small + chevronIconSize,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nconst getSelectItemSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >\n) => {\n\t// Used to visually align the checkmark with the chevron\n\tconst checkmarkCorrection = 6;\n\tconst sizes = {\n\t\tcompact: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,\n\t\t},\n\t\tdefault: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,\n\t\t},\n\t\tsmall: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nexport const Select = styled( Ariakit.Select, {\n\t// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component\n\tshouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',\n} )(\n\t( {\n\t\tsize,\n\t\thasCustomRenderProp,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t\thasCustomRenderProp: boolean;\n\t} ) => css`\n\t\tdisplay: block;\n\t\tbackground-color: ${ COLORS.theme.background };\n\t\tborder: none;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\ttext-align: start;\n\t\tuser-select: none;\n\t\twidth: 100%;\n\n\t\t&[data-focus-visible] {\n\t\t\toutline: none; // handled by InputBase component\n\t\t}\n\n\t\t${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }\n\t\t${ ! hasCustomRenderProp && truncateStyles }\n\t\t${ fontSizeStyles( { inputSize: size } ) }\n\t`\n);\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nexport const SelectPopover = styled( Ariakit.SelectPopover )`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground-color: ${ COLORS.theme.background };\n\tborder-radius: ${ CONFIG.radiusSmall };\n\tborder: 1px solid ${ COLORS.theme.foreground };\n\tbox-shadow: ${ CONFIG.elevationMedium };\n\n\t/* z-index(\".components-popover\") */\n\tz-index: 1000000;\n\n\tmax-height: min( var( --popover-available-height, 400px ), 400px );\n\toverflow: auto;\n\toverscroll-behavior: contain;\n\n\t/* The smallest size without overflowing the container. */\n\tmin-width: min-content;\n\n\t/* Animation */\n\t&[data-open] {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\t\t\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\t\tanimation-name: ${ slideDownAndFade };\n\t\t\twill-change: transform, opacity;\n\t\t}\n\t}\n\n\t&[data-focus-visible] {\n\t\t/* The outline will be on the trigger, rather than the popover. */\n\t\toutline: none;\n\t}\n`;\n\nexport const SelectItem = styled( Ariakit.SelectItem )(\n\t( {\n\t\tsize,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t} ) => css`\n\t\tcursor: default;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tfont-size: ${ CONFIG.fontSize };\n\t\t// TODO: reassess line-height for non-legacy v2\n\t\tline-height: 28px;\n\t\tpadding-block: ${ space( 2 ) };\n\t\tscroll-margin: ${ space( 1 ) };\n\t\tuser-select: none;\n\n\t\t&[aria-disabled='true'] {\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&[data-active-item] {\n\t\t\tbackground-color: ${ COLORS.theme.gray[ 300 ] };\n\t\t}\n\n\t\t${ getSelectItemSize( size ) }\n\t`\n);\n\nconst truncateStyles = css`\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nexport const SelectedExperimentalHintWrapper = styled.div`\n\t${ truncateStyles }\n`;\n\nexport const SelectedExperimentalHintItem = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\tmargin-inline-start: ${ space( 2 ) };\n`;\n\nexport const WithHintItemWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tflex: 1;\n\tcolumn-gap: ${ space( 4 ) };\n`;\n\nexport const WithHintItemHint = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\ttext-align: initial;\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\tpadding-inline-end: ${ space( 1 ) };\n\tmargin-block: ${ space( 1 ) };\n`;\n\nexport const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-inline-start: ${ space( 2 ) };\n\n\t// Keep the checkmark vertically aligned at the top. Since the item text has a\n\t// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin\n\t// is applied to keep the correct alignment between the text and the checkmark.\n\talign-self: start;\n\tmargin-block-start: 2px;\n\n\t// Since the checkmark's dimensions are applied with 'em' units, setting a\n\t// font size of 0 allows the space reserved for the checkmark to collapse for\n\t// items that are not selected or that don't have an associated item hint.\n\tfont-size: 0;\n\t${ WithHintItemWrapper } ~ &,\n\t&:not(:empty) {\n\t\tfont-size: 24px; // Size of checkmark icon\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Dashicon","icon","className","size","style","extraProps","iconClass","filter","Boolean","join","sizeStyles","fontSize","width","height","styles","_jsxRuntime","jsx","_default","exports","default"],"sources":["@wordpress/components/src/dashicon/index.tsx"],"sourcesContent":["/**\n * @typedef OwnProps\n *\n * @property {import('./types').IconKey} icon Icon name\n * @property {string} [className] Class name\n * @property {number} [size] Size of the icon\n */\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { DashiconProps } from './types';\n\nfunction Dashicon( {\n\ticon,\n\tclassName,\n\tsize = 20,\n\tstyle = {},\n\t...extraProps\n}: WordPressComponentProps< DashiconProps, 'span', false > ) {\n\tconst iconClass = [\n\t\t'dashicon',\n\t\t'dashicons',\n\t\t'dashicons-' + icon,\n\t\tclassName,\n\t]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\t// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default\n\tconst sizeStyles =\n\t\t// using `!=` to catch both 20 and \"20\"\n\t\t// eslint-disable-next-line eqeqeq\n\t\t20 != size\n\t\t\t? {\n\t\t\t\t\tfontSize: `${ size }px`,\n\t\t\t\t\twidth: `${ size }px`,\n\t\t\t\t\theight: `${ size }px`,\n\t\t\t }\n\t\t\t: {};\n\n\tconst styles = {\n\t\t...sizeStyles,\n\t\t...style,\n\t};\n\n\treturn <span className={ iconClass } style={ styles } { ...extraProps } />;\n}\n\nexport default Dashicon;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAIA,SAASA,QAAQA,CAAE;EAClBC,IAAI;EACJC,SAAS;EACTC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,CAAC,CAAC;EACV,GAAGC;AACqD,CAAC,EAAG;EAC5D,MAAMC,SAAS,GAAG,CACjB,UAAU,EACV,WAAW,EACX,YAAY,GAAGL,IAAI,EACnBC,SAAS,CACT,CACCK,MAAM,CAAEC,OAAQ,CAAC,CACjBC,IAAI,CAAE,GAAI,CAAC;;EAEb;EACA,MAAMC,UAAU;EACf;EACA;EACA,EAAE,IAAIP,IAAI,GACP;IACAQ,QAAQ,
|
|
1
|
+
{"version":3,"names":["Dashicon","icon","className","size","style","extraProps","iconClass","filter","Boolean","join","sizeStyles","fontSize","width","height","styles","_jsxRuntime","jsx","_default","exports","default"],"sources":["@wordpress/components/src/dashicon/index.tsx"],"sourcesContent":["/**\n * @typedef OwnProps\n *\n * @property {import('./types').IconKey} icon Icon name\n * @property {string} [className] Class name\n * @property {number} [size] Size of the icon\n */\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { DashiconProps } from './types';\n\nfunction Dashicon( {\n\ticon,\n\tclassName,\n\tsize = 20,\n\tstyle = {},\n\t...extraProps\n}: WordPressComponentProps< DashiconProps, 'span', false > ) {\n\tconst iconClass = [\n\t\t'dashicon',\n\t\t'dashicons',\n\t\t'dashicons-' + icon,\n\t\tclassName,\n\t]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\t// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default\n\tconst sizeStyles =\n\t\t// using `!=` to catch both 20 and \"20\"\n\t\t// eslint-disable-next-line eqeqeq\n\t\t20 != size\n\t\t\t? {\n\t\t\t\t\tfontSize: `${ size }px`,\n\t\t\t\t\twidth: `${ size }px`,\n\t\t\t\t\theight: `${ size }px`,\n\t\t\t }\n\t\t\t: {};\n\n\tconst styles = {\n\t\t...sizeStyles,\n\t\t...style,\n\t};\n\n\treturn <span className={ iconClass } style={ styles } { ...extraProps } />;\n}\n\nexport default Dashicon;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAIA,SAASA,QAAQA,CAAE;EAClBC,IAAI;EACJC,SAAS;EACTC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,CAAC,CAAC;EACV,GAAGC;AACqD,CAAC,EAAG;EAC5D,MAAMC,SAAS,GAAG,CACjB,UAAU,EACV,WAAW,EACX,YAAY,GAAGL,IAAI,EACnBC,SAAS,CACT,CACCK,MAAM,CAAEC,OAAQ,CAAC,CACjBC,IAAI,CAAE,GAAI,CAAC;;EAEb;EACA,MAAMC,UAAU;EACf;EACA;EACA,EAAE,IAAIP,IAAI,GACP;IACAQ,QAAQ,EAAE,GAAIR,IAAI,IAAK;IACvBS,KAAK,EAAE,GAAIT,IAAI,IAAK;IACpBU,MAAM,EAAE,GAAIV,IAAI;EAChB,CAAC,GACD,CAAC,CAAC;EAEN,MAAMW,MAAM,GAAG;IACd,GAAGJ,UAAU;IACb,GAAGN;EACJ,CAAC;EAED,oBAAO,IAAAW,WAAA,CAAAC,GAAA;IAAMd,SAAS,EAAGI,SAAW;IAACF,KAAK,EAAGU,MAAQ;IAAA,GAAMT;EAAU,CAAI,CAAC;AAC3E;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcnB,QAAQ","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_button","_interopRequireDefault","require","_utils","_hStack","_heading","_space","Wrapper","exports","_base","default","process","env","NODE_ENV","target","label","boxSizingReset","Navigator","HStack","space","NavigatorHeading","Heading","CONFIG","fontSize","fontWeight","fontWeightHeading","Calendar","DayOfWeek","COLORS","theme","gray","fontLineHeightBase","DayButton","Button","shouldForwardProp","prop","includes","props","column","disabled","radiusRound","isSelected","accent","accentInverted","borderWidthFocus","isToday","hasEvents"],"sources":["@wordpress/components/src/date-time/date/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { boxSizingReset, COLORS, CONFIG } from '../../utils';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { space } from '../../utils/space';\n\nexport const Wrapper = styled.div`\n\t${ boxSizingReset }\n`;\n\nexport const Navigator = styled( HStack )`\n\tmargin-bottom: ${ space( 4 ) };\n`;\n\nexport const NavigatorHeading = styled( Heading )`\n\tfont-size: ${ CONFIG.fontSize };\n\tfont-weight: ${ CONFIG.fontWeight };\n\n\tstrong {\n\t\tfont-weight: ${ CONFIG.fontWeightHeading };\n\t}\n`;\n\nexport const Calendar = styled.div`\n\tcolumn-gap: ${ space( 2 ) };\n\tdisplay: grid;\n\tgrid-template-columns: 0.5fr repeat( 5, 1fr ) 0.5fr;\n\tjustify-items: center;\n\trow-gap: ${ space( 2 ) };\n`;\n\nexport const DayOfWeek = styled.div`\n\tcolor: ${ COLORS.theme.gray[ 700 ] };\n\tfont-size: ${ CONFIG.fontSize };\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\n\t&:nth-of-type( 1 ) {\n\t\tjustify-self: start;\n\t}\n\n\t&:nth-of-type( 7 ) {\n\t\tjustify-self: end;\n\t}\n`;\n\nexport const DayButton = styled( Button, {\n\tshouldForwardProp: ( prop: string ) =>\n\t\t! [ 'column', 'isSelected', 'isToday', 'hasEvents' ].includes( prop ),\n} )< {\n\tcolumn: number;\n\tisSelected: boolean;\n\tisToday: boolean;\n\thasEvents: boolean;\n} >`\n\tgrid-column: ${ ( props ) => props.column };\n\tposition: relative;\n\tjustify-content: center;\n\n\t${ ( props ) =>\n\t\tprops.column === 1 &&\n\t\t`\n\t\tjustify-self: start;\n\t\t` }\n\n\t${ ( props ) =>\n\t\tprops.column === 7 &&\n\t\t`\n\t\tjustify-self: end;\n\t\t` }\n\n\t${ ( props ) =>\n\t\tprops.disabled &&\n\t\t`\n\t\tpointer-events: none;\n\t\t` }\n\n\t&&& {\n\t\tborder-radius: ${ CONFIG.radiusRound };\n\t\theight: ${ space( 7 ) };\n\t\twidth: ${ space( 7 ) };\n\n\t\t${ ( props ) =>\n\t\t\tprops.isSelected &&\n\t\t\t`\n\t\t\t\tbackground: ${ COLORS.theme.accent };\n\n\t\t\t\t&,\n\t\t\t\t&:hover:not(:disabled, [aria-disabled=true]) {\n\t\t\t\t\tcolor: ${ COLORS.theme.accentInverted };\n\t\t\t\t}\n\n\t\t\t\t&:focus:not(:disabled),\n\t\t\t\t&:focus:not(:disabled) {\n\t\t\t\t\tborder: ${ CONFIG.borderWidthFocus } solid currentColor;\n\t\t\t\t}\n\n\t\t\t\t/* Highlight the selected day for high-contrast mode */\n\t\t\t\t&::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tinset: 0;\n\t\t\t\t\tborder-radius: inherit;\n\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t}\n\t\t\t` }\n\n\t\t${ ( props ) =>\n\t\t\t! props.isSelected &&\n\t\t\tprops.isToday &&\n\t\t\t`\n\t\t\tbackground: ${ COLORS.theme.gray[ 200 ] };\n\t\t\t` }\n\t}\n\n\t${ ( props ) =>\n\t\tprops.hasEvents &&\n\t\t`\n\t\t::before {\n\t\t\tborder: 2px solid ${\n\t\t\t\tprops.isSelected\n\t\t\t\t\t? COLORS.theme.accentInverted\n\t\t\t\t\t: COLORS.theme.accent\n\t\t\t};\n\t\t\tborder-radius: ${ CONFIG.radiusRound };\n\t\t\tcontent: \" \";\n\t\t\tleft: 50%;\n\t\t\tposition: absolute;\n\t\t\ttransform: translate(-50%, 9px);\n\t\t}\n\t\t` }\n`;\n"],"mappings":";;;;;;;;AAQA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,MAAMK,OAAO,GAAAC,OAAA,CAAAD,OAAA,oBAAAE,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAChBC,qBAAc,SAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,g7IACjB;AAEM,MAAMI,SAAS,GAAAT,OAAA,CAAAS,SAAA,gBAAG,IAAAR,KAAA,CAAAC,OAAA,EAAQQ,cAAM,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,mBACtB,IAAAI,YAAK,EAAE,CAAE,CAAC,SAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7IAC5B;AAEM,MAAMO,gBAAgB,GAAAZ,OAAA,CAAAY,gBAAA,gBAAG,IAAAX,KAAA,CAAAC,OAAA,EAAQW,gBAAO,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,eAClCO,aAAM,CAACC,QAAQ,mBACbD,aAAM,CAACE,UAAU,0BAGhBF,aAAM,CAACG,iBAAiB,UAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7IAEzC;AAEM,MAAMa,QAAQ,GAAAlB,OAAA,CAAAkB,QAAA,oBAAAjB,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,kBACL,IAAAI,YAAK,EAAE,CAAE,CAAC,oGAIb,IAAAA,YAAK,EAAE,CAAE,CAAC,SAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7IACtB;AAEM,MAAMc,SAAS,GAAAnB,OAAA,CAAAmB,SAAA,oBAAAlB,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,aACXa,aAAM,CAACC,KAAK,CAACC,IAAI,CAAE,GAAG,CAAE,iBACpBR,aAAM,CAACC,QAAQ,mBACbD,aAAM,CAACS,kBAAkB,qFAAApB,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7IASzC;AAEM,MAAMmB,SAAS,GAAAxB,OAAA,CAAAwB,SAAA,gBAAG,IAAAvB,KAAA,CAAAC,OAAA,EAAQuB,eAAM,EAAAtB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EACtCqB,iBAAiB,EAAIC,IAAY,IAChC,CAAE,CAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAE,CAACC,QAAQ,CAAED,IAAK,CAAC;EAAArB,MAAA;AAAA;EADtEoB,iBAAiB,EAAIC,IAAY,IAChC,CAAE,CAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAE,CAACC,QAAQ,CAAED,IAAK,CAAC;EAAArB,MAAA;EAAAC,KAAA;AAAA,CACrE,CAAC,iBAMgBsB,KAAK,IAAMA,KAAK,CAACC,MAAM,gDAIpCD,KAAK,IACTA,KAAK,CAACC,MAAM,KAAK,CAAC,
|
|
1
|
+
{"version":3,"names":["_button","_interopRequireDefault","require","_utils","_hStack","_heading","_space","Wrapper","exports","_base","default","process","env","NODE_ENV","target","label","boxSizingReset","Navigator","HStack","space","NavigatorHeading","Heading","CONFIG","fontSize","fontWeight","fontWeightHeading","Calendar","DayOfWeek","COLORS","theme","gray","fontLineHeightBase","DayButton","Button","shouldForwardProp","prop","includes","props","column","disabled","radiusRound","isSelected","accent","accentInverted","borderWidthFocus","isToday","hasEvents"],"sources":["@wordpress/components/src/date-time/date/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { boxSizingReset, COLORS, CONFIG } from '../../utils';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { space } from '../../utils/space';\n\nexport const Wrapper = styled.div`\n\t${ boxSizingReset }\n`;\n\nexport const Navigator = styled( HStack )`\n\tmargin-bottom: ${ space( 4 ) };\n`;\n\nexport const NavigatorHeading = styled( Heading )`\n\tfont-size: ${ CONFIG.fontSize };\n\tfont-weight: ${ CONFIG.fontWeight };\n\n\tstrong {\n\t\tfont-weight: ${ CONFIG.fontWeightHeading };\n\t}\n`;\n\nexport const Calendar = styled.div`\n\tcolumn-gap: ${ space( 2 ) };\n\tdisplay: grid;\n\tgrid-template-columns: 0.5fr repeat( 5, 1fr ) 0.5fr;\n\tjustify-items: center;\n\trow-gap: ${ space( 2 ) };\n`;\n\nexport const DayOfWeek = styled.div`\n\tcolor: ${ COLORS.theme.gray[ 700 ] };\n\tfont-size: ${ CONFIG.fontSize };\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\n\t&:nth-of-type( 1 ) {\n\t\tjustify-self: start;\n\t}\n\n\t&:nth-of-type( 7 ) {\n\t\tjustify-self: end;\n\t}\n`;\n\nexport const DayButton = styled( Button, {\n\tshouldForwardProp: ( prop: string ) =>\n\t\t! [ 'column', 'isSelected', 'isToday', 'hasEvents' ].includes( prop ),\n} )< {\n\tcolumn: number;\n\tisSelected: boolean;\n\tisToday: boolean;\n\thasEvents: boolean;\n} >`\n\tgrid-column: ${ ( props ) => props.column };\n\tposition: relative;\n\tjustify-content: center;\n\n\t${ ( props ) =>\n\t\tprops.column === 1 &&\n\t\t`\n\t\tjustify-self: start;\n\t\t` }\n\n\t${ ( props ) =>\n\t\tprops.column === 7 &&\n\t\t`\n\t\tjustify-self: end;\n\t\t` }\n\n\t${ ( props ) =>\n\t\tprops.disabled &&\n\t\t`\n\t\tpointer-events: none;\n\t\t` }\n\n\t&&& {\n\t\tborder-radius: ${ CONFIG.radiusRound };\n\t\theight: ${ space( 7 ) };\n\t\twidth: ${ space( 7 ) };\n\n\t\t${ ( props ) =>\n\t\t\tprops.isSelected &&\n\t\t\t`\n\t\t\t\tbackground: ${ COLORS.theme.accent };\n\n\t\t\t\t&,\n\t\t\t\t&:hover:not(:disabled, [aria-disabled=true]) {\n\t\t\t\t\tcolor: ${ COLORS.theme.accentInverted };\n\t\t\t\t}\n\n\t\t\t\t&:focus:not(:disabled),\n\t\t\t\t&:focus:not(:disabled) {\n\t\t\t\t\tborder: ${ CONFIG.borderWidthFocus } solid currentColor;\n\t\t\t\t}\n\n\t\t\t\t/* Highlight the selected day for high-contrast mode */\n\t\t\t\t&::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tinset: 0;\n\t\t\t\t\tborder-radius: inherit;\n\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t}\n\t\t\t` }\n\n\t\t${ ( props ) =>\n\t\t\t! props.isSelected &&\n\t\t\tprops.isToday &&\n\t\t\t`\n\t\t\tbackground: ${ COLORS.theme.gray[ 200 ] };\n\t\t\t` }\n\t}\n\n\t${ ( props ) =>\n\t\tprops.hasEvents &&\n\t\t`\n\t\t::before {\n\t\t\tborder: 2px solid ${\n\t\t\t\tprops.isSelected\n\t\t\t\t\t? COLORS.theme.accentInverted\n\t\t\t\t\t: COLORS.theme.accent\n\t\t\t};\n\t\t\tborder-radius: ${ CONFIG.radiusRound };\n\t\t\tcontent: \" \";\n\t\t\tleft: 50%;\n\t\t\tposition: absolute;\n\t\t\ttransform: translate(-50%, 9px);\n\t\t}\n\t\t` }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_date","_tooltip","_interopRequireDefault","_styles","_jsxRuntime","TimeZone","timezone","getDateSettings","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","offsetFormatted","prettyTimezoneString","string","replace","timezoneDetail","__","hasNoAdditionalTimezoneDetail","trim","length","jsx","className","children","default","placement","text","_default","exports"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAVvD;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA,GACA,MAAMM,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,iBAAe,EAAC,CAAC;;EAEtC;EACA,MAAMC,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEL,QAAQ,CAACM,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEL,QAAQ,CAACM,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKR,QAAQ,CAACS,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEL,QAAQ,CAACS,IAAK,CAAE,CAAC,GACrDT,QAAQ,CAACS,IAAI,
|
|
1
|
+
{"version":3,"names":["_i18n","require","_date","_tooltip","_interopRequireDefault","_styles","_jsxRuntime","TimeZone","timezone","getDateSettings","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","offsetFormatted","prettyTimezoneString","string","replace","timezoneDetail","__","hasNoAdditionalTimezoneDetail","trim","length","jsx","className","children","default","placement","text","_default","exports"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAVvD;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA,GACA,MAAMM,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,iBAAe,EAAC,CAAC;;EAEtC;EACA,MAAMC,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEL,QAAQ,CAACM,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEL,QAAQ,CAACM,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKR,QAAQ,CAACS,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEL,QAAQ,CAACS,IAAK,CAAE,CAAC,GACrDT,QAAQ,CAACS,IAAI,GACb,MAAOF,YAAY,GAAKP,QAAQ,CAACW,eAAe,EAAG;;EAEvD;EACA,MAAMC,oBAAoB,GAAGZ,QAAQ,CAACa,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAEhE,MAAMC,cAAc,GACnB,KAAK,KAAKf,QAAQ,CAACa,MAAM,GACtB,IAAAG,QAAE,EAAE,4BAA6B,CAAC,GAClC,IAAKR,QAAQ,KAAOI,oBAAoB,EAAG;;EAE/C;EACA;EACA,MAAMK,6BAA6B,GAClCL,oBAAoB,CAACM,IAAI,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;EAEzC,OAAOF,6BAA6B,gBACnC,IAAAnB,WAAA,CAAAsB,GAAA,EAACvB,OAAA,CAAAE,QAAe;IAACsB,SAAS,EAAC,+BAA+B;IAAAC,QAAA,EACvDd;EAAQ,CACM,CAAC,gBAElB,IAAAV,WAAA,CAAAsB,GAAA,EAACzB,QAAA,CAAA4B,OAAO;IAACC,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGV,cAAgB;IAAAO,QAAA,eAC/C,IAAAxB,WAAA,CAAAsB,GAAA,EAACvB,OAAA,CAAAE,QAAe;MAACsB,SAAS,EAAC,+BAA+B;MAAAC,QAAA,EACvDd;IAAQ,CACM;EAAC,CACV,CACT;AACF,CAAC;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEaxB,QAAQ","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_compose","require","_element","_jsxRuntime","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","appendToOwnerDocument","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","useRef","cleanupRef","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","throttle","addEventListener","remove","removeEventListener","useEffect","jsxs","Fragment","onDraggableStart","onDraggableEnd","jsx","className","display","ref","_default","exports","default"],"sources":["@wordpress/components/src/draggable/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n * <div id=\"draggable-panel\">\n * <Panel header=\"Draggable panel\">\n * <PanelBody>\n * <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n * { ( { onDraggableStart, onDraggableEnd } ) => (\n * <div\n * className=\"example-drag-handle\"\n * draggable\n * onDragStart={ onDraggableStart }\n * onDragEnd={ onDraggableEnd }\n * >\n * <Icon icon={ more } />\n * </div>\n * ) }\n * </Draggable>\n * </PanelBody>\n * </Panel>\n * </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tappendToOwnerDocument = false,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanupRef = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanupRef.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\tif ( appendToOwnerDocument ) {\n\t\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t\t} else {\n\t\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t\t}\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\tif ( onDragStart ) {\n\t\t\tonDragStart( event );\n\t\t}\n\n\t\tcleanupRef.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanupRef.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_compose","require","_element","_jsxRuntime","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","appendToOwnerDocument","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","useRef","cleanupRef","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","throttle","addEventListener","remove","removeEventListener","useEffect","jsxs","Fragment","onDraggableStart","onDraggableEnd","jsx","className","display","ref","_default","exports","default"],"sources":["@wordpress/components/src/draggable/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n * <div id=\"draggable-panel\">\n * <Panel header=\"Draggable panel\">\n * <PanelBody>\n * <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n * { ( { onDraggableStart, onDraggableEnd } ) => (\n * <div\n * className=\"example-drag-handle\"\n * draggable\n * onDragStart={ onDraggableStart }\n * onDragEnd={ onDraggableEnd }\n * >\n * <Icon icon={ more } />\n * </div>\n * ) }\n * </Draggable>\n * </PanelBody>\n * </Panel>\n * </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tappendToOwnerDocument = false,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanupRef = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanupRef.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\tif ( appendToOwnerDocument ) {\n\t\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t\t} else {\n\t\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t\t}\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\tif ( onDragStart ) {\n\t\t\tonDragStart( event );\n\t\t}\n\n\t\tcleanupRef.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanupRef.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"],"mappings":"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","ignoreList":[]}
|
package/build/drop-zone/index.js
CHANGED
|
@@ -95,6 +95,7 @@ function DropZoneComponent({
|
|
|
95
95
|
setType(_type);
|
|
96
96
|
},
|
|
97
97
|
onDragEnd() {
|
|
98
|
+
setIsDraggingOverElement(false);
|
|
98
99
|
setIsDraggingOverDocument(false);
|
|
99
100
|
setType(undefined);
|
|
100
101
|
},
|
|
@@ -107,8 +108,6 @@ function DropZoneComponent({
|
|
|
107
108
|
});
|
|
108
109
|
const classes = (0, _clsx.default)('components-drop-zone', className, {
|
|
109
110
|
'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
|
|
110
|
-
'has-dragged-out': !isDraggingOverElement,
|
|
111
|
-
// Keeping the following classnames for legacy purposes
|
|
112
111
|
'is-dragging-over-document': isDraggingOverDocument,
|
|
113
112
|
'is-dragging-over-element': isDraggingOverElement,
|
|
114
113
|
[`is-dragging-${type}`]: !!type
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n *\n * return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'
|
|
1
|
+
{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n *\n * return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}
|