@wordpress/components 23.9.0 → 25.0.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 +62 -0
- package/CONTRIBUTING.md +75 -1
- package/README.md +1 -3
- package/build/autocomplete/autocompleter-ui.js +0 -2
- package/build/autocomplete/autocompleter-ui.js.map +1 -1
- package/build/autocomplete/index.js +2 -0
- package/build/autocomplete/index.js.map +1 -1
- package/build/button/index.js +2 -0
- package/build/button/index.js.map +1 -1
- package/build/card/card-media/component.js +2 -1
- package/build/card/card-media/component.js.map +1 -1
- package/build/color-picker/styles.js +8 -8
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/index.js +7 -5
- package/build/combobox-control/index.js.map +1 -1
- package/build/combobox-control/styles.js +3 -3
- package/build/combobox-control/styles.js.map +1 -1
- package/build/date-time/date-time/index.js +3 -84
- package/build/date-time/date-time/index.js.map +1 -1
- package/build/date-time/date-time/styles.js +4 -19
- package/build/date-time/date-time/styles.js.map +1 -1
- package/build/dimension-control/index.js +1 -1
- package/build/dimension-control/index.js.map +1 -1
- package/build/draggable/index.js +2 -7
- package/build/draggable/index.js.map +1 -1
- package/build/dropdown-menu/index.js +87 -11
- package/build/dropdown-menu/index.js.map +1 -1
- package/build/dropdown-menu/types.js +6 -0
- package/build/dropdown-menu/types.js.map +1 -0
- package/build/dropdown-menu-v2/index.js +195 -0
- package/build/dropdown-menu-v2/index.js.map +1 -0
- package/build/dropdown-menu-v2/styles.js +176 -0
- package/build/dropdown-menu-v2/styles.js.map +1 -0
- package/build/dropdown-menu-v2/types.js +6 -0
- package/build/dropdown-menu-v2/types.js.map +1 -0
- package/build/form-token-field/index.js +5 -3
- package/build/form-token-field/index.js.map +1 -1
- package/build/form-token-field/styles.js +3 -3
- package/build/form-token-field/styles.js.map +1 -1
- package/build/index.native.js +0 -9
- package/build/index.native.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +30 -23
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/mobile/bottom-sheet/cell.native.js +16 -8
- package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/range-cell.native.js +3 -2
- package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet/switch-cell.native.js +8 -2
- package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet-select-control/index.native.js +4 -2
- package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet-text-control/index.native.js +4 -2
- package/build/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
- package/build/mobile/global-styles-context/index.native.js +13 -1
- package/build/mobile/global-styles-context/index.native.js.map +1 -1
- package/build/mobile/link-picker/link-picker-results.native.js +3 -1
- package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
- package/build/navigable-container/container.js +39 -19
- package/build/navigable-container/container.js.map +1 -1
- package/build/navigable-container/index.js.map +1 -1
- package/build/navigable-container/menu.js +37 -5
- package/build/navigable-container/menu.js.map +1 -1
- package/build/navigable-container/tabbable.js +45 -4
- package/build/navigable-container/tabbable.js.map +1 -1
- package/build/navigable-container/types.js +6 -0
- package/build/navigable-container/types.js.map +1 -0
- package/build/palette-edit/index.js +34 -12
- package/build/palette-edit/index.js.map +1 -1
- package/build/private-apis.js +13 -1
- package/build/private-apis.js.map +1 -1
- package/build/range-control/index.native.js +5 -2
- package/build/range-control/index.native.js.map +1 -1
- package/build/sandbox/index.native.js +6 -2
- package/build/sandbox/index.native.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/fill.js +2 -1
- package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +45 -35
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/use-slot.js +11 -26
- package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build/slot-fill/fill.js +7 -31
- package/build/slot-fill/fill.js.map +1 -1
- package/build/slot-fill/index.js.map +1 -1
- package/build/slot-fill/provider.js +0 -6
- package/build/slot-fill/provider.js.map +1 -1
- package/build/slot-fill/slot.js +0 -5
- package/build/slot-fill/slot.js.map +1 -1
- package/build/snackbar/list.js +0 -2
- package/build/snackbar/list.js.map +1 -1
- package/build/tab-panel/index.js.map +1 -1
- package/build/theme/color-algorithms.js +1 -1
- package/build/theme/color-algorithms.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build/toolbar/toolbar-button/index.js +1 -2
- package/build/toolbar/toolbar-button/index.js.map +1 -1
- package/build/toolbar/toolbar-item/index.js +4 -2
- package/build/toolbar/toolbar-item/index.js.map +1 -1
- package/build/utils/colors-values.js +3 -3
- package/build/utils/colors-values.js.map +1 -1
- package/build/utils/use-deprecated-props.js +35 -0
- package/build/utils/use-deprecated-props.js.map +1 -0
- package/build-module/autocomplete/autocompleter-ui.js +1 -3
- package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
- package/build-module/autocomplete/index.js +3 -3
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/button/index.js +2 -0
- package/build-module/button/index.js.map +1 -1
- package/build-module/card/card-media/component.js +2 -1
- package/build-module/card/card-media/component.js.map +1 -1
- package/build-module/color-picker/styles.js +8 -8
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/index.js +6 -5
- package/build-module/combobox-control/index.js.map +1 -1
- package/build-module/combobox-control/styles.js +3 -3
- package/build-module/combobox-control/styles.js.map +1 -1
- package/build-module/date-time/date-time/index.js +6 -81
- package/build-module/date-time/date-time/index.js.map +1 -1
- package/build-module/date-time/date-time/styles.js +3 -17
- package/build-module/date-time/date-time/styles.js.map +1 -1
- package/build-module/dimension-control/index.js +1 -1
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/draggable/index.js +2 -7
- package/build-module/draggable/index.js.map +1 -1
- package/build-module/dropdown-menu/index.js +87 -10
- package/build-module/dropdown-menu/index.js.map +1 -1
- package/build-module/dropdown-menu/types.js +2 -0
- package/build-module/dropdown-menu/types.js.map +1 -0
- package/build-module/dropdown-menu-v2/index.js +149 -0
- package/build-module/dropdown-menu-v2/index.js.map +1 -0
- package/build-module/dropdown-menu-v2/styles.js +153 -0
- package/build-module/dropdown-menu-v2/styles.js.map +1 -0
- package/build-module/dropdown-menu-v2/types.js +2 -0
- package/build-module/dropdown-menu-v2/types.js.map +1 -0
- package/build-module/form-token-field/index.js +4 -3
- package/build-module/form-token-field/index.js.map +1 -1
- package/build-module/form-token-field/styles.js +3 -3
- package/build-module/form-token-field/styles.js.map +1 -1
- package/build-module/index.native.js +0 -1
- package/build-module/index.native.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +30 -23
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/mobile/bottom-sheet/cell.native.js +16 -8
- package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/range-cell.native.js +3 -2
- package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/switch-cell.native.js +7 -2
- package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-select-control/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-text-control/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
- package/build-module/mobile/global-styles-context/index.native.js +13 -1
- package/build-module/mobile/global-styles-context/index.native.js.map +1 -1
- package/build-module/mobile/link-picker/link-picker-results.native.js +3 -1
- package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
- package/build-module/navigable-container/container.js +43 -19
- package/build-module/navigable-container/container.js.map +1 -1
- package/build-module/navigable-container/index.js +0 -2
- package/build-module/navigable-container/index.js.map +1 -1
- package/build-module/navigable-container/menu.js +36 -4
- package/build-module/navigable-container/menu.js.map +1 -1
- package/build-module/navigable-container/tabbable.js +44 -3
- package/build-module/navigable-container/tabbable.js.map +1 -1
- package/build-module/navigable-container/types.js +2 -0
- package/build-module/navigable-container/types.js.map +1 -0
- package/build-module/palette-edit/index.js +34 -13
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/private-apis.js +12 -1
- package/build-module/private-apis.js.map +1 -1
- package/build-module/range-control/index.native.js +5 -2
- package/build-module/range-control/index.native.js.map +1 -1
- package/build-module/sandbox/index.native.js +6 -2
- package/build-module/sandbox/index.native.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/fill.js +2 -1
- package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +46 -36
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/use-slot.js +12 -27
- package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build-module/slot-fill/fill.js +7 -31
- package/build-module/slot-fill/fill.js.map +1 -1
- package/build-module/slot-fill/index.js +1 -2
- package/build-module/slot-fill/index.js.map +1 -1
- package/build-module/slot-fill/provider.js +0 -6
- package/build-module/slot-fill/provider.js.map +1 -1
- package/build-module/slot-fill/slot.js +0 -5
- package/build-module/slot-fill/slot.js.map +1 -1
- package/build-module/snackbar/list.js +0 -2
- package/build-module/snackbar/list.js.map +1 -1
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-module/theme/color-algorithms.js +1 -1
- package/build-module/theme/color-algorithms.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/toolbar/toolbar-button/index.js +1 -2
- package/build-module/toolbar/toolbar-button/index.js.map +1 -1
- package/build-module/toolbar/toolbar-item/index.js +5 -2
- package/build-module/toolbar/toolbar-item/index.js.map +1 -1
- package/build-module/utils/colors-values.js +3 -3
- package/build-module/utils/colors-values.js.map +1 -1
- package/build-module/utils/use-deprecated-props.js +25 -0
- package/build-module/utils/use-deprecated-props.js.map +1 -0
- package/build-style/style-rtl.css +67 -67
- package/build-style/style.css +67 -67
- package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
- package/build-types/autocomplete/index.d.ts.map +1 -1
- package/build-types/autocomplete/types.d.ts +2 -18
- package/build-types/autocomplete/types.d.ts.map +1 -1
- package/build-types/button/deprecated.d.ts +6 -0
- package/build-types/button/deprecated.d.ts.map +1 -1
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/button/types.d.ts +7 -0
- package/build-types/button/types.d.ts.map +1 -1
- package/build-types/card/card-media/component.d.ts +2 -1
- package/build-types/card/card-media/component.d.ts.map +1 -1
- package/build-types/card/stories/index.d.ts +21 -1
- package/build-types/card/stories/index.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/combobox-control/index.d.ts +1 -1
- package/build-types/combobox-control/index.d.ts.map +1 -1
- package/build-types/combobox-control/stories/index.d.ts.map +1 -1
- package/build-types/combobox-control/styles.d.ts +1 -1
- package/build-types/combobox-control/types.d.ts +8 -1
- package/build-types/combobox-control/types.d.ts.map +1 -1
- package/build-types/date-time/date-time/index.d.ts +3 -4
- package/build-types/date-time/date-time/index.d.ts.map +1 -1
- package/build-types/date-time/date-time/styles.d.ts +0 -4
- package/build-types/date-time/date-time/styles.d.ts.map +1 -1
- package/build-types/date-time/stories/date-time.d.ts.map +1 -1
- package/build-types/date-time/types.d.ts +0 -14
- package/build-types/date-time/types.d.ts.map +1 -1
- package/build-types/dimension-control/index.d.ts +1 -1
- package/build-types/draggable/index.d.ts.map +1 -1
- package/build-types/dropdown-menu/index.d.ts +83 -1
- package/build-types/dropdown-menu/index.d.ts.map +1 -1
- package/build-types/dropdown-menu/stories/index.d.ts +13 -0
- package/build-types/dropdown-menu/stories/index.d.ts.map +1 -0
- package/build-types/dropdown-menu/test/index.d.ts +2 -0
- package/build-types/dropdown-menu/test/index.d.ts.map +1 -0
- package/build-types/dropdown-menu/types.d.ts +134 -0
- package/build-types/dropdown-menu/types.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/index.d.ts +17 -0
- package/build-types/dropdown-menu-v2/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/stories/index.d.ts +13 -0
- package/build-types/dropdown-menu-v2/stories/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/styles.d.ts +41 -0
- package/build-types/dropdown-menu-v2/styles.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/test/index.d.ts +2 -0
- package/build-types/dropdown-menu-v2/test/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/types.d.ts +242 -0
- package/build-types/dropdown-menu-v2/types.d.ts.map +1 -0
- package/build-types/form-token-field/index.d.ts.map +1 -1
- package/build-types/form-token-field/styles.d.ts +1 -1
- package/build-types/form-token-field/types.d.ts +8 -1
- package/build-types/form-token-field/types.d.ts.map +1 -1
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/navigable-container/container.d.ts +20 -1
- package/build-types/navigable-container/container.d.ts.map +1 -1
- package/build-types/navigable-container/index.d.ts +5 -2
- package/build-types/navigable-container/index.d.ts.map +1 -1
- package/build-types/navigable-container/menu.d.ts +45 -11
- package/build-types/navigable-container/menu.d.ts.map +1 -1
- package/build-types/navigable-container/stories/navigable-menu.d.ts +12 -0
- package/build-types/navigable-container/stories/navigable-menu.d.ts.map +1 -0
- package/build-types/navigable-container/stories/tabbable-container.d.ts +12 -0
- package/build-types/navigable-container/stories/tabbable-container.d.ts.map +1 -0
- package/build-types/navigable-container/tabbable.d.ts +52 -9
- package/build-types/navigable-container/tabbable.d.ts.map +1 -1
- package/build-types/navigable-container/test/navigable-menu.d.ts +2 -0
- package/build-types/navigable-container/test/navigable-menu.d.ts.map +1 -0
- package/build-types/navigable-container/test/tababble-container.d.ts +2 -0
- package/build-types/navigable-container/test/tababble-container.d.ts.map +1 -0
- package/build-types/navigable-container/types.d.ts +61 -0
- package/build-types/navigable-container/types.d.ts.map +1 -0
- package/build-types/navigator/navigator-back-button/component.d.ts +1 -0
- package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-back-button/hook.d.ts +1 -0
- package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/component.d.ts +1 -0
- package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/hook.d.ts +1 -0
- package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
- package/build-types/navigator/navigator-to-parent-button/component.d.ts +1 -0
- package/build-types/navigator/navigator-to-parent-button/component.d.ts.map +1 -1
- package/build-types/palette-edit/index.d.ts +1 -1
- package/build-types/palette-edit/index.d.ts.map +1 -1
- package/build-types/palette-edit/stories/index.d.ts.map +1 -1
- package/build-types/palette-edit/types.d.ts +8 -0
- package/build-types/palette-edit/types.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
- package/build-types/slot-fill/fill.d.ts +4 -2
- package/build-types/slot-fill/fill.d.ts.map +1 -1
- package/build-types/slot-fill/index.d.ts +1 -2
- package/build-types/slot-fill/index.d.ts.map +1 -1
- package/build-types/slot-fill/provider.d.ts +0 -2
- package/build-types/slot-fill/provider.d.ts.map +1 -1
- package/build-types/slot-fill/slot.d.ts.map +1 -1
- package/build-types/snackbar/list.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toolbar/stories/index.d.ts.map +1 -1
- package/build-types/toolbar/toolbar-button/index.d.ts +6 -0
- package/build-types/toolbar/toolbar-button/index.d.ts.map +1 -1
- package/build-types/toolbar/toolbar-item/index.d.ts +6 -4
- package/build-types/toolbar/toolbar-item/index.d.ts.map +1 -1
- package/build-types/tree-grid/types.d.ts +7 -0
- package/build-types/tree-grid/types.d.ts.map +1 -1
- package/build-types/ui/context/get-styled-class-name-from-key.d.ts +1 -10
- package/build-types/ui/context/get-styled-class-name-from-key.d.ts.map +1 -1
- package/build-types/utils/use-deprecated-props.d.ts +9 -0
- package/build-types/utils/use-deprecated-props.d.ts.map +1 -0
- package/package.json +21 -20
- package/src/autocomplete/README.md +78 -52
- package/src/autocomplete/autocompleter-ui.tsx +0 -2
- package/src/autocomplete/index.tsx +1 -2
- package/src/autocomplete/types.ts +3 -19
- package/src/button/index.tsx +2 -0
- package/src/button/style.scss +18 -18
- package/src/button/types.ts +7 -0
- package/src/card/card-media/README.md +1 -1
- package/src/card/card-media/component.tsx +2 -1
- package/src/card/stories/index.tsx +47 -26
- package/src/checkbox-control/style.scss +1 -4
- package/src/color-picker/styles.ts +7 -2
- package/src/combobox-control/index.tsx +24 -18
- package/src/combobox-control/stories/index.tsx +0 -1
- package/src/combobox-control/styles.ts +4 -4
- package/src/combobox-control/types.ts +8 -1
- package/src/custom-gradient-picker/style.scss +2 -2
- package/src/date-time/README.md +0 -16
- package/src/date-time/date-time/index.tsx +17 -155
- package/src/date-time/date-time/styles.ts +0 -4
- package/src/date-time/stories/date-time.tsx +0 -4
- package/src/date-time/types.ts +0 -16
- package/src/dimension-control/index.tsx +1 -1
- package/src/draggable/index.tsx +1 -9
- package/src/dropdown-menu/README.md +12 -22
- package/src/dropdown-menu/{index.js → index.tsx} +111 -25
- package/src/dropdown-menu/stories/{index.js → index.tsx} +14 -22
- package/src/dropdown-menu/test/{index.js → index.tsx} +6 -5
- package/src/dropdown-menu/types.ts +143 -0
- package/src/dropdown-menu-v2/README.md +392 -0
- package/src/dropdown-menu-v2/index.tsx +241 -0
- package/src/dropdown-menu-v2/stories/index.tsx +193 -0
- package/src/dropdown-menu-v2/styles.ts +263 -0
- package/src/dropdown-menu-v2/test/index.tsx +816 -0
- package/src/dropdown-menu-v2/types.ts +250 -0
- package/src/form-toggle/style.scss +1 -5
- package/src/form-token-field/index.tsx +7 -3
- package/src/form-token-field/styles.ts +4 -4
- package/src/form-token-field/types.ts +8 -1
- package/src/index.native.js +0 -1
- package/src/input-control/styles/input-control-styles.tsx +7 -0
- package/src/mobile/bottom-sheet/cell.native.js +26 -5
- package/src/mobile/bottom-sheet/range-cell.native.js +2 -1
- package/src/mobile/bottom-sheet/stepper-cell/index.native.js +2 -0
- package/src/mobile/bottom-sheet/styles.native.scss +13 -1
- package/src/mobile/bottom-sheet/switch-cell.native.js +10 -2
- package/src/mobile/bottom-sheet-select-control/index.native.js +2 -0
- package/src/mobile/bottom-sheet-text-control/index.native.js +2 -0
- package/src/mobile/global-styles-context/index.native.js +12 -1
- package/src/mobile/link-picker/link-picker-results.native.js +3 -0
- package/src/modal/style.scss +1 -1
- package/src/navigable-container/README.md +24 -13
- package/src/navigable-container/{container.js → container.tsx} +57 -27
- package/src/navigable-container/{index.js → index.tsx} +0 -1
- package/src/navigable-container/menu.tsx +100 -0
- package/src/navigable-container/stories/{navigable-menu.js → navigable-menu.tsx} +15 -10
- package/src/navigable-container/stories/{tabbable-container.js → tabbable-container.tsx} +15 -6
- package/src/navigable-container/tabbable.tsx +92 -0
- package/src/navigable-container/test/{navigable-menu.js → navigable-menu.tsx} +3 -1
- package/src/navigable-container/test/{tababble-container.js → tababble-container.tsx} +53 -24
- package/src/navigable-container/types.ts +76 -0
- package/src/palette-edit/index.tsx +45 -7
- package/src/palette-edit/stories/index.tsx +4 -0
- package/src/palette-edit/types.ts +11 -0
- package/src/private-apis.ts +22 -0
- package/src/range-control/index.native.js +3 -0
- package/src/sandbox/index.native.js +4 -0
- package/src/search-control/style.scss +2 -0
- package/src/slot-fill/bubbles-virtually/fill.js +2 -1
- package/src/slot-fill/bubbles-virtually/slot-fill-provider.js +46 -60
- package/src/slot-fill/bubbles-virtually/use-slot.js +14 -41
- package/src/slot-fill/fill.js +4 -26
- package/src/slot-fill/index.js +1 -3
- package/src/slot-fill/provider.js +0 -6
- package/src/slot-fill/slot.js +0 -5
- package/src/snackbar/list.tsx +0 -1
- package/src/style.scss +6 -0
- package/src/tab-panel/index.tsx +1 -1
- package/src/theme/color-algorithms.ts +1 -1
- package/src/theme/stories/index.tsx +1 -1
- package/src/theme/test/color-algorithms.ts +2 -2
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +10 -6
- package/src/toggle-group-control/toggle-group-control/styles.ts +6 -1
- package/src/toolbar/stories/index.tsx +25 -26
- package/src/toolbar/toolbar-button/index.tsx +10 -13
- package/src/toolbar/toolbar-item/{index.js → index.tsx} +12 -3
- package/src/tooltip/style.scss +2 -2
- package/src/tree-grid/README.md +18 -0
- package/src/tree-grid/types.ts +7 -0
- package/src/utils/colors-values.js +3 -3
- package/src/utils/theme-variables.scss +4 -4
- package/src/utils/use-deprecated-props.ts +29 -0
- package/tsconfig.json +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/build/mobile/readable-content-view/index.native.js +0 -97
- package/build/mobile/readable-content-view/index.native.js.map +0 -1
- package/build-module/mobile/readable-content-view/index.native.js +0 -81
- package/build-module/mobile/readable-content-view/index.native.js.map +0 -1
- package/src/CONTRIBUTING.md +0 -78
- package/src/README.md +0 -20
- package/src/mobile/readable-content-view/index.native.js +0 -85
- package/src/mobile/readable-content-view/style.native.scss +0 -30
- package/src/navigable-container/menu.js +0 -62
- package/src/navigable-container/tabbable.js +0 -46
|
@@ -13,6 +13,8 @@ var _element = require("@wordpress/element");
|
|
|
13
13
|
|
|
14
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
15
|
|
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
+
|
|
16
18
|
var _changeCase = require("change-case");
|
|
17
19
|
|
|
18
20
|
var _i18n = require("@wordpress/i18n");
|
|
@@ -115,14 +117,19 @@ function ColorPickerPopover(_ref2) {
|
|
|
115
117
|
isGradient,
|
|
116
118
|
element,
|
|
117
119
|
onChange,
|
|
120
|
+
popoverProps: receivedPopoverProps,
|
|
118
121
|
onClose = () => {}
|
|
119
122
|
} = _ref2;
|
|
120
|
-
|
|
121
|
-
|
|
123
|
+
const popoverProps = (0, _element.useMemo)(() => ({
|
|
124
|
+
shift: true,
|
|
122
125
|
offset: 20,
|
|
123
|
-
|
|
126
|
+
placement: 'left-start',
|
|
127
|
+
...receivedPopoverProps,
|
|
128
|
+
className: (0, _classnames.default)('components-palette-edit__popover', receivedPopoverProps === null || receivedPopoverProps === void 0 ? void 0 : receivedPopoverProps.className)
|
|
129
|
+
}), [receivedPopoverProps]);
|
|
130
|
+
return (0, _element.createElement)(_popover.default, (0, _extends2.default)({}, popoverProps, {
|
|
124
131
|
onClose: onClose
|
|
125
|
-
}, !isGradient && (0, _element.createElement)(_colorPicker.ColorPicker, {
|
|
132
|
+
}), !isGradient && (0, _element.createElement)(_colorPicker.ColorPicker, {
|
|
126
133
|
color: element.color,
|
|
127
134
|
enableAlpha: true,
|
|
128
135
|
onChange: newColor => {
|
|
@@ -153,15 +160,24 @@ function Option(_ref3) {
|
|
|
153
160
|
onStartEditing,
|
|
154
161
|
onRemove,
|
|
155
162
|
onStopEditing,
|
|
163
|
+
popoverProps: receivedPopoverProps,
|
|
156
164
|
slugPrefix,
|
|
157
165
|
isGradient
|
|
158
166
|
} = _ref3;
|
|
159
167
|
const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
|
|
160
|
-
const value = isGradient ? element.gradient : element.color;
|
|
168
|
+
const value = isGradient ? element.gradient : element.color; // Use internal state instead of a ref to make sure that the component
|
|
169
|
+
// re-renders when the popover's anchor updates.
|
|
170
|
+
|
|
171
|
+
const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
|
|
172
|
+
const popoverProps = (0, _element.useMemo)(() => ({ ...receivedPopoverProps,
|
|
173
|
+
// Use the custom palette color item as the popover anchor.
|
|
174
|
+
anchor: popoverAnchor
|
|
175
|
+
}), [popoverAnchor, receivedPopoverProps]);
|
|
161
176
|
return (0, _element.createElement)(_styles.PaletteItem, (0, _extends2.default)({
|
|
162
177
|
className: isEditing ? 'is-selected' : undefined,
|
|
163
178
|
as: "div",
|
|
164
|
-
onClick: onStartEditing
|
|
179
|
+
onClick: onStartEditing,
|
|
180
|
+
ref: setPopoverAnchor
|
|
165
181
|
}, isEditing ? { ...focusOutsideProps
|
|
166
182
|
} : {
|
|
167
183
|
style: {
|
|
@@ -189,7 +205,8 @@ function Option(_ref3) {
|
|
|
189
205
|
}))), isEditing && (0, _element.createElement)(ColorPickerPopover, {
|
|
190
206
|
isGradient: isGradient,
|
|
191
207
|
onChange: onChange,
|
|
192
|
-
element: element
|
|
208
|
+
element: element,
|
|
209
|
+
popoverProps: popoverProps
|
|
193
210
|
}));
|
|
194
211
|
}
|
|
195
212
|
|
|
@@ -211,7 +228,8 @@ function PaletteEditListView(_ref5) {
|
|
|
211
228
|
setEditingElement,
|
|
212
229
|
canOnlyChangeValues,
|
|
213
230
|
slugPrefix,
|
|
214
|
-
isGradient
|
|
231
|
+
isGradient,
|
|
232
|
+
popoverProps
|
|
215
233
|
} = _ref5;
|
|
216
234
|
// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
|
|
217
235
|
const elementsReference = (0, _element.useRef)();
|
|
@@ -271,7 +289,8 @@ function PaletteEditListView(_ref5) {
|
|
|
271
289
|
setEditingElement(null);
|
|
272
290
|
}
|
|
273
291
|
},
|
|
274
|
-
slugPrefix: slugPrefix
|
|
292
|
+
slugPrefix: slugPrefix,
|
|
293
|
+
popoverProps: popoverProps
|
|
275
294
|
}))));
|
|
276
295
|
}
|
|
277
296
|
|
|
@@ -307,7 +326,8 @@ function PaletteEdit(_ref6) {
|
|
|
307
326
|
emptyMessage,
|
|
308
327
|
canOnlyChangeValues,
|
|
309
328
|
canReset,
|
|
310
|
-
slugPrefix = ''
|
|
329
|
+
slugPrefix = '',
|
|
330
|
+
popoverProps
|
|
311
331
|
} = _ref6;
|
|
312
332
|
const isGradient = !!gradients;
|
|
313
333
|
const elements = isGradient ? gradients : colors;
|
|
@@ -404,7 +424,8 @@ function PaletteEdit(_ref6) {
|
|
|
404
424
|
editingElement: editingElement,
|
|
405
425
|
setEditingElement: setEditingElement,
|
|
406
426
|
slugPrefix: slugPrefix,
|
|
407
|
-
isGradient: isGradient
|
|
427
|
+
isGradient: isGradient,
|
|
428
|
+
popoverProps: popoverProps
|
|
408
429
|
}), !isEditing && editingElement !== null && (0, _element.createElement)(ColorPickerPopover, {
|
|
409
430
|
isGradient: isGradient,
|
|
410
431
|
onClose: () => setEditingElement(null),
|
|
@@ -418,7 +439,8 @@ function PaletteEdit(_ref6) {
|
|
|
418
439
|
return currentElement;
|
|
419
440
|
}));
|
|
420
441
|
},
|
|
421
|
-
element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1]
|
|
442
|
+
element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
|
|
443
|
+
popoverProps: popoverProps
|
|
422
444
|
}), !isEditing && (isGradient ? (0, _element.createElement)(_gradientPicker.default, {
|
|
423
445
|
__nextHasNoMargin: true,
|
|
424
446
|
gradients: gradients,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/palette-edit/index.tsx"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","onClose","color","newColor","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","undefined","style","cursor","background","name","nextName","lineSolid","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","map","index","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","plus","tempOptionName","moreVertical","isSmall"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect, useCallback } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A unique name for a palette item.\n */\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color | Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"left-start\"\n\t\t\toffset={ 20 }\n\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color | Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color | Gradient\n) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/palette-edit/index.tsx"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","placement","className","color","newColor","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","popoverAnchor","setPopoverAnchor","anchor","undefined","style","cursor","background","name","nextName","lineSolid","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","map","index","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","plus","tempOptionName","moreVertical","isSmall"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A unique name for a palette item.\n */\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color | Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color | Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\tref={ setPopoverAnchor }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color | Gradient\n) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"]}
|
package/build/private-apis.js
CHANGED
|
@@ -15,6 +15,8 @@ var _utils = require("./popover/utils");
|
|
|
15
15
|
|
|
16
16
|
var _slotFill = require("./slot-fill");
|
|
17
17
|
|
|
18
|
+
var _dropdownMenuV = require("./dropdown-menu-v2");
|
|
19
|
+
|
|
18
20
|
/**
|
|
19
21
|
* WordPress dependencies
|
|
20
22
|
*/
|
|
@@ -33,6 +35,16 @@ exports.privateApis = privateApis;
|
|
|
33
35
|
lock(privateApis, {
|
|
34
36
|
CustomSelectControl: _customSelectControl.default,
|
|
35
37
|
__experimentalPopoverLegacyPositionToPlacement: _utils.positionToPlacement,
|
|
36
|
-
createPrivateSlotFill: _slotFill.createPrivateSlotFill
|
|
38
|
+
createPrivateSlotFill: _slotFill.createPrivateSlotFill,
|
|
39
|
+
DropdownMenuV2: _dropdownMenuV.DropdownMenu,
|
|
40
|
+
DropdownMenuCheckboxItemV2: _dropdownMenuV.DropdownMenuCheckboxItem,
|
|
41
|
+
DropdownMenuGroupV2: _dropdownMenuV.DropdownMenuGroup,
|
|
42
|
+
DropdownMenuItemV2: _dropdownMenuV.DropdownMenuItem,
|
|
43
|
+
DropdownMenuLabelV2: _dropdownMenuV.DropdownMenuLabel,
|
|
44
|
+
DropdownMenuRadioGroupV2: _dropdownMenuV.DropdownMenuRadioGroup,
|
|
45
|
+
DropdownMenuRadioItemV2: _dropdownMenuV.DropdownMenuRadioItem,
|
|
46
|
+
DropdownMenuSeparatorV2: _dropdownMenuV.DropdownMenuSeparator,
|
|
47
|
+
DropdownSubMenuV2: _dropdownMenuV.DropdownSubMenu,
|
|
48
|
+
DropdownSubMenuTriggerV2: _dropdownMenuV.DropdownSubMenuTrigger
|
|
37
49
|
});
|
|
38
50
|
//# sourceMappingURL=private-apis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/private-apis.ts"],"names":["lock","unlock","privateApis","CustomSelectControl","__experimentalPopoverLegacyPositionToPlacement","createPrivateSlotFill"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/private-apis.ts"],"names":["lock","unlock","privateApis","CustomSelectControl","__experimentalPopoverLegacyPositionToPlacement","createPrivateSlotFill","DropdownMenuV2","DropdownMenuCheckboxItemV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownMenuLabelV2","DropdownMenuRadioGroupV2","DropdownMenuRadioItemV2","DropdownMenuSeparatorV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,uBAFD,CADM;;;AAMA,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBC,EAAAA,mBAAmB,EAAnBA,4BADkB;AAElBC,EAAAA,8CAA8C,EAA9CA,0BAFkB;AAGlBC,EAAAA,qBAAqB,EAArBA,+BAHkB;AAIlBC,EAAAA,cAAc,EAAdA,2BAJkB;AAKlBC,EAAAA,0BAA0B,EAA1BA,uCALkB;AAMlBC,EAAAA,mBAAmB,EAAnBA,gCANkB;AAOlBC,EAAAA,kBAAkB,EAAlBA,+BAPkB;AAQlBC,EAAAA,mBAAmB,EAAnBA,gCARkB;AASlBC,EAAAA,wBAAwB,EAAxBA,qCATkB;AAUlBC,EAAAA,uBAAuB,EAAvBA,oCAVkB;AAWlBC,EAAAA,uBAAuB,EAAvBA,oCAXkB;AAYlBC,EAAAA,iBAAiB,EAAjBA,8BAZkB;AAalBC,EAAAA,wBAAwB,EAAxBA;AAbkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as CustomSelectControl } from './custom-select-control';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { createPrivateSlotFill } from './slot-fill';\nimport {\n\tDropdownMenu as DropdownMenuV2,\n\tDropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,\n\tDropdownMenuGroup as DropdownMenuGroupV2,\n\tDropdownMenuItem as DropdownMenuItemV2,\n\tDropdownMenuLabel as DropdownMenuLabelV2,\n\tDropdownMenuRadioGroup as DropdownMenuRadioGroupV2,\n\tDropdownMenuRadioItem as DropdownMenuRadioItemV2,\n\tDropdownMenuSeparator as DropdownMenuSeparatorV2,\n\tDropdownSubMenu as DropdownSubMenuV2,\n\tDropdownSubMenuTrigger as DropdownSubMenuTriggerV2,\n} from './dropdown-menu-v2';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/components'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tCustomSelectControl,\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tcreatePrivateSlotFill,\n\tDropdownMenuV2,\n\tDropdownMenuCheckboxItemV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownMenuLabelV2,\n\tDropdownMenuRadioGroupV2,\n\tDropdownMenuRadioItemV2,\n\tDropdownMenuSeparatorV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} );\n"]}
|
|
@@ -39,6 +39,7 @@ const RangeControl = (0, _element.memo)(_ref => {
|
|
|
39
39
|
max,
|
|
40
40
|
type,
|
|
41
41
|
separatorType,
|
|
42
|
+
disabled,
|
|
42
43
|
...props
|
|
43
44
|
} = _ref;
|
|
44
45
|
|
|
@@ -49,7 +50,8 @@ const RangeControl = (0, _element.memo)(_ref => {
|
|
|
49
50
|
min: min,
|
|
50
51
|
onChange: onChange,
|
|
51
52
|
separatorType: separatorType,
|
|
52
|
-
value: value
|
|
53
|
+
value: value,
|
|
54
|
+
disabled: disabled
|
|
53
55
|
});
|
|
54
56
|
}
|
|
55
57
|
|
|
@@ -70,7 +72,8 @@ const RangeControl = (0, _element.memo)(_ref => {
|
|
|
70
72
|
afterIcon: afterIcon,
|
|
71
73
|
allowReset: allowReset,
|
|
72
74
|
defaultValue: initialSliderValue,
|
|
73
|
-
separatorType: separatorType
|
|
75
|
+
separatorType: separatorType,
|
|
76
|
+
disabled: disabled
|
|
74
77
|
}, props));
|
|
75
78
|
});
|
|
76
79
|
var _default = RangeControl;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/range-control/index.native.js"],"names":["RangeControl","className","currentInput","label","value","instanceId","onChange","beforeIcon","afterIcon","help","allowReset","initialPosition","min","max","type","separatorType","props","id","currentInputValue","initialSliderValue","isFinite","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AACA;;AARA;AACA;AACA;;AAEA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,mBACpB,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/range-control/index.native.js"],"names":["RangeControl","className","currentInput","label","value","instanceId","onChange","beforeIcon","afterIcon","help","allowReset","initialPosition","min","max","type","separatorType","disabled","props","id","currentInputValue","initialSliderValue","isFinite","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AACA;;AARA;AACA;AACA;;AAEA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,mBACpB,QAkBO;AAAA,MAlBL;AACDC,IAAAA,SADC;AAEDC,IAAAA,YAFC;AAGDC,IAAAA,KAHC;AAIDC,IAAAA,KAJC;AAKDC,IAAAA,UALC;AAMDC,IAAAA,QANC;AAODC,IAAAA,UAPC;AAQDC,IAAAA,SARC;AASDC,IAAAA,IATC;AAUDC,IAAAA,UAVC;AAWDC,IAAAA,eAXC;AAYDC,IAAAA,GAZC;AAaDC,IAAAA,GAbC;AAcDC,IAAAA,IAdC;AAeDC,IAAAA,aAfC;AAgBDC,IAAAA,QAhBC;AAiBD,OAAGC;AAjBF,GAkBK;;AACN,MAAKH,IAAI,KAAK,SAAd,EAA0B;AACzB,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAGX,KADT;AAEC,MAAA,GAAG,EAAGU,GAFP;AAGC,MAAA,GAAG,EAAGD,GAHP;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,aAAa,EAAGS,aALjB;AAMC,MAAA,KAAK,EAAGX,KANT;AAOC,MAAA,QAAQ,EAAGY;AAPZ,MADD;AAWA;;AACD,QAAME,EAAE,GAAI,2BAA2Bb,UAAY,EAAnD;AACA,QAAMc,iBAAiB,GAAGjB,YAAY,KAAK,IAAjB,GAAwBE,KAAxB,GAAgCF,YAA1D;AACA,QAAMkB,kBAAkB,GAAGC,QAAQ,CAAEF,iBAAF,CAAR,GACxBA,iBADwB,GAExBR,eAFH;AAIA,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGR,KADT;AAEC,IAAA,EAAE,EAAGe,EAFN;AAGC,IAAA,IAAI,EAAGT,IAHR;AAIC,IAAA,SAAS,EAAGR,SAJb;AAKC,IAAA,QAAQ,EAAGK,QALZ;AAMC,wBAAmB,CAAC,CAAEG,IAAH,GAAW,GAAGS,EAAI,QAAlB,GAA4BI,SANhD;AAOC,IAAA,YAAY,EAAGV,GAPhB;AAQC,IAAA,YAAY,EAAGC,GARhB;AASC,IAAA,KAAK,EAAGT,KATT;AAUC,IAAA,UAAU,EAAGG,UAVd;AAWC,IAAA,SAAS,EAAGC,SAXb;AAYC,IAAA,UAAU,EAAGE,UAZd;AAaC,IAAA,YAAY,EAAGU,kBAbhB;AAcC,IAAA,aAAa,EAAGL,aAdjB;AAeC,IAAA,QAAQ,EAAGC;AAfZ,KAgBMC,KAhBN,EADD;AAoBA,CA3DmB,CAArB;eA8DejB,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\n\nconst RangeControl = memo(\n\t( {\n\t\tclassName,\n\t\tcurrentInput,\n\t\tlabel,\n\t\tvalue,\n\t\tinstanceId,\n\t\tonChange,\n\t\tbeforeIcon,\n\t\tafterIcon,\n\t\thelp,\n\t\tallowReset,\n\t\tinitialPosition,\n\t\tmin,\n\t\tmax,\n\t\ttype,\n\t\tseparatorType,\n\t\tdisabled,\n\t\t...props\n\t} ) => {\n\t\tif ( type === 'stepper' ) {\n\t\t\treturn (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\tconst id = `inspector-range-control-${ instanceId }`;\n\t\tconst currentInputValue = currentInput === null ? value : currentInput;\n\t\tconst initialSliderValue = isFinite( currentInputValue )\n\t\t\t? currentInputValue\n\t\t\t: initialPosition;\n\n\t\treturn (\n\t\t\t<RangeCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ className }\n\t\t\t\tonChange={ onChange }\n\t\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\t\tminimumValue={ min }\n\t\t\t\tmaximumValue={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tbeforeIcon={ beforeIcon }\n\t\t\t\tafterIcon={ afterIcon }\n\t\t\t\tallowReset={ allowReset }\n\t\t\t\tdefaultValue={ initialSliderValue }\n\t\t\t\tseparatorType={ separatorType }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default RangeControl;\n"]}
|
|
@@ -186,7 +186,9 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox(_ref, ref) {
|
|
|
186
186
|
type,
|
|
187
187
|
url,
|
|
188
188
|
onWindowEvents = {},
|
|
189
|
-
viewportProps = ''
|
|
189
|
+
viewportProps = '',
|
|
190
|
+
onLoadEnd = () => {},
|
|
191
|
+
testID
|
|
190
192
|
} = _ref;
|
|
191
193
|
const colorScheme = (0, _compose.usePreferredColorScheme)();
|
|
192
194
|
const [height, setHeight] = (0, _element.useState)(0);
|
|
@@ -350,7 +352,9 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox(_ref, ref) {
|
|
|
350
352
|
setBuiltInZoomControls: false,
|
|
351
353
|
showsHorizontalScrollIndicator: false,
|
|
352
354
|
showsVerticalScrollIndicator: false,
|
|
353
|
-
mediaPlaybackRequiresUserAction: false
|
|
355
|
+
mediaPlaybackRequiresUserAction: false,
|
|
356
|
+
onLoadEnd: onLoadEnd,
|
|
357
|
+
testID: testID
|
|
354
358
|
});
|
|
355
359
|
});
|
|
356
360
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","ref","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","colorScheme","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","__html","map","rules","i","src","getInjectedJavaScript","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAeA;;AAKA;;AAxBA;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7EA;AA+EA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,OAAO,GAAG,yBAAY,SAASA,OAAT,OAe3BC,GAf2B,EAgB1B;AAAA,MAfD;AACCC,IAAAA,cADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,IAAI,GAAG,EAHR;AAICC,IAAAA,IAAI,GAAG,IAJR;AAKCC,IAAAA,WAAW,GAAG,EALf;AAMCC,IAAAA,OAAO,GAAGR,WANX;AAOCS,IAAAA,MAAM,GAAGT,WAPV;AAQCU,IAAAA,KAAK,GAAG,EART;AASCC,IAAAA,IATD;AAUCC,IAAAA,GAVD;AAWCC,IAAAA,cAAc,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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif ( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","ref","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","colorScheme","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","__html","map","rules","i","src","getInjectedJavaScript","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAeA;;AAKA;;AAxBA;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7EA;AA+EA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,OAAO,GAAG,yBAAY,SAASA,OAAT,OAiB3BC,GAjB2B,EAkB1B;AAAA,MAjBD;AACCC,IAAAA,cADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,IAAI,GAAG,EAHR;AAICC,IAAAA,IAAI,GAAG,IAJR;AAKCC,IAAAA,WAAW,GAAG,EALf;AAMCC,IAAAA,OAAO,GAAGR,WANX;AAOCS,IAAAA,MAAM,GAAGT,WAPV;AAQCU,IAAAA,KAAK,GAAG,EART;AASCC,IAAAA,IATD;AAUCC,IAAAA,GAVD;AAWCC,IAAAA,cA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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif ( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}
|
|
@@ -48,8 +48,9 @@ function Fill(_ref) {
|
|
|
48
48
|
unregisterFill,
|
|
49
49
|
...slot
|
|
50
50
|
} = (0, _useSlot.default)(name);
|
|
51
|
+
const rerender = useForceUpdate();
|
|
51
52
|
const ref = (0, _element.useRef)({
|
|
52
|
-
rerender
|
|
53
|
+
rerender
|
|
53
54
|
});
|
|
54
55
|
(0, _element.useEffect)(() => {
|
|
55
56
|
// We register fills so we can keep track of their existence.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","rerender","ref","fillProps","wrappedChildren","ownerDocument"],"mappings":";;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiB,uBAAU,EAAV,CAAvB;AACA,QAAMC,OAAO,GAAG,qBAAQ,IAAR,CAAhB;AAEA,0BAAW,MAAM;AAChBA,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACZD,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GALD,EAKG,EALH;AAOA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAEc,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4C,sBAASJ,IAAT,CAAlD;AACA,QAAMK,QAAQ,GAAGV,cAAc,EAA/B;AACA,QAAMW,GAAG,GAAG,qBAAQ;AAAED,IAAAA;AAAF,GAAR,CAAZ;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACAH,IAAAA,YAAY,CAAEI,GAAF,CAAZ;AACA,WAAO,MAAM;AACZH,MAAAA,cAAc,CAAEG,GAAF,CAAd;AACA,KAFD;AAGA,GARD,EAQG,CAAEJ,YAAF,EAAgBC,cAAhB,CARH;;AAUA,MAAK,CAAEC,IAAI,CAACE,GAAP,IAAc,CAAEF,IAAI,CAACE,GAAL,CAASR,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACG,SAAP,CAAnB;AACA,GArBiD,CAuBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,4BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACE,GAAL,CAASR,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAO,2BAAcO,eAAd,EAA+BJ,IAAI,CAACE,GAAL,CAASR,OAAxC,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst rerender = useForceUpdate();\n\tconst ref = useRef( { rerender } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}
|