@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -3
- package/CONTRIBUTING.md +20 -0
- package/build/border-box-control/border-box-control/component.js +2 -0
- package/build/border-box-control/border-box-control/component.js.map +1 -1
- package/build/border-box-control/border-box-control/hook.js +4 -1
- package/build/border-box-control/border-box-control/hook.js.map +1 -1
- package/build/border-box-control/utils.js +42 -2
- package/build/border-box-control/utils.js.map +1 -1
- package/build/border-control/border-control/component.js +2 -0
- package/build/border-control/border-control/component.js.map +1 -1
- package/build/combobox-control/index.js +0 -1
- package/build/combobox-control/index.js.map +1 -1
- package/build/custom-select-control/index.js +4 -2
- package/build/custom-select-control/index.js.map +1 -1
- package/build/disabled/index.js +6 -26
- package/build/disabled/index.js.map +1 -1
- package/build/font-size-picker/index.js +47 -56
- package/build/font-size-picker/index.js.map +1 -1
- package/build/font-size-picker/styles.js +65 -0
- package/build/font-size-picker/styles.js.map +1 -0
- package/build/font-size-picker/types.js +6 -0
- package/build/font-size-picker/types.js.map +1 -0
- package/build/font-size-picker/utils.js +18 -16
- package/build/font-size-picker/utils.js.map +1 -1
- package/build/form-token-field/suggestions-list.js +5 -5
- package/build/form-token-field/suggestions-list.js.map +1 -1
- package/build/form-token-field/token-input.js +20 -1
- package/build/form-token-field/token-input.js.map +1 -1
- package/build/higher-order/with-fallback-styles/index.js +1 -1
- package/build/higher-order/with-fallback-styles/index.js.map +1 -1
- package/build/index.js +14 -6
- package/build/index.js.map +1 -1
- package/build/modal/aria-helper.js +2 -3
- package/build/modal/aria-helper.js.map +1 -1
- package/build/modal/index.js +42 -11
- package/build/modal/index.js.map +1 -1
- package/build/modal/types.js +6 -0
- package/build/modal/types.js.map +1 -0
- package/build/navigator/index.js +8 -8
- package/build/navigator/index.js.map +1 -1
- package/build/navigator/navigator-back-button/component.js +5 -4
- package/build/navigator/navigator-back-button/component.js.map +1 -1
- package/build/navigator/navigator-back-button/index.js +1 -1
- package/build/navigator/navigator-back-button/index.js.map +1 -1
- package/build/navigator/navigator-button/component.js +5 -4
- package/build/navigator/navigator-button/component.js.map +1 -1
- package/build/navigator/navigator-button/index.js +1 -1
- package/build/navigator/navigator-button/index.js.map +1 -1
- package/build/navigator/navigator-provider/component.js +10 -7
- package/build/navigator/navigator-provider/component.js.map +1 -1
- package/build/navigator/navigator-provider/index.js +1 -1
- package/build/navigator/navigator-provider/index.js.map +1 -1
- package/build/navigator/navigator-screen/component.js +30 -26
- package/build/navigator/navigator-screen/component.js.map +1 -1
- package/build/navigator/navigator-screen/index.js +1 -1
- package/build/navigator/navigator-screen/index.js.map +1 -1
- package/build/resizable-box/resize-tooltip/utils.js +12 -14
- package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
- package/build/sandbox/index.js +68 -67
- package/build/sandbox/index.js.map +1 -1
- package/build/sandbox/index.native.js +66 -63
- package/build/sandbox/index.native.js.map +1 -1
- package/build/search-control/index.native.js +6 -2
- package/build/search-control/index.native.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/slot-fill-context.js +8 -2
- package/build/slot-fill/bubbles-virtually/slot-fill-context.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +31 -41
- package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build/slot-fill/bubbles-virtually/use-slot-fills.js +39 -0
- package/build/slot-fill/bubbles-virtually/use-slot-fills.js.map +1 -0
- package/build/slot-fill/bubbles-virtually/use-slot.js +13 -4
- package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build/slot-fill/index.js +8 -0
- package/build/slot-fill/index.js.map +1 -1
- package/build/tab-panel/index.js +4 -4
- package/build/tab-panel/index.js.map +1 -1
- package/build/theme/index.js +62 -0
- package/build/theme/index.js.map +1 -0
- package/build/theme/styles.js +33 -0
- package/build/theme/styles.js.map +1 -0
- package/build/theme/types.js +6 -0
- package/build/theme/types.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js +8 -8
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
- package/build/tools-panel/tools-panel/hook.js +3 -3
- package/build/tools-panel/tools-panel/hook.js.map +1 -1
- package/build/tools-panel/tools-panel-item/hook.js +6 -6
- package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build/tooltip/index.js +4 -1
- package/build/tooltip/index.js.map +1 -1
- package/build/tooltip/index.native.js +17 -4
- package/build/tooltip/index.native.js.map +1 -1
- package/build-module/border-box-control/border-box-control/component.js +2 -0
- package/build-module/border-box-control/border-box-control/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control/hook.js +4 -1
- package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
- package/build-module/border-box-control/utils.js +36 -1
- package/build-module/border-box-control/utils.js.map +1 -1
- package/build-module/border-control/border-control/component.js +2 -0
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/combobox-control/index.js +0 -1
- package/build-module/combobox-control/index.js.map +1 -1
- package/build-module/custom-select-control/index.js +2 -1
- package/build-module/custom-select-control/index.js.map +1 -1
- package/build-module/disabled/index.js +7 -26
- package/build-module/disabled/index.js.map +1 -1
- package/build-module/font-size-picker/index.js +46 -54
- package/build-module/font-size-picker/index.js.map +1 -1
- package/build-module/font-size-picker/styles.js +54 -0
- package/build-module/font-size-picker/styles.js.map +1 -0
- package/build-module/font-size-picker/types.js +2 -0
- package/build-module/font-size-picker/types.js.map +1 -0
- package/build-module/font-size-picker/utils.js +22 -16
- package/build-module/font-size-picker/utils.js.map +1 -1
- package/build-module/form-token-field/suggestions-list.js +5 -5
- package/build-module/form-token-field/suggestions-list.js.map +1 -1
- package/build-module/form-token-field/token-input.js +21 -2
- package/build-module/form-token-field/token-input.js.map +1 -1
- package/build-module/higher-order/with-fallback-styles/index.js +2 -2
- package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
- package/build-module/index.js +3 -2
- package/build-module/index.js.map +1 -1
- package/build-module/modal/aria-helper.js +2 -3
- package/build-module/modal/aria-helper.js.map +1 -1
- package/build-module/modal/index.js +44 -12
- package/build-module/modal/index.js.map +1 -1
- package/build-module/modal/types.js +2 -0
- package/build-module/modal/types.js.map +1 -0
- package/build-module/navigator/index.js +4 -4
- package/build-module/navigator/index.js.map +1 -1
- package/build-module/navigator/navigator-back-button/component.js +3 -3
- package/build-module/navigator/navigator-back-button/component.js.map +1 -1
- package/build-module/navigator/navigator-back-button/index.js +1 -1
- package/build-module/navigator/navigator-back-button/index.js.map +1 -1
- package/build-module/navigator/navigator-button/component.js +3 -3
- package/build-module/navigator/navigator-button/component.js.map +1 -1
- package/build-module/navigator/navigator-button/index.js +1 -1
- package/build-module/navigator/navigator-button/index.js.map +1 -1
- package/build-module/navigator/navigator-provider/component.js +8 -6
- package/build-module/navigator/navigator-provider/component.js.map +1 -1
- package/build-module/navigator/navigator-provider/index.js +1 -1
- package/build-module/navigator/navigator-provider/index.js.map +1 -1
- package/build-module/navigator/navigator-screen/component.js +18 -25
- package/build-module/navigator/navigator-screen/component.js.map +1 -1
- package/build-module/navigator/navigator-screen/index.js +1 -1
- package/build-module/navigator/navigator-screen/index.js.map +1 -1
- package/build-module/resizable-box/resize-tooltip/utils.js +13 -15
- package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
- package/build-module/sandbox/index.js +69 -67
- package/build-module/sandbox/index.js.map +1 -1
- package/build-module/sandbox/index.native.js +57 -53
- package/build-module/sandbox/index.native.js.map +1 -1
- package/build-module/search-control/index.native.js +6 -2
- package/build-module/search-control/index.native.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/slot-fill-context.js +7 -2
- package/build-module/slot-fill/bubbles-virtually/slot-fill-context.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +30 -42
- package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
- package/build-module/slot-fill/bubbles-virtually/use-slot-fills.js +27 -0
- package/build-module/slot-fill/bubbles-virtually/use-slot-fills.js.map +1 -0
- package/build-module/slot-fill/bubbles-virtually/use-slot.js +13 -5
- package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
- package/build-module/slot-fill/index.js +1 -0
- package/build-module/slot-fill/index.js.map +1 -1
- package/build-module/tab-panel/index.js +4 -4
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-module/theme/index.js +52 -0
- package/build-module/theme/index.js.map +1 -0
- package/build-module/theme/styles.js +25 -0
- package/build-module/theme/styles.js.map +1 -0
- package/build-module/theme/types.js +2 -0
- package/build-module/theme/types.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +7 -7
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
- package/build-module/tools-panel/tools-panel/hook.js +3 -3
- package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
- package/build-module/tools-panel/tools-panel-item/hook.js +6 -6
- package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
- package/build-module/tooltip/index.js +4 -1
- package/build-module/tooltip/index.js.map +1 -1
- package/build-module/tooltip/index.native.js +17 -4
- package/build-module/tooltip/index.native.js.map +1 -1
- package/build-style/style-rtl.css +27 -120
- package/build-style/style.css +27 -120
- package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control/hook.d.ts +1 -0
- package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
- package/build-types/border-box-control/utils.d.ts +1 -3
- package/build-types/border-box-control/utils.d.ts.map +1 -1
- package/build-types/border-control/border-control/component.d.ts +1 -0
- package/build-types/border-control/border-control/component.d.ts.map +1 -1
- package/build-types/border-control/border-control/hook.d.ts +1 -0
- package/build-types/border-control/border-control/hook.d.ts.map +1 -1
- package/build-types/border-control/stories/index.d.ts +6 -0
- package/build-types/border-control/stories/index.d.ts.map +1 -1
- package/build-types/border-control/types.d.ts +4 -0
- package/build-types/border-control/types.d.ts.map +1 -1
- package/build-types/confirm-dialog/types.d.ts +5 -1
- package/build-types/confirm-dialog/types.d.ts.map +1 -1
- package/build-types/custom-select-control/index.d.ts +13 -0
- package/build-types/custom-select-control/index.d.ts.map +1 -0
- package/build-types/custom-select-control/styles.d.ts +9 -0
- package/build-types/custom-select-control/styles.d.ts.map +1 -0
- package/build-types/disabled/index.d.ts.map +1 -1
- package/build-types/font-size-picker/index.d.ts +5 -0
- package/build-types/font-size-picker/index.d.ts.map +1 -0
- package/build-types/font-size-picker/stories/e2e/index.d.ts +16 -0
- package/build-types/font-size-picker/stories/e2e/index.d.ts.map +1 -0
- package/build-types/font-size-picker/stories/index.d.ts +31 -0
- package/build-types/font-size-picker/stories/index.d.ts.map +1 -0
- package/build-types/font-size-picker/styles.d.ts +27 -0
- package/build-types/font-size-picker/styles.d.ts.map +1 -0
- package/build-types/font-size-picker/test/index.d.ts +2 -0
- package/build-types/font-size-picker/test/index.d.ts.map +1 -0
- package/build-types/font-size-picker/test/utils.d.ts +2 -0
- package/build-types/font-size-picker/test/utils.d.ts.map +1 -0
- package/build-types/font-size-picker/types.d.ts +93 -0
- package/build-types/font-size-picker/types.d.ts.map +1 -0
- package/build-types/font-size-picker/utils.d.ts +41 -0
- package/build-types/font-size-picker/utils.d.ts.map +1 -0
- package/build-types/form-token-field/token-input.d.ts.map +1 -1
- package/build-types/modal/aria-helper.d.ts +4 -4
- package/build-types/modal/aria-helper.d.ts.map +1 -1
- package/build-types/modal/index.d.ts +35 -2
- package/build-types/modal/index.d.ts.map +1 -1
- package/build-types/modal/stories/index.d.ts +9 -0
- package/build-types/modal/stories/index.d.ts.map +1 -0
- package/build-types/modal/test/aria-helper.d.ts +2 -0
- package/build-types/modal/test/aria-helper.d.ts.map +1 -0
- package/build-types/modal/test/index.d.ts +2 -0
- package/build-types/modal/test/index.d.ts.map +1 -0
- package/build-types/modal/types.d.ts +134 -0
- package/build-types/modal/types.d.ts.map +1 -0
- package/build-types/navigator/index.d.ts +4 -4
- package/build-types/navigator/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-back-button/component.d.ts +4 -2
- package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-back-button/hook.d.ts +1 -0
- package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
- package/build-types/navigator/navigator-back-button/index.d.ts +1 -1
- package/build-types/navigator/navigator-back-button/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/component.d.ts +4 -2
- package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/hook.d.ts +1 -0
- package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/index.d.ts +1 -1
- package/build-types/navigator/navigator-button/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-provider/component.d.ts +2 -2
- package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-provider/index.d.ts +1 -1
- package/build-types/navigator/navigator-provider/index.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/component.d.ts +2 -2
- package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/index.d.ts +1 -1
- package/build-types/navigator/navigator-screen/index.d.ts.map +1 -1
- package/build-types/navigator/stories/index.d.ts +9 -0
- package/build-types/navigator/stories/index.d.ts.map +1 -0
- package/build-types/navigator/test/index.d.ts +2 -0
- package/build-types/navigator/test/index.d.ts.map +1 -0
- package/build-types/navigator/types.d.ts +4 -1
- package/build-types/navigator/types.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts +2 -2
- package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
- package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts +2 -0
- package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map +1 -0
- package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
- package/build-types/slot-fill/index.d.ts +1 -0
- package/build-types/slot-fill/index.d.ts.map +1 -1
- package/build-types/tab-panel/index.d.ts.map +1 -1
- package/build-types/theme/index.d.ts +31 -0
- package/build-types/theme/index.d.ts.map +1 -0
- package/build-types/theme/stories/index.d.ts +13 -0
- package/build-types/theme/stories/index.d.ts.map +1 -0
- package/build-types/theme/styles.d.ts +10 -0
- package/build-types/theme/styles.d.ts.map +1 -0
- package/build-types/theme/test/index.d.ts +2 -0
- package/build-types/theme/test/index.d.ts.map +1 -0
- package/build-types/theme/types.d.ts +21 -0
- package/build-types/theme/types.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
- package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
- package/build-types/tooltip/index.d.ts.map +1 -1
- package/package.json +19 -18
- package/src/alignment-matrix-control/test/index.js +17 -62
- package/src/base-field/test/index.js +4 -6
- package/src/border-box-control/border-box-control/component.tsx +2 -0
- package/src/border-box-control/border-box-control/hook.ts +4 -0
- package/src/border-box-control/test/index.js +7 -2
- package/src/border-box-control/test/utils.js +48 -0
- package/src/border-box-control/utils.ts +44 -1
- package/src/border-control/border-control/README.md +6 -0
- package/src/border-control/border-control/component.tsx +2 -0
- package/src/border-control/types.ts +4 -0
- package/src/button/style.scss +25 -25
- package/src/button/test/index.js +3 -5
- package/src/combobox-control/index.js +0 -5
- package/src/combobox-control/test/index.js +1 -1
- package/src/confirm-dialog/types.ts +6 -0
- package/src/custom-select-control/index.js +2 -1
- package/src/date-time/time/test/index.tsx +2 -6
- package/src/disabled/index.tsx +11 -33
- package/src/disabled/test/index.tsx +14 -82
- package/src/dropdown/test/index.js +4 -3
- package/src/font-size-picker/{index.js → index.tsx} +114 -80
- package/src/font-size-picker/stories/e2e/{index.js → index.tsx} +13 -4
- package/src/font-size-picker/stories/{index.js → index.tsx} +42 -36
- package/src/font-size-picker/styles.ts +46 -0
- package/src/font-size-picker/test/{index.js → index.tsx} +3 -3
- package/src/font-size-picker/test/{utils.js → utils.ts} +11 -7
- package/src/font-size-picker/types.ts +98 -0
- package/src/font-size-picker/{utils.js → utils.ts} +52 -28
- package/src/form-file-upload/test/index.tsx +1 -1
- package/src/form-token-field/suggestions-list.tsx +5 -5
- package/src/form-token-field/test/index.tsx +22 -1
- package/src/form-token-field/token-input.tsx +25 -3
- package/src/higher-order/with-fallback-styles/index.js +6 -2
- package/src/higher-order/with-focus-outside/test/index.js +44 -45
- package/src/higher-order/with-focus-return/test/index.js +34 -30
- package/src/higher-order/with-notices/test/index.js +1 -1
- package/src/index.js +3 -1
- package/src/input-control/test/index.js +2 -2
- package/src/item-group/test/index.js +2 -2
- package/src/menu-item/test/index.js +0 -3
- package/src/mobile/bottom-sheet/test/range-cell.native.js +16 -14
- package/src/modal/README.md +53 -54
- package/src/modal/{aria-helper.js → aria-helper.ts} +5 -7
- package/src/modal/{index.js → index.tsx} +48 -12
- package/src/modal/stories/{index.js → index.tsx} +47 -42
- package/src/modal/test/{aria-helper.js → aria-helper.ts} +0 -0
- package/src/modal/test/{index.js → index.tsx} +13 -3
- package/src/modal/types.ts +144 -0
- package/src/navigation/test/index.js +1 -1
- package/src/navigator/index.ts +4 -4
- package/src/navigator/navigator-back-button/component.tsx +4 -4
- package/src/navigator/navigator-back-button/index.ts +1 -1
- package/src/navigator/navigator-button/component.tsx +4 -4
- package/src/navigator/navigator-button/index.ts +1 -1
- package/src/navigator/navigator-provider/component.tsx +6 -4
- package/src/navigator/navigator-provider/index.ts +1 -1
- package/src/navigator/navigator-screen/component.tsx +27 -26
- package/src/navigator/navigator-screen/index.ts +1 -1
- package/src/navigator/stories/index.tsx +210 -0
- package/src/navigator/test/index.tsx +509 -0
- package/src/navigator/types.ts +2 -0
- package/src/notice/test/__snapshots__/index.js.snap +39 -38
- package/src/notice/test/index.js +15 -36
- package/src/notice/test/list.js +6 -14
- package/src/number-control/test/index.js +3 -2
- package/src/panel/test/body.js +2 -2
- package/src/placeholder/style.scss +7 -2
- package/src/resizable-box/resize-tooltip/utils.ts +13 -13
- package/src/sandbox/index.js +75 -54
- package/src/sandbox/index.native.js +75 -52
- package/src/sandbox/test/index.js +7 -10
- package/src/search-control/index.native.js +6 -0
- package/src/shortcut/test/index.tsx +1 -1
- package/src/slot-fill/bubbles-virtually/slot-fill-context.js +6 -2
- package/src/slot-fill/bubbles-virtually/slot-fill-provider.js +53 -58
- package/src/slot-fill/bubbles-virtually/use-slot-fills.js +24 -0
- package/src/slot-fill/bubbles-virtually/use-slot.js +11 -6
- package/src/slot-fill/index.js +1 -0
- package/src/style.scss +4 -1
- package/src/tab-panel/index.tsx +4 -7
- package/src/text-highlight/test/index.tsx +1 -3
- package/src/theme/README.md +34 -0
- package/src/theme/index.tsx +51 -0
- package/src/theme/stories/index.tsx +47 -0
- package/src/theme/styles.ts +28 -0
- package/src/theme/test/index.tsx +101 -0
- package/src/theme/types.ts +21 -0
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +1 -0
- package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +9 -7
- package/src/toolbar/test/index.js +2 -2
- package/src/toolbar-group/test/index.js +6 -10
- package/src/tools-panel/test/index.js +4 -6
- package/src/tools-panel/tools-panel/hook.ts +2 -9
- package/src/tools-panel/tools-panel-item/hook.ts +17 -3
- package/src/tooltip/index.js +3 -0
- package/src/tooltip/index.native.js +15 -0
- package/src/tooltip/test/index.native.js +1 -2
- package/src/tree-grid/test/__snapshots__/cell.js.snap +1 -3
- package/src/tree-grid/test/__snapshots__/roving-tab-index-item.js.snap +17 -15
- package/src/tree-grid/test/__snapshots__/row.js.snap +25 -21
- package/src/tree-grid/test/cell.js +4 -4
- package/src/tree-grid/test/roving-tab-index-item.js +8 -8
- package/src/tree-grid/test/roving-tab-index.js +3 -3
- package/src/tree-grid/test/row.js +20 -16
- package/src/truncate/test/index.tsx +4 -4
- package/src/ui/shortcut/test/index.js +2 -1
- package/src/ui/spinner/test/index.js +14 -13
- package/src/ui/tooltip/test/index.js +16 -14
- package/src/utils/theme-variables.scss +8 -0
- package/src/visually-hidden/README.md +4 -0
- package/tsconfig.json +0 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/src/font-size-picker/style.scss +0 -78
- package/src/navigator/stories/index.js +0 -194
- package/src/navigator/test/index.js +0 -407
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
1
|
+
export { NavigatorProvider } from './navigator-provider';
|
|
2
|
+
export { NavigatorScreen } from './navigator-screen';
|
|
3
|
+
export { NavigatorButton } from './navigator-button';
|
|
4
|
+
export { NavigatorBackButton } from './navigator-back-button';
|
|
5
5
|
export { default as useNavigator } from './use-navigator';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/index.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/index.ts"],"names":["NavigatorProvider","NavigatorScreen","NavigatorButton","NavigatorBackButton","default","useNavigator"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,sBAAlC;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,mBAAT,QAAoC,yBAApC;AACA,SAASC,OAAO,IAAIC,YAApB,QAAwC,iBAAxC","sourcesContent":["export { NavigatorProvider } from './navigator-provider';\nexport { NavigatorScreen } from './navigator-screen';\nexport { NavigatorButton } from './navigator-button';\nexport { NavigatorBackButton } from './navigator-back-button';\nexport { default as useNavigator } from './use-navigator';\n"]}
|
|
@@ -12,7 +12,7 @@ import { contextConnect } from '../../ui/context';
|
|
|
12
12
|
import { View } from '../../view';
|
|
13
13
|
import { useNavigatorBackButton } from './hook';
|
|
14
14
|
|
|
15
|
-
function
|
|
15
|
+
function UnconnectedNavigatorBackButton(props, forwardedRef) {
|
|
16
16
|
const navigatorBackButtonProps = useNavigatorBackButton(props);
|
|
17
17
|
return createElement(View, _extends({
|
|
18
18
|
ref: forwardedRef
|
|
@@ -54,6 +54,6 @@ function NavigatorBackButton(props, forwardedRef) {
|
|
|
54
54
|
*/
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
const
|
|
58
|
-
export default
|
|
57
|
+
export const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
|
|
58
|
+
export default NavigatorBackButton;
|
|
59
59
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["contextConnect","View","useNavigatorBackButton","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["contextConnect","View","useNavigatorBackButton","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","NavigatorBackButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,sBAAT,QAAuC,QAAvC;;AAGA,SAASC,8BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,wBAAwB,GAAGJ,sBAAsB,CAAEE,KAAF,CAAvD;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,wBAAhC,EAAP;AACA;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,OAAO,MAAMC,mBAAmB,GAAGP,cAAc,CAChDG,8BADgD,EAEhD,qBAFgD,CAA1C;AAKP,eAAeI,mBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <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>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './component';
|
|
1
|
+
export { default as NavigatorBackButton } from './component';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/index.ts"],"names":["default","NavigatorBackButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,aAA/C","sourcesContent":["export { default as NavigatorBackButton } from './component';\n"]}
|
|
@@ -12,7 +12,7 @@ import { contextConnect } from '../../ui/context';
|
|
|
12
12
|
import { View } from '../../view';
|
|
13
13
|
import { useNavigatorButton } from './hook';
|
|
14
14
|
|
|
15
|
-
function
|
|
15
|
+
function UnconnectedNavigatorButton(props, forwardedRef) {
|
|
16
16
|
const navigatorButtonProps = useNavigatorButton(props);
|
|
17
17
|
return createElement(View, _extends({
|
|
18
18
|
ref: forwardedRef
|
|
@@ -53,6 +53,6 @@ function NavigatorButton(props, forwardedRef) {
|
|
|
53
53
|
*/
|
|
54
54
|
|
|
55
55
|
|
|
56
|
-
const
|
|
57
|
-
export default
|
|
56
|
+
export const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton');
|
|
57
|
+
export default NavigatorButton;
|
|
58
58
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"names":["contextConnect","View","useNavigatorButton","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"names":["contextConnect","View","useNavigatorButton","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","NavigatorButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,kBAAT,QAAmC,QAAnC;;AAGA,SAASC,0BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,oBAAoB,GAAGJ,kBAAkB,CAAEE,KAAF,CAA/C;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,oBAAhC,EAAP;AACA;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,OAAO,MAAMC,eAAe,GAAGP,cAAc,CAC5CG,0BAD4C,EAE5C,iBAF4C,CAAtC;AAKP,eAAeI,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\n/**\n * The `NavigatorButton` component can be used to navigate to a screen and should\n * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`\n * and the `NavigatorBackButton` components (or the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <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>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'NavigatorButton'\n);\n\nexport default NavigatorButton;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './component';
|
|
1
|
+
export { default as NavigatorButton } from './component';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/index.ts"],"names":["default","NavigatorButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,aAA3C","sourcesContent":["export { default as NavigatorButton } from './component';\n"]}
|
|
@@ -27,11 +27,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
27
27
|
} : {
|
|
28
28
|
name: "192ebb7-classes",
|
|
29
29
|
styles: "overflow-x:hidden;label:classes;",
|
|
30
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
30
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNGWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgRm9yd2FyZGVkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUsIHVzZUNhbGxiYWNrIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHtcblx0TmF2aWdhdG9yUHJvdmlkZXJQcm9wcyxcblx0TmF2aWdhdG9yTG9jYXRpb24sXG5cdE5hdmlnYXRvckNvbnRleHQgYXMgTmF2aWdhdG9yQ29udGV4dFR5cGUsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gVW5jb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlcihcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCAnZGl2JyA+LFxuXHRmb3J3YXJkZWRSZWY6IEZvcndhcmRlZFJlZjwgYW55ID5cbikge1xuXHRjb25zdCB7IGluaXRpYWxQYXRoLCBjaGlsZHJlbiwgY2xhc3NOYW1lLCAuLi5vdGhlclByb3BzIH0gPVxuXHRcdHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnTmF2aWdhdG9yUHJvdmlkZXInICk7XG5cblx0Y29uc3QgWyBsb2NhdGlvbkhpc3RvcnksIHNldExvY2F0aW9uSGlzdG9yeSBdID0gdXNlU3RhdGU8XG5cdFx0TmF2aWdhdG9yTG9jYXRpb25bXVxuXHQ+KCBbXG5cdFx0e1xuXHRcdFx0cGF0aDogaW5pdGlhbFBhdGgsXG5cdFx0fSxcblx0XSApO1xuXG5cdGNvbnN0IGdvVG86IE5hdmlnYXRvckNvbnRleHRUeXBlWyAnZ29UbycgXSA9IHVzZUNhbGxiYWNrKFxuXHRcdCggcGF0aCwgb3B0aW9ucyA9IHt9ICkgPT4ge1xuXHRcdFx0c2V0TG9jYXRpb25IaXN0b3J5KCBbXG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeSxcblx0XHRcdFx0e1xuXHRcdFx0XHRcdC4uLm9wdGlvbnMsXG5cdFx0XHRcdFx0cGF0aCxcblx0XHRcdFx0XHRpc0JhY2s6IGZhbHNlLFxuXHRcdFx0XHRcdGhhc1Jlc3RvcmVkRm9jdXM6IGZhbHNlLFxuXHRcdFx0XHR9LFxuXHRcdFx0XSApO1xuXHRcdH0sXG5cdFx0WyBsb2NhdGlvbkhpc3RvcnkgXVxuXHQpO1xuXG5cdGNvbnN0IGdvQmFjazogTmF2aWdhdG9yQ29udGV4dFR5cGVbICdnb0JhY2snIF0gPSB1c2VDYWxsYmFjayggKCkgPT4ge1xuXHRcdGlmICggbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCA+IDEgKSB7XG5cdFx0XHRzZXRMb2NhdGlvbkhpc3RvcnkoIFtcblx0XHRcdFx0Li4ubG9jYXRpb25IaXN0b3J5LnNsaWNlKCAwLCAtMiApLFxuXHRcdFx0XHR7XG5cdFx0XHRcdFx0Li4ubG9jYXRpb25IaXN0b3J5WyBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoIC0gMiBdLFxuXHRcdFx0XHRcdGlzQmFjazogdHJ1ZSxcblx0XHRcdFx0XHRoYXNSZXN0b3JlZEZvY3VzOiBmYWxzZSxcblx0XHRcdFx0fSxcblx0XHRcdF0gKTtcblx0XHR9XG5cdH0sIFsgbG9jYXRpb25IaXN0b3J5IF0gKTtcblxuXHRjb25zdCBuYXZpZ2F0b3JDb250ZXh0VmFsdWU6IE5hdmlnYXRvckNvbnRleHRUeXBlID0gdXNlTWVtbyhcblx0XHQoKSA9PiAoIHtcblx0XHRcdGxvY2F0aW9uOiB7XG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeVsgbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCAtIDEgXSxcblx0XHRcdFx0aXNJbml0aWFsOiBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoID09PSAxLFxuXHRcdFx0fSxcblx0XHRcdGdvVG8sXG5cdFx0XHRnb0JhY2ssXG5cdFx0fSApLFxuXHRcdFsgbG9jYXRpb25IaXN0b3J5LCBnb1RvLCBnb0JhY2sgXVxuXHQpO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oXG5cdFx0Ly8gUHJldmVudHMgaG9yaXpvbnRhbCBvdmVyZmxvdyB3aGlsZSBhbmltYXRpbmcgc2NyZWVuIHRyYW5zaXRpb25zLlxuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8VmlldyByZWY9eyBmb3J3YXJkZWRSZWYgfSBjbGFzc05hbWU9eyBjbGFzc2VzIH0geyAuLi5vdGhlclByb3BzIH0+XG5cdFx0XHQ8TmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17IG5hdmlnYXRvckNvbnRleHRWYWx1ZSB9PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvTmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlcj5cblx0XHQ8L1ZpZXc+XG5cdCk7XG59XG5cbi8qKlxuICogVGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAgY29tcG9uZW50IGFsbG93cyByZW5kZXJpbmcgbmVzdGVkIHZpZXdzL3BhbmVscy9tZW51c1xuICogKHZpYSB0aGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IGFuZCBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZXNlIGRpZmZlcmVudFxuICogdmlldyAodmlhIHRoZSBgTmF2aWdhdG9yQnV0dG9uYCBhbmQgYE5hdmlnYXRvckJhY2tCdXR0b25gIGNvbXBvbmVudHMgb3IgdGhlXG4gKiBgdXNlTmF2aWdhdG9yYCBob29rKS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQnV0dG9uIGFzIE5hdmlnYXRvckJ1dHRvbixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JCYWNrQnV0dG9uIGFzIE5hdmlnYXRvckJhY2tCdXR0b24sXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICAgICAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgICAgICBHbyBiYWNrXG4gKiAgICAgICA8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBOYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHRVbmNvbm5lY3RlZE5hdmlnYXRvclByb3ZpZGVyLFxuXHQnTmF2aWdhdG9yUHJvdmlkZXInXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBOYXZpZ2F0b3JQcm92aWRlcjtcbiJdfQ== */",
|
|
31
31
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
function
|
|
34
|
+
function UnconnectedNavigatorProvider(props, forwardedRef) {
|
|
35
35
|
const {
|
|
36
36
|
initialPath,
|
|
37
37
|
children,
|
|
@@ -45,13 +45,15 @@ function NavigatorProvider(props, forwardedRef) {
|
|
|
45
45
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
46
46
|
setLocationHistory([...locationHistory, { ...options,
|
|
47
47
|
path,
|
|
48
|
-
isBack: false
|
|
48
|
+
isBack: false,
|
|
49
|
+
hasRestoredFocus: false
|
|
49
50
|
}]);
|
|
50
51
|
}, [locationHistory]);
|
|
51
52
|
const goBack = useCallback(() => {
|
|
52
53
|
if (locationHistory.length > 1) {
|
|
53
54
|
setLocationHistory([...locationHistory.slice(0, -2), { ...locationHistory[locationHistory.length - 2],
|
|
54
|
-
isBack: true
|
|
55
|
+
isBack: true,
|
|
56
|
+
hasRestoredFocus: false
|
|
55
57
|
}]);
|
|
56
58
|
}
|
|
57
59
|
}, [locationHistory]);
|
|
@@ -108,6 +110,6 @@ function NavigatorProvider(props, forwardedRef) {
|
|
|
108
110
|
*/
|
|
109
111
|
|
|
110
112
|
|
|
111
|
-
const
|
|
112
|
-
export default
|
|
113
|
+
export const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
|
|
114
|
+
export default NavigatorProvider;
|
|
113
115
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","useCallback","contextConnect","useContextSystem","useCx","View","NavigatorContext","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","useCallback","contextConnect","useContextSystem","useCx","View","NavigatorContext","UnconnectedNavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","locationHistory","setLocationHistory","path","goTo","options","isBack","hasRestoredFocus","goBack","length","slice","navigatorContextValue","location","isInitial","cx","classes","NavigatorProvider"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } 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 UnconnectedNavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { initialPath, children, className, ...otherProps } =\n\t\tuseContextSystem( 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\thasRestoredFocus: 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\thasRestoredFocus: false,\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 views/panels/menus\n * (via the `NavigatorScreen` component and navigate between these different\n * view (via the `NavigatorButton` and `NavigatorBackButton` components or the\n * `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <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>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorProvider = contextConnect(\n\tUnconnectedNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default NavigatorProvider;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './component';
|
|
1
|
+
export { default as NavigatorProvider } from './component';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/index.ts"],"names":["default","NavigatorProvider"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,aAA7C","sourcesContent":["export { default as NavigatorProvider } from './component';\n"]}
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { createElement } from "@wordpress/element";
|
|
3
3
|
|
|
4
|
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
5
|
-
|
|
6
4
|
/**
|
|
7
5
|
* External dependencies
|
|
8
6
|
*/
|
|
9
7
|
// eslint-disable-next-line no-restricted-imports
|
|
10
8
|
import { motion } from 'framer-motion';
|
|
11
|
-
import { css } from '@emotion/react';
|
|
12
9
|
/**
|
|
13
10
|
* WordPress dependencies
|
|
14
11
|
*/
|
|
15
12
|
|
|
16
13
|
import { focus } from '@wordpress/dom';
|
|
17
|
-
import { useContext, useEffect,
|
|
14
|
+
import { useContext, useEffect, useRef } from '@wordpress/element';
|
|
18
15
|
import { useReducedMotion, useMergeRefs, usePrevious } from '@wordpress/compose';
|
|
19
16
|
import { isRTL } from '@wordpress/i18n';
|
|
20
17
|
import { escapeAttribute } from '@wordpress/escape-html';
|
|
@@ -23,7 +20,6 @@ import { escapeAttribute } from '@wordpress/escape-html';
|
|
|
23
20
|
*/
|
|
24
21
|
|
|
25
22
|
import { contextConnect, useContextSystem } from '../../ui/context';
|
|
26
|
-
import { useCx } from '../../utils/hooks/use-cx';
|
|
27
23
|
import { View } from '../../view';
|
|
28
24
|
import { NavigatorContext } from '../context';
|
|
29
25
|
const animationEnterDelay = 0;
|
|
@@ -32,17 +28,7 @@ const animationExitDuration = 0.14;
|
|
|
32
28
|
const animationExitDelay = 0; // Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
|
|
33
29
|
// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
|
|
34
30
|
|
|
35
|
-
|
|
36
|
-
name: "14x3t6z",
|
|
37
|
-
styles: "overflow-x:auto;max-height:100%"
|
|
38
|
-
} : {
|
|
39
|
-
name: "1ulogbc-classes",
|
|
40
|
-
styles: "overflow-x:auto;max-height:100%;label:classes;",
|
|
41
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1zY3JlZW4vY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErREkiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3IvbmF2aWdhdG9yLXNjcmVlbi9jb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tcmVzdHJpY3RlZC1pbXBvcnRzXG5pbXBvcnQgeyBtb3Rpb24sIE1vdGlvblByb3BzIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb2N1cyB9IGZyb20gJ0B3b3JkcHJlc3MvZG9tJztcbmltcG9ydCB7IHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7XG5cdHVzZVJlZHVjZWRNb3Rpb24sXG5cdHVzZU1lcmdlUmVmcyxcblx0dXNlUHJldmlvdXMsXG59IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgeyBpc1JUTCB9IGZyb20gJ0B3b3JkcHJlc3MvaTE4bic7XG5pbXBvcnQgeyBlc2NhcGVBdHRyaWJ1dGUgfSBmcm9tICdAd29yZHByZXNzL2VzY2FwZS1odG1sJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHsgTmF2aWdhdG9yU2NyZWVuUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGFuaW1hdGlvbkVudGVyRGVsYXkgPSAwO1xuY29uc3QgYW5pbWF0aW9uRW50ZXJEdXJhdGlvbiA9IDAuMTQ7XG5jb25zdCBhbmltYXRpb25FeGl0RHVyYXRpb24gPSAwLjE0O1xuY29uc3QgYW5pbWF0aW9uRXhpdERlbGF5ID0gMDtcblxuLy8gUHJvcHMgc3BlY2lmaWMgdG8gYGZyYW1lci1tb3Rpb25gIGNhbid0IGJlIGN1cnJlbnRseSBwYXNzZWQgdG8gYE5hdmlnYXRvclNjcmVlbmAsXG4vLyBhcyBzb21lIG9mIHRoZW0gd291bGQgb3ZlcmxhcCB3aXRoIEhUTUwgcHJvcHMgKGUuZy4gYG9uQW5pbWF0aW9uU3RhcnRgLCAuLi4pXG50eXBlIFByb3BzID0gT21pdDxcblx0V29yZFByZXNzQ29tcG9uZW50UHJvcHM8IE5hdmlnYXRvclNjcmVlblByb3BzLCAnZGl2JywgZmFsc2UgPixcblx0a2V5b2YgTW90aW9uUHJvcHNcbj47XG5cbmZ1bmN0aW9uIE5hdmlnYXRvclNjcmVlbiggcHJvcHM6IFByb3BzLCBmb3J3YXJkZWRSZWY6IEZvcndhcmRlZFJlZjwgYW55ID4gKSB7XG5cdGNvbnN0IHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgcGF0aCwgLi4ub3RoZXJQcm9wcyB9ID0gdXNlQ29udGV4dFN5c3RlbShcblx0XHRwcm9wcyxcblx0XHQnTmF2aWdhdG9yU2NyZWVuJ1xuXHQpO1xuXG5cdGNvbnN0IHByZWZlcnNSZWR1Y2VkTW90aW9uID0gdXNlUmVkdWNlZE1vdGlvbigpO1xuXHRjb25zdCB7IGxvY2F0aW9uIH0gPSB1c2VDb250ZXh0KCBOYXZpZ2F0b3JDb250ZXh0ICk7XG5cdGNvbnN0IGlzTWF0Y2ggPSBsb2NhdGlvbi5wYXRoID09PSBlc2NhcGVBdHRyaWJ1dGUoIHBhdGggKTtcblx0Y29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjwgSFRNTERpdkVsZW1lbnQgPiggbnVsbCApO1xuXG5cdGNvbnN0IHByZXZpb3VzTG9jYXRpb24gPSB1c2VQcmV2aW91cyggbG9jYXRpb24gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdCgpID0+XG5cdFx0XHRjeChcblx0XHRcdFx0Y3NzKCB7XG5cdFx0XHRcdFx0Ly8gRW5zdXJlcyBob3Jpem9udGFsIG92ZXJmbG93IGlzIHZpc3VhbGx5IGFjY2Vzc2libGUuXG5cdFx0XHRcdFx0b3ZlcmZsb3dYOiAnYXV0bycsXG5cdFx0XHRcdFx0Ly8gSW4gY2FzZSB0aGUgcm9vdCBoYXMgYSBoZWlnaHQsIGl0IHNob3VsZCBub3QgYmUgZXhjZWVkZWQuXG5cdFx0XHRcdFx0bWF4SGVpZ2h0OiAnMTAwJScsXG5cdFx0XHRcdH0gKSxcblx0XHRcdFx0Y2xhc3NOYW1lXG5cdFx0XHQpLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0Ly8gRm9jdXMgcmVzdG9yYXRpb25cblx0Y29uc3QgaXNJbml0aWFsTG9jYXRpb24gPSBsb2NhdGlvbi5pc0luaXRpYWwgJiYgISBsb2NhdGlvbi5pc0JhY2s7XG5cdHVzZUVmZmVjdCggKCkgPT4ge1xuXHRcdC8vIE9ubHkgYXR0ZW1wdCB0byByZXN0b3JlIGZvY3VzOlxuXHRcdC8vIC0gaWYgdGhlIGN1cnJlbnQgbG9jYXRpb24gaXMgbm90IHRoZSBpbml0aWFsIG9uZSAodG8gYXZvaWQgbW92aW5nIGZvY3VzIG9uIHBhZ2UgbG9hZClcblx0XHQvLyAtIHdoZW4gdGhlIHNjcmVlbiBiZWNvbWVzIHZpc2libGVcblx0XHQvLyAtIGlmIHRoZSB3cmFwcGVyIHJlZiBoYXMgYmVlbiBhc3NpZ25lZFxuXHRcdGlmICggaXNJbml0aWFsTG9jYXRpb24gfHwgISBpc01hdGNoIHx8ICEgd3JhcHBlclJlZi5jdXJyZW50ICkge1xuXHRcdFx0cmV0dXJuO1xuXHRcdH1cblxuXHRcdGxldCBlbGVtZW50VG9Gb2N1czogSFRNTEVsZW1lbnQgfCBudWxsID0gbnVsbDtcblxuXHRcdC8vIFdoZW4gbmF2aWdhdGluZyBiYWNrLCBpZiBhIHNlbGVjdG9yIGlzIHByb3ZpZGVkLCB1c2UgaXQgdG8gbG9vayBmb3IgdGhlXG5cdFx0Ly8gdGFyZ2V0IGVsZW1lbnQgKGFzc3VtZWQgdG8gYmUgYSBub2RlIGluc2lkZSB0aGUgY3VycmVudCBOYXZpZ2F0b3JTY3JlZW4pXG5cdFx0aWYgKCBsb2NhdGlvbi5pc0JhY2sgJiYgcHJldmlvdXNMb2NhdGlvbj8uZm9jdXNUYXJnZXRTZWxlY3RvciApIHtcblx0XHRcdGVsZW1lbnRUb0ZvY3VzID0gd3JhcHBlclJlZi5jdXJyZW50LnF1ZXJ5U2VsZWN0b3IoXG5cdFx0XHRcdHByZXZpb3VzTG9jYXRpb24uZm9jdXNUYXJnZXRTZWxlY3RvclxuXHRcdFx0KTtcblx0XHR9XG5cblx0XHQvLyBJZiB0aGUgcHJldmlvdXMgcXVlcnkgZGlkbid0IHJ1biBvciBmaW5kIGFueSBlbGVtZW50IHRvIGZvY3VzLCBmYWxsYmFja1xuXHRcdC8vIHRvIHRoZSBmaXJzdCB0YWJiYWJsZSBlbGVtZW50IGluIHRoZSBzY3JlZW4gKG9yIHRoZSBzY3JlZW4gaXRzZWxmKS5cblx0XHRpZiAoICEgZWxlbWVudFRvRm9jdXMgKSB7XG5cdFx0XHRjb25zdCBmaXJzdFRhYmJhYmxlID0gKFxuXHRcdFx0XHRmb2N1cy50YWJiYWJsZS5maW5kKCB3cmFwcGVyUmVmLmN1cnJlbnQgKSBhcyBIVE1MRWxlbWVudFtdXG5cdFx0XHQgKVsgMCBdO1xuXG5cdFx0XHRlbGVtZW50VG9Gb2N1cyA9IGZpcnN0VGFiYmFibGUgPz8gd3JhcHBlclJlZi5jdXJyZW50O1xuXHRcdH1cblxuXHRcdGVsZW1lbnRUb0ZvY3VzLmZvY3VzKCk7XG5cdH0sIFtcblx0XHRpc0luaXRpYWxMb2NhdGlvbixcblx0XHRpc01hdGNoLFxuXHRcdGxvY2F0aW9uLmlzQmFjayxcblx0XHRwcmV2aW91c0xvY2F0aW9uPy5mb2N1c1RhcmdldFNlbGVjdG9yLFxuXHRdICk7XG5cblx0Y29uc3QgbWVyZ2VkV3JhcHBlclJlZiA9IHVzZU1lcmdlUmVmcyggWyBmb3J3YXJkZWRSZWYsIHdyYXBwZXJSZWYgXSApO1xuXG5cdGlmICggISBpc01hdGNoICkge1xuXHRcdHJldHVybiBudWxsO1xuXHR9XG5cblx0aWYgKCBwcmVmZXJzUmVkdWNlZE1vdGlvbiApIHtcblx0XHRyZXR1cm4gKFxuXHRcdFx0PFZpZXdcblx0XHRcdFx0cmVmPXsgbWVyZ2VkV3JhcHBlclJlZiB9XG5cdFx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0XHR7IC4uLm90aGVyUHJvcHMgfVxuXHRcdFx0PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvVmlldz5cblx0XHQpO1xuXHR9XG5cblx0Y29uc3QgYW5pbWF0ZSA9IHtcblx0XHRvcGFjaXR5OiAxLFxuXHRcdHRyYW5zaXRpb246IHtcblx0XHRcdGRlbGF5OiBhbmltYXRpb25FbnRlckRlbGF5LFxuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkVudGVyRHVyYXRpb24sXG5cdFx0XHRlYXNlOiAnZWFzZUluT3V0Jyxcblx0XHR9LFxuXHRcdHg6IDAsXG5cdH07XG5cdGNvbnN0IGluaXRpYWwgPSB7XG5cdFx0b3BhY2l0eTogMCxcblx0XHR4OlxuXHRcdFx0KCBpc1JUTCgpICYmIGxvY2F0aW9uLmlzQmFjayApIHx8ICggISBpc1JUTCgpICYmICEgbG9jYXRpb24uaXNCYWNrIClcblx0XHRcdFx0PyA1MFxuXHRcdFx0XHQ6IC01MCxcblx0fTtcblx0Y29uc3QgZXhpdCA9IHtcblx0XHRkZWxheTogYW5pbWF0aW9uRXhpdERlbGF5LFxuXHRcdG9wYWNpdHk6IDAsXG5cdFx0eDpcblx0XHRcdCggISBpc1JUTCgpICYmIGxvY2F0aW9uLmlzQmFjayApIHx8ICggaXNSVEwoKSAmJiAhIGxvY2F0aW9uLmlzQmFjayApXG5cdFx0XHRcdD8gNTBcblx0XHRcdFx0OiAtNTAsXG5cdFx0dHJhbnNpdGlvbjoge1xuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkV4aXREdXJhdGlvbixcblx0XHRcdGVhc2U6ICdlYXNlSW5PdXQnLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3QgYW5pbWF0ZWRQcm9wcyA9IHtcblx0XHRhbmltYXRlLFxuXHRcdGV4aXQsXG5cdFx0aW5pdGlhbCxcblx0fTtcblxuXHRyZXR1cm4gKFxuXHRcdDxtb3Rpb24uZGl2XG5cdFx0XHRyZWY9eyBtZXJnZWRXcmFwcGVyUmVmIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0eyAuLi5vdGhlclByb3BzIH1cblx0XHRcdHsgLi4uYW5pbWF0ZWRQcm9wcyB9XG5cdFx0PlxuXHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0PC9tb3Rpb24uZGl2PlxuXHQpO1xufVxuXG4vKipcbiAqIFRoZSBgTmF2aWdhdG9yU2NyZWVuYCBjb21wb25lbnQgcmVwcmVzZW50cyBhIHNpbmdsZSB2aWV3L3NjcmVlbi9wYW5lbCBhbmRcbiAqIHNob3VsZCBiZSB1c2VkIGluIGNvbWJpbmF0aW9uIHdpdGggdGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAsIHRoZVxuICogYE5hdmlnYXRvckJ1dHRvbmAgYW5kIHRoZSBgTmF2aWdhdG9yQmFja0J1dHRvbmAgY29tcG9uZW50cyAob3IgdGhlIGB1c2VOYXZpZ2F0b3JgXG4gKiBob29rKS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQnV0dG9uIGFzIE5hdmlnYXRvckJ1dHRvbixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JCYWNrQnV0dG9uIGFzIE5hdmlnYXRvckJhY2tCdXR0b24sXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICAgICAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgICAgICBHbyBiYWNrXG4gKiAgICAgICA8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmNvbnN0IENvbm5lY3RlZE5hdmlnYXRvclNjcmVlbiA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JTY3JlZW4sXG5cdCdOYXZpZ2F0b3JTY3JlZW4nXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWROYXZpZ2F0b3JTY3JlZW47XG4iXX0= */",
|
|
42
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
function NavigatorScreen(props, forwardedRef) {
|
|
31
|
+
function UnconnectedNavigatorScreen(props, forwardedRef) {
|
|
46
32
|
const {
|
|
47
33
|
children,
|
|
48
34
|
className,
|
|
@@ -55,9 +41,7 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
55
41
|
} = useContext(NavigatorContext);
|
|
56
42
|
const isMatch = location.path === escapeAttribute(path);
|
|
57
43
|
const wrapperRef = useRef(null);
|
|
58
|
-
const previousLocation = usePrevious(location);
|
|
59
|
-
const cx = useCx();
|
|
60
|
-
const classes = useMemo(() => cx(_ref, className), [className, cx]); // Focus restoration
|
|
44
|
+
const previousLocation = usePrevious(location); // Focus restoration
|
|
61
45
|
|
|
62
46
|
const isInitialLocation = location.isInitial && !location.isBack;
|
|
63
47
|
useEffect(() => {
|
|
@@ -65,7 +49,15 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
65
49
|
// - if the current location is not the initial one (to avoid moving focus on page load)
|
|
66
50
|
// - when the screen becomes visible
|
|
67
51
|
// - if the wrapper ref has been assigned
|
|
68
|
-
if
|
|
52
|
+
// - if focus hasn't already been restored for the current location
|
|
53
|
+
if (isInitialLocation || !isMatch || !wrapperRef.current || location.hasRestoredFocus) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const activeElement = wrapperRef.current.ownerDocument.activeElement; // If an element is already focused within the wrapper do not focus the
|
|
58
|
+
// element. This prevents inputs or buttons from losing focus unnecessarily.
|
|
59
|
+
|
|
60
|
+
if (wrapperRef.current.contains(activeElement)) {
|
|
69
61
|
return;
|
|
70
62
|
}
|
|
71
63
|
|
|
@@ -83,8 +75,9 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
83
75
|
elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
|
|
84
76
|
}
|
|
85
77
|
|
|
78
|
+
location.hasRestoredFocus = true;
|
|
86
79
|
elementToFocus.focus();
|
|
87
|
-
}, [isInitialLocation, isMatch, location.isBack, previousLocation === null || previousLocation === void 0 ? void 0 : previousLocation.focusTargetSelector]);
|
|
80
|
+
}, [isInitialLocation, isMatch, location.hasRestoredFocus, location.isBack, previousLocation === null || previousLocation === void 0 ? void 0 : previousLocation.focusTargetSelector]);
|
|
88
81
|
const mergedWrapperRef = useMergeRefs([forwardedRef, wrapperRef]);
|
|
89
82
|
|
|
90
83
|
if (!isMatch) {
|
|
@@ -94,7 +87,7 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
94
87
|
if (prefersReducedMotion) {
|
|
95
88
|
return createElement(View, _extends({
|
|
96
89
|
ref: mergedWrapperRef,
|
|
97
|
-
className:
|
|
90
|
+
className: className
|
|
98
91
|
}, otherProps), children);
|
|
99
92
|
}
|
|
100
93
|
|
|
@@ -127,7 +120,7 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
127
120
|
};
|
|
128
121
|
return createElement(motion.div, _extends({
|
|
129
122
|
ref: mergedWrapperRef,
|
|
130
|
-
className:
|
|
123
|
+
className: className
|
|
131
124
|
}, otherProps, animatedProps), children);
|
|
132
125
|
}
|
|
133
126
|
/**
|
|
@@ -166,6 +159,6 @@ function NavigatorScreen(props, forwardedRef) {
|
|
|
166
159
|
*/
|
|
167
160
|
|
|
168
161
|
|
|
169
|
-
const
|
|
170
|
-
export default
|
|
162
|
+
export const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen');
|
|
163
|
+
export default NavigatorScreen;
|
|
171
164
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["motion","css","focus","useContext","useEffect","useMemo","useRef","useReducedMotion","useMergeRefs","usePrevious","isRTL","escapeAttribute","contextConnect","useContextSystem","useCx","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","location","isMatch","wrapperRef","previousLocation","cx","classes","isInitialLocation","isInitial","isBack","current","elementToFocus","focusTargetSelector","querySelector","firstTabbable","tabbable","find","mergedWrapperRef","animate","opacity","transition","delay","duration","ease","x","initial","exit","animatedProps","ConnectedNavigatorScreen"],"mappings":";;;;;AAAA;AACA;AACA;AAEA;AACA,SAASA,MAAT,QAAoC,eAApC;AACA,SAASC,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,OAAhC,EAAyCC,MAAzC,QAAuD,oBAAvD;AACA,SACCC,gBADD,EAECC,YAFD,EAGCC,WAHD,QAIO,oBAJP;AAKA,SAASC,KAAT,QAAsB,iBAAtB;AACA,SAASC,eAAT,QAAgC,wBAAhC;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;AAGA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,sBAAsB,GAAG,IAA/B;AACA,MAAMC,qBAAqB,GAAG,IAA9B;AACA,MAAMC,kBAAkB,GAAG,CAA3B,C,CAEA;AACA;;;;;;;;;;;;AAMA,SAASC,eAAT,CAA0BC,KAA1B,EAAwCC,YAAxC,EAA4E;AAC3E,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,IAAvB;AAA6B,OAAGC;AAAhC,MAA+Cd,gBAAgB,CACpES,KADoE,EAEpE,iBAFoE,CAArE;AAKA,QAAMM,oBAAoB,GAAGrB,gBAAgB,EAA7C;AACA,QAAM;AAAEsB,IAAAA;AAAF,MAAe1B,UAAU,CAAEa,gBAAF,CAA/B;AACA,QAAMc,OAAO,GAAGD,QAAQ,CAACH,IAAT,KAAkBf,eAAe,CAAEe,IAAF,CAAjD;AACA,QAAMK,UAAU,GAAGzB,MAAM,CAAoB,IAApB,CAAzB;AAEA,QAAM0B,gBAAgB,GAAGvB,WAAW,CAAEoB,QAAF,CAApC;AAEA,QAAMI,EAAE,GAAGnB,KAAK,EAAhB;AACA,QAAMoB,OAAO,GAAG7B,OAAO,CACtB,MACC4B,EAAE,OAODR,SAPC,CAFmB,EAWtB,CAAEA,SAAF,EAAaQ,EAAb,CAXsB,CAAvB,CAd2E,CA4B3E;;AACA,QAAME,iBAAiB,GAAGN,QAAQ,CAACO,SAAT,IAAsB,CAAEP,QAAQ,CAACQ,MAA3D;AACAjC,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACA;AACA,QAAK+B,iBAAiB,IAAI,CAAEL,OAAvB,IAAkC,CAAEC,UAAU,CAACO,OAApD,EAA8D;AAC7D;AACA;;AAED,QAAIC,cAAkC,GAAG,IAAzC,CATgB,CAWhB;AACA;;AACA,QAAKV,QAAQ,CAACQ,MAAT,IAAmBL,gBAAnB,aAAmBA,gBAAnB,eAAmBA,gBAAgB,CAAEQ,mBAA1C,EAAgE;AAC/DD,MAAAA,cAAc,GAAGR,UAAU,CAACO,OAAX,CAAmBG,aAAnB,CAChBT,gBAAgB,CAACQ,mBADD,CAAjB;AAGA,KAjBe,CAmBhB;AACA;;;AACA,QAAK,CAAED,cAAP,EAAwB;AACvB,YAAMG,aAAa,GAClBxC,KAAK,CAACyC,QAAN,CAAeC,IAAf,CAAqBb,UAAU,CAACO,OAAhC,CADqB,CAElB,CAFkB,CAAtB;AAIAC,MAAAA,cAAc,GAAGG,aAAH,aAAGA,aAAH,cAAGA,aAAH,GAAoBX,UAAU,CAACO,OAA7C;AACA;;AAEDC,IAAAA,cAAc,CAACrC,KAAf;AACA,GA9BQ,EA8BN,CACFiC,iBADE,EAEFL,OAFE,EAGFD,QAAQ,CAACQ,MAHP,EAIFL,gBAJE,aAIFA,gBAJE,uBAIFA,gBAAgB,CAAEQ,mBAJhB,CA9BM,CAAT;AAqCA,QAAMK,gBAAgB,GAAGrC,YAAY,CAAE,CAAEe,YAAF,EAAgBQ,UAAhB,CAAF,CAArC;;AAEA,MAAK,CAAED,OAAP,EAAiB;AAChB,WAAO,IAAP;AACA;;AAED,MAAKF,oBAAL,EAA4B;AAC3B,WACC,cAAC,IAAD;AACC,MAAA,GAAG,EAAGiB,gBADP;AAEC,MAAA,SAAS,EAAGX;AAFb,OAGMP,UAHN,GAKGH,QALH,CADD;AASA;;AAED,QAAMsB,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,CADM;AAEfC,IAAAA,UAAU,EAAE;AACXC,MAAAA,KAAK,EAAEhC,mBADI;AAEXiC,MAAAA,QAAQ,EAAEhC,sBAFC;AAGXiC,MAAAA,IAAI,EAAE;AAHK,KAFG;AAOfC,IAAAA,CAAC,EAAE;AAPY,GAAhB;AASA,QAAMC,OAAO,GAAG;AACfN,IAAAA,OAAO,EAAE,CADM;AAEfK,IAAAA,CAAC,EACE1C,KAAK,MAAMmB,QAAQ,CAACQ,MAAtB,IAAoC,CAAE3B,KAAK,EAAP,IAAa,CAAEmB,QAAQ,CAACQ,MAA5D,GACG,EADH,GAEG,CAAC;AALU,GAAhB;AAOA,QAAMiB,IAAI,GAAG;AACZL,IAAAA,KAAK,EAAE7B,kBADK;AAEZ2B,IAAAA,OAAO,EAAE,CAFG;AAGZK,IAAAA,CAAC,EACE,CAAE1C,KAAK,EAAP,IAAamB,QAAQ,CAACQ,MAAxB,IAAsC3B,KAAK,MAAM,CAAEmB,QAAQ,CAACQ,MAA5D,GACG,EADH,GAEG,CAAC,EANO;AAOZW,IAAAA,UAAU,EAAE;AACXE,MAAAA,QAAQ,EAAE/B,qBADC;AAEXgC,MAAAA,IAAI,EAAE;AAFK;AAPA,GAAb;AAaA,QAAMI,aAAa,GAAG;AACrBT,IAAAA,OADqB;AAErBQ,IAAAA,IAFqB;AAGrBD,IAAAA;AAHqB,GAAtB;AAMA,SACC,cAAC,MAAD,CAAQ,GAAR;AACC,IAAA,GAAG,EAAGR,gBADP;AAEC,IAAA,SAAS,EAAGX;AAFb,KAGMP,UAHN,EAIM4B,aAJN,GAMG/B,QANH,CADD;AAUA;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,MAAMgC,wBAAwB,GAAG5C,cAAc,CAC9CS,eAD8C,EAE9C,iBAF8C,CAA/C;AAKA,eAAemC,wBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { useContext, useEffect, useMemo, useRef } from '@wordpress/element';\nimport {\n\tuseReducedMotion,\n\tuseMergeRefs,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\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 { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst { location } = useContext( NavigatorContext );\n\tconst isMatch = location.path === escapeAttribute( path );\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tconst previousLocation = usePrevious( location );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tcss( {\n\t\t\t\t\t// Ensures horizontal overflow is visually accessible.\n\t\t\t\t\toverflowX: 'auto',\n\t\t\t\t\t// In case the root has a height, it should not be exceeded.\n\t\t\t\t\tmaxHeight: '100%',\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx ]\n\t);\n\n\t// Focus restoration\n\tconst isInitialLocation = location.isInitial && ! location.isBack;\n\tuseEffect( () => {\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\tif ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( location.isBack && previousLocation?.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tpreviousLocation.focusTargetSelector\n\t\t\t);\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst firstTabbable = (\n\t\t\t\tfocus.tabbable.find( wrapperRef.current ) as HTMLElement[]\n\t\t\t )[ 0 ];\n\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.isBack,\n\t\tpreviousLocation?.focusTargetSelector,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ mergedWrapperRef }\n\t\t\t\tclassName={ classes }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ classes }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <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>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorScreen = contextConnect(\n\tNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default ConnectedNavigatorScreen;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["motion","focus","useContext","useEffect","useRef","useReducedMotion","useMergeRefs","usePrevious","isRTL","escapeAttribute","contextConnect","useContextSystem","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","UnconnectedNavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","location","isMatch","wrapperRef","previousLocation","isInitialLocation","isInitial","isBack","current","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","focusTargetSelector","querySelector","firstTabbable","tabbable","find","mergedWrapperRef","animate","opacity","transition","delay","duration","ease","x","initial","exit","animatedProps","NavigatorScreen"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { useContext, useEffect, useRef } from '@wordpress/element';\nimport {\n\tuseReducedMotion,\n\tuseMergeRefs,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction UnconnectedNavigatorScreen(\n\tprops: Props,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst { location } = useContext( NavigatorContext );\n\tconst isMatch = location.path === escapeAttribute( path );\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tconst previousLocation = usePrevious( location );\n\n\t// Focus restoration\n\tconst isInitialLocation = location.isInitial && ! location.isBack;\n\tuseEffect( () => {\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\t// - if focus hasn't already been restored for the current location\n\t\tif (\n\t\t\tisInitialLocation ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperRef.current ||\n\t\t\tlocation.hasRestoredFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperRef.current.ownerDocument.activeElement;\n\n\t\t// If an element is already focused within the wrapper do not focus the\n\t\t// element. This prevents inputs or buttons from losing focus unnecessarily.\n\t\tif ( wrapperRef.current.contains( activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( location.isBack && previousLocation?.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tpreviousLocation.focusTargetSelector\n\t\t\t);\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst firstTabbable = (\n\t\t\t\tfocus.tabbable.find( wrapperRef.current ) as HTMLElement[]\n\t\t\t )[ 0 ];\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\tlocation.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.hasRestoredFocus,\n\t\tlocation.isBack,\n\t\tpreviousLocation?.focusTargetSelector,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ mergedWrapperRef }\n\t\t\t\tclassName={ className }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ className }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <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>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default NavigatorScreen;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './component';
|
|
1
|
+
export { default as NavigatorScreen } from './component';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/index.ts"],"names":["default","NavigatorScreen"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,aAA3C","sourcesContent":["export { default as NavigatorScreen } from './component';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
|
-
import { useEffect, useRef, useState } from '@wordpress/element';
|
|
4
|
+
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
|
|
5
5
|
import { useResizeObserver } from '@wordpress/compose';
|
|
6
6
|
|
|
7
7
|
const noop = () => {};
|
|
@@ -69,25 +69,23 @@ export function useResizeLabel(_ref) {
|
|
|
69
69
|
*/
|
|
70
70
|
|
|
71
71
|
const moveTimeoutRef = useRef();
|
|
72
|
+
const debounceUnsetMoveXY = useCallback(() => {
|
|
73
|
+
const unsetMoveXY = () => {
|
|
74
|
+
/*
|
|
75
|
+
* If axis is controlled, we will avoid resetting the moveX and moveY values.
|
|
76
|
+
* This will allow for the preferred axis values to persist in the label.
|
|
77
|
+
*/
|
|
78
|
+
if (isAxisControlled) return;
|
|
79
|
+
setMoveX(false);
|
|
80
|
+
setMoveY(false);
|
|
81
|
+
};
|
|
72
82
|
|
|
73
|
-
const unsetMoveXY = () => {
|
|
74
|
-
/*
|
|
75
|
-
* If axis is controlled, we will avoid resetting the moveX and moveY values.
|
|
76
|
-
* This will allow for the preferred axis values to persist in the label.
|
|
77
|
-
*/
|
|
78
|
-
if (isAxisControlled) return;
|
|
79
|
-
setMoveX(false);
|
|
80
|
-
setMoveY(false);
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
const debounceUnsetMoveXY = () => {
|
|
84
83
|
if (moveTimeoutRef.current) {
|
|
85
84
|
window.clearTimeout(moveTimeoutRef.current);
|
|
86
85
|
}
|
|
87
86
|
|
|
88
87
|
moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
|
|
89
|
-
};
|
|
90
|
-
|
|
88
|
+
}, [fadeTimeout, isAxisControlled]);
|
|
91
89
|
useEffect(() => {
|
|
92
90
|
/*
|
|
93
91
|
* On the initial render of useResizeAware, the height and width values are
|
|
@@ -130,7 +128,7 @@ export function useResizeLabel(_ref) {
|
|
|
130
128
|
height
|
|
131
129
|
});
|
|
132
130
|
debounceUnsetMoveXY();
|
|
133
|
-
}, [width, height]);
|
|
131
|
+
}, [width, height, onResize, debounceUnsetMoveXY]);
|
|
134
132
|
const label = getSizeLabel({
|
|
135
133
|
axis,
|
|
136
134
|
height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,oBAA5C;AACA,SAASC,iBAAT,QAAkC,oBAAlC;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAIA,OAAO,MAAMC,SAAS,GAAG;AACxBC,EAAAA,MAAM,EAAE,QADgB;AAExBC,EAAAA,MAAM,EAAE;AAFgB,CAAlB;;AAsBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAT,OAMsC;AAAA,MANb;AAC/BC,IAAAA,IAD+B;AAE/BC,IAAAA,WAAW,GAAG,GAFiB;AAG/BC,IAAAA,QAAQ,GAAGP,IAHoB;AAI/BQ,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MAJU;AAK/BO,IAAAA,MAAM,GAAG;AALsB,GAMa;;AAC5C;AACD;AACA;AACA;AACC,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4BZ,iBAAiB,EAAnD;AAEA;AACD;AACA;AACA;AACA;;AACC,QAAMa,gBAAgB,GAAG,CAAC,CAAEP,IAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM,CAAEQ,KAAF,EAASC,QAAT,IAAsBhB,QAAQ,CAAE,KAAF,CAApC;AACA,QAAM,CAAEiB,KAAF,EAASC,QAAT,IAAsBlB,QAAQ,CAAE,KAAF,CAApC;AAEA;AACD;AACA;AACA;;AACC,QAAM;AAAEmB,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBP,KAA1B;AACA,QAAMQ,SAAS,GAAGtB,MAAM,CAAEqB,MAAF,CAAxB;AACA,QAAME,QAAQ,GAAGvB,MAAM,CAAEoB,KAAF,CAAvB;AAEA;AACD;AACA;AACA;;AACC,QAAMI,cAAc,GAAGxB,MAAM,EAA7B;;AAEA,QAAMyB,WAAW,GAAG,MAAM;AACzB;AACF;AACA;AACA;AACE,QAAKV,gBAAL,EAAwB;AACxBE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACAE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACA,GARD;;AAUA,QAAMO,mBAAmB,GAAG,MAAM;AACjC,QAAKF,cAAc,CAACG,OAApB,EAA8B;AAC7BC,MAAAA,MAAM,CAACC,YAAP,CAAqBL,cAAc,CAACG,OAApC;AACA;;AAEDH,IAAAA,cAAc,CAACG,OAAf,GAAyBC,MAAM,CAACE,UAAP,CAAmBL,WAAnB,EAAgChB,WAAhC,CAAzB;AACA,GAND;;AAQAV,EAAAA,SAAS,CAAE,MAAM;AAChB;AACF;AACA;AACA;AACE,UAAMgC,UAAU,GAAGX,KAAK,KAAK,IAAV,IAAkBC,MAAM,KAAK,IAAhD;AAEA,QAAK,CAAEU,UAAP,EAAoB;AAEpB,UAAMC,cAAc,GAAGZ,KAAK,KAAKG,QAAQ,CAACI,OAA1C;AACA,UAAMM,eAAe,GAAGZ,MAAM,KAAKC,SAAS,CAACK,OAA7C;AAEA,QAAK,CAAEK,cAAF,IAAoB,CAAEC,eAA3B,EAA6C;AAE7C;AACF;AACA;AACA;AACA;AACA;;AACE,QAAKb,KAAK,IAAI,CAAEG,QAAQ,CAACI,OAApB,IAA+BN,MAA/B,IAAyC,CAAEC,SAAS,CAACK,OAA1D,EAAoE;AACnEJ,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACAE,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;AACA;AAED;AACF;AACA;;;AACE,QAAKW,cAAL,EAAsB;AACrBf,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAM,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACA;;AAED,QAAKa,eAAL,EAAuB;AACtBd,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAG,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;;AAEDX,IAAAA,QAAQ,CAAE;AAAEU,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,CAAR;AACAK,IAAAA,mBAAmB;AACnB,GAzCQ,EAyCN,CAAEN,KAAF,EAASC,MAAT,CAzCM,CAAT;AA2CA,QAAMa,KAAK,GAAGC,YAAY,CAAE;AAC3B3B,IAAAA,IAD2B;AAE3Ba,IAAAA,MAF2B;AAG3BL,IAAAA,KAH2B;AAI3BE,IAAAA,KAJ2B;AAK3BP,IAAAA,QAL2B;AAM3BC,IAAAA,MAN2B;AAO3BQ,IAAAA;AAP2B,GAAF,CAA1B;AAUA,SAAO;AACNc,IAAAA,KADM;AAENrB,IAAAA;AAFM,GAAP;AAIA;;AAYD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASsB,YAAT,QAQ0C;AAAA,MARnB;AACtB3B,IAAAA,IADsB;AAEtBa,IAAAA,MAFsB;AAGtBL,IAAAA,KAAK,GAAG,KAHc;AAItBE,IAAAA,KAAK,GAAG,KAJc;AAKtBP,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MALC;AAMtBO,IAAAA,MAAM,GAAG,KANa;AAOtBQ,IAAAA;AAPsB,GAQmB;AACzC,MAAK,CAAEJ,KAAF,IAAW,CAAEE,KAAlB,EAA0B,OAAOkB,SAAP;AAE1B;AACD;AACA;AACA;;AACC,MAAKzB,QAAQ,KAAKP,SAAS,CAACE,MAA5B,EAAqC;AACpC,WAAQ,GAAGc,KAAO,MAAMC,MAAQ,EAAhC;AACA;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,QAAMgB,SAAS,GAAGzB,MAAM,GAAG,KAAH,GAAW,EAAnC;;AAEA,MAAKJ,IAAL,EAAY;AACX,QAAKA,IAAI,KAAK,GAAT,IAAgBQ,KAArB,EAA6B;AAC5B,aAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,QAAK7B,IAAI,KAAK,GAAT,IAAgBU,KAArB,EAA6B;AAC5B,aAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;AACD;;AAED,MAAKrB,KAAK,IAAIE,KAAd,EAAsB;AACrB,WAAQ,GAAGE,KAAO,MAAMC,MAAQ,EAAhC;AACA;;AACD,MAAKL,KAAL,EAAa;AACZ,WAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,MAAKnB,KAAL,EAAa;AACZ,WAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;;AAED,SAAOD,SAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/*\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t */\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
|