@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.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 +74 -5
- package/CONTRIBUTING.md +1 -1
- package/LICENSE.md +1 -1
- package/README.md +8 -4
- package/build/angle-picker-control/index.js +2 -0
- package/build/angle-picker-control/index.js.map +1 -1
- package/build/base-control/index.js +2 -3
- package/build/base-control/index.js.map +1 -1
- package/build/base-control/styles/base-control-styles.js +23 -13
- package/build/base-control/styles/base-control-styles.js.map +1 -1
- package/build/base-field/hook.js +1 -1
- package/build/base-field/hook.js.map +1 -1
- package/build/box-control/styles/box-control-styles.js +9 -9
- package/build/box-control/styles/box-control-styles.js.map +1 -1
- package/build/button/deprecated.js +2 -1
- package/build/button/deprecated.js.map +1 -1
- package/build/button/index.js +2 -1
- package/build/button/index.js.map +1 -1
- package/build/button/index.native.js +13 -3
- package/build/button/index.native.js.map +1 -1
- package/build/card/card/component.js +1 -1
- package/build/card/card/component.js.map +1 -1
- package/build/card/card/hook.js +1 -1
- package/build/card/card/hook.js.map +1 -1
- package/build/card/card-body/hook.js +1 -1
- package/build/card/card-body/hook.js.map +1 -1
- package/build/card/card-divider/hook.js +1 -1
- package/build/card/card-divider/hook.js.map +1 -1
- package/build/card/card-footer/hook.js +1 -1
- package/build/card/card-footer/hook.js.map +1 -1
- package/build/card/card-header/hook.js +1 -1
- package/build/card/card-header/hook.js.map +1 -1
- package/build/card/card-media/hook.js +1 -1
- package/build/card/card-media/hook.js.map +1 -1
- package/build/checkbox-control/index.js +1 -1
- package/build/checkbox-control/index.js.map +1 -1
- package/build/circular-option-picker/index.js +2 -0
- package/build/circular-option-picker/index.js.map +1 -1
- package/build/clipboard-button/index.js +1 -2
- package/build/clipboard-button/index.js.map +1 -1
- package/build/color-indicator/index.js +2 -0
- package/build/color-indicator/index.js.map +1 -1
- package/build/color-palette/index.js +2 -0
- package/build/color-palette/index.js.map +1 -1
- package/build/color-palette/index.native.js +4 -2
- package/build/color-palette/index.native.js.map +1 -1
- package/build/color-picker/color-display.js +4 -2
- package/build/color-picker/color-display.js.map +1 -1
- package/build/color-picker/color-input.js.map +1 -1
- package/build/color-picker/component.js +2 -5
- package/build/color-picker/component.js.map +1 -1
- package/build/color-picker/hex-input.js +3 -1
- package/build/color-picker/hex-input.js.map +1 -1
- package/build/color-picker/input-with-slider.js +3 -1
- package/build/color-picker/input-with-slider.js.map +1 -1
- package/build/color-picker/use-deprecated-props.js +2 -0
- package/build/color-picker/use-deprecated-props.js.map +1 -1
- package/build/confirm-dialog/component.js +107 -0
- package/build/confirm-dialog/component.js.map +1 -0
- package/build/confirm-dialog/index.js +16 -0
- package/build/confirm-dialog/index.js.map +1 -0
- package/build/confirm-dialog/styles.js +30 -0
- package/build/confirm-dialog/styles.js.map +1 -0
- package/build/confirm-dialog/types.js +6 -0
- package/build/confirm-dialog/types.js.map +1 -0
- package/build/custom-gradient-picker/index.js +1 -0
- package/build/custom-gradient-picker/index.js.map +1 -1
- package/build/date-time/date.js +63 -86
- package/build/date-time/date.js.map +1 -1
- package/build/date-time/time.js +1 -1
- package/build/date-time/time.js.map +1 -1
- package/build/date-time/utils.js +32 -0
- package/build/date-time/utils.js.map +1 -0
- package/build/divider/component.js +8 -7
- package/build/divider/component.js.map +1 -1
- package/build/divider/styles.js +38 -13
- package/build/divider/styles.js.map +1 -1
- package/build/drop-zone/index.js +14 -6
- package/build/drop-zone/index.js.map +1 -1
- package/build/drop-zone/provider.js +1 -0
- package/build/drop-zone/provider.js.map +1 -1
- package/build/dropdown/index.js +3 -3
- package/build/dropdown/index.js.map +1 -1
- package/build/elevation/hook.js +5 -5
- package/build/elevation/hook.js.map +1 -1
- package/build/external-link/styles/external-link-styles.js +5 -5
- package/build/external-link/styles/external-link-styles.js.map +1 -1
- package/build/flex/flex/hook.js +4 -4
- package/build/flex/flex/hook.js.map +1 -1
- package/build/flyout/styles.js +2 -2
- package/build/flyout/styles.js.map +1 -1
- package/build/focusable-iframe/index.js +1 -0
- package/build/focusable-iframe/index.js.map +1 -1
- package/build/form-token-field/suggestions-list.js +75 -81
- package/build/form-token-field/suggestions-list.js.map +1 -1
- package/build/grid/hook.js +2 -2
- package/build/grid/hook.js.map +1 -1
- package/build/heading/component.js +0 -1
- package/build/heading/component.js.map +1 -1
- package/build/higher-order/with-focus-outside/index.js +2 -0
- package/build/higher-order/with-focus-outside/index.js.map +1 -1
- package/build/icon/index.js +0 -1
- package/build/icon/index.js.map +1 -1
- package/build/index.js +8 -0
- package/build/index.js.map +1 -1
- package/build/input-control/index.js.map +1 -1
- package/build/input-control/input-base.js +0 -1
- package/build/input-control/input-base.js.map +1 -1
- package/build/input-control/input-field.js.map +1 -1
- package/build/input-control/reducer/actions.js +0 -1
- package/build/input-control/reducer/actions.js.map +1 -1
- package/build/input-control/reducer/reducer.js.map +1 -1
- package/build/input-control/reducer/state.js +0 -1
- package/build/input-control/reducer/state.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +51 -37
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/item-group/item/component.js +0 -1
- package/build/item-group/item/component.js.map +1 -1
- package/build/item-group/item/hook.js +1 -2
- package/build/item-group/item/hook.js.map +1 -1
- package/build/item-group/item-group/component.js +0 -1
- package/build/item-group/item-group/component.js.map +1 -1
- package/build/mobile/bottom-sheet/bottom-sheet-context.native.js +3 -1
- package/build/mobile/bottom-sheet/bottom-sheet-context.native.js.map +1 -1
- package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +4 -12
- package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
- package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +23 -5
- package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
- package/build/mobile/bottom-sheet/cell.native.js +3 -5
- package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/index.native.js +16 -16
- package/build/mobile/bottom-sheet/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet/link-suggestion-item-cell.native.js +10 -3
- package/build/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/range-text-input.native.js +2 -3
- package/build/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
- package/build/mobile/color-settings/index.native.js +6 -2
- package/build/mobile/color-settings/index.native.js.map +1 -1
- package/build/mobile/color-settings/palette.screen.native.js +12 -6
- package/build/mobile/color-settings/palette.screen.native.js.map +1 -1
- package/build/mobile/color-settings/utils.native.js +9 -3
- package/build/mobile/color-settings/utils.native.js.map +1 -1
- package/build/mobile/global-styles-context/utils.native.js +1 -1
- package/build/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build/mobile/gridicons/index.native.js +3 -1
- package/build/mobile/gridicons/index.native.js.map +1 -1
- package/build/mobile/keyboard-avoiding-view/index.ios.js +6 -8
- package/build/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
- package/build/mobile/link-picker/index.native.js +47 -4
- package/build/mobile/link-picker/index.native.js.map +1 -1
- package/build/mobile/link-picker/link-picker-screen.native.js +18 -5
- package/build/mobile/link-picker/link-picker-screen.native.js.map +1 -1
- package/build/mobile/link-settings/index.native.js +13 -1
- package/build/mobile/link-settings/index.native.js.map +1 -1
- package/build/mobile/readable-content-view/index.native.js +2 -2
- package/build/mobile/readable-content-view/index.native.js.map +1 -1
- package/build/mobile/utils/use-is-floating-keyboard.native.js +2 -2
- package/build/mobile/utils/use-is-floating-keyboard.native.js.map +1 -1
- package/build/mobile/utils/use-unit-converter-to-mobile.native.js +2 -2
- package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
- package/build/modal/aria-helper.js +2 -0
- package/build/modal/aria-helper.js.map +1 -1
- package/build/modal/index.js +18 -20
- package/build/modal/index.js.map +1 -1
- package/build/navigator/context.js +5 -1
- package/build/navigator/context.js.map +1 -1
- package/build/navigator/navigator-provider/component.js +42 -22
- package/build/navigator/navigator-provider/component.js.map +1 -1
- package/build/navigator/navigator-screen/component.js +57 -29
- package/build/navigator/navigator-screen/component.js.map +1 -1
- package/build/navigator/use-navigator.js +8 -8
- package/build/navigator/use-navigator.js.map +1 -1
- package/build/notice/index.native.js +2 -2
- package/build/notice/index.native.js.map +1 -1
- package/build/palette-edit/index.js +8 -3
- package/build/palette-edit/index.js.map +1 -1
- package/build/palette-edit/styles.js +11 -13
- package/build/palette-edit/styles.js.map +1 -1
- package/build/placeholder/index.js +4 -4
- package/build/placeholder/index.js.map +1 -1
- package/build/range-control/styles/range-control-styles.js +29 -29
- package/build/range-control/styles/range-control-styles.js.map +1 -1
- package/build/resizable-box/index.js.map +1 -1
- package/build/resizable-box/resize-tooltip/index.js.map +1 -1
- package/build/resizable-box/resize-tooltip/label.js +0 -1
- package/build/resizable-box/resize-tooltip/label.js.map +1 -1
- package/build/sandbox/index.native.js +5 -5
- package/build/sandbox/index.native.js.map +1 -1
- package/build/scrollable/hook.js +1 -1
- package/build/scrollable/hook.js.map +1 -1
- package/build/select-control/styles/select-control-styles.js +33 -9
- package/build/select-control/styles/select-control-styles.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/fill.js +11 -2
- package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build/spacer/component.js +0 -1
- package/build/spacer/component.js.map +1 -1
- package/build/spinner/index.js +44 -5
- package/build/spinner/index.js.map +1 -1
- package/build/spinner/index.native.js +4 -2
- package/build/spinner/index.native.js.map +1 -1
- package/build/spinner/styles.js +56 -0
- package/build/spinner/styles.js.map +1 -0
- package/build/style-provider/index.js +2 -0
- package/build/style-provider/index.js.map +1 -1
- package/build/surface/hook.js +1 -1
- package/build/surface/hook.js.map +1 -1
- package/build/text/get-line-height.js +0 -1
- package/build/text/get-line-height.js.map +1 -1
- package/build/text/hook.js +5 -5
- package/build/text/hook.js.map +1 -1
- package/build/tip/index.js +4 -8
- package/build/tip/index.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +9 -14
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +3 -14
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option/component.js +0 -1
- package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option/styles.js +8 -8
- package/build/toggle-group-control/toggle-group-control-option/styles.js.map +1 -1
- package/build/tools-panel/styles.js +12 -10
- package/build/tools-panel/styles.js.map +1 -1
- package/build/tools-panel/tools-panel/component.js +6 -9
- package/build/tools-panel/tools-panel/component.js.map +1 -1
- package/build/tools-panel/tools-panel/hook.js +51 -44
- package/build/tools-panel/tools-panel/hook.js.map +1 -1
- package/build/tools-panel/tools-panel-header/component.js +0 -1
- package/build/tools-panel/tools-panel-header/component.js.map +1 -1
- package/build/tools-panel/tools-panel-header/hook.js +3 -3
- package/build/tools-panel/tools-panel-header/hook.js.map +1 -1
- package/build/tools-panel/tools-panel-item/component.js +0 -1
- package/build/tools-panel/tools-panel-item/component.js.map +1 -1
- package/build/tools-panel/tools-panel-item/hook.js +9 -3
- package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build/tree-grid/index.js +13 -6
- package/build/tree-grid/index.js.map +1 -1
- package/build/truncate/hook.js +2 -2
- package/build/truncate/hook.js.map +1 -1
- package/build/ui/shortcut/component.js +0 -1
- package/build/ui/shortcut/component.js.map +1 -1
- package/build/ui/utils/font-size.js +0 -1
- package/build/ui/utils/font-size.js.map +1 -1
- package/build/ui/utils/get-valid-children.js +0 -1
- package/build/ui/utils/get-valid-children.js.map +1 -1
- package/build/unit-control/index.js +0 -1
- package/build/unit-control/index.js.map +1 -1
- package/build/unit-control/styles/unit-control-styles.js +23 -41
- package/build/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build/unit-control/unit-select-control.js.map +1 -1
- package/build/utils/colors-values.js +6 -3
- package/build/utils/colors-values.js.map +1 -1
- package/build/utils/config-values.js +1 -4
- package/build/utils/config-values.js.map +1 -1
- package/build/utils/hooks/use-combined-ref.js.map +1 -1
- package/build/utils/hooks/use-latest-ref.js +0 -1
- package/build/utils/hooks/use-latest-ref.js.map +1 -1
- package/build/z-stack/component.js +0 -1
- package/build/z-stack/component.js.map +1 -1
- package/build/z-stack/styles.js +10 -8
- package/build/z-stack/styles.js.map +1 -1
- package/build-module/angle-picker-control/index.js +2 -0
- package/build-module/angle-picker-control/index.js.map +1 -1
- package/build-module/base-control/index.js +3 -4
- package/build-module/base-control/index.js.map +1 -1
- package/build-module/base-control/styles/base-control-styles.js +20 -12
- package/build-module/base-control/styles/base-control-styles.js.map +1 -1
- package/build-module/base-field/hook.js +1 -1
- package/build-module/base-field/hook.js.map +1 -1
- package/build-module/box-control/styles/box-control-styles.js +9 -9
- package/build-module/box-control/styles/box-control-styles.js.map +1 -1
- package/build-module/button/deprecated.js +2 -1
- package/build-module/button/deprecated.js.map +1 -1
- package/build-module/button/index.js +2 -1
- package/build-module/button/index.js.map +1 -1
- package/build-module/button/index.native.js +13 -3
- package/build-module/button/index.native.js.map +1 -1
- package/build-module/card/card/component.js +1 -1
- package/build-module/card/card/component.js.map +1 -1
- package/build-module/card/card/hook.js +1 -1
- package/build-module/card/card/hook.js.map +1 -1
- package/build-module/card/card-body/hook.js +1 -1
- package/build-module/card/card-body/hook.js.map +1 -1
- package/build-module/card/card-divider/hook.js +1 -1
- package/build-module/card/card-divider/hook.js.map +1 -1
- package/build-module/card/card-footer/hook.js +1 -1
- package/build-module/card/card-footer/hook.js.map +1 -1
- package/build-module/card/card-header/hook.js +1 -1
- package/build-module/card/card-header/hook.js.map +1 -1
- package/build-module/card/card-media/hook.js +1 -1
- package/build-module/card/card-media/hook.js.map +1 -1
- package/build-module/checkbox-control/index.js +1 -1
- package/build-module/checkbox-control/index.js.map +1 -1
- package/build-module/circular-option-picker/index.js +1 -0
- package/build-module/circular-option-picker/index.js.map +1 -1
- package/build-module/clipboard-button/index.js +1 -2
- package/build-module/clipboard-button/index.js.map +1 -1
- package/build-module/color-indicator/index.js +1 -0
- package/build-module/color-indicator/index.js.map +1 -1
- package/build-module/color-palette/index.js +1 -0
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/color-palette/index.native.js +4 -2
- package/build-module/color-palette/index.native.js.map +1 -1
- package/build-module/color-picker/color-display.js +3 -2
- package/build-module/color-picker/color-display.js.map +1 -1
- package/build-module/color-picker/color-input.js.map +1 -1
- package/build-module/color-picker/component.js +2 -4
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/hex-input.js +2 -1
- package/build-module/color-picker/hex-input.js.map +1 -1
- package/build-module/color-picker/input-with-slider.js +2 -1
- package/build-module/color-picker/input-with-slider.js.map +1 -1
- package/build-module/color-picker/use-deprecated-props.js +3 -2
- package/build-module/color-picker/use-deprecated-props.js.map +1 -1
- package/build-module/confirm-dialog/component.js +87 -0
- package/build-module/confirm-dialog/component.js.map +1 -0
- package/build-module/confirm-dialog/index.js +6 -0
- package/build-module/confirm-dialog/index.js.map +1 -0
- package/build-module/confirm-dialog/styles.js +25 -0
- package/build-module/confirm-dialog/styles.js.map +1 -0
- package/build-module/confirm-dialog/types.js +2 -0
- package/build-module/confirm-dialog/types.js.map +1 -0
- package/build-module/custom-gradient-picker/index.js +1 -0
- package/build-module/custom-gradient-picker/index.js.map +1 -1
- package/build-module/date-time/date.js +63 -87
- package/build-module/date-time/date.js.map +1 -1
- package/build-module/date-time/time.js +1 -1
- package/build-module/date-time/time.js.map +1 -1
- package/build-module/date-time/utils.js +20 -0
- package/build-module/date-time/utils.js.map +1 -0
- package/build-module/divider/component.js +9 -8
- package/build-module/divider/component.js.map +1 -1
- package/build-module/divider/styles.js +37 -13
- package/build-module/divider/styles.js.map +1 -1
- package/build-module/drop-zone/index.js +14 -6
- package/build-module/drop-zone/index.js.map +1 -1
- package/build-module/drop-zone/provider.js +1 -0
- package/build-module/drop-zone/provider.js.map +1 -1
- package/build-module/dropdown/index.js +3 -3
- package/build-module/dropdown/index.js.map +1 -1
- package/build-module/elevation/hook.js +5 -5
- package/build-module/elevation/hook.js.map +1 -1
- package/build-module/external-link/styles/external-link-styles.js +5 -5
- package/build-module/external-link/styles/external-link-styles.js.map +1 -1
- package/build-module/flex/flex/hook.js +4 -4
- package/build-module/flex/flex/hook.js.map +1 -1
- package/build-module/flyout/styles.js +2 -2
- package/build-module/flyout/styles.js.map +1 -1
- package/build-module/focusable-iframe/index.js +1 -0
- package/build-module/focusable-iframe/index.js.map +1 -1
- package/build-module/form-token-field/suggestions-list.js +73 -79
- package/build-module/form-token-field/suggestions-list.js.map +1 -1
- package/build-module/grid/hook.js +2 -2
- package/build-module/grid/hook.js.map +1 -1
- package/build-module/heading/component.js +0 -1
- package/build-module/heading/component.js.map +1 -1
- package/build-module/higher-order/with-focus-outside/index.js +1 -0
- package/build-module/higher-order/with-focus-outside/index.js.map +1 -1
- package/build-module/icon/index.js +0 -1
- package/build-module/icon/index.js.map +1 -1
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/build-module/input-control/index.js +1 -1
- package/build-module/input-control/index.js.map +1 -1
- package/build-module/input-control/input-base.js +0 -1
- package/build-module/input-control/input-base.js.map +1 -1
- package/build-module/input-control/input-field.js +1 -1
- package/build-module/input-control/input-field.js.map +1 -1
- package/build-module/input-control/reducer/actions.js +0 -1
- package/build-module/input-control/reducer/actions.js.map +1 -1
- package/build-module/input-control/reducer/reducer.js +1 -1
- package/build-module/input-control/reducer/reducer.js.map +1 -1
- package/build-module/input-control/reducer/state.js +0 -1
- package/build-module/input-control/reducer/state.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +51 -37
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/item-group/item/component.js +0 -1
- package/build-module/item-group/item/component.js.map +1 -1
- package/build-module/item-group/item/hook.js +1 -2
- package/build-module/item-group/item/hook.js.map +1 -1
- package/build-module/item-group/item-group/component.js +0 -1
- package/build-module/item-group/item-group/component.js.map +1 -1
- package/build-module/mobile/bottom-sheet/bottom-sheet-context.native.js +3 -1
- package/build-module/mobile/bottom-sheet/bottom-sheet-context.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +5 -13
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +23 -5
- package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/cell.native.js +3 -3
- package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/index.native.js +16 -13
- package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js +10 -4
- package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/range-text-input.native.js +2 -2
- package/build-module/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
- package/build-module/mobile/color-settings/index.native.js +6 -2
- package/build-module/mobile/color-settings/index.native.js.map +1 -1
- package/build-module/mobile/color-settings/palette.screen.native.js +12 -6
- package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
- package/build-module/mobile/color-settings/utils.native.js +7 -3
- package/build-module/mobile/color-settings/utils.native.js.map +1 -1
- package/build-module/mobile/global-styles-context/utils.native.js +1 -1
- package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build-module/mobile/gridicons/index.native.js +1 -0
- package/build-module/mobile/gridicons/index.native.js.map +1 -1
- package/build-module/mobile/keyboard-avoiding-view/index.ios.js +6 -6
- package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
- package/build-module/mobile/link-picker/index.native.js +50 -7
- package/build-module/mobile/link-picker/index.native.js.map +1 -1
- package/build-module/mobile/link-picker/link-picker-screen.native.js +13 -5
- package/build-module/mobile/link-picker/link-picker-screen.native.js.map +1 -1
- package/build-module/mobile/link-settings/index.native.js +12 -1
- package/build-module/mobile/link-settings/index.native.js.map +1 -1
- package/build-module/mobile/readable-content-view/index.native.js +2 -2
- package/build-module/mobile/readable-content-view/index.native.js.map +1 -1
- package/build-module/mobile/utils/use-is-floating-keyboard.native.js +2 -2
- package/build-module/mobile/utils/use-is-floating-keyboard.native.js.map +1 -1
- package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js +2 -2
- package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
- package/build-module/modal/aria-helper.js +2 -0
- package/build-module/modal/aria-helper.js.map +1 -1
- package/build-module/modal/index.js +16 -19
- package/build-module/modal/index.js.map +1 -1
- package/build-module/navigator/context.js +5 -1
- package/build-module/navigator/context.js.map +1 -1
- package/build-module/navigator/navigator-provider/component.js +43 -24
- package/build-module/navigator/navigator-provider/component.js.map +1 -1
- package/build-module/navigator/navigator-screen/component.js +57 -32
- package/build-module/navigator/navigator-screen/component.js.map +1 -1
- package/build-module/navigator/use-navigator.js +8 -8
- package/build-module/navigator/use-navigator.js.map +1 -1
- package/build-module/notice/index.native.js +2 -2
- package/build-module/notice/index.native.js.map +1 -1
- package/build-module/palette-edit/index.js +8 -3
- package/build-module/palette-edit/index.js.map +1 -1
- package/build-module/palette-edit/styles.js +11 -12
- package/build-module/palette-edit/styles.js.map +1 -1
- package/build-module/placeholder/index.js +4 -4
- package/build-module/placeholder/index.js.map +1 -1
- package/build-module/range-control/styles/range-control-styles.js +29 -29
- package/build-module/range-control/styles/range-control-styles.js.map +1 -1
- package/build-module/resizable-box/index.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/index.js +3 -3
- package/build-module/resizable-box/resize-tooltip/index.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/label.js +0 -1
- package/build-module/resizable-box/resize-tooltip/label.js.map +1 -1
- package/build-module/sandbox/index.native.js +5 -5
- package/build-module/sandbox/index.native.js.map +1 -1
- package/build-module/scrollable/hook.js +1 -1
- package/build-module/scrollable/hook.js.map +1 -1
- package/build-module/select-control/styles/select-control-styles.js +33 -9
- package/build-module/select-control/styles/select-control-styles.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/fill.js +11 -2
- package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
- package/build-module/spacer/component.js +0 -1
- package/build-module/spacer/component.js.map +1 -1
- package/build-module/spinner/index.js +40 -5
- package/build-module/spinner/index.js.map +1 -1
- package/build-module/spinner/index.native.js +4 -2
- package/build-module/spinner/index.native.js.map +1 -1
- package/build-module/spinner/styles.js +49 -0
- package/build-module/spinner/styles.js.map +1 -0
- package/build-module/style-provider/index.js +1 -0
- package/build-module/style-provider/index.js.map +1 -1
- package/build-module/surface/hook.js +1 -1
- package/build-module/surface/hook.js.map +1 -1
- package/build-module/text/get-line-height.js +0 -1
- package/build-module/text/get-line-height.js.map +1 -1
- package/build-module/text/hook.js +5 -5
- package/build-module/text/hook.js.map +1 -1
- package/build-module/tip/index.js +4 -8
- package/build-module/tip/index.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +10 -13
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +3 -11
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option/component.js +0 -1
- package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option/styles.js +8 -8
- package/build-module/toggle-group-control/toggle-group-control-option/styles.js.map +1 -1
- package/build-module/tools-panel/styles.js +12 -11
- package/build-module/tools-panel/styles.js.map +1 -1
- package/build-module/tools-panel/tools-panel/component.js +5 -9
- package/build-module/tools-panel/tools-panel/component.js.map +1 -1
- package/build-module/tools-panel/tools-panel/hook.js +52 -45
- package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
- package/build-module/tools-panel/tools-panel-header/component.js +0 -1
- package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
- package/build-module/tools-panel/tools-panel-header/hook.js +3 -3
- package/build-module/tools-panel/tools-panel-header/hook.js.map +1 -1
- package/build-module/tools-panel/tools-panel-item/component.js +0 -1
- package/build-module/tools-panel/tools-panel-item/component.js.map +1 -1
- package/build-module/tools-panel/tools-panel-item/hook.js +9 -3
- package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build-module/tree-grid/index.js +12 -6
- package/build-module/tree-grid/index.js.map +1 -1
- package/build-module/truncate/hook.js +2 -2
- package/build-module/truncate/hook.js.map +1 -1
- package/build-module/ui/shortcut/component.js +0 -1
- package/build-module/ui/shortcut/component.js.map +1 -1
- package/build-module/ui/utils/font-size.js +0 -1
- package/build-module/ui/utils/font-size.js.map +1 -1
- package/build-module/ui/utils/get-valid-children.js +0 -1
- package/build-module/ui/utils/get-valid-children.js.map +1 -1
- package/build-module/unit-control/index.js +0 -1
- package/build-module/unit-control/index.js.map +1 -1
- package/build-module/unit-control/styles/unit-control-styles.js +23 -41
- package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
- package/build-module/unit-control/unit-select-control.js +1 -2
- package/build-module/unit-control/unit-select-control.js.map +1 -1
- package/build-module/utils/colors-values.js +6 -3
- package/build-module/utils/colors-values.js.map +1 -1
- package/build-module/utils/config-values.js +1 -4
- package/build-module/utils/config-values.js.map +1 -1
- package/build-module/utils/hooks/use-combined-ref.js +0 -1
- package/build-module/utils/hooks/use-combined-ref.js.map +1 -1
- package/build-module/utils/hooks/use-latest-ref.js +0 -1
- package/build-module/utils/hooks/use-latest-ref.js.map +1 -1
- package/build-module/z-stack/component.js +0 -1
- package/build-module/z-stack/component.js.map +1 -1
- package/build-module/z-stack/styles.js +13 -8
- package/build-module/z-stack/styles.js.map +1 -1
- package/build-style/style-rtl.css +36 -15
- package/build-style/style.css +36 -15
- package/build-types/base-control/index.d.ts.map +1 -1
- package/build-types/base-control/styles/base-control-styles.d.ts +4 -0
- package/build-types/base-control/styles/base-control-styles.d.ts.map +1 -1
- package/build-types/base-field/hook.d.ts +16 -16
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/card/card/hook.d.ts +16 -16
- package/build-types/card/card-body/hook.d.ts +16 -16
- package/build-types/card/card-divider/hook.d.ts +18 -18
- package/build-types/card/card-footer/hook.d.ts +17 -17
- package/build-types/card/card-header/hook.d.ts +16 -16
- package/build-types/card/card-media/hook.d.ts +16 -16
- package/build-types/card/types.d.ts.map +1 -1
- package/build-types/color-picker/color-display.d.ts +1 -0
- package/build-types/color-picker/color-display.d.ts.map +1 -1
- package/build-types/color-picker/color-input.d.ts +1 -0
- package/build-types/color-picker/color-input.d.ts.map +1 -1
- package/build-types/color-picker/hex-input.d.ts +1 -0
- package/build-types/color-picker/hex-input.d.ts.map +1 -1
- package/build-types/color-picker/hsl-input.d.ts +1 -0
- package/build-types/color-picker/hsl-input.d.ts.map +1 -1
- package/build-types/color-picker/input-with-slider.d.ts +1 -0
- package/build-types/color-picker/input-with-slider.d.ts.map +1 -1
- package/build-types/color-picker/legacy-adapter.d.ts +1 -0
- package/build-types/color-picker/legacy-adapter.d.ts.map +1 -1
- package/build-types/color-picker/picker.d.ts +1 -0
- package/build-types/color-picker/picker.d.ts.map +1 -1
- package/build-types/color-picker/rgb-input.d.ts +1 -0
- package/build-types/color-picker/rgb-input.d.ts.map +1 -1
- package/build-types/color-picker/styles.d.ts +1 -1
- package/build-types/confirm-dialog/component.d.ts +4 -4
- package/build-types/divider/component.d.ts +8 -7
- package/build-types/divider/component.d.ts.map +1 -1
- package/build-types/divider/styles.d.ts +2 -2
- package/build-types/divider/styles.d.ts.map +1 -1
- package/build-types/divider/types.d.ts +5 -5
- package/build-types/divider/types.d.ts.map +1 -1
- package/build-types/dropdown/index.d.ts +1 -13
- package/build-types/dropdown/index.d.ts.map +1 -1
- package/build-types/elevation/hook.d.ts +15 -15
- package/build-types/elevation/hook.d.ts.map +1 -1
- package/build-types/elevation/types.d.ts.map +1 -1
- package/build-types/flex/flex/hook.d.ts +16 -16
- package/build-types/flex/flex/hook.d.ts.map +1 -1
- package/build-types/flex/flex-block/hook.d.ts +16 -16
- package/build-types/flex/flex-item/hook.d.ts +16 -16
- package/build-types/flex/types.d.ts.map +1 -1
- package/build-types/flyout/flyout/hook.d.ts +17 -17
- package/build-types/flyout/styles.d.ts +7 -9
- package/build-types/flyout/styles.d.ts.map +1 -1
- package/build-types/flyout/types.d.ts.map +1 -1
- package/build-types/grid/hook.d.ts +16 -16
- package/build-types/grid/hook.d.ts.map +1 -1
- package/build-types/grid/types.d.ts.map +1 -1
- package/build-types/h-stack/hook.d.ts +17 -17
- package/build-types/h-stack/hook.d.ts.map +1 -1
- package/build-types/h-stack/types.d.ts.map +1 -1
- package/build-types/heading/component.d.ts.map +1 -1
- package/build-types/heading/hook.d.ts +16 -16
- package/build-types/icon/index.d.ts.map +1 -1
- package/build-types/input-control/index.d.ts +1 -1
- package/build-types/input-control/index.d.ts.map +1 -1
- package/build-types/input-control/input-base.d.ts.map +1 -1
- package/build-types/input-control/input-field.d.ts +1 -1
- package/build-types/input-control/input-field.d.ts.map +1 -1
- package/build-types/input-control/reducer/actions.d.ts.map +1 -1
- package/build-types/input-control/reducer/reducer.d.ts.map +1 -1
- package/build-types/input-control/reducer/state.d.ts.map +1 -1
- package/build-types/input-control/styles/input-control-styles.d.ts +1 -2
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/input-control/types.d.ts +2 -1
- package/build-types/input-control/types.d.ts.map +1 -1
- package/build-types/item-group/item/component.d.ts.map +1 -1
- package/build-types/item-group/item/hook.d.ts +16 -16
- package/build-types/item-group/item/hook.d.ts.map +1 -1
- package/build-types/item-group/item-group/component.d.ts.map +1 -1
- package/build-types/item-group/item-group/hook.d.ts +16 -16
- package/build-types/navigator/context.d.ts.map +1 -1
- package/build-types/navigator/navigator-provider/component.d.ts +16 -17
- package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/component.d.ts +16 -16
- package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
- package/build-types/navigator/types.d.ts +10 -9
- package/build-types/navigator/types.d.ts.map +1 -1
- package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
- package/build-types/resizable-box/index.d.ts +1 -1
- package/build-types/resizable-box/index.d.ts.map +1 -1
- package/build-types/resizable-box/resize-tooltip/index.d.ts +1 -1
- package/build-types/resizable-box/resize-tooltip/index.d.ts.map +1 -1
- package/build-types/resizable-box/resize-tooltip/label.d.ts.map +1 -1
- package/build-types/scrollable/hook.d.ts +16 -16
- package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
- package/build-types/select-control/types.d.ts +1 -1
- package/build-types/select-control/types.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
- package/build-types/spacer/component.d.ts.map +1 -1
- package/build-types/spacer/hook.d.ts +16 -16
- package/build-types/spacer/types.d.ts.map +1 -1
- package/build-types/spinner/index.d.ts +18 -1
- package/build-types/spinner/index.d.ts.map +1 -1
- package/build-types/surface/hook.d.ts +16 -16
- package/build-types/surface/hook.d.ts.map +1 -1
- package/build-types/text/get-line-height.d.ts.map +1 -1
- package/build-types/text/hook.d.ts +16 -16
- package/build-types/text/hook.d.ts.map +1 -1
- package/build-types/text/types.d.ts.map +1 -1
- package/build-types/tip/index.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +0 -5
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/types.d.ts +1 -7
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/tools-panel/styles.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel/component.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel/hook.d.ts +24 -20
- package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-header/hook.d.ts +16 -16
- package/build-types/tools-panel/tools-panel-item/component.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-item/hook.d.ts +16 -16
- package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
- package/build-types/tools-panel/types.d.ts +14 -0
- package/build-types/tools-panel/types.d.ts.map +1 -1
- package/build-types/truncate/hook.d.ts +16 -16
- package/build-types/ui/context/wordpress-component.d.ts.map +1 -1
- package/build-types/ui/control-group/hook.d.ts +18 -18
- package/build-types/ui/control-group/types.d.ts.map +1 -1
- package/build-types/ui/control-label/hook.d.ts +16 -16
- package/build-types/ui/form-group/form-group.d.ts +4 -4
- package/build-types/ui/form-group/types.d.ts.map +1 -1
- package/build-types/ui/form-group/use-form-group.d.ts +55 -55
- package/build-types/ui/shortcut/component.d.ts.map +1 -1
- package/build-types/ui/tooltip/types.d.ts.map +1 -1
- package/build-types/ui/utils/font-size.d.ts.map +1 -1
- package/build-types/ui/utils/get-valid-children.d.ts.map +1 -1
- package/build-types/unit-control/index.d.ts +3 -2
- package/build-types/unit-control/index.d.ts.map +1 -1
- package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -0
- package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
- package/build-types/unit-control/types.d.ts +4 -3
- package/build-types/unit-control/types.d.ts.map +1 -1
- package/build-types/unit-control/unit-select-control.d.ts.map +1 -1
- package/build-types/utils/colors-values.d.ts +1 -0
- package/build-types/utils/colors-values.d.ts.map +1 -1
- package/build-types/utils/config-values.d.ts +1 -5
- package/build-types/utils/config-values.d.ts.map +1 -1
- package/build-types/utils/hooks/use-combined-ref.d.ts.map +1 -1
- package/build-types/utils/hooks/use-latest-ref.d.ts.map +1 -1
- package/build-types/v-stack/hook.d.ts +16 -16
- package/build-types/v-stack/types.d.ts.map +1 -1
- package/build-types/z-stack/component.d.ts +1 -1
- package/build-types/z-stack/component.d.ts.map +1 -1
- package/build-types/z-stack/styles.d.ts.map +1 -1
- package/package.json +23 -22
- package/src/alignment-matrix-control/stories/index.js +1 -1
- package/src/angle-picker-control/index.js +2 -0
- package/src/base-control/index.js +11 -2
- package/src/base-control/stories/index.js +1 -1
- package/src/base-control/styles/base-control-styles.js +10 -1
- package/src/base-field/hook.js +1 -1
- package/src/box-control/styles/box-control-styles.js +1 -1
- package/src/button/deprecated.js +1 -0
- package/src/button/index.js +1 -0
- package/src/button/index.native.js +15 -1
- package/src/button/stories/index.js +1 -1
- package/src/button/style.scss +14 -0
- package/src/card/card/README.md +3 -3
- package/src/card/card/component.js +1 -1
- package/src/card/card/hook.js +1 -1
- package/src/card/card-body/hook.js +1 -1
- package/src/card/card-divider/hook.js +1 -1
- package/src/card/card-footer/hook.js +1 -1
- package/src/card/card-header/hook.js +1 -1
- package/src/card/card-media/hook.js +1 -1
- package/src/card/stories/index.js +1 -1
- package/src/card/test/__snapshots__/index.js.snap +6 -6
- package/src/card/types.ts +0 -1
- package/src/checkbox-control/index.js +1 -1
- package/src/checkbox-control/stories/index.js +1 -1
- package/src/circular-option-picker/index.js +1 -0
- package/src/clipboard-button/index.js +1 -2
- package/src/color-indicator/README.md +28 -0
- package/src/color-indicator/index.js +2 -0
- package/src/color-indicator/stories/index.js +1 -1
- package/src/color-indicator/style.scss +5 -8
- package/src/color-palette/index.js +1 -0
- package/src/color-palette/index.native.js +2 -0
- package/src/color-palette/stories/index.js +1 -1
- package/src/color-palette/test/__snapshots__/index.js.snap +1 -1
- package/src/color-picker/README.md +1 -1
- package/src/color-picker/color-display.tsx +4 -3
- package/src/color-picker/color-input.tsx +1 -1
- package/src/color-picker/component.tsx +3 -4
- package/src/color-picker/hex-input.tsx +2 -1
- package/src/color-picker/input-with-slider.tsx +2 -1
- package/src/color-picker/stories/index.js +1 -1
- package/src/color-picker/use-deprecated-props.ts +2 -1
- package/src/combobox-control/README.md +2 -2
- package/src/combobox-control/stories/index.js +6 -2
- package/src/combobox-control/style.scss +2 -2
- package/src/confirm-dialog/README.md +128 -0
- package/src/confirm-dialog/component.tsx +117 -0
- package/src/confirm-dialog/index.tsx +6 -0
- package/src/confirm-dialog/stories/index.js +123 -0
- package/src/confirm-dialog/styles.ts +18 -0
- package/src/confirm-dialog/test/index.js +302 -0
- package/src/confirm-dialog/types.ts +25 -0
- package/src/custom-gradient-picker/index.js +1 -0
- package/src/custom-gradient-picker/style.scss +0 -5
- package/src/custom-select-control/stories/index.js +27 -0
- package/src/date-time/README.md +9 -2
- package/src/date-time/date.js +67 -84
- package/src/date-time/stories/index.js +1 -1
- package/src/date-time/stories/time.js +1 -1
- package/src/date-time/test/date.js +3 -29
- package/src/date-time/test/time.js +2 -2
- package/src/date-time/test/utils.js +32 -0
- package/src/date-time/time.js +2 -2
- package/src/date-time/utils.js +18 -0
- package/src/dimension-control/README.md +3 -1
- package/src/divider/README.md +33 -5
- package/src/divider/component.tsx +8 -8
- package/src/divider/stories/index.js +43 -17
- package/src/divider/styles.ts +53 -16
- package/src/divider/test/__snapshots__/index.js.snap +11 -11
- package/src/divider/test/index.js +4 -4
- package/src/divider/types.ts +5 -5
- package/src/drop-zone/index.js +14 -6
- package/src/drop-zone/provider.js +1 -0
- package/src/dropdown/index.js +14 -13
- package/src/dropdown-menu/stories/index.js +1 -1
- package/src/duotone-picker/README.md +1 -1
- package/src/elevation/hook.js +1 -0
- package/src/elevation/stories/index.js +1 -1
- package/src/elevation/types.ts +0 -1
- package/src/external-link/stories/index.js +1 -1
- package/src/external-link/styles/external-link-styles.js +3 -3
- package/src/flex/flex/hook.js +1 -0
- package/src/flex/types.ts +0 -1
- package/src/flyout/styles.ts +4 -2
- package/src/flyout/types.ts +0 -1
- package/src/focusable-iframe/index.js +1 -0
- package/src/font-size-picker/stories/index.js +1 -1
- package/src/form-token-field/stories/index.js +1 -1
- package/src/form-token-field/style.scss +1 -1
- package/src/form-token-field/suggestions-list.js +109 -120
- package/src/form-token-field/test/index.js +4 -2
- package/src/gradient-picker/README.md +94 -0
- package/src/gradient-picker/stories/index.js +1 -1
- package/src/grid/hook.js +1 -0
- package/src/grid/stories/index.js +1 -1
- package/src/grid/types.ts +0 -1
- package/src/guide/stories/index.js +1 -1
- package/src/h-stack/types.ts +0 -1
- package/src/heading/component.tsx +0 -1
- package/src/higher-order/with-focus-outside/index.js +2 -0
- package/src/icon/index.tsx +0 -1
- package/src/icon/stories/index.js +1 -1
- package/src/index.js +1 -0
- package/src/input-control/index.tsx +0 -1
- package/src/input-control/input-base.tsx +0 -1
- package/src/input-control/input-field.tsx +0 -1
- package/src/input-control/reducer/actions.ts +0 -1
- package/src/input-control/reducer/reducer.ts +0 -1
- package/src/input-control/reducer/state.ts +0 -1
- package/src/input-control/stories/index.js +2 -1
- package/src/input-control/styles/input-control-styles.tsx +23 -13
- package/src/input-control/types.ts +3 -2
- package/src/item-group/item/component.tsx +0 -1
- package/src/item-group/item/hook.ts +1 -2
- package/src/item-group/item-group/component.tsx +0 -1
- package/src/item-group/stories/index.js +84 -2
- package/src/menu-item/README.md +2 -2
- package/src/mobile/bottom-sheet/bottom-sheet-context.native.js +2 -0
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +8 -14
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +33 -3
- package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +162 -0
- package/src/mobile/bottom-sheet/cell.native.js +8 -6
- package/src/mobile/bottom-sheet/index.native.js +24 -14
- package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +6 -2
- package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss +3 -0
- package/src/mobile/bottom-sheet/range-text-input.native.js +5 -2
- package/src/mobile/bottom-sheet/styles.native.scss +4 -0
- package/src/mobile/bottom-sheet/test/index.native.js +24 -0
- package/src/mobile/color-settings/index.native.js +4 -0
- package/src/mobile/color-settings/palette.screen.native.js +13 -5
- package/src/mobile/color-settings/style.native.scss +1 -1
- package/src/mobile/color-settings/utils.native.js +8 -3
- package/src/mobile/global-styles-context/utils.native.js +1 -1
- package/src/mobile/gridicons/index.native.js +3 -3
- package/src/mobile/html-text-input/test/index.native.js +34 -35
- package/src/mobile/inserter-button/style.native.scss +1 -0
- package/src/mobile/keyboard-avoiding-view/index.ios.js +12 -9
- package/src/mobile/link-picker/index.native.js +41 -6
- package/src/mobile/link-picker/link-picker-screen.native.js +13 -5
- package/src/mobile/link-settings/index.native.js +13 -1
- package/src/mobile/link-settings/test/edit.native.js +368 -0
- package/src/mobile/link-settings/test/link-settings-navigation.native.js +97 -0
- package/src/mobile/readable-content-view/index.native.js +5 -2
- package/src/mobile/utils/use-is-floating-keyboard.native.js +2 -5
- package/src/mobile/utils/use-unit-converter-to-mobile.native.js +5 -2
- package/src/modal/README.md +10 -0
- package/src/modal/aria-helper.js +2 -0
- package/src/modal/index.js +71 -63
- package/src/modal/stories/index.js +6 -1
- package/src/modal/style.scss +9 -0
- package/src/modal/test/index.js +11 -0
- package/src/navigation/README.md +0 -9
- package/src/navigator/context.ts +5 -1
- package/src/navigator/navigator-provider/README.md +30 -20
- package/src/navigator/navigator-provider/component.tsx +69 -25
- package/src/navigator/navigator-screen/component.tsx +71 -34
- package/src/navigator/stories/index.js +26 -13
- package/src/navigator/test/index.js +167 -32
- package/src/navigator/types.ts +11 -11
- package/src/navigator/use-navigator.ts +4 -4
- package/src/notice/index.native.js +5 -2
- package/src/notice/stories/index.js +1 -1
- package/src/number-control/stories/index.js +1 -1
- package/src/palette-edit/index.js +9 -2
- package/src/palette-edit/styles.js +22 -3
- package/src/panel/stories/index.js +1 -1
- package/src/placeholder/index.js +8 -6
- package/src/placeholder/stories/index.js +1 -1
- package/src/placeholder/style.scss +12 -0
- package/src/placeholder/test/index.js +18 -1
- package/src/popover/stories/index.js +1 -1
- package/src/query-controls/README.md +138 -6
- package/src/radio-group/README.md +4 -1
- package/src/range-control/stories/index.js +1 -1
- package/src/range-control/styles/range-control-styles.js +1 -1
- package/src/resizable-box/index.tsx +0 -1
- package/src/resizable-box/resize-tooltip/index.tsx +1 -2
- package/src/resizable-box/resize-tooltip/label.tsx +0 -1
- package/src/resizable-box/stories/index.js +1 -1
- package/src/sandbox/index.native.js +8 -5
- package/src/scrollable/hook.js +1 -1
- package/src/scrollable/stories/index.js +7 -4
- package/src/search-control/stories/index.js +1 -1
- package/src/select-control/stories/index.js +2 -1
- package/src/select-control/styles/select-control-styles.ts +25 -2
- package/src/select-control/types.ts +1 -1
- package/src/slot-fill/bubbles-virtually/fill.js +12 -1
- package/src/slot-fill/stories/index.js +1 -1
- package/src/snackbar/stories/index.js +1 -1
- package/src/spacer/component.tsx +0 -1
- package/src/spacer/stories/index.js +1 -1
- package/src/spacer/types.ts +0 -1
- package/src/spinner/README.md +10 -10
- package/src/spinner/index.js +42 -3
- package/src/spinner/index.native.js +7 -2
- package/src/spinner/stories/index.js +36 -3
- package/src/spinner/styles.js +47 -0
- package/src/style-provider/index.js +2 -0
- package/src/surface/hook.js +1 -0
- package/src/surface/stories/index.js +1 -1
- package/src/tab-panel/stories/index.js +1 -1
- package/src/text/get-line-height.ts +0 -1
- package/src/text/hook.js +1 -0
- package/src/text/types.ts +0 -1
- package/src/text-control/stories/index.js +1 -1
- package/src/text-highlight/stories/index.js +1 -1
- package/src/textarea-control/stories/index.js +1 -1
- package/src/tip/index.js +2 -4
- package/src/tip/stories/index.js +1 -1
- package/src/toggle-control/stories/index.js +1 -1
- package/src/toggle-group-control/stories/index.js +1 -1
- package/src/toggle-group-control/test/__snapshots__/index.js.snap +25 -27
- package/src/toggle-group-control/toggle-group-control/component.tsx +8 -14
- package/src/toggle-group-control/toggle-group-control/styles.ts +0 -14
- package/src/toggle-group-control/toggle-group-control-option/component.tsx +0 -1
- package/src/toggle-group-control/toggle-group-control-option/styles.ts +1 -3
- package/src/toggle-group-control/types.ts +1 -9
- package/src/toolbar-button/stories/index.js +1 -1
- package/src/tools-panel/stories/index.js +75 -1
- package/src/tools-panel/stories/tools-panel-with-item-group-slot.js +244 -0
- package/src/tools-panel/styles.ts +40 -2
- package/src/tools-panel/test/__snapshots__/index.js.snap +219 -0
- package/src/tools-panel/test/index.js +81 -1
- package/src/tools-panel/tools-panel/README.md +9 -0
- package/src/tools-panel/tools-panel/component.tsx +2 -6
- package/src/tools-panel/tools-panel/hook.ts +164 -97
- package/src/tools-panel/tools-panel-header/component.tsx +0 -1
- package/src/tools-panel/tools-panel-header/hook.ts +3 -3
- package/src/tools-panel/tools-panel-item/component.tsx +0 -1
- package/src/tools-panel/tools-panel-item/hook.ts +25 -2
- package/src/tools-panel/types.ts +14 -1
- package/src/tooltip/stories/index.js +1 -1
- package/src/tooltip/test/index.native.js +3 -1
- package/src/tree-grid/index.js +19 -5
- package/src/tree-select/stories/index.js +1 -1
- package/src/truncate/hook.js +1 -1
- package/src/truncate/stories/index.js +1 -1
- package/src/ui/README.md +1 -1
- package/src/ui/context/wordpress-component.ts +0 -1
- package/src/ui/control-group/types.ts +0 -1
- package/src/ui/form-group/types.ts +0 -1
- package/src/ui/shortcut/component.tsx +0 -1
- package/src/ui/tooltip/types.ts +0 -1
- package/src/ui/utils/font-size.ts +0 -1
- package/src/ui/utils/get-valid-children.ts +0 -1
- package/src/unit-control/index.tsx +0 -1
- package/src/unit-control/stories/index.js +19 -1
- package/src/unit-control/styles/unit-control-styles.ts +33 -46
- package/src/unit-control/types.ts +7 -4
- package/src/unit-control/unit-select-control.tsx +0 -1
- package/src/utils/colors-values.js +4 -3
- package/src/utils/config-values.js +1 -5
- package/src/utils/hooks/stories/use-cx.js +121 -44
- package/src/utils/hooks/use-combined-ref.ts +0 -1
- package/src/utils/hooks/use-latest-ref.ts +0 -1
- package/src/v-stack/types.ts +0 -1
- package/src/z-stack/README.md +1 -1
- package/src/z-stack/component.tsx +1 -2
- package/src/z-stack/stories/index.js +1 -1
- package/src/z-stack/styles.ts +7 -2
- package/tsconfig.json +9 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/spinner/styles/spinner-styles.js +0 -40
- package/build/spinner/styles/spinner-styles.js.map +0 -1
- package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +0 -90
- package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +0 -1
- package/build-module/spinner/styles/spinner-styles.js +0 -28
- package/build-module/spinner/styles/spinner-styles.js.map +0 -1
- package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +0 -86
- package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +0 -1
- package/build-types/spinner/styles/spinner-styles.d.ts +0 -5
- package/build-types/spinner/styles/spinner-styles.d.ts.map +0 -1
- package/build-types/toggle-group-control/component.d.ts +0 -4
- package/build-types/toggle-group-control/component.d.ts.map +0 -1
- package/build-types/toggle-group-control/styles.d.ts +0 -25
- package/build-types/toggle-group-control/styles.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts +0 -9
- package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-backdrop.d.ts +0 -9
- package/build-types/toggle-group-control/toggle-group-control-backdrop.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-button.d.ts +0 -6
- package/build-types/toggle-group-control/toggle-group-control-button.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-context.d.ts +0 -9
- package/build-types/toggle-group-control/toggle-group-control-context.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-option.d.ts +0 -4
- package/build-types/toggle-group-control/toggle-group-control-option.d.ts.map +0 -1
- package/build-types/ui/color-picker/color-display.d.ts +0 -13
- package/build-types/ui/color-picker/color-display.d.ts.map +0 -1
- package/build-types/ui/color-picker/color-input.d.ts +0 -13
- package/build-types/ui/color-picker/color-input.d.ts.map +0 -1
- package/build-types/ui/color-picker/component.d.ts +0 -12
- package/build-types/ui/color-picker/component.d.ts.map +0 -1
- package/build-types/ui/color-picker/hex-input.d.ts +0 -12
- package/build-types/ui/color-picker/hex-input.d.ts.map +0 -1
- package/build-types/ui/color-picker/hsl-input.d.ts +0 -12
- package/build-types/ui/color-picker/hsl-input.d.ts.map +0 -1
- package/build-types/ui/color-picker/index.d.ts +0 -2
- package/build-types/ui/color-picker/index.d.ts.map +0 -1
- package/build-types/ui/color-picker/input-with-slider.d.ts +0 -11
- package/build-types/ui/color-picker/input-with-slider.d.ts.map +0 -1
- package/build-types/ui/color-picker/legacy-adapter.d.ts +0 -5
- package/build-types/ui/color-picker/legacy-adapter.d.ts.map +0 -1
- package/build-types/ui/color-picker/picker.d.ts +0 -12
- package/build-types/ui/color-picker/picker.d.ts.map +0 -1
- package/build-types/ui/color-picker/rgb-input.d.ts +0 -12
- package/build-types/ui/color-picker/rgb-input.d.ts.map +0 -1
- package/build-types/ui/color-picker/styles.d.ts +0 -76
- package/build-types/ui/color-picker/styles.d.ts.map +0 -1
- package/build-types/ui/color-picker/types.d.ts +0 -2
- package/build-types/ui/color-picker/types.d.ts.map +0 -1
- package/build-types/ui/color-picker/use-deprecated-props.d.ts +0 -50
- package/build-types/ui/color-picker/use-deprecated-props.d.ts.map +0 -1
- package/build-types/ui/utils/create-component.d.ts +0 -21
- package/build-types/ui/utils/create-component.d.ts.map +0 -1
- package/build-types/utils/hooks/use-jump-step.d.ts +0 -25
- package/build-types/utils/hooks/use-jump-step.d.ts.map +0 -1
- package/src/spinner/styles/spinner-styles.js +0 -47
- package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx +0 -86
- package/src/ui/visually-hidden/README.md +0 -21
|
@@ -76,9 +76,9 @@ const useConvertUnitToMobile = (value, unit) => {
|
|
|
76
76
|
} = useContext(GlobalStylesContext);
|
|
77
77
|
const [windowSizes, setWindowSizes] = useState(Dimensions.get('window'));
|
|
78
78
|
useEffect(() => {
|
|
79
|
-
Dimensions.addEventListener('change', onDimensionsChange);
|
|
79
|
+
const dimensionsChangeSubscription = Dimensions.addEventListener('change', onDimensionsChange);
|
|
80
80
|
return () => {
|
|
81
|
-
|
|
81
|
+
dimensionsChangeSubscription.remove();
|
|
82
82
|
};
|
|
83
83
|
}, []);
|
|
84
84
|
const onDimensionsChange = useCallback(_ref2 => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/mobile/utils/use-unit-converter-to-mobile.native.js"],"names":["Dimensions","useContext","useEffect","useState","useMemo","useCallback","GlobalStylesContext","getValueAndUnit","value","unit","regex","splitValue","match","filter","v","valueToConvert","valueUnit","undefined","convertUnitToMobile","containerSize","globalStyles","width","height","fontSize","Number","vw","Math","round","vh","useConvertUnitToMobile","styles","windowSizes","setWindowSizes","get","addEventListener","onDimensionsChange","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/mobile/utils/use-unit-converter-to-mobile.native.js"],"names":["Dimensions","useContext","useEffect","useState","useMemo","useCallback","GlobalStylesContext","getValueAndUnit","value","unit","regex","splitValue","match","filter","v","valueToConvert","valueUnit","undefined","convertUnitToMobile","containerSize","globalStyles","width","height","fontSize","Number","vw","Math","round","vh","useConvertUnitToMobile","styles","windowSizes","setWindowSizes","get","dimensionsChangeSubscription","addEventListener","onDimensionsChange","remove","window"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tuseCallback,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesContext from '../global-styles-context';\n\nconst getValueAndUnit = ( value, unit ) => {\n\tconst regex = /(\\d+\\.?\\d*)(.*)/;\n\n\tconst splitValue = `${ value }`\n\t\t?.match( regex )\n\t\t?.filter( ( v ) => v !== '' );\n\n\tif ( splitValue ) {\n\t\treturn {\n\t\t\tvalueToConvert: splitValue[ 1 ],\n\t\t\tvalueUnit: unit || splitValue[ 2 ],\n\t\t};\n\t}\n\treturn undefined;\n};\n\nconst convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {\n\tconst { width, height } = containerSize;\n\tconst { valueToConvert, valueUnit } = getValueAndUnit( value, unit ) || {};\n\tconst { fontSize = 16 } = globalStyles || {};\n\n\tif ( valueToConvert === undefined ) {\n\t\treturn undefined;\n\t}\n\n\tswitch ( valueUnit ) {\n\t\tcase 'rem':\n\t\tcase 'em':\n\t\t\treturn valueToConvert * fontSize;\n\t\tcase '%':\n\t\t\treturn Number( valueToConvert / 100 ) * width;\n\t\tcase 'px':\n\t\t\treturn Number( valueToConvert );\n\t\tcase 'vw':\n\t\t\tconst vw = width / 100;\n\t\t\treturn Math.round( valueToConvert * vw );\n\t\tcase 'vh':\n\t\t\tconst vh = height / 100;\n\t\t\treturn Math.round( valueToConvert * vh );\n\t\tdefault:\n\t\t\treturn Number( valueToConvert / 100 ) * width;\n\t}\n};\n\nconst useConvertUnitToMobile = ( value, unit ) => {\n\tconst { globalStyles: styles } = useContext( GlobalStylesContext );\n\tconst [ windowSizes, setWindowSizes ] = useState(\n\t\tDimensions.get( 'window' )\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonDimensionsChange\n\t\t);\n\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tconst onDimensionsChange = useCallback( ( { window } ) => {\n\t\tsetWindowSizes( window );\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst { valueToConvert, valueUnit } =\n\t\t\tgetValueAndUnit( value, unit ) || {};\n\n\t\treturn convertUnitToMobile(\n\t\t\twindowSizes,\n\t\t\tstyles,\n\t\t\tvalueToConvert,\n\t\t\tvalueUnit\n\t\t);\n\t}, [ windowSizes, value, unit ] );\n};\n\nexport { convertUnitToMobile, useConvertUnitToMobile, getValueAndUnit };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/modal/aria-helper.js"],"names":["forEach","LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","document","body","children","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AAEA,MAAMC,sBAAsB,GAAG,IAAIC,GAAJ,CAAS,CACvC,OADuC,EAEvC,QAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,CAAT,CAA/B;AAQA,IAAIC,cAAc,GAAG,EAArB;AAAA,IACCC,QAAQ,GAAG,KADZ;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,OAAT,CAAkBC,eAAlB,EAAoC;AAC1C,MAAKF,QAAL,EAAgB;AACf;AACA;;AACD,QAAMG,QAAQ,GAAGC,QAAQ,CAACC,IAAT,CAAcC,QAA/B;AACAV,EAAAA,OAAO,CAAEO,QAAF,EAAcI,OAAF,IAAe;AACjC,QAAKA,OAAO,KAAKL,eAAjB,EAAmC;AAClC;AACA;;AACD,QAAKM,qBAAqB,CAAED,OAAF,CAA1B,EAAwC;AACvCA,MAAAA,OAAO,CAACE,YAAR,CAAsB,aAAtB,EAAqC,MAArC;AACAV,MAAAA,cAAc,CAACW,IAAf,CAAqBH,OAArB;AACA;AACD,GARM,CAAP;AASAP,EAAAA,QAAQ,GAAG,IAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASQ,qBAAT,CAAgCD,OAAhC,EAA0C;AAChD,QAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAR,CAAsB,MAAtB,CAAb;AACA,SAAO,EACNL,OAAO,CAACM,OAAR,KAAoB,QAApB,IACAN,OAAO,CAACO,YAAR,CAAsB,aAAtB,CADA,IAEAP,OAAO,CAACO,YAAR,CAAsB,WAAtB,CAFA,IAGAjB,sBAAsB,CAACkB,GAAvB,CAA4BJ,IAA5B,CAJM,CAAP;AAMA;AAED;AACA;AACA;AACA;;AACA,OAAO,SAASK,OAAT,GAAmB;AACzB,MAAK,CAAEhB,QAAP,EAAkB;AACjB;AACA;;AACDJ,EAAAA,OAAO,CAAEG,cAAF,EAAoBQ,OAAF,IAAe;AACvCA,IAAAA,OAAO,CAACU,eAAR,CAAyB,aAAzB;AACA,GAFM,CAAP;AAGAlB,EAAAA,cAAc,GAAG,EAAjB;AACAC,EAAAA,QAAQ,GAAG,KAAX;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { forEach } from 'lodash';\n\nconst LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {Element} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = document.body.children;\n\tforEach( elements, ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\tLIVE_REGION_ARIA_ROLES.has( role )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\tforEach( hiddenElements, ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/modal/aria-helper.js"],"names":["forEach","LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","document","body","children","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AAEA,MAAMC,sBAAsB,GAAG,IAAIC,GAAJ,CAAS,CACvC,OADuC,EAEvC,QAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,CAAT,CAA/B;AAQA,IAAIC,cAAc,GAAG,EAArB;AAAA,IACCC,QAAQ,GAAG,KADZ;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,OAAT,CAAkBC,eAAlB,EAAoC;AAC1C,MAAKF,QAAL,EAAgB;AACf;AACA;;AACD,QAAMG,QAAQ,GAAGC,QAAQ,CAACC,IAAT,CAAcC,QAA/B;AACAV,EAAAA,OAAO,CAAEO,QAAF,EAAcI,OAAF,IAAe;AACjC,QAAKA,OAAO,KAAKL,eAAjB,EAAmC;AAClC;AACA;;AACD,QAAKM,qBAAqB,CAAED,OAAF,CAA1B,EAAwC;AACvCA,MAAAA,OAAO,CAACE,YAAR,CAAsB,aAAtB,EAAqC,MAArC;AACAV,MAAAA,cAAc,CAACW,IAAf,CAAqBH,OAArB;AACA;AACD,GARM,CAAP;AASAP,EAAAA,QAAQ,GAAG,IAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASQ,qBAAT,CAAgCD,OAAhC,EAA0C;AAChD,QAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAR,CAAsB,MAAtB,CAAb;AACA,SAAO,EACNL,OAAO,CAACM,OAAR,KAAoB,QAApB,IACAN,OAAO,CAACO,YAAR,CAAsB,aAAtB,CADA,IAEAP,OAAO,CAACO,YAAR,CAAsB,WAAtB,CAFA,IAGAjB,sBAAsB,CAACkB,GAAvB,CAA4BJ,IAA5B,CAJM,CAAP;AAMA;AAED;AACA;AACA;AACA;;AACA,OAAO,SAASK,OAAT,GAAmB;AACzB,MAAK,CAAEhB,QAAP,EAAkB;AACjB;AACA;;AACDJ,EAAAA,OAAO,CAAEG,cAAF,EAAoBQ,OAAF,IAAe;AACvCA,IAAAA,OAAO,CAACU,eAAR,CAAyB,aAAzB;AACA,GAFM,CAAP;AAGAlB,EAAAA,cAAc,GAAG,EAAjB;AACAC,EAAAA,QAAQ,GAAG,KAAX;AACA","sourcesContent":["//@ts-nocheck\n\n/**\n * External dependencies\n */\nimport { forEach } from 'lodash';\n\nconst LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {Element} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = document.body.children;\n\tforEach( elements, ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\tLIVE_REGION_ARIA_ROLES.has( role )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\tforEach( hiddenElements, ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { createElement } from "@wordpress/element";
|
|
3
|
+
//@ts-nocheck
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* External dependencies
|
|
@@ -9,9 +10,8 @@ import classnames from 'classnames';
|
|
|
9
10
|
* WordPress dependencies
|
|
10
11
|
*/
|
|
11
12
|
|
|
12
|
-
import { createPortal, useEffect, useRef } from '@wordpress/element';
|
|
13
|
+
import { createPortal, useEffect, useRef, forwardRef } from '@wordpress/element';
|
|
13
14
|
import { useInstanceId, useFocusReturn, useFocusOnMount, __experimentalUseFocusOutside as useFocusOutside, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';
|
|
14
|
-
import deprecated from '@wordpress/deprecated';
|
|
15
15
|
import { ESCAPE } from '@wordpress/keycodes';
|
|
16
16
|
import { __ } from '@wordpress/i18n';
|
|
17
17
|
import { closeSmall } from '@wordpress/icons';
|
|
@@ -24,17 +24,16 @@ import Button from '../button';
|
|
|
24
24
|
import StyleProvider from '../style-provider'; // Used to count the number of open modals.
|
|
25
25
|
|
|
26
26
|
let openModalCount = 0;
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
|
|
28
|
+
function Modal(props, forwardedRef) {
|
|
29
|
+
const {
|
|
29
30
|
bodyOpenClassName = 'modal-open',
|
|
30
31
|
role = 'dialog',
|
|
31
32
|
title = null,
|
|
32
33
|
focusOnMount = true,
|
|
33
34
|
shouldCloseOnEsc = true,
|
|
34
35
|
shouldCloseOnClickOutside = true,
|
|
35
|
-
|
|
36
|
-
// Deprecated
|
|
37
|
-
isDismissible = isDismissable || true,
|
|
36
|
+
isDismissible = true,
|
|
38
37
|
|
|
39
38
|
/* accessibility */
|
|
40
39
|
aria = {
|
|
@@ -50,8 +49,9 @@ export default function Modal(_ref) {
|
|
|
50
49
|
className,
|
|
51
50
|
contentLabel,
|
|
52
51
|
onKeyDown,
|
|
53
|
-
isFullScreen = false
|
|
54
|
-
|
|
52
|
+
isFullScreen = false,
|
|
53
|
+
__experimentalHideHeader = false
|
|
54
|
+
} = props;
|
|
55
55
|
const ref = useRef();
|
|
56
56
|
const instanceId = useInstanceId(Modal);
|
|
57
57
|
const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
|
|
@@ -77,13 +77,6 @@ export default function Modal(_ref) {
|
|
|
77
77
|
};
|
|
78
78
|
}, []);
|
|
79
79
|
|
|
80
|
-
if (isDismissable) {
|
|
81
|
-
deprecated('isDismissable prop of the Modal component', {
|
|
82
|
-
since: '5.4',
|
|
83
|
-
alternative: 'isDismissible prop (renamed) of the Modal component'
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
|
|
87
80
|
function handleEscapeKeyDown(event) {
|
|
88
81
|
if (shouldCloseOnEsc && event.keyCode === ESCAPE && !event.defaultPrevented) {
|
|
89
82
|
event.preventDefault();
|
|
@@ -96,7 +89,7 @@ export default function Modal(_ref) {
|
|
|
96
89
|
|
|
97
90
|
return createPortal( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
98
91
|
createElement("div", {
|
|
99
|
-
ref: ref,
|
|
92
|
+
ref: useMergeRefs([ref, forwardedRef]),
|
|
100
93
|
className: classnames('components-modal__screen-overlay', overlayClassName),
|
|
101
94
|
onKeyDown: handleEscapeKeyDown
|
|
102
95
|
}, createElement(StyleProvider, {
|
|
@@ -115,9 +108,11 @@ export default function Modal(_ref) {
|
|
|
115
108
|
}, shouldCloseOnClickOutside ? focusOutsideProps : {}, {
|
|
116
109
|
onKeyDown: onKeyDown
|
|
117
110
|
}), createElement("div", {
|
|
118
|
-
className: 'components-modal__content',
|
|
111
|
+
className: classnames('components-modal__content', {
|
|
112
|
+
'hide-header': __experimentalHideHeader
|
|
113
|
+
}),
|
|
119
114
|
role: "document"
|
|
120
|
-
}, createElement("div", {
|
|
115
|
+
}, !__experimentalHideHeader && createElement("div", {
|
|
121
116
|
className: "components-modal__header"
|
|
122
117
|
}, createElement("div", {
|
|
123
118
|
className: "components-modal__header-heading-container"
|
|
@@ -133,4 +128,6 @@ export default function Modal(_ref) {
|
|
|
133
128
|
label: closeButtonLabel || __('Close dialog')
|
|
134
129
|
})), children)))), document.body);
|
|
135
130
|
}
|
|
131
|
+
|
|
132
|
+
export default forwardRef(Modal);
|
|
136
133
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/modal/index.js"],"names":["classnames","createPortal","useEffect","useRef","useInstanceId","useFocusReturn","useFocusOnMount","__experimentalUseFocusOutside","useFocusOutside","useConstrainedTabbing","useMergeRefs","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/modal/index.js"],"names":["classnames","createPortal","useEffect","useRef","forwardRef","useInstanceId","useFocusReturn","useFocusOnMount","__experimentalUseFocusOutside","useFocusOutside","useConstrainedTabbing","useMergeRefs","ESCAPE","__","closeSmall","ariaHelper","Button","StyleProvider","openModalCount","Modal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","__experimentalHideHeader","ref","instanceId","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","focusOutsideProps","hideApp","current","document","body","classList","add","remove","showApp","handleEscapeKeyDown","event","keyCode","defaultPrevented","preventDefault"],"mappings":"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","sourcesContent":["//@ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseEffect,\n\tuseRef,\n\tforwardRef,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction Modal( props, forwardedRef ) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* accessibility */\n\t\taria = {\n\t\t\tlabelledby: null,\n\t\t\tdescribedby: null,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tfunction handleEscapeKeyDown( event ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? null : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel ||\n\t\t\t\t\t\t\t\t\t\t\t__( 'Close dialog' )\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</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\nexport default forwardRef( Modal );\n"]}
|
|
@@ -6,6 +6,10 @@ import { createContext } from '@wordpress/element';
|
|
|
6
6
|
* Internal dependencies
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
const initialContextValue =
|
|
9
|
+
const initialContextValue = {
|
|
10
|
+
location: {},
|
|
11
|
+
goTo: () => {},
|
|
12
|
+
goBack: () => {}
|
|
13
|
+
};
|
|
10
14
|
export const NavigatorContext = createContext(initialContextValue);
|
|
11
15
|
//# sourceMappingURL=context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/context.ts"],"names":["createContext","initialContextValue","NavigatorContext"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AAGA,MAAMC,mBAAyC,GAAG,CAAE,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/context.ts"],"names":["createContext","initialContextValue","location","goTo","goBack","NavigatorContext"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AAGA,MAAMC,mBAAyC,GAAG;AACjDC,EAAAA,QAAQ,EAAE,EADuC;AAEjDC,EAAAA,IAAI,EAAE,MAAM,CAAE,CAFmC;AAGjDC,EAAAA,MAAM,EAAE,MAAM,CAAE;AAHiC,CAAlD;AAKA,OAAO,MAAMC,gBAAgB,GAAGL,aAAa,CAAEC,mBAAF,CAAtC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NavigatorContext as NavigatorContextType } from './types';\n\nconst initialContextValue: NavigatorContextType = {\n\tlocation: {},\n\tgoTo: () => {},\n\tgoBack: () => {},\n};\nexport const NavigatorContext = createContext( initialContextValue );\n"]}
|
|
@@ -6,13 +6,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
|
|
|
6
6
|
/**
|
|
7
7
|
* External dependencies
|
|
8
8
|
*/
|
|
9
|
-
// eslint-disable-next-line no-restricted-imports
|
|
10
9
|
import { css } from '@emotion/react';
|
|
11
10
|
/**
|
|
12
11
|
* WordPress dependencies
|
|
13
12
|
*/
|
|
14
13
|
|
|
15
|
-
import { useMemo, useState } from '@wordpress/element';
|
|
14
|
+
import { useMemo, useState, useCallback } from '@wordpress/element';
|
|
16
15
|
/**
|
|
17
16
|
* Internal dependencies
|
|
18
17
|
*/
|
|
@@ -28,7 +27,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
28
27
|
} : {
|
|
29
28
|
name: "192ebb7-classes",
|
|
30
29
|
styles: "overflow-x:hidden;label:classes;",
|
|
31
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
30
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdGWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUsIHVzZUNhbGxiYWNrIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHtcblx0TmF2aWdhdG9yUHJvdmlkZXJQcm9wcyxcblx0TmF2aWdhdG9yTG9jYXRpb24sXG5cdE5hdmlnYXRvckNvbnRleHQgYXMgTmF2aWdhdG9yQ29udGV4dFR5cGUsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gTmF2aWdhdG9yUHJvdmlkZXIoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgTmF2aWdhdG9yUHJvdmlkZXJQcm9wcywgJ2RpdicgPixcblx0Zm9yd2FyZGVkUmVmOiBSZWY8IGFueSA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGluaXRpYWxQYXRoLFxuXHRcdGNoaWxkcmVuLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ05hdmlnYXRvclByb3ZpZGVyJyApO1xuXG5cdGNvbnN0IFsgbG9jYXRpb25IaXN0b3J5LCBzZXRMb2NhdGlvbkhpc3RvcnkgXSA9IHVzZVN0YXRlPFxuXHRcdE5hdmlnYXRvckxvY2F0aW9uW11cblx0PiggW1xuXHRcdHtcblx0XHRcdHBhdGg6IGluaXRpYWxQYXRoLFxuXHRcdH0sXG5cdF0gKTtcblxuXHRjb25zdCBnb1RvOiBOYXZpZ2F0b3JDb250ZXh0VHlwZVsgJ2dvVG8nIF0gPSB1c2VDYWxsYmFjayhcblx0XHQoIHBhdGgsIG9wdGlvbnMgPSB7fSApID0+IHtcblx0XHRcdHNldExvY2F0aW9uSGlzdG9yeSggW1xuXHRcdFx0XHQuLi5sb2NhdGlvbkhpc3RvcnksXG5cdFx0XHRcdHtcblx0XHRcdFx0XHQuLi5vcHRpb25zLFxuXHRcdFx0XHRcdHBhdGgsXG5cdFx0XHRcdFx0aXNCYWNrOiBmYWxzZSxcblx0XHRcdFx0fSxcblx0XHRcdF0gKTtcblx0XHR9LFxuXHRcdFsgbG9jYXRpb25IaXN0b3J5IF1cblx0KTtcblxuXHRjb25zdCBnb0JhY2s6IE5hdmlnYXRvckNvbnRleHRUeXBlWyAnZ29CYWNrJyBdID0gdXNlQ2FsbGJhY2soICgpID0+IHtcblx0XHRpZiAoIGxvY2F0aW9uSGlzdG9yeS5sZW5ndGggPiAxICkge1xuXHRcdFx0c2V0TG9jYXRpb25IaXN0b3J5KCBbXG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeS5zbGljZSggMCwgLTIgKSxcblx0XHRcdFx0e1xuXHRcdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeVsgbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCAtIDIgXSxcblx0XHRcdFx0XHRpc0JhY2s6IHRydWUsXG5cdFx0XHRcdH0sXG5cdFx0XHRdICk7XG5cdFx0fVxuXHR9LCBbIGxvY2F0aW9uSGlzdG9yeSBdICk7XG5cblx0Y29uc3QgbmF2aWdhdG9yQ29udGV4dFZhbHVlOiBOYXZpZ2F0b3JDb250ZXh0VHlwZSA9IHVzZU1lbW8oXG5cdFx0KCkgPT4gKCB7XG5cdFx0XHRsb2NhdGlvbjoge1xuXHRcdFx0XHQuLi5sb2NhdGlvbkhpc3RvcnlbIGxvY2F0aW9uSGlzdG9yeS5sZW5ndGggLSAxIF0sXG5cdFx0XHRcdGlzSW5pdGlhbDogbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCA9PT0gMSxcblx0XHRcdH0sXG5cdFx0XHRnb1RvLFxuXHRcdFx0Z29CYWNrLFxuXHRcdH0gKSxcblx0XHRbIGxvY2F0aW9uSGlzdG9yeSwgZ29UbywgZ29CYWNrIF1cblx0KTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdC8vIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9uc1xuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8VmlldyByZWY9eyBmb3J3YXJkZWRSZWYgfSBjbGFzc05hbWU9eyBjbGFzc2VzIH0geyAuLi5vdGhlclByb3BzIH0+XG5cdFx0XHQ8TmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17IG5hdmlnYXRvckNvbnRleHRWYWx1ZSB9PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvTmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlcj5cblx0XHQ8L1ZpZXc+XG5cdCk7XG59XG5cbi8qKlxuICogVGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAgY29tcG9uZW50IGFsbG93cyByZW5kZXJpbmcgbmVzdGVkIHBhbmVscyBvciBtZW51cyAodmlhIHRoZSBgTmF2aWdhdG9yU2NyZWVuYCBjb21wb25lbnQpIGFuZCBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZXNlIGRpZmZlcmVudCBzdGF0ZXMgKHZpYSB0aGUgYHVzZU5hdmlnYXRvcmAgaG9vaykuXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYGpzeFxuICogaW1wb3J0IHtcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JQcm92aWRlciBhcyBOYXZpZ2F0b3JQcm92aWRlcixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JTY3JlZW4gYXMgTmF2aWdhdG9yU2NyZWVuLFxuICogICBfX2V4cGVyaW1lbnRhbFVzZU5hdmlnYXRvciBhcyB1c2VOYXZpZ2F0b3IsXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogZnVuY3Rpb24gTmF2aWdhdG9yQnV0dG9uKCB7IHBhdGgsIC4uLnByb3BzIH0gKSB7XG4gKiAgY29uc3QgeyBnb1RvIH0gPSB1c2VOYXZpZ2F0b3IoKTtcbiAqICByZXR1cm4gKFxuICogICAgPEJ1dHRvblxuICogICAgICB2YXJpYW50PVwicHJpbWFyeVwiXG4gKiAgICAgIG9uQ2xpY2s9eyAoKSA9PiBnb1RvKCBwYXRoICkgfVxuICogICAgICB7IC4uLnByb3BzIH1cbiAqICAgIC8+XG4gKiAgKTtcbiAqIH1cbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCYWNrQnV0dG9uKCBwcm9wcyApIHtcbiAqICAgY29uc3QgeyBnb0JhY2sgfSA9IHVzZU5hdmlnYXRvcigpO1xuICogICByZXR1cm4gPEJ1dHRvbiB2YXJpYW50PVwic2Vjb25kYXJ5XCIgb25DbGljaz17ICgpID0+IGdvQmFjaygpIH0geyAuLi5wcm9wcyB9IC8+O1xuICogfVxuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgXHQgICA8TmF2aWdhdG9yQnV0dG9uIHBhdGg9XCIvY2hpbGRcIj5cbiAqICAgICAgICAgIE5hdmlnYXRlIHRvIGNoaWxkIHNjcmVlbi5cbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICpcbiAqICAgICA8TmF2aWdhdG9yU2NyZWVuIHBhdGg9XCIvY2hpbGRcIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGNoaWxkIHNjcmVlbi48L3A+XG4gKiAgICAgICA8TmF2aWdhdG9yQmFja0J1dHRvbj5HbyBiYWNrPC9OYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JQcm92aWRlcixcblx0J05hdmlnYXRvclByb3ZpZGVyJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yUHJvdmlkZXI7XG4iXX0= */",
|
|
32
31
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
33
32
|
};
|
|
34
33
|
|
|
@@ -39,22 +38,42 @@ function NavigatorProvider(props, forwardedRef) {
|
|
|
39
38
|
className,
|
|
40
39
|
...otherProps
|
|
41
40
|
} = useContextSystem(props, 'NavigatorProvider');
|
|
42
|
-
const [
|
|
41
|
+
const [locationHistory, setLocationHistory] = useState([{
|
|
43
42
|
path: initialPath
|
|
44
|
-
});
|
|
43
|
+
}]);
|
|
44
|
+
const goTo = useCallback(function (path) {
|
|
45
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
46
|
+
setLocationHistory([...locationHistory, { ...options,
|
|
47
|
+
path,
|
|
48
|
+
isBack: false
|
|
49
|
+
}]);
|
|
50
|
+
}, [locationHistory]);
|
|
51
|
+
const goBack = useCallback(() => {
|
|
52
|
+
if (locationHistory.length > 1) {
|
|
53
|
+
setLocationHistory([...locationHistory.slice(0, -2), { ...locationHistory[locationHistory.length - 2],
|
|
54
|
+
isBack: true
|
|
55
|
+
}]);
|
|
56
|
+
}
|
|
57
|
+
}, [locationHistory]);
|
|
58
|
+
const navigatorContextValue = useMemo(() => ({
|
|
59
|
+
location: { ...locationHistory[locationHistory.length - 1],
|
|
60
|
+
isInitial: locationHistory.length === 1
|
|
61
|
+
},
|
|
62
|
+
goTo,
|
|
63
|
+
goBack
|
|
64
|
+
}), [locationHistory, goTo, goBack]);
|
|
45
65
|
const cx = useCx();
|
|
46
66
|
const classes = useMemo( // Prevents horizontal overflow while animating screen transitions
|
|
47
|
-
() => cx(_ref, className), [className]);
|
|
67
|
+
() => cx(_ref, className), [className, cx]);
|
|
48
68
|
return createElement(View, _extends({
|
|
49
69
|
ref: forwardedRef,
|
|
50
70
|
className: classes
|
|
51
71
|
}, otherProps), createElement(NavigatorContext.Provider, {
|
|
52
|
-
value:
|
|
72
|
+
value: navigatorContextValue
|
|
53
73
|
}, children));
|
|
54
74
|
}
|
|
55
75
|
/**
|
|
56
76
|
* The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).
|
|
57
|
-
* The Global Styles sidebar is an example of this. The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.
|
|
58
77
|
*
|
|
59
78
|
* @example
|
|
60
79
|
* ```jsx
|
|
@@ -64,34 +83,34 @@ function NavigatorProvider(props, forwardedRef) {
|
|
|
64
83
|
* __experimentalUseNavigator as useNavigator,
|
|
65
84
|
* } from '@wordpress/components';
|
|
66
85
|
*
|
|
67
|
-
* function NavigatorButton( {
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
86
|
+
* function NavigatorButton( { path, ...props } ) {
|
|
87
|
+
* const { goTo } = useNavigator();
|
|
88
|
+
* return (
|
|
89
|
+
* <Button
|
|
90
|
+
* variant="primary"
|
|
91
|
+
* onClick={ () => goTo( path ) }
|
|
92
|
+
* { ...props }
|
|
93
|
+
* />
|
|
94
|
+
* );
|
|
95
|
+
* }
|
|
96
|
+
*
|
|
97
|
+
* function NavigatorBackButton( props ) {
|
|
98
|
+
* const { goBack } = useNavigator();
|
|
99
|
+
* return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
|
|
79
100
|
* }
|
|
80
101
|
*
|
|
81
102
|
* const MyNavigation = () => (
|
|
82
103
|
* <NavigatorProvider initialPath="/">
|
|
83
104
|
* <NavigatorScreen path="/">
|
|
84
105
|
* <p>This is the home screen.</p>
|
|
85
|
-
* <NavigatorButton
|
|
106
|
+
* <NavigatorButton path="/child">
|
|
86
107
|
* Navigate to child screen.
|
|
87
108
|
* </NavigatorButton>
|
|
88
109
|
* </NavigatorScreen>
|
|
89
110
|
*
|
|
90
111
|
* <NavigatorScreen path="/child">
|
|
91
112
|
* <p>This is the child screen.</p>
|
|
92
|
-
* <
|
|
93
|
-
* Go back
|
|
94
|
-
* </NavigatorButton>
|
|
113
|
+
* <NavigatorBackButton>Go back</NavigatorBackButton>
|
|
95
114
|
* </NavigatorScreen>
|
|
96
115
|
* </NavigatorProvider>
|
|
97
116
|
* );
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","contextConnect","useContextSystem","useCx","View","NavigatorContext","NavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","path","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","useCallback","contextConnect","useContextSystem","useCx","View","NavigatorContext","NavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","locationHistory","setLocationHistory","path","goTo","options","isBack","goBack","length","slice","navigatorContextValue","location","isInitial","cx","classes","ConnectedNavigatorProvider"],"mappings":";;;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,QAAlB,EAA4BC,WAA5B,QAA+C,oBAA/C;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,KAAT,QAAsB,0BAAtB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,gBAAT,QAAiC,YAAjC;;;;;;;;;;;;AAOA,SAASC,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,WADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAIL,OAAGC;AAJE,MAKFV,gBAAgB,CAAEK,KAAF,EAAS,mBAAT,CALpB;AAOA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0Cf,QAAQ,CAErD,CACF;AACCgB,IAAAA,IAAI,EAAEN;AADP,GADE,CAFqD,CAAxD;AAQA,QAAMO,IAAoC,GAAGhB,WAAW,CACvD,UAAEe,IAAF,EAA0B;AAAA,QAAlBE,OAAkB,uEAAR,EAAQ;AACzBH,IAAAA,kBAAkB,CAAE,CACnB,GAAGD,eADgB,EAEnB,EACC,GAAGI,OADJ;AAECF,MAAAA,IAFD;AAGCG,MAAAA,MAAM,EAAE;AAHT,KAFmB,CAAF,CAAlB;AAQA,GAVsD,EAWvD,CAAEL,eAAF,CAXuD,CAAxD;AAcA,QAAMM,MAAwC,GAAGnB,WAAW,CAAE,MAAM;AACnE,QAAKa,eAAe,CAACO,MAAhB,GAAyB,CAA9B,EAAkC;AACjCN,MAAAA,kBAAkB,CAAE,CACnB,GAAGD,eAAe,CAACQ,KAAhB,CAAuB,CAAvB,EAA0B,CAAC,CAA3B,CADgB,EAEnB,EACC,GAAGR,eAAe,CAAEA,eAAe,CAACO,MAAhB,GAAyB,CAA3B,CADnB;AAECF,QAAAA,MAAM,EAAE;AAFT,OAFmB,CAAF,CAAlB;AAOA;AACD,GAV2D,EAUzD,CAAEL,eAAF,CAVyD,CAA5D;AAYA,QAAMS,qBAA2C,GAAGxB,OAAO,CAC1D,OAAQ;AACPyB,IAAAA,QAAQ,EAAE,EACT,GAAGV,eAAe,CAAEA,eAAe,CAACO,MAAhB,GAAyB,CAA3B,CADT;AAETI,MAAAA,SAAS,EAAEX,eAAe,CAACO,MAAhB,KAA2B;AAF7B,KADH;AAKPJ,IAAAA,IALO;AAMPG,IAAAA;AANO,GAAR,CAD0D,EAS1D,CAAEN,eAAF,EAAmBG,IAAnB,EAAyBG,MAAzB,CAT0D,CAA3D;AAYA,QAAMM,EAAE,GAAGtB,KAAK,EAAhB;AACA,QAAMuB,OAAO,GAAG5B,OAAO,EACtB;AACA,QAAM2B,EAAE,OAAkCd,SAAlC,CAFc,EAGtB,CAAEA,SAAF,EAAac,EAAb,CAHsB,CAAvB;AAMA,SACC,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGjB,YAAZ;AAA2B,IAAA,SAAS,EAAGkB;AAAvC,KAAsDd,UAAtD,GACC,cAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAGU;AAAnC,KACGZ,QADH,CADD,CADD;AAOA;AAED;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,MAAMiB,0BAA0B,GAAG1B,cAAc,CAChDK,iBADgD,EAEhD,mBAFgD,CAAjD;AAKA,eAAeqB,0BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type {\n\tNavigatorProviderProps,\n\tNavigatorLocation,\n\tNavigatorContext as NavigatorContextType,\n} from '../types';\n\nfunction NavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: Ref< any >\n) {\n\tconst {\n\t\tinitialPath,\n\t\tchildren,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorProvider' );\n\n\tconst [ locationHistory, setLocationHistory ] = useState<\n\t\tNavigatorLocation[]\n\t>( [\n\t\t{\n\t\t\tpath: initialPath,\n\t\t},\n\t] );\n\n\tconst goTo: NavigatorContextType[ 'goTo' ] = useCallback(\n\t\t( path, options = {} ) => {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory,\n\t\t\t\t{\n\t\t\t\t\t...options,\n\t\t\t\t\tpath,\n\t\t\t\t\tisBack: false,\n\t\t\t\t},\n\t\t\t] );\n\t\t},\n\t\t[ locationHistory ]\n\t);\n\n\tconst goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {\n\t\tif ( locationHistory.length > 1 ) {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory.slice( 0, -2 ),\n\t\t\t\t{\n\t\t\t\t\t...locationHistory[ locationHistory.length - 2 ],\n\t\t\t\t\tisBack: true,\n\t\t\t\t},\n\t\t\t] );\n\t\t}\n\t}, [ locationHistory ] );\n\n\tconst navigatorContextValue: NavigatorContextType = useMemo(\n\t\t() => ( {\n\t\t\tlocation: {\n\t\t\t\t...locationHistory[ locationHistory.length - 1 ],\n\t\t\t\tisInitial: locationHistory.length === 1,\n\t\t\t},\n\t\t\tgoTo,\n\t\t\tgoBack,\n\t\t} ),\n\t\t[ locationHistory, goTo, goBack ]\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t// Prevents horizontal overflow while animating screen transitions\n\t\t() => cx( css( { overflowX: 'hidden' } ), className ),\n\t\t[ className, cx ]\n\t);\n\n\treturn (\n\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ navigatorContextValue }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\n/**\n * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalUseNavigator as useNavigator,\n * } from '@wordpress/components';\n *\n * function NavigatorButton( { path, ...props } ) {\n * const { goTo } = useNavigator();\n * return (\n * <Button\n * variant=\"primary\"\n * onClick={ () => goTo( path ) }\n * { ...props }\n * />\n * );\n * }\n *\n * function NavigatorBackButton( props ) {\n * const { goBack } = useNavigator();\n * return <Button variant=\"secondary\" onClick={ () => goBack() } { ...props } />;\n * }\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * \t <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>Go back</NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorProvider = contextConnect(\n\tNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default ConnectedNavigatorProvider;\n"]}
|
|
@@ -7,15 +7,15 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
|
|
|
7
7
|
* External dependencies
|
|
8
8
|
*/
|
|
9
9
|
// eslint-disable-next-line no-restricted-imports
|
|
10
|
-
// eslint-disable-next-line no-restricted-imports
|
|
11
10
|
import { motion } from 'framer-motion';
|
|
12
11
|
import { css } from '@emotion/react';
|
|
13
12
|
/**
|
|
14
13
|
* WordPress dependencies
|
|
15
14
|
*/
|
|
16
15
|
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
16
|
+
import { focus } from '@wordpress/dom';
|
|
17
|
+
import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
|
|
18
|
+
import { useReducedMotion, useMergeRefs, usePrevious } from '@wordpress/compose';
|
|
19
19
|
import { isRTL } from '@wordpress/i18n';
|
|
20
20
|
/**
|
|
21
21
|
* Internal dependencies
|
|
@@ -37,7 +37,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
37
37
|
} : {
|
|
38
38
|
name: "1ulogbc-classes",
|
|
39
39
|
styles: "overflow-x:auto;max-height:100%;label:classes;",
|
|
40
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
40
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1zY3JlZW4vY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4REkiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3IvbmF2aWdhdG9yLXNjcmVlbi9jb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBSZWYgfSBmcm9tICdyZWFjdCc7XG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tcmVzdHJpY3RlZC1pbXBvcnRzXG5pbXBvcnQgeyBtb3Rpb24sIE1vdGlvblByb3BzIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb2N1cyB9IGZyb20gJ0B3b3JkcHJlc3MvZG9tJztcbmltcG9ydCB7IHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7XG5cdHVzZVJlZHVjZWRNb3Rpb24sXG5cdHVzZU1lcmdlUmVmcyxcblx0dXNlUHJldmlvdXMsXG59IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgeyBpc1JUTCB9IGZyb20gJ0B3b3JkcHJlc3MvaTE4bic7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdGNvbnRleHRDb25uZWN0LFxuXHR1c2VDb250ZXh0U3lzdGVtLFxuXHRXb3JkUHJlc3NDb21wb25lbnRQcm9wcyxcbn0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgeyBOYXZpZ2F0b3JDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgdHlwZSB7IE5hdmlnYXRvclNjcmVlblByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBhbmltYXRpb25FbnRlckRlbGF5ID0gMDtcbmNvbnN0IGFuaW1hdGlvbkVudGVyRHVyYXRpb24gPSAwLjE0O1xuY29uc3QgYW5pbWF0aW9uRXhpdER1cmF0aW9uID0gMC4xNDtcbmNvbnN0IGFuaW1hdGlvbkV4aXREZWxheSA9IDA7XG5cbi8vIFByb3BzIHNwZWNpZmljIHRvIGBmcmFtZXItbW90aW9uYCBjYW4ndCBiZSBjdXJyZW50bHkgcGFzc2VkIHRvIGBOYXZpZ2F0b3JTY3JlZW5gLFxuLy8gYXMgc29tZSBvZiB0aGVtIHdvdWxkIG92ZXJsYXAgd2l0aCBIVE1MIHByb3BzIChlLmcuIGBvbkFuaW1hdGlvblN0YXJ0YCwgLi4uKVxudHlwZSBQcm9wcyA9IE9taXQ8XG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JTY3JlZW5Qcm9wcywgJ2RpdicsIGZhbHNlID4sXG5cdGtleW9mIE1vdGlvblByb3BzXG4+O1xuXG5mdW5jdGlvbiBOYXZpZ2F0b3JTY3JlZW4oIHByb3BzOiBQcm9wcywgZm9yd2FyZGVkUmVmOiBSZWY8IGFueSA+ICkge1xuXHRjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIHBhdGgsIC4uLm90aGVyUHJvcHMgfSA9IHVzZUNvbnRleHRTeXN0ZW0oXG5cdFx0cHJvcHMsXG5cdFx0J05hdmlnYXRvclNjcmVlbidcblx0KTtcblxuXHRjb25zdCBwcmVmZXJzUmVkdWNlZE1vdGlvbiA9IHVzZVJlZHVjZWRNb3Rpb24oKTtcblx0Y29uc3QgeyBsb2NhdGlvbiB9ID0gdXNlQ29udGV4dCggTmF2aWdhdG9yQ29udGV4dCApO1xuXHRjb25zdCBpc01hdGNoID0gbG9jYXRpb24ucGF0aCA9PT0gcGF0aDtcblx0Y29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjwgSFRNTERpdkVsZW1lbnQgPiggbnVsbCApO1xuXG5cdGNvbnN0IHByZXZpb3VzTG9jYXRpb24gPSB1c2VQcmV2aW91cyggbG9jYXRpb24gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdCgpID0+XG5cdFx0XHRjeChcblx0XHRcdFx0Y3NzKCB7XG5cdFx0XHRcdFx0Ly8gRW5zdXJlcyBob3Jpem9udGFsIG92ZXJmbG93IGlzIHZpc3VhbGx5IGFjY2Vzc2libGVcblx0XHRcdFx0XHRvdmVyZmxvd1g6ICdhdXRvJyxcblx0XHRcdFx0XHQvLyBJbiBjYXNlIHRoZSByb290IGhhcyBhIGhlaWdodCwgaXQgc2hvdWxkIG5vdCBiZSBleGNlZWRlZFxuXHRcdFx0XHRcdG1heEhlaWdodDogJzEwMCUnLFxuXHRcdFx0XHR9ICksXG5cdFx0XHRcdGNsYXNzTmFtZVxuXHRcdFx0KSxcblx0XHRbIGNsYXNzTmFtZSwgY3ggXVxuXHQpO1xuXG5cdC8vIEZvY3VzIHJlc3RvcmF0aW9uXG5cdGNvbnN0IGlzSW5pdGlhbExvY2F0aW9uID0gbG9jYXRpb24uaXNJbml0aWFsICYmICEgbG9jYXRpb24uaXNCYWNrO1xuXHR1c2VFZmZlY3QoICgpID0+IHtcblx0XHQvLyBPbmx5IGF0dGVtcHQgdG8gcmVzdG9yZSBmb2N1czpcblx0XHQvLyAtIGlmIHRoZSBjdXJyZW50IGxvY2F0aW9uIGlzIG5vdCB0aGUgaW5pdGlhbCBvbmUgKHRvIGF2b2lkIG1vdmluZyBmb2N1cyBvbiBwYWdlIGxvYWQpXG5cdFx0Ly8gLSB3aGVuIHRoZSBzY3JlZW4gYmVjb21lcyB2aXNpYmxlXG5cdFx0Ly8gLSBpZiB0aGUgd3JhcHBlciByZWYgaGFzIGJlZW4gYXNzaWduZWRcblx0XHRpZiAoIGlzSW5pdGlhbExvY2F0aW9uIHx8ICEgaXNNYXRjaCB8fCAhIHdyYXBwZXJSZWYuY3VycmVudCApIHtcblx0XHRcdHJldHVybjtcblx0XHR9XG5cblx0XHRsZXQgZWxlbWVudFRvRm9jdXM6IEhUTUxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG5cblx0XHQvLyBXaGVuIG5hdmlnYXRpbmcgYmFjaywgaWYgYSBzZWxlY3RvciBpcyBwcm92aWRlZCwgdXNlIGl0IHRvIGxvb2sgZm9yIHRoZVxuXHRcdC8vIHRhcmdldCBlbGVtZW50IChhc3N1bWVkIHRvIGJlIGEgbm9kZSBpbnNpZGUgdGhlIGN1cnJlbnQgTmF2aWdhdG9yU2NyZWVuKVxuXHRcdGlmICggbG9jYXRpb24uaXNCYWNrICYmIHByZXZpb3VzTG9jYXRpb24/LmZvY3VzVGFyZ2V0U2VsZWN0b3IgKSB7XG5cdFx0XHRlbGVtZW50VG9Gb2N1cyA9IHdyYXBwZXJSZWYuY3VycmVudC5xdWVyeVNlbGVjdG9yKFxuXHRcdFx0XHRwcmV2aW91c0xvY2F0aW9uLmZvY3VzVGFyZ2V0U2VsZWN0b3Jcblx0XHRcdCk7XG5cdFx0fVxuXG5cdFx0Ly8gSWYgdGhlIHByZXZpb3VzIHF1ZXJ5IGRpZG4ndCBydW4gb3IgZmluZCBhbnkgZWxlbWVudCB0byBmb2N1cywgZmFsbGJhY2tcblx0XHQvLyB0byB0aGUgZmlyc3QgdGFiYmFibGUgZWxlbWVudCBpbiB0aGUgc2NyZWVuIChvciB0aGUgc2NyZWVuIGl0c2VsZikuXG5cdFx0aWYgKCAhIGVsZW1lbnRUb0ZvY3VzICkge1xuXHRcdFx0Y29uc3QgZmlyc3RUYWJiYWJsZSA9ICggZm9jdXMudGFiYmFibGUuZmluZChcblx0XHRcdFx0d3JhcHBlclJlZi5jdXJyZW50XG5cdFx0XHQpIGFzIEhUTUxFbGVtZW50W10gKVsgMCBdO1xuXG5cdFx0XHRlbGVtZW50VG9Gb2N1cyA9IGZpcnN0VGFiYmFibGUgPz8gd3JhcHBlclJlZi5jdXJyZW50O1xuXHRcdH1cblxuXHRcdGVsZW1lbnRUb0ZvY3VzLmZvY3VzKCk7XG5cdH0sIFsgaXNJbml0aWFsTG9jYXRpb24sIGlzTWF0Y2ggXSApO1xuXG5cdGNvbnN0IG1lcmdlZFdyYXBwZXJSZWYgPSB1c2VNZXJnZVJlZnMoIFsgZm9yd2FyZGVkUmVmLCB3cmFwcGVyUmVmIF0gKTtcblxuXHRpZiAoICEgaXNNYXRjaCApIHtcblx0XHRyZXR1cm4gbnVsbDtcblx0fVxuXG5cdGlmICggcHJlZmVyc1JlZHVjZWRNb3Rpb24gKSB7XG5cdFx0cmV0dXJuIChcblx0XHRcdDxWaWV3XG5cdFx0XHRcdHJlZj17IG1lcmdlZFdyYXBwZXJSZWYgfVxuXHRcdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdFx0eyAuLi5vdGhlclByb3BzIH1cblx0XHRcdD5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L1ZpZXc+XG5cdFx0KTtcblx0fVxuXG5cdGNvbnN0IGFuaW1hdGUgPSB7XG5cdFx0b3BhY2l0eTogMSxcblx0XHR0cmFuc2l0aW9uOiB7XG5cdFx0XHRkZWxheTogYW5pbWF0aW9uRW50ZXJEZWxheSxcblx0XHRcdGR1cmF0aW9uOiBhbmltYXRpb25FbnRlckR1cmF0aW9uLFxuXHRcdFx0ZWFzZTogJ2Vhc2VJbk91dCcsXG5cdFx0fSxcblx0XHR4OiAwLFxuXHR9O1xuXHRjb25zdCBpbml0aWFsID0ge1xuXHRcdG9wYWNpdHk6IDAsXG5cdFx0eDpcblx0XHRcdCggaXNSVEwoKSAmJiBsb2NhdGlvbi5pc0JhY2sgKSB8fCAoICEgaXNSVEwoKSAmJiAhIGxvY2F0aW9uLmlzQmFjayApXG5cdFx0XHRcdD8gNTBcblx0XHRcdFx0OiAtNTAsXG5cdH07XG5cdGNvbnN0IGV4aXQgPSB7XG5cdFx0ZGVsYXk6IGFuaW1hdGlvbkV4aXREZWxheSxcblx0XHRvcGFjaXR5OiAwLFxuXHRcdHg6XG5cdFx0XHQoICEgaXNSVEwoKSAmJiBsb2NhdGlvbi5pc0JhY2sgKSB8fCAoIGlzUlRMKCkgJiYgISBsb2NhdGlvbi5pc0JhY2sgKVxuXHRcdFx0XHQ/IDUwXG5cdFx0XHRcdDogLTUwLFxuXHRcdHRyYW5zaXRpb246IHtcblx0XHRcdGR1cmF0aW9uOiBhbmltYXRpb25FeGl0RHVyYXRpb24sXG5cdFx0XHRlYXNlOiAnZWFzZUluT3V0Jyxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IGFuaW1hdGVkUHJvcHMgPSB7XG5cdFx0YW5pbWF0ZSxcblx0XHRleGl0LFxuXHRcdGluaXRpYWwsXG5cdH07XG5cblx0cmV0dXJuIChcblx0XHQ8bW90aW9uLmRpdlxuXHRcdFx0cmVmPXsgbWVyZ2VkV3JhcHBlclJlZiB9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdHsgLi4ub3RoZXJQcm9wcyB9XG5cdFx0XHR7IC4uLmFuaW1hdGVkUHJvcHMgfVxuXHRcdD5cblx0XHRcdHsgY2hpbGRyZW4gfVxuXHRcdDwvbW90aW9uLmRpdj5cblx0KTtcbn1cblxuLyoqXG4gKiBUaGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IHJlcHJlc2VudHMgYSBzaW5nbGUgdmlldy9zY3JlZW4vcGFuZWwvbWVudSBhbmQgaXMgc3VwcG9zZWQgdG8gYmUgdXNlZCBpbiBjb21iaW5hdGlvbiB3aXRoIHRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudC5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsVXNlTmF2aWdhdG9yIGFzIHVzZU5hdmlnYXRvcixcbiAqIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCdXR0b24oIHsgcGF0aCwgLi4ucHJvcHMgfSApIHtcbiAqICBjb25zdCB7IGdvVG8gfSA9IHVzZU5hdmlnYXRvcigpO1xuICogIHJldHVybiAoXG4gKiAgICA8QnV0dG9uXG4gKiAgICAgIHZhcmlhbnQ9XCJwcmltYXJ5XCJcbiAqICAgICAgb25DbGljaz17ICgpID0+IGdvVG8oIHBhdGggKSB9XG4gKiAgICAgIHsgLi4ucHJvcHMgfVxuICogICAgLz5cbiAqICApO1xuICogfVxuICpcbiAqIGZ1bmN0aW9uIE5hdmlnYXRvckJhY2tCdXR0b24oIHByb3BzICkge1xuICogICBjb25zdCB7IGdvQmFjayB9ID0gdXNlTmF2aWdhdG9yKCk7XG4gKiAgIHJldHVybiA8QnV0dG9uIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIiBvbkNsaWNrPXsgKCkgPT4gZ29CYWNrKCkgfSB7IC4uLnByb3BzIH0gLz47XG4gKiB9XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICBcdCAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPkdvIGJhY2s8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmNvbnN0IENvbm5lY3RlZE5hdmlnYXRvclNjcmVlbiA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JTY3JlZW4sXG5cdCdOYXZpZ2F0b3JTY3JlZW4nXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWROYXZpZ2F0b3JTY3JlZW47XG4iXX0= */",
|
|
41
41
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
42
42
|
};
|
|
43
43
|
|
|
@@ -49,17 +49,42 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
49
49
|
...otherProps
|
|
50
50
|
} = useContextSystem(props, 'NavigatorScreen');
|
|
51
51
|
const prefersReducedMotion = useReducedMotion();
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
const {
|
|
53
|
+
location
|
|
54
|
+
} = useContext(NavigatorContext);
|
|
55
|
+
const isMatch = location.path === path;
|
|
56
|
+
const wrapperRef = useRef(null);
|
|
57
|
+
const previousLocation = usePrevious(location);
|
|
55
58
|
const cx = useCx();
|
|
56
|
-
const classes = useMemo(() => cx(_ref, className), [className]); //
|
|
57
|
-
// It avoids the focus to happen on the first render.
|
|
59
|
+
const classes = useMemo(() => cx(_ref, className), [className, cx]); // Focus restoration
|
|
58
60
|
|
|
59
|
-
const
|
|
61
|
+
const isInitialLocation = location.isInitial && !location.isBack;
|
|
60
62
|
useEffect(() => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
// Only attempt to restore focus:
|
|
64
|
+
// - if the current location is not the initial one (to avoid moving focus on page load)
|
|
65
|
+
// - when the screen becomes visible
|
|
66
|
+
// - if the wrapper ref has been assigned
|
|
67
|
+
if (isInitialLocation || !isMatch || !wrapperRef.current) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
let elementToFocus = null; // When navigating back, if a selector is provided, use it to look for the
|
|
72
|
+
// target element (assumed to be a node inside the current NavigatorScreen)
|
|
73
|
+
|
|
74
|
+
if (location.isBack && previousLocation !== null && previousLocation !== void 0 && previousLocation.focusTargetSelector) {
|
|
75
|
+
elementToFocus = wrapperRef.current.querySelector(previousLocation.focusTargetSelector);
|
|
76
|
+
} // If the previous query didn't run or find any element to focus, fallback
|
|
77
|
+
// to the first tabbable element in the screen (or the screen itself).
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
if (!elementToFocus) {
|
|
81
|
+
const firstTabbable = focus.tabbable.find(wrapperRef.current)[0];
|
|
82
|
+
elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
elementToFocus.focus();
|
|
86
|
+
}, [isInitialLocation, isMatch]);
|
|
87
|
+
const mergedWrapperRef = useMergeRefs([forwardedRef, wrapperRef]);
|
|
63
88
|
|
|
64
89
|
if (!isMatch) {
|
|
65
90
|
return null;
|
|
@@ -67,7 +92,7 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
67
92
|
|
|
68
93
|
if (prefersReducedMotion) {
|
|
69
94
|
return createElement(View, _extends({
|
|
70
|
-
ref:
|
|
95
|
+
ref: mergedWrapperRef,
|
|
71
96
|
className: classes
|
|
72
97
|
}, otherProps), children);
|
|
73
98
|
}
|
|
@@ -83,12 +108,12 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
83
108
|
};
|
|
84
109
|
const initial = {
|
|
85
110
|
opacity: 0,
|
|
86
|
-
x: isRTL() &&
|
|
111
|
+
x: isRTL() && location.isBack || !isRTL() && !location.isBack ? 50 : -50
|
|
87
112
|
};
|
|
88
113
|
const exit = {
|
|
89
114
|
delay: animationExitDelay,
|
|
90
115
|
opacity: 0,
|
|
91
|
-
x: !isRTL() &&
|
|
116
|
+
x: !isRTL() && location.isBack || isRTL() && !location.isBack ? 50 : -50,
|
|
92
117
|
transition: {
|
|
93
118
|
duration: animationExitDuration,
|
|
94
119
|
ease: 'easeInOut'
|
|
@@ -100,7 +125,7 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
100
125
|
initial
|
|
101
126
|
};
|
|
102
127
|
return createElement(motion.div, _extends({
|
|
103
|
-
ref:
|
|
128
|
+
ref: mergedWrapperRef,
|
|
104
129
|
className: classes
|
|
105
130
|
}, otherProps, animatedProps), children);
|
|
106
131
|
}
|
|
@@ -115,34 +140,34 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
115
140
|
* __experimentalUseNavigator as useNavigator,
|
|
116
141
|
* } from '@wordpress/components';
|
|
117
142
|
*
|
|
118
|
-
* function NavigatorButton( {
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
*
|
|
122
|
-
*
|
|
123
|
-
*
|
|
124
|
-
*
|
|
125
|
-
*
|
|
126
|
-
*
|
|
127
|
-
*
|
|
128
|
-
*
|
|
129
|
-
*
|
|
143
|
+
* function NavigatorButton( { path, ...props } ) {
|
|
144
|
+
* const { goTo } = useNavigator();
|
|
145
|
+
* return (
|
|
146
|
+
* <Button
|
|
147
|
+
* variant="primary"
|
|
148
|
+
* onClick={ () => goTo( path ) }
|
|
149
|
+
* { ...props }
|
|
150
|
+
* />
|
|
151
|
+
* );
|
|
152
|
+
* }
|
|
153
|
+
*
|
|
154
|
+
* function NavigatorBackButton( props ) {
|
|
155
|
+
* const { goBack } = useNavigator();
|
|
156
|
+
* return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
|
|
130
157
|
* }
|
|
131
158
|
*
|
|
132
159
|
* const MyNavigation = () => (
|
|
133
160
|
* <NavigatorProvider initialPath="/">
|
|
134
161
|
* <NavigatorScreen path="/">
|
|
135
162
|
* <p>This is the home screen.</p>
|
|
136
|
-
* <NavigatorButton
|
|
163
|
+
* <NavigatorButton path="/child">
|
|
137
164
|
* Navigate to child screen.
|
|
138
165
|
* </NavigatorButton>
|
|
139
166
|
* </NavigatorScreen>
|
|
140
167
|
*
|
|
141
168
|
* <NavigatorScreen path="/child">
|
|
142
169
|
* <p>This is the child screen.</p>
|
|
143
|
-
* <
|
|
144
|
-
* Go back
|
|
145
|
-
* </NavigatorButton>
|
|
170
|
+
* <NavigatorBackButton>Go back</NavigatorBackButton>
|
|
146
171
|
* </NavigatorScreen>
|
|
147
172
|
* </NavigatorProvider>
|
|
148
173
|
* );
|