@wordpress/components 28.8.4 → 28.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -3
- package/build/autocomplete/index.js +4 -1
- package/build/autocomplete/index.js.map +1 -1
- package/build/border-box-control/border-box-control/component.js +3 -14
- package/build/border-box-control/border-box-control/component.js.map +1 -1
- package/build/border-control/border-control/component.js +1 -2
- package/build/border-control/border-control/component.js.map +1 -1
- package/build/border-control/border-control-dropdown/component.js +2 -14
- package/build/border-control/border-control-dropdown/component.js.map +1 -1
- package/build/border-control/styles.js +13 -13
- package/build/border-control/styles.js.map +1 -1
- package/build/border-control/types.js.map +1 -1
- package/build/box-control/index.js +4 -4
- package/build/box-control/index.js.map +1 -1
- package/build/box-control/types.js.map +1 -1
- package/build/composite/group-label.js +7 -1
- package/build/composite/group-label.js.map +1 -1
- package/build/composite/group.js +7 -1
- package/build/composite/group.js.map +1 -1
- package/build/composite/hover.js +8 -2
- package/build/composite/hover.js.map +1 -1
- package/build/composite/index.js +5 -1
- package/build/composite/index.js.map +1 -1
- package/build/composite/item.js +16 -1
- package/build/composite/item.js.map +1 -1
- package/build/composite/row.js +7 -1
- package/build/composite/row.js.map +1 -1
- package/build/composite/typeahead.js +8 -2
- package/build/composite/typeahead.js.map +1 -1
- package/build/date-time/date/index.js +4 -2
- package/build/date-time/date/index.js.map +1 -1
- package/build/index.js +36 -5
- package/build/index.js.map +1 -1
- package/build/navigator/index.js +128 -32
- package/build/navigator/index.js.map +1 -1
- package/build/navigator/legacy.js +179 -0
- package/build/navigator/legacy.js.map +1 -0
- package/build/navigator/{navigator-provider → navigator}/component.js +5 -40
- package/build/navigator/navigator/component.js.map +1 -0
- package/build/navigator/navigator-back-button/component.js +2 -38
- package/build/navigator/navigator-back-button/component.js.map +1 -1
- package/build/navigator/navigator-back-button/hook.js +1 -1
- package/build/navigator/navigator-back-button/hook.js.map +1 -1
- package/build/navigator/navigator-button/component.js +2 -37
- package/build/navigator/navigator-button/component.js.map +1 -1
- package/build/navigator/navigator-button/hook.js +1 -1
- package/build/navigator/navigator-button/hook.js.map +1 -1
- package/build/navigator/navigator-screen/component.js +40 -62
- package/build/navigator/navigator-screen/component.js.map +1 -1
- package/build/navigator/navigator-screen/use-screen-animate-presence.js +114 -0
- package/build/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
- package/build/navigator/navigator-to-parent-button/component.js +3 -7
- package/build/navigator/navigator-to-parent-button/component.js.map +1 -1
- package/build/navigator/styles.js +78 -35
- package/build/navigator/styles.js.map +1 -1
- package/build/navigator/types.js.map +1 -1
- package/build/navigator/use-navigator.js +4 -1
- package/build/navigator/use-navigator.js.map +1 -1
- package/build/search-control/index.js +5 -2
- package/build/search-control/index.js.map +1 -1
- package/build/tabs/styles.js +3 -3
- package/build/tabs/styles.js.map +1 -1
- package/build/tabs/tablist.js +61 -28
- package/build/tabs/tablist.js.map +1 -1
- package/build/tabs/use-track-overflow.js +73 -0
- package/build/tabs/use-track-overflow.js.map +1 -0
- package/build/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
- package/build/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js +6 -2
- package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/component.js +73 -8
- package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-base/component.js +10 -19
- package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js +8 -9
- package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
- package/build/toggle-group-control/types.js.map +1 -1
- package/build/utils/element-rect.js +22 -13
- package/build/utils/element-rect.js.map +1 -1
- package/build/utils/hooks/use-on-value-update.js +3 -7
- package/build/utils/hooks/use-on-value-update.js.map +1 -1
- package/build-module/autocomplete/index.js +4 -1
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/border-box-control/border-box-control/component.js +3 -14
- package/build-module/border-box-control/border-box-control/component.js.map +1 -1
- package/build-module/border-control/border-control/component.js +1 -2
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/component.js +2 -14
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
- package/build-module/border-control/styles.js +13 -13
- package/build-module/border-control/styles.js.map +1 -1
- package/build-module/border-control/types.js.map +1 -1
- package/build-module/box-control/index.js +4 -4
- package/build-module/box-control/index.js.map +1 -1
- package/build-module/box-control/types.js.map +1 -1
- package/build-module/composite/group-label.js +7 -1
- package/build-module/composite/group-label.js.map +1 -1
- package/build-module/composite/group.js +7 -1
- package/build-module/composite/group.js.map +1 -1
- package/build-module/composite/hover.js +8 -2
- package/build-module/composite/hover.js.map +1 -1
- package/build-module/composite/index.js +5 -1
- package/build-module/composite/index.js.map +1 -1
- package/build-module/composite/item.js +16 -1
- package/build-module/composite/item.js.map +1 -1
- package/build-module/composite/row.js +7 -1
- package/build-module/composite/row.js.map +1 -1
- package/build-module/composite/typeahead.js +8 -2
- package/build-module/composite/typeahead.js.map +1 -1
- package/build-module/date-time/date/index.js +4 -2
- package/build-module/date-time/date/index.js.map +1 -1
- package/build-module/index.js +14 -4
- package/build-module/index.js.map +1 -1
- package/build-module/navigator/index.js +130 -5
- package/build-module/navigator/index.js.map +1 -1
- package/build-module/navigator/legacy.js +167 -0
- package/build-module/navigator/legacy.js.map +1 -0
- package/build-module/navigator/{navigator-provider → navigator}/component.js +4 -39
- package/build-module/navigator/navigator/component.js.map +1 -0
- package/build-module/navigator/navigator-back-button/component.js +1 -37
- package/build-module/navigator/navigator-back-button/component.js.map +1 -1
- package/build-module/navigator/navigator-back-button/hook.js +1 -1
- package/build-module/navigator/navigator-back-button/hook.js.map +1 -1
- package/build-module/navigator/navigator-button/component.js +1 -36
- package/build-module/navigator/navigator-button/component.js.map +1 -1
- package/build-module/navigator/navigator-button/hook.js +1 -1
- package/build-module/navigator/navigator-button/hook.js.map +1 -1
- package/build-module/navigator/navigator-screen/component.js +39 -61
- package/build-module/navigator/navigator-screen/component.js.map +1 -1
- package/build-module/navigator/navigator-screen/use-screen-animate-presence.js +106 -0
- package/build-module/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
- package/build-module/navigator/navigator-to-parent-button/component.js +2 -6
- package/build-module/navigator/navigator-to-parent-button/component.js.map +1 -1
- package/build-module/navigator/styles.js +77 -33
- package/build-module/navigator/styles.js.map +1 -1
- package/build-module/navigator/types.js.map +1 -1
- package/build-module/navigator/use-navigator.js +4 -1
- package/build-module/navigator/use-navigator.js.map +1 -1
- package/build-module/search-control/index.js +5 -2
- package/build-module/search-control/index.js.map +1 -1
- package/build-module/tabs/styles.js +3 -3
- package/build-module/tabs/styles.js.map +1 -1
- package/build-module/tabs/tablist.js +62 -29
- package/build-module/tabs/tablist.js.map +1 -1
- package/build-module/tabs/use-track-overflow.js +67 -0
- package/build-module/tabs/use-track-overflow.js.map +1 -0
- package/build-module/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
- package/build-module/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +6 -2
- package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/component.js +76 -10
- package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +12 -22
- package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +7 -8
- package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
- package/build-module/toggle-group-control/types.js.map +1 -1
- package/build-module/utils/element-rect.js +22 -12
- package/build-module/utils/element-rect.js.map +1 -1
- package/build-module/utils/hooks/use-on-value-update.js +3 -6
- package/build-module/utils/hooks/use-on-value-update.js.map +1 -1
- package/build-style/style-rtl.css +26 -13
- package/build-style/style.css +26 -13
- package/build-types/autocomplete/index.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control/component.d.ts +5 -15
- package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +2 -1
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
- package/build-types/border-box-control/stories/index.story.d.ts +3 -2
- package/build-types/border-box-control/stories/index.story.d.ts.map +1 -1
- package/build-types/border-control/border-control/component.d.ts +3 -2
- package/build-types/border-control/border-control/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts +2 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
- package/build-types/border-control/stories/index.story.d.ts +15 -30
- package/build-types/border-control/stories/index.story.d.ts.map +1 -1
- package/build-types/border-control/styles.d.ts.map +1 -1
- package/build-types/border-control/types.d.ts +12 -7
- package/build-types/border-control/types.d.ts.map +1 -1
- package/build-types/box-control/index.d.ts +4 -4
- package/build-types/box-control/stories/index.story.d.ts.map +1 -1
- package/build-types/box-control/types.d.ts +3 -3
- package/build-types/composite/group-label.d.ts.map +1 -1
- package/build-types/composite/index.d.ts.map +1 -1
- package/build-types/composite/item.d.ts.map +1 -1
- package/build-types/composite/stories/index.story.d.ts +22 -0
- package/build-types/composite/stories/index.story.d.ts.map +1 -1
- package/build-types/composite/test/index.d.ts +2 -0
- package/build-types/composite/test/index.d.ts.map +1 -0
- package/build-types/date-time/date/index.d.ts.map +1 -1
- package/build-types/dropdown/stories/index.story.d.ts.map +1 -1
- package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
- package/build-types/index.d.ts +23 -4
- package/build-types/index.d.ts.map +1 -1
- package/build-types/navigator/index.d.ts +171 -5
- package/build-types/navigator/index.d.ts.map +1 -1
- package/build-types/navigator/legacy.d.ts +226 -0
- package/build-types/navigator/legacy.d.ts.map +1 -0
- package/build-types/navigator/navigator/component.d.ts +3 -0
- package/build-types/navigator/navigator/component.d.ts.map +1 -0
- package/build-types/navigator/navigator-back-button/component.d.ts +0 -35
- package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-button/component.d.ts +0 -34
- package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/component.d.ts +0 -35
- package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
- package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts +16 -0
- package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts.map +1 -0
- package/build-types/navigator/navigator-to-parent-button/component.d.ts +0 -4
- package/build-types/navigator/navigator-to-parent-button/component.d.ts.map +1 -1
- package/build-types/navigator/stories/index.story.d.ts +5 -5
- package/build-types/navigator/stories/index.story.d.ts.map +1 -1
- package/build-types/navigator/styles.d.ts +20 -7
- package/build-types/navigator/styles.d.ts.map +1 -1
- package/build-types/navigator/types.d.ts +19 -1
- package/build-types/navigator/types.d.ts.map +1 -1
- package/build-types/navigator/use-navigator.d.ts +4 -1
- package/build-types/navigator/use-navigator.d.ts.map +1 -1
- package/build-types/select-control/stories/index.story.d.ts +7 -0
- package/build-types/select-control/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/stories/index.story.d.ts +2 -1
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/styles.d.ts.map +1 -1
- package/build-types/tabs/tablist.d.ts.map +1 -1
- package/build-types/tabs/use-track-overflow.d.ts +17 -0
- package/build-types/tabs/use-track-overflow.d.ts.map +1 -0
- package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts +2 -2
- package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts +2 -2
- package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +0 -1
- package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
- package/build-types/toggle-group-control/types.d.ts +2 -1
- package/build-types/toggle-group-control/types.d.ts.map +1 -1
- package/build-types/utils/element-rect.d.ts +8 -0
- package/build-types/utils/element-rect.d.ts.map +1 -1
- package/build-types/utils/hooks/use-on-value-update.d.ts.map +1 -1
- package/package.json +19 -19
- package/src/autocomplete/index.tsx +4 -1
- package/src/border-box-control/border-box-control/README.md +22 -26
- package/src/border-box-control/border-box-control/component.tsx +3 -14
- package/src/border-box-control/stories/index.story.tsx +2 -1
- package/src/border-control/border-control/README.md +26 -36
- package/src/border-control/border-control/component.tsx +1 -2
- package/src/border-control/border-control-dropdown/component.tsx +1 -15
- package/src/border-control/stories/index.story.tsx +4 -10
- package/src/border-control/styles.ts +0 -1
- package/src/border-control/test/index.js +2 -15
- package/src/border-control/types.ts +12 -7
- package/src/box-control/README.md +9 -12
- package/src/box-control/index.tsx +4 -4
- package/src/box-control/stories/index.story.tsx +1 -1
- package/src/box-control/types.ts +3 -3
- package/src/composite/group-label.tsx +7 -5
- package/src/composite/group.tsx +7 -7
- package/src/composite/hover.tsx +7 -7
- package/src/composite/index.tsx +6 -1
- package/src/composite/item.tsx +19 -1
- package/src/composite/legacy/test/index.tsx +22 -21
- package/src/composite/row.tsx +7 -7
- package/src/composite/stories/index.story.tsx +42 -0
- package/src/composite/test/index.tsx +123 -0
- package/src/composite/typeahead.tsx +7 -7
- package/src/date-time/date/index.tsx +2 -0
- package/src/dropdown/stories/index.story.tsx +1 -0
- package/src/dropdown/style.scss +10 -13
- package/src/dropdown-menu/stories/index.story.tsx +3 -0
- package/src/index.ts +19 -1
- package/src/menu-group/style.scss +4 -1
- package/src/menu-items-choice/style.scss +2 -0
- package/src/navigator/README.md +176 -0
- package/src/navigator/index.tsx +131 -0
- package/src/navigator/legacy.ts +169 -0
- package/src/navigator/{navigator-provider → navigator}/component.tsx +6 -44
- package/src/navigator/navigator-back-button/component.tsx +1 -37
- package/src/navigator/navigator-back-button/hook.ts +1 -1
- package/src/navigator/navigator-button/component.tsx +1 -36
- package/src/navigator/navigator-button/hook.ts +1 -1
- package/src/navigator/navigator-screen/component.tsx +48 -76
- package/src/navigator/navigator-screen/use-screen-animate-presence.ts +177 -0
- package/src/navigator/navigator-to-parent-button/component.tsx +2 -7
- package/src/navigator/stories/index.story.tsx +55 -54
- package/src/navigator/styles.ts +112 -41
- package/src/navigator/test/index.tsx +47 -47
- package/src/navigator/types.ts +19 -1
- package/src/navigator/use-navigator.ts +4 -1
- package/src/search-control/index.tsx +2 -2
- package/src/select-control/stories/index.story.tsx +14 -1
- package/src/tabs/stories/index.story.tsx +106 -0
- package/src/tabs/styles.ts +54 -20
- package/src/tabs/tablist.tsx +60 -26
- package/src/tabs/use-track-overflow.ts +76 -0
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +208 -44
- package/src/toggle-group-control/toggle-group-control/as-button-group.tsx +18 -10
- package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +19 -9
- package/src/toggle-group-control/toggle-group-control/component.tsx +114 -6
- package/src/toggle-group-control/toggle-group-control/styles.ts +41 -0
- package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +10 -27
- package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +0 -11
- package/src/toggle-group-control/types.ts +3 -1
- package/src/tools-panel/tools-panel/README.md +10 -10
- package/src/utils/element-rect.ts +32 -15
- package/src/utils/hooks/use-on-value-update.ts +3 -6
- package/tsconfig.tsbuildinfo +1 -1
- package/build/navigator/navigator-provider/component.js.map +0 -1
- package/build/utils/hooks/use-event.js +0 -41
- package/build/utils/hooks/use-event.js.map +0 -1
- package/build-module/navigator/navigator-provider/component.js.map +0 -1
- package/build-module/utils/hooks/use-event.js +0 -35
- package/build-module/utils/hooks/use-event.js.map +0 -1
- package/build-types/navigator/navigator-provider/component.d.ts +0 -37
- package/build-types/navigator/navigator-provider/component.d.ts.map +0 -1
- package/build-types/utils/hooks/use-event.d.ts +0 -20
- package/build-types/utils/hooks/use-event.d.ts.map +0 -1
- package/src/navigator/index.ts +0 -6
- package/src/navigator/navigator-back-button/README.md +0 -15
- package/src/navigator/navigator-button/README.md +0 -38
- package/src/navigator/navigator-provider/README.md +0 -94
- package/src/navigator/navigator-screen/README.md +0 -33
- package/src/navigator/navigator-to-parent-button/README.md +0 -17
- package/src/utils/hooks/use-event.ts +0 -38
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.Navigator = void 0;
|
|
8
8
|
var _element = require("@wordpress/element");
|
|
9
9
|
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
|
|
10
10
|
var _warning = _interopRequireDefault(require("@wordpress/warning"));
|
|
@@ -184,13 +184,13 @@ function routerReducer(state, action) {
|
|
|
184
184
|
focusSelectors
|
|
185
185
|
};
|
|
186
186
|
}
|
|
187
|
-
function
|
|
187
|
+
function UnconnectedNavigator(props, forwardedRef) {
|
|
188
188
|
const {
|
|
189
189
|
initialPath: initialPathProp,
|
|
190
190
|
children,
|
|
191
191
|
className,
|
|
192
192
|
...otherProps
|
|
193
|
-
} = (0, _context.useContextSystem)(props, '
|
|
193
|
+
} = (0, _context.useContextSystem)(props, 'Navigator');
|
|
194
194
|
const [routerState, dispatch] = (0, _element.useReducer)(routerReducer, initialPathProp, path => ({
|
|
195
195
|
screens: [],
|
|
196
196
|
currentLocation: {
|
|
@@ -249,7 +249,7 @@ function UnconnectedNavigatorProvider(props, forwardedRef) {
|
|
|
249
249
|
};
|
|
250
250
|
}, [currentLocation, matchedPath, methods]);
|
|
251
251
|
const cx = (0, _useCx.useCx)();
|
|
252
|
-
const classes = (0, _element.useMemo)(() => cx(styles.
|
|
252
|
+
const classes = (0, _element.useMemo)(() => cx(styles.navigatorWrapper, className), [className, cx]);
|
|
253
253
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
|
|
254
254
|
ref: forwardedRef,
|
|
255
255
|
className: classes,
|
|
@@ -260,40 +260,5 @@ function UnconnectedNavigatorProvider(props, forwardedRef) {
|
|
|
260
260
|
})
|
|
261
261
|
});
|
|
262
262
|
}
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* The `NavigatorProvider` component allows rendering nested views/panels/menus
|
|
266
|
-
* (via the `NavigatorScreen` component and navigate between these different
|
|
267
|
-
* view (via the `NavigatorButton` and `NavigatorBackButton` components or the
|
|
268
|
-
* `useNavigator` hook).
|
|
269
|
-
*
|
|
270
|
-
* ```jsx
|
|
271
|
-
* import {
|
|
272
|
-
* __experimentalNavigatorProvider as NavigatorProvider,
|
|
273
|
-
* __experimentalNavigatorScreen as NavigatorScreen,
|
|
274
|
-
* __experimentalNavigatorButton as NavigatorButton,
|
|
275
|
-
* __experimentalNavigatorBackButton as NavigatorBackButton,
|
|
276
|
-
* } from '@wordpress/components';
|
|
277
|
-
*
|
|
278
|
-
* const MyNavigation = () => (
|
|
279
|
-
* <NavigatorProvider initialPath="/">
|
|
280
|
-
* <NavigatorScreen path="/">
|
|
281
|
-
* <p>This is the home screen.</p>
|
|
282
|
-
* <NavigatorButton path="/child">
|
|
283
|
-
* Navigate to child screen.
|
|
284
|
-
* </NavigatorButton>
|
|
285
|
-
* </NavigatorScreen>
|
|
286
|
-
*
|
|
287
|
-
* <NavigatorScreen path="/child">
|
|
288
|
-
* <p>This is the child screen.</p>
|
|
289
|
-
* <NavigatorBackButton>
|
|
290
|
-
* Go back
|
|
291
|
-
* </NavigatorBackButton>
|
|
292
|
-
* </NavigatorScreen>
|
|
293
|
-
* </NavigatorProvider>
|
|
294
|
-
* );
|
|
295
|
-
* ```
|
|
296
|
-
*/
|
|
297
|
-
const NavigatorProvider = exports.NavigatorProvider = (0, _context.contextConnect)(UnconnectedNavigatorProvider, 'NavigatorProvider');
|
|
298
|
-
var _default = exports.default = NavigatorProvider;
|
|
263
|
+
const Navigator = exports.Navigator = (0, _context.contextConnect)(UnconnectedNavigator, 'Navigator');
|
|
299
264
|
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_warning","_context","_useCx","_router","_view","_context2","styles","_interopRequireWildcard","_deprecated","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","addScreen","screens","screen","some","s","path","globalThis","SCRIPT_DEBUG","warning","id","removeScreen","filter","goTo","state","options","_focusSelectorsCopy2","focusSelectors","currentLocation","isBack","skipFocus","replace","focusTargetSelector","restOptions","focusSelectorsCopy","getFocusSelectorsCopy","_focusSelectorsCopy","Map","currentFocusSelector","delete","isInitial","hasRestoredFocus","goToParent","currentPath","undefined","parentPath","findParent","routerReducer","action","matchedPath","restState","type","patternMatch","isShallowEqual","params","UnconnectedNavigator","props","forwardedRef","initialPath","initialPathProp","children","className","otherProps","useContextSystem","routerState","dispatch","useReducer","methods","useMemo","goBack","deprecated","since","alternative","navigatorContextValue","_matchedPath$params","location","match","cx","useCx","classes","navigatorWrapper","jsx","View","ref","NavigatorContext","Provider","value","Navigator","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useReducer } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { patternMatch, findParent } from '../utils/router';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type {\n\tNavigatorProps,\n\tNavigatorLocation,\n\tNavigatorContext as NavigatorContextType,\n\tNavigateOptions,\n\tScreen,\n\tNavigateToParentOptions,\n} from '../types';\nimport deprecated from '@wordpress/deprecated';\n\ntype MatchedPath = ReturnType< typeof patternMatch >;\n\ntype RouterAction =\n\t| { type: 'add' | 'remove'; screen: Screen }\n\t| { type: 'goto'; path: string; options?: NavigateOptions }\n\t| { type: 'gotoparent'; options?: NavigateToParentOptions };\n\ntype RouterState = {\n\tinitialPath: string;\n\tscreens: Screen[];\n\tcurrentLocation: NavigatorLocation;\n\tmatchedPath: MatchedPath;\n\tfocusSelectors: Map< string, string >;\n};\n\nfunction addScreen( { screens }: RouterState, screen: Screen ) {\n\tif ( screens.some( ( s ) => s.path === screen.path ) ) {\n\t\twarning(\n\t\t\t`Navigator: a screen with path ${ screen.path } already exists.\nThe screen with id ${ screen.id } will not be added.`\n\t\t);\n\t\treturn screens;\n\t}\n\treturn [ ...screens, screen ];\n}\n\nfunction removeScreen( { screens }: RouterState, screen: Screen ) {\n\treturn screens.filter( ( s ) => s.id !== screen.id );\n}\n\nfunction goTo(\n\tstate: RouterState,\n\tpath: string,\n\toptions: NavigateOptions = {}\n) {\n\tconst { focusSelectors } = state;\n\tconst currentLocation = { ...state.currentLocation };\n\n\tconst {\n\t\t// Default assignments\n\t\tisBack = false,\n\t\tskipFocus = false,\n\t\t// Extract to avoid forwarding\n\t\treplace,\n\t\tfocusTargetSelector,\n\t\t// Rest\n\t\t...restOptions\n\t} = options;\n\n\tif ( currentLocation.path === path ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\n\tlet focusSelectorsCopy: typeof focusSelectors | undefined;\n\tfunction getFocusSelectorsCopy() {\n\t\tfocusSelectorsCopy =\n\t\t\tfocusSelectorsCopy ?? new Map( state.focusSelectors );\n\t\treturn focusSelectorsCopy;\n\t}\n\n\t// Set a focus selector that will be used when navigating\n\t// back to the current location.\n\tif ( focusTargetSelector && currentLocation.path ) {\n\t\tgetFocusSelectorsCopy().set(\n\t\t\tcurrentLocation.path,\n\t\t\tfocusTargetSelector\n\t\t);\n\t}\n\n\t// Get the focus selector for the new location.\n\tlet currentFocusSelector;\n\tif ( focusSelectors.get( path ) ) {\n\t\tif ( isBack ) {\n\t\t\t// Use the found focus selector only when navigating back.\n\t\t\tcurrentFocusSelector = focusSelectors.get( path );\n\t\t}\n\t\t// Make a copy of the focusSelectors map to remove the focus selector\n\t\t// only if necessary (ie. a focus selector was found).\n\t\tgetFocusSelectorsCopy().delete( path );\n\t}\n\n\treturn {\n\t\tcurrentLocation: {\n\t\t\t...restOptions,\n\t\t\tisInitial: false,\n\t\t\tpath,\n\t\t\tisBack,\n\t\t\thasRestoredFocus: false,\n\t\t\tfocusTargetSelector: currentFocusSelector,\n\t\t\tskipFocus,\n\t\t},\n\t\tfocusSelectors: focusSelectorsCopy ?? focusSelectors,\n\t};\n}\n\nfunction goToParent(\n\tstate: RouterState,\n\toptions: NavigateToParentOptions = {}\n) {\n\tconst { screens, focusSelectors } = state;\n\tconst currentLocation = { ...state.currentLocation };\n\tconst currentPath = currentLocation.path;\n\tif ( currentPath === undefined ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\tconst parentPath = findParent( currentPath, screens );\n\tif ( parentPath === undefined ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\treturn goTo( state, parentPath, {\n\t\t...options,\n\t\tisBack: true,\n\t} );\n}\n\nfunction routerReducer(\n\tstate: RouterState,\n\taction: RouterAction\n): RouterState {\n\tlet {\n\t\tscreens,\n\t\tcurrentLocation,\n\t\tmatchedPath,\n\t\tfocusSelectors,\n\t\t...restState\n\t} = state;\n\tswitch ( action.type ) {\n\t\tcase 'add':\n\t\t\tscreens = addScreen( state, action.screen );\n\t\t\tbreak;\n\t\tcase 'remove':\n\t\t\tscreens = removeScreen( state, action.screen );\n\t\t\tbreak;\n\t\tcase 'goto':\n\t\t\t( { currentLocation, focusSelectors } = goTo(\n\t\t\t\tstate,\n\t\t\t\taction.path,\n\t\t\t\taction.options\n\t\t\t) );\n\t\t\tbreak;\n\t\tcase 'gotoparent':\n\t\t\t( { currentLocation, focusSelectors } = goToParent(\n\t\t\t\tstate,\n\t\t\t\taction.options\n\t\t\t) );\n\t\t\tbreak;\n\t}\n\n\t// Return early in case there is no change\n\tif (\n\t\tscreens === state.screens &&\n\t\tcurrentLocation === state.currentLocation\n\t) {\n\t\treturn state;\n\t}\n\n\t// Compute the matchedPath\n\tconst currentPath = currentLocation.path;\n\tmatchedPath =\n\t\tcurrentPath !== undefined\n\t\t\t? patternMatch( currentPath, screens )\n\t\t\t: undefined;\n\n\t// If the new match is the same as the previous match,\n\t// return the previous one to keep immutability.\n\tif (\n\t\tmatchedPath &&\n\t\tstate.matchedPath &&\n\t\tmatchedPath.id === state.matchedPath.id &&\n\t\tisShallowEqual( matchedPath.params, state.matchedPath.params )\n\t) {\n\t\tmatchedPath = state.matchedPath;\n\t}\n\n\treturn {\n\t\t...restState,\n\t\tscreens,\n\t\tcurrentLocation,\n\t\tmatchedPath,\n\t\tfocusSelectors,\n\t};\n}\n\nfunction UnconnectedNavigator(\n\tprops: WordPressComponentProps< NavigatorProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tinitialPath: initialPathProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator' );\n\n\tconst [ routerState, dispatch ] = useReducer(\n\t\trouterReducer,\n\t\tinitialPathProp,\n\t\t( path ) => ( {\n\t\t\tscreens: [],\n\t\t\tcurrentLocation: { path, isInitial: true },\n\t\t\tmatchedPath: undefined,\n\t\t\tfocusSelectors: new Map(),\n\t\t\tinitialPath: initialPathProp,\n\t\t} )\n\t);\n\n\t// The methods are constant forever, create stable references to them.\n\tconst methods = useMemo(\n\t\t() => ( {\n\t\t\t// Note: calling goBack calls `goToParent` internally, as it was established\n\t\t\t// that `goBack` should behave like `goToParent`, and `goToParent` should\n\t\t\t// be marked as deprecated.\n\t\t\tgoBack: ( options: NavigateToParentOptions | undefined ) =>\n\t\t\t\tdispatch( { type: 'gotoparent', options } ),\n\t\t\tgoTo: ( path: string, options?: NavigateOptions ) =>\n\t\t\t\tdispatch( { type: 'goto', path, options } ),\n\t\t\tgoToParent: ( options: NavigateToParentOptions | undefined ) => {\n\t\t\t\tdeprecated( `wp.components.useNavigator().goToParent`, {\n\t\t\t\t\tsince: '6.7',\n\t\t\t\t\talternative: 'wp.components.useNavigator().goBack',\n\t\t\t\t} );\n\t\t\t\tdispatch( { type: 'gotoparent', options } );\n\t\t\t},\n\t\t\taddScreen: ( screen: Screen ) =>\n\t\t\t\tdispatch( { type: 'add', screen } ),\n\t\t\tremoveScreen: ( screen: Screen ) =>\n\t\t\t\tdispatch( { type: 'remove', screen } ),\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst { currentLocation, matchedPath } = routerState;\n\n\tconst navigatorContextValue: NavigatorContextType = useMemo(\n\t\t() => ( {\n\t\t\tlocation: currentLocation,\n\t\t\tparams: matchedPath?.params ?? {},\n\t\t\tmatch: matchedPath?.id,\n\t\t\t...methods,\n\t\t} ),\n\t\t[ currentLocation, matchedPath, methods ]\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() => cx( styles.navigatorWrapper, 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\nexport const Navigator = contextConnect( UnconnectedNavigator, 'Navigator' );\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.NavigatorBackButton = void 0;
|
|
7
7
|
var _context = require("../../context");
|
|
8
8
|
var _view = require("../../view");
|
|
9
9
|
var _hook = require("./hook");
|
|
@@ -23,41 +23,5 @@ function UnconnectedNavigatorBackButton(props, forwardedRef) {
|
|
|
23
23
|
...navigatorBackButtonProps
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* The `NavigatorBackButton` component can be used to navigate to a screen and
|
|
29
|
-
* should be used in combination with the `NavigatorProvider`, the
|
|
30
|
-
* `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
|
|
31
|
-
* hook).
|
|
32
|
-
*
|
|
33
|
-
* @example
|
|
34
|
-
* ```jsx
|
|
35
|
-
* import {
|
|
36
|
-
* __experimentalNavigatorProvider as NavigatorProvider,
|
|
37
|
-
* __experimentalNavigatorScreen as NavigatorScreen,
|
|
38
|
-
* __experimentalNavigatorButton as NavigatorButton,
|
|
39
|
-
* __experimentalNavigatorBackButton as NavigatorBackButton,
|
|
40
|
-
* } from '@wordpress/components';
|
|
41
|
-
*
|
|
42
|
-
* const MyNavigation = () => (
|
|
43
|
-
* <NavigatorProvider initialPath="/">
|
|
44
|
-
* <NavigatorScreen path="/">
|
|
45
|
-
* <p>This is the home screen.</p>
|
|
46
|
-
* <NavigatorButton path="/child">
|
|
47
|
-
* Navigate to child screen.
|
|
48
|
-
* </NavigatorButton>
|
|
49
|
-
* </NavigatorScreen>
|
|
50
|
-
*
|
|
51
|
-
* <NavigatorScreen path="/child">
|
|
52
|
-
* <p>This is the child screen.</p>
|
|
53
|
-
* <NavigatorBackButton>
|
|
54
|
-
* Go back (to parent)
|
|
55
|
-
* </NavigatorBackButton>
|
|
56
|
-
* </NavigatorScreen>
|
|
57
|
-
* </NavigatorProvider>
|
|
58
|
-
* );
|
|
59
|
-
* ```
|
|
60
|
-
*/
|
|
61
|
-
const NavigatorBackButton = exports.NavigatorBackButton = (0, _context.contextConnect)(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
|
|
62
|
-
var _default = exports.default = NavigatorBackButton;
|
|
26
|
+
const NavigatorBackButton = exports.NavigatorBackButton = (0, _context.contextConnect)(UnconnectedNavigatorBackButton, 'Navigator.BackButton');
|
|
63
27
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","useNavigatorBackButton","jsx","View","ref","NavigatorBackButton","exports","contextConnect"
|
|
1
|
+
{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","useNavigatorBackButton","jsx","View","ref","NavigatorBackButton","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'Navigator.BackButton'\n);\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAXhD;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,8BAA8BA,CACtCC,KAAoE,EACpEC,YAAiC,EAChC;EACD,MAAMC,wBAAwB,GAAG,IAAAC,4BAAsB,EAAEH,KAAM,CAAC;EAEhE,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAwB,CAAI,CAAC;AACrE;AAEO,MAAMK,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,uBAAc,EAChDV,8BAA8B,EAC9B,sBACD,CAAC","ignoreList":[]}
|
|
@@ -22,7 +22,7 @@ function useNavigatorBackButton(props) {
|
|
|
22
22
|
onClick,
|
|
23
23
|
as = _button.default,
|
|
24
24
|
...otherProps
|
|
25
|
-
} = (0, _context.useContextSystem)(props, '
|
|
25
|
+
} = (0, _context.useContextSystem)(props, 'Navigator.BackButton');
|
|
26
26
|
const {
|
|
27
27
|
goBack
|
|
28
28
|
} = (0, _useNavigator.useNavigator)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_context","_button","_interopRequireDefault","_useNavigator","useNavigatorBackButton","props","onClick","as","Button","otherProps","useContextSystem","goBack","useNavigator","handleClick","useCallback","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorBackButtonProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\n\t\t...otherProps\n\t} = useContextSystem( props, '
|
|
1
|
+
{"version":3,"names":["_element","require","_context","_button","_interopRequireDefault","_useNavigator","useNavigatorBackButton","props","onClick","as","Button","otherProps","useContextSystem","goBack","useNavigator","handleClick","useCallback","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorBackButtonProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.BackButton' );\n\n\tconst { goBack } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoBack();\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASK,sBAAsBA,CACrCC,KAAoE,EACnE;EACD,MAAM;IACLC,OAAO;IACPC,EAAE,GAAGC,eAAM;IAEX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEL,KAAK,EAAE,sBAAuB,CAAC;EAErD,MAAM;IAAEM;EAAO,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EACjC,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,MAAM,CAAC,CAAC;IACRL,OAAO,GAAIS,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,MAAM,EAAEL,OAAO,CAClB,CAAC;EAEF,OAAO;IACNC,EAAE;IACFD,OAAO,EAAEO,WAAW;IACpB,GAAGJ;EACJ,CAAC;AACF","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.NavigatorButton = void 0;
|
|
7
7
|
var _context = require("../../context");
|
|
8
8
|
var _view = require("../../view");
|
|
9
9
|
var _hook = require("./hook");
|
|
@@ -23,40 +23,5 @@ function UnconnectedNavigatorButton(props, forwardedRef) {
|
|
|
23
23
|
...navigatorButtonProps
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* The `NavigatorButton` component can be used to navigate to a screen and should
|
|
29
|
-
* be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
|
|
30
|
-
* and the `NavigatorBackButton` components (or the `useNavigator` hook).
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```jsx
|
|
34
|
-
* import {
|
|
35
|
-
* __experimentalNavigatorProvider as NavigatorProvider,
|
|
36
|
-
* __experimentalNavigatorScreen as NavigatorScreen,
|
|
37
|
-
* __experimentalNavigatorButton as NavigatorButton,
|
|
38
|
-
* __experimentalNavigatorBackButton as NavigatorBackButton,
|
|
39
|
-
* } from '@wordpress/components';
|
|
40
|
-
*
|
|
41
|
-
* const MyNavigation = () => (
|
|
42
|
-
* <NavigatorProvider initialPath="/">
|
|
43
|
-
* <NavigatorScreen path="/">
|
|
44
|
-
* <p>This is the home screen.</p>
|
|
45
|
-
* <NavigatorButton path="/child">
|
|
46
|
-
* Navigate to child screen.
|
|
47
|
-
* </NavigatorButton>
|
|
48
|
-
* </NavigatorScreen>
|
|
49
|
-
*
|
|
50
|
-
* <NavigatorScreen path="/child">
|
|
51
|
-
* <p>This is the child screen.</p>
|
|
52
|
-
* <NavigatorBackButton>
|
|
53
|
-
* Go back
|
|
54
|
-
* </NavigatorBackButton>
|
|
55
|
-
* </NavigatorScreen>
|
|
56
|
-
* </NavigatorProvider>
|
|
57
|
-
* );
|
|
58
|
-
* ```
|
|
59
|
-
*/
|
|
60
|
-
const NavigatorButton = exports.NavigatorButton = (0, _context.contextConnect)(UnconnectedNavigatorButton, 'NavigatorButton');
|
|
61
|
-
var _default = exports.default = NavigatorButton;
|
|
26
|
+
const NavigatorButton = exports.NavigatorButton = (0, _context.contextConnect)(UnconnectedNavigatorButton, 'Navigator.Button');
|
|
62
27
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","useNavigatorButton","jsx","View","ref","NavigatorButton","exports","contextConnect"
|
|
1
|
+
{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","useNavigatorButton","jsx","View","ref","NavigatorButton","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'Navigator.Button'\n);\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA4C,IAAAG,WAAA,GAAAH,OAAA;AAX5C;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,0BAA0BA,CAClCC,KAAgE,EAChEC,YAAiC,EAChC;EACD,MAAMC,oBAAoB,GAAG,IAAAC,wBAAkB,EAAEH,KAAM,CAAC;EAExD,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAoB,CAAI,CAAC;AACjE;AAEO,MAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,uBAAc,EAC5CV,0BAA0B,EAC1B,kBACD,CAAC","ignoreList":[]}
|
|
@@ -26,7 +26,7 @@ function useNavigatorButton(props) {
|
|
|
26
26
|
as = _button.default,
|
|
27
27
|
attributeName = 'id',
|
|
28
28
|
...otherProps
|
|
29
|
-
} = (0, _context.useContextSystem)(props, '
|
|
29
|
+
} = (0, _context.useContextSystem)(props, 'Navigator.Button');
|
|
30
30
|
const escapedPath = (0, _escapeHtml.escapeAttribute)(path);
|
|
31
31
|
const {
|
|
32
32
|
goTo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, '
|
|
1
|
+
{"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Button' );\n\n\tconst escapedPath = escapeAttribute( path );\n\n\tconst { goTo } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoTo( escapedPath, {\n\t\t\t\t\tfocusTargetSelector: cssSelectorForAttribute(\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tescapedPath\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goTo, onClick, attributeName, escapedPath ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t\t[ attributeName ]: escapedPath,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMM,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACnE,IAAID,QAAU,KAAKC,SAAW,IAAG;AAE5B,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,kBAAmB,CAAC;EAEjD,MAAMQ,WAAW,GAAG,IAAAC,2BAAe,EAAER,IAAK,CAAC;EAE3C,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAC/B,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,IAAI,CAAEF,WAAW,EAAE;MAClBQ,mBAAmB,EAAEpB,uBAAuB,CAC3CS,aAAa,EACbG,WACD;IACD,CAAE,CAAC;IACHN,OAAO,GAAIY,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,IAAI,EAAER,OAAO,EAAEG,aAAa,EAAEG,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNL,EAAE;IACFD,OAAO,EAAEU,WAAW;IACpB,GAAGN,UAAU;IACb,CAAED,aAAa,GAAIG;EACpB,CAAC;AACF","ignoreList":[]}
|
|
@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.NavigatorScreen = void 0;
|
|
8
8
|
var _dom = require("@wordpress/dom");
|
|
9
9
|
var _element = require("@wordpress/element");
|
|
10
10
|
var _compose = require("@wordpress/compose");
|
|
11
|
-
var _i18n = require("@wordpress/i18n");
|
|
12
11
|
var _escapeHtml = require("@wordpress/escape-html");
|
|
13
12
|
var _warning = _interopRequireDefault(require("@wordpress/warning"));
|
|
14
13
|
var _context = require("../../context");
|
|
@@ -16,6 +15,7 @@ var _useCx = require("../../utils/hooks/use-cx");
|
|
|
16
15
|
var _view = require("../../view");
|
|
17
16
|
var _context2 = require("../context");
|
|
18
17
|
var styles = _interopRequireWildcard(require("../styles"));
|
|
18
|
+
var _useScreenAnimatePresence = require("./use-screen-animate-presence");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
21
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -33,23 +33,33 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
33
33
|
|
|
34
34
|
function UnconnectedNavigatorScreen(props, forwardedRef) {
|
|
35
35
|
if (!/^\//.test(props.path)) {
|
|
36
|
-
globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.
|
|
36
|
+
globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : void 0;
|
|
37
37
|
}
|
|
38
38
|
const screenId = (0, _element.useId)();
|
|
39
39
|
const {
|
|
40
40
|
children,
|
|
41
41
|
className,
|
|
42
42
|
path,
|
|
43
|
+
onAnimationEnd: onAnimationEndProp,
|
|
43
44
|
...otherProps
|
|
44
|
-
} = (0, _context.useContextSystem)(props, '
|
|
45
|
+
} = (0, _context.useContextSystem)(props, 'Navigator.Screen');
|
|
45
46
|
const {
|
|
46
47
|
location,
|
|
47
48
|
match,
|
|
48
49
|
addScreen,
|
|
49
50
|
removeScreen
|
|
50
51
|
} = (0, _element.useContext)(_context2.NavigatorContext);
|
|
52
|
+
const {
|
|
53
|
+
isInitial,
|
|
54
|
+
isBack,
|
|
55
|
+
focusTargetSelector,
|
|
56
|
+
skipFocus
|
|
57
|
+
} = location;
|
|
51
58
|
const isMatch = match === screenId;
|
|
52
59
|
const wrapperRef = (0, _element.useRef)(null);
|
|
60
|
+
const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
|
|
61
|
+
|
|
62
|
+
// Register / unregister screen with the navigator context.
|
|
53
63
|
(0, _element.useEffect)(() => {
|
|
54
64
|
const screen = {
|
|
55
65
|
id: screenId,
|
|
@@ -58,101 +68,69 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
|
|
|
58
68
|
addScreen(screen);
|
|
59
69
|
return () => removeScreen(screen);
|
|
60
70
|
}, [screenId, path, addScreen, removeScreen]);
|
|
61
|
-
|
|
71
|
+
|
|
72
|
+
// Animation.
|
|
62
73
|
const {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
isInitial,
|
|
74
|
+
animationStyles,
|
|
75
|
+
shouldRenderScreen,
|
|
76
|
+
screenProps
|
|
77
|
+
} = (0, _useScreenAnimatePresence.useScreenAnimatePresence)({
|
|
78
|
+
isMatch,
|
|
69
79
|
isBack,
|
|
70
|
-
|
|
71
|
-
|
|
80
|
+
onAnimationEnd: onAnimationEndProp,
|
|
81
|
+
skipAnimation: skipAnimationAndFocusRestoration
|
|
82
|
+
});
|
|
83
|
+
const cx = (0, _useCx.useCx)();
|
|
84
|
+
const classes = (0, _element.useMemo)(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
|
|
85
|
+
|
|
86
|
+
// Focus restoration
|
|
72
87
|
const locationRef = (0, _element.useRef)(location);
|
|
73
88
|
(0, _element.useEffect)(() => {
|
|
74
89
|
locationRef.current = location;
|
|
75
90
|
}, [location]);
|
|
76
|
-
|
|
77
|
-
// Focus restoration
|
|
78
|
-
const isInitialLocation = location.isInitial && !location.isBack;
|
|
79
91
|
(0, _element.useEffect)(() => {
|
|
92
|
+
const wrapperEl = wrapperRef.current;
|
|
80
93
|
// Only attempt to restore focus:
|
|
81
94
|
// - if the current location is not the initial one (to avoid moving focus on page load)
|
|
82
95
|
// - when the screen becomes visible
|
|
83
96
|
// - if the wrapper ref has been assigned
|
|
84
97
|
// - if focus hasn't already been restored for the current location
|
|
85
98
|
// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
|
|
86
|
-
if (
|
|
99
|
+
if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {
|
|
87
100
|
return;
|
|
88
101
|
}
|
|
89
|
-
const activeElement =
|
|
102
|
+
const activeElement = wrapperEl.ownerDocument.activeElement;
|
|
90
103
|
|
|
91
104
|
// If an element is already focused within the wrapper do not focus the
|
|
92
105
|
// element. This prevents inputs or buttons from losing focus unnecessarily.
|
|
93
|
-
if (
|
|
106
|
+
if (wrapperEl.contains(activeElement)) {
|
|
94
107
|
return;
|
|
95
108
|
}
|
|
96
109
|
let elementToFocus = null;
|
|
97
110
|
|
|
98
111
|
// When navigating back, if a selector is provided, use it to look for the
|
|
99
112
|
// target element (assumed to be a node inside the current NavigatorScreen)
|
|
100
|
-
if (
|
|
101
|
-
elementToFocus =
|
|
113
|
+
if (isBack && focusTargetSelector) {
|
|
114
|
+
elementToFocus = wrapperEl.querySelector(focusTargetSelector);
|
|
102
115
|
}
|
|
103
116
|
|
|
104
117
|
// If the previous query didn't run or find any element to focus, fallback
|
|
105
118
|
// to the first tabbable element in the screen (or the screen itself).
|
|
106
119
|
if (!elementToFocus) {
|
|
107
|
-
const [firstTabbable] = _dom.focus.tabbable.find(
|
|
108
|
-
elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable :
|
|
120
|
+
const [firstTabbable] = _dom.focus.tabbable.find(wrapperEl);
|
|
121
|
+
elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;
|
|
109
122
|
}
|
|
110
123
|
locationRef.current.hasRestoredFocus = true;
|
|
111
124
|
elementToFocus.focus();
|
|
112
|
-
}, [
|
|
125
|
+
}, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);
|
|
113
126
|
const mergedWrapperRef = (0, _compose.useMergeRefs)([forwardedRef, wrapperRef]);
|
|
114
|
-
return
|
|
127
|
+
return shouldRenderScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
|
|
115
128
|
ref: mergedWrapperRef,
|
|
116
129
|
className: classes,
|
|
130
|
+
...screenProps,
|
|
117
131
|
...otherProps,
|
|
118
132
|
children: children
|
|
119
133
|
}) : null;
|
|
120
134
|
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* The `NavigatorScreen` component represents a single view/screen/panel and
|
|
124
|
-
* should be used in combination with the `NavigatorProvider`, the
|
|
125
|
-
* `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
|
|
126
|
-
* hook).
|
|
127
|
-
*
|
|
128
|
-
* @example
|
|
129
|
-
* ```jsx
|
|
130
|
-
* import {
|
|
131
|
-
* __experimentalNavigatorProvider as NavigatorProvider,
|
|
132
|
-
* __experimentalNavigatorScreen as NavigatorScreen,
|
|
133
|
-
* __experimentalNavigatorButton as NavigatorButton,
|
|
134
|
-
* __experimentalNavigatorBackButton as NavigatorBackButton,
|
|
135
|
-
* } from '@wordpress/components';
|
|
136
|
-
*
|
|
137
|
-
* const MyNavigation = () => (
|
|
138
|
-
* <NavigatorProvider initialPath="/">
|
|
139
|
-
* <NavigatorScreen path="/">
|
|
140
|
-
* <p>This is the home screen.</p>
|
|
141
|
-
* <NavigatorButton path="/child">
|
|
142
|
-
* Navigate to child screen.
|
|
143
|
-
* </NavigatorButton>
|
|
144
|
-
* </NavigatorScreen>
|
|
145
|
-
*
|
|
146
|
-
* <NavigatorScreen path="/child">
|
|
147
|
-
* <p>This is the child screen.</p>
|
|
148
|
-
* <NavigatorBackButton>
|
|
149
|
-
* Go back
|
|
150
|
-
* </NavigatorBackButton>
|
|
151
|
-
* </NavigatorScreen>
|
|
152
|
-
* </NavigatorProvider>
|
|
153
|
-
* );
|
|
154
|
-
* ```
|
|
155
|
-
*/
|
|
156
|
-
const NavigatorScreen = exports.NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'NavigatorScreen');
|
|
157
|
-
var _default = exports.default = NavigatorScreen;
|
|
135
|
+
const NavigatorScreen = exports.NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'Navigator.Screen');
|
|
158
136
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_dom","require","_element","_compose","_i18n","_escapeHtml","_warning","_interopRequireDefault","_context","_useCx","_view","_context2","styles","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","warning","screenId","useId","children","className","otherProps","useContextSystem","location","match","addScreen","removeScreen","useContext","NavigatorContext","isMatch","wrapperRef","useRef","useEffect","screen","id","escapeAttribute","isRTL","isRTLFn","isInitial","isBack","cx","useCx","classes","useMemo","navigatorScreen","locationRef","current","isInitialLocation","hasRestoredFocus","skipFocus","activeElement","ownerDocument","contains","elementToFocus","focusTargetSelector","querySelector","firstTabbable","focus","tabbable","find","mergedWrapperRef","useMergeRefs","jsx","View","ref","NavigatorScreen","exports","contextConnect","_default"],"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseId,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type { NavigatorScreenProps } from '../types';\n\nfunction UnconnectedNavigatorScreen(\n\tprops: WordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( ! /^\\//.test( props.path ) ) {\n\t\twarning(\n\t\t\t'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'\n\t\t);\n\t}\n\n\tconst screenId = useId();\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst { location, match, addScreen, removeScreen } =\n\t\tuseContext( NavigatorContext );\n\tconst isMatch = match === screenId;\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tuseEffect( () => {\n\t\tconst screen = {\n\t\t\tid: screenId,\n\t\t\tpath: escapeAttribute( path ),\n\t\t};\n\t\taddScreen( screen );\n\t\treturn () => removeScreen( screen );\n\t}, [ screenId, path, addScreen, removeScreen ] );\n\n\tconst isRTL = isRTLFn();\n\tconst { isInitial, isBack } = location;\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.navigatorScreen( {\n\t\t\t\t\tisInitial,\n\t\t\t\t\tisBack,\n\t\t\t\t\tisRTL,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isInitial, isBack, isRTL ]\n\t);\n\n\tconst locationRef = useRef( location );\n\n\tuseEffect( () => {\n\t\tlocationRef.current = location;\n\t}, [ 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\t// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n\t\tif (\n\t\t\tisInitialLocation ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperRef.current ||\n\t\t\tlocationRef.current.hasRestoredFocus ||\n\t\t\tlocation.skipFocus\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 && location.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tlocation.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 ] = focus.tabbable.find( wrapperRef.current );\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\tlocationRef.current.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.isBack,\n\t\tlocation.focusTargetSelector,\n\t\tlocation.skipFocus,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\treturn isMatch ? (\n\t\t<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>\n\t\t\t{ children }\n\t\t</View>\n\t) : null;\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"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_dom","require","_element","_compose","_escapeHtml","_warning","_interopRequireDefault","_context","_useCx","_view","_context2","styles","_interopRequireWildcard","_useScreenAnimatePresence","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","warning","screenId","useId","children","className","onAnimationEnd","onAnimationEndProp","otherProps","useContextSystem","location","match","addScreen","removeScreen","useContext","NavigatorContext","isInitial","isBack","focusTargetSelector","skipFocus","isMatch","wrapperRef","useRef","skipAnimationAndFocusRestoration","useEffect","screen","id","escapeAttribute","animationStyles","shouldRenderScreen","screenProps","useScreenAnimatePresence","skipAnimation","cx","useCx","classes","useMemo","navigatorScreen","locationRef","current","wrapperEl","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","querySelector","firstTabbable","focus","tabbable","find","mergedWrapperRef","useMergeRefs","jsx","View","ref","NavigatorScreen","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseId,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type { NavigatorScreenProps } from '../types';\nimport { useScreenAnimatePresence } from './use-screen-animate-presence';\n\nfunction UnconnectedNavigatorScreen(\n\tprops: WordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( ! /^\\//.test( props.path ) ) {\n\t\twarning(\n\t\t\t'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'\n\t\t);\n\t}\n\n\tconst screenId = useId();\n\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tpath,\n\t\tonAnimationEnd: onAnimationEndProp,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Screen' );\n\n\tconst { location, match, addScreen, removeScreen } =\n\t\tuseContext( NavigatorContext );\n\tconst { isInitial, isBack, focusTargetSelector, skipFocus } = location;\n\n\tconst isMatch = match === screenId;\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\tconst skipAnimationAndFocusRestoration = !! isInitial && ! isBack;\n\n\t// Register / unregister screen with the navigator context.\n\tuseEffect( () => {\n\t\tconst screen = {\n\t\t\tid: screenId,\n\t\t\tpath: escapeAttribute( path ),\n\t\t};\n\t\taddScreen( screen );\n\t\treturn () => removeScreen( screen );\n\t}, [ screenId, path, addScreen, removeScreen ] );\n\n\t// Animation.\n\tconst { animationStyles, shouldRenderScreen, screenProps } =\n\t\tuseScreenAnimatePresence( {\n\t\t\tisMatch,\n\t\t\tisBack,\n\t\t\tonAnimationEnd: onAnimationEndProp,\n\t\t\tskipAnimation: skipAnimationAndFocusRestoration,\n\t\t} );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() => cx( styles.navigatorScreen, animationStyles, className ),\n\t\t[ className, cx, animationStyles ]\n\t);\n\n\t// Focus restoration\n\tconst locationRef = useRef( location );\n\tuseEffect( () => {\n\t\tlocationRef.current = location;\n\t}, [ location ] );\n\tuseEffect( () => {\n\t\tconst wrapperEl = wrapperRef.current;\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\t// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n\t\tif (\n\t\t\tskipAnimationAndFocusRestoration ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperEl ||\n\t\t\tlocationRef.current.hasRestoredFocus ||\n\t\t\tskipFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperEl.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 ( wrapperEl.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 ( isBack && focusTargetSelector ) {\n\t\t\telementToFocus = wrapperEl.querySelector( focusTargetSelector );\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 ] = focus.tabbable.find( wrapperEl );\n\t\t\telementToFocus = firstTabbable ?? wrapperEl;\n\t\t}\n\n\t\tlocationRef.current.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tskipAnimationAndFocusRestoration,\n\t\tisMatch,\n\t\tisBack,\n\t\tfocusTargetSelector,\n\t\tskipFocus,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\treturn shouldRenderScreen ? (\n\t\t<View\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ classes }\n\t\t\t{ ...screenProps }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</View>\n\t) : null;\n}\n\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'Navigator.Screen'\n);\n"],"mappings":"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","ignoreList":[]}
|