@wordpress/components 19.11.0 → 19.12.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 +36 -0
- package/README.md +1 -1
- package/build/alignment-matrix-control/index.js +5 -2
- package/build/alignment-matrix-control/index.js.map +1 -1
- package/build/autocomplete/autocompleter-ui.js +1 -1
- package/build/autocomplete/autocompleter-ui.js.map +1 -1
- package/build/autocomplete/autocompleter-ui.native.js +2 -2
- package/build/autocomplete/autocompleter-ui.native.js.map +1 -1
- package/build/autocomplete/index.js +12 -10
- package/build/autocomplete/index.js.map +1 -1
- package/build/border-box-control/border-box-control/hook.js +2 -2
- package/build/border-box-control/border-box-control/hook.js.map +1 -1
- package/build/border-box-control/border-box-control-split-controls/component.js +2 -0
- package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build/border-box-control/border-box-control-split-controls/hook.js +13 -4
- package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
- package/build/border-box-control/border-box-control-visualizer/hook.js +6 -2
- package/build/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
- package/build/border-box-control/styles.js +21 -11
- package/build/border-box-control/styles.js.map +1 -1
- package/build/border-control/border-control/hook.js +2 -2
- package/build/border-control/border-control/hook.js.map +1 -1
- package/build/color-palette/index.js +9 -2
- package/build/color-palette/index.js.map +1 -1
- package/build/color-palette/index.native.js +4 -1
- package/build/color-palette/index.native.js.map +1 -1
- package/build/color-picker/color-copy-button.js +87 -0
- package/build/color-picker/color-copy-button.js.map +1 -0
- package/build/color-picker/component.js +5 -15
- package/build/color-picker/component.js.map +1 -1
- package/build/color-picker/hex-input.js +18 -1
- package/build/color-picker/hex-input.js.map +1 -1
- package/build/color-picker/styles.js +11 -11
- package/build/color-picker/styles.js.map +1 -1
- package/build/custom-gradient-picker/utils.js +1 -1
- package/build/custom-gradient-picker/utils.js.map +1 -1
- package/build/date-time/{date.js → date/index.js} +51 -12
- package/build/date-time/date/index.js.map +1 -0
- package/build/date-time/date/styles.js +70 -0
- package/build/date-time/date/styles.js.map +1 -0
- package/build/date-time/{utils.js → date/utils.js} +0 -0
- package/build/date-time/date/utils.js.map +1 -0
- package/build/date-time/date-time/index.js +175 -0
- package/build/date-time/date-time/index.js.map +1 -0
- package/build/date-time/date-time/styles.js +32 -0
- package/build/date-time/date-time/styles.js.map +1 -0
- package/build/date-time/index.js +2 -109
- package/build/date-time/index.js.map +1 -1
- package/build/date-time/time/index.js +322 -0
- package/build/date-time/time/index.js.map +1 -0
- package/build/date-time/time/styles.js +139 -0
- package/build/date-time/time/styles.js.map +1 -0
- package/build/date-time/{timezone.js → time/timezone.js} +4 -2
- package/build/date-time/time/timezone.js.map +1 -0
- package/build/draggable/index.native.js +10 -5
- package/build/draggable/index.native.js.map +1 -1
- package/build/dropdown/index.js +4 -1
- package/build/dropdown/index.js.map +1 -1
- package/build/input-control/index.js +9 -4
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/input-field.js +1 -26
- package/build/input-control/input-field.js.map +1 -1
- package/build/input-control/reducer/reducer.js +36 -24
- package/build/input-control/reducer/reducer.js.map +1 -1
- package/build/input-control/reducer/state.js +0 -1
- package/build/input-control/reducer/state.js.map +1 -1
- package/build/input-control/utils.js +45 -0
- package/build/input-control/utils.js.map +1 -1
- package/build/popover/index.js +40 -33
- package/build/popover/index.js.map +1 -1
- package/build/search-control/index.js +4 -6
- package/build/search-control/index.js.map +1 -1
- package/build/select-control/index.js +3 -1
- package/build/select-control/index.js.map +1 -1
- package/build/spacer/hook.js +11 -3
- package/build/spacer/hook.js.map +1 -1
- package/build/surface/component.js +7 -7
- package/build/surface/component.js.map +1 -1
- package/build/surface/hook.js +8 -11
- package/build/surface/hook.js.map +1 -1
- package/build/surface/index.js.map +1 -1
- package/build/surface/styles.js +8 -48
- package/build/surface/styles.js.map +1 -1
- package/build/textarea-control/index.js +40 -6
- package/build/textarea-control/index.js.map +1 -1
- package/build/textarea-control/styles/textarea-control-styles.js +3 -3
- package/build/textarea-control/styles/textarea-control-styles.js.map +1 -1
- package/build/textarea-control/types.js +6 -0
- package/build/textarea-control/types.js.map +1 -0
- package/build/utils/hooks/index.js +0 -8
- package/build/utils/hooks/index.js.map +1 -1
- package/build-module/alignment-matrix-control/index.js +5 -2
- package/build-module/alignment-matrix-control/index.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.js +1 -1
- package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
- package/build-module/autocomplete/autocompleter-ui.native.js +2 -2
- package/build-module/autocomplete/autocompleter-ui.native.js.map +1 -1
- package/build-module/autocomplete/index.js +13 -11
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/border-box-control/border-box-control/hook.js +2 -2
- package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/component.js +2 -0
- package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/hook.js +11 -4
- package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
- package/build-module/border-box-control/border-box-control-visualizer/hook.js +4 -2
- package/build-module/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
- package/build-module/border-box-control/styles.js +13 -8
- package/build-module/border-box-control/styles.js.map +1 -1
- package/build-module/border-control/border-control/hook.js +2 -2
- package/build-module/border-control/border-control/hook.js.map +1 -1
- package/build-module/color-palette/index.js +7 -5
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-palette/index.native.js +4 -1
- package/build-module/color-palette/index.native.js.map +1 -1
- package/build-module/color-picker/color-copy-button.js +73 -0
- package/build-module/color-picker/color-copy-button.js.map +1 -0
- package/build-module/color-picker/component.js +6 -15
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/hex-input.js +18 -1
- package/build-module/color-picker/hex-input.js.map +1 -1
- package/build-module/color-picker/styles.js +9 -9
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/custom-gradient-picker/utils.js +1 -1
- package/build-module/custom-gradient-picker/utils.js.map +1 -1
- package/build-module/date-time/{date.js → date/index.js} +46 -14
- package/build-module/date-time/date/index.js.map +1 -0
- package/build-module/date-time/date/styles.js +61 -0
- package/build-module/date-time/date/styles.js.map +1 -0
- package/build-module/date-time/{utils.js → date/utils.js} +0 -0
- package/build-module/date-time/date/utils.js.map +1 -0
- package/build-module/date-time/date-time/index.js +144 -0
- package/build-module/date-time/date-time/index.js.map +1 -0
- package/build-module/date-time/date-time/styles.js +22 -0
- package/build-module/date-time/date-time/styles.js.map +1 -0
- package/build-module/date-time/index.js +1 -105
- package/build-module/date-time/index.js.map +1 -1
- package/build-module/date-time/time/index.js +302 -0
- package/build-module/date-time/time/index.js.map +1 -0
- package/build-module/date-time/time/styles.js +118 -0
- package/build-module/date-time/time/styles.js.map +1 -0
- package/build-module/date-time/{timezone.js → time/timezone.js} +3 -2
- package/build-module/date-time/time/timezone.js.map +1 -0
- package/build-module/draggable/index.native.js +10 -5
- package/build-module/draggable/index.native.js.map +1 -1
- package/build-module/dropdown/index.js +4 -1
- package/build-module/dropdown/index.js.map +1 -1
- package/build-module/input-control/index.js +8 -4
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/input-field.js +1 -25
- package/build-module/input-control/input-field.js.map +1 -1
- package/build-module/input-control/reducer/reducer.js +38 -26
- package/build-module/input-control/reducer/reducer.js.map +1 -1
- package/build-module/input-control/reducer/state.js +0 -1
- package/build-module/input-control/reducer/state.js.map +1 -1
- package/build-module/input-control/utils.js +48 -2
- package/build-module/input-control/utils.js.map +1 -1
- package/build-module/popover/index.js +40 -33
- package/build-module/popover/index.js.map +1 -1
- package/build-module/search-control/index.js +6 -7
- package/build-module/search-control/index.js.map +1 -1
- package/build-module/select-control/index.js +3 -1
- package/build-module/select-control/index.js.map +1 -1
- package/build-module/spacer/hook.js +10 -2
- package/build-module/spacer/hook.js.map +1 -1
- package/build-module/surface/component.js +7 -7
- package/build-module/surface/component.js.map +1 -1
- package/build-module/surface/hook.js +8 -11
- package/build-module/surface/hook.js.map +1 -1
- package/build-module/surface/index.js.map +1 -1
- package/build-module/surface/styles.js +8 -48
- package/build-module/surface/styles.js.map +1 -1
- package/build-module/textarea-control/index.js +36 -5
- package/build-module/textarea-control/index.js.map +1 -1
- package/build-module/textarea-control/styles/textarea-control-styles.js +3 -3
- package/build-module/textarea-control/styles/textarea-control-styles.js.map +1 -1
- package/build-module/textarea-control/types.js +2 -0
- package/build-module/textarea-control/types.js.map +1 -0
- package/build-module/utils/hooks/index.js +0 -1
- package/build-module/utils/hooks/index.js.map +1 -1
- package/build-style/style-rtl.css +13 -188
- package/build-style/style.css +13 -191
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +1 -0
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -1
- package/build-types/border-box-control/styles.d.ts +3 -2
- package/build-types/border-box-control/styles.d.ts.map +1 -1
- package/build-types/border-control/border-control/hook.d.ts.map +1 -1
- package/build-types/card/types.d.ts +1 -1
- package/build-types/card/types.d.ts.map +1 -1
- package/build-types/checkbox-control/test/index.d.ts +2 -0
- package/build-types/checkbox-control/test/index.d.ts.map +1 -0
- package/build-types/color-palette/index.d.ts +1 -0
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/{date-time → color-palette}/test/utils.d.ts +0 -0
- package/build-types/color-palette/test/utils.d.ts.map +1 -0
- package/build-types/color-picker/color-copy-button.d.ts +4 -0
- package/build-types/color-picker/color-copy-button.d.ts.map +1 -0
- package/build-types/color-picker/component.d.ts.map +1 -1
- package/build-types/color-picker/hex-input.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +1 -1
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/color-picker/types.d.ts +8 -0
- package/build-types/color-picker/types.d.ts.map +1 -1
- package/build-types/date-time/{date.d.ts → date/index.d.ts} +3 -2
- package/build-types/date-time/date/index.d.ts.map +1 -0
- package/build-types/date-time/date/styles.d.ts +23 -0
- package/build-types/date-time/date/styles.d.ts.map +1 -0
- package/build-types/date-time/date/test/index.d.ts +2 -0
- package/build-types/date-time/date/test/index.d.ts.map +1 -0
- package/build-types/date-time/date/test/utils.d.ts +2 -0
- package/build-types/date-time/date/test/utils.d.ts.map +1 -0
- package/build-types/date-time/{utils.d.ts → date/utils.d.ts} +0 -0
- package/build-types/date-time/date/utils.d.ts.map +1 -0
- package/build-types/date-time/date-time/index.d.ts +33 -0
- package/build-types/date-time/date-time/index.d.ts.map +1 -0
- package/build-types/date-time/date-time/styles.d.ts +6 -0
- package/build-types/date-time/date-time/styles.d.ts.map +1 -0
- package/build-types/date-time/index.d.ts +2 -28
- package/build-types/date-time/index.d.ts.map +1 -1
- package/build-types/date-time/stories/{index.d.ts → date-time.d.ts} +2 -2
- package/build-types/date-time/stories/date-time.d.ts.map +1 -0
- package/build-types/date-time/{time.d.ts → time/index.d.ts} +2 -2
- package/build-types/date-time/time/index.d.ts.map +1 -0
- package/build-types/date-time/time/styles.d.ts +111 -0
- package/build-types/date-time/time/styles.d.ts.map +1 -0
- package/build-types/date-time/time/test/index.d.ts +2 -0
- package/build-types/date-time/time/test/index.d.ts.map +1 -0
- package/build-types/date-time/{timezone.d.ts → time/timezone.d.ts} +0 -0
- package/build-types/date-time/time/timezone.d.ts.map +1 -0
- package/build-types/date-time/types.d.ts +14 -15
- package/build-types/date-time/types.d.ts.map +1 -1
- package/build-types/dropdown/index.d.ts.map +1 -1
- package/build-types/input-control/index.d.ts.map +1 -1
- package/build-types/input-control/input-field.d.ts.map +1 -1
- package/build-types/input-control/reducer/reducer.d.ts +5 -3
- package/build-types/input-control/reducer/reducer.d.ts.map +1 -1
- package/build-types/input-control/reducer/state.d.ts +2 -2
- package/build-types/input-control/reducer/state.d.ts.map +1 -1
- package/build-types/input-control/utils.d.ts +17 -0
- package/build-types/input-control/utils.d.ts.map +1 -1
- package/build-types/popover/index.d.ts +1 -0
- package/build-types/popover/index.d.ts.map +1 -1
- package/build-types/select-control/index.d.ts.map +1 -1
- package/build-types/select-control/types.d.ts +1 -1
- package/build-types/select-control/types.d.ts.map +1 -1
- package/build-types/surface/component.d.ts +3 -2
- package/build-types/surface/component.d.ts.map +1 -1
- package/build-types/surface/hook.d.ts +4 -4
- package/build-types/surface/hook.d.ts.map +1 -1
- package/build-types/surface/index.d.ts +2 -2
- package/build-types/surface/index.d.ts.map +1 -1
- package/build-types/surface/stories/index.d.ts +12 -0
- package/build-types/surface/stories/index.d.ts.map +1 -0
- package/build-types/surface/styles.d.ts +10 -21
- package/build-types/surface/styles.d.ts.map +1 -1
- package/build-types/surface/test/index.d.ts +2 -0
- package/build-types/surface/test/index.d.ts.map +1 -0
- package/build-types/surface/types.d.ts +1 -1
- package/build-types/surface/types.d.ts.map +1 -1
- package/build-types/textarea-control/index.d.ts +29 -0
- package/build-types/textarea-control/index.d.ts.map +1 -0
- package/build-types/textarea-control/stories/index.d.ts +12 -0
- package/build-types/textarea-control/stories/index.d.ts.map +1 -0
- package/build-types/textarea-control/styles/textarea-control-styles.d.ts +6 -0
- package/build-types/textarea-control/styles/textarea-control-styles.d.ts.map +1 -0
- package/build-types/textarea-control/types.d.ts +26 -0
- package/build-types/textarea-control/types.d.ts.map +1 -0
- package/build-types/utils/hooks/index.d.ts +0 -1
- package/package.json +18 -18
- package/src/alignment-matrix-control/index.js +4 -2
- package/src/autocomplete/autocompleter-ui.js +1 -1
- package/src/autocomplete/autocompleter-ui.native.js +2 -2
- package/src/autocomplete/index.js +21 -9
- package/src/border-box-control/border-box-control/hook.ts +2 -2
- package/src/border-box-control/border-box-control-split-controls/component.tsx +2 -0
- package/src/border-box-control/border-box-control-split-controls/hook.ts +18 -4
- package/src/border-box-control/border-box-control-visualizer/hook.ts +5 -2
- package/src/border-box-control/styles.ts +6 -2
- package/src/border-control/border-control/hook.ts +8 -2
- package/src/box-control/test/index.js +120 -109
- package/src/card/types.ts +1 -1
- package/src/checkbox-control/test/__snapshots__/index.tsx.snap +42 -0
- package/src/checkbox-control/test/index.tsx +109 -0
- package/src/color-palette/index.js +11 -4
- package/src/color-palette/index.native.js +3 -0
- package/src/color-palette/stories/index.js +25 -1
- package/src/color-palette/test/utils.ts +24 -0
- package/src/color-picker/color-copy-button.tsx +76 -0
- package/src/color-picker/component.tsx +18 -38
- package/src/color-picker/hex-input.tsx +16 -0
- package/src/color-picker/styles.ts +5 -1
- package/src/color-picker/types.ts +9 -0
- package/src/custom-gradient-picker/utils.js +1 -1
- package/src/date-time/README.md +16 -0
- package/src/date-time/{datepicker.scss → date/datepicker.scss} +0 -0
- package/src/date-time/{date.tsx → date/index.tsx} +38 -15
- package/src/date-time/date/style.scss +75 -0
- package/src/date-time/date/styles.ts +55 -0
- package/src/date-time/{test/date.tsx → date/test/index.tsx} +1 -1
- package/src/date-time/{test → date/test}/utils.ts +0 -0
- package/src/date-time/{utils.ts → date/utils.ts} +0 -0
- package/src/date-time/date-time/index.tsx +217 -0
- package/src/date-time/date-time/styles.ts +8 -0
- package/src/date-time/index.ts +9 -0
- package/src/date-time/stories/{index.tsx → date-time.tsx} +1 -1
- package/src/date-time/style.scss +1 -262
- package/src/date-time/time/index.tsx +356 -0
- package/src/date-time/time/styles.ts +119 -0
- package/src/date-time/{test/time.tsx → time/test/index.tsx} +85 -38
- package/src/date-time/{timezone.tsx → time/timezone.tsx} +5 -2
- package/src/date-time/types.ts +16 -18
- package/src/draggable/index.native.js +14 -3
- package/src/draggable/test/index.native.js +130 -0
- package/src/dropdown/index.js +5 -1
- package/src/input-control/index.tsx +8 -2
- package/src/input-control/input-field.tsx +10 -30
- package/src/input-control/reducer/reducer.ts +40 -26
- package/src/input-control/reducer/state.ts +2 -3
- package/src/input-control/utils.ts +55 -1
- package/src/popover/index.js +42 -27
- package/src/query-controls/README.md +1 -1
- package/src/search-control/index.js +6 -7
- package/src/select-control/README.md +11 -0
- package/src/select-control/index.tsx +6 -1
- package/src/select-control/types.ts +1 -1
- package/src/slot-fill/README.md +1 -1
- package/src/spacer/hook.ts +13 -13
- package/src/surface/README.md +15 -15
- package/src/surface/{component.js → component.tsx} +13 -7
- package/src/surface/{hook.js → hook.ts} +13 -12
- package/src/surface/{index.js → index.ts} +0 -0
- package/src/surface/stories/index.tsx +40 -0
- package/src/surface/{styles.js → styles.ts} +15 -44
- package/src/surface/test/__snapshots__/{index.js.snap → index.tsx.snap} +0 -0
- package/src/surface/test/{index.js → index.tsx} +2 -1
- package/src/surface/types.ts +1 -1
- package/src/textarea-control/README.md +14 -20
- package/src/textarea-control/index.tsx +86 -0
- package/src/textarea-control/stories/index.tsx +58 -0
- package/src/textarea-control/styles/{textarea-control-styles.js → textarea-control-styles.ts} +0 -0
- package/src/textarea-control/types.ts +30 -0
- package/src/utils/hooks/index.js +0 -1
- package/tsconfig.json +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/build/color-picker/color-display.js +0 -184
- package/build/color-picker/color-display.js.map +0 -1
- package/build/date-time/date.js.map +0 -1
- package/build/date-time/time.js +0 -289
- package/build/date-time/time.js.map +0 -1
- package/build/date-time/timezone.js.map +0 -1
- package/build/date-time/utils.js.map +0 -1
- package/build/utils/hooks/use-combined-ref.js +0 -32
- package/build/utils/hooks/use-combined-ref.js.map +0 -1
- package/build-module/color-picker/color-display.js +0 -170
- package/build-module/color-picker/color-display.js.map +0 -1
- package/build-module/date-time/date.js.map +0 -1
- package/build-module/date-time/time.js +0 -271
- package/build-module/date-time/time.js.map +0 -1
- package/build-module/date-time/timezone.js.map +0 -1
- package/build-module/date-time/utils.js.map +0 -1
- package/build-module/utils/hooks/use-combined-ref.js +0 -28
- package/build-module/utils/hooks/use-combined-ref.js.map +0 -1
- package/build-types/color-picker/color-display.d.ts +0 -14
- package/build-types/color-picker/color-display.d.ts.map +0 -1
- package/build-types/date-time/date.d.ts.map +0 -1
- package/build-types/date-time/stories/index.d.ts.map +0 -1
- package/build-types/date-time/test/date.d.ts +0 -2
- package/build-types/date-time/test/date.d.ts.map +0 -1
- package/build-types/date-time/test/time.d.ts +0 -2
- package/build-types/date-time/test/time.d.ts.map +0 -1
- package/build-types/date-time/test/utils.d.ts.map +0 -1
- package/build-types/date-time/time.d.ts.map +0 -1
- package/build-types/date-time/timezone.d.ts.map +0 -1
- package/build-types/date-time/utils.d.ts.map +0 -1
- package/build-types/utils/hooks/use-combined-ref.d.ts +0 -8
- package/build-types/utils/hooks/use-combined-ref.d.ts.map +0 -1
- package/src/color-picker/color-display.tsx +0 -169
- package/src/date-time/index.tsx +0 -196
- package/src/date-time/time.tsx +0 -321
- package/src/surface/stories/index.js +0 -46
- package/src/textarea-control/index.js +0 -45
- package/src/textarea-control/stories/index.js +0 -48
- package/src/utils/hooks/use-combined-ref.ts +0 -28
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { boolean, number, select } from '@storybook/addon-knobs';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { Surface } from '../';
|
|
10
|
-
import { Text } from '../../text';
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
component: Surface,
|
|
14
|
-
title: 'Components (Experimental)/Surface',
|
|
15
|
-
parameters: {
|
|
16
|
-
knobs: { disable: false },
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
const variantOptions = {
|
|
21
|
-
default: 'default',
|
|
22
|
-
secondary: 'secondary',
|
|
23
|
-
tertiary: 'tertiary',
|
|
24
|
-
dotted: 'dotted',
|
|
25
|
-
grid: 'grid',
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export const _default = () => {
|
|
29
|
-
const props = {
|
|
30
|
-
backgroundSize: number( 'backgroundSize', 12 ),
|
|
31
|
-
borderTop: boolean( 'borderTop', false ),
|
|
32
|
-
borderBottom: boolean( 'borderBottom', false ),
|
|
33
|
-
borderLeft: boolean( 'borderLeft', false ),
|
|
34
|
-
borderRight: boolean( 'borderRight', false ),
|
|
35
|
-
variant: select( 'variant', variantOptions, 'default' ),
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<Surface
|
|
40
|
-
{ ...props }
|
|
41
|
-
style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
|
|
42
|
-
>
|
|
43
|
-
<Text>Surface</Text>
|
|
44
|
-
</Surface>
|
|
45
|
-
);
|
|
46
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { useInstanceId } from '@wordpress/compose';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Internal dependencies
|
|
8
|
-
*/
|
|
9
|
-
import BaseControl from '../base-control';
|
|
10
|
-
import { StyledTextarea } from './styles/textarea-control-styles';
|
|
11
|
-
|
|
12
|
-
export default function TextareaControl( {
|
|
13
|
-
label,
|
|
14
|
-
hideLabelFromVision,
|
|
15
|
-
value,
|
|
16
|
-
help,
|
|
17
|
-
onChange,
|
|
18
|
-
rows = 4,
|
|
19
|
-
className,
|
|
20
|
-
...props
|
|
21
|
-
} ) {
|
|
22
|
-
const instanceId = useInstanceId( TextareaControl );
|
|
23
|
-
const id = `inspector-textarea-control-${ instanceId }`;
|
|
24
|
-
const onChangeValue = ( event ) => onChange( event.target.value );
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<BaseControl
|
|
28
|
-
label={ label }
|
|
29
|
-
hideLabelFromVision={ hideLabelFromVision }
|
|
30
|
-
id={ id }
|
|
31
|
-
help={ help }
|
|
32
|
-
className={ className }
|
|
33
|
-
>
|
|
34
|
-
<StyledTextarea
|
|
35
|
-
className="components-textarea-control__input"
|
|
36
|
-
id={ id }
|
|
37
|
-
rows={ rows }
|
|
38
|
-
onChange={ onChangeValue }
|
|
39
|
-
aria-describedby={ !! help ? id + '__help' : undefined }
|
|
40
|
-
value={ value }
|
|
41
|
-
{ ...props }
|
|
42
|
-
/>
|
|
43
|
-
</BaseControl>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { boolean, number, text } from '@storybook/addon-knobs';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { useState } from '@wordpress/element';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import TextareaControl from '../';
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
title: 'Components/TextareaControl',
|
|
18
|
-
component: TextareaControl,
|
|
19
|
-
parameters: {
|
|
20
|
-
knobs: { disable: false },
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const TextareaControlWithState = ( props ) => {
|
|
25
|
-
const [ value, setValue ] = useState();
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<TextareaControl { ...props } value={ value } onChange={ setValue } />
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export const _default = () => {
|
|
33
|
-
const label = text( 'Label', 'Label Text' );
|
|
34
|
-
const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
|
|
35
|
-
const help = text( 'Help Text', 'Help text to explain the textarea.' );
|
|
36
|
-
const rows = number( 'Rows', 4 );
|
|
37
|
-
const className = text( 'Class Name', '' );
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<TextareaControlWithState
|
|
41
|
-
label={ label }
|
|
42
|
-
hideLabelFromVision={ hideLabelFromVision }
|
|
43
|
-
help={ help }
|
|
44
|
-
rows={ rows }
|
|
45
|
-
className={ className }
|
|
46
|
-
/>
|
|
47
|
-
);
|
|
48
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { useRef, useEffect } from '@wordpress/element';
|
|
5
|
-
/**
|
|
6
|
-
* External dependencies
|
|
7
|
-
*/
|
|
8
|
-
import type { MutableRefObject, RefCallback } from 'react';
|
|
9
|
-
|
|
10
|
-
type Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;
|
|
11
|
-
|
|
12
|
-
export function useCombinedRef< T extends HTMLElement >( ...refs: Ref< T >[] ) {
|
|
13
|
-
const targetRef = useRef( null );
|
|
14
|
-
|
|
15
|
-
useEffect( () => {
|
|
16
|
-
refs.forEach( ( ref ) => {
|
|
17
|
-
if ( ! ref ) return;
|
|
18
|
-
|
|
19
|
-
if ( typeof ref === 'function' ) {
|
|
20
|
-
ref( targetRef.current );
|
|
21
|
-
} else {
|
|
22
|
-
ref.current = targetRef.current;
|
|
23
|
-
}
|
|
24
|
-
} );
|
|
25
|
-
}, [ refs ] );
|
|
26
|
-
|
|
27
|
-
return targetRef;
|
|
28
|
-
}
|