@flipdish/ui-library 0.44.0 → 0.45.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/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +8 -0
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +8 -0
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.cjs +23 -14
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.cjs.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.d.ts +2 -3
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.d.ts.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js +23 -14
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.cjs +31 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.d.ts +15 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.js +29 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.cjs +3 -2
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.cjs.map +1 -1
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.d.ts.map +1 -1
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js +4 -3
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/index.cjs +5 -0
- package/dist/components/organisms/SlideoutMenu/index.cjs.map +1 -1
- package/dist/components/organisms/SlideoutMenu/index.d.ts +16 -9
- package/dist/components/organisms/SlideoutMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/SlideoutMenu/index.js +5 -0
- package/dist/components/organisms/SlideoutMenu/index.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/providers/PageArea.context.cjs +4 -4
- package/dist/components/organisms/SlideoutMenu/providers/PageArea.context.d.ts +4 -4
- package/dist/components/organisms/SlideoutMenu/providers/PageArea.context.js +4 -4
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.cjs +24 -8
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.cjs.map +1 -1
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.d.ts +3 -2
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.d.ts.map +1 -1
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.js +25 -9
- package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.js.map +1 -1
- package/dist/providers/ThemeProvider/Theme.context.cjs +17 -0
- package/dist/providers/ThemeProvider/Theme.context.cjs.map +1 -0
- package/dist/providers/ThemeProvider/Theme.context.d.ts +16 -0
- package/dist/providers/ThemeProvider/Theme.context.d.ts.map +1 -0
- package/dist/providers/ThemeProvider/Theme.context.js +14 -0
- package/dist/providers/ThemeProvider/Theme.context.js.map +1 -0
- package/dist/providers/ThemeProvider/index.cjs +3 -11
- package/dist/providers/ThemeProvider/index.cjs.map +1 -1
- package/dist/providers/ThemeProvider/index.d.ts +1 -14
- package/dist/providers/ThemeProvider/index.d.ts.map +1 -1
- package/dist/providers/ThemeProvider/index.js +3 -10
- package/dist/providers/ThemeProvider/index.js.map +1 -1
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.cjs +30 -0
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.cjs.map +1 -0
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.d.ts +19 -0
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.js +26 -0
- package/dist/utilities/__internal__/pageCoverUtils/pageCover.utils.js.map +1 -0
- package/package.json +1 -1
|
@@ -24,15 +24,6 @@ export interface SlideoutMenuProps {
|
|
|
24
24
|
* back to its variable when the others are omitted.
|
|
25
25
|
*/
|
|
26
26
|
bounds?: SlideoutBounds;
|
|
27
|
-
/**
|
|
28
|
-
* The page area the panel covers below `lg`: the element `bounds` describes. The panel makes it `inert` while it covers it,
|
|
29
|
-
* so keyboard and screen reader skip what nobody can see, and restores it as it closes. Without it, inside `AppShell` the
|
|
30
|
-
* shell's page area is covered, and elsewhere the app's root from `UIProvider` when overlays portal outside that root, as
|
|
31
|
-
* they do with `scopeId`; in a micro-frontend that root is the page area under the host's chrome. Pass it when the root
|
|
32
|
-
* holds the app's own header, or when overlays portal into the root. The element must stay mounted while the panel is
|
|
33
|
-
* open, and nothing else may write `inert` on it.
|
|
34
|
-
*/
|
|
35
|
-
pageAreaRef?: RefObject<HTMLElement | null>;
|
|
36
27
|
/** Names the dialog for assistive technology. Defaults to "Slideout menu"; prefer the name of what the panel shows. */
|
|
37
28
|
'aria-label'?: string;
|
|
38
29
|
/** Names the dialog by an element inside it, such as the heading in `Header`, instead of `aria-label`. */
|
|
@@ -80,6 +71,21 @@ declare const Footer: {
|
|
|
80
71
|
}): import("react").JSX.Element;
|
|
81
72
|
displayName: string;
|
|
82
73
|
};
|
|
74
|
+
export interface SlideoutPageAreaProps {
|
|
75
|
+
/**
|
|
76
|
+
* The element under the box slideouts cover below `lg`: the page area, with a side panel that covers it, never the header
|
|
77
|
+
* or the sidebar. It goes `inert` while a slideout covers it and is restored as the slideout closes, so it must stay
|
|
78
|
+
* mounted meanwhile, and nothing else may write `inert` on it.
|
|
79
|
+
*/
|
|
80
|
+
areaRef: RefObject<HTMLElement | null>;
|
|
81
|
+
/** The layout, wrapping every place a slideout renders from, such as the header as well as the page. */
|
|
82
|
+
children: ReactNode;
|
|
83
|
+
}
|
|
84
|
+
/** Names what the slideouts below it cover below `lg`, for a layout of its own; `AppShell` does it for its page area. */
|
|
85
|
+
declare const PageArea: {
|
|
86
|
+
({ areaRef, children }: SlideoutPageAreaProps): import("react").JSX.Element;
|
|
87
|
+
displayName: string;
|
|
88
|
+
};
|
|
83
89
|
/**
|
|
84
90
|
* Panel that slides in from the right edge and floats over the page without dimming or blocking it,
|
|
85
91
|
* for the detail of the record the user just selected. It covers the page area only, never the header, the
|
|
@@ -93,6 +99,7 @@ declare const SlideoutMenu: typeof Menu & {
|
|
|
93
99
|
Content: typeof Content;
|
|
94
100
|
Header: typeof Header;
|
|
95
101
|
Footer: typeof Footer;
|
|
102
|
+
PageArea: typeof PageArea;
|
|
96
103
|
};
|
|
97
104
|
export { SlideoutMenu };
|
|
98
105
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ import { useObjectRef } from '@react-aria/utils';
|
|
|
8
8
|
import { useContext, useRef, useLayoutEffect } from 'react';
|
|
9
9
|
import { DialogTrigger } from 'react-aria-components';
|
|
10
10
|
import { SlideoutShell } from './components/SlideoutShell.js';
|
|
11
|
+
import { PageAreaContext } from './providers/PageArea.context.js';
|
|
11
12
|
import { SlideoutMenuContext } from './providers/SlideoutMenu.context.js';
|
|
12
13
|
export { APP_HEADER_HEIGHT_VAR, APP_SIDEBAR_WIDTH_VAR, APP_SIDE_PANEL_WIDTH_VAR } from './utilities/slideoutMenu.utils.js';
|
|
13
14
|
|
|
@@ -45,6 +46,9 @@ const Footer = ({ 'data-testid': dataTestId, ...props }) => {
|
|
|
45
46
|
return (jsx("div", { ...props, "data-testid": footerTestId, className: cx('w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6', props.className) }));
|
|
46
47
|
};
|
|
47
48
|
Footer.displayName = 'SlideoutFooter';
|
|
49
|
+
/** Names what the slideouts below it cover below `lg`, for a layout of its own; `AppShell` does it for its page area. */
|
|
50
|
+
const PageArea = ({ areaRef, children }) => jsx(PageAreaContext.Provider, { value: areaRef, children: children });
|
|
51
|
+
PageArea.displayName = 'SlideoutPageArea';
|
|
48
52
|
/**
|
|
49
53
|
* Panel that slides in from the right edge and floats over the page without dimming or blocking it,
|
|
50
54
|
* for the detail of the record the user just selected. It covers the page area only, never the header, the
|
|
@@ -59,6 +63,7 @@ SlideoutMenu.Trigger = DialogTrigger;
|
|
|
59
63
|
SlideoutMenu.Content = Content;
|
|
60
64
|
SlideoutMenu.Header = Header;
|
|
61
65
|
SlideoutMenu.Footer = Footer;
|
|
66
|
+
SlideoutMenu.PageArea = PageArea;
|
|
62
67
|
|
|
63
68
|
export { SlideoutMenu };
|
|
64
69
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialogTrigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialogTrigger"],"mappings":"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"}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Provided by `AppShell
|
|
7
|
-
* together with a side panel
|
|
8
|
-
* and assistive technology skip what nobody can see. Context
|
|
9
|
-
* the
|
|
6
|
+
* Provided by `AppShell`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
|
|
7
|
+
* `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
|
|
8
|
+
* inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
|
|
9
|
+
* panel anywhere in the layout finds it, the header included.
|
|
10
10
|
*/
|
|
11
11
|
const PageAreaContext = React.createContext(undefined);
|
|
12
12
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Provided by `AppShell
|
|
4
|
-
* together with a side panel
|
|
5
|
-
* and assistive technology skip what nobody can see. Context
|
|
6
|
-
* the
|
|
3
|
+
* Provided by `AppShell`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
|
|
4
|
+
* `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
|
|
5
|
+
* inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
|
|
6
|
+
* panel anywhere in the layout finds it, the header included.
|
|
7
7
|
*/
|
|
8
8
|
export declare const PageAreaContext: import("react").Context<RefObject<HTMLElement | null> | undefined>;
|
|
9
9
|
//# sourceMappingURL=PageArea.context.d.ts.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Provided by `AppShell
|
|
5
|
-
* together with a side panel
|
|
6
|
-
* and assistive technology skip what nobody can see. Context
|
|
7
|
-
* the
|
|
4
|
+
* Provided by `AppShell`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
|
|
5
|
+
* `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
|
|
6
|
+
* inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
|
|
7
|
+
* panel anywhere in the layout finds it, the header included.
|
|
8
8
|
*/
|
|
9
9
|
const PageAreaContext = createContext(undefined);
|
|
10
10
|
|
|
@@ -9,18 +9,25 @@ const focusableSiblingBefore = (panel) => {
|
|
|
9
9
|
const sibling = panel.previousElementSibling;
|
|
10
10
|
return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
|
|
11
11
|
};
|
|
12
|
-
/** Whether a hand-back can land: a control, or a region given a `tabindex`,
|
|
13
|
-
const canTakeFocus = (element) => element instanceof HTMLElement &&
|
|
12
|
+
/** Whether a hand-back can land: a control, or a region given a `tabindex`, neither disabled nor under a cover. */
|
|
13
|
+
const canTakeFocus = (element) => element instanceof HTMLElement &&
|
|
14
|
+
(element.tabIndex >= 0 || element.hasAttribute('tabindex')) &&
|
|
15
|
+
!element.matches(':disabled') &&
|
|
16
|
+
element.closest('[inert]') === null;
|
|
14
17
|
/**
|
|
15
18
|
* What covers an element under an inert ancestor: the last panel to cover that ancestor, else the sibling after it, as a
|
|
16
|
-
* side panel sits after the page it covers
|
|
19
|
+
* side panel sits after the page it covers, else the first region inside that sibling given a `tabindex` that can take
|
|
20
|
+
* focus, as a host wraps its side panel. Nothing when none of those can.
|
|
17
21
|
*/
|
|
18
22
|
const coverOver = (element) => {
|
|
19
23
|
const covered = element.closest('[inert]');
|
|
20
24
|
if (!(covered instanceof HTMLElement))
|
|
21
25
|
return null;
|
|
22
26
|
const candidate = inert_utils.lastCoverOf(covered) ?? covered.nextElementSibling;
|
|
23
|
-
|
|
27
|
+
if (canTakeFocus(candidate))
|
|
28
|
+
return candidate;
|
|
29
|
+
const regions = candidate ? [...candidate.querySelectorAll('[tabindex]')] : [];
|
|
30
|
+
return regions.find(canTakeFocus) ?? null;
|
|
24
31
|
};
|
|
25
32
|
/**
|
|
26
33
|
* What the panel covers: the given element, unless the panel sits inside it, as overlays do without a scoped anchor, when
|
|
@@ -39,8 +46,8 @@ const resolveCovered = (panel, coveredRef) => {
|
|
|
39
46
|
* a popover does.
|
|
40
47
|
*
|
|
41
48
|
* @param options See `UsePanelFocusOptions`.
|
|
42
|
-
* @returns a capture-phase focus handler to spread onto the panel element,
|
|
43
|
-
* close at another control after a content swap
|
|
49
|
+
* @returns a capture-phase focus handler to spread onto the panel element, `setOpener`, which points the hand-back on
|
|
50
|
+
* close at another control after a content swap, and `liftCover`, which lifts the cover ahead of the close that follows
|
|
44
51
|
*/
|
|
45
52
|
const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }) => {
|
|
46
53
|
const openerRef = React.useRef(null);
|
|
@@ -99,6 +106,7 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
99
106
|
// React runs every cleanup before any effect in a commit, so the cover lifts before the hand-back above lands focus in the
|
|
100
107
|
// page. Covers are counted per element, so two panels over the same page restore its own `inert` only when the last lifts.
|
|
101
108
|
const isCovering = isPresent && !isDesktop;
|
|
109
|
+
const liftCoverRef = React.useRef(null);
|
|
102
110
|
React.useEffect(() => {
|
|
103
111
|
const panel = panelRef.current;
|
|
104
112
|
// Only a given element is covered; the panel's siblings are the layout's to cover, as `AppShell` does for a side panel.
|
|
@@ -110,8 +118,16 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
110
118
|
const focused = focus_utils.getFocusedElement();
|
|
111
119
|
if (focused && covered.contains(focused))
|
|
112
120
|
panel.focus({ preventScroll: true });
|
|
113
|
-
|
|
121
|
+
const lift = inert_utils.coverElement(covered, panel);
|
|
122
|
+
liftCoverRef.current = lift;
|
|
123
|
+
return () => {
|
|
124
|
+
lift();
|
|
125
|
+
liftCoverRef.current = null;
|
|
126
|
+
};
|
|
114
127
|
}, [panelRef, coveredRef, isCovering]);
|
|
128
|
+
// For a close that another panel caused: that panel is mounting under this cover in the same pass, and its focus call would
|
|
129
|
+
// be refused until the cover lifts at the next commit. Lifting is idempotent, so the effect's own cleanup stays harmless.
|
|
130
|
+
const liftCover = React.useCallback(() => liftCoverRef.current?.(), []);
|
|
115
131
|
// Swapping content unmounts whatever held focus, which drops it on the page. The region takes it, so Tab stays inside and
|
|
116
132
|
// closing can still hand it back. Content that focuses itself on mount (an `autoFocus` input) has done so by now and keeps it.
|
|
117
133
|
const previousContentKey = React.useRef(contentKey);
|
|
@@ -133,7 +149,7 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
133
149
|
const setOpener = React.useCallback((element) => {
|
|
134
150
|
openerRef.current = element;
|
|
135
151
|
}, []);
|
|
136
|
-
return { onFocusCapture, setOpener };
|
|
152
|
+
return { onFocusCapture, setOpener, liftCover };
|
|
137
153
|
};
|
|
138
154
|
|
|
139
155
|
exports.usePanelFocus = usePanelFocus;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"sourcesContent":[null],"names":["lastCoverOf","useRef","useState","getFocusedElement","useEffect","coverElement","
|
|
1
|
+
{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"sourcesContent":[null],"names":["lastCoverOf","useRef","useState","getFocusedElement","useEffect","coverElement","useCallback","useLayoutEffect"],"mappings":"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"}
|
|
@@ -24,12 +24,13 @@ interface UsePanelFocusOptions {
|
|
|
24
24
|
* a popover does.
|
|
25
25
|
*
|
|
26
26
|
* @param options See `UsePanelFocusOptions`.
|
|
27
|
-
* @returns a capture-phase focus handler to spread onto the panel element,
|
|
28
|
-
* close at another control after a content swap
|
|
27
|
+
* @returns a capture-phase focus handler to spread onto the panel element, `setOpener`, which points the hand-back on
|
|
28
|
+
* close at another control after a content swap, and `liftCover`, which lifts the cover ahead of the close that follows
|
|
29
29
|
*/
|
|
30
30
|
export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
|
|
31
31
|
onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
|
|
32
32
|
setOpener: (element: HTMLElement) => void;
|
|
33
|
+
liftCover: () => void | undefined;
|
|
33
34
|
};
|
|
34
35
|
export {};
|
|
35
36
|
//# sourceMappingURL=usePanelFocus.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6CnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GAAI,gFAAgF,oBAAoB;4BA2FjG,UAAU,CAAC,WAAW,CAAC;yBAMd,WAAW;;CAKpD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRef, useState, useEffect,
|
|
1
|
+
import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
2
2
|
import { getFocusedElement } from '../../../utilities/__internal__/focusUtils/focus.utils.js';
|
|
3
3
|
import { coverElement, lastCoverOf } from '../../../utilities/__internal__/inertUtils/inert.utils.js';
|
|
4
4
|
|
|
@@ -7,18 +7,25 @@ const focusableSiblingBefore = (panel) => {
|
|
|
7
7
|
const sibling = panel.previousElementSibling;
|
|
8
8
|
return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
|
|
9
9
|
};
|
|
10
|
-
/** Whether a hand-back can land: a control, or a region given a `tabindex`,
|
|
11
|
-
const canTakeFocus = (element) => element instanceof HTMLElement &&
|
|
10
|
+
/** Whether a hand-back can land: a control, or a region given a `tabindex`, neither disabled nor under a cover. */
|
|
11
|
+
const canTakeFocus = (element) => element instanceof HTMLElement &&
|
|
12
|
+
(element.tabIndex >= 0 || element.hasAttribute('tabindex')) &&
|
|
13
|
+
!element.matches(':disabled') &&
|
|
14
|
+
element.closest('[inert]') === null;
|
|
12
15
|
/**
|
|
13
16
|
* What covers an element under an inert ancestor: the last panel to cover that ancestor, else the sibling after it, as a
|
|
14
|
-
* side panel sits after the page it covers
|
|
17
|
+
* side panel sits after the page it covers, else the first region inside that sibling given a `tabindex` that can take
|
|
18
|
+
* focus, as a host wraps its side panel. Nothing when none of those can.
|
|
15
19
|
*/
|
|
16
20
|
const coverOver = (element) => {
|
|
17
21
|
const covered = element.closest('[inert]');
|
|
18
22
|
if (!(covered instanceof HTMLElement))
|
|
19
23
|
return null;
|
|
20
24
|
const candidate = lastCoverOf(covered) ?? covered.nextElementSibling;
|
|
21
|
-
|
|
25
|
+
if (canTakeFocus(candidate))
|
|
26
|
+
return candidate;
|
|
27
|
+
const regions = candidate ? [...candidate.querySelectorAll('[tabindex]')] : [];
|
|
28
|
+
return regions.find(canTakeFocus) ?? null;
|
|
22
29
|
};
|
|
23
30
|
/**
|
|
24
31
|
* What the panel covers: the given element, unless the panel sits inside it, as overlays do without a scoped anchor, when
|
|
@@ -37,8 +44,8 @@ const resolveCovered = (panel, coveredRef) => {
|
|
|
37
44
|
* a popover does.
|
|
38
45
|
*
|
|
39
46
|
* @param options See `UsePanelFocusOptions`.
|
|
40
|
-
* @returns a capture-phase focus handler to spread onto the panel element,
|
|
41
|
-
* close at another control after a content swap
|
|
47
|
+
* @returns a capture-phase focus handler to spread onto the panel element, `setOpener`, which points the hand-back on
|
|
48
|
+
* close at another control after a content swap, and `liftCover`, which lifts the cover ahead of the close that follows
|
|
42
49
|
*/
|
|
43
50
|
const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }) => {
|
|
44
51
|
const openerRef = useRef(null);
|
|
@@ -97,6 +104,7 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
97
104
|
// React runs every cleanup before any effect in a commit, so the cover lifts before the hand-back above lands focus in the
|
|
98
105
|
// page. Covers are counted per element, so two panels over the same page restore its own `inert` only when the last lifts.
|
|
99
106
|
const isCovering = isPresent && !isDesktop;
|
|
107
|
+
const liftCoverRef = useRef(null);
|
|
100
108
|
useEffect(() => {
|
|
101
109
|
const panel = panelRef.current;
|
|
102
110
|
// Only a given element is covered; the panel's siblings are the layout's to cover, as `AppShell` does for a side panel.
|
|
@@ -108,8 +116,16 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
108
116
|
const focused = getFocusedElement();
|
|
109
117
|
if (focused && covered.contains(focused))
|
|
110
118
|
panel.focus({ preventScroll: true });
|
|
111
|
-
|
|
119
|
+
const lift = coverElement(covered, panel);
|
|
120
|
+
liftCoverRef.current = lift;
|
|
121
|
+
return () => {
|
|
122
|
+
lift();
|
|
123
|
+
liftCoverRef.current = null;
|
|
124
|
+
};
|
|
112
125
|
}, [panelRef, coveredRef, isCovering]);
|
|
126
|
+
// For a close that another panel caused: that panel is mounting under this cover in the same pass, and its focus call would
|
|
127
|
+
// be refused until the cover lifts at the next commit. Lifting is idempotent, so the effect's own cleanup stays harmless.
|
|
128
|
+
const liftCover = useCallback(() => liftCoverRef.current?.(), []);
|
|
113
129
|
// Swapping content unmounts whatever held focus, which drops it on the page. The region takes it, so Tab stays inside and
|
|
114
130
|
// closing can still hand it back. Content that focuses itself on mount (an `autoFocus` input) has done so by now and keeps it.
|
|
115
131
|
const previousContentKey = useRef(contentKey);
|
|
@@ -131,7 +147,7 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocus
|
|
|
131
147
|
const setOpener = useCallback((element) => {
|
|
132
148
|
openerRef.current = element;
|
|
133
149
|
}, []);
|
|
134
|
-
return { onFocusCapture, setOpener };
|
|
150
|
+
return { onFocusCapture, setOpener, liftCover };
|
|
135
151
|
};
|
|
136
152
|
|
|
137
153
|
export { usePanelFocus };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelFocus.js","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAOA;AACA,MAAM,sBAAsB,GAAG,CAAC,KAAkB,KAAwB;AACxE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,sBAAsB;AAE5C,IAAA,OAAO,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;AACjF,CAAC;AAED;AACA,MAAM,YAAY,GAAG,CAAC,OAAmC,KACvD,OAAO,YAAY,WAAW,
|
|
1
|
+
{"version":3,"file":"usePanelFocus.js","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
// Its own file so library components can read it without a public export; one module, so one context for every reader.
|
|
6
|
+
const ThemeContext = React.createContext(undefined);
|
|
7
|
+
/**
|
|
8
|
+
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws, so a
|
|
9
|
+
* component such as `SlideoutMenu` can adapt to the app's root without requiring the provider.
|
|
10
|
+
*
|
|
11
|
+
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
12
|
+
*/
|
|
13
|
+
const useThemeRoot = () => React.useContext(ThemeContext)?.themeRoot ?? null;
|
|
14
|
+
|
|
15
|
+
exports.ThemeContext = ThemeContext;
|
|
16
|
+
exports.useThemeRoot = useThemeRoot;
|
|
17
|
+
//# sourceMappingURL=Theme.context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Theme.context.cjs","sources":["../../../src/providers/ThemeProvider/Theme.context.ts"],"sourcesContent":[null],"names":["createContext","useContext"],"mappings":";;;;AAaA;MACa,YAAY,GAAGA,mBAAa,CAA+B,SAAS;AAEjF;;;;;AAKG;AACI,MAAM,YAAY,GAAG,MAA0BC,gBAAU,CAAC,YAAY,CAAC,EAAE,SAAS,IAAI;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type Theme = 'light' | 'dark' | 'system';
|
|
2
|
+
export interface ThemeContextType {
|
|
3
|
+
theme: Theme;
|
|
4
|
+
setTheme: (theme: Theme) => void;
|
|
5
|
+
themeRoot: HTMLElement | null;
|
|
6
|
+
resolvedMode: 'light' | 'dark';
|
|
7
|
+
}
|
|
8
|
+
export declare const ThemeContext: import("react").Context<ThemeContextType | undefined>;
|
|
9
|
+
/**
|
|
10
|
+
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws, so a
|
|
11
|
+
* component such as `SlideoutMenu` can adapt to the app's root without requiring the provider.
|
|
12
|
+
*
|
|
13
|
+
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
14
|
+
*/
|
|
15
|
+
export declare const useThemeRoot: () => HTMLElement | null;
|
|
16
|
+
//# sourceMappingURL=Theme.context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Theme.context.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/Theme.context.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAGD,eAAO,MAAM,YAAY,uDAAyD,CAAC;AAEnF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAAO,WAAW,GAAG,IAAmD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
|
|
3
|
+
// Its own file so library components can read it without a public export; one module, so one context for every reader.
|
|
4
|
+
const ThemeContext = createContext(undefined);
|
|
5
|
+
/**
|
|
6
|
+
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws, so a
|
|
7
|
+
* component such as `SlideoutMenu` can adapt to the app's root without requiring the provider.
|
|
8
|
+
*
|
|
9
|
+
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
10
|
+
*/
|
|
11
|
+
const useThemeRoot = () => useContext(ThemeContext)?.themeRoot ?? null;
|
|
12
|
+
|
|
13
|
+
export { ThemeContext, useThemeRoot };
|
|
14
|
+
//# sourceMappingURL=Theme.context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Theme.context.js","sources":["../../../src/providers/ThemeProvider/Theme.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAaA;MACa,YAAY,GAAG,aAAa,CAA+B,SAAS;AAEjF;;;;;AAKG;AACI,MAAM,YAAY,GAAG,MAA0B,UAAU,CAAC,YAAY,CAAC,EAAE,SAAS,IAAI;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
|
+
var Theme_context = require('./Theme.context.cjs');
|
|
5
6
|
|
|
6
|
-
const ThemeContext = React.createContext(undefined);
|
|
7
7
|
/**
|
|
8
8
|
* Reads the current theme and its setter from the nearest `ThemeProvider`.
|
|
9
9
|
*
|
|
@@ -11,19 +11,12 @@ const ThemeContext = React.createContext(undefined);
|
|
|
11
11
|
* element carrying `data-theme`.
|
|
12
12
|
*/
|
|
13
13
|
const useTheme = () => {
|
|
14
|
-
const context = React.useContext(ThemeContext);
|
|
14
|
+
const context = React.useContext(Theme_context.ThemeContext);
|
|
15
15
|
if (context === undefined) {
|
|
16
16
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
17
17
|
}
|
|
18
18
|
return context;
|
|
19
19
|
};
|
|
20
|
-
/**
|
|
21
|
-
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws,
|
|
22
|
-
* so a component can adapt to the app's root without requiring the provider.
|
|
23
|
-
*
|
|
24
|
-
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
25
|
-
*/
|
|
26
|
-
const useThemeRoot = () => React.useContext(ThemeContext)?.themeRoot ?? null;
|
|
27
20
|
// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
|
|
28
21
|
// story) only loses the attribute when the last one unmounts.
|
|
29
22
|
let documentThemeWriters = 0;
|
|
@@ -87,10 +80,9 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeMod
|
|
|
87
80
|
return () => mediaQuery.removeEventListener('change', handleChange);
|
|
88
81
|
}, []);
|
|
89
82
|
const contextValue = React.useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
|
|
90
|
-
return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
|
|
83
|
+
return (jsxRuntime.jsx(Theme_context.ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
|
|
91
84
|
};
|
|
92
85
|
|
|
93
86
|
exports.ThemeProvider = ThemeProvider;
|
|
94
87
|
exports.useTheme = useTheme;
|
|
95
|
-
exports.useThemeRoot = useThemeRoot;
|
|
96
88
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["useContext","ThemeContext","useState","useEffect","useMemo","_jsx"],"mappings":"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"}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
type Theme
|
|
3
|
-
interface ThemeContextType {
|
|
4
|
-
theme: Theme;
|
|
5
|
-
setTheme: (theme: Theme) => void;
|
|
6
|
-
themeRoot: HTMLElement | null;
|
|
7
|
-
resolvedMode: 'light' | 'dark';
|
|
8
|
-
}
|
|
2
|
+
import { type Theme, type ThemeContextType } from './Theme.context';
|
|
9
3
|
/**
|
|
10
4
|
* Reads the current theme and its setter from the nearest `ThemeProvider`.
|
|
11
5
|
*
|
|
@@ -13,13 +7,6 @@ interface ThemeContextType {
|
|
|
13
7
|
* element carrying `data-theme`.
|
|
14
8
|
*/
|
|
15
9
|
export declare const useTheme: () => ThemeContextType;
|
|
16
|
-
/**
|
|
17
|
-
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws,
|
|
18
|
-
* so a component can adapt to the app's root without requiring the provider.
|
|
19
|
-
*
|
|
20
|
-
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
21
|
-
*/
|
|
22
|
-
export declare const useThemeRoot: () => HTMLElement | null;
|
|
23
10
|
interface ThemeProviderProps {
|
|
24
11
|
children: ReactNode;
|
|
25
12
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,KAAK,EAAgB,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAElF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAWF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,4HAO3B,kBAAkB,gCA0DpB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { useState, useEffect, useMemo, useContext } from 'react';
|
|
3
|
+
import { ThemeContext } from './Theme.context.js';
|
|
3
4
|
|
|
4
|
-
const ThemeContext = createContext(undefined);
|
|
5
5
|
/**
|
|
6
6
|
* Reads the current theme and its setter from the nearest `ThemeProvider`.
|
|
7
7
|
*
|
|
@@ -15,13 +15,6 @@ const useTheme = () => {
|
|
|
15
15
|
}
|
|
16
16
|
return context;
|
|
17
17
|
};
|
|
18
|
-
/**
|
|
19
|
-
* The element the app's theme cascades from: in a micro-frontend, its whole mount. Unlike `useTheme` it never throws,
|
|
20
|
-
* so a component can adapt to the app's root without requiring the provider.
|
|
21
|
-
*
|
|
22
|
-
* @returns The themed root, or `null` outside a `ThemeProvider` or before it has mounted.
|
|
23
|
-
*/
|
|
24
|
-
const useThemeRoot = () => useContext(ThemeContext)?.themeRoot ?? null;
|
|
25
18
|
// Providers currently mirroring onto <html>, so a page with several (a Storybook docs page mounts one per
|
|
26
19
|
// story) only loses the attribute when the last one unmounts.
|
|
27
20
|
let documentThemeWriters = 0;
|
|
@@ -88,5 +81,5 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey, themeMod
|
|
|
88
81
|
return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, "data-mfe-scope": scopeId, style: { display: 'contents' }, children: children }) }));
|
|
89
82
|
};
|
|
90
83
|
|
|
91
|
-
export { ThemeProvider, useTheme
|
|
84
|
+
export { ThemeProvider, useTheme };
|
|
92
85
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|