@wordpress/components 28.12.0 → 28.13.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 +45 -1
- package/CONTRIBUTING.md +16 -16
- package/build/autocomplete/autocompleter-ui.js +1 -0
- package/build/autocomplete/autocompleter-ui.js.map +1 -1
- package/build/border-box-control/border-box-control/component.js +1 -0
- package/build/border-box-control/border-box-control/component.js.map +1 -1
- package/build/border-box-control/border-box-control-split-controls/component.js +2 -1
- package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build/border-control/border-control/component.js +2 -1
- package/build/border-control/border-control/component.js.map +1 -1
- package/build/border-control/border-control/hook.js +3 -1
- package/build/border-control/border-control/hook.js.map +1 -1
- package/build/border-control/types.js.map +1 -1
- package/build/box-control/all-input-control.js +1 -0
- package/build/box-control/all-input-control.js.map +1 -1
- package/build/box-control/axial-input-controls.js +1 -0
- package/build/box-control/axial-input-controls.js.map +1 -1
- package/build/box-control/index.js +13 -13
- package/build/box-control/index.js.map +1 -1
- package/build/box-control/input-controls.js +1 -0
- package/build/box-control/input-controls.js.map +1 -1
- package/build/box-control/types.js.map +1 -1
- package/build/circular-option-picker/circular-option-picker-actions.js +1 -0
- package/build/circular-option-picker/circular-option-picker-actions.js.map +1 -1
- package/build/circular-option-picker/circular-option-picker-option.js +1 -0
- package/build/circular-option-picker/circular-option-picker-option.js.map +1 -1
- package/build/color-palette/index.js +2 -0
- package/build/color-palette/index.js.map +1 -1
- package/build/color-picker/color-copy-button.js +6 -4
- package/build/color-picker/color-copy-button.js.map +1 -1
- package/build/color-picker/component.js +1 -0
- package/build/color-picker/component.js.map +1 -1
- package/build/color-picker/styles.js +21 -28
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/index.js +17 -12
- package/build/combobox-control/index.js.map +1 -1
- package/build/composite/hover.js +1 -1
- package/build/composite/hover.js.map +1 -1
- package/build/composite/typeahead.js +1 -1
- package/build/composite/typeahead.js.map +1 -1
- package/build/custom-gradient-picker/gradient-bar/control-points.js +2 -0
- package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build/dashicon/types.js.map +1 -1
- package/build/dimension-control/index.js +7 -0
- package/build/dimension-control/index.js.map +1 -1
- package/build/disabled/index.js +8 -1
- package/build/disabled/index.js.map +1 -1
- package/build/duotone-picker/duotone-picker.js +2 -0
- package/build/duotone-picker/duotone-picker.js.map +1 -1
- package/build/font-size-picker/font-size-picker-toggle-group.js +1 -0
- package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
- package/build/font-size-picker/index.js +7 -0
- package/build/font-size-picker/index.js.map +1 -1
- package/build/form-file-upload/index.js +3 -1
- package/build/form-file-upload/index.js.map +1 -1
- package/build/gradient-picker/index.js +34 -32
- package/build/gradient-picker/index.js.map +1 -1
- package/build/gradient-picker/types.js.map +1 -1
- package/build/icon/index.js +9 -0
- package/build/icon/index.js.map +1 -1
- package/build/menu/styles.js +16 -16
- package/build/menu/styles.js.map +1 -1
- package/build/modal/index.js +2 -2
- package/build/modal/index.js.map +1 -1
- package/build/private-apis.js +0 -2
- package/build/private-apis.js.map +1 -1
- package/build/range-control/index.js +11 -0
- package/build/range-control/index.js.map +1 -1
- package/build/range-control/types.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/fill.js +14 -31
- package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/slot.js +11 -9
- package/build/slot-fill/bubbles-virtually/slot.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/use-slot.js +1 -8
- package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build/slot-fill/fill.js +7 -24
- package/build/slot-fill/fill.js.map +1 -1
- package/build/slot-fill/index.js +5 -10
- package/build/slot-fill/index.js.map +1 -1
- package/build/slot-fill/provider.js +2 -2
- package/build/slot-fill/provider.js.map +1 -1
- package/build/slot-fill/slot.js +37 -77
- package/build/slot-fill/slot.js.map +1 -1
- package/build/slot-fill/types.js.map +1 -1
- package/build/text-control/index.js +7 -0
- package/build/text-control/index.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +9 -0
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option/component.js +1 -0
- package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
- package/build/toggle-group-control/types.js.map +1 -1
- package/build/utils/deprecated-36px-size.js +3 -2
- package/build/utils/deprecated-36px-size.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.js +1 -0
- package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
- package/build-module/border-box-control/border-box-control/component.js +1 -0
- package/build-module/border-box-control/border-box-control/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/component.js +2 -1
- package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build-module/border-control/border-control/component.js +2 -1
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/border-control/border-control/hook.js +3 -1
- package/build-module/border-control/border-control/hook.js.map +1 -1
- package/build-module/border-control/types.js.map +1 -1
- package/build-module/box-control/all-input-control.js +1 -0
- package/build-module/box-control/all-input-control.js.map +1 -1
- package/build-module/box-control/axial-input-controls.js +1 -0
- package/build-module/box-control/axial-input-controls.js.map +1 -1
- package/build-module/box-control/index.js +13 -13
- package/build-module/box-control/index.js.map +1 -1
- package/build-module/box-control/input-controls.js +1 -0
- package/build-module/box-control/input-controls.js.map +1 -1
- package/build-module/box-control/types.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker-actions.js +1 -0
- package/build-module/circular-option-picker/circular-option-picker-actions.js.map +1 -1
- package/build-module/circular-option-picker/circular-option-picker-option.js +1 -0
- package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
- package/build-module/color-palette/index.js +2 -0
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-picker/color-copy-button.js +6 -4
- package/build-module/color-picker/color-copy-button.js.map +1 -1
- package/build-module/color-picker/component.js +1 -0
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/styles.js +20 -27
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/index.js +18 -13
- package/build-module/combobox-control/index.js.map +1 -1
- package/build-module/composite/hover.js +1 -1
- package/build-module/composite/hover.js.map +1 -1
- package/build-module/composite/typeahead.js +1 -1
- package/build-module/composite/typeahead.js.map +1 -1
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js +2 -0
- package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
- package/build-module/dashicon/types.js.map +1 -1
- package/build-module/dimension-control/index.js +7 -0
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/disabled/index.js +8 -1
- package/build-module/disabled/index.js.map +1 -1
- package/build-module/duotone-picker/duotone-picker.js +2 -0
- package/build-module/duotone-picker/duotone-picker.js.map +1 -1
- package/build-module/font-size-picker/font-size-picker-toggle-group.js +1 -0
- package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
- package/build-module/font-size-picker/index.js +7 -0
- package/build-module/font-size-picker/index.js.map +1 -1
- package/build-module/form-file-upload/index.js +3 -1
- package/build-module/form-file-upload/index.js.map +1 -1
- package/build-module/gradient-picker/index.js +34 -32
- package/build-module/gradient-picker/index.js.map +1 -1
- package/build-module/gradient-picker/types.js.map +1 -1
- package/build-module/icon/index.js +9 -0
- package/build-module/icon/index.js.map +1 -1
- package/build-module/menu/styles.js +16 -16
- package/build-module/menu/styles.js.map +1 -1
- package/build-module/modal/index.js +2 -2
- package/build-module/modal/index.js.map +1 -1
- package/build-module/private-apis.js +0 -2
- package/build-module/private-apis.js.map +1 -1
- package/build-module/range-control/index.js +11 -0
- package/build-module/range-control/index.js.map +1 -1
- package/build-module/range-control/types.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/fill.js +15 -32
- package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/slot.js +11 -9
- package/build-module/slot-fill/bubbles-virtually/slot.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/use-slot.js +2 -9
- package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build-module/slot-fill/fill.js +7 -24
- package/build-module/slot-fill/fill.js.map +1 -1
- package/build-module/slot-fill/index.js +5 -8
- package/build-module/slot-fill/index.js.map +1 -1
- package/build-module/slot-fill/provider.js +2 -3
- package/build-module/slot-fill/provider.js.map +1 -1
- package/build-module/slot-fill/slot.js +38 -78
- package/build-module/slot-fill/slot.js.map +1 -1
- package/build-module/slot-fill/types.js.map +1 -1
- package/build-module/text-control/index.js +7 -0
- package/build-module/text-control/index.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +9 -0
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option/component.js +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
- package/build-module/toggle-group-control/types.js.map +1 -1
- package/build-module/utils/deprecated-36px-size.js +3 -2
- package/build-module/utils/deprecated-36px-size.js.map +1 -1
- package/build-style/style-rtl.css +3 -10
- package/build-style/style.css +3 -10
- package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
- package/build-types/base-control/stories/index.story.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
- package/build-types/border-control/border-control/component.d.ts +1 -0
- package/build-types/border-control/border-control/component.d.ts.map +1 -1
- package/build-types/border-control/border-control/hook.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
- package/build-types/border-control/stories/index.story.d.ts +10 -5
- package/build-types/border-control/stories/index.story.d.ts.map +1 -1
- package/build-types/border-control/types.d.ts +7 -0
- package/build-types/border-control/types.d.ts.map +1 -1
- package/build-types/box-control/all-input-control.d.ts.map +1 -1
- package/build-types/box-control/axial-input-controls.d.ts.map +1 -1
- package/build-types/box-control/index.d.ts +13 -13
- package/build-types/box-control/input-controls.d.ts.map +1 -1
- package/build-types/box-control/styles/box-control-styles.d.ts +2 -1
- package/build-types/box-control/styles/box-control-styles.d.ts.map +1 -1
- package/build-types/box-control/types.d.ts +2 -0
- package/build-types/box-control/types.d.ts.map +1 -1
- package/build-types/checkbox-control/stories/index.story.d.ts.map +1 -1
- package/build-types/circular-option-picker/circular-option-picker-actions.d.ts.map +1 -1
- package/build-types/circular-option-picker/circular-option-picker-option.d.ts.map +1 -1
- package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/color-indicator/stories/index.story.d.ts.map +1 -1
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/color-palette/stories/index.story.d.ts.map +1 -1
- package/build-types/color-picker/color-copy-button.d.ts.map +1 -1
- package/build-types/color-picker/component.d.ts.map +1 -1
- package/build-types/color-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +2 -4
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/combobox-control/index.d.ts +1 -0
- package/build-types/combobox-control/index.d.ts.map +1 -1
- package/build-types/combobox-control/stories/index.story.d.ts.map +1 -1
- package/build-types/composite/typeahead.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/gradient-bar/control-points.d.ts.map +1 -1
- package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +1 -1
- package/build-types/dashicon/types.d.ts +1 -1
- package/build-types/dashicon/types.d.ts.map +1 -1
- package/build-types/date-time/stories/date-time.story.d.ts.map +1 -1
- package/build-types/date-time/stories/date.story.d.ts.map +1 -1
- package/build-types/date-time/stories/time.story.d.ts.map +1 -1
- package/build-types/dimension-control/index.d.ts +1 -0
- package/build-types/dimension-control/index.d.ts.map +1 -1
- package/build-types/disabled/index.d.ts +8 -1
- package/build-types/disabled/index.d.ts.map +1 -1
- package/build-types/disabled/stories/index.story.d.ts.map +1 -1
- package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
- package/build-types/duotone-picker/duotone-picker.d.ts.map +1 -1
- package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -1
- package/build-types/font-size-picker/index.d.ts.map +1 -1
- package/build-types/font-size-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/form-file-upload/index.d.ts.map +1 -1
- package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
- package/build-types/form-token-field/stories/index.story.d.ts.map +1 -1
- package/build-types/gradient-picker/index.d.ts +32 -32
- package/build-types/gradient-picker/index.d.ts.map +1 -1
- package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/gradient-picker/types.d.ts +1 -5
- package/build-types/gradient-picker/types.d.ts.map +1 -1
- package/build-types/h-stack/stories/index.story.d.ts.map +1 -1
- package/build-types/icon/index.d.ts +23 -7
- package/build-types/icon/index.d.ts.map +1 -1
- package/build-types/icon/stories/index.story.d.ts +7 -1
- package/build-types/icon/stories/index.story.d.ts.map +1 -1
- package/build-types/input-control/stories/index.story.d.ts.map +1 -1
- package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
- package/build-types/menu-item/stories/index.story.d.ts.map +1 -1
- package/build-types/menu-items-choice/stories/index.story.d.ts.map +1 -1
- package/build-types/number-control/stories/index.story.d.ts.map +1 -1
- package/build-types/placeholder/stories/index.story.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/radio-control/stories/index.story.d.ts.map +1 -1
- package/build-types/range-control/index.d.ts +3 -1
- package/build-types/range-control/index.d.ts.map +1 -1
- package/build-types/range-control/stories/index.story.d.ts.map +1 -1
- package/build-types/range-control/types.d.ts +7 -0
- package/build-types/range-control/types.d.ts.map +1 -1
- package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
- package/build-types/search-control/stories/index.story.d.ts.map +1 -1
- package/build-types/select-control/stories/index.story.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/fill.d.ts +1 -1
- package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts +1 -1
- package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts +3 -7
- package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
- package/build-types/slot-fill/fill.d.ts.map +1 -1
- package/build-types/slot-fill/index.d.ts +5 -12
- package/build-types/slot-fill/index.d.ts.map +1 -1
- package/build-types/slot-fill/provider.d.ts.map +1 -1
- package/build-types/slot-fill/slot.d.ts +1 -1
- package/build-types/slot-fill/slot.d.ts.map +1 -1
- package/build-types/slot-fill/types.d.ts +15 -18
- package/build-types/slot-fill/types.d.ts.map +1 -1
- package/build-types/slot-fill/use-slot.d.ts +1 -1
- package/build-types/slot-fill/use-slot.d.ts.map +1 -1
- package/build-types/text-control/index.d.ts +1 -0
- package/build-types/text-control/index.d.ts.map +1 -1
- package/build-types/text-control/stories/index.story.d.ts.map +1 -1
- package/build-types/textarea-control/stories/index.story.d.ts.map +1 -1
- package/build-types/toggle-control/stories/index.story.d.ts.map +1 -1
- package/build-types/toggle-group-control/stories/index.story.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts +2 -0
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +1 -1
- package/build-types/toggle-group-control/types.d.ts +7 -0
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/tools-panel/stories/index.story.d.ts.map +1 -1
- package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
- package/build-types/unit-control/stories/index.story.d.ts.map +1 -1
- package/build-types/utils/deprecated-36px-size.d.ts +2 -1
- package/build-types/utils/deprecated-36px-size.d.ts.map +1 -1
- package/build-types/v-stack/stories/index.story.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/autocomplete/autocompleter-ui.tsx +1 -0
- package/src/base-control/stories/index.story.tsx +2 -1
- package/src/border-box-control/border-box-control/component.tsx +1 -0
- package/src/border-box-control/border-box-control-split-controls/component.tsx +1 -0
- package/src/border-control/border-control/component.tsx +1 -0
- package/src/border-control/border-control/hook.ts +2 -0
- package/src/border-control/types.ts +7 -0
- package/src/box-control/README.md +79 -60
- package/src/box-control/all-input-control.tsx +1 -0
- package/src/box-control/axial-input-controls.tsx +1 -0
- package/src/box-control/docs-manifest.json +5 -0
- package/src/box-control/index.tsx +13 -13
- package/src/box-control/input-controls.tsx +1 -0
- package/src/box-control/types.ts +2 -0
- package/src/checkbox-control/stories/index.story.tsx +2 -1
- package/src/circular-option-picker/circular-option-picker-actions.tsx +1 -0
- package/src/circular-option-picker/circular-option-picker-option.tsx +1 -0
- package/src/circular-option-picker/stories/index.story.tsx +2 -1
- package/src/circular-option-picker/style.scss +2 -2
- package/src/color-indicator/stories/index.story.tsx +2 -1
- package/src/color-palette/index.tsx +5 -1
- package/src/color-palette/stories/index.story.tsx +2 -1
- package/src/color-picker/color-copy-button.tsx +8 -10
- package/src/color-picker/component.tsx +1 -0
- package/src/color-picker/stories/index.story.tsx +2 -1
- package/src/color-picker/styles.ts +0 -13
- package/src/combobox-control/README.md +1 -0
- package/src/combobox-control/index.tsx +19 -13
- package/src/combobox-control/stories/index.story.tsx +3 -1
- package/src/combobox-control/style.scss +0 -6
- package/src/combobox-control/test/index.tsx +7 -1
- package/src/composite/hover.tsx +1 -1
- package/src/composite/typeahead.tsx +3 -1
- package/src/custom-gradient-picker/gradient-bar/control-points.tsx +2 -0
- package/src/custom-gradient-picker/stories/index.story.tsx +2 -1
- package/src/custom-gradient-picker/style.scss +1 -1
- package/src/custom-select-control/stories/index.story.tsx +2 -1
- package/src/custom-select-control-v2/stories/index.story.tsx +2 -1
- package/src/dashicon/types.ts +0 -2
- package/src/date-time/stories/date-time.story.tsx +2 -1
- package/src/date-time/stories/date.story.tsx +2 -1
- package/src/date-time/stories/time.story.tsx +2 -1
- package/src/dimension-control/README.md +1 -0
- package/src/dimension-control/index.tsx +8 -0
- package/src/dimension-control/stories/index.story.tsx +1 -0
- package/src/dimension-control/test/__snapshots__/index.test.js.snap +24 -24
- package/src/dimension-control/test/index.test.js +7 -1
- package/src/disabled/README.md +9 -7
- package/src/disabled/index.tsx +8 -1
- package/src/disabled/stories/index.story.tsx +1 -0
- package/src/drop-zone/stories/index.story.tsx +2 -1
- package/src/dropdown-menu/stories/index.story.tsx +2 -1
- package/src/duotone-picker/duotone-picker.tsx +2 -0
- package/src/font-size-picker/README.md +1 -0
- package/src/font-size-picker/font-size-picker-toggle-group.tsx +1 -0
- package/src/font-size-picker/index.tsx +8 -0
- package/src/font-size-picker/stories/index.story.tsx +1 -0
- package/src/font-size-picker/test/index.tsx +5 -1
- package/src/form-file-upload/index.tsx +9 -3
- package/src/form-file-upload/stories/index.story.tsx +2 -1
- package/src/form-token-field/stories/index.story.tsx +2 -1
- package/src/gradient-picker/README.md +107 -69
- package/src/gradient-picker/docs-manifest.json +5 -0
- package/src/gradient-picker/index.tsx +34 -32
- package/src/gradient-picker/stories/index.story.tsx +2 -1
- package/src/gradient-picker/types.ts +3 -5
- package/src/h-stack/stories/index.story.tsx +2 -1
- package/src/higher-order/with-constrained-tabbing/README.md +13 -3
- package/src/higher-order/with-focus-return/README.md +9 -2
- package/src/icon/README.md +22 -65
- package/src/icon/docs-manifest.json +5 -0
- package/src/icon/index.tsx +28 -13
- package/src/icon/stories/index.story.tsx +50 -8
- package/src/input-control/stories/index.story.tsx +2 -1
- package/src/menu/styles.ts +1 -1
- package/src/menu-group/stories/index.story.tsx +2 -1
- package/src/menu-item/stories/index.story.tsx +2 -1
- package/src/menu-items-choice/stories/index.story.tsx +2 -1
- package/src/modal/index.tsx +2 -2
- package/src/modal/stories/index.story.tsx +1 -1
- package/src/number-control/stories/index.story.tsx +2 -1
- package/src/placeholder/stories/index.story.tsx +1 -0
- package/src/private-apis.ts +0 -2
- package/src/radio-control/stories/index.story.tsx +2 -1
- package/src/range-control/README.md +4 -3
- package/src/range-control/index.tsx +11 -0
- package/src/range-control/stories/index.story.tsx +9 -1
- package/src/range-control/test/index.tsx +7 -1
- package/src/range-control/types.ts +7 -0
- package/src/responsive-wrapper/stories/index.story.tsx +2 -1
- package/src/search-control/stories/index.story.tsx +2 -1
- package/src/select-control/stories/index.story.tsx +2 -1
- package/src/slot-fill/README.md +26 -15
- package/src/slot-fill/bubbles-virtually/fill.tsx +18 -28
- package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx +26 -16
- package/src/slot-fill/bubbles-virtually/slot.tsx +13 -9
- package/src/slot-fill/bubbles-virtually/use-slot.ts +3 -26
- package/src/slot-fill/fill.ts +7 -22
- package/src/slot-fill/index.tsx +5 -7
- package/src/slot-fill/provider.tsx +8 -17
- package/src/slot-fill/slot.tsx +48 -85
- package/src/slot-fill/types.ts +14 -51
- package/src/text-control/README.md +1 -0
- package/src/text-control/index.tsx +8 -0
- package/src/text-control/stories/index.story.tsx +3 -1
- package/src/text-control/test/text-control.tsx +7 -1
- package/src/textarea-control/stories/index.story.tsx +2 -1
- package/src/toggle-control/stories/index.story.tsx +2 -1
- package/src/toggle-group-control/stories/index.story.tsx +3 -1
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +12 -12
- package/src/toggle-group-control/test/index.tsx +7 -1
- package/src/toggle-group-control/toggle-group-control/README.md +2 -1
- package/src/toggle-group-control/toggle-group-control/component.tsx +10 -0
- package/src/toggle-group-control/toggle-group-control-option/README.md +1 -1
- package/src/toggle-group-control/toggle-group-control-option/component.tsx +1 -0
- package/src/toggle-group-control/toggle-group-control-option-icon/README.md +1 -1
- package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -1
- package/src/toggle-group-control/types.ts +7 -0
- package/src/tools-panel/stories/index.story.tsx +3 -0
- package/src/tree-select/stories/index.story.tsx +2 -1
- package/src/unit-control/stories/index.story.tsx +2 -1
- package/src/utils/deprecated-36px-size.ts +3 -0
- package/src/v-stack/stories/index.story.tsx +2 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","DropdownContentWrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","children","className","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","placement","offset","resize","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","renderContent","paddingSize","enableAlpha","toRgbString","length","alignment","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","icon"],"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: gradient position e.g: 70. 2: 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","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","DropdownContentWrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","children","__next40pxDefaultSize","className","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","placement","offset","resize","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","renderContent","paddingSize","enableAlpha","toRgbString","length","alignment","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","icon"],"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: gradient position e.g: 70. 2: 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\t__next40pxDefaultSize\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\t__next40pxDefaultSize\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":[],"sources":["@wordpress/components/src/dashicon/types.ts"],"sourcesContent":["export type DashiconProps = {\n\t/**\n\t * The icon name\n\t */\n\ticon: IconKey;\n\t/**\n\t * Size of the icon\n\t */\n\tsize?: number;\n};\n\nexport type IconKey =\n\t| 'admin-appearance'\n\t| 'admin-collapse'\n\t| 'admin-comments'\n\t| 'admin-customizer'\n\t| 'admin-generic'\n\t| 'admin-home'\n\t| 'admin-links'\n\t| 'admin-media'\n\t| 'admin-multisite'\n\t| 'admin-network'\n\t| 'admin-page'\n\t| 'admin-plugins'\n\t| 'admin-post'\n\t| 'admin-settings'\n\t| 'admin-site-alt'\n\t| 'admin-site-alt2'\n\t| 'admin-site-alt3'\n\t| 'admin-site'\n\t| 'admin-tools'\n\t| 'admin-users'\n\t| 'airplane'\n\t| 'album'\n\t| 'align-center'\n\t| 'align-full-width'\n\t| 'align-left'\n\t| 'align-none'\n\t| 'align-pull-left'\n\t| 'align-pull-right'\n\t| 'align-right'\n\t| 'align-wide'\n\t| 'amazon'\n\t| 'analytics'\n\t| 'archive'\n\t| 'arrow-down-alt'\n\t| 'arrow-down-alt2'\n\t| 'arrow-down'\n\t| 'arrow-left-alt'\n\t| 'arrow-left-alt2'\n\t| 'arrow-left'\n\t| 'arrow-right-alt'\n\t| 'arrow-right-alt2'\n\t| 'arrow-right'\n\t| 'arrow-up-alt'\n\t| 'arrow-up-alt2'\n\t| 'arrow-up'\n\t| 'arrow-up-duplicate'\n\t| 'art'\n\t| 'awards'\n\t| 'backup'\n\t| 'bank'\n\t| 'beer'\n\t| 'bell'\n\t| 'block-default'\n\t| 'book-alt'\n\t| 'book'\n\t| 'buddicons-activity'\n\t| 'buddicons-bbpress-logo'\n\t| 'buddicons-buddypress-logo'\n\t| 'buddicons-community'\n\t| 'buddicons-forums'\n\t| 'buddicons-friends'\n\t| 'buddicons-groups'\n\t| 'buddicons-pm'\n\t| 'buddicons-replies'\n\t| 'buddicons-topics'\n\t| 'buddicons-tracking'\n\t| 'building'\n\t| 'businessman'\n\t| 'businessperson'\n\t| 'businesswoman'\n\t| 'button'\n\t| 'calculator'\n\t| 'camera-alt'\n\t| 'car'\n\t| 'calendar-alt'\n\t| 'calendar'\n\t| 'camera'\n\t| 'carrot'\n\t| 'cart'\n\t| 'category'\n\t| 'chart-area'\n\t| 'chart-bar'\n\t| 'chart-line'\n\t| 'chart-pie'\n\t| 'clipboard'\n\t| 'clock'\n\t| 'cloud-saved'\n\t| 'cloud-upload'\n\t| 'cloud'\n\t| 'columns'\n\t| 'code-standards'\n\t| 'coffee'\n\t| 'color-picker'\n\t| 'controls-back'\n\t| 'controls-forward'\n\t| 'controls-pause'\n\t| 'controls-play'\n\t| 'controls-repeat'\n\t| 'controls-skipback'\n\t| 'controls-skipforward'\n\t| 'controls-volumeoff'\n\t| 'controls-volumeon'\n\t| 'cover-image'\n\t| 'dashboard'\n\t| 'database'\n\t| 'database-add'\n\t| 'database-export'\n\t| 'database-import'\n\t| 'database-remove'\n\t| 'database-view'\n\t| 'desktop'\n\t| 'dismiss'\n\t| 'download'\n\t| 'drumstick'\n\t| 'edit'\n\t| 'edit-large'\n\t| 'edit-page'\n\t| 'editor-aligncenter'\n\t| 'editor-alignleft'\n\t| 'editor-alignright'\n\t| 'editor-bold'\n\t| 'editor-break'\n\t| 'editor-code'\n\t| 'editor-code-duplicate'\n\t| 'editor-contract'\n\t| 'editor-customchar'\n\t| 'editor-expand'\n\t| 'editor-help'\n\t| 'editor-indent'\n\t| 'editor-insertmore'\n\t| 'editor-italic'\n\t| 'editor-justify'\n\t| 'editor-kitchensink'\n\t| 'editor-ltr'\n\t| 'editor-ol-rtl'\n\t| 'editor-ol'\n\t| 'editor-outdent'\n\t| 'editor-paragraph'\n\t| 'editor-paste-text'\n\t| 'editor-paste-word'\n\t| 'editor-quote'\n\t| 'editor-removeformatting'\n\t| 'editor-rtl'\n\t| 'editor-spellcheck'\n\t| 'editor-strikethrough'\n\t| 'editor-table'\n\t| 'editor-textcolor'\n\t| 'editor-ul'\n\t| 'editor-underline'\n\t| 'editor-unlink'\n\t| 'editor-video'\n\t| 'ellipsis'\n\t| 'email-alt'\n\t| 'email-alt2'\n\t| 'email'\n\t| 'embed-audio'\n\t| 'embed-generic'\n\t| 'embed-photo'\n\t| 'embed-post'\n\t| 'embed-video'\n\t| 'excerpt-view'\n\t| 'exit'\n\t| 'external'\n\t| 'facebook-alt'\n\t| 'facebook'\n\t| 'feedback'\n\t| 'filter'\n\t| 'flag'\n\t| 'food'\n\t| 'format-aside'\n\t| 'format-audio'\n\t| 'format-chat'\n\t| 'format-gallery'\n\t| 'format-image'\n\t| 'format-quote'\n\t| 'format-status'\n\t| 'format-video'\n\t| 'forms'\n\t| 'fullscreen-alt'\n\t| 'fullscreen-exit-alt'\n\t| 'games'\n\t| 'google'\n\t| 'googleplus'\n\t| 'grid-view'\n\t| 'groups'\n\t| 'hammer'\n\t| 'heading'\n\t| 'heart'\n\t| 'hidden'\n\t| 'hourglass'\n\t| 'html'\n\t| 'id-alt'\n\t| 'id'\n\t| 'image-crop'\n\t| 'image-filter'\n\t| 'image-flip-horizontal'\n\t| 'image-flip-vertical'\n\t| 'image-rotate-left'\n\t| 'image-rotate-right'\n\t| 'image-rotate'\n\t| 'images-alt'\n\t| 'images-alt2'\n\t| 'index-card'\n\t| 'info-outline'\n\t| 'info'\n\t| 'insert-after'\n\t| 'insert-before'\n\t| 'insert'\n\t| 'instagram'\n\t| '
|
|
1
|
+
{"version":3,"names":[],"sources":["@wordpress/components/src/dashicon/types.ts"],"sourcesContent":["export type DashiconProps = {\n\t/**\n\t * The icon name\n\t */\n\ticon: IconKey;\n\t/**\n\t * Size of the icon\n\t */\n\tsize?: number;\n};\n\nexport type IconKey =\n\t| 'admin-appearance'\n\t| 'admin-collapse'\n\t| 'admin-comments'\n\t| 'admin-customizer'\n\t| 'admin-generic'\n\t| 'admin-home'\n\t| 'admin-links'\n\t| 'admin-media'\n\t| 'admin-multisite'\n\t| 'admin-network'\n\t| 'admin-page'\n\t| 'admin-plugins'\n\t| 'admin-post'\n\t| 'admin-settings'\n\t| 'admin-site-alt'\n\t| 'admin-site-alt2'\n\t| 'admin-site-alt3'\n\t| 'admin-site'\n\t| 'admin-tools'\n\t| 'admin-users'\n\t| 'airplane'\n\t| 'album'\n\t| 'align-center'\n\t| 'align-full-width'\n\t| 'align-left'\n\t| 'align-none'\n\t| 'align-pull-left'\n\t| 'align-pull-right'\n\t| 'align-right'\n\t| 'align-wide'\n\t| 'amazon'\n\t| 'analytics'\n\t| 'archive'\n\t| 'arrow-down-alt'\n\t| 'arrow-down-alt2'\n\t| 'arrow-down'\n\t| 'arrow-left-alt'\n\t| 'arrow-left-alt2'\n\t| 'arrow-left'\n\t| 'arrow-right-alt'\n\t| 'arrow-right-alt2'\n\t| 'arrow-right'\n\t| 'arrow-up-alt'\n\t| 'arrow-up-alt2'\n\t| 'arrow-up'\n\t| 'arrow-up-duplicate'\n\t| 'art'\n\t| 'awards'\n\t| 'backup'\n\t| 'bank'\n\t| 'beer'\n\t| 'bell'\n\t| 'block-default'\n\t| 'book-alt'\n\t| 'book'\n\t| 'buddicons-activity'\n\t| 'buddicons-bbpress-logo'\n\t| 'buddicons-buddypress-logo'\n\t| 'buddicons-community'\n\t| 'buddicons-forums'\n\t| 'buddicons-friends'\n\t| 'buddicons-groups'\n\t| 'buddicons-pm'\n\t| 'buddicons-replies'\n\t| 'buddicons-topics'\n\t| 'buddicons-tracking'\n\t| 'building'\n\t| 'businessman'\n\t| 'businessperson'\n\t| 'businesswoman'\n\t| 'button'\n\t| 'calculator'\n\t| 'camera-alt'\n\t| 'car'\n\t| 'calendar-alt'\n\t| 'calendar'\n\t| 'camera'\n\t| 'carrot'\n\t| 'cart'\n\t| 'category'\n\t| 'chart-area'\n\t| 'chart-bar'\n\t| 'chart-line'\n\t| 'chart-pie'\n\t| 'clipboard'\n\t| 'clock'\n\t| 'cloud-saved'\n\t| 'cloud-upload'\n\t| 'cloud'\n\t| 'columns'\n\t| 'code-standards'\n\t| 'coffee'\n\t| 'color-picker'\n\t| 'controls-back'\n\t| 'controls-forward'\n\t| 'controls-pause'\n\t| 'controls-play'\n\t| 'controls-repeat'\n\t| 'controls-skipback'\n\t| 'controls-skipforward'\n\t| 'controls-volumeoff'\n\t| 'controls-volumeon'\n\t| 'cover-image'\n\t| 'dashboard'\n\t| 'database'\n\t| 'database-add'\n\t| 'database-export'\n\t| 'database-import'\n\t| 'database-remove'\n\t| 'database-view'\n\t| 'desktop'\n\t| 'dismiss'\n\t| 'download'\n\t| 'drumstick'\n\t| 'edit'\n\t| 'edit-large'\n\t| 'edit-page'\n\t| 'editor-aligncenter'\n\t| 'editor-alignleft'\n\t| 'editor-alignright'\n\t| 'editor-bold'\n\t| 'editor-break'\n\t| 'editor-code'\n\t| 'editor-code-duplicate'\n\t| 'editor-contract'\n\t| 'editor-customchar'\n\t| 'editor-expand'\n\t| 'editor-help'\n\t| 'editor-indent'\n\t| 'editor-insertmore'\n\t| 'editor-italic'\n\t| 'editor-justify'\n\t| 'editor-kitchensink'\n\t| 'editor-ltr'\n\t| 'editor-ol-rtl'\n\t| 'editor-ol'\n\t| 'editor-outdent'\n\t| 'editor-paragraph'\n\t| 'editor-paste-text'\n\t| 'editor-paste-word'\n\t| 'editor-quote'\n\t| 'editor-removeformatting'\n\t| 'editor-rtl'\n\t| 'editor-spellcheck'\n\t| 'editor-strikethrough'\n\t| 'editor-table'\n\t| 'editor-textcolor'\n\t| 'editor-ul'\n\t| 'editor-underline'\n\t| 'editor-unlink'\n\t| 'editor-video'\n\t| 'ellipsis'\n\t| 'email-alt'\n\t| 'email-alt2'\n\t| 'email'\n\t| 'embed-audio'\n\t| 'embed-generic'\n\t| 'embed-photo'\n\t| 'embed-post'\n\t| 'embed-video'\n\t| 'excerpt-view'\n\t| 'exit'\n\t| 'external'\n\t| 'facebook-alt'\n\t| 'facebook'\n\t| 'feedback'\n\t| 'filter'\n\t| 'flag'\n\t| 'food'\n\t| 'format-aside'\n\t| 'format-audio'\n\t| 'format-chat'\n\t| 'format-gallery'\n\t| 'format-image'\n\t| 'format-quote'\n\t| 'format-status'\n\t| 'format-video'\n\t| 'forms'\n\t| 'fullscreen-alt'\n\t| 'fullscreen-exit-alt'\n\t| 'games'\n\t| 'google'\n\t| 'googleplus'\n\t| 'grid-view'\n\t| 'groups'\n\t| 'hammer'\n\t| 'heading'\n\t| 'heart'\n\t| 'hidden'\n\t| 'hourglass'\n\t| 'html'\n\t| 'id-alt'\n\t| 'id'\n\t| 'image-crop'\n\t| 'image-filter'\n\t| 'image-flip-horizontal'\n\t| 'image-flip-vertical'\n\t| 'image-rotate-left'\n\t| 'image-rotate-right'\n\t| 'image-rotate'\n\t| 'images-alt'\n\t| 'images-alt2'\n\t| 'index-card'\n\t| 'info-outline'\n\t| 'info'\n\t| 'insert-after'\n\t| 'insert-before'\n\t| 'insert'\n\t| 'instagram'\n\t| 'laptop'\n\t| 'layout'\n\t| 'leftright'\n\t| 'lightbulb'\n\t| 'list-view'\n\t| 'linkedin'\n\t| 'location-alt'\n\t| 'location'\n\t| 'lock-duplicate'\n\t| 'lock'\n\t| 'marker'\n\t| 'media-archive'\n\t| 'media-audio'\n\t| 'media-code'\n\t| 'media-default'\n\t| 'media-document'\n\t| 'media-interactive'\n\t| 'media-spreadsheet'\n\t| 'media-text'\n\t| 'media-video'\n\t| 'megaphone'\n\t| 'menu-alt'\n\t| 'menu-alt2'\n\t| 'menu-alt3'\n\t| 'menu'\n\t| 'money-alt'\n\t| 'microphone'\n\t| 'migrate'\n\t| 'minus'\n\t| 'money'\n\t| 'move'\n\t| 'nametag'\n\t| 'networking'\n\t| 'no-alt'\n\t| 'no'\n\t| 'open-folder'\n\t| 'palmtree'\n\t| 'paperclip'\n\t| 'performance'\n\t| 'pets'\n\t| 'pdf'\n\t| 'phone'\n\t| 'pinterest'\n\t| 'playlist-audio'\n\t| 'playlist-video'\n\t| 'plus-alt'\n\t| 'plus'\n\t| 'portfolio'\n\t| 'post-status'\n\t| 'pressthis'\n\t| 'products'\n\t| 'plugins-checked'\n\t| 'plus-alt2'\n\t| 'podio'\n\t| 'printer'\n\t| 'privacy'\n\t| 'randomize'\n\t| 'reddit'\n\t| 'redo'\n\t| 'remove'\n\t| 'rest-api'\n\t| 'rss'\n\t| 'saved'\n\t| 'schedule'\n\t| 'screenoptions'\n\t| 'search'\n\t| 'share-alt'\n\t| 'share-alt2'\n\t| 'share'\n\t| 'shield-alt'\n\t| 'shield'\n\t| 'shortcode'\n\t| 'slides'\n\t| 'smartphone'\n\t| 'smiley'\n\t| 'sort'\n\t| 'sos'\n\t| 'star-empty'\n\t| 'star-filled'\n\t| 'star-half'\n\t| 'sticky'\n\t| 'store'\n\t| 'spotify'\n\t| 'superhero'\n\t| 'superhero-alt'\n\t| 'table-col-after'\n\t| 'table-col-before'\n\t| 'table-col-delete'\n\t| 'table-row-after'\n\t| 'table-row-before'\n\t| 'table-row-delete'\n\t| 'tablet'\n\t| 'tag'\n\t| 'tagcloud'\n\t| 'testimonial'\n\t| 'text'\n\t| 'text-page'\n\t| 'thumbs-down'\n\t| 'thumbs-up'\n\t| 'tickets-alt'\n\t| 'tickets'\n\t| 'tide'\n\t| 'translation'\n\t| 'trash'\n\t| 'twitch'\n\t| 'twitter'\n\t| 'twitter-alt'\n\t| 'undo'\n\t| 'universal-access-alt'\n\t| 'universal-access'\n\t| 'unlock'\n\t| 'update-alt'\n\t| 'update'\n\t| 'upload'\n\t| 'vault'\n\t| 'video-alt'\n\t| 'video-alt2'\n\t| 'video-alt3'\n\t| 'visibility'\n\t| 'warning'\n\t| 'welcome-add-page'\n\t| 'welcome-comments'\n\t| 'welcome-learn-more'\n\t| 'welcome-view-site'\n\t| 'welcome-widgets-menus'\n\t| 'welcome-write-blog'\n\t| 'whatsapp'\n\t| 'wordpress-alt'\n\t| 'wordpress'\n\t| 'xing'\n\t| 'yes-alt'\n\t| 'yes'\n\t| 'youtube';\n"],"mappings":"","ignoreList":[]}
|
|
@@ -16,6 +16,7 @@ import SelectControl from '../select-control';
|
|
|
16
16
|
import sizesTable, { findSizeBySlug } from './sizes';
|
|
17
17
|
import { ContextSystemProvider } from '../context';
|
|
18
18
|
import deprecated from '@wordpress/deprecated';
|
|
19
|
+
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
|
|
19
20
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
21
|
const CONTEXT_VALUE = {
|
|
21
22
|
BaseControl: {
|
|
@@ -41,6 +42,7 @@ const CONTEXT_VALUE = {
|
|
|
41
42
|
*
|
|
42
43
|
* return (
|
|
43
44
|
* <DimensionControl
|
|
45
|
+
* __next40pxDefaultSize
|
|
44
46
|
* __nextHasNoMarginBottom
|
|
45
47
|
* label={ 'Padding' }
|
|
46
48
|
* icon={ 'desktop' }
|
|
@@ -66,6 +68,11 @@ export function DimensionControl(props) {
|
|
|
66
68
|
since: '6.7',
|
|
67
69
|
version: '7.0'
|
|
68
70
|
});
|
|
71
|
+
maybeWarnDeprecated36pxSize({
|
|
72
|
+
componentName: 'DimensionControl',
|
|
73
|
+
__next40pxDefaultSize,
|
|
74
|
+
size: undefined
|
|
75
|
+
});
|
|
69
76
|
const onChangeSpacingSize = val => {
|
|
70
77
|
const theSize = findSizeBySlug(sizes, val);
|
|
71
78
|
if (!theSize || value === theSize.slug) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","__","Icon","SelectControl","sizesTable","findSizeBySlug","ContextSystemProvider","deprecated","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","icon","onChange","className","since","version","onChangeSpacingSize","val","theSize","slug","
|
|
1
|
+
{"version":3,"names":["clsx","__","Icon","SelectControl","sizesTable","findSizeBySlug","ContextSystemProvider","deprecated","maybeWarnDeprecated36pxSize","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","DimensionControl","props","__next40pxDefaultSize","__nextHasNoMarginBottom","label","value","sizes","icon","onChange","className","since","version","componentName","size","undefined","onChangeSpacingSize","val","theSize","slug","formatSizesAsOptions","theSizes","options","map","name","selectLabel","children","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\nimport { ContextSystemProvider } from '../context';\nimport deprecated from '@wordpress/deprecated';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'DimensionControl' },\n\t},\n};\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * @deprecated\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tdeprecated( 'wp.components.DimensionControl', {\n\t\tsince: '6.7',\n\t\tversion: '7.0',\n\t} );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'DimensionControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'block-editor-dimension-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ selectLabel }\n\t\t\t\thideLabelFromVision={ false }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeSpacingSize }\n\t\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,7 +32,14 @@ const {
|
|
|
32
32
|
* const MyDisabled = () => {
|
|
33
33
|
* const [ isDisabled, setIsDisabled ] = useState( true );
|
|
34
34
|
*
|
|
35
|
-
*
|
|
35
|
+
* let input = (
|
|
36
|
+
* <TextControl
|
|
37
|
+
* __next40pxDefaultSize
|
|
38
|
+
* __nextHasNoMarginBottom
|
|
39
|
+
* label="Input"
|
|
40
|
+
* onChange={ () => {} }
|
|
41
|
+
* />
|
|
42
|
+
* );
|
|
36
43
|
* if ( isDisabled ) {
|
|
37
44
|
* input = <Disabled>{ input }</Disabled>;
|
|
38
45
|
* }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","disabledStyles","useCx","jsx","_jsx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","value","inert","undefined"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n
|
|
1
|
+
{"version":3,"names":["createContext","disabledStyles","useCx","jsx","_jsx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","value","inert","undefined"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\t__nextHasNoMarginBottom\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,cAAc,QAAQ,0BAA0B;AAGzD,SAASC,KAAK,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjC,MAAMC,OAAO,GAAGL,aAAa,CAAa,KAAM,CAAC;AACjD,MAAM;EAAEM,QAAQ;EAAEC;AAAS,CAAC,GAAGF,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAGX,KAAK,CAAC,CAAC;EAElB,oBACCE,IAAA,CAACG,QAAQ;IAACO,KAAK,EAAGH,UAAY;IAAAD,QAAA,eAC7BN,IAAA;MACC;MACAW,KAAK,EAAGJ,UAAU,GAAG,MAAM,GAAGK,SAAW;MACzCP,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEZ,cAAc,EAAEQ,SAAS,EAAE,qBAAsB,CAAC,GACtDO,SACH;MAAA,GACIJ,KAAK;MAAAF,QAAA,EAERA;IAAQ,CACN;EAAC,CACG,CAAC;AAEb;AAEAF,QAAQ,CAACH,OAAO,GAAGA,OAAO;AAC1BG,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAE5B,eAAeE,QAAQ","ignoreList":[]}
|
|
@@ -141,6 +141,8 @@ function DuotonePicker({
|
|
|
141
141
|
options: options,
|
|
142
142
|
actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
|
|
143
143
|
onClick: () => onChange(undefined),
|
|
144
|
+
accessibleWhenDisabled: true,
|
|
145
|
+
disabled: !value,
|
|
144
146
|
children: __('Clear')
|
|
145
147
|
}),
|
|
146
148
|
children: /*#__PURE__*/_jsx(Spacer, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\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\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","jsx","_jsx","jsxs","_jsxs","DuotonePicker","asButtons","loop","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","ariaLabel","ariaLabelledby","otherProps","defaultDark","defaultLight","isUnset","unsetOptionLabel","unsetOption","Option","isSelected","tooltipText","className","onClick","undefined","duotoneOptions","map","colors","slug","name","style","background","color","label","metaProps","_metaProps","options","actions","ButtonAction","accessibleWhenDisabled","disabled","children","paddingTop","length","spacing","labels","enableAlpha","newColors","newValue"],"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tasButtons,\n\tloop,\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n\t'aria-label': ariaLabel,\n\t'aria-labelledby': ariaLabelledby,\n\t...otherProps\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\tconst unsetOptionLabel = __( 'Unset' );\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ unsetOptionLabel }\n\t\t\taria-label={ unsetOptionLabel }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\tconst options = unsetable\n\t\t? [ unsetOption, ...duotoneOptions ]\n\t\t: duotoneOptions;\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...otherProps }\n\t\t\t{ ...metaProps }\n\t\t\toptions={ options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\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\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -20,6 +20,7 @@ const FontSizePickerToggleGroup = props => {
|
|
|
20
20
|
return /*#__PURE__*/_jsx(ToggleGroupControl, {
|
|
21
21
|
__nextHasNoMarginBottom: true,
|
|
22
22
|
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
23
|
+
__shouldNotWarnDeprecated36pxSize: true,
|
|
23
24
|
label: __('Font size'),
|
|
24
25
|
hideLabelFromVision: true,
|
|
25
26
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","jsx","_jsx","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","__nextHasNoMarginBottom","label","hideLabelFromVision","isBlock","children","map","fontSize","index","name","showTooltip","slug"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,kBAAkB,EAClBC,wBAAwB,QAClB,yBAAyB;AAChC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnE,MAAMC,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACCF,IAAA,CAACL,kBAAkB;IAClBa,uBAAuB;IACvBH,qBAAqB,EAAGA,qBAAuB;IAC/CI,KAAK,
|
|
1
|
+
{"version":3,"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","jsx","_jsx","FontSizePickerToggleGroup","props","fontSizes","value","__next40pxDefaultSize","size","onChange","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","label","hideLabelFromVision","isBlock","children","map","fontSize","index","name","showTooltip","slug"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,kBAAkB,EAClBC,wBAAwB,QAClB,yBAAyB;AAChC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnE,MAAMC,yBAAyB,GAAKC,KAAqC,IAAM;EAC9E,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,qBAAqB;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,KAAK;EACzE,oBACCF,IAAA,CAACL,kBAAkB;IAClBa,uBAAuB;IACvBH,qBAAqB,EAAGA,qBAAuB;IAC/CI,iCAAiC;IACjCC,KAAK,EAAGhB,EAAE,CAAE,WAAY,CAAG;IAC3BiB,mBAAmB;IACnBP,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBK,OAAO;IACPN,IAAI,EAAGA,IAAM;IAAAO,QAAA,EAEXV,SAAS,CAACW,GAAG,CAAE,CAAEC,QAAQ,EAAEC,KAAK,kBACjChB,IAAA,CAACJ,wBAAwB;MAExBQ,KAAK,EAAGW,QAAQ,CAACT,IAAM;MACvBI,KAAK,EAAGb,qBAAqB,CAAEmB,KAAK,CAAI;MACxC,cAAaD,QAAQ,CAACE,IAAI,IAAInB,aAAa,CAAEkB,KAAK,CAAI;MACtDE,WAAW;IAAA,GAJLH,QAAQ,CAACI,IAKf,CACA;EAAC,CACgB,CAAC;AAEvB,CAAC;AAED,eAAelB,yBAAyB","ignoreList":[]}
|
|
@@ -23,6 +23,7 @@ import { Spacer } from '../spacer';
|
|
|
23
23
|
import FontSizePickerSelect from './font-size-picker-select';
|
|
24
24
|
import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
|
|
25
25
|
import { T_SHIRT_NAMES } from './constants';
|
|
26
|
+
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
|
|
26
27
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
28
|
const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
|
|
28
29
|
const MAX_TOGGLE_GROUP_SIZES = 5;
|
|
@@ -84,6 +85,11 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
84
85
|
const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
|
|
85
86
|
const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);
|
|
86
87
|
const isDisabled = value === undefined;
|
|
88
|
+
maybeWarnDeprecated36pxSize({
|
|
89
|
+
componentName: 'FontSizePicker',
|
|
90
|
+
__next40pxDefaultSize,
|
|
91
|
+
size
|
|
92
|
+
});
|
|
87
93
|
return /*#__PURE__*/_jsxs(Container, {
|
|
88
94
|
ref: ref,
|
|
89
95
|
className: "components-font-size-picker",
|
|
@@ -164,6 +170,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
|
|
|
164
170
|
children: /*#__PURE__*/_jsx(RangeControl, {
|
|
165
171
|
__nextHasNoMarginBottom: true,
|
|
166
172
|
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
173
|
+
__shouldNotWarnDeprecated36pxSize: true,
|
|
167
174
|
className: "components-font-size-picker__custom-input",
|
|
168
175
|
label: __('Custom Size'),
|
|
169
176
|
hideLabelFromVision: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","jsx","_jsx","jsxs","_jsxs","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","currentPickerType","length","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","isDisabled","undefined","className","children","as","label","icon","onClick","isPressed","newValue","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","initialPosition","withInputField","max","step","disabled","accessibleWhenDisabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\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\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\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\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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) }\n\t\t\t\t{ currentPickerType === 'custom' && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\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\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\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\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' ||\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","Container","Header","HeaderHint","HeaderLabel","HeaderToggle","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","DEFAULT_UNITS","MAX_TOGGLE_GROUP_SIZES","UnforwardedFontSizePicker","props","ref","__next40pxDefaultSize","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","units","unitsProp","value","withSlider","withReset","availableUnits","selectedFontSize","find","fontSize","isCustomValue","userRequestedCustom","setUserRequestedCustom","currentPickerType","length","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","isDisabled","undefined","componentName","className","children","as","label","icon","onClick","isPressed","newValue","Number","onSelectCustom","isBlock","labelPosition","hideLabelFromVision","parseInt","min","marginX","marginBottom","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","initialPosition","withInputField","max","step","disabled","accessibleWhenDisabled","variant","FontSizePicker"],"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeader,\n\tHeaderHint,\n\tHeaderLabel,\n\tHeaderToggle,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\nconst MAX_TOGGLE_GROUP_SIZES = 5;\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunits: unitsProp = DEFAULT_UNITS,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: unitsProp,\n\t} );\n\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\t// Initially request a custom picker if the value is not from the predef list.\n\tconst [ userRequestedCustom, setUserRequestedCustom ] =\n\t\tuseState( isCustomValue );\n\n\tlet currentPickerType;\n\tif ( ! disableCustomFontSizes && userRequestedCustom ) {\n\t\t// While showing the custom value picker, switch back to predef only if\n\t\t// `disableCustomFontSizes` is set to `true`.\n\t\tcurrentPickerType = 'custom' as const;\n\t} else {\n\t\tcurrentPickerType =\n\t\t\tfontSizes.length > MAX_TOGGLE_GROUP_SIZES\n\t\t\t\t? ( 'select' as const )\n\t\t\t\t: ( 'togglegroup' as const );\n\t}\n\n\tconst headerHint = useMemo( () => {\n\t\tswitch ( currentPickerType ) {\n\t\t\tcase 'custom':\n\t\t\t\treturn __( 'Custom' );\n\t\t\tcase 'togglegroup':\n\t\t\t\tif ( selectedFontSize ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'select':\n\t\t\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\t\t\tif ( commonUnit ) {\n\t\t\t\t\treturn `(${ commonUnit })`;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn '';\n\t}, [ currentPickerType, selectedFontSize, fontSizes ] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\tconst isDisabled = value === undefined;\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'FontSizePicker',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<Header className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<HeaderToggle\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tcurrentPickerType === 'custom'\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetUserRequestedCustom( ! userRequestedCustom )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisPressed={ currentPickerType === 'custom' }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Header>\n\t\t\t</Spacer>\n\t\t\t<div>\n\t\t\t\t{ currentPickerType === 'select' && (\n\t\t\t\t\t<FontSizePickerSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\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\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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\tonSelectCustom={ () => setUserRequestedCustom( true ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ currentPickerType === 'togglegroup' && (\n\t\t\t\t\t<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\tonChange?.( undefined );\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\thasUnits ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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) }\n\t\t\t\t{ currentPickerType === 'custom' && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize={\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tsetUserRequestedCustom( true );\n\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\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\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\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} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\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\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\t\t\t\tsize === '__unstable-large' ||\n\t\t\t\t\t\t\t\t\t\tprops.__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\t? 'default'\n\t\t\t\t\t\t\t\t\t\t\t: 'small'\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -47,7 +47,9 @@ export function FormFileUpload({
|
|
|
47
47
|
// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
|
|
48
48
|
// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
|
|
49
49
|
// This can be removed once the Chromium fix is in the stable channel.
|
|
50
|
-
|
|
50
|
+
// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
|
|
51
|
+
const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
|
|
52
|
+
const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
|
|
51
53
|
return /*#__PURE__*/_jsxs("div", {
|
|
52
54
|
className: "components-form-file-upload",
|
|
53
55
|
children: [ui, /*#__PURE__*/_jsx("input", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","Button","jsx","_jsx","jsxs","_jsxs","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","openFileDialog","current","click","ui","
|
|
1
|
+
{"version":3,"names":["useRef","Button","jsx","_jsx","jsxs","_jsxs","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","openFileDialog","current","click","ui","isSafari","globalThis","window","navigator","userAgent","includes","compatAccept","className","type","style","display"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/**\n * FormFileUpload is a component that allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n * <FormFileUpload\n * accept=\"image/*\"\n * onChange={ ( event ) => console.log( event.currentTarget.files ) }\n * >\n * Upload\n * </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\t// @todo: Temporary fix a bug that prevents Chromium browsers from selecting \".heic\" files\n\t// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.\n\t// This can be removed once the Chromium fix is in the stable channel.\n\t// Prevent Safari from adding \"image/heic\" and \"image/heif\" to the accept attribute.\n\tconst isSafari =\n\t\tglobalThis.window?.navigator.userAgent.includes( 'Safari' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chromium' );\n\tconst compatAccept =\n\t\t! isSafari && !! accept?.includes( 'image/*' )\n\t\t\t? `${ accept }, image/heic, image/heif`\n\t\t\t: accept;\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ compatAccept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAGd,MAAM,CAAsB,IAAK,CAAC;EAC9C,MAAMe,cAAc,GAAGA,CAAA,KAAM;IAC5BD,GAAG,CAACE,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGN,MAAM,GAChBA,MAAM,CAAE;IAAEG;EAAe,CAAE,CAAC,gBAE5BZ,IAAA,CAACF,MAAM;IAACU,OAAO,EAAGI,cAAgB;IAAA,GAAMF,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EACD;EACA;EACA;EACA;EACA,MAAMW,QAAQ,GACbC,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC3D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC7D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,UAAW,CAAC;EAChE,MAAMC,YAAY,GACjB,CAAEN,QAAQ,IAAI,CAAC,CAAEZ,MAAM,EAAEiB,QAAQ,CAAE,SAAU,CAAC,GAC3C,GAAIjB,MAAM,0BAA2B,GACrCA,MAAM;EAEV,oBACCF,KAAA;IAAKqB,SAAS,EAAC,6BAA6B;IAAAlB,QAAA,GACzCU,EAAE,eACJf,IAAA;MACCwB,IAAI,EAAC,MAAM;MACXb,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBmB,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7BtB,MAAM,EAAGkB,YAAc;MACvBf,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAEA,eAAeL,cAAc","ignoreList":[]}
|