@wordpress/components 23.1.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 +53 -0
- package/CONTRIBUTING.md +1 -1
- package/LICENSE.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/color-picker/component.js +1 -0
- package/build/color-picker/component.js.map +1 -1
- package/build/color-picker/styles.js +8 -10
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/index.js +5 -1
- package/build/combobox-control/index.js.map +1 -1
- 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/focal-point-picker/utils.js +1 -1
- package/build/focal-point-picker/utils.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/index.js +7 -17
- package/build/index.js.map +1 -1
- package/build/index.native.js +8 -18
- package/build/index.native.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/item-group/item/component.js +27 -3
- package/build/item-group/item/component.js.map +1 -1
- package/build/item-group/item-group/component.js +26 -3
- package/build/item-group/item-group/component.js.map +1 -1
- package/build/item-group/styles.js +14 -14
- package/build/item-group/styles.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/panel/row.js +5 -3
- package/build/panel/row.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 +69 -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/resizable-box/index.js +5 -4
- package/build/resizable-box/index.js.map +1 -1
- package/build/responsive-wrapper/index.js +18 -1
- package/build/responsive-wrapper/index.js.map +1 -1
- package/build/responsive-wrapper/types.js +6 -0
- package/build/responsive-wrapper/types.js.map +1 -0
- package/build/sandbox/index.js +35 -24
- package/build/sandbox/index.js.map +1 -1
- package/build/sandbox/types.js +6 -0
- package/build/sandbox/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 +40 -7
- package/build/tab-panel/index.js.map +1 -1
- package/build/toolbar/index.js +42 -60
- package/build/toolbar/index.js.map +1 -1
- package/build/toolbar/toolbar/index.js +74 -0
- package/build/toolbar/toolbar/index.js.map +1 -0
- package/build/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
- package/build/toolbar/toolbar/toolbar-container.js.map +1 -0
- package/build/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
- package/build/toolbar/toolbar/toolbar-container.native.js.map +1 -0
- package/build/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
- package/build/toolbar/toolbar-button/index.js.map +1 -0
- package/build/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
- package/build/toolbar/toolbar-button/toolbar-button-container.js.map +1 -0
- package/build/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
- package/build/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -0
- package/build/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
- package/build/toolbar/toolbar-context/index.js.map +1 -0
- package/build/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
- package/build/toolbar/toolbar-dropdown-menu/index.js.map +1 -0
- package/build/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
- package/build/toolbar/toolbar-group/index.js.map +1 -0
- package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
- package/build/toolbar/toolbar-group/toolbar-group-collapsed.js.map +1 -0
- package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
- package/build/toolbar/toolbar-group/toolbar-group-collapsed.native.js.map +1 -0
- package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
- package/build/toolbar/toolbar-group/toolbar-group-container.js.map +1 -0
- package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
- package/build/toolbar/toolbar-group/toolbar-group-container.native.js.map +1 -0
- package/build/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
- package/build/toolbar/toolbar-item/index.js.map +1 -0
- package/build/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
- package/build/toolbar/toolbar-item/index.native.js.map +1 -0
- package/build/tree-grid/index.js +4 -4
- 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/color-picker/component.js +1 -0
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/styles.js +8 -9
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/index.js +5 -1
- package/build-module/combobox-control/index.js.map +1 -1
- 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/focal-point-picker/utils.js +1 -1
- package/build-module/focal-point-picker/utils.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/index.js +1 -6
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +1 -6
- package/build-module/index.native.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/item-group/item/component.js +26 -2
- package/build-module/item-group/item/component.js.map +1 -1
- package/build-module/item-group/item-group/component.js +25 -2
- package/build-module/item-group/item-group/component.js.map +1 -1
- package/build-module/item-group/styles.js +14 -14
- package/build-module/item-group/styles.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/panel/row.js +5 -3
- package/build-module/panel/row.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 +65 -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/resizable-box/index.js +3 -2
- package/build-module/resizable-box/index.js.map +1 -1
- package/build-module/responsive-wrapper/index.js +20 -1
- package/build-module/responsive-wrapper/index.js.map +1 -1
- package/build-module/responsive-wrapper/types.js +2 -0
- package/build-module/responsive-wrapper/types.js.map +1 -0
- package/build-module/sandbox/index.js +37 -23
- package/build-module/sandbox/index.js.map +1 -1
- package/build-module/sandbox/types.js +2 -0
- package/build-module/sandbox/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 +40 -7
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-module/toolbar/index.js +6 -58
- package/build-module/toolbar/index.js.map +1 -1
- package/build-module/toolbar/toolbar/index.js +59 -0
- package/build-module/toolbar/toolbar/index.js.map +1 -0
- package/build-module/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
- package/{build → build-module/toolbar}/toolbar/toolbar-container.js.map +1 -1
- package/build-module/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
- package/build-module/toolbar/toolbar/toolbar-container.native.js.map +1 -0
- package/build-module/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
- package/build-module/toolbar/toolbar-button/index.js.map +1 -0
- package/build-module/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
- package/build-module/toolbar/toolbar-button/toolbar-button-container.js.map +1 -0
- package/build-module/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
- package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -0
- package/build-module/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
- package/build-module/toolbar/toolbar-context/index.js.map +1 -0
- package/build-module/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
- package/build-module/toolbar/toolbar-dropdown-menu/index.js.map +1 -0
- package/build-module/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
- package/build-module/toolbar/toolbar-group/index.js.map +1 -0
- package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
- package/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js.map +1 -0
- package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
- package/build-module/toolbar/toolbar-group/toolbar-group-collapsed.native.js.map +1 -0
- package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
- package/build-module/toolbar/toolbar-group/toolbar-group-container.js.map +1 -0
- package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
- package/build-module/toolbar/toolbar-group/toolbar-group-container.native.js.map +1 -0
- package/build-module/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
- package/build-module/toolbar/toolbar-item/index.js.map +1 -0
- package/build-module/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
- package/build-module/toolbar/toolbar-item/index.native.js.map +1 -0
- package/build-module/tree-grid/index.js +4 -4
- 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 +6 -1
- package/build-style/style.css +6 -1
- 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/component.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +2 -2
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/dashicon/types.d.ts +0 -4
- package/build-types/dashicon/types.d.ts.map +1 -1
- 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/focal-point-picker/utils.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/item-group/item/component.d.ts +24 -2
- package/build-types/item-group/item/component.d.ts.map +1 -1
- package/build-types/item-group/item-group/component.d.ts +23 -2
- package/build-types/item-group/item-group/component.d.ts.map +1 -1
- package/build-types/item-group/stories/index.d.ts +15 -0
- package/build-types/item-group/stories/index.d.ts.map +1 -0
- package/build-types/item-group/styles.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/resizable-box/index.d.ts +6 -7
- package/build-types/resizable-box/index.d.ts.map +1 -1
- package/build-types/resizable-box/stories/index.d.ts +61 -0
- package/build-types/resizable-box/stories/index.d.ts.map +1 -0
- package/build-types/responsive-wrapper/index.d.ts +24 -0
- package/build-types/responsive-wrapper/index.d.ts.map +1 -0
- package/build-types/responsive-wrapper/stories/index.d.ts +12 -0
- package/build-types/responsive-wrapper/stories/index.d.ts.map +1 -0
- package/build-types/responsive-wrapper/types.d.ts +22 -0
- package/build-types/responsive-wrapper/types.d.ts.map +1 -0
- package/build-types/sandbox/index.d.ts +19 -0
- package/build-types/sandbox/index.d.ts.map +1 -0
- package/build-types/sandbox/stories/index.d.ts +12 -0
- package/build-types/sandbox/stories/index.d.ts.map +1 -0
- package/build-types/sandbox/test/index.d.ts +2 -0
- package/build-types/sandbox/test/index.d.ts.map +1 -0
- package/build-types/sandbox/types.d.ts +36 -0
- package/build-types/sandbox/types.d.ts.map +1 -0
- 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/stories/index.d.ts +1 -0
- package/build-types/tab-panel/stories/index.d.ts.map +1 -1
- package/build-types/tab-panel/types.d.ts +11 -5
- 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/component.tsx +1 -0
- package/src/color-picker/stories/index.js +20 -60
- package/src/color-picker/styles.ts +0 -5
- package/src/color-picker/test/index.js +6 -15
- package/src/combobox-control/index.js +9 -1
- 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/dashicon/types.ts +0 -6
- 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/stories/index.tsx +1 -1
- package/src/focal-point-picker/test/index.js +3 -11
- package/src/focal-point-picker/utils.ts +4 -1
- 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/stories/index.js +14 -41
- 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/index.js +8 -6
- package/src/index.native.js +8 -6
- 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/item-group/item/component.tsx +26 -2
- package/src/item-group/item-group/component.tsx +25 -2
- package/src/item-group/stories/index.tsx +103 -0
- package/src/item-group/styles.ts +1 -0
- package/src/item-group/test/__snapshots__/index.js.snap +11 -10
- 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/row.js +3 -3
- package/src/panel/stories/index.js +62 -80
- package/src/panel/test/body.js +2 -8
- package/src/placeholder/stories/index.tsx +1 -0
- package/src/placeholder/style.scss +1 -1
- 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/resizable-box/README.md +2 -2
- package/src/resizable-box/index.tsx +7 -6
- package/src/resizable-box/stories/index.tsx +92 -0
- package/src/responsive-wrapper/README.md +29 -0
- package/src/responsive-wrapper/{index.js → index.tsx} +23 -2
- package/src/responsive-wrapper/stories/index.tsx +38 -0
- package/src/responsive-wrapper/types.ts +20 -0
- package/src/sandbox/README.md +45 -2
- package/src/sandbox/{index.js → index.tsx} +47 -24
- package/src/sandbox/stories/index.tsx +32 -0
- package/src/sandbox/test/{index.js → index.tsx} +9 -4
- package/src/sandbox/types.ts +34 -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/stories/index.js +12 -17
- 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/style.scss +3 -3
- package/src/tab-panel/README.md +1 -0
- package/src/tab-panel/index.tsx +42 -6
- package/src/tab-panel/stories/index.tsx +20 -0
- package/src/tab-panel/style.scss +8 -0
- package/src/tab-panel/test/index.tsx +124 -7
- package/src/tab-panel/types.ts +11 -5
- 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/index.js +6 -52
- package/src/toolbar/stories/index.js +71 -75
- package/src/toolbar/test/index.js +1 -2
- package/src/{toolbar-group/test/index.js → toolbar/test/toolbar-group.js} +1 -1
- package/src/toolbar/{README.md → toolbar/README.md} +0 -0
- package/src/toolbar/toolbar/index.js +52 -0
- package/src/toolbar/{style.native.scss → toolbar/style.native.scss} +0 -0
- package/src/toolbar/{style.scss → toolbar/style.scss} +0 -0
- package/src/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
- package/src/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
- package/src/{toolbar-button → toolbar/toolbar-button}/README.md +0 -0
- package/src/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
- package/src/{toolbar-button → toolbar/toolbar-button}/style.scss +0 -0
- package/src/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
- package/src/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
- package/src/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
- package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/README.md +0 -0
- package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
- package/src/{toolbar-group → toolbar/toolbar-group}/README.md +0 -0
- package/src/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
- package/src/{toolbar-group → toolbar/toolbar-group}/style.native.scss +0 -0
- package/src/{toolbar-group → toolbar/toolbar-group}/style.scss +0 -0
- package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
- package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
- package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
- package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
- package/src/{toolbar-item → toolbar/toolbar-item}/README.md +0 -0
- package/src/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
- package/src/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
- package/src/tools-panel/stories/index.js +3 -0
- package/src/tools-panel/test/index.js +1 -1
- package/src/tree-grid/index.js +3 -5
- 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 -11
- package/tsconfig.tsbuildinfo +1 -1
- package/build/toolbar/toolbar-container.native.js.map +0 -1
- package/build/toolbar-button/index.js.map +0 -1
- package/build/toolbar-button/toolbar-button-container.js.map +0 -1
- package/build/toolbar-button/toolbar-button-container.native.js.map +0 -1
- package/build/toolbar-context/index.js.map +0 -1
- package/build/toolbar-dropdown-menu/index.js.map +0 -1
- package/build/toolbar-group/index.js.map +0 -1
- package/build/toolbar-group/toolbar-group-collapsed.js.map +0 -1
- package/build/toolbar-group/toolbar-group-collapsed.native.js.map +0 -1
- package/build/toolbar-group/toolbar-group-container.js.map +0 -1
- package/build/toolbar-group/toolbar-group-container.native.js.map +0 -1
- package/build/toolbar-item/index.js.map +0 -1
- package/build/toolbar-item/index.native.js.map +0 -1
- package/build-module/toolbar/toolbar-container.js.map +0 -1
- package/build-module/toolbar/toolbar-container.native.js.map +0 -1
- package/build-module/toolbar-button/index.js.map +0 -1
- package/build-module/toolbar-button/toolbar-button-container.js.map +0 -1
- package/build-module/toolbar-button/toolbar-button-container.native.js.map +0 -1
- package/build-module/toolbar-context/index.js.map +0 -1
- package/build-module/toolbar-dropdown-menu/index.js.map +0 -1
- package/build-module/toolbar-group/index.js.map +0 -1
- package/build-module/toolbar-group/toolbar-group-collapsed.js.map +0 -1
- package/build-module/toolbar-group/toolbar-group-collapsed.native.js.map +0 -1
- package/build-module/toolbar-group/toolbar-group-container.js.map +0 -1
- package/build-module/toolbar-group/toolbar-group-container.native.js.map +0 -1
- package/build-module/toolbar-item/index.js.map +0 -1
- package/build-module/toolbar-item/index.native.js.map +0 -1
- package/src/button/stories/index.js +0 -179
- package/src/item-group/stories/index.js +0 -270
- package/src/keyboard-shortcuts/index.js +0 -56
- package/src/notice/list.js +0 -48
- package/src/notice/stories/index.js +0 -74
- 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 -121
- package/src/query-controls/terms.js +0 -40
- package/src/resizable-box/stories/index.js +0 -97
- package/src/toolbar-button/stories/index.js +0 -33
- package/src/toolbar-group/stories/index.js +0 -33
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-container.native.js"],"names":["ToolbarContainer","children"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,gBAAgB,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAoB,4BAAC,iBAAD,QAAQA,QAAR,CAApB;AAAA,CAAzB;;eAEeD,gB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nconst ToolbarContainer = ( { children } ) => <View>{ children }</View>;\n\nexport default ToolbarContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/index.js"],"names":["ToolbarButton","ref","containerClassName","className","extraProps","children","title","isActive","isDisabled","props","accessibleToolbarState","ToolbarContext","icon","shortcut","subscript","event","stopPropagation","onClick","toolbarItemProps"],"mappings":";;;;;;;;;AAOA;;;;AAJA;;AAQA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AAMA,SAASA,aAAT,OAWCC,GAXD,EAYE;AAAA,MAXD;AACCC,IAAAA,kBADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,UAHD;AAICC,IAAAA,QAJD;AAKCC,IAAAA,KALD;AAMCC,IAAAA,QAND;AAOCC,IAAAA,UAPD;AAQC,OAAGC;AARJ,GAWC;AACD,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,CAAED,sBAAP,EAAgC;AAC/B,WACC,4BAAC,+BAAD;AAAwB,MAAA,SAAS,EAAGR;AAApC,OACC,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGD,GADP;AAEC,MAAA,IAAI,EAAGQ,KAAK,CAACG,IAFd;AAGC,MAAA,KAAK,EAAGN,KAHT;AAIC,MAAA,QAAQ,EAAGG,KAAK,CAACI,QAJlB;AAKC,wBAAiBJ,KAAK,CAACK,SALxB;AAMC,MAAA,OAAO,EAAKC,KAAF,IAAa;AACtBA,QAAAA,KAAK,CAACC,eAAN;;AACA,YAAKP,KAAK,CAACQ,OAAX,EAAqB;AACpBR,UAAAA,KAAK,CAACQ,OAAN,CAAeF,KAAf;AACA;AACD,OAXF;AAYC,MAAA,SAAS,EAAG,yBACX,6BADW,EAEXZ,SAFW,CAZb;AAgBC,MAAA,SAAS,EAAGI,QAhBb;AAiBC,MAAA,QAAQ,EAAGC,UAjBZ;AAkBC;AAlBD,OAmBMJ,UAnBN,EAoBMK,KApBN,GAsBGJ,QAtBH,CADD,CADD;AA4BA,GAhCA,CAkCD;AACA;AACA;;;AACA,SACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC;AADb,KAEMC,UAFN,EAGMK,KAHN;AAIC,IAAA,GAAG,EAAGR;AAJP,MAMKiB,gBAAF,IACD,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGZ,KADT;AAEC,IAAA,SAAS,EAAGC,QAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,KAIMU,gBAJN,GAMGb,QANH,CAPF,CADD;AAmBA;;eAEc,yBAAYL,aAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\n\nfunction ToolbarButton(\n\t{\n\t\tcontainerClassName,\n\t\tclassName,\n\t\textraProps,\n\t\tchildren,\n\t\ttitle,\n\t\tisActive,\n\t\tisDisabled,\n\t\t...props\n\t},\n\tref\n) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarButtonContainer className={ containerClassName }>\n\t\t\t\t<Button\n\t\t\t\t\tref={ ref }\n\t\t\t\t\ticon={ props.icon }\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tshortcut={ props.shortcut }\n\t\t\t\t\tdata-subscript={ props.subscript }\n\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif ( props.onClick ) {\n\t\t\t\t\t\t\tprops.onClick( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-toolbar__control',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\tdata-toolbar-item\n\t\t\t\t\t{ ...extraProps }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t</ToolbarButtonContainer>\n\t\t);\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to Button. This means that ToolbarButton has the same API as\n\t// Button.\n\treturn (\n\t\t<ToolbarItem\n\t\t\tclassName={ classnames( 'components-toolbar-button', className ) }\n\t\t\t{ ...extraProps }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t{ ...toolbarItemProps }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarButton );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/toolbar-button-container.js"],"names":["ToolbarButtonContainer","props","className","children"],"mappings":";;;;;;;;;AAAA,MAAMA,sBAAsB,GAAKC,KAAF,IAC9B;AAAK,EAAA,SAAS,EAAGA,KAAK,CAACC;AAAvB,GAAqCD,KAAK,CAACE,QAA3C,CADD;;eAGeH,sB","sourcesContent":["const ToolbarButtonContainer = ( props ) => (\n\t<div className={ props.className }>{ props.children }</div>\n);\nexport default ToolbarButtonContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/toolbar-button-container.native.js"],"names":["props","children"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;eAGiBA,KAAF,IAAa,4BAAC,iBAAD,QAAQA,KAAK,CAACC,QAAd,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nexport default ( props ) => <View>{ props.children }</View>;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-context/index.js"],"names":["ToolbarContext"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,6BAAvB;eAEeA,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst ToolbarContext = createContext();\n\nexport default ToolbarContext;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-dropdown-menu/index.js"],"names":["ToolbarDropdownMenu","props","ref","accessibleToolbarState","ToolbarContext","toggleProps","toolbarItemProps","variant","popoverProps"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,mBAAT,CAA8BC,KAA9B,EAAqCC,GAArC,EAA2C;AAC1C,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,CAAED,sBAAP,EAAgC;AAC/B,WAAO,4BAAC,qBAAD,EAAmBF,KAAnB,CAAP;AACA,GALyC,CAO1C;AACA;AACA;;;AACA,SACC,4BAAC,oBAAD;AAAa,IAAA,GAAG,EAAGC;AAAnB,KAA8BD,KAAK,CAACI,WAApC,GACKC,gBAAF,IACD,4BAAC,qBAAD,6BACML,KADN;AAEC,IAAA,YAAY,EAAG;AACdM,MAAAA,OAAO,EAAE,SADK;AAEd,SAAGN,KAAK,CAACO;AAFK,KAFhB;AAMC,IAAA,WAAW,EAAGF;AANf,KAFF,CADD;AAcA;;eAEc,yBAAYN,mBAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../dropdown-menu';\n\nfunction ToolbarDropdownMenu( props, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn <DropdownMenu { ...props } />;\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n\t// has the same API as DropdownMenu.\n\treturn (\n\t\t<ToolbarItem ref={ ref } { ...props.toggleProps }>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\tvariant: 'toolbar',\n\t\t\t\t\t\t...props.popoverProps,\n\t\t\t\t\t} }\n\t\t\t\t\ttoggleProps={ toolbarItemProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarDropdownMenu );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/index.js"],"names":["ToolbarGroup","controls","children","className","isCollapsed","title","props","accessibleToolbarState","ToolbarContext","length","finalClassName","controlSets","Array","isArray","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;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,SAASA,YAAT,OAOI;AAAA;;AAAA,MAPmB;AACtBC,IAAAA,QAAQ,GAAG,EADW;AAEtBC,IAAAA,QAFsB;AAGtBC,IAAAA,SAHsB;AAItBC,IAAAA,WAJsB;AAKtBC,IAAAA,KALsB;AAMtB,OAAGC;AANmB,GAOnB;AACH;AACA;AACA,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,CAAE,CAAEP,QAAF,IAAc,CAAEA,QAAQ,CAACQ,MAA3B,KAAuC,CAAEP,QAA9C,EAAyD;AACxD,WAAO,IAAP;AACA;;AAED,QAAMQ,cAAc,GAAG,0BACtB;AACA;AACAH,EAAAA,sBAAsB,GACnB,0BADmB,GAEnB,oBALmB,EAMtBJ,SANsB,CAAvB,CATG,CAkBH;;AACA,MAAIQ,WAAW,GAAGV,QAAlB;;AACA,MAAK,CAAEW,KAAK,CAACC,OAAN,CAAeF,WAAW,CAAE,CAAF,CAA1B,CAAP,EAA2C;AAC1CA,IAAAA,WAAW,GAAG,CAAEA,WAAF,CAAd;AACA;;AAED,MAAKP,WAAL,EAAmB;AAClB,WACC,4BAAC,8BAAD;AACC,MAAA,KAAK,EAAGC,KADT;AAEC,MAAA,QAAQ,EAAGM,WAFZ;AAGC,MAAA,SAAS,EAAGD,cAHb;AAIC,MAAA,QAAQ,EAAGR;AAJZ,OAKMI,KALN,EADD;AASA;;AAED,SACC,4BAAC,8BAAD;AAAuB,IAAA,SAAS,EAAGI;AAAnC,KAAyDJ,KAAzD,mBACGK,WADH,iDACG,aAAaG,OAAb,CAAsB,CAAEC,UAAF,EAAcC,UAAd,KACvBD,UAAU,CAACE,GAAX,CAAgB,CAAEC,OAAF,EAAWC,cAAX,KACf,4BAAC,sBAAD;AACC,IAAA,GAAG,EAAG,CAAEH,UAAF,EAAcG,cAAd,EAA+BC,IAA/B,EADP;AAEC,IAAA,kBAAkB,EACjBJ,UAAU,GAAG,CAAb,IAAkBG,cAAc,KAAK,CAArC,GACG,kBADH,GAEG;AALL,KAOMD,OAPN,EADD,CADC,CADH,EAcGhB,QAdH,CADD;AAkBA;;eAEcF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarButton from '../toolbar-button';\nimport ToolbarGroupContainer from './toolbar-group-container';\nimport ToolbarGroupCollapsed from './toolbar-group-collapsed';\nimport ToolbarContext from '../toolbar-context';\n\n/**\n * Renders a collapsible group of controls\n *\n * The `controls` prop accepts an array of sets. A set is an array of controls.\n * Controls have the following shape:\n *\n * ```\n * {\n * icon: string,\n * title: string,\n * subscript: string,\n * onClick: Function,\n * isActive: boolean,\n * isDisabled: boolean\n * }\n * ```\n *\n * For convenience it is also possible to pass only an array of controls. It is\n * then assumed this is the only set.\n *\n * Either `controls` or `children` is required, otherwise this components\n * renders nothing.\n *\n * @param {Object} props Component props.\n * @param {Array} [props.controls] The controls to render in this toolbar.\n * @param {WPElement} [props.children] Any other things to render inside the toolbar besides the controls.\n * @param {string} [props.className] Class to set on the container div.\n * @param {boolean} [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.\n * @param {string} [props.title] ARIA label for dropdown menu if is collapsed.\n */\nfunction ToolbarGroup( {\n\tcontrols = [],\n\tchildren,\n\tclassName,\n\tisCollapsed,\n\ttitle,\n\t...props\n} ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ( ! controls || ! controls.length ) && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst finalClassName = classnames(\n\t\t// Unfortunately, there's legacy code referencing to `.components-toolbar`\n\t\t// So we can't get rid of it\n\t\taccessibleToolbarState\n\t\t\t? 'components-toolbar-group'\n\t\t\t: 'components-toolbar',\n\t\tclassName\n\t);\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets = controls;\n\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\tcontrolSets = [ controlSets ];\n\t}\n\n\tif ( isCollapsed ) {\n\t\treturn (\n\t\t\t<ToolbarGroupCollapsed\n\t\t\t\tlabel={ title }\n\t\t\t\tcontrols={ controlSets }\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tchildren={ children }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroupContainer className={ finalClassName } { ...props }>\n\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tkey={ [ indexOfSet, indexOfControl ].join() }\n\t\t\t\t\t\tcontainerClassName={\n\t\t\t\t\t\t\tindexOfSet > 0 && indexOfControl === 0\n\t\t\t\t\t\t\t\t? 'has-left-divider'\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...control }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t\t{ children }\n\t\t</ToolbarGroupContainer>\n\t);\n}\n\nexport default ToolbarGroup;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-collapsed.js"],"names":["ToolbarGroupCollapsed","controls","toggleProps","props","accessibleToolbarState","ToolbarContext","renderDropdownMenu","internalToggleProps"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,qBAAT,OAA2E;AAAA,MAA3C;AAAEC,IAAAA,QAAQ,GAAG,EAAb;AAAiBC,IAAAA,WAAjB;AAA8B,OAAGC;AAAjC,GAA2C;AAC1E;AACA;AACA,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,QAAMC,kBAAkB,GAAKC,mBAAF,IAC1B,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAGN,QADZ;AAEC,IAAA,WAAW,EAAG,EACb,GAAGM,mBADU;AAEb,2BAAqB;AAFR;AAFf,KAMMJ,KANN,EADD;;AAWA,MAAKC,sBAAL,EAA8B;AAC7B,WACC,4BAAC,oBAAD,EAAkBF,WAAlB,EAAkCI,kBAAlC,CADD;AAGA;;AAED,SAAOA,kBAAkB,CAAEJ,WAAF,CAAzB;AACA;;eAEcF,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../dropdown-menu';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarItem from '../toolbar-item';\n\nfunction ToolbarGroupCollapsed( { controls = [], toggleProps, ...props } ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tconst renderDropdownMenu = ( internalToggleProps ) => (\n\t\t<DropdownMenu\n\t\t\tcontrols={ controls }\n\t\t\ttoggleProps={ {\n\t\t\t\t...internalToggleProps,\n\t\t\t\t'data-toolbar-item': true,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n\n\tif ( accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarItem { ...toggleProps }>{ renderDropdownMenu }</ToolbarItem>\n\t\t);\n\t}\n\n\treturn renderDropdownMenu( toggleProps );\n}\n\nexport default ToolbarGroupCollapsed;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-collapsed.native.js"],"names":["ToolbarGroupCollapsed","controls","getStylesFromColorScheme","passedStyle","props","styles","container","containerDark"],"mappings":";;;;;;;;;;;;;AAGA;;AAIA;;AAIA;;AACA;;AAZA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AAIA,SAASA,qBAAT,OAKI;AAAA,MAL4B;AAC/BC,IAAAA,QAAQ,GAAG,EADoB;AAE/BC,IAAAA,wBAF+B;AAG/BC,IAAAA,WAH+B;AAI/B,OAAGC;AAJ4B,GAK5B;AACH,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CACPF,wBAAwB,CACvBG,eAAOC,SADgB,EAEvBD,eAAOE,aAFgB,CADjB,EAKPJ,WALO;AADT,KASC,4BAAC,qBAAD;AAAc,IAAA,QAAQ,EAAGF;AAAzB,KAAyCG,KAAzC,EATD,CADD;AAaA;;eAEc,uCAA0BJ,qBAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../dropdown-menu';\nimport styles from './style.scss';\n\nfunction ToolbarGroupCollapsed( {\n\tcontrols = [],\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\t...props\n} ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tgetStylesFromColorScheme(\n\t\t\t\t\tstyles.container,\n\t\t\t\t\tstyles.containerDark\n\t\t\t\t),\n\t\t\t\tpassedStyle,\n\t\t\t] }\n\t\t>\n\t\t\t<DropdownMenu controls={ controls } { ...props } />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( ToolbarGroupCollapsed );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-container.js"],"names":["ToolbarGroupContainer","className","children","props"],"mappings":";;;;;;;;;;;;;AAAA,MAAMA,qBAAqB,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,GAAF;AAAA,SAC7B;AAAK,IAAA,SAAS,EAAGF;AAAjB,KAAkCE,KAAlC,GACGD,QADH,CAD6B;AAAA,CAA9B;;eAKeF,qB","sourcesContent":["const ToolbarGroupContainer = ( { className, children, ...props } ) => (\n\t<div className={ className } { ...props }>\n\t\t{ children }\n\t</div>\n);\nexport default ToolbarGroupContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-container.native.js"],"names":["ToolbarGroupContainer","getStylesFromColorScheme","passedStyle","children","styles","container","containerDark"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG;AAAA,MAAE;AAC/BC,IAAAA,wBAD+B;AAE/BC,IAAAA,WAF+B;AAG/BC,IAAAA;AAH+B,GAAF;AAAA,SAK7B,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CACPF,wBAAwB,CAAEG,eAAOC,SAAT,EAAoBD,eAAOE,aAA3B,CADjB,EAEPJ,WAFO;AADT,KAMGC,QANH,CAL6B;AAAA,CAA9B;;eAee,uCAA0BH,qBAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst ToolbarGroupContainer = ( {\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\tchildren,\n} ) => (\n\t<View\n\t\tstyle={ [\n\t\t\tgetStylesFromColorScheme( styles.container, styles.containerDark ),\n\t\t\tpassedStyle,\n\t\t] }\n\t>\n\t\t{ children }\n\t</View>\n);\n\nexport default withPreferredColorScheme( ToolbarGroupContainer );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-item/index.js"],"names":["ToolbarItem","ref","children","as","Component","props","accessibleToolbarState","ToolbarContext","allProps"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,WAAT,OAA6DC,GAA7D,EAAmE;AAAA,MAA7C;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAA6C;AAClE,QAAMC,sBAAsB,GAAG,yBAAYC,uBAAZ,CAA/B;;AAEA,MAAK,OAAOL,QAAP,KAAoB,UAApB,IAAkC,CAAEE,SAAzC,EAAqD;AACpD,mHACC,yIACC,2EAFF;AAIA,WAAO,IAAP;AACA;;AAED,QAAMI,QAAQ,GAAG,EAAE,GAAGH,KAAL;AAAYJ,IAAAA,GAAZ;AAAiB,yBAAqB;AAAtC,GAAjB;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,QAAKF,SAAL,EAAiB;AAChB,aAAO,4BAAC,SAAD,EAAgBI,QAAhB,EAA6BN,QAA7B,CAAP;AACA;;AACD,WAAOA,QAAQ,CAAEM,QAAF,CAAf;AACA;;AAED,SACC,4BAAC,oBAAD,6BACMF,sBADN,EAEME,QAFN;AAGC,IAAA,EAAE,EAAGJ;AAHN,MAKGF,QALH,CADD;AASA;;eAEc,yBAAYF,WAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\n\nfunction ToolbarItem( { children, as: Component, ...props }, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( typeof children !== 'function' && ! Component ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +\n\t\t\t\t'See https://developer.wordpress.org/block-editor/components/toolbar-item/'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst allProps = { ...props, ref, 'data-toolbar-item': true };\n\n\tif ( ! accessibleToolbarState ) {\n\t\tif ( Component ) {\n\t\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t\t}\n\t\treturn children( allProps );\n\t}\n\n\treturn (\n\t\t<BaseToolbarItem\n\t\t\t{ ...accessibleToolbarState }\n\t\t\t{ ...allProps }\n\t\t\tas={ Component }\n\t\t>\n\t\t\t{ children }\n\t\t</BaseToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarItem );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-item/index.native.js"],"names":["ToolbarItem","ref","children","props"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,SAASA,WAAT,OAA8CC,GAA9C,EAAoD;AAAA,MAA9B;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAA8B;;AACnD,MAAK,OAAOD,QAAP,KAAoB,UAAzB,EAAsC;AACrC,mHACC,yFADD;AAGA,WAAO,IAAP;AACA;;AACD,SAAOA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAYF,IAAAA;AAAZ,GAAF,CAAf;AACA;;eAEc,yBAAYD,WAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\nfunction ToolbarItem( { children, ...props }, ref ) {\n\tif ( typeof children !== 'function' ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component that accepts only function children props'\n\t\t);\n\t\treturn null;\n\t}\n\treturn children( { ...props, ref } );\n}\n\nexport default forwardRef( ToolbarItem );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-container.js"],"names":["useToolbarState","Toolbar","forwardRef","isRTL","ToolbarContext","ToolbarContainer","ref","label","props","toolbarState","loop","baseId","id","rtl"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,eAAT,EAA0BC,OAA1B,QAAyC,gBAAzC;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,oBAA3B;;AAEA,SAASC,gBAAT,OAAgDC,GAAhD,EAAsD;AAAA,MAA3B;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,GAA2B;AACrD;AACA;AACA;AACA,QAAMC,YAAY,GAAGT,eAAe,CAAE;AACrCU,IAAAA,IAAI,EAAE,IAD+B;AAErCC,IAAAA,MAAM,EAAEH,KAAK,CAACI,EAFuB;AAGrCC,IAAAA,GAAG,EAAEV,KAAK;AAH2B,GAAF,CAApC;AAMA,SACC;AACA,kBAAC,cAAD,CAAgB,QAAhB;AAAyB,MAAA,KAAK,EAAGM;AAAjC,OACC,cAAC,OAAD;AACC,MAAA,GAAG,EAAGH,GADP;AAEC,oBAAaC;AAFd,OAGME,YAHN,EAIMD,KAJN,EADD;AAFD;AAWA;;AAED,eAAeN,UAAU,CAAEG,gBAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport { useToolbarState, Toolbar } from 'reakit/Toolbar';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\n\nfunction ToolbarContainer( { label, ...props }, ref ) {\n\t// https://reakit.io/docs/basic-concepts/#state-hooks\n\t// Passing baseId for server side rendering (which includes snapshots)\n\t// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids\n\tconst toolbarState = useToolbarState( {\n\t\tloop: true,\n\t\tbaseId: props.id,\n\t\trtl: isRTL(),\n\t} );\n\n\treturn (\n\t\t// This will provide state for `ToolbarButton`'s\n\t\t<ToolbarContext.Provider value={ toolbarState }>\n\t\t\t<Toolbar\n\t\t\t\tref={ ref }\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...toolbarState }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ToolbarContext.Provider>\n\t);\n}\n\nexport default forwardRef( ToolbarContainer );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar/toolbar-container.native.js"],"names":["View","ToolbarContainer","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;;AAEA,MAAMC,gBAAgB,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAAoB,cAAC,IAAD,QAAQA,QAAR,CAApB;AAAA,CAAzB;;AAEA,eAAeD,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nconst ToolbarContainer = ( { children } ) => <View>{ children }</View>;\n\nexport default ToolbarContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/index.js"],"names":["classnames","useContext","forwardRef","Button","ToolbarItem","ToolbarContext","ToolbarButtonContainer","ToolbarButton","ref","containerClassName","className","extraProps","children","title","isActive","isDisabled","props","accessibleToolbarState","icon","shortcut","subscript","event","stopPropagation","onClick","toolbarItemProps"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AACA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,sBAAP,MAAmC,4BAAnC;;AAEA,SAASC,aAAT,OAWCC,GAXD,EAYE;AAAA,MAXD;AACCC,IAAAA,kBADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,UAHD;AAICC,IAAAA,QAJD;AAKCC,IAAAA,KALD;AAMCC,IAAAA,QAND;AAOCC,IAAAA,UAPD;AAQC,OAAGC;AARJ,GAWC;AACD,QAAMC,sBAAsB,GAAGhB,UAAU,CAAEI,cAAF,CAAzC;;AAEA,MAAK,CAAEY,sBAAP,EAAgC;AAC/B,WACC,cAAC,sBAAD;AAAwB,MAAA,SAAS,EAAGR;AAApC,OACC,cAAC,MAAD;AACC,MAAA,GAAG,EAAGD,GADP;AAEC,MAAA,IAAI,EAAGQ,KAAK,CAACE,IAFd;AAGC,MAAA,KAAK,EAAGL,KAHT;AAIC,MAAA,QAAQ,EAAGG,KAAK,CAACG,QAJlB;AAKC,wBAAiBH,KAAK,CAACI,SALxB;AAMC,MAAA,OAAO,EAAKC,KAAF,IAAa;AACtBA,QAAAA,KAAK,CAACC,eAAN;;AACA,YAAKN,KAAK,CAACO,OAAX,EAAqB;AACpBP,UAAAA,KAAK,CAACO,OAAN,CAAeF,KAAf;AACA;AACD,OAXF;AAYC,MAAA,SAAS,EAAGrB,UAAU,CACrB,6BADqB,EAErBU,SAFqB,CAZvB;AAgBC,MAAA,SAAS,EAAGI,QAhBb;AAiBC,MAAA,QAAQ,EAAGC,UAjBZ;AAkBC;AAlBD,OAmBMJ,UAnBN,EAoBMK,KApBN,GAsBGJ,QAtBH,CADD,CADD;AA4BA,GAhCA,CAkCD;AACA;AACA;;;AACA,SACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGZ,UAAU,CAAE,2BAAF,EAA+BU,SAA/B;AADvB,KAEMC,UAFN,EAGMK,KAHN;AAIC,IAAA,GAAG,EAAGR;AAJP,MAMKgB,gBAAF,IACD,cAAC,MAAD;AACC,IAAA,KAAK,EAAGX,KADT;AAEC,IAAA,SAAS,EAAGC,QAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,KAIMS,gBAJN,GAMGZ,QANH,CAPF,CADD;AAmBA;;AAED,eAAeV,UAAU,CAAEK,aAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarButtonContainer from './toolbar-button-container';\n\nfunction ToolbarButton(\n\t{\n\t\tcontainerClassName,\n\t\tclassName,\n\t\textraProps,\n\t\tchildren,\n\t\ttitle,\n\t\tisActive,\n\t\tisDisabled,\n\t\t...props\n\t},\n\tref\n) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarButtonContainer className={ containerClassName }>\n\t\t\t\t<Button\n\t\t\t\t\tref={ ref }\n\t\t\t\t\ticon={ props.icon }\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tshortcut={ props.shortcut }\n\t\t\t\t\tdata-subscript={ props.subscript }\n\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif ( props.onClick ) {\n\t\t\t\t\t\t\tprops.onClick( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-toolbar__control',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\tdata-toolbar-item\n\t\t\t\t\t{ ...extraProps }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t</ToolbarButtonContainer>\n\t\t);\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to Button. This means that ToolbarButton has the same API as\n\t// Button.\n\treturn (\n\t\t<ToolbarItem\n\t\t\tclassName={ classnames( 'components-toolbar-button', className ) }\n\t\t\t{ ...extraProps }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t{ ...toolbarItemProps }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarButton );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/toolbar-button-container.js"],"names":["ToolbarButtonContainer","props","className","children"],"mappings":";;AAAA,MAAMA,sBAAsB,GAAKC,KAAF,IAC9B;AAAK,EAAA,SAAS,EAAGA,KAAK,CAACC;AAAvB,GAAqCD,KAAK,CAACE,QAA3C,CADD;;AAGA,eAAeH,sBAAf","sourcesContent":["const ToolbarButtonContainer = ( props ) => (\n\t<div className={ props.className }>{ props.children }</div>\n);\nexport default ToolbarButtonContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-button/toolbar-button-container.native.js"],"names":["View","props","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA,gBAAiBC,KAAF,IAAa,cAAC,IAAD,QAAQA,KAAK,CAACC,QAAd,CAA5B","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nexport default ( props ) => <View>{ props.children }</View>;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-context/index.js"],"names":["createContext","ToolbarContext"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA,MAAMC,cAAc,GAAGD,aAAa,EAApC;AAEA,eAAeC,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst ToolbarContext = createContext();\n\nexport default ToolbarContext;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-dropdown-menu/index.js"],"names":["forwardRef","useContext","ToolbarItem","ToolbarContext","DropdownMenu","ToolbarDropdownMenu","props","ref","accessibleToolbarState","toggleProps","toolbarItemProps","variant","popoverProps"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASC,mBAAT,CAA8BC,KAA9B,EAAqCC,GAArC,EAA2C;AAC1C,QAAMC,sBAAsB,GAAGP,UAAU,CAAEE,cAAF,CAAzC;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,WAAO,cAAC,YAAD,EAAmBF,KAAnB,CAAP;AACA,GALyC,CAO1C;AACA;AACA;;;AACA,SACC,cAAC,WAAD;AAAa,IAAA,GAAG,EAAGC;AAAnB,KAA8BD,KAAK,CAACG,WAApC,GACKC,gBAAF,IACD,cAAC,YAAD,eACMJ,KADN;AAEC,IAAA,YAAY,EAAG;AACdK,MAAAA,OAAO,EAAE,SADK;AAEd,SAAGL,KAAK,CAACM;AAFK,KAFhB;AAMC,IAAA,WAAW,EAAGF;AANf,KAFF,CADD;AAcA;;AAED,eAAeV,UAAU,CAAEK,mBAAF,CAAzB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../dropdown-menu';\n\nfunction ToolbarDropdownMenu( props, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn <DropdownMenu { ...props } />;\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n\t// has the same API as DropdownMenu.\n\treturn (\n\t\t<ToolbarItem ref={ ref } { ...props.toggleProps }>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\tvariant: 'toolbar',\n\t\t\t\t\t\t...props.popoverProps,\n\t\t\t\t\t} }\n\t\t\t\t\ttoggleProps={ toolbarItemProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarDropdownMenu );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/index.js"],"names":["classnames","useContext","ToolbarButton","ToolbarGroupContainer","ToolbarGroupCollapsed","ToolbarContext","ToolbarGroup","controls","children","className","isCollapsed","title","props","accessibleToolbarState","length","finalClassName","controlSets","Array","isArray","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,qBAAP,MAAkC,2BAAlC;AACA,OAAOC,qBAAP,MAAkC,2BAAlC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEA;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,SAASC,YAAT,OAOI;AAAA;;AAAA,MAPmB;AACtBC,IAAAA,QAAQ,GAAG,EADW;AAEtBC,IAAAA,QAFsB;AAGtBC,IAAAA,SAHsB;AAItBC,IAAAA,WAJsB;AAKtBC,IAAAA,KALsB;AAMtB,OAAGC;AANmB,GAOnB;AACH;AACA;AACA,QAAMC,sBAAsB,GAAGZ,UAAU,CAAEI,cAAF,CAAzC;;AAEA,MAAK,CAAE,CAAEE,QAAF,IAAc,CAAEA,QAAQ,CAACO,MAA3B,KAAuC,CAAEN,QAA9C,EAAyD;AACxD,WAAO,IAAP;AACA;;AAED,QAAMO,cAAc,GAAGf,UAAU,EAChC;AACA;AACAa,EAAAA,sBAAsB,GACnB,0BADmB,GAEnB,oBAL6B,EAMhCJ,SANgC,CAAjC,CATG,CAkBH;;AACA,MAAIO,WAAW,GAAGT,QAAlB;;AACA,MAAK,CAAEU,KAAK,CAACC,OAAN,CAAeF,WAAW,CAAE,CAAF,CAA1B,CAAP,EAA2C;AAC1CA,IAAAA,WAAW,GAAG,CAAEA,WAAF,CAAd;AACA;;AAED,MAAKN,WAAL,EAAmB;AAClB,WACC,cAAC,qBAAD;AACC,MAAA,KAAK,EAAGC,KADT;AAEC,MAAA,QAAQ,EAAGK,WAFZ;AAGC,MAAA,SAAS,EAAGD,cAHb;AAIC,MAAA,QAAQ,EAAGP;AAJZ,OAKMI,KALN,EADD;AASA;;AAED,SACC,cAAC,qBAAD;AAAuB,IAAA,SAAS,EAAGG;AAAnC,KAAyDH,KAAzD,mBACGI,WADH,iDACG,aAAaG,OAAb,CAAsB,CAAEC,UAAF,EAAcC,UAAd,KACvBD,UAAU,CAACE,GAAX,CAAgB,CAAEC,OAAF,EAAWC,cAAX,KACf,cAAC,aAAD;AACC,IAAA,GAAG,EAAG,CAAEH,UAAF,EAAcG,cAAd,EAA+BC,IAA/B,EADP;AAEC,IAAA,kBAAkB,EACjBJ,UAAU,GAAG,CAAb,IAAkBG,cAAc,KAAK,CAArC,GACG,kBADH,GAEG;AALL,KAOMD,OAPN,EADD,CADC,CADH,EAcGf,QAdH,CADD;AAkBA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarButton from '../toolbar-button';\nimport ToolbarGroupContainer from './toolbar-group-container';\nimport ToolbarGroupCollapsed from './toolbar-group-collapsed';\nimport ToolbarContext from '../toolbar-context';\n\n/**\n * Renders a collapsible group of controls\n *\n * The `controls` prop accepts an array of sets. A set is an array of controls.\n * Controls have the following shape:\n *\n * ```\n * {\n * icon: string,\n * title: string,\n * subscript: string,\n * onClick: Function,\n * isActive: boolean,\n * isDisabled: boolean\n * }\n * ```\n *\n * For convenience it is also possible to pass only an array of controls. It is\n * then assumed this is the only set.\n *\n * Either `controls` or `children` is required, otherwise this components\n * renders nothing.\n *\n * @param {Object} props Component props.\n * @param {Array} [props.controls] The controls to render in this toolbar.\n * @param {WPElement} [props.children] Any other things to render inside the toolbar besides the controls.\n * @param {string} [props.className] Class to set on the container div.\n * @param {boolean} [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.\n * @param {string} [props.title] ARIA label for dropdown menu if is collapsed.\n */\nfunction ToolbarGroup( {\n\tcontrols = [],\n\tchildren,\n\tclassName,\n\tisCollapsed,\n\ttitle,\n\t...props\n} ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ( ! controls || ! controls.length ) && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst finalClassName = classnames(\n\t\t// Unfortunately, there's legacy code referencing to `.components-toolbar`\n\t\t// So we can't get rid of it\n\t\taccessibleToolbarState\n\t\t\t? 'components-toolbar-group'\n\t\t\t: 'components-toolbar',\n\t\tclassName\n\t);\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets = controls;\n\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\tcontrolSets = [ controlSets ];\n\t}\n\n\tif ( isCollapsed ) {\n\t\treturn (\n\t\t\t<ToolbarGroupCollapsed\n\t\t\t\tlabel={ title }\n\t\t\t\tcontrols={ controlSets }\n\t\t\t\tclassName={ finalClassName }\n\t\t\t\tchildren={ children }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroupContainer className={ finalClassName } { ...props }>\n\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tkey={ [ indexOfSet, indexOfControl ].join() }\n\t\t\t\t\t\tcontainerClassName={\n\t\t\t\t\t\t\tindexOfSet > 0 && indexOfControl === 0\n\t\t\t\t\t\t\t\t? 'has-left-divider'\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...control }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t\t{ children }\n\t\t</ToolbarGroupContainer>\n\t);\n}\n\nexport default ToolbarGroup;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-collapsed.js"],"names":["useContext","DropdownMenu","ToolbarContext","ToolbarItem","ToolbarGroupCollapsed","controls","toggleProps","props","accessibleToolbarState","renderDropdownMenu","internalToggleProps"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAEA,SAASC,qBAAT,OAA2E;AAAA,MAA3C;AAAEC,IAAAA,QAAQ,GAAG,EAAb;AAAiBC,IAAAA,WAAjB;AAA8B,OAAGC;AAAjC,GAA2C;AAC1E;AACA;AACA,QAAMC,sBAAsB,GAAGR,UAAU,CAAEE,cAAF,CAAzC;;AAEA,QAAMO,kBAAkB,GAAKC,mBAAF,IAC1B,cAAC,YAAD;AACC,IAAA,QAAQ,EAAGL,QADZ;AAEC,IAAA,WAAW,EAAG,EACb,GAAGK,mBADU;AAEb,2BAAqB;AAFR;AAFf,KAMMH,KANN,EADD;;AAWA,MAAKC,sBAAL,EAA8B;AAC7B,WACC,cAAC,WAAD,EAAkBF,WAAlB,EAAkCG,kBAAlC,CADD;AAGA;;AAED,SAAOA,kBAAkB,CAAEH,WAAF,CAAzB;AACA;;AAED,eAAeF,qBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../dropdown-menu';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarItem from '../toolbar-item';\n\nfunction ToolbarGroupCollapsed( { controls = [], toggleProps, ...props } ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tconst renderDropdownMenu = ( internalToggleProps ) => (\n\t\t<DropdownMenu\n\t\t\tcontrols={ controls }\n\t\t\ttoggleProps={ {\n\t\t\t\t...internalToggleProps,\n\t\t\t\t'data-toolbar-item': true,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n\n\tif ( accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarItem { ...toggleProps }>{ renderDropdownMenu }</ToolbarItem>\n\t\t);\n\t}\n\n\treturn renderDropdownMenu( toggleProps );\n}\n\nexport default ToolbarGroupCollapsed;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-collapsed.native.js"],"names":["View","withPreferredColorScheme","DropdownMenu","styles","ToolbarGroupCollapsed","controls","getStylesFromColorScheme","passedStyle","props","container","containerDark"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AACA;AACA;AACA;;AACA,SAASC,wBAAT,QAAyC,oBAAzC;AACA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,SAASC,qBAAT,OAKI;AAAA,MAL4B;AAC/BC,IAAAA,QAAQ,GAAG,EADoB;AAE/BC,IAAAA,wBAF+B;AAG/BC,IAAAA,WAH+B;AAI/B,OAAGC;AAJ4B,GAK5B;AACH,SACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAG,CACPF,wBAAwB,CACvBH,MAAM,CAACM,SADgB,EAEvBN,MAAM,CAACO,aAFgB,CADjB,EAKPH,WALO;AADT,KASC,cAAC,YAAD;AAAc,IAAA,QAAQ,EAAGF;AAAzB,KAAyCG,KAAzC,EATD,CADD;AAaA;;AAED,eAAeP,wBAAwB,CAAEG,qBAAF,CAAvC","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../dropdown-menu';\nimport styles from './style.scss';\n\nfunction ToolbarGroupCollapsed( {\n\tcontrols = [],\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\t...props\n} ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tgetStylesFromColorScheme(\n\t\t\t\t\tstyles.container,\n\t\t\t\t\tstyles.containerDark\n\t\t\t\t),\n\t\t\t\tpassedStyle,\n\t\t\t] }\n\t\t>\n\t\t\t<DropdownMenu controls={ controls } { ...props } />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( ToolbarGroupCollapsed );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-container.js"],"names":["ToolbarGroupContainer","className","children","props"],"mappings":";;;AAAA,MAAMA,qBAAqB,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,GAAF;AAAA,SAC7B;AAAK,IAAA,SAAS,EAAGF;AAAjB,KAAkCE,KAAlC,GACGD,QADH,CAD6B;AAAA,CAA9B;;AAKA,eAAeF,qBAAf","sourcesContent":["const ToolbarGroupContainer = ( { className, children, ...props } ) => (\n\t<div className={ className } { ...props }>\n\t\t{ children }\n\t</div>\n);\nexport default ToolbarGroupContainer;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-group/toolbar-group-container.native.js"],"names":["View","withPreferredColorScheme","styles","ToolbarGroupContainer","getStylesFromColorScheme","passedStyle","children","container","containerDark"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,wBAAT,QAAyC,oBAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,qBAAqB,GAAG;AAAA,MAAE;AAC/BC,IAAAA,wBAD+B;AAE/BC,IAAAA,WAF+B;AAG/BC,IAAAA;AAH+B,GAAF;AAAA,SAK7B,cAAC,IAAD;AACC,IAAA,KAAK,EAAG,CACPF,wBAAwB,CAAEF,MAAM,CAACK,SAAT,EAAoBL,MAAM,CAACM,aAA3B,CADjB,EAEPH,WAFO;AADT,KAMGC,QANH,CAL6B;AAAA,CAA9B;;AAeA,eAAeL,wBAAwB,CAAEE,qBAAF,CAAvC","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst ToolbarGroupContainer = ( {\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\tchildren,\n} ) => (\n\t<View\n\t\tstyle={ [\n\t\t\tgetStylesFromColorScheme( styles.container, styles.containerDark ),\n\t\t\tpassedStyle,\n\t\t] }\n\t>\n\t\t{ children }\n\t</View>\n);\n\nexport default withPreferredColorScheme( ToolbarGroupContainer );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-item/index.js"],"names":["ToolbarItem","BaseToolbarItem","forwardRef","useContext","warning","ToolbarContext","ref","children","as","Component","props","accessibleToolbarState","allProps"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,eAAxB,QAA+C,gBAA/C;AAEA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AACA,OAAOC,OAAP,MAAoB,oBAApB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,oBAA3B;;AAEA,SAASL,WAAT,OAA6DM,GAA7D,EAAmE;AAAA,MAA7C;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,EAAE,EAAEC,SAAhB;AAA2B,OAAGC;AAA9B,GAA6C;AAClE,QAAMC,sBAAsB,GAAGR,UAAU,CAAEE,cAAF,CAAzC;;AAEA,MAAK,OAAOE,QAAP,KAAoB,UAApB,IAAkC,CAAEE,SAAzC,EAAqD;AACpD,6FAAAL,OAAO,CACN,yIACC,2EAFK,CAAP;AAIA,WAAO,IAAP;AACA;;AAED,QAAMQ,QAAQ,GAAG,EAAE,GAAGF,KAAL;AAAYJ,IAAAA,GAAZ;AAAiB,yBAAqB;AAAtC,GAAjB;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,QAAKF,SAAL,EAAiB;AAChB,aAAO,cAAC,SAAD,EAAgBG,QAAhB,EAA6BL,QAA7B,CAAP;AACA;;AACD,WAAOA,QAAQ,CAAEK,QAAF,CAAf;AACA;;AAED,SACC,cAAC,eAAD,eACMD,sBADN,EAEMC,QAFN;AAGC,IAAA,EAAE,EAAGH;AAHN,MAKGF,QALH,CADD;AASA;;AAED,eAAeL,UAAU,CAAEF,WAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport ToolbarContext from '../toolbar-context';\n\nfunction ToolbarItem( { children, as: Component, ...props }, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( typeof children !== 'function' && ! Component ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +\n\t\t\t\t'See https://developer.wordpress.org/block-editor/components/toolbar-item/'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst allProps = { ...props, ref, 'data-toolbar-item': true };\n\n\tif ( ! accessibleToolbarState ) {\n\t\tif ( Component ) {\n\t\t\treturn <Component { ...allProps }>{ children }</Component>;\n\t\t}\n\t\treturn children( allProps );\n\t}\n\n\treturn (\n\t\t<BaseToolbarItem\n\t\t\t{ ...accessibleToolbarState }\n\t\t\t{ ...allProps }\n\t\t\tas={ Component }\n\t\t>\n\t\t\t{ children }\n\t\t</BaseToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarItem );\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/toolbar-item/index.native.js"],"names":["forwardRef","warning","ToolbarItem","ref","children","props"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,OAAOC,OAAP,MAAoB,oBAApB;;AAEA,SAASC,WAAT,OAA8CC,GAA9C,EAAoD;AAAA,MAA9B;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAA8B;;AACnD,MAAK,OAAOD,QAAP,KAAoB,UAAzB,EAAsC;AACrC,6FAAAH,OAAO,CACN,yFADM,CAAP;AAGA,WAAO,IAAP;AACA;;AACD,SAAOG,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAYF,IAAAA;AAAZ,GAAF,CAAf;AACA;;AAED,eAAeH,UAAU,CAAEE,WAAF,CAAzB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\nfunction ToolbarItem( { children, ...props }, ref ) {\n\tif ( typeof children !== 'function' ) {\n\t\twarning(\n\t\t\t'`ToolbarItem` is a generic headless component that accepts only function children props'\n\t\t);\n\t\treturn null;\n\t}\n\treturn children( { ...props, ref } );\n}\n\nexport default forwardRef( ToolbarItem );\n"]}
|
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import {
|
|
5
|
-
formatBold,
|
|
6
|
-
formatItalic,
|
|
7
|
-
link,
|
|
8
|
-
more,
|
|
9
|
-
wordpress,
|
|
10
|
-
} from '@wordpress/icons';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Internal dependencies
|
|
14
|
-
*/
|
|
15
|
-
import './style.css';
|
|
16
|
-
import Button from '../';
|
|
17
|
-
|
|
18
|
-
export default {
|
|
19
|
-
title: 'Components/Button',
|
|
20
|
-
component: Button,
|
|
21
|
-
argTypes: {
|
|
22
|
-
label: {
|
|
23
|
-
control: { type: 'text' },
|
|
24
|
-
description:
|
|
25
|
-
'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
|
|
26
|
-
},
|
|
27
|
-
children: {
|
|
28
|
-
control: { type: 'text' },
|
|
29
|
-
},
|
|
30
|
-
href: {
|
|
31
|
-
control: { type: 'text' },
|
|
32
|
-
description: 'If provided, renders `a` instead of `button`.',
|
|
33
|
-
},
|
|
34
|
-
icon: {
|
|
35
|
-
control: { type: 'select' },
|
|
36
|
-
description:
|
|
37
|
-
'If provided, renders an `Icon` component inside the button.',
|
|
38
|
-
options: [ 'wordpress', 'link', 'more' ],
|
|
39
|
-
mapping: {
|
|
40
|
-
wordpress,
|
|
41
|
-
link,
|
|
42
|
-
more,
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
iconSize: {
|
|
46
|
-
control: { type: 'number' },
|
|
47
|
-
description: 'If provided with `icon`, sets the icon size.',
|
|
48
|
-
},
|
|
49
|
-
iconPosition: {
|
|
50
|
-
control: { type: 'select' },
|
|
51
|
-
description:
|
|
52
|
-
'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
|
|
53
|
-
options: [ 'left', 'right' ],
|
|
54
|
-
table: {
|
|
55
|
-
defaultValue: { summary: `left` },
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
isBusy: {
|
|
59
|
-
control: 'boolean',
|
|
60
|
-
description:
|
|
61
|
-
'Indicates activity while a action is being performed.',
|
|
62
|
-
},
|
|
63
|
-
isDestructive: {
|
|
64
|
-
control: 'boolean',
|
|
65
|
-
description:
|
|
66
|
-
'Renders a red text-based button style to indicate destructive behavior.',
|
|
67
|
-
},
|
|
68
|
-
isPressed: {
|
|
69
|
-
control: 'boolean',
|
|
70
|
-
description: 'Renders a pressed button style.',
|
|
71
|
-
},
|
|
72
|
-
isSmall: {
|
|
73
|
-
control: 'boolean',
|
|
74
|
-
description: 'Decreases the size of the button.',
|
|
75
|
-
},
|
|
76
|
-
disabled: {
|
|
77
|
-
control: 'boolean',
|
|
78
|
-
description:
|
|
79
|
-
'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
|
|
80
|
-
},
|
|
81
|
-
shortcut: {
|
|
82
|
-
control: { type: 'text' },
|
|
83
|
-
description:
|
|
84
|
-
'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
|
|
85
|
-
},
|
|
86
|
-
showTooltip: {
|
|
87
|
-
control: 'boolean',
|
|
88
|
-
description:
|
|
89
|
-
'If provided, renders a `Tooltip` component for the button.',
|
|
90
|
-
},
|
|
91
|
-
tooltipPosition: {
|
|
92
|
-
control: { type: 'text' },
|
|
93
|
-
description:
|
|
94
|
-
'If provided with `showTooltip`, sets the position of the tooltip.',
|
|
95
|
-
},
|
|
96
|
-
text: {
|
|
97
|
-
control: { type: 'text' },
|
|
98
|
-
description:
|
|
99
|
-
'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
|
|
100
|
-
},
|
|
101
|
-
target: {
|
|
102
|
-
control: { type: 'text' },
|
|
103
|
-
description:
|
|
104
|
-
'If provided with `href`, sets the `target` attribute to the `a`.',
|
|
105
|
-
},
|
|
106
|
-
variant: {
|
|
107
|
-
control: { type: 'select' },
|
|
108
|
-
description: "Specifies the button's style.",
|
|
109
|
-
options: [ 'primary', 'secondary', 'tertiary', 'link' ],
|
|
110
|
-
},
|
|
111
|
-
__experimentalIsFocusable: {
|
|
112
|
-
control: 'boolean',
|
|
113
|
-
description: 'Makes the button focusable even when disabled',
|
|
114
|
-
},
|
|
115
|
-
},
|
|
116
|
-
parameters: {
|
|
117
|
-
controls: { expanded: true },
|
|
118
|
-
docs: { source: { state: 'open' } },
|
|
119
|
-
},
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
function Template( { children, ...props } ) {
|
|
123
|
-
return <Button { ...props }>{ children }</Button>;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
export const Default = Template.bind( {} );
|
|
127
|
-
Default.args = {
|
|
128
|
-
children: 'Code is poetry',
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
export const Primary = Template.bind( {} );
|
|
132
|
-
Primary.args = {
|
|
133
|
-
...Default.args,
|
|
134
|
-
variant: 'primary',
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
export const Secondary = Template.bind( {} );
|
|
138
|
-
Secondary.args = {
|
|
139
|
-
...Default.args,
|
|
140
|
-
variant: 'secondary',
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
export const Tertiary = Template.bind( {} );
|
|
144
|
-
Tertiary.args = {
|
|
145
|
-
...Default.args,
|
|
146
|
-
variant: 'tertiary',
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
export const Link = Template.bind( {} );
|
|
150
|
-
Link.args = {
|
|
151
|
-
...Default.args,
|
|
152
|
-
variant: 'link',
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
export const IsDestructive = Template.bind( {} );
|
|
156
|
-
IsDestructive.args = {
|
|
157
|
-
...Default.args,
|
|
158
|
-
isDestructive: true,
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
export const Icon = Template.bind( {} );
|
|
162
|
-
Icon.args = {
|
|
163
|
-
label: 'Code is poetry',
|
|
164
|
-
icon: 'wordpress',
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
export const groupedIcons = () => {
|
|
168
|
-
const GroupContainer = ( { children } ) => (
|
|
169
|
-
<div style={ { display: 'inline-flex' } }>{ children }</div>
|
|
170
|
-
);
|
|
171
|
-
|
|
172
|
-
return (
|
|
173
|
-
<GroupContainer>
|
|
174
|
-
<Button icon={ formatBold } label="Bold" />
|
|
175
|
-
<Button icon={ formatItalic } label="Italic" />
|
|
176
|
-
<Button icon={ link } label="Link" />
|
|
177
|
-
</GroupContainer>
|
|
178
|
-
);
|
|
179
|
-
};
|
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-alert */
|
|
2
|
-
/* globals alert */
|
|
3
|
-
/**
|
|
4
|
-
* External dependencies
|
|
5
|
-
*/
|
|
6
|
-
import { boolean, select } from '@storybook/addon-knobs';
|
|
7
|
-
import { css } from '@emotion/react';
|
|
8
|
-
import styled from '@emotion/styled';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* WordPress dependencies
|
|
12
|
-
*/
|
|
13
|
-
import { typography, chevronRight } from '@wordpress/icons';
|
|
14
|
-
import { useMemo } from '@wordpress/element';
|
|
15
|
-
import { isRTL } from '@wordpress/i18n';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Internal dependencies
|
|
19
|
-
*/
|
|
20
|
-
import { useCx } from '../../utils';
|
|
21
|
-
import { ItemGroup, Item } from '..';
|
|
22
|
-
import Button from '../../button';
|
|
23
|
-
import { FlexItem, FlexBlock } from '../../flex';
|
|
24
|
-
import Dropdown from '../../dropdown';
|
|
25
|
-
import { HStack } from '../../h-stack';
|
|
26
|
-
import Icon from '../../icon';
|
|
27
|
-
import { Text } from '../../text';
|
|
28
|
-
import { Truncate } from '../../truncate';
|
|
29
|
-
import { ZStack } from '../../z-stack';
|
|
30
|
-
|
|
31
|
-
export default {
|
|
32
|
-
component: ItemGroup,
|
|
33
|
-
title: 'Components (Experimental)/ItemGroup',
|
|
34
|
-
parameters: {
|
|
35
|
-
knobs: { disable: false },
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// Using `unset` instead of `undefined` as Storybook seems to sometimes pass an
|
|
40
|
-
// empty string instead of `undefined`, which is not ideal.
|
|
41
|
-
// https://github.com/storybookjs/storybook/issues/800
|
|
42
|
-
const PROP_UNSET = 'unset';
|
|
43
|
-
|
|
44
|
-
export const _default = () => {
|
|
45
|
-
const itemGroupProps = {
|
|
46
|
-
isBordered: boolean( 'ItemGroup: isBordered', false ),
|
|
47
|
-
isSeparated: boolean( 'ItemGroup: isSeparated', false ),
|
|
48
|
-
isRounded: boolean( 'ItemGroup: isRounded', true ),
|
|
49
|
-
size: select(
|
|
50
|
-
'ItemGroup: size',
|
|
51
|
-
[ 'small', 'medium', 'large' ],
|
|
52
|
-
'medium'
|
|
53
|
-
),
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const itemProps = {
|
|
57
|
-
size: select(
|
|
58
|
-
'Item 1: size',
|
|
59
|
-
{
|
|
60
|
-
'unset (defaults to the value set on the <ItemGroup> parent)':
|
|
61
|
-
PROP_UNSET,
|
|
62
|
-
small: 'small',
|
|
63
|
-
medium: 'medium',
|
|
64
|
-
large: 'large',
|
|
65
|
-
},
|
|
66
|
-
PROP_UNSET
|
|
67
|
-
),
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
// Do not pass the `size` prop when its value is `undefined`.
|
|
71
|
-
// This allows the `Item` component to use the values that are set on the
|
|
72
|
-
// parent `ItemGroup` component by default.
|
|
73
|
-
if ( itemProps.size === PROP_UNSET ) {
|
|
74
|
-
delete itemProps.size;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
return (
|
|
78
|
-
<ItemGroup style={ { width: '350px' } } { ...itemGroupProps }>
|
|
79
|
-
<Item { ...itemProps }>Code is Poetry (no click handlers)</Item>
|
|
80
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
81
|
-
Code is Poetry — Click me!
|
|
82
|
-
</Item>
|
|
83
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
84
|
-
Code is Poetry — Click me!
|
|
85
|
-
</Item>
|
|
86
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
87
|
-
Code is Poetry — Click me!
|
|
88
|
-
</Item>
|
|
89
|
-
</ItemGroup>
|
|
90
|
-
);
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
export const dropdown = () => (
|
|
94
|
-
<Dropdown
|
|
95
|
-
renderToggle={ ( { isOpen, onToggle } ) => (
|
|
96
|
-
<Button onClick={ onToggle } aria-expanded={ isOpen }>
|
|
97
|
-
Open Popover
|
|
98
|
-
</Button>
|
|
99
|
-
) }
|
|
100
|
-
renderContent={ () => (
|
|
101
|
-
<ItemGroup style={ { minWidth: 350, padding: 4 } }>
|
|
102
|
-
<Item>Code is Poetry (no click handlers)</Item>
|
|
103
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
104
|
-
Code is Poetry — Click me!
|
|
105
|
-
</Item>
|
|
106
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
107
|
-
Code is Poetry — Click me!
|
|
108
|
-
</Item>
|
|
109
|
-
<Item onClick={ () => alert( 'WordPress.org' ) }>
|
|
110
|
-
Code is Poetry — Click me!
|
|
111
|
-
</Item>
|
|
112
|
-
</ItemGroup>
|
|
113
|
-
) }
|
|
114
|
-
/>
|
|
115
|
-
);
|
|
116
|
-
|
|
117
|
-
const SimpleColorSwatch = ( { color, style } ) => (
|
|
118
|
-
<div
|
|
119
|
-
style={ {
|
|
120
|
-
...style,
|
|
121
|
-
borderRadius: '50%',
|
|
122
|
-
border: '1px solid rgba(0, 0, 0, 0.2)',
|
|
123
|
-
width: '24px',
|
|
124
|
-
height: '24px',
|
|
125
|
-
backgroundColor: color,
|
|
126
|
-
} }
|
|
127
|
-
/>
|
|
128
|
-
);
|
|
129
|
-
|
|
130
|
-
const ChevronWrapper = styled( FlexItem )`
|
|
131
|
-
display: block;
|
|
132
|
-
fill: currentColor;
|
|
133
|
-
transition: transform 0.15s ease-out;
|
|
134
|
-
`;
|
|
135
|
-
|
|
136
|
-
const ItemWithChevron = ( {
|
|
137
|
-
children,
|
|
138
|
-
className,
|
|
139
|
-
alwaysVisible,
|
|
140
|
-
...otherProps
|
|
141
|
-
} ) => {
|
|
142
|
-
const isRtlLayout = isRTL();
|
|
143
|
-
const cx = useCx();
|
|
144
|
-
|
|
145
|
-
const appearingChevron = css`
|
|
146
|
-
&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
|
|
147
|
-
display: none;
|
|
148
|
-
}
|
|
149
|
-
`;
|
|
150
|
-
|
|
151
|
-
const itemClassName = useMemo(
|
|
152
|
-
() => cx( ! alwaysVisible && appearingChevron, className ),
|
|
153
|
-
[ alwaysVisible, className, cx, appearingChevron ]
|
|
154
|
-
);
|
|
155
|
-
|
|
156
|
-
const chevronIconClassName = useMemo(
|
|
157
|
-
() =>
|
|
158
|
-
cx( css`
|
|
159
|
-
display: block;
|
|
160
|
-
fill: currentColor;
|
|
161
|
-
transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
|
|
162
|
-
` ),
|
|
163
|
-
[ cx, isRtlLayout ]
|
|
164
|
-
);
|
|
165
|
-
|
|
166
|
-
return (
|
|
167
|
-
<Item { ...otherProps } className={ itemClassName }>
|
|
168
|
-
<HStack justify="flex-start">
|
|
169
|
-
<FlexBlock>{ children }</FlexBlock>
|
|
170
|
-
<ChevronWrapper>
|
|
171
|
-
<Icon
|
|
172
|
-
className={ chevronIconClassName }
|
|
173
|
-
icon={ chevronRight }
|
|
174
|
-
size={ 24 }
|
|
175
|
-
/>
|
|
176
|
-
</ChevronWrapper>
|
|
177
|
-
</HStack>
|
|
178
|
-
</Item>
|
|
179
|
-
);
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
export const complexLayouts = () => {
|
|
183
|
-
const colors = [
|
|
184
|
-
{
|
|
185
|
-
color: '#00A19D',
|
|
186
|
-
id: 'teal',
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
color: '#FFF8E5',
|
|
190
|
-
id: 'cream',
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
color: '#FFB344',
|
|
194
|
-
id: 'yellow',
|
|
195
|
-
},
|
|
196
|
-
{
|
|
197
|
-
color: '#E05D5D',
|
|
198
|
-
id: 'red',
|
|
199
|
-
},
|
|
200
|
-
];
|
|
201
|
-
|
|
202
|
-
return (
|
|
203
|
-
<ItemGroup isBordered isSeparated style={ { width: '250px' } }>
|
|
204
|
-
<Item onClick={ () => alert( 'Color palette' ) }>
|
|
205
|
-
<HStack>
|
|
206
|
-
<FlexBlock>
|
|
207
|
-
<ZStack isLayered={ false } offset={ -8 }>
|
|
208
|
-
{ colors.map( ( { color, id } ) => (
|
|
209
|
-
<SimpleColorSwatch key={ id } color={ color } />
|
|
210
|
-
) ) }
|
|
211
|
-
</ZStack>
|
|
212
|
-
</FlexBlock>
|
|
213
|
-
<FlexItem as={ Text } variant="muted">
|
|
214
|
-
23 colors
|
|
215
|
-
</FlexItem>
|
|
216
|
-
</HStack>
|
|
217
|
-
</Item>
|
|
218
|
-
|
|
219
|
-
<Item onClick={ () => alert( 'Single color setting' ) }>
|
|
220
|
-
<HStack justify="flex-start">
|
|
221
|
-
<FlexItem
|
|
222
|
-
as={ SimpleColorSwatch }
|
|
223
|
-
color="#22577A"
|
|
224
|
-
style={ { flexShrink: 0 } }
|
|
225
|
-
/>
|
|
226
|
-
<FlexItem as={ Truncate }>
|
|
227
|
-
Single color setting with very long description
|
|
228
|
-
</FlexItem>
|
|
229
|
-
</HStack>
|
|
230
|
-
</Item>
|
|
231
|
-
|
|
232
|
-
<Item onClick={ () => alert( 'Single typography setting' ) }>
|
|
233
|
-
<HStack justify="flex-start">
|
|
234
|
-
<FlexItem>
|
|
235
|
-
<Icon icon={ typography } size={ 24 } />
|
|
236
|
-
</FlexItem>
|
|
237
|
-
<FlexItem as={ Truncate }>
|
|
238
|
-
Single typography setting
|
|
239
|
-
</FlexItem>
|
|
240
|
-
</HStack>
|
|
241
|
-
</Item>
|
|
242
|
-
|
|
243
|
-
<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
|
|
244
|
-
<HStack justify="flex-start">
|
|
245
|
-
<SimpleColorSwatch
|
|
246
|
-
color="#2FB63F"
|
|
247
|
-
style={ { flexShrink: 0 } }
|
|
248
|
-
/>
|
|
249
|
-
|
|
250
|
-
<Truncate>Chevron on hover and focus</Truncate>
|
|
251
|
-
</HStack>
|
|
252
|
-
</ItemWithChevron>
|
|
253
|
-
|
|
254
|
-
<ItemWithChevron
|
|
255
|
-
alwaysVisible
|
|
256
|
-
onClick={ () => alert( 'Single color setting' ) }
|
|
257
|
-
>
|
|
258
|
-
<HStack justify="flex-start">
|
|
259
|
-
<SimpleColorSwatch
|
|
260
|
-
color="#D175D0"
|
|
261
|
-
style={ { flexShrink: 0 } }
|
|
262
|
-
/>
|
|
263
|
-
|
|
264
|
-
<Truncate>Chevron always visible</Truncate>
|
|
265
|
-
</HStack>
|
|
266
|
-
</ItemWithChevron>
|
|
267
|
-
</ItemGroup>
|
|
268
|
-
);
|
|
269
|
-
};
|
|
270
|
-
/* eslint-enable no-alert */
|