@wordpress/components 23.2.0 → 23.3.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 +35 -1
- package/CONTRIBUTING.md +1 -1
- package/build/alignment-matrix-control/utils.js +2 -2
- package/build/alignment-matrix-control/utils.js.map +1 -1
- package/build/autocomplete/autocompleter-ui.js +1 -3
- package/build/autocomplete/autocompleter-ui.js.map +1 -1
- package/build/border-box-control/border-box-control-linked-button/component.js.map +1 -1
- package/build/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
- package/build/border-control/border-control-dropdown/component.js +8 -4
- package/build/border-control/border-control-dropdown/component.js.map +1 -1
- package/build/button/deprecated.js +8 -6
- package/build/button/deprecated.js.map +1 -1
- package/build/button/index.js +52 -23
- package/build/button/index.js.map +1 -1
- package/build/button/types.js +6 -0
- package/build/button/types.js.map +1 -0
- package/build/color-list-picker/index.js.map +1 -1
- package/build/color-list-picker/types.js +6 -0
- package/build/color-list-picker/types.js.map +1 -0
- package/build/color-palette/index.js +9 -61
- package/build/color-palette/index.js.map +1 -1
- package/build/color-palette/index.native.js +24 -9
- package/build/color-palette/index.native.js.map +1 -1
- package/build/color-palette/utils.js +103 -0
- package/build/color-palette/utils.js.map +1 -0
- package/build/custom-gradient-picker/gradient-bar/utils.js +1 -1
- package/build/custom-gradient-picker/gradient-bar/utils.js.map +1 -1
- package/build/date-time/date/index.js.map +1 -1
- package/build/dropdown/index.js +20 -8
- package/build/dropdown/index.js.map +1 -1
- package/build/form-token-field/token.js +1 -1
- package/build/form-token-field/token.js.map +1 -1
- package/build/gradient-picker/index.js +9 -1
- package/build/gradient-picker/index.js.map +1 -1
- package/build/h-stack/component.js +0 -1
- package/build/h-stack/component.js.map +1 -1
- package/build/input-control/input-field.js +4 -2
- package/build/input-control/input-field.js.map +1 -1
- package/build/keyboard-shortcuts/index.js +44 -16
- package/build/keyboard-shortcuts/index.js.map +1 -1
- package/build/keyboard-shortcuts/types.js +6 -0
- package/build/keyboard-shortcuts/types.js.map +1 -0
- package/build/modal/index.js +1 -1
- package/build/modal/index.js.map +1 -1
- package/build/notice/index.js +16 -18
- package/build/notice/index.js.map +1 -1
- package/build/notice/list.js +23 -8
- package/build/notice/list.js.map +1 -1
- package/build/notice/types.js +6 -0
- package/build/notice/types.js.map +1 -0
- package/build/number-control/index.js +1 -1
- package/build/number-control/index.js.map +1 -1
- package/build/query-controls/author-select.js +7 -3
- package/build/query-controls/author-select.js.map +1 -1
- package/build/query-controls/category-select.js +7 -3
- package/build/query-controls/category-select.js.map +1 -1
- package/build/query-controls/index.js +68 -20
- package/build/query-controls/index.js.map +1 -1
- package/build/query-controls/terms.js +4 -3
- package/build/query-controls/terms.js.map +1 -1
- package/build/query-controls/types.js +6 -0
- package/build/query-controls/types.js.map +1 -0
- package/build/slot-fill/bubbles-virtually/fill.js +1 -0
- package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build/slot-fill/slot.js +1 -0
- package/build/slot-fill/slot.js.map +1 -1
- package/build/slot-fill/use-slot.js +1 -11
- package/build/slot-fill/use-slot.js.map +1 -1
- package/build/snackbar/index.js.map +1 -1
- package/build/snackbar/list.js.map +1 -1
- package/build/tab-panel/index.js +36 -8
- package/build/tab-panel/index.js.map +1 -1
- package/build/tree-grid/index.js +1 -1
- package/build/tree-grid/index.js.map +1 -1
- package/build/tree-select/index.js +2 -6
- package/build/tree-select/index.js.map +1 -1
- package/build-module/alignment-matrix-control/utils.js +2 -2
- package/build-module/alignment-matrix-control/utils.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.js +1 -2
- package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
- package/build-module/border-box-control/border-box-control-linked-button/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/component.js +7 -4
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
- package/build-module/button/deprecated.js +8 -5
- package/build-module/button/deprecated.js.map +1 -1
- package/build-module/button/index.js +51 -22
- package/build-module/button/index.js.map +1 -1
- package/build-module/button/types.js +2 -0
- package/build-module/button/types.js.map +1 -0
- package/build-module/color-list-picker/index.js.map +1 -1
- package/build-module/color-list-picker/types.js +2 -0
- package/build-module/color-list-picker/types.js.map +1 -0
- package/build-module/color-palette/index.js +7 -54
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-palette/index.native.js +24 -8
- package/build-module/color-palette/index.native.js.map +1 -1
- package/build-module/color-palette/utils.js +79 -0
- package/build-module/color-palette/utils.js.map +1 -0
- package/build-module/custom-gradient-picker/gradient-bar/utils.js +1 -1
- package/build-module/custom-gradient-picker/gradient-bar/utils.js.map +1 -1
- package/build-module/date-time/date/index.js +1 -1
- package/build-module/date-time/date/index.js.map +1 -1
- package/build-module/dropdown/index.js +19 -8
- package/build-module/dropdown/index.js.map +1 -1
- package/build-module/form-token-field/token.js +1 -1
- package/build-module/form-token-field/token.js.map +1 -1
- package/build-module/gradient-picker/index.js +9 -2
- package/build-module/gradient-picker/index.js.map +1 -1
- package/build-module/h-stack/component.js +0 -1
- package/build-module/h-stack/component.js.map +1 -1
- package/build-module/input-control/input-field.js +4 -2
- package/build-module/input-control/input-field.js.map +1 -1
- package/build-module/keyboard-shortcuts/index.js +48 -16
- package/build-module/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/keyboard-shortcuts/types.js +2 -0
- package/build-module/keyboard-shortcuts/types.js.map +1 -0
- package/build-module/modal/index.js +1 -1
- package/build-module/modal/index.js.map +1 -1
- package/build-module/notice/index.js +14 -15
- package/build-module/notice/index.js.map +1 -1
- package/build-module/notice/list.js +23 -8
- package/build-module/notice/list.js.map +1 -1
- package/build-module/notice/types.js +2 -0
- package/build-module/notice/types.js.map +1 -0
- package/build-module/number-control/index.js +1 -1
- package/build-module/number-control/index.js.map +1 -1
- package/build-module/query-controls/author-select.js +7 -3
- package/build-module/query-controls/author-select.js.map +1 -1
- package/build-module/query-controls/category-select.js +8 -4
- package/build-module/query-controls/category-select.js.map +1 -1
- package/build-module/query-controls/index.js +64 -20
- package/build-module/query-controls/index.js.map +1 -1
- package/build-module/query-controls/terms.js +8 -4
- package/build-module/query-controls/terms.js.map +1 -1
- package/build-module/query-controls/types.js +2 -0
- package/build-module/query-controls/types.js.map +1 -0
- package/build-module/slot-fill/bubbles-virtually/fill.js +1 -0
- package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build-module/slot-fill/slot.js +1 -0
- package/build-module/slot-fill/slot.js.map +1 -1
- package/build-module/slot-fill/use-slot.js +2 -12
- package/build-module/slot-fill/use-slot.js.map +1 -1
- package/build-module/snackbar/index.js.map +1 -1
- package/build-module/snackbar/list.js.map +1 -1
- package/build-module/tab-panel/index.js +36 -8
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-module/tree-grid/index.js +1 -1
- package/build-module/tree-grid/index.js.map +1 -1
- package/build-module/tree-select/index.js +2 -6
- package/build-module/tree-select/index.js.map +1 -1
- package/build-style/style-rtl.css +5 -0
- package/build-style/style.css +5 -0
- package/build-types/border-box-control/border-box-control/hook.d.ts +1 -1
- package/build-types/border-box-control/border-box-control-linked-button/component.d.ts +1 -1
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +171 -160
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +1 -1
- package/build-types/border-control/border-control/hook.d.ts +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/hook.d.ts +1 -1
- package/build-types/button/deprecated.d.ts +143 -7
- package/build-types/button/deprecated.d.ts.map +1 -1
- package/build-types/button/index.d.ts +20 -3
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/button/stories/index.d.ts +20 -0
- package/build-types/button/stories/index.d.ts.map +1 -0
- package/build-types/button/test/index.d.ts +2 -0
- package/build-types/button/test/index.d.ts.map +1 -0
- package/build-types/button/types.d.ts +134 -0
- package/build-types/button/types.d.ts.map +1 -0
- package/build-types/color-list-picker/index.d.ts +5 -0
- package/build-types/color-list-picker/index.d.ts.map +1 -0
- package/build-types/color-list-picker/types.d.ts +42 -0
- package/build-types/color-list-picker/types.d.ts.map +1 -0
- package/build-types/color-palette/index.d.ts +2 -4
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/color-palette/stories/index.d.ts +2 -2
- package/build-types/color-palette/styles.d.ts +1 -1
- package/build-types/color-palette/types.d.ts +1 -1
- package/build-types/color-palette/types.d.ts.map +1 -1
- package/build-types/color-palette/utils.d.ts +14 -0
- package/build-types/color-palette/utils.d.ts.map +1 -0
- package/build-types/color-picker/styles.d.ts +2 -2
- package/build-types/date-time/date/index.d.ts.map +1 -1
- package/build-types/date-time/date/styles.d.ts +3 -3
- package/build-types/dropdown/index.d.ts +4 -4
- package/build-types/dropdown/index.d.ts.map +1 -1
- package/build-types/dropdown/stories/index.d.ts.map +1 -1
- package/build-types/dropdown/types.d.ts +9 -10
- package/build-types/dropdown/types.d.ts.map +1 -1
- package/build-types/font-size-picker/styles.d.ts +2 -2
- package/build-types/h-stack/component.d.ts +0 -1
- package/build-types/h-stack/component.d.ts.map +1 -1
- package/build-types/input-control/input-field.d.ts.map +1 -1
- package/build-types/keyboard-shortcuts/index.d.ts +38 -0
- package/build-types/keyboard-shortcuts/index.d.ts.map +1 -0
- package/build-types/keyboard-shortcuts/stories/index.d.ts +12 -0
- package/build-types/keyboard-shortcuts/stories/index.d.ts.map +1 -0
- package/build-types/keyboard-shortcuts/test/index.d.ts +2 -0
- package/build-types/keyboard-shortcuts/test/index.d.ts.map +1 -0
- package/build-types/keyboard-shortcuts/types.d.ts +48 -0
- package/build-types/keyboard-shortcuts/types.d.ts.map +1 -0
- package/build-types/modal/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-back-button/component.d.ts +1 -1
- package/build-types/navigator/navigator-back-button/hook.d.ts +2 -2
- package/build-types/navigator/navigator-button/component.d.ts +1 -1
- package/build-types/navigator/navigator-button/hook.d.ts +2 -2
- package/build-types/notice/index.d.ts +16 -0
- package/build-types/notice/index.d.ts.map +1 -0
- package/build-types/notice/list.d.ts +32 -0
- package/build-types/notice/list.d.ts.map +1 -0
- package/build-types/notice/stories/index.d.ts +17 -0
- package/build-types/notice/stories/index.d.ts.map +1 -0
- package/build-types/notice/test/index.d.ts +2 -0
- package/build-types/notice/test/index.d.ts.map +1 -0
- package/build-types/notice/test/list.d.ts +2 -0
- package/build-types/notice/test/list.d.ts.map +1 -0
- package/build-types/notice/types.d.ts +128 -0
- package/build-types/notice/types.d.ts.map +1 -0
- package/build-types/number-control/styles/number-control-styles.d.ts +2 -2
- package/build-types/number-control/styles/number-control-styles.d.ts.map +1 -1
- package/build-types/placeholder/stories/index.d.ts.map +1 -1
- package/build-types/query-controls/author-select.d.ts +4 -0
- package/build-types/query-controls/author-select.d.ts.map +1 -0
- package/build-types/query-controls/category-select.d.ts +4 -0
- package/build-types/query-controls/category-select.d.ts.map +1 -0
- package/build-types/query-controls/index.d.ts +30 -0
- package/build-types/query-controls/index.d.ts.map +1 -0
- package/build-types/query-controls/stories/index.d.ts +13 -0
- package/build-types/query-controls/stories/index.d.ts.map +1 -0
- package/build-types/query-controls/terms.d.ts +13 -0
- package/build-types/query-controls/terms.d.ts.map +1 -0
- package/build-types/query-controls/test/terms.d.ts +2 -0
- package/build-types/query-controls/test/terms.d.ts.map +1 -0
- package/build-types/query-controls/types.d.ts +131 -0
- package/build-types/query-controls/types.d.ts.map +1 -0
- package/build-types/range-control/index.d.ts +1 -1
- package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
- package/build-types/slot-fill/use-slot.d.ts.map +1 -1
- package/build-types/snackbar/index.d.ts +9 -2
- package/build-types/snackbar/index.d.ts.map +1 -1
- package/build-types/snackbar/list.d.ts.map +1 -1
- package/build-types/snackbar/types.d.ts +15 -88
- package/build-types/snackbar/types.d.ts.map +1 -1
- package/build-types/tab-panel/index.d.ts.map +1 -1
- package/build-types/tab-panel/types.d.ts +1 -1
- package/build-types/tab-panel/types.d.ts.map +1 -1
- package/build-types/toggle-group-control/stories/index.d.ts.map +1 -1
- package/build-types/tree-select/index.d.ts.map +1 -1
- package/build-types/ui/form-group/form-group.d.ts +2 -2
- package/package.json +18 -17
- package/src/alignment-matrix-control/utils.tsx +2 -2
- package/src/autocomplete/autocompleter-ui.js +1 -2
- package/src/autocomplete/test/index.js +1 -5
- package/src/border-box-control/border-box-control-linked-button/component.tsx +1 -1
- package/src/border-box-control/border-box-control-linked-button/hook.ts +1 -1
- package/src/border-control/border-control-dropdown/component.tsx +9 -8
- package/src/box-control/test/index.js +11 -35
- package/src/button/README.md +49 -55
- package/src/button/{deprecated.js → deprecated.tsx} +19 -4
- package/src/button/{index.js → index.tsx} +95 -34
- package/src/button/stories/index.tsx +106 -0
- package/src/button/style.scss +3 -2
- package/src/button/test/{index.js → index.tsx} +30 -7
- package/src/button/types.ts +138 -0
- package/src/checkbox-control/test/index.tsx +1 -5
- package/src/color-list-picker/{index.js → index.tsx} +3 -2
- package/src/color-list-picker/types.ts +46 -0
- package/src/color-palette/README.md +1 -1
- package/src/color-palette/index.native.js +11 -4
- package/src/color-palette/index.tsx +11 -67
- package/src/color-palette/test/index.tsx +4 -14
- package/src/color-palette/test/utils.ts +1 -1
- package/src/color-palette/types.ts +1 -1
- package/src/color-palette/utils.ts +98 -0
- package/src/color-picker/test/index.js +6 -15
- package/src/combobox-control/test/index.js +1 -6
- package/src/confirm-dialog/test/index.js +9 -29
- package/src/custom-gradient-picker/gradient-bar/utils.js +1 -1
- package/src/date-time/date/index.tsx +2 -1
- package/src/date-time/date/test/index.tsx +2 -8
- package/src/date-time/time/test/index.tsx +9 -29
- package/src/dimension-control/test/index.test.js +2 -8
- package/src/disabled/test/index.tsx +1 -5
- package/src/draggable/test/index.native.js +4 -4
- package/src/dropdown/README.md +1 -8
- package/src/dropdown/index.tsx +17 -6
- package/src/dropdown/stories/index.tsx +3 -3
- package/src/dropdown/test/index.tsx +2 -8
- package/src/dropdown/types.ts +9 -10
- package/src/dropdown-menu/README.md +1 -1
- package/src/dropdown-menu/stories/index.js +96 -27
- package/src/dropdown-menu/test/index.js +2 -8
- package/src/external-link/test/index.tsx +1 -6
- package/src/focal-point-picker/test/index.js +3 -11
- package/src/font-size-picker/test/index.tsx +14 -44
- package/src/form-file-upload/test/index.tsx +2 -17
- package/src/form-toggle/test/index.tsx +1 -5
- package/src/form-token-field/test/index.tsx +80 -163
- package/src/form-token-field/token.tsx +1 -1
- package/src/gradient-picker/index.js +15 -4
- package/src/guide/test/index.js +5 -17
- package/src/h-stack/component.tsx +0 -1
- package/src/higher-order/with-filters/test/index.js +24 -24
- package/src/higher-order/with-focus-outside/test/index.js +11 -25
- package/src/higher-order/with-focus-return/test/index.js +1 -5
- package/src/input-control/input-field.tsx +3 -1
- package/src/input-control/test/index.js +1 -6
- package/src/isolated-event-container/test/index.js +2 -8
- package/src/keyboard-shortcuts/README.md +1 -1
- package/src/keyboard-shortcuts/index.tsx +93 -0
- package/src/keyboard-shortcuts/stories/index.tsx +60 -0
- package/src/keyboard-shortcuts/test/{index.js → index.tsx} +16 -6
- package/src/keyboard-shortcuts/types.ts +51 -0
- package/src/modal/index.tsx +1 -2
- package/src/navigable-container/test/navigable-menu.js +5 -17
- package/src/navigable-container/test/tababble-container.js +3 -11
- package/src/navigation/test/index.js +3 -11
- package/src/navigator/test/index.tsx +6 -20
- package/src/notice/README.md +89 -42
- package/src/notice/{index.js → index.tsx} +28 -20
- package/src/notice/list.tsx +72 -0
- package/src/notice/stories/index.tsx +119 -0
- package/src/notice/test/__snapshots__/{index.js.snap → index.tsx.snap} +0 -0
- package/src/notice/test/{index.js → index.tsx} +7 -4
- package/src/notice/test/{list.js → list.tsx} +0 -0
- package/src/notice/types.ts +136 -0
- package/src/number-control/index.tsx +1 -1
- package/src/number-control/test/index.tsx +28 -86
- package/src/panel/test/body.js +2 -8
- package/src/placeholder/stories/index.tsx +1 -0
- package/src/query-controls/README.md +56 -56
- package/src/query-controls/author-select.tsx +37 -0
- package/src/query-controls/category-select.tsx +46 -0
- package/src/query-controls/index.tsx +192 -0
- package/src/query-controls/stories/index.tsx +205 -0
- package/src/query-controls/terms.ts +57 -0
- package/src/query-controls/test/{terms.js → terms.ts} +36 -20
- package/src/query-controls/types.ts +150 -0
- package/src/select-control/test/select-control.tsx +1 -6
- package/src/slot-fill/bubbles-virtually/fill.js +1 -0
- package/src/slot-fill/slot.js +1 -1
- package/src/slot-fill/use-slot.js +6 -16
- package/src/snackbar/index.tsx +6 -5
- package/src/snackbar/list.tsx +4 -2
- package/src/snackbar/types.ts +18 -92
- package/src/tab-panel/index.tsx +38 -16
- package/src/tab-panel/style.scss +8 -0
- package/src/tab-panel/test/index.tsx +35 -7
- package/src/tab-panel/types.ts +1 -1
- package/src/theme/test/index.tsx +4 -4
- package/src/toggle-group-control/stories/index.tsx +1 -0
- package/src/toggle-group-control/test/index.tsx +7 -23
- package/src/toolbar/stories/index.js +75 -72
- package/src/tools-panel/stories/index.js +3 -0
- package/src/tools-panel/test/index.js +1 -1
- package/src/tree-grid/index.js +1 -1
- package/src/tree-select/index.tsx +3 -6
- package/src/ui/context/test/context-connect.tsx +2 -0
- package/src/ui/context/test/wordpress-component.tsx +2 -0
- package/src/unit-control/test/index.tsx +21 -74
- package/src/utils/hooks/test/use-latest-ref.js +15 -18
- package/tsconfig.json +1 -4
- package/tsconfig.tsbuildinfo +1 -1
- package/build-types/radio-context/index.d.ts +0 -6
- package/build-types/radio-context/index.d.ts.map +0 -1
- package/src/button/stories/index.js +0 -179
- package/src/keyboard-shortcuts/index.js +0 -56
- package/src/notice/list.js +0 -48
- package/src/notice/stories/index.js +0 -46
- package/src/query-controls/author-select.js +0 -23
- package/src/query-controls/category-select.js +0 -31
- package/src/query-controls/index.js +0 -122
- package/src/query-controls/terms.js +0 -40
- package/src/toolbar/stories/toolbar-button.js +0 -32
- package/src/toolbar/stories/toolbar-group.js +0 -33
|
@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
|
|
|
4
4
|
* External dependencies
|
|
5
5
|
*/
|
|
6
6
|
import classnames from 'classnames';
|
|
7
|
-
import { map } from 'lodash';
|
|
8
7
|
/**
|
|
9
8
|
* WordPress dependencies
|
|
10
9
|
*/
|
|
@@ -63,7 +62,7 @@ export function getAutoCompleterUI(autocompleter) {
|
|
|
63
62
|
id: listBoxId,
|
|
64
63
|
role: "listbox",
|
|
65
64
|
className: "components-autocomplete__results"
|
|
66
|
-
}, map(
|
|
65
|
+
}, items.map((option, index) => createElement(Button, {
|
|
67
66
|
key: option.key,
|
|
68
67
|
id: `components-autocomplete-item-${instanceId}-${option.key}`,
|
|
69
68
|
role: "option",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.js"],"names":["classnames","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.js"],"names":["classnames","useLayoutEffect","useRef","useEffect","useAnchor","getDefaultUseItems","Button","Popover","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","value","contentRef","items","popoverAnchor","editableContentElement","current","popoverRef","useOnClickOutside","length","map","option","index","key","isDisabled","label","ref","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useEffect } from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tvalue,\n\t\tcontentRef,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t\tvalue,\n\t\t} );\n\n\t\tconst popoverRef = useRef();\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( ! items.length > 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonClose={ onReset }\n\t\t\t\tplacement=\"top-start\"\n\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\tref={ popoverRef }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid={ listBoxId }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t\t>\n\t\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside( ref, handler ) {\n\tuseEffect( () => {\n\t\tconst listener = ( event ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif ( ! ref.current || ref.current.contains( event.target ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,+BAAT,QAAgD,QAAhD;;AAIA,MAAMC,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,MACLN,+BAA+B,CAAEE,KAAF,CADhC;AAEA,QAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGY;AAAhB,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,cAAC,MAAD,eACME,WADN;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,IAAI,EAAGD,QAAQ,GAAGZ,IAAH,GAAUC,OAH1B;AAIC,IAAA,QAAQ,EAAG,EAJZ;AAKC,kBAAaa,KALd;AAMC,IAAA,GAAG,EAAGJ;AANP,KADD,CADD,CADD;AAcA,CAtBD;;AAwBA,MAAMK,qCAAqC,GAAGT,cAAc,CAC3DE,4BAD2D,EAE3D,8BAF2D,CAA5D;AAIA,eAAeO,qCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, '
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,+BAAT,QAAgD,QAAhD;;AAIA,MAAMC,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,MACLN,+BAA+B,CAAEE,KAAF,CADhC;AAEA,QAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGY;AAAhB,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,cAAC,MAAD,eACME,WADN;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,IAAI,EAAGD,QAAQ,GAAGZ,IAAH,GAAUC,OAH1B;AAIC,IAAA,QAAQ,EAAG,EAJZ;AAKC,kBAAaa,KALd;AAMC,IAAA,GAAG,EAAGJ;AANP,KADD,CADD,CADD;AAcA,CAtBD;;AAwBA,MAAMK,qCAAqC,GAAGT,cAAc,CAC3DE,4BAD2D,EAE3D,8BAF2D,CAA5D;AAIA,eAAeO,qCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","size","otherProps","cx","classes","borderBoxControlLinkedButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,IAAI,GAAG,SAFF;AAGL,OAAGC;AAHE,MAIFN,gBAAgB,CAAEG,KAAF,EAAS,8BAAT,CAJpB,CADC,CAOD;;AACA,QAAMI,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,4BAAP,CAAqCJ,IAArC,CAAF,EAA+CD,SAA/C,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaG,EAAb,EAAiBF,IAAjB,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBF,IAAAA,SAAS,EAAEI;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, '
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","size","otherProps","cx","classes","borderBoxControlLinkedButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,IAAI,GAAG,SAFF;AAGL,OAAGC;AAHE,MAIFN,gBAAgB,CAAEG,KAAF,EAAS,8BAAT,CAJpB,CADC,CAOD;;AACA,QAAMI,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,4BAAP,CAAqCJ,IAArC,CAAF,EAA+CD,SAA/C,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaG,EAAb,EAAiBF,IAAjB,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBF,IAAAA,SAAS,EAAEI;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >\n) {\n\tconst {\n\t\tclassName,\n\t\tsize = 'default',\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlLinkedButton' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlLinkedButton( size ), className );\n\t}, [ className, cx, size ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
|
|
@@ -25,13 +25,15 @@ import { contextConnect } from '../../ui/context';
|
|
|
25
25
|
import { useBorderControlDropdown } from './hook';
|
|
26
26
|
import { StyledLabel } from '../../base-control/styles/base-control-styles';
|
|
27
27
|
import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
|
|
28
|
+
import { isMultiplePaletteArray } from '../../color-palette/utils';
|
|
28
29
|
|
|
29
30
|
const getColorObject = (colorValue, colors) => {
|
|
30
|
-
if (!colorValue || !colors
|
|
31
|
+
if (!colorValue || !colors) {
|
|
31
32
|
return;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
if (colors
|
|
35
|
+
if (isMultiplePaletteArray(colors)) {
|
|
36
|
+
// Multiple origins
|
|
35
37
|
let matchedColor;
|
|
36
38
|
colors.some(origin => origin.colors.some(color => {
|
|
37
39
|
if (color.color === colorValue) {
|
|
@@ -42,7 +44,8 @@ const getColorObject = (colorValue, colors) => {
|
|
|
42
44
|
return false;
|
|
43
45
|
}));
|
|
44
46
|
return matchedColor;
|
|
45
|
-
}
|
|
47
|
+
} // Single origin
|
|
48
|
+
|
|
46
49
|
|
|
47
50
|
return colors.find(color => color.color === colorValue);
|
|
48
51
|
};
|
|
@@ -114,7 +117,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
|
|
|
114
117
|
onClick: onToggle,
|
|
115
118
|
variant: "tertiary",
|
|
116
119
|
"aria-label": toggleAriaLabel,
|
|
117
|
-
|
|
120
|
+
tooltipPosition: dropdownPosition,
|
|
118
121
|
label: __('Border color and style picker'),
|
|
119
122
|
showTooltip: true
|
|
120
123
|
}, createElement("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","getColorObject","colorValue","colors","length","undefined","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject, PaletteObject } from '../../color-palette/types';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors || colors.length === 0 ) {\n\t\treturn;\n\t}\n\n\tif ( ( colors as PaletteObject[] )[ 0 ].colors !== undefined ) {\n\t\tlet matchedColor;\n\n\t\t( colors as PaletteObject[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as ColorObject[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","isMultiplePaletteArray","getColorObject","colorValue","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { createElement } from "@wordpress/element";
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* External dependencies
|
|
6
|
+
*/
|
|
4
7
|
|
|
5
8
|
/**
|
|
6
9
|
* WordPress dependencies
|
|
@@ -11,14 +14,14 @@ import { forwardRef } from '@wordpress/element';
|
|
|
11
14
|
* Internal dependencies
|
|
12
15
|
*/
|
|
13
16
|
|
|
14
|
-
import Button from '
|
|
17
|
+
import Button from '.';
|
|
15
18
|
|
|
16
|
-
function
|
|
19
|
+
function UnforwardedIconButton(_ref, ref) {
|
|
17
20
|
let {
|
|
21
|
+
label,
|
|
18
22
|
labelPosition,
|
|
19
23
|
size,
|
|
20
24
|
tooltip,
|
|
21
|
-
label,
|
|
22
25
|
...props
|
|
23
26
|
} = _ref;
|
|
24
27
|
deprecated('wp.components.IconButton', {
|
|
@@ -35,5 +38,5 @@ function IconButton(_ref, ref) {
|
|
|
35
38
|
}));
|
|
36
39
|
}
|
|
37
40
|
|
|
38
|
-
export default forwardRef(
|
|
41
|
+
export default forwardRef(UnforwardedIconButton);
|
|
39
42
|
//# sourceMappingURL=deprecated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/button/deprecated.
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/button/deprecated.tsx"],"names":["deprecated","forwardRef","Button","UnforwardedIconButton","ref","label","labelPosition","size","tooltip","props","since","alternative","version","undefined"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,uBAAvB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,GAAnB;;AAGA,SAASC,qBAAT,OASCC,GATD,EAUE;AAAA,MATD;AACCC,IAAAA,KADD;AAECC,IAAAA,aAFD;AAGCC,IAAAA,IAHD;AAICC,IAAAA,OAJD;AAKC,OAAGC;AALJ,GASC;AACDT,EAAAA,UAAU,CAAE,0BAAF,EAA8B;AACvCU,IAAAA,KAAK,EAAE,KADgC;AAEvCC,IAAAA,WAAW,EAAE,sBAF0B;AAGvCC,IAAAA,OAAO,EAAE;AAH8B,GAA9B,CAAV;AAMA,SACC,cAAC,MAAD,eACMH,KADN;AAEC,IAAA,GAAG,EAAGL,GAFP;AAGC,IAAA,eAAe,EAAGE,aAHnB;AAIC,IAAA,QAAQ,EAAGC,IAJZ;AAKC,IAAA,WAAW,EAAGC,OAAO,KAAKK,SAAZ,GAAwB,CAAC,CAAEL,OAA3B,GAAqCK,SALpD;AAMC,IAAA,KAAK,EAAGL,OAAO,IAAIH;AANpB,KADD;AAUA;;AAED,eAAeJ,UAAU,CAAEE,qBAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '.';\nimport type { DeprecatedIconButtonProps } from './types';\n\nfunction UnforwardedIconButton(\n\t{\n\t\tlabel,\n\t\tlabelPosition,\n\t\tsize,\n\t\ttooltip,\n\t\t...props\n\t}: React.ComponentPropsWithoutRef< typeof Button > &\n\t\tDeprecatedIconButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tdeprecated( 'wp.components.IconButton', {\n\t\tsince: '5.4',\n\t\talternative: 'wp.components.Button',\n\t\tversion: '6.2',\n\t} );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ttooltipPosition={ labelPosition }\n\t\t\ticonSize={ size }\n\t\t\tshowTooltip={ tooltip !== undefined ? !! tooltip : undefined }\n\t\t\tlabel={ tooltip || label }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( UnforwardedIconButton );\n"]}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { createElement, Fragment } from "@wordpress/element";
|
|
3
|
-
// @ts-nocheck
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* External dependencies
|
|
7
6
|
*/
|
|
8
7
|
import classnames from 'classnames';
|
|
8
|
+
|
|
9
9
|
/**
|
|
10
10
|
* WordPress dependencies
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
12
|
import deprecated from '@wordpress/deprecated';
|
|
14
13
|
import { forwardRef } from '@wordpress/element';
|
|
15
14
|
import { useInstanceId } from '@wordpress/compose';
|
|
@@ -74,12 +73,10 @@ function useDeprecatedProps(_ref) {
|
|
|
74
73
|
};
|
|
75
74
|
}
|
|
76
75
|
|
|
77
|
-
export function
|
|
76
|
+
export function UnforwardedButton(props, ref) {
|
|
78
77
|
var _children$, _children$$props;
|
|
79
78
|
|
|
80
79
|
const {
|
|
81
|
-
href,
|
|
82
|
-
target,
|
|
83
80
|
isSmall,
|
|
84
81
|
isPressed,
|
|
85
82
|
isBusy,
|
|
@@ -98,10 +95,19 @@ export function Button(props, ref) {
|
|
|
98
95
|
variant,
|
|
99
96
|
__experimentalIsFocusable: isFocusable,
|
|
100
97
|
describedBy,
|
|
101
|
-
...
|
|
98
|
+
...buttonOrAnchorProps
|
|
102
99
|
} = useDeprecatedProps(props);
|
|
100
|
+
const {
|
|
101
|
+
href,
|
|
102
|
+
target,
|
|
103
|
+
...additionalProps
|
|
104
|
+
} = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {
|
|
105
|
+
href: undefined,
|
|
106
|
+
target: undefined,
|
|
107
|
+
...buttonOrAnchorProps
|
|
108
|
+
};
|
|
103
109
|
const instanceId = useInstanceId(Button, 'components-button__description');
|
|
104
|
-
const hasChildren = (children === null || children === void 0 ? void 0 : children[0]) && children[0] !== null && // Tooltip should not considered as a child
|
|
110
|
+
const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && (children === null || children === void 0 ? void 0 : children[0]) && children[0] !== null && // Tooltip should not considered as a child
|
|
105
111
|
(children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.className) !== 'components-tooltip';
|
|
106
112
|
const classes = classnames('components-button', className, {
|
|
107
113
|
'is-secondary': variant === 'secondary',
|
|
@@ -117,24 +123,28 @@ export function Button(props, ref) {
|
|
|
117
123
|
});
|
|
118
124
|
const trulyDisabled = disabled && !isFocusable;
|
|
119
125
|
const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button';
|
|
120
|
-
const
|
|
121
|
-
href,
|
|
122
|
-
target
|
|
123
|
-
} : {
|
|
126
|
+
const buttonProps = Tag === 'button' ? {
|
|
124
127
|
type: 'button',
|
|
125
128
|
disabled: trulyDisabled,
|
|
126
129
|
'aria-pressed': isPressed
|
|
127
|
-
};
|
|
130
|
+
} : {};
|
|
131
|
+
const anchorProps = Tag === 'a' ? {
|
|
132
|
+
href,
|
|
133
|
+
target
|
|
134
|
+
} : {};
|
|
128
135
|
|
|
129
136
|
if (disabled && isFocusable) {
|
|
130
137
|
// In this case, the button will be disabled, but still focusable and
|
|
131
138
|
// perceivable by screen reader users.
|
|
132
|
-
|
|
139
|
+
buttonProps['aria-disabled'] = true;
|
|
140
|
+
anchorProps['aria-disabled'] = true;
|
|
133
141
|
|
|
134
142
|
for (const disabledEvent of disabledEventsOnDisabledButton) {
|
|
135
143
|
additionalProps[disabledEvent] = event => {
|
|
136
|
-
event
|
|
137
|
-
|
|
144
|
+
if (event) {
|
|
145
|
+
event.stopPropagation();
|
|
146
|
+
event.preventDefault();
|
|
147
|
+
}
|
|
138
148
|
};
|
|
139
149
|
}
|
|
140
150
|
} // Should show the tooltip if...
|
|
@@ -146,20 +156,22 @@ export function Button(props, ref) {
|
|
|
146
156
|
!!label && // The children are empty and...
|
|
147
157
|
!(children !== null && children !== void 0 && children.length) && // The tooltip is not explicitly disabled.
|
|
148
158
|
false !== showTooltip);
|
|
149
|
-
const descriptionId = describedBy ? instanceId :
|
|
159
|
+
const descriptionId = describedBy ? instanceId : undefined;
|
|
150
160
|
const describedById = additionalProps['aria-describedby'] || descriptionId;
|
|
151
|
-
const
|
|
161
|
+
const commonProps = {
|
|
152
162
|
className: classes,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
ref
|
|
156
|
-
}
|
|
163
|
+
'aria-label': additionalProps['aria-label'] || label,
|
|
164
|
+
'aria-describedby': describedById,
|
|
165
|
+
ref
|
|
166
|
+
};
|
|
167
|
+
const elementChildren = createElement(Fragment, null, icon && iconPosition === 'left' && createElement(Icon, {
|
|
157
168
|
icon: icon,
|
|
158
169
|
size: iconSize
|
|
159
170
|
}), text && createElement(Fragment, null, text), icon && iconPosition === 'right' && createElement(Icon, {
|
|
160
171
|
icon: icon,
|
|
161
172
|
size: iconSize
|
|
162
173
|
}), children);
|
|
174
|
+
const element = Tag === 'a' ? createElement("a", _extends({}, anchorProps, additionalProps, commonProps), elementChildren) : createElement("button", _extends({}, buttonProps, additionalProps, commonProps), elementChildren);
|
|
163
175
|
|
|
164
176
|
if (!shouldShowTooltip) {
|
|
165
177
|
return createElement(Fragment, null, element, describedBy && createElement(VisuallyHidden, null, createElement("span", {
|
|
@@ -175,5 +187,22 @@ export function Button(props, ref) {
|
|
|
175
187
|
id: descriptionId
|
|
176
188
|
}, describedBy)));
|
|
177
189
|
}
|
|
178
|
-
|
|
190
|
+
/**
|
|
191
|
+
* Lets users take actions and make choices with a single click or tap.
|
|
192
|
+
*
|
|
193
|
+
* ```jsx
|
|
194
|
+
* import { Button } from '@wordpress/components';
|
|
195
|
+
* const Mybutton = () => (
|
|
196
|
+
* <Button
|
|
197
|
+
* variant="primary"
|
|
198
|
+
* onClick={ handleClick }
|
|
199
|
+
* >
|
|
200
|
+
* Click here
|
|
201
|
+
* </Button>
|
|
202
|
+
* );
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
|
|
206
|
+
export const Button = forwardRef(UnforwardedButton);
|
|
207
|
+
export default Button;
|
|
179
208
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/button/index.js"],"names":["classnames","deprecated","forwardRef","useInstanceId","Tooltip","Icon","VisuallyHidden","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","variant","otherProps","computedVariant","since","alternative","version","Button","props","ref","href","target","isSmall","isPressed","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","additionalProps","instanceId","hasChildren","classes","trulyDisabled","Tag","undefined","tagProps","type","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","element"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ];\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tvariant,\n\t...otherProps\n} ) {\n\tlet computedVariant = variant;\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'Button isDefault prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t\tversion: '6.2',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function Button( props, ref ) {\n\tconst {\n\t\thref,\n\t\ttarget,\n\t\tisSmall,\n\t\tisPressed,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...additionalProps\n\t} = useDeprecatedProps( props );\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\tchildren?.[ 0 ] &&\n\t\tchildren[ 0 ] !== null &&\n\t\t// Tooltip should not considered as a child\n\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip';\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': isSmall,\n\t\t'is-tertiary': variant === 'tertiary',\n\t\t'is-pressed': isPressed,\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && hasChildren,\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst tagProps =\n\t\tTag === 'a'\n\t\t\t? { href, target }\n\t\t\t: {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-pressed': isPressed,\n\t\t\t };\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\ttagProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event ) => {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! children?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : null;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst element = (\n\t\t<Tag\n\t\t\t{ ...tagProps }\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\taria-label={ additionalProps[ 'aria-label' ] || label }\n\t\t\taria-describedby={ describedById }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element }\n\t\t\t\t{ describedBy && (\n\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={ children?.length && describedBy ? describedBy : label }\n\t\t\t\tshortcut={ shortcut }\n\t\t\t\tposition={ tooltipPosition }\n\t\t\t>\n\t\t\t\t{ element }\n\t\t\t</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default forwardRef( Button );\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/button/index.tsx"],"names":["classnames","deprecated","forwardRef","useInstanceId","Tooltip","Icon","VisuallyHidden","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","variant","otherProps","computedVariant","since","alternative","version","UnforwardedButton","props","ref","isSmall","isPressed","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","additionalProps","undefined","instanceId","Button","hasChildren","Array","isArray","classes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","element"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedVariant = variant;\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'Button isDefault prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t\tversion: '6.2',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\tisSmall,\n\t\tisPressed,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst { href, target, ...additionalProps } =\n\t\t'href' in buttonOrAnchorProps\n\t\t\t? buttonOrAnchorProps\n\t\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) ||\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': isSmall,\n\t\t'is-tertiary': variant === 'tertiary',\n\t\t'is-pressed': isPressed,\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && hasChildren,\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-pressed': isPressed,\n\t\t\t }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string | ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] || label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ children }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ element }\n\t\t\t\t{ describedBy && (\n\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip\n\t\t\t\ttext={\n\t\t\t\t\t( children as string | ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label\n\t\t\t\t}\n\t\t\t\tshortcut={ shortcut }\n\t\t\t\tposition={ tooltipPosition }\n\t\t\t>\n\t\t\t\t{ element }\n\t\t\t</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n * <Button\n * variant=\"primary\"\n * onClick={ handleClick }\n * >\n * Click here\n * </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.tsx"],"names":["useState","swatch","Button","ColorPalette","ColorIndicator","Icon","HStack","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,MAAT,QAAuB,YAAvB;;AAGA,SAASC,WAAT,OAOsB;AAAA,MAPA;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOA;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBf,QAAQ,CAAE,KAAF,CAAtC;AACA,SACC,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMe,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,cAAC,cAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGR;AAAb,IAPF,EASC,4BAAQO,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,cAAC,YAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASK,eAAT,QAO0B;AAAA,MAPA;AACzBP,IAAAA,MADyB;AAEzBQ,IAAAA,MAFyB;AAGzBT,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOA;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,cAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGb,KAAK,CAACc,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;AAED,eAAeL,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { HStack } from '../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -12,7 +12,7 @@ import a11yPlugin from 'colord/plugins/a11y';
|
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
14
|
import { __, sprintf } from '@wordpress/i18n';
|
|
15
|
-
import { useCallback, useMemo, forwardRef } from '@wordpress/element';
|
|
15
|
+
import { useCallback, useRef, useMemo, forwardRef } from '@wordpress/element';
|
|
16
16
|
/**
|
|
17
17
|
* Internal dependencies
|
|
18
18
|
*/
|
|
@@ -25,6 +25,7 @@ import { Flex, FlexItem } from '../flex';
|
|
|
25
25
|
import { Truncate } from '../truncate';
|
|
26
26
|
import { ColorHeading } from './styles';
|
|
27
27
|
import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
|
|
28
|
+
import { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue, showTransparentBackground } from './utils';
|
|
28
29
|
extend([namesPlugin, a11yPlugin]);
|
|
29
30
|
|
|
30
31
|
function SinglePalette(_ref) {
|
|
@@ -130,52 +131,9 @@ export function CustomColorPickerDropdown(_ref5) {
|
|
|
130
131
|
popoverProps: popoverProps
|
|
131
132
|
}, props));
|
|
132
133
|
}
|
|
133
|
-
export const extractColorNameFromCurrentValue = function (currentValue) {
|
|
134
|
-
let colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
135
|
-
let showMultiplePalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
136
|
-
|
|
137
|
-
if (!currentValue) {
|
|
138
|
-
return '';
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
const currentValueIsCssVariable = /^var\(/.test(currentValue);
|
|
142
|
-
const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop
|
|
143
|
-
|
|
144
|
-
const colorPalettes = showMultiplePalettes ? colors : [{
|
|
145
|
-
colors: colors
|
|
146
|
-
}];
|
|
147
|
-
|
|
148
|
-
for (const {
|
|
149
|
-
colors: paletteColors
|
|
150
|
-
} of colorPalettes) {
|
|
151
|
-
for (const {
|
|
152
|
-
name: colorName,
|
|
153
|
-
color: colorValue
|
|
154
|
-
} of paletteColors) {
|
|
155
|
-
const normalizedColorValue = currentValueIsCssVariable ? colorValue : colord(colorValue).toHex();
|
|
156
|
-
|
|
157
|
-
if (normalizedCurrentValue === normalizedColorValue) {
|
|
158
|
-
return colorName;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
} // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
return __('Custom');
|
|
165
|
-
};
|
|
166
|
-
export const showTransparentBackground = currentValue => {
|
|
167
|
-
if (typeof currentValue === 'undefined') {
|
|
168
|
-
return true;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
return colord(currentValue).alpha() === 0;
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
const areColorsMultiplePalette = colors => {
|
|
175
|
-
return colors.every(colorObj => Array.isArray(colorObj.colors));
|
|
176
|
-
};
|
|
177
134
|
|
|
178
135
|
function UnforwardedColorPalette(props, forwardedRef) {
|
|
136
|
+
const customColorPaletteRef = useRef(null);
|
|
179
137
|
const {
|
|
180
138
|
clearable = true,
|
|
181
139
|
colors = [],
|
|
@@ -187,19 +145,13 @@ function UnforwardedColorPalette(props, forwardedRef) {
|
|
|
187
145
|
...otherProps
|
|
188
146
|
} = props;
|
|
189
147
|
const clearColor = useCallback(() => onChange(undefined), [onChange]);
|
|
190
|
-
const hasMultipleColorOrigins = colors
|
|
191
|
-
const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
|
|
192
|
-
|
|
193
|
-
if (colors.length > 0 && hasMultipleColorOrigins !== areColorsMultiplePalette(colors)) {
|
|
194
|
-
// eslint-disable-next-line no-console
|
|
195
|
-
console.warn('wp.components.ColorPalette: please specify a valid format for the `colors` prop. ');
|
|
196
|
-
return null;
|
|
197
|
-
}
|
|
148
|
+
const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
|
|
149
|
+
const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
|
|
198
150
|
|
|
199
151
|
const renderCustomColorPicker = () => createElement(DropdownContentWrapper, {
|
|
200
152
|
paddingSize: "none"
|
|
201
153
|
}, createElement(ColorPicker, {
|
|
202
|
-
color: value,
|
|
154
|
+
color: normalizeColorValue(value, customColorPaletteRef),
|
|
203
155
|
onChange: color => onChange(color),
|
|
204
156
|
enableAlpha: enableAlpha
|
|
205
157
|
}));
|
|
@@ -230,6 +182,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
|
|
|
230
182
|
} = _ref6;
|
|
231
183
|
return createElement(Flex, {
|
|
232
184
|
as: 'button',
|
|
185
|
+
ref: customColorPaletteRef,
|
|
233
186
|
justify: "space-between",
|
|
234
187
|
align: "flex-start",
|
|
235
188
|
className: "components-color-palette__custom-color",
|