@wordpress/components 19.7.0 → 19.9.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 +39 -1
- package/README.md +38 -0
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
- package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
- package/build/base-control/index.js +35 -31
- package/build/base-control/index.js.map +1 -1
- package/build/base-control/styles/base-control-styles.js +18 -18
- package/build/base-control/styles/base-control-styles.js.map +1 -1
- package/build/base-control/types.js +6 -0
- package/build/base-control/types.js.map +1 -0
- package/build/border-box-control/border-box-control/component.js +124 -0
- package/build/border-box-control/border-box-control/component.js.map +1 -0
- package/build/border-box-control/border-box-control/hook.js +113 -0
- package/build/border-box-control/border-box-control/hook.js.map +1 -0
- package/build/border-box-control/border-box-control/index.js +24 -0
- package/build/border-box-control/border-box-control/index.js.map +1 -0
- package/build/border-box-control/border-box-control-linked-button/component.js +59 -0
- package/build/border-box-control/border-box-control-linked-button/component.js.map +1 -0
- package/build/border-box-control/border-box-control-linked-button/hook.js +41 -0
- package/build/border-box-control/border-box-control-linked-button/hook.js.map +1 -0
- package/build/border-box-control/border-box-control-linked-button/index.js +16 -0
- package/build/border-box-control/border-box-control-linked-button/index.js.map +1 -0
- package/build/border-box-control/border-box-control-split-controls/component.js +93 -0
- package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -0
- package/build/border-box-control/border-box-control-split-controls/hook.js +45 -0
- package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -0
- package/build/border-box-control/border-box-control-split-controls/index.js +16 -0
- package/build/border-box-control/border-box-control-split-controls/index.js.map +1 -0
- package/build/border-box-control/border-box-control-visualizer/component.js +40 -0
- package/build/border-box-control/border-box-control-visualizer/component.js.map +1 -0
- package/build/border-box-control/border-box-control-visualizer/hook.js +43 -0
- package/build/border-box-control/border-box-control-visualizer/hook.js.map +1 -0
- package/build/border-box-control/border-box-control-visualizer/index.js +16 -0
- package/build/border-box-control/border-box-control-visualizer/index.js.map +1 -0
- package/build/border-box-control/index.js +44 -0
- package/build/border-box-control/index.js.map +1 -0
- package/build/border-box-control/styles.js +76 -0
- package/build/border-box-control/styles.js.map +1 -0
- package/build/border-box-control/types.js +6 -0
- package/build/border-box-control/types.js.map +1 -0
- package/build/border-box-control/utils.js +161 -0
- package/build/border-box-control/utils.js.map +1 -0
- package/build/border-control/border-control/component.js +119 -0
- package/build/border-control/border-control/component.js.map +1 -0
- package/build/border-control/border-control/hook.js +130 -0
- package/build/border-control/border-control/hook.js.map +1 -0
- package/build/border-control/border-control/index.js +24 -0
- package/build/border-control/border-control/index.js.map +1 -0
- package/build/border-control/border-control-dropdown/component.js +196 -0
- package/build/border-control/border-control-dropdown/component.js.map +1 -0
- package/build/border-control/border-control-dropdown/hook.js +105 -0
- package/build/border-control/border-control-dropdown/hook.js.map +1 -0
- package/build/border-control/border-control-dropdown/index.js +16 -0
- package/build/border-control/border-control-dropdown/index.js.map +1 -0
- package/build/border-control/border-control-style-picker/component.js +101 -0
- package/build/border-control/border-control-style-picker/component.js.map +1 -0
- package/build/border-control/border-control-style-picker/hook.js +45 -0
- package/build/border-control/border-control-style-picker/hook.js.map +1 -0
- package/build/border-control/border-control-style-picker/index.js +16 -0
- package/build/border-control/border-control-style-picker/index.js.map +1 -0
- package/build/border-control/index.js +24 -0
- package/build/border-control/index.js.map +1 -0
- package/build/border-control/styles.js +125 -0
- package/build/border-control/styles.js.map +1 -0
- package/build/border-control/types.js +6 -0
- package/build/border-control/types.js.map +1 -0
- package/build/card/styles.js +22 -17
- package/build/card/styles.js.map +1 -1
- package/build/custom-select-control/index.js +4 -1
- package/build/custom-select-control/index.js.map +1 -1
- package/build/guide/index.js +14 -8
- package/build/guide/index.js.map +1 -1
- package/build/heading/hook.js +1 -1
- package/build/heading/hook.js.map +1 -1
- package/build/index.js +40 -0
- package/build/index.js.map +1 -1
- package/build/input-control/index.js +26 -4
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +25 -25
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/item-group/styles.js +14 -14
- package/build/item-group/styles.js.map +1 -1
- package/build/mobile/picker/index.android.js +0 -3
- package/build/mobile/picker/index.android.js.map +1 -1
- package/build/navigation/styles/navigation-styles.js +12 -12
- package/build/navigation/styles/navigation-styles.js.map +1 -1
- package/build/notice/index.native.js +44 -40
- package/build/notice/index.native.js.map +1 -1
- package/build/notice/list.native.js +27 -45
- package/build/notice/list.native.js.map +1 -1
- package/build/palette-edit/index.js +2 -1
- package/build/palette-edit/index.js.map +1 -1
- package/build/sandbox/index.js +2 -2
- package/build/sandbox/index.js.map +1 -1
- package/build/select-control/styles/select-control-styles.js +5 -5
- package/build/select-control/styles/select-control-styles.js.map +1 -1
- package/build/surface/styles.js +8 -8
- package/build/surface/styles.js.map +1 -1
- package/build/text/hook.js +5 -5
- package/build/text/hook.js.map +1 -1
- package/build/text/styles/text-mixins.native.js +1 -1
- package/build/text/styles/text-mixins.native.js.map +1 -1
- package/build/text/styles.js +7 -7
- package/build/text/styles.js.map +1 -1
- package/build/toggle-group-control/index.js +8 -0
- package/build/toggle-group-control/index.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +10 -1
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +14 -3
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +90 -0
- package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option/component.js +9 -87
- package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-base/component.js +127 -0
- package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-base/index.js +16 -0
- package/build/toggle-group-control/toggle-group-control-option-base/index.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js +66 -0
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js +55 -0
- package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-icon/index.js +16 -0
- package/build/toggle-group-control/toggle-group-control-option-icon/index.js.map +1 -0
- package/build/toolbar-dropdown-menu/index.js +1 -1
- package/build/toolbar-dropdown-menu/index.js.map +1 -1
- package/build/ui/spinner/component.js +1 -1
- package/build/ui/spinner/component.js.map +1 -1
- package/build/unit-control/index.js +7 -2
- package/build/unit-control/index.js.map +1 -1
- package/build/utils/colors-values.js +14 -27
- package/build/utils/colors-values.js.map +1 -1
- package/build/utils/config-values.js +9 -4
- package/build/utils/config-values.js.map +1 -1
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
- package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
- package/build-module/base-control/index.js +33 -34
- package/build-module/base-control/index.js.map +1 -1
- package/build-module/base-control/styles/base-control-styles.js +18 -18
- package/build-module/base-control/styles/base-control-styles.js.map +1 -1
- package/build-module/base-control/types.js +2 -0
- package/build-module/base-control/types.js.map +1 -0
- package/build-module/border-box-control/border-box-control/component.js +104 -0
- package/build-module/border-box-control/border-box-control/component.js.map +1 -0
- package/build-module/border-box-control/border-box-control/hook.js +97 -0
- package/build-module/border-box-control/border-box-control/hook.js.map +1 -0
- package/build-module/border-box-control/border-box-control/index.js +3 -0
- package/build-module/border-box-control/border-box-control/index.js.map +1 -0
- package/build-module/border-box-control/border-box-control-linked-button/component.js +42 -0
- package/build-module/border-box-control/border-box-control-linked-button/component.js.map +1 -0
- package/build-module/border-box-control/border-box-control-linked-button/hook.js +26 -0
- package/build-module/border-box-control/border-box-control-linked-button/hook.js.map +1 -0
- package/build-module/border-box-control/border-box-control-linked-button/index.js +2 -0
- package/build-module/border-box-control/border-box-control-linked-button/index.js.map +1 -0
- package/build-module/border-box-control/border-box-control-split-controls/component.js +77 -0
- package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -0
- package/build-module/border-box-control/border-box-control-split-controls/hook.js +30 -0
- package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -0
- package/build-module/border-box-control/border-box-control-split-controls/index.js +2 -0
- package/build-module/border-box-control/border-box-control-split-controls/index.js.map +1 -0
- package/build-module/border-box-control/border-box-control-visualizer/component.js +27 -0
- package/build-module/border-box-control/border-box-control-visualizer/component.js.map +1 -0
- package/build-module/border-box-control/border-box-control-visualizer/hook.js +28 -0
- package/build-module/border-box-control/border-box-control-visualizer/hook.js.map +1 -0
- package/build-module/border-box-control/border-box-control-visualizer/index.js +2 -0
- package/build-module/border-box-control/border-box-control-visualizer/index.js.map +1 -0
- package/build-module/border-box-control/index.js +4 -0
- package/build-module/border-box-control/index.js.map +1 -0
- package/build-module/border-box-control/styles.js +66 -0
- package/build-module/border-box-control/styles.js.map +1 -0
- package/build-module/border-box-control/types.js +2 -0
- package/build-module/border-box-control/types.js.map +1 -0
- package/build-module/border-box-control/utils.js +127 -0
- package/build-module/border-box-control/utils.js.map +1 -0
- package/build-module/border-control/border-control/component.js +100 -0
- package/build-module/border-control/border-control/component.js.map +1 -0
- package/build-module/border-control/border-control/hook.js +115 -0
- package/build-module/border-control/border-control/hook.js.map +1 -0
- package/build-module/border-control/border-control/index.js +3 -0
- package/build-module/border-control/border-control/index.js.map +1 -0
- package/build-module/border-control/border-control-dropdown/component.js +174 -0
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -0
- package/build-module/border-control/border-control-dropdown/hook.js +89 -0
- package/build-module/border-control/border-control-dropdown/hook.js.map +1 -0
- package/build-module/border-control/border-control-dropdown/index.js +2 -0
- package/build-module/border-control/border-control-dropdown/index.js.map +1 -0
- package/build-module/border-control/border-control-style-picker/component.js +81 -0
- package/build-module/border-control/border-control-style-picker/component.js.map +1 -0
- package/build-module/border-control/border-control-style-picker/hook.js +30 -0
- package/build-module/border-control/border-control-style-picker/hook.js.map +1 -0
- package/build-module/border-control/border-control-style-picker/index.js +2 -0
- package/build-module/border-control/border-control-style-picker/index.js.map +1 -0
- package/build-module/border-control/index.js +3 -0
- package/build-module/border-control/index.js.map +1 -0
- package/build-module/border-control/styles.js +90 -0
- package/build-module/border-control/styles.js.map +1 -0
- package/build-module/border-control/types.js +2 -0
- package/build-module/border-control/types.js.map +1 -0
- package/build-module/card/styles.js +23 -18
- package/build-module/card/styles.js.map +1 -1
- package/build-module/custom-select-control/index.js +4 -1
- package/build-module/custom-select-control/index.js.map +1 -1
- package/build-module/guide/index.js +14 -8
- package/build-module/guide/index.js.map +1 -1
- package/build-module/heading/hook.js +1 -1
- package/build-module/heading/hook.js.map +1 -1
- package/build-module/index.js +3 -1
- package/build-module/index.js.map +1 -1
- package/build-module/input-control/index.js +23 -3
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +25 -25
- package/build-module/input-control/styles/input-control-styles.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/mobile/picker/index.android.js +0 -3
- package/build-module/mobile/picker/index.android.js.map +1 -1
- package/build-module/navigation/styles/navigation-styles.js +13 -13
- package/build-module/navigation/styles/navigation-styles.js.map +1 -1
- package/build-module/notice/index.native.js +45 -41
- package/build-module/notice/index.native.js.map +1 -1
- package/build-module/notice/list.native.js +28 -46
- package/build-module/notice/list.native.js.map +1 -1
- package/build-module/palette-edit/index.js +3 -2
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/sandbox/index.js +2 -2
- package/build-module/sandbox/index.js.map +1 -1
- package/build-module/select-control/styles/select-control-styles.js +5 -5
- package/build-module/select-control/styles/select-control-styles.js.map +1 -1
- package/build-module/surface/styles.js +8 -8
- package/build-module/surface/styles.js.map +1 -1
- package/build-module/text/hook.js +5 -5
- package/build-module/text/hook.js.map +1 -1
- package/build-module/text/styles/text-mixins.native.js +2 -2
- package/build-module/text/styles/text-mixins.native.js.map +1 -1
- package/build-module/text/styles.js +7 -7
- package/build-module/text/styles.js.map +1 -1
- package/build-module/toggle-group-control/index.js +1 -0
- package/build-module/toggle-group-control/index.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +8 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +11 -3
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +86 -0
- package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option/component.js +9 -76
- package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +105 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/index.js +2 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/index.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +55 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +50 -0
- package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js +2 -0
- package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js.map +1 -0
- package/build-module/toolbar-dropdown-menu/index.js +1 -1
- package/build-module/toolbar-dropdown-menu/index.js.map +1 -1
- package/build-module/ui/spinner/component.js +1 -1
- package/build-module/ui/spinner/component.js.map +1 -1
- package/build-module/unit-control/index.js +7 -2
- package/build-module/unit-control/index.js.map +1 -1
- package/build-module/utils/colors-values.js +24 -26
- package/build-module/utils/colors-values.js.map +1 -1
- package/build-module/utils/config-values.js +8 -4
- package/build-module/utils/config-values.js.map +1 -1
- package/build-style/style-rtl.css +21 -4
- package/build-style/style.css +21 -4
- package/build-types/base-control/index.d.ts +35 -76
- package/build-types/base-control/index.d.ts.map +1 -1
- package/build-types/base-control/stories/index.d.ts +25 -0
- package/build-types/base-control/stories/index.d.ts.map +1 -0
- package/build-types/base-control/styles/base-control-styles.d.ts +6 -5
- package/build-types/base-control/styles/base-control-styles.d.ts.map +1 -1
- package/build-types/base-control/types.d.ts +41 -0
- package/build-types/base-control/types.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control/component.d.ts +4 -0
- package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control/hook.d.ts +282 -0
- package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control/index.d.ts +3 -0
- package/build-types/border-box-control/border-box-control/index.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-linked-button/component.d.ts +4 -0
- package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +266 -0
- package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-linked-button/index.d.ts +2 -0
- package/build-types/border-box-control/border-box-control-linked-button/index.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +4 -0
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +274 -0
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-split-controls/index.d.ts +2 -0
- package/build-types/border-box-control/border-box-control-split-controls/index.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-visualizer/component.d.ts +4 -0
- package/build-types/border-box-control/border-box-control-visualizer/component.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts +266 -0
- package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -0
- package/build-types/border-box-control/border-box-control-visualizer/index.d.ts +2 -0
- package/build-types/border-box-control/border-box-control-visualizer/index.d.ts.map +1 -0
- package/build-types/border-box-control/index.d.ts +4 -0
- package/build-types/border-box-control/index.d.ts.map +1 -0
- package/build-types/border-box-control/styles.d.ts +8 -0
- package/build-types/border-box-control/styles.d.ts.map +1 -0
- package/build-types/border-box-control/types.d.ts +91 -0
- package/build-types/border-box-control/types.d.ts.map +1 -0
- package/build-types/border-box-control/utils.d.ts +24 -0
- package/build-types/border-box-control/utils.d.ts.map +1 -0
- package/build-types/border-control/border-control/component.d.ts +4 -0
- package/build-types/border-control/border-control/component.d.ts.map +1 -0
- package/build-types/border-control/border-control/hook.d.ts +285 -0
- package/build-types/border-control/border-control/hook.d.ts.map +1 -0
- package/build-types/border-control/border-control/index.d.ts +3 -0
- package/build-types/border-control/border-control/index.d.ts.map +1 -0
- package/build-types/border-control/border-control-dropdown/component.d.ts +4 -0
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -0
- package/build-types/border-control/border-control-dropdown/hook.d.ts +280 -0
- package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -0
- package/build-types/border-control/border-control-dropdown/index.d.ts +2 -0
- package/build-types/border-control/border-control-dropdown/index.d.ts.map +1 -0
- package/build-types/border-control/border-control-style-picker/component.d.ts +4 -0
- package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -0
- package/build-types/border-control/border-control-style-picker/hook.d.ts +269 -0
- package/build-types/border-control/border-control-style-picker/hook.d.ts.map +1 -0
- package/build-types/border-control/border-control-style-picker/index.d.ts +2 -0
- package/build-types/border-control/border-control-style-picker/index.d.ts.map +1 -0
- package/build-types/border-control/index.d.ts +3 -0
- package/build-types/border-control/index.d.ts.map +1 -0
- package/build-types/border-control/styles.d.ts +18 -0
- package/build-types/border-control/styles.d.ts.map +1 -0
- package/build-types/border-control/types.d.ts +163 -0
- package/build-types/border-control/types.d.ts.map +1 -0
- package/build-types/card/styles.d.ts.map +1 -1
- package/build-types/color-indicator/index.d.ts +7 -0
- package/build-types/color-indicator/index.d.ts.map +1 -0
- package/build-types/color-picker/styles.d.ts +1 -1
- package/build-types/input-control/index.d.ts +22 -3
- package/build-types/input-control/index.d.ts.map +1 -1
- package/build-types/input-control/input-field.d.ts +1 -1
- package/build-types/input-control/input-field.d.ts.map +1 -1
- package/build-types/input-control/stories/index.d.ts +17 -0
- package/build-types/input-control/stories/index.d.ts.map +1 -0
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/input-control/types.d.ts +73 -3
- package/build-types/input-control/types.d.ts.map +1 -1
- package/build-types/item-group/styles.d.ts.map +1 -1
- package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
- package/build-types/text/test/index.d.ts +2 -0
- package/build-types/text/test/index.d.ts.map +1 -0
- package/build-types/toggle-group-control/index.d.ts +1 -0
- package/build-types/toggle-group-control/index.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +5 -0
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts +9 -0
- package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +6 -2
- package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts +25 -0
- package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option-base/index.d.ts +2 -0
- package/build-types/toggle-group-control/toggle-group-control-option-base/index.d.ts.map +1 -0
- package/build-types/toggle-group-control/{toggle-group-control-option → toggle-group-control-option-base}/styles.d.ts +0 -0
- package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +37 -0
- package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option-icon/index.d.ts +2 -0
- package/build-types/toggle-group-control/toggle-group-control-option-icon/index.d.ts.map +1 -0
- package/build-types/toggle-group-control/types.d.ts +24 -8
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/ui/form-group/form-group.d.ts +2 -2
- package/build-types/unit-control/index.d.ts +6 -2
- package/build-types/unit-control/index.d.ts.map +1 -1
- package/build-types/unit-control/types.d.ts +5 -1
- package/build-types/unit-control/types.d.ts.map +1 -1
- package/build-types/utils/colors-values.d.ts +68 -148
- package/build-types/utils/colors-values.d.ts.map +1 -1
- package/build-types/utils/config-values.d.ts +71 -71
- package/build-types/utils/config-values.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +5 -3
- package/src/animate/README.md +1 -1
- package/src/base-control/README.md +11 -11
- package/src/base-control/index.tsx +124 -0
- package/src/base-control/stories/index.tsx +80 -0
- package/src/base-control/styles/{base-control-styles.js → base-control-styles.ts} +0 -0
- package/src/base-control/types.ts +42 -0
- package/src/border-box-control/border-box-control/README.md +178 -0
- package/src/border-box-control/border-box-control/component.tsx +123 -0
- package/src/border-box-control/border-box-control/hook.ts +119 -0
- package/src/border-box-control/border-box-control/index.ts +2 -0
- package/src/border-box-control/border-box-control-linked-button/component.tsx +50 -0
- package/src/border-box-control/border-box-control-linked-button/hook.ts +30 -0
- package/src/border-box-control/border-box-control-linked-button/index.ts +1 -0
- package/src/border-box-control/border-box-control-split-controls/component.tsx +90 -0
- package/src/border-box-control/border-box-control-split-controls/hook.ts +34 -0
- package/src/border-box-control/border-box-control-split-controls/index.ts +1 -0
- package/src/border-box-control/border-box-control-visualizer/component.tsx +28 -0
- package/src/border-box-control/border-box-control-visualizer/hook.ts +30 -0
- package/src/border-box-control/border-box-control-visualizer/index.ts +1 -0
- package/src/border-box-control/index.ts +3 -0
- package/src/border-box-control/stories/index.js +104 -0
- package/src/border-box-control/styles.ts +69 -0
- package/src/border-box-control/test/index.js +354 -0
- package/src/border-box-control/test/utils.js +305 -0
- package/src/border-box-control/types.ts +98 -0
- package/src/border-box-control/utils.ts +151 -0
- package/src/border-control/border-control/README.md +181 -0
- package/src/border-control/border-control/component.tsx +112 -0
- package/src/border-control/border-control/hook.ts +145 -0
- package/src/border-control/border-control/index.ts +2 -0
- package/src/border-control/border-control-dropdown/component.tsx +252 -0
- package/src/border-control/border-control-dropdown/hook.ts +98 -0
- package/src/border-control/border-control-dropdown/index.ts +1 -0
- package/src/border-control/border-control-style-picker/component.tsx +89 -0
- package/src/border-control/border-control-style-picker/hook.ts +34 -0
- package/src/border-control/border-control-style-picker/index.ts +1 -0
- package/src/border-control/index.ts +2 -0
- package/src/border-control/stories/index.js +118 -0
- package/src/border-control/styles.ts +190 -0
- package/src/border-control/test/index.js +436 -0
- package/src/border-control/types.ts +173 -0
- package/src/card/styles.js +11 -5
- package/src/card/test/__snapshots__/index.js.snap +83 -66
- package/src/card/test/index.js +7 -5
- package/src/color-palette/README.md +6 -0
- package/src/color-palette/stories/index.js +8 -1
- package/src/custom-select-control/index.js +7 -1
- package/src/custom-select-control/style.scss +5 -1
- package/src/disabled/README.md +7 -10
- package/src/flyout/test/__snapshots__/index.js.snap +7 -7
- package/src/form-toggle/README.md +1 -1
- package/src/guide/index.js +12 -13
- package/src/guide/style.scss +0 -4
- package/src/heading/hook.ts +1 -1
- package/src/heading/test/__snapshots__/index.js.snap +3 -3
- package/src/index.js +8 -0
- package/src/input-control/README.md +2 -2
- package/src/input-control/index.tsx +22 -3
- package/src/input-control/stories/index.tsx +63 -0
- package/src/input-control/styles/input-control-styles.tsx +1 -2
- package/src/input-control/types.ts +73 -2
- package/src/item-group/styles.ts +1 -0
- package/src/item-group/test/__snapshots__/index.js.snap +11 -10
- package/src/mobile/picker/index.android.js +0 -1
- package/src/navigation/styles/navigation-styles.js +5 -5
- package/src/notice/index.native.js +44 -54
- package/src/notice/list.native.js +27 -51
- package/src/notice/style.native.scss +1 -0
- package/src/palette-edit/index.js +8 -2
- package/src/query-controls/README.md +2 -2
- package/src/sandbox/index.js +2 -2
- package/src/select-control/styles/select-control-styles.ts +1 -1
- package/src/surface/styles.js +1 -1
- package/src/surface/test/__snapshots__/index.js.snap +11 -11
- package/src/text/hook.js +1 -1
- package/src/text/styles/text-mixins.native.js +2 -2
- package/src/text/styles.js +1 -1
- package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap} +16 -0
- package/src/text/test/{index.js → index.tsx} +12 -6
- package/src/toggle-group-control/index.ts +1 -0
- package/src/toggle-group-control/stories/index.js +37 -7
- package/src/toggle-group-control/test/__snapshots__/index.js.snap +269 -5
- package/src/toggle-group-control/test/index.js +43 -10
- package/src/toggle-group-control/toggle-group-control/component.tsx +10 -0
- package/src/toggle-group-control/toggle-group-control/styles.ts +14 -0
- package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx +86 -0
- package/src/toggle-group-control/toggle-group-control-option/README.md +8 -5
- package/src/toggle-group-control/toggle-group-control-option/component.tsx +18 -94
- package/src/toggle-group-control/toggle-group-control-option-base/README.md +27 -0
- package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +129 -0
- package/src/toggle-group-control/toggle-group-control-option-base/index.ts +1 -0
- package/src/toggle-group-control/{toggle-group-control-option → toggle-group-control-option-base}/styles.ts +4 -1
- package/src/toggle-group-control/toggle-group-control-option-icon/README.md +56 -0
- package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +56 -0
- package/src/toggle-group-control/toggle-group-control-option-icon/index.ts +1 -0
- package/src/toggle-group-control/types.ts +33 -8
- package/src/toolbar-dropdown-menu/index.js +1 -1
- package/src/toolbar-group/style.scss +20 -0
- package/src/tools-panel/test/__snapshots__/index.js.snap +9 -9
- package/src/ui/spinner/component.js +1 -1
- package/src/ui/spinner/test/__snapshots__/index.js.snap +3 -3
- package/src/unit-control/README.md +6 -0
- package/src/unit-control/index.tsx +6 -1
- package/src/unit-control/test/index.js +120 -0
- package/src/unit-control/types.ts +5 -1
- package/src/utils/colors-values.js +22 -25
- package/src/utils/config-values.js +9 -4
- package/tsconfig.json +11 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/guide/finish-button.js +0 -44
- package/build/guide/finish-button.js.map +0 -1
- package/build/toggle-group-control/toggle-group-control-option/styles.js +0 -66
- package/build/toggle-group-control/toggle-group-control-option/styles.js.map +0 -1
- package/build-module/guide/finish-button.js +0 -34
- package/build-module/guide/finish-button.js.map +0 -1
- package/build-module/toggle-group-control/toggle-group-control-option/styles.js +0 -55
- package/build-module/toggle-group-control/toggle-group-control-option/styles.js.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +0 -1
- package/src/base-control/index.js +0 -118
- package/src/base-control/stories/index.js +0 -81
- package/src/guide/finish-button.js +0 -26
- package/src/guide/test/finish-button.js +0 -49
- package/src/input-control/stories/index.js +0 -71
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/base-control/styles/base-control-styles.
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/base-control/styles/base-control-styles.ts"],"names":["Wrapper","deprecatedMarginField","__nextHasNoMarginBottom","css","StyledField","labelStyles","StyledLabel","deprecatedMarginHelp","StyledHelp","COLORS","mediumGray","text","StyledVisualLabel"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AACA;;;;AAEO,MAAMA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBACH,iBAAM,oBAAN,CADG,iBAEL,iBAAM,kBAAN,CAFK,ysEAAb;;;AAKP,MAAMC,qBAAqB,GAAG,SAA2C;AAAA,MAAzC;AAAEC,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACxE,SACC,CAAEA,uBAAF,qBACAC,UADA,oBAEmB,kBAAO,CAAP,CAFnB,uxEADD;AAMA,CAPD;;AASO,MAAMC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBH,qBADoB,6vEAAjB;;AAQP,MAAMI,WAAW,oBAAGF,UAAH,yCAEE,kBAAO,CAAP,CAFF,ixEAAjB;AAKO,MAAMG,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBD,WADoB,6sEAAjB;;;;;;;;;;;;;AAIP,MAAME,oBAAoB,GAAG,SAA2C;AAAA,MAAzC;AAAEL,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACvE,SACC,CAAEA,uBAAF,QADD;AAMA,CAPD;;AASO,MAAMM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kBACP,kBAAO,CAAP,CADO,iCAGR,iBAAM,mBAAN,CAHQ,+BAKZC,cAAOC,UAAP,CAAkBC,IALN,OAOnBJ,oBAPmB,6sEAAhB;;AAUA,MAAMK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,GAC1BP,WAD0B,6sEAAvB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { font, COLORS } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nexport const Wrapper = styled.div`\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tfont-size: ${ font( 'default.fontSize' ) };\n`;\n\nconst deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: ${ space( 2 ) };\n\t\t`\n\t);\n};\n\nexport const StyledField = styled.div`\n\t${ deprecatedMarginField }\n\n\t.components-panel__row & {\n\t\tmargin-bottom: inherit;\n\t}\n`;\n\nconst labelStyles = css`\n\tdisplay: inline-block;\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const StyledLabel = styled.label`\n\t${ labelStyles }\n`;\n\nconst deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: revert;\n\t\t`\n\t);\n};\n\nexport const StyledHelp = styled.p`\n\tmargin-top: ${ space( 2 ) };\n\tmargin-bottom: 0;\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tfont-style: normal;\n\tcolor: ${ COLORS.mediumGray.text };\n\n\t${ deprecatedMarginHelp }\n`;\n\nexport const StyledVisualLabel = styled.span`\n\t${ labelStyles }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _element = require("@wordpress/element");
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _i18n = require("@wordpress/i18n");
|
|
15
|
+
|
|
16
|
+
var _borderBoxControlLinkedButton = _interopRequireDefault(require("../border-box-control-linked-button"));
|
|
17
|
+
|
|
18
|
+
var _borderBoxControlSplitControls = _interopRequireDefault(require("../border-box-control-split-controls"));
|
|
19
|
+
|
|
20
|
+
var _borderControl = require("../../border-control");
|
|
21
|
+
|
|
22
|
+
var _hStack = require("../../h-stack");
|
|
23
|
+
|
|
24
|
+
var _baseControlStyles = require("../../base-control/styles/base-control-styles");
|
|
25
|
+
|
|
26
|
+
var _view = require("../../view");
|
|
27
|
+
|
|
28
|
+
var _visuallyHidden = require("../../visually-hidden");
|
|
29
|
+
|
|
30
|
+
var _context = require("../../ui/context");
|
|
31
|
+
|
|
32
|
+
var _hook = require("./hook");
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* WordPress dependencies
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Internal dependencies
|
|
40
|
+
*/
|
|
41
|
+
const BorderLabel = props => {
|
|
42
|
+
const {
|
|
43
|
+
label,
|
|
44
|
+
hideLabelFromVision
|
|
45
|
+
} = props;
|
|
46
|
+
|
|
47
|
+
if (!label) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
|
|
52
|
+
as: "label"
|
|
53
|
+
}, label) : (0, _element.createElement)(_baseControlStyles.StyledLabel, null, label);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const BorderBoxControl = (props, forwardedRef) => {
|
|
57
|
+
const {
|
|
58
|
+
className,
|
|
59
|
+
colors,
|
|
60
|
+
disableCustomColors,
|
|
61
|
+
enableAlpha,
|
|
62
|
+
enableStyle,
|
|
63
|
+
hasMixedBorders,
|
|
64
|
+
hideLabelFromVision,
|
|
65
|
+
isLinked,
|
|
66
|
+
label,
|
|
67
|
+
linkedControlClassName,
|
|
68
|
+
linkedValue,
|
|
69
|
+
onLinkedChange,
|
|
70
|
+
onSplitChange,
|
|
71
|
+
popoverClassNames,
|
|
72
|
+
splitValue,
|
|
73
|
+
toggleLinked,
|
|
74
|
+
__experimentalHasMultipleOrigins,
|
|
75
|
+
__experimentalIsRenderedInSidebar,
|
|
76
|
+
...otherProps
|
|
77
|
+
} = (0, _hook.useBorderBoxControl)(props);
|
|
78
|
+
return (0, _element.createElement)(_view.View, (0, _extends2.default)({
|
|
79
|
+
className: className
|
|
80
|
+
}, otherProps, {
|
|
81
|
+
ref: forwardedRef
|
|
82
|
+
}), (0, _element.createElement)(BorderLabel, {
|
|
83
|
+
label: label,
|
|
84
|
+
hideLabelFromVision: hideLabelFromVision
|
|
85
|
+
}), (0, _element.createElement)(_hStack.HStack, {
|
|
86
|
+
alignment: 'start',
|
|
87
|
+
expanded: true,
|
|
88
|
+
spacing: 0
|
|
89
|
+
}, isLinked ? (0, _element.createElement)(_borderControl.BorderControl, {
|
|
90
|
+
className: linkedControlClassName,
|
|
91
|
+
colors: colors,
|
|
92
|
+
disableCustomColors: disableCustomColors,
|
|
93
|
+
enableAlpha: enableAlpha,
|
|
94
|
+
enableStyle: enableStyle,
|
|
95
|
+
onChange: onLinkedChange,
|
|
96
|
+
placeholder: hasMixedBorders ? (0, _i18n.__)('Mixed') : undefined,
|
|
97
|
+
popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.linked,
|
|
98
|
+
shouldSanitizeBorder: false // This component will handle that.
|
|
99
|
+
,
|
|
100
|
+
value: linkedValue,
|
|
101
|
+
withSlider: true,
|
|
102
|
+
width: '110px',
|
|
103
|
+
__experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
|
|
104
|
+
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
|
|
105
|
+
}) : (0, _element.createElement)(_borderBoxControlSplitControls.default, {
|
|
106
|
+
colors: colors,
|
|
107
|
+
disableCustomColors: disableCustomColors,
|
|
108
|
+
enableAlpha: enableAlpha,
|
|
109
|
+
enableStyle: enableStyle,
|
|
110
|
+
onChange: onSplitChange,
|
|
111
|
+
popoverClassNames: popoverClassNames,
|
|
112
|
+
value: splitValue,
|
|
113
|
+
__experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
|
|
114
|
+
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
|
|
115
|
+
}), (0, _element.createElement)(_borderBoxControlLinkedButton.default, {
|
|
116
|
+
onClick: toggleLinked,
|
|
117
|
+
isLinked: isLinked
|
|
118
|
+
})));
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
const ConnectedBorderBoxControl = (0, _context.contextConnect)(BorderBoxControl, 'BorderBoxControl');
|
|
122
|
+
var _default = ConnectedBorderBoxControl;
|
|
123
|
+
exports.default = _default;
|
|
124
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","BorderBoxControl","forwardedRef","className","colors","disableCustomColors","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverClassNames","splitValue","toggleLinked","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","undefined","linked","ConnectedBorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type { LabelProps } from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverClassNames,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tpopoverContentClassName={ popoverClassNames?.linked }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={ '110px' }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverClassNames={ popoverClassNames }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderBoxControl = contextConnect(\n\tBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default ConnectedBorderBoxControl;\n"]}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useBorderBoxControl = useBorderBoxControl;
|
|
7
|
+
|
|
8
|
+
var _element = require("@wordpress/element");
|
|
9
|
+
|
|
10
|
+
var styles = _interopRequireWildcard(require("../styles"));
|
|
11
|
+
|
|
12
|
+
var _utils = require("../utils");
|
|
13
|
+
|
|
14
|
+
var _context = require("../../ui/context");
|
|
15
|
+
|
|
16
|
+
var _useCx = require("../../utils/hooks/use-cx");
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* WordPress dependencies
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Internal dependencies
|
|
28
|
+
*/
|
|
29
|
+
function useBorderBoxControl(props) {
|
|
30
|
+
const {
|
|
31
|
+
className,
|
|
32
|
+
onChange,
|
|
33
|
+
value,
|
|
34
|
+
...otherProps
|
|
35
|
+
} = (0, _context.useContextSystem)(props, 'BorderBoxControl');
|
|
36
|
+
const mixedBorders = (0, _utils.hasMixedBorders)(value);
|
|
37
|
+
const splitBorders = (0, _utils.hasSplitBorders)(value);
|
|
38
|
+
const linkedValue = splitBorders ? (0, _utils.getCommonBorder)(value) : value;
|
|
39
|
+
const splitValue = splitBorders ? value : (0, _utils.getSplitBorders)(value);
|
|
40
|
+
const [isLinked, setIsLinked] = (0, _element.useState)(!mixedBorders);
|
|
41
|
+
|
|
42
|
+
const toggleLinked = () => setIsLinked(!isLinked);
|
|
43
|
+
|
|
44
|
+
const onLinkedChange = newBorder => {
|
|
45
|
+
if (!newBorder) {
|
|
46
|
+
return onChange(undefined);
|
|
47
|
+
} // If we have all props defined on the new border apply it.
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
if (!mixedBorders || (0, _utils.isCompleteBorder)(newBorder)) {
|
|
51
|
+
return onChange((0, _utils.isEmptyBorder)(newBorder) ? undefined : newBorder);
|
|
52
|
+
} // If we had mixed borders we might have had some shared border props
|
|
53
|
+
// that we need to maintain. For example; we could have mixed borders
|
|
54
|
+
// with all the same color but different widths. Then from the linked
|
|
55
|
+
// control we change the color. We should keep the separate widths.
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
const changes = (0, _utils.getBorderDiff)(linkedValue, newBorder);
|
|
59
|
+
const updatedBorders = {
|
|
60
|
+
top: { ...(value === null || value === void 0 ? void 0 : value.top),
|
|
61
|
+
...changes
|
|
62
|
+
},
|
|
63
|
+
right: { ...(value === null || value === void 0 ? void 0 : value.right),
|
|
64
|
+
...changes
|
|
65
|
+
},
|
|
66
|
+
bottom: { ...(value === null || value === void 0 ? void 0 : value.bottom),
|
|
67
|
+
...changes
|
|
68
|
+
},
|
|
69
|
+
left: { ...(value === null || value === void 0 ? void 0 : value.left),
|
|
70
|
+
...changes
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
if ((0, _utils.hasMixedBorders)(updatedBorders)) {
|
|
75
|
+
return onChange(updatedBorders);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const filteredResult = (0, _utils.isEmptyBorder)(updatedBorders.top) ? undefined : updatedBorders.top;
|
|
79
|
+
onChange(filteredResult);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const onSplitChange = (newBorder, side) => {
|
|
83
|
+
const updatedBorders = { ...splitValue,
|
|
84
|
+
[side]: newBorder
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
if ((0, _utils.hasMixedBorders)(updatedBorders)) {
|
|
88
|
+
onChange(updatedBorders);
|
|
89
|
+
} else {
|
|
90
|
+
onChange(newBorder);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const cx = (0, _useCx.useCx)();
|
|
95
|
+
const classes = (0, _element.useMemo)(() => {
|
|
96
|
+
return cx(styles.BorderBoxControl, className);
|
|
97
|
+
}, [className]);
|
|
98
|
+
const linkedControlClassName = (0, _element.useMemo)(() => {
|
|
99
|
+
return cx(styles.LinkedBorderControl);
|
|
100
|
+
}, []);
|
|
101
|
+
return { ...otherProps,
|
|
102
|
+
className: classes,
|
|
103
|
+
hasMixedBorders: mixedBorders,
|
|
104
|
+
isLinked,
|
|
105
|
+
linkedControlClassName,
|
|
106
|
+
onLinkedChange,
|
|
107
|
+
onSplitChange,
|
|
108
|
+
toggleLinked,
|
|
109
|
+
linkedValue,
|
|
110
|
+
splitValue
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
//# sourceMappingURL=hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","styles","BorderBoxControl","linkedControlClassName","LinkedBorderControl","hasMixedBorders"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "BorderBoxControl", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _component.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "useBorderBoxControl", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () {
|
|
17
|
+
return _hook.useBorderBoxControl;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
var _component = _interopRequireDefault(require("./component"));
|
|
22
|
+
|
|
23
|
+
var _hook = require("./hook");
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as BorderBoxControl } from './component';\nexport { useBorderBoxControl } from './hook';\n"]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _element = require("@wordpress/element");
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _icons = require("@wordpress/icons");
|
|
15
|
+
|
|
16
|
+
var _i18n = require("@wordpress/i18n");
|
|
17
|
+
|
|
18
|
+
var _button = _interopRequireDefault(require("../../button"));
|
|
19
|
+
|
|
20
|
+
var _tooltip = _interopRequireDefault(require("../../tooltip"));
|
|
21
|
+
|
|
22
|
+
var _view = require("../../view");
|
|
23
|
+
|
|
24
|
+
var _context = require("../../ui/context");
|
|
25
|
+
|
|
26
|
+
var _hook = require("./hook");
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* WordPress dependencies
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Internal dependencies
|
|
34
|
+
*/
|
|
35
|
+
const BorderBoxControlLinkedButton = (props, forwardedRef) => {
|
|
36
|
+
const {
|
|
37
|
+
className,
|
|
38
|
+
isLinked,
|
|
39
|
+
...buttonProps
|
|
40
|
+
} = (0, _hook.useBorderBoxControlLinkedButton)(props);
|
|
41
|
+
const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
|
|
42
|
+
return (0, _element.createElement)(_tooltip.default, {
|
|
43
|
+
text: label
|
|
44
|
+
}, (0, _element.createElement)(_view.View, {
|
|
45
|
+
className: className
|
|
46
|
+
}, (0, _element.createElement)(_button.default, (0, _extends2.default)({}, buttonProps, {
|
|
47
|
+
variant: isLinked ? 'primary' : 'secondary',
|
|
48
|
+
isSmall: true,
|
|
49
|
+
icon: isLinked ? _icons.link : _icons.linkOff,
|
|
50
|
+
iconSize: 16,
|
|
51
|
+
"aria-label": label,
|
|
52
|
+
ref: forwardedRef
|
|
53
|
+
}))));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const ConnectedBorderBoxControlLinkedButton = (0, _context.contextConnect)(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
|
|
57
|
+
var _default = ConnectedBorderBoxControlLinkedButton;
|
|
58
|
+
exports.default = _default;
|
|
59
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","link","linkOff","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGL,OAAGC;AAHE,MAIF,2CAAiCJ,KAAjC,CAJJ;AAKA,QAAMK,KAAK,GAAGF,QAAQ,GAAG,cAAI,cAAJ,CAAH,GAA0B,cAAI,YAAJ,CAAhD;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,4BAAC,eAAD,6BACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGG,WAAH,GAAUC,cAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaF,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CA1BD;;AA4BA,MAAMO,qCAAqC,GAAG,6BAC7CT,4BAD6C,EAE7C,8BAF6C,CAA9C;eAIeS,qC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tisLinked,\n\t\t...buttonProps\n\t} = useBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useBorderBoxControlLinkedButton = useBorderBoxControlLinkedButton;
|
|
7
|
+
|
|
8
|
+
var _element = require("@wordpress/element");
|
|
9
|
+
|
|
10
|
+
var styles = _interopRequireWildcard(require("../styles"));
|
|
11
|
+
|
|
12
|
+
var _context = require("../../ui/context");
|
|
13
|
+
|
|
14
|
+
var _useCx = require("../../utils/hooks/use-cx");
|
|
15
|
+
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* WordPress dependencies
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Internal dependencies
|
|
26
|
+
*/
|
|
27
|
+
function useBorderBoxControlLinkedButton(props) {
|
|
28
|
+
const {
|
|
29
|
+
className,
|
|
30
|
+
...otherProps
|
|
31
|
+
} = (0, _context.useContextSystem)(props, 'BorderBoxControlLinkedButton'); // Generate class names.
|
|
32
|
+
|
|
33
|
+
const cx = (0, _useCx.useCx)();
|
|
34
|
+
const classes = (0, _element.useMemo)(() => {
|
|
35
|
+
return cx(styles.BorderBoxControlLinkedButton, className);
|
|
36
|
+
}, [className]);
|
|
37
|
+
return { ...otherProps,
|
|
38
|
+
className: classes
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useBorderBoxControlLinkedButton","props","className","otherProps","cx","classes","styles","BorderBoxControlLinkedButton"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,+BACpCF,KADoC,EAEpC,8BAFoC,CAArC,CADC,CAMD;;AACA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,4BAAT,EAAuCL,SAAvC,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,CAFa,CAAhB;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBD,IAAAA,SAAS,EAAEG;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlLinkedButton'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlLinkedButton, className );\n\t}, [ className ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _component.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _component = _interopRequireDefault(require("./component"));
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './component';\n"]}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _element = require("@wordpress/element");
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _i18n = require("@wordpress/i18n");
|
|
15
|
+
|
|
16
|
+
var _borderBoxControlVisualizer = _interopRequireDefault(require("../border-box-control-visualizer"));
|
|
17
|
+
|
|
18
|
+
var _borderControl = require("../../border-control");
|
|
19
|
+
|
|
20
|
+
var _grid = require("../../grid");
|
|
21
|
+
|
|
22
|
+
var _context = require("../../ui/context");
|
|
23
|
+
|
|
24
|
+
var _hook = require("./hook");
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* WordPress dependencies
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Internal dependencies
|
|
32
|
+
*/
|
|
33
|
+
const BorderBoxControlSplitControls = (props, forwardedRef) => {
|
|
34
|
+
const {
|
|
35
|
+
centeredClassName,
|
|
36
|
+
colors,
|
|
37
|
+
disableCustomColors,
|
|
38
|
+
enableAlpha,
|
|
39
|
+
enableStyle,
|
|
40
|
+
onChange,
|
|
41
|
+
popoverClassNames,
|
|
42
|
+
value,
|
|
43
|
+
__experimentalHasMultipleOrigins,
|
|
44
|
+
__experimentalIsRenderedInSidebar,
|
|
45
|
+
...otherProps
|
|
46
|
+
} = (0, _hook.useBorderBoxControlSplitControls)(props);
|
|
47
|
+
const sharedBorderControlProps = {
|
|
48
|
+
colors,
|
|
49
|
+
disableCustomColors,
|
|
50
|
+
enableAlpha,
|
|
51
|
+
enableStyle,
|
|
52
|
+
isCompact: true,
|
|
53
|
+
__experimentalHasMultipleOrigins,
|
|
54
|
+
__experimentalIsRenderedInSidebar
|
|
55
|
+
};
|
|
56
|
+
return (0, _element.createElement)(_grid.Grid, (0, _extends2.default)({}, otherProps, {
|
|
57
|
+
ref: forwardedRef,
|
|
58
|
+
gap: 4
|
|
59
|
+
}), (0, _element.createElement)(_borderBoxControlVisualizer.default, {
|
|
60
|
+
value: value
|
|
61
|
+
}), (0, _element.createElement)(_borderControl.BorderControl, (0, _extends2.default)({
|
|
62
|
+
className: centeredClassName,
|
|
63
|
+
hideLabelFromVision: true,
|
|
64
|
+
label: (0, _i18n.__)('Top border'),
|
|
65
|
+
onChange: newBorder => onChange(newBorder, 'top'),
|
|
66
|
+
popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.top,
|
|
67
|
+
value: value === null || value === void 0 ? void 0 : value.top
|
|
68
|
+
}, sharedBorderControlProps)), (0, _element.createElement)(_borderControl.BorderControl, (0, _extends2.default)({
|
|
69
|
+
hideLabelFromVision: true,
|
|
70
|
+
label: (0, _i18n.__)('Left border'),
|
|
71
|
+
onChange: newBorder => onChange(newBorder, 'left'),
|
|
72
|
+
popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.left,
|
|
73
|
+
value: value === null || value === void 0 ? void 0 : value.left
|
|
74
|
+
}, sharedBorderControlProps)), (0, _element.createElement)(_borderControl.BorderControl, (0, _extends2.default)({
|
|
75
|
+
hideLabelFromVision: true,
|
|
76
|
+
label: (0, _i18n.__)('Right border'),
|
|
77
|
+
onChange: newBorder => onChange(newBorder, 'right'),
|
|
78
|
+
popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.right,
|
|
79
|
+
value: value === null || value === void 0 ? void 0 : value.right
|
|
80
|
+
}, sharedBorderControlProps)), (0, _element.createElement)(_borderControl.BorderControl, (0, _extends2.default)({
|
|
81
|
+
className: centeredClassName,
|
|
82
|
+
hideLabelFromVision: true,
|
|
83
|
+
label: (0, _i18n.__)('Bottom border'),
|
|
84
|
+
onChange: newBorder => onChange(newBorder, 'bottom'),
|
|
85
|
+
popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.bottom,
|
|
86
|
+
value: value === null || value === void 0 ? void 0 : value.bottom
|
|
87
|
+
}, sharedBorderControlProps)));
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const ConnectedBorderBoxControlSplitControls = (0, _context.contextConnect)(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
|
|
91
|
+
var _default = ConnectedBorderBoxControlSplitControls;
|
|
92
|
+
exports.default = _default;
|
|
93
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverClassNames","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AASA,MAAMA,6BAA6B,GAAG,CACrCC,KADqC,EAErCC,YAFqC,KAGjC;AACJ,QAAM;AACLC,IAAAA,iBADK;AAELC,IAAAA,MAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,WAJK;AAKLC,IAAAA,WALK;AAMLC,IAAAA,QANK;AAOLC,IAAAA,iBAPK;AAQLC,IAAAA,KARK;AASLC,IAAAA,gCATK;AAULC,IAAAA,iCAVK;AAWL,OAAGC;AAXE,MAYF,4CAAkCZ,KAAlC,CAZJ;AAcA,QAAMa,wBAAwB,GAAG;AAChCV,IAAAA,MADgC;AAEhCC,IAAAA,mBAFgC;AAGhCC,IAAAA,WAHgC;AAIhCC,IAAAA,WAJgC;AAKhCQ,IAAAA,SAAS,EAAE,IALqB;AAMhCJ,IAAAA,gCANgC;AAOhCC,IAAAA;AAPgC,GAAjC;AAUA,SACC,4BAAC,UAAD,6BAAWC,UAAX;AAAwB,IAAA,GAAG,EAAGX,YAA9B;AAA6C,IAAA,GAAG,EAAG;AAAnD,MACC,4BAAC,mCAAD;AAA4B,IAAA,KAAK,EAAGQ;AAApC,IADD,EAEC,4BAAC,4BAAD;AACC,IAAA,SAAS,EAAGP,iBADb;AAEC,IAAA,mBAAmB,EAAG,IAFvB;AAGC,IAAA,KAAK,EAAG,cAAI,YAAJ,CAHT;AAIC,IAAA,QAAQ,EAAKa,SAAF,IAAiBR,QAAQ,CAAEQ,SAAF,EAAa,KAAb,CAJrC;AAKC,IAAA,uBAAuB,EAAGP,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEQ,GAL9C;AAMC,IAAA,KAAK,EAAGP,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEO;AANhB,KAOMH,wBAPN,EAFD,EAWC,4BAAC,4BAAD;AACC,IAAA,mBAAmB,EAAG,IADvB;AAEC,IAAA,KAAK,EAAG,cAAI,aAAJ,CAFT;AAGC,IAAA,QAAQ,EAAKE,SAAF,IAAiBR,QAAQ,CAAEQ,SAAF,EAAa,MAAb,CAHrC;AAIC,IAAA,uBAAuB,EAAGP,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAES,IAJ9C;AAKC,IAAA,KAAK,EAAGR,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEQ;AALhB,KAMMJ,wBANN,EAXD,EAmBC,4BAAC,4BAAD;AACC,IAAA,mBAAmB,EAAG,IADvB;AAEC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,IAAA,QAAQ,EAAKE,SAAF,IAAiBR,QAAQ,CAAEQ,SAAF,EAAa,OAAb,CAHrC;AAIC,IAAA,uBAAuB,EAAGP,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEU,KAJ9C;AAKC,IAAA,KAAK,EAAGT,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAES;AALhB,KAMML,wBANN,EAnBD,EA2BC,4BAAC,4BAAD;AACC,IAAA,SAAS,EAAGX,iBADb;AAEC,IAAA,mBAAmB,EAAG,IAFvB;AAGC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAHT;AAIC,IAAA,QAAQ,EAAKa,SAAF,IAAiBR,QAAQ,CAAEQ,SAAF,EAAa,QAAb,CAJrC;AAKC,IAAA,uBAAuB,EAAGP,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEW,MAL9C;AAMC,IAAA,KAAK,EAAGV,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEU;AANhB,KAOMN,wBAPN,EA3BD,CADD;AAuCA,CAnED;;AAqEA,MAAMO,sCAAsC,GAAG,6BAC9CrB,6BAD8C,EAE9C,+BAF8C,CAA/C;eAIeqB,sC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverClassNames,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.top }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.left }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.right }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.bottom }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useBorderBoxControlSplitControls = useBorderBoxControlSplitControls;
|
|
7
|
+
|
|
8
|
+
var _element = require("@wordpress/element");
|
|
9
|
+
|
|
10
|
+
var styles = _interopRequireWildcard(require("../styles"));
|
|
11
|
+
|
|
12
|
+
var _context = require("../../ui/context");
|
|
13
|
+
|
|
14
|
+
var _utils = require("../../utils/");
|
|
15
|
+
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* WordPress dependencies
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Internal dependencies
|
|
26
|
+
*/
|
|
27
|
+
function useBorderBoxControlSplitControls(props) {
|
|
28
|
+
const {
|
|
29
|
+
className,
|
|
30
|
+
...otherProps
|
|
31
|
+
} = (0, _context.useContextSystem)(props, 'BorderBoxControlSplitControls'); // Generate class names.
|
|
32
|
+
|
|
33
|
+
const cx = (0, _utils.useCx)();
|
|
34
|
+
const classes = (0, _element.useMemo)(() => {
|
|
35
|
+
return cx(styles.BorderBoxControlSplitControls, className);
|
|
36
|
+
}, [className, _utils.rtl.watch()]);
|
|
37
|
+
const centeredClassName = (0, _element.useMemo)(() => {
|
|
38
|
+
return cx(styles.CenteredBorderControl, className);
|
|
39
|
+
}, []);
|
|
40
|
+
return { ...otherProps,
|
|
41
|
+
centeredClassName,
|
|
42
|
+
className: classes
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useBorderBoxControlSplitControls","props","className","otherProps","cx","classes","styles","BorderBoxControlSplitControls","rtl","watch","centeredClassName","CenteredBorderControl"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,+BACpCF,KADoC,EAEpC,+BAFoC,CAArC,CADC,CAMD;;AACA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,6BAAT,EAAwCL,SAAxC,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAaM,WAAIC,KAAJ,EAAb,CAFa,CAAhB;AAIA,QAAMC,iBAAiB,GAAG,sBAAS,MAAM;AACxC,WAAON,EAAE,CAAEE,MAAM,CAACK,qBAAT,EAAgCT,SAAhC,CAAT;AACA,GAFyB,EAEvB,EAFuB,CAA1B;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBO,IAAAA,iBAAjB;AAAoCR,IAAAA,SAAS,EAAEG;AAA/C,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlSplitControls, className );\n\t}, [ className, rtl.watch() ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [] );\n\n\treturn { ...otherProps, centeredClassName, className: classes };\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _component.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _component = _interopRequireDefault(require("./component"));
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './component';\n"]}
|