@salt-ds/lab 1.0.0-alpha.87 → 1.0.0-alpha.89
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 +44 -0
- package/css/salt-lab.css +64 -45
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
- package/dist-cjs/list-deprecated/ListStateContext.js +1 -1
- package/dist-cjs/list-deprecated/ListStateContext.js.map +1 -1
- package/dist-cjs/tabs-next/TabBar.css.js +1 -1
- package/dist-cjs/tabs-next/TabBar.js +1 -1
- package/dist-cjs/tabs-next/TabBar.js.map +1 -1
- package/dist-cjs/tabs-next/TabListLayoutContext.js +13 -0
- package/dist-cjs/tabs-next/TabListLayoutContext.js.map +1 -0
- package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +179 -33
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNext.js +111 -7
- package/dist-cjs/tabs-next/TabNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextAction.js +25 -2
- package/dist-cjs/tabs-next/TabNextAction.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextPanel.js +31 -16
- package/dist-cjs/tabs-next/TabNextPanel.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextTrigger.js +110 -9
- package/dist-cjs/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.js +168 -64
- package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-cjs/tabs-next/TabSlot.js +30 -0
- package/dist-cjs/tabs-next/TabSlot.js.map +1 -0
- package/dist-cjs/tabs-next/TabSlotRegistryContext.js +16 -0
- package/dist-cjs/tabs-next/TabSlotRegistryContext.js.map +1 -0
- package/dist-cjs/tabs-next/TabsNext.css.js +6 -0
- package/dist-cjs/tabs-next/TabsNext.css.js.map +1 -0
- package/dist-cjs/tabs-next/TabsNext.js +113 -47
- package/dist-cjs/tabs-next/TabsNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabsNextContext.js +17 -3
- package/dist-cjs/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/domUtils.js +13 -0
- package/dist-cjs/tabs-next/domUtils.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/overflowMath.js +86 -0
- package/dist-cjs/tabs-next/hooks/overflowMath.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useCollection.js +147 -41
- package/dist-cjs/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js +64 -0
- package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useOverflow.js +240 -156
- package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js +99 -0
- package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js +60 -0
- package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js +92 -0
- package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js +200 -0
- package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useTabListRecovery.js +76 -0
- package/dist-cjs/tabs-next/hooks/useTabListRecovery.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js +165 -0
- package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js +80 -0
- package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-cjs/tabs-next/widthMeasurement.js +42 -0
- package/dist-cjs/tabs-next/widthMeasurement.js.map +1 -0
- package/dist-cjs/tree/Tree.css.js +1 -1
- package/dist-cjs/tree/TreeNode.css.js +1 -1
- package/dist-cjs/tree/TreeNode.js +1 -1
- package/dist-cjs/tree/TreeNode.js.map +1 -1
- package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +1 -1
- package/dist-cjs/tree/TreeNodeTrigger.css.js +1 -1
- package/dist-cjs/tree/TreeNodeTrigger.js +2 -2
- package/dist-cjs/tree/TreeNodeTrigger.js.map +1 -1
- package/dist-cjs/utils/useEventCallback.js +5 -5
- package/dist-cjs/utils/useEventCallback.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/contact-details/ContactDetails.css.js +1 -1
- package/dist-es/list-deprecated/ListStateContext.js +1 -1
- package/dist-es/list-deprecated/ListStateContext.js.map +1 -1
- package/dist-es/tabs-next/TabBar.css.js +1 -1
- package/dist-es/tabs-next/TabBar.js +1 -1
- package/dist-es/tabs-next/TabBar.js.map +1 -1
- package/dist-es/tabs-next/TabListLayoutContext.js +10 -0
- package/dist-es/tabs-next/TabListLayoutContext.js.map +1 -0
- package/dist-es/tabs-next/TabListNext.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +182 -36
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/tabs-next/TabNext.js +113 -9
- package/dist-es/tabs-next/TabNext.js.map +1 -1
- package/dist-es/tabs-next/TabNextAction.js +25 -2
- package/dist-es/tabs-next/TabNextAction.js.map +1 -1
- package/dist-es/tabs-next/TabNextPanel.js +31 -16
- package/dist-es/tabs-next/TabNextPanel.js.map +1 -1
- package/dist-es/tabs-next/TabNextTrigger.js +110 -9
- package/dist-es/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-es/tabs-next/TabOverflowList.js +172 -68
- package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-es/tabs-next/TabSlot.js +28 -0
- package/dist-es/tabs-next/TabSlot.js.map +1 -0
- package/dist-es/tabs-next/TabSlotRegistryContext.js +13 -0
- package/dist-es/tabs-next/TabSlotRegistryContext.js.map +1 -0
- package/dist-es/tabs-next/TabsNext.css.js +4 -0
- package/dist-es/tabs-next/TabsNext.css.js.map +1 -0
- package/dist-es/tabs-next/TabsNext.js +114 -48
- package/dist-es/tabs-next/TabsNext.js.map +1 -1
- package/dist-es/tabs-next/TabsNextContext.js +17 -3
- package/dist-es/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-es/tabs-next/domUtils.js +11 -0
- package/dist-es/tabs-next/domUtils.js.map +1 -0
- package/dist-es/tabs-next/hooks/overflowMath.js +82 -0
- package/dist-es/tabs-next/hooks/overflowMath.js.map +1 -0
- package/dist-es/tabs-next/hooks/useCollection.js +148 -42
- package/dist-es/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-es/tabs-next/hooks/useFocusWithRetry.js +62 -0
- package/dist-es/tabs-next/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-es/tabs-next/hooks/useOverflow.js +242 -158
- package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-es/tabs-next/hooks/useOverflowLayoutState.js +97 -0
- package/dist-es/tabs-next/hooks/useOverflowLayoutState.js.map +1 -0
- package/dist-es/tabs-next/hooks/useOverflowSelectionState.js +58 -0
- package/dist-es/tabs-next/hooks/useOverflowSelectionState.js.map +1 -0
- package/dist-es/tabs-next/hooks/useRenderedTabWidth.js +90 -0
- package/dist-es/tabs-next/hooks/useRenderedTabWidth.js.map +1 -0
- package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js +198 -0
- package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js.map +1 -0
- package/dist-es/tabs-next/hooks/useTabListRecovery.js +74 -0
- package/dist-es/tabs-next/hooks/useTabListRecovery.js.map +1 -0
- package/dist-es/tabs-next/hooks/useTabRemovalHandler.js +163 -0
- package/dist-es/tabs-next/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-es/tabs-next/hooks/useTabSelectionFocus.js +78 -0
- package/dist-es/tabs-next/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-es/tabs-next/widthMeasurement.js +36 -0
- package/dist-es/tabs-next/widthMeasurement.js.map +1 -0
- package/dist-es/tree/Tree.css.js +1 -1
- package/dist-es/tree/TreeNode.css.js +1 -1
- package/dist-es/tree/TreeNode.js +1 -1
- package/dist-es/tree/TreeNode.js.map +1 -1
- package/dist-es/tree/TreeNodeExpansionIcon.css.js +1 -1
- package/dist-es/tree/TreeNodeTrigger.css.js +1 -1
- package/dist-es/tree/TreeNodeTrigger.js +2 -2
- package/dist-es/tree/TreeNodeTrigger.js.map +1 -1
- package/dist-es/utils/useEventCallback.js +5 -5
- package/dist-es/utils/useEventCallback.js.map +1 -1
- package/dist-types/cascading-menu/internal/useMenuTriggerHandlers.d.ts +1 -1
- package/dist-types/list-deprecated/ListStateContext.d.ts +7 -2
- package/dist-types/tabs-next/TabListLayoutContext.d.ts +9 -0
- package/dist-types/tabs-next/TabNext.d.ts +1 -1
- package/dist-types/tabs-next/TabNextPanel.d.ts +2 -1
- package/dist-types/tabs-next/TabOverflowList.d.ts +3 -4
- package/dist-types/tabs-next/TabSlot.d.ts +6 -0
- package/dist-types/tabs-next/TabSlotRegistryContext.d.ts +5 -0
- package/dist-types/tabs-next/TabsNext.d.ts +2 -1
- package/dist-types/tabs-next/TabsNextContext.d.ts +26 -4
- package/dist-types/tabs-next/domUtils.d.ts +1 -0
- package/dist-types/tabs-next/hooks/overflowMath.d.ts +18 -0
- package/dist-types/tabs-next/hooks/useCollection.d.ts +15 -3
- package/dist-types/tabs-next/hooks/useFocusWithRetry.d.ts +9 -0
- package/dist-types/tabs-next/hooks/useOverflow.d.ts +5 -5
- package/dist-types/tabs-next/hooks/useOverflowLayoutState.d.ts +13 -0
- package/dist-types/tabs-next/hooks/useOverflowSelectionState.d.ts +13 -0
- package/dist-types/tabs-next/hooks/useRenderedTabWidth.d.ts +12 -0
- package/dist-types/tabs-next/hooks/useRenderedTabsRegistry.d.ts +12 -0
- package/dist-types/tabs-next/hooks/useTabListRecovery.d.ts +12 -0
- package/dist-types/tabs-next/hooks/useTabRemovalHandler.d.ts +32 -0
- package/dist-types/tabs-next/hooks/useTabSelectionFocus.d.ts +15 -0
- package/dist-types/tabs-next/widthMeasurement.d.ts +5 -0
- package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
- package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
- package/dist-types/utils/useEventCallback.d.ts +1 -1
- package/package.json +3 -3
- package/dist-cjs/tabs-next/hooks/useFocusOutside.js +0 -25
- package/dist-cjs/tabs-next/hooks/useFocusOutside.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js +0 -93
- package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map +0 -1
- package/dist-es/tabs-next/hooks/useFocusOutside.js +0 -23
- package/dist-es/tabs-next/hooks/useFocusOutside.js.map +0 -1
- package/dist-es/tabs-next/hooks/useRestoreActiveTab.js +0 -91
- package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map +0 -1
- package/dist-types/tabs-next/hooks/useFocusOutside.d.ts +0 -2
- package/dist-types/tabs-next/hooks/useRestoreActiveTab.d.ts +0 -10
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type MutableRefObject, type RefObject } from "react";
|
|
2
|
+
interface UseTabListRecoveryArgs {
|
|
3
|
+
removalVersion: number;
|
|
4
|
+
targetWindow: Window | null | undefined;
|
|
5
|
+
tabstripRef: RefObject<HTMLDivElement | null>;
|
|
6
|
+
overflowListRef: RefObject<HTMLDivElement | null>;
|
|
7
|
+
handleTabRemoval: () => void;
|
|
8
|
+
pendingRemovalRecoveryRef: MutableRefObject<boolean>;
|
|
9
|
+
pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;
|
|
10
|
+
}
|
|
11
|
+
export declare function useTabListRecovery({ removalVersion, targetWindow, tabstripRef, overflowListRef, handleTabRemoval, pendingRemovalRecoveryRef, pendingRemovalRecoveryRetriesRef, }: UseTabListRecoveryArgs): void;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type MutableRefObject, type RefObject } from "react";
|
|
2
|
+
import type { Item, TabsNextContextValue } from "../TabsNextContext";
|
|
3
|
+
interface RemovedItem {
|
|
4
|
+
id: string;
|
|
5
|
+
value: string;
|
|
6
|
+
staleIndex?: number;
|
|
7
|
+
}
|
|
8
|
+
interface UseTabRemovalHandlerArgs {
|
|
9
|
+
activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
|
|
10
|
+
focusElementWithRetry: (getElement: () => HTMLElement | null | undefined) => void;
|
|
11
|
+
getFirst: TabsNextContextValue["getFirst"];
|
|
12
|
+
getIndex: TabsNextContextValue["getIndex"];
|
|
13
|
+
getLast: TabsNextContextValue["getLast"];
|
|
14
|
+
getRemovedItems: () => Map<string, RemovedItem>;
|
|
15
|
+
getRenderedTab: TabsNextContextValue["getRenderedTab"];
|
|
16
|
+
getSelectedTabElement: () => HTMLElement | null | undefined;
|
|
17
|
+
item: TabsNextContextValue["item"];
|
|
18
|
+
itemAt: TabsNextContextValue["itemAt"];
|
|
19
|
+
maxRetryAttempts: number;
|
|
20
|
+
menuOpen: boolean;
|
|
21
|
+
overflowButtonRef: RefObject<HTMLButtonElement | null>;
|
|
22
|
+
overflowListRef: RefObject<HTMLDivElement | null>;
|
|
23
|
+
pendingRemovalRecoveryRef: MutableRefObject<boolean>;
|
|
24
|
+
pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;
|
|
25
|
+
removalRecoveryRafRef: MutableRefObject<number | null>;
|
|
26
|
+
selected?: string;
|
|
27
|
+
setSelected: TabsNextContextValue["setSelected"];
|
|
28
|
+
tabstripRef: RefObject<HTMLDivElement | null>;
|
|
29
|
+
targetWindow: Window | null | undefined;
|
|
30
|
+
}
|
|
31
|
+
export declare function useTabRemovalHandler({ activeTab, focusElementWithRetry, getFirst, getIndex, getLast, getRemovedItems, getRenderedTab, getSelectedTabElement, item, itemAt, maxRetryAttempts, menuOpen, overflowButtonRef, overflowListRef, pendingRemovalRecoveryRef, pendingRemovalRecoveryRetriesRef, removalRecoveryRafRef, selected, setSelected, tabstripRef, targetWindow, }: UseTabRemovalHandlerArgs): () => void;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { MutableRefObject } from "react";
|
|
2
|
+
import type { TabsNextContextValue } from "../TabsNextContext";
|
|
3
|
+
interface UseTabSelectionFocusArgs {
|
|
4
|
+
announce: (message: string, timeout?: number) => void;
|
|
5
|
+
focusElementWithRetry: (getElement: () => HTMLElement | null | undefined) => void;
|
|
6
|
+
getRenderedTab: TabsNextContextValue["getRenderedTab"];
|
|
7
|
+
getSelectedTabElement: () => HTMLElement | null | undefined;
|
|
8
|
+
menuOpen: boolean;
|
|
9
|
+
resolvedOverflowActiveValue: string | null;
|
|
10
|
+
selected?: string;
|
|
11
|
+
selectionFromOverflowValueRef: MutableRefObject<string | null>;
|
|
12
|
+
targetWindow: Window | null | undefined;
|
|
13
|
+
}
|
|
14
|
+
export declare function useTabSelectionFocus({ announce, focusElementWithRetry, getRenderedTab, getSelectedTabElement, menuOpen, resolvedOverflowActiveValue, selected, selectionFromOverflowValueRef, targetWindow, }: UseTabSelectionFocusArgs): void;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function getMeasuredWidth(element: HTMLElement | null | undefined): number;
|
|
2
|
+
export declare function getIntrinsicMeasuredWidth(element: HTMLElement | null | undefined): number;
|
|
3
|
+
export declare function getGapValue(styles: CSSStyleDeclaration): number;
|
|
4
|
+
export declare function seedWidthMap(elements: HTMLElement[]): Map<HTMLElement, number>;
|
|
5
|
+
export declare function updateWidthMap(widths: Map<HTMLElement, number>, element: HTMLElement, nextWidth: number, epsilon?: number): boolean;
|
|
@@ -30,4 +30,4 @@ export type InputPillProps = PillProps & {
|
|
|
30
30
|
*/
|
|
31
31
|
onDelete?: (index: number) => void;
|
|
32
32
|
};
|
|
33
|
-
export declare const InputPill: import("react").
|
|
33
|
+
export declare const InputPill: import("react").MemoExoticComponent<(props: InputPillProps) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -26,4 +26,4 @@ export type InputPillProps = PillProps & {
|
|
|
26
26
|
*/
|
|
27
27
|
onClose?: (event: SyntheticEvent, index: number) => void;
|
|
28
28
|
};
|
|
29
|
-
export declare const InputPill: import("react").
|
|
29
|
+
export declare const InputPill: import("react").MemoExoticComponent<(props: InputPillProps) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* https://github.com/facebook/react/issues/14099#issuecomment-440013892
|
|
3
3
|
*/
|
|
4
|
-
export declare function useEventCallback<
|
|
4
|
+
export declare function useEventCallback<const T extends (...args: any[]) => void>(fn: T): T;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.89",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@floating-ui/react": "^0.26.28",
|
|
24
|
-
"@salt-ds/core": "^1.
|
|
24
|
+
"@salt-ds/core": "^1.59.1",
|
|
25
25
|
"@salt-ds/date-adapters": "0.1.0-alpha.6",
|
|
26
|
-
"@salt-ds/icons": "^1.
|
|
26
|
+
"@salt-ds/icons": "^1.18.0",
|
|
27
27
|
"@salt-ds/styles": "0.3.0",
|
|
28
28
|
"@salt-ds/window": "0.1.1",
|
|
29
29
|
"@types/react-window": "^1.8.2",
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var window = require('@salt-ds/window');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
|
|
7
|
-
const targetWindow = window.useWindow();
|
|
8
|
-
react.useEffect(() => {
|
|
9
|
-
if (!enabled) return;
|
|
10
|
-
const handleFocus = (event) => {
|
|
11
|
-
var _a, _b, _c;
|
|
12
|
-
const ignoreElement = (_b = (_a = elementRef.current) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.querySelector(ignore) ;
|
|
13
|
-
if (event.target instanceof HTMLElement && !((_c = elementRef.current) == null ? void 0 : _c.contains(event.target)) && !(ignoreElement == null ? void 0 : ignoreElement.contains(event.target))) {
|
|
14
|
-
onFocusOutside();
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
targetWindow == null ? void 0 : targetWindow.addEventListener("focusin", handleFocus);
|
|
18
|
-
return () => {
|
|
19
|
-
targetWindow == null ? void 0 : targetWindow.removeEventListener("focusin", handleFocus);
|
|
20
|
-
};
|
|
21
|
-
}, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
exports.useFocusOutside = useFocusOutside;
|
|
25
|
-
//# sourceMappingURL=useFocusOutside.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusOutside.js","sources":["../src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n elementRef: RefObject<HTMLElement>,\n onFocusOutside: () => void,\n enabled: boolean,\n ignore?: string,\n) {\n const targetWindow = useWindow();\n\n useEffect(() => {\n if (!enabled) return;\n\n const handleFocus = (event: FocusEvent) => {\n const ignoreElement = ignore\n ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n : undefined;\n\n // If focus is outside the tabstrip (including the list) then close the list.\n if (\n event.target instanceof HTMLElement &&\n !elementRef.current?.contains(event.target) &&\n !ignoreElement?.contains(event.target)\n ) {\n onFocusOutside();\n }\n };\n\n targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n return () => {\n targetWindow?.removeEventListener(\"focusin\", handleFocus);\n };\n }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":["useWindow","useEffect"],"mappings":";;;;;AAGO,SAAS,eAAA,CACd,UAAA,EACA,cAAA,EACA,OAAA,EACA,MAAA,EACA;AACA,EAAA,MAAM,eAAeA,gBAAA,EAAU;AAE/B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsB;AAd/C,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAeM,MAAA,MAAM,aAAA,IACF,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,OAAA,KAAX,mBAAoB,aAAA,KAApB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmC,cAA2B,MAAA,CAAA,CAC9D;AAGJ,MAAA,IACE,KAAA,CAAM,MAAA,YAAkB,WAAA,IACxB,EAAA,CAAC,gBAAW,OAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,QAAA,CAAS,KAAA,CAAM,MAAA,CAAA,CAAA,IACpC,EAAC,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,CAAS,MAAM,MAAA,CAAA,CAAA,EAC/B;AACA,QAAA,cAAA,EAAe;AAAA,MACjB;AAAA,IACF,CAAA;AAEA,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,SAAA,EAAW,WAAA,CAAA;AAE1C,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,SAAA,EAAW,WAAA,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,gBAAgB,UAAA,EAAY,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var core = require('@salt-ds/core');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
function useRestoreActiveTab({
|
|
7
|
-
container,
|
|
8
|
-
tabs,
|
|
9
|
-
realSelectedIndex,
|
|
10
|
-
removedActiveTabRef
|
|
11
|
-
}) {
|
|
12
|
-
const tabsRef = react.useRef(tabs);
|
|
13
|
-
const previousTabsRef = react.useRef(tabs);
|
|
14
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
15
|
-
tabsRef.current = tabs;
|
|
16
|
-
return () => {
|
|
17
|
-
previousTabsRef.current = tabs;
|
|
18
|
-
};
|
|
19
|
-
}, [tabs]);
|
|
20
|
-
react.useEffect(() => {
|
|
21
|
-
if (!container.current) return;
|
|
22
|
-
const win = core.ownerWindow(container.current);
|
|
23
|
-
const mutationObserver = new win.MutationObserver((mutations) => {
|
|
24
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
25
|
-
for (const mutation of mutations) {
|
|
26
|
-
const removedItem = mutation.removedNodes[0] instanceof HTMLElement ? mutation.removedNodes[0] : null;
|
|
27
|
-
const removedItemWasTab = removedActiveTabRef.current && ((_a = removedItem == null ? void 0 : removedItem.dataset) == null ? void 0 : _a.overflowitem);
|
|
28
|
-
const activeTabWasRemoved = !tabsRef.current.find(
|
|
29
|
-
({ value }) => value === removedActiveTabRef.current
|
|
30
|
-
);
|
|
31
|
-
if (removedItemWasTab && activeTabWasRemoved) {
|
|
32
|
-
const removedTab = removedItem == null ? void 0 : removedItem.querySelector('[role="tab"]');
|
|
33
|
-
let nextTab = null;
|
|
34
|
-
if ((removedTab == null ? void 0 : removedTab.ariaSelected) === "true" && realSelectedIndex.current != null && realSelectedIndex.current >= 0) {
|
|
35
|
-
nextTab = (_b = tabsRef.current[Math.min(realSelectedIndex.current, tabsRef.current.length - 1)]) == null ? void 0 : _b.element;
|
|
36
|
-
}
|
|
37
|
-
if (!nextTab) {
|
|
38
|
-
const previousTab = mutation.previousSibling instanceof HTMLElement ? mutation.previousSibling.querySelector(
|
|
39
|
-
'[role="tab"]'
|
|
40
|
-
) : null;
|
|
41
|
-
if (!previousTab) {
|
|
42
|
-
nextTab = mutation.nextSibling instanceof HTMLElement ? (_c = mutation.nextSibling) == null ? void 0 : _c.querySelector(
|
|
43
|
-
'[role="tab"]'
|
|
44
|
-
) : null;
|
|
45
|
-
} else {
|
|
46
|
-
const nextTabIndex = previousTab ? tabsRef.current.findIndex(
|
|
47
|
-
({ element }) => element === previousTab
|
|
48
|
-
) + 1 : -1;
|
|
49
|
-
nextTab = (_d = tabsRef.current[Math.min(nextTabIndex, tabsRef.current.length - 1)]) == null ? void 0 : _d.element;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
if (!((_e = container.current) == null ? void 0 : _e.querySelector(
|
|
53
|
-
'[role="tab"][aria-selected="true"]'
|
|
54
|
-
))) {
|
|
55
|
-
nextTab == null ? void 0 : nextTab.click();
|
|
56
|
-
}
|
|
57
|
-
if (!((_f = container.current) == null ? void 0 : _f.contains(win.document.activeElement))) {
|
|
58
|
-
if (nextTab == null ? void 0 : nextTab.isConnected) {
|
|
59
|
-
nextTab == null ? void 0 : nextTab.focus({ preventScroll: true });
|
|
60
|
-
} else {
|
|
61
|
-
(_h = (_g = container.current) == null ? void 0 : _g.querySelector(
|
|
62
|
-
'[role="tab"][aria-selected="true"]'
|
|
63
|
-
)) == null ? void 0 : _h.focus({ preventScroll: true });
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
removedActiveTabRef.current = void 0;
|
|
67
|
-
}
|
|
68
|
-
if (removedActiveTabRef.current) {
|
|
69
|
-
if (removedItemWasTab) {
|
|
70
|
-
const tabElement = (_i = tabsRef.current.find(
|
|
71
|
-
({ value }) => value === removedActiveTabRef.current
|
|
72
|
-
)) == null ? void 0 : _i.element;
|
|
73
|
-
if (win.document.activeElement === win.document.body) {
|
|
74
|
-
tabElement == null ? void 0 : tabElement.focus();
|
|
75
|
-
}
|
|
76
|
-
} else if (activeTabWasRemoved && (removedItem == null ? void 0 : removedItem.dataset.overflow)) {
|
|
77
|
-
(_k = (_j = tabsRef.current[tabsRef.current.length - 1]) == null ? void 0 : _j.element) == null ? void 0 : _k.focus();
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
mutationObserver.observe(container.current, {
|
|
83
|
-
childList: true,
|
|
84
|
-
subtree: true
|
|
85
|
-
});
|
|
86
|
-
return () => {
|
|
87
|
-
mutationObserver.disconnect();
|
|
88
|
-
};
|
|
89
|
-
}, [container, realSelectedIndex, removedActiveTabRef]);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
exports.useRestoreActiveTab = useRestoreActiveTab;
|
|
93
|
-
//# sourceMappingURL=useRestoreActiveTab.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRestoreActiveTab.js","sources":["../src/tabs-next/hooks/useRestoreActiveTab.ts"],"sourcesContent":["import { ownerWindow, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type MutableRefObject,\n type RefObject,\n useEffect,\n useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseHandleRemovalProps {\n container: RefObject<HTMLElement>;\n tabs: Item[];\n realSelectedIndex: RefObject<number>;\n removedActiveTabRef: MutableRefObject<string | undefined>;\n}\n\nexport function useRestoreActiveTab({\n container,\n tabs,\n realSelectedIndex,\n removedActiveTabRef,\n}: UseHandleRemovalProps) {\n const tabsRef = useRef(tabs);\n const previousTabsRef = useRef(tabs);\n\n useIsomorphicLayoutEffect(() => {\n tabsRef.current = tabs;\n\n return () => {\n previousTabsRef.current = tabs;\n };\n }, [tabs]);\n\n useEffect(() => {\n if (!container.current) return;\n\n const win = ownerWindow(container.current);\n\n const mutationObserver = new win.MutationObserver((mutations) => {\n for (const mutation of mutations) {\n const removedItem =\n mutation.removedNodes[0] instanceof HTMLElement\n ? mutation.removedNodes[0]\n : null;\n\n const removedItemWasTab =\n removedActiveTabRef.current && removedItem?.dataset?.overflowitem;\n\n const activeTabWasRemoved = !tabsRef.current.find(\n ({ value }) => value === removedActiveTabRef.current,\n );\n\n if (removedItemWasTab && activeTabWasRemoved) {\n const removedTab =\n removedItem?.querySelector<HTMLElement>('[role=\"tab\"]');\n\n let nextTab: HTMLElement | null | undefined = null;\n\n if (\n removedTab?.ariaSelected === \"true\" &&\n realSelectedIndex.current != null &&\n realSelectedIndex.current >= 0\n ) {\n nextTab =\n tabsRef.current[\n Math.min(realSelectedIndex.current, tabsRef.current.length - 1)\n ]?.element;\n }\n\n if (!nextTab) {\n const previousTab =\n mutation.previousSibling instanceof HTMLElement\n ? mutation.previousSibling.querySelector<HTMLElement>(\n '[role=\"tab\"]',\n )\n : null;\n\n if (!previousTab) {\n nextTab =\n mutation.nextSibling instanceof HTMLElement\n ? mutation.nextSibling?.querySelector<HTMLElement>(\n '[role=\"tab\"]',\n )\n : null;\n } else {\n const nextTabIndex = previousTab\n ? tabsRef.current.findIndex(\n ({ element }) => element === previousTab,\n ) + 1\n : -1;\n\n nextTab =\n tabsRef.current[\n Math.min(nextTabIndex, tabsRef.current.length - 1)\n ]?.element;\n }\n }\n\n if (\n !container.current?.querySelector<HTMLElement>(\n '[role=\"tab\"][aria-selected=\"true\"]',\n )\n ) {\n nextTab?.click();\n }\n\n if (!container.current?.contains(win.document.activeElement)) {\n if (nextTab?.isConnected) {\n nextTab?.focus({ preventScroll: true });\n } else {\n container.current\n ?.querySelector<HTMLElement>(\n '[role=\"tab\"][aria-selected=\"true\"]',\n )\n ?.focus({ preventScroll: true });\n }\n }\n\n removedActiveTabRef.current = undefined;\n }\n\n // Focus the tab if it was moved from the overflow menu into the visible tabs\n if (removedActiveTabRef.current) {\n if (removedItemWasTab) {\n const tabElement = tabsRef.current.find(\n ({ value }) => value === removedActiveTabRef.current,\n )?.element;\n\n if (win.document.activeElement === win.document.body) {\n tabElement?.focus();\n }\n // If the active tab was removed and the overflow menu has been removed focus the last visible tab.\n } else if (activeTabWasRemoved && removedItem?.dataset.overflow) {\n tabsRef.current[tabsRef.current.length - 1]?.element?.focus();\n }\n }\n }\n });\n\n mutationObserver.observe(container.current, {\n childList: true,\n subtree: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [container, realSelectedIndex, removedActiveTabRef]);\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useEffect","ownerWindow"],"mappings":"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"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useWindow } from '@salt-ds/window';
|
|
2
|
-
import { useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
|
|
5
|
-
const targetWindow = useWindow();
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
if (!enabled) return;
|
|
8
|
-
const handleFocus = (event) => {
|
|
9
|
-
var _a, _b, _c;
|
|
10
|
-
const ignoreElement = (_b = (_a = elementRef.current) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.querySelector(ignore) ;
|
|
11
|
-
if (event.target instanceof HTMLElement && !((_c = elementRef.current) == null ? void 0 : _c.contains(event.target)) && !(ignoreElement == null ? void 0 : ignoreElement.contains(event.target))) {
|
|
12
|
-
onFocusOutside();
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
targetWindow == null ? void 0 : targetWindow.addEventListener("focusin", handleFocus);
|
|
16
|
-
return () => {
|
|
17
|
-
targetWindow == null ? void 0 : targetWindow.removeEventListener("focusin", handleFocus);
|
|
18
|
-
};
|
|
19
|
-
}, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export { useFocusOutside };
|
|
23
|
-
//# sourceMappingURL=useFocusOutside.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusOutside.js","sources":["../src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n elementRef: RefObject<HTMLElement>,\n onFocusOutside: () => void,\n enabled: boolean,\n ignore?: string,\n) {\n const targetWindow = useWindow();\n\n useEffect(() => {\n if (!enabled) return;\n\n const handleFocus = (event: FocusEvent) => {\n const ignoreElement = ignore\n ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n : undefined;\n\n // If focus is outside the tabstrip (including the list) then close the list.\n if (\n event.target instanceof HTMLElement &&\n !elementRef.current?.contains(event.target) &&\n !ignoreElement?.contains(event.target)\n ) {\n onFocusOutside();\n }\n };\n\n targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n return () => {\n targetWindow?.removeEventListener(\"focusin\", handleFocus);\n };\n }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eAAA,CACd,UAAA,EACA,cAAA,EACA,OAAA,EACA,MAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsB;AAd/C,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAeM,MAAA,MAAM,aAAA,IACF,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,OAAA,KAAX,mBAAoB,aAAA,KAApB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmC,cAA2B,MAAA,CAAA,CAC9D;AAGJ,MAAA,IACE,KAAA,CAAM,MAAA,YAAkB,WAAA,IACxB,EAAA,CAAC,gBAAW,OAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,QAAA,CAAS,KAAA,CAAM,MAAA,CAAA,CAAA,IACpC,EAAC,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,CAAS,MAAM,MAAA,CAAA,CAAA,EAC/B;AACA,QAAA,cAAA,EAAe;AAAA,MACjB;AAAA,IACF,CAAA;AAEA,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,SAAA,EAAW,WAAA,CAAA;AAE1C,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,SAAA,EAAW,WAAA,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,gBAAgB,UAAA,EAAY,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
|
|
2
|
-
import { useRef, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
function useRestoreActiveTab({
|
|
5
|
-
container,
|
|
6
|
-
tabs,
|
|
7
|
-
realSelectedIndex,
|
|
8
|
-
removedActiveTabRef
|
|
9
|
-
}) {
|
|
10
|
-
const tabsRef = useRef(tabs);
|
|
11
|
-
const previousTabsRef = useRef(tabs);
|
|
12
|
-
useIsomorphicLayoutEffect(() => {
|
|
13
|
-
tabsRef.current = tabs;
|
|
14
|
-
return () => {
|
|
15
|
-
previousTabsRef.current = tabs;
|
|
16
|
-
};
|
|
17
|
-
}, [tabs]);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
if (!container.current) return;
|
|
20
|
-
const win = ownerWindow(container.current);
|
|
21
|
-
const mutationObserver = new win.MutationObserver((mutations) => {
|
|
22
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
23
|
-
for (const mutation of mutations) {
|
|
24
|
-
const removedItem = mutation.removedNodes[0] instanceof HTMLElement ? mutation.removedNodes[0] : null;
|
|
25
|
-
const removedItemWasTab = removedActiveTabRef.current && ((_a = removedItem == null ? void 0 : removedItem.dataset) == null ? void 0 : _a.overflowitem);
|
|
26
|
-
const activeTabWasRemoved = !tabsRef.current.find(
|
|
27
|
-
({ value }) => value === removedActiveTabRef.current
|
|
28
|
-
);
|
|
29
|
-
if (removedItemWasTab && activeTabWasRemoved) {
|
|
30
|
-
const removedTab = removedItem == null ? void 0 : removedItem.querySelector('[role="tab"]');
|
|
31
|
-
let nextTab = null;
|
|
32
|
-
if ((removedTab == null ? void 0 : removedTab.ariaSelected) === "true" && realSelectedIndex.current != null && realSelectedIndex.current >= 0) {
|
|
33
|
-
nextTab = (_b = tabsRef.current[Math.min(realSelectedIndex.current, tabsRef.current.length - 1)]) == null ? void 0 : _b.element;
|
|
34
|
-
}
|
|
35
|
-
if (!nextTab) {
|
|
36
|
-
const previousTab = mutation.previousSibling instanceof HTMLElement ? mutation.previousSibling.querySelector(
|
|
37
|
-
'[role="tab"]'
|
|
38
|
-
) : null;
|
|
39
|
-
if (!previousTab) {
|
|
40
|
-
nextTab = mutation.nextSibling instanceof HTMLElement ? (_c = mutation.nextSibling) == null ? void 0 : _c.querySelector(
|
|
41
|
-
'[role="tab"]'
|
|
42
|
-
) : null;
|
|
43
|
-
} else {
|
|
44
|
-
const nextTabIndex = previousTab ? tabsRef.current.findIndex(
|
|
45
|
-
({ element }) => element === previousTab
|
|
46
|
-
) + 1 : -1;
|
|
47
|
-
nextTab = (_d = tabsRef.current[Math.min(nextTabIndex, tabsRef.current.length - 1)]) == null ? void 0 : _d.element;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
if (!((_e = container.current) == null ? void 0 : _e.querySelector(
|
|
51
|
-
'[role="tab"][aria-selected="true"]'
|
|
52
|
-
))) {
|
|
53
|
-
nextTab == null ? void 0 : nextTab.click();
|
|
54
|
-
}
|
|
55
|
-
if (!((_f = container.current) == null ? void 0 : _f.contains(win.document.activeElement))) {
|
|
56
|
-
if (nextTab == null ? void 0 : nextTab.isConnected) {
|
|
57
|
-
nextTab == null ? void 0 : nextTab.focus({ preventScroll: true });
|
|
58
|
-
} else {
|
|
59
|
-
(_h = (_g = container.current) == null ? void 0 : _g.querySelector(
|
|
60
|
-
'[role="tab"][aria-selected="true"]'
|
|
61
|
-
)) == null ? void 0 : _h.focus({ preventScroll: true });
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
removedActiveTabRef.current = void 0;
|
|
65
|
-
}
|
|
66
|
-
if (removedActiveTabRef.current) {
|
|
67
|
-
if (removedItemWasTab) {
|
|
68
|
-
const tabElement = (_i = tabsRef.current.find(
|
|
69
|
-
({ value }) => value === removedActiveTabRef.current
|
|
70
|
-
)) == null ? void 0 : _i.element;
|
|
71
|
-
if (win.document.activeElement === win.document.body) {
|
|
72
|
-
tabElement == null ? void 0 : tabElement.focus();
|
|
73
|
-
}
|
|
74
|
-
} else if (activeTabWasRemoved && (removedItem == null ? void 0 : removedItem.dataset.overflow)) {
|
|
75
|
-
(_k = (_j = tabsRef.current[tabsRef.current.length - 1]) == null ? void 0 : _j.element) == null ? void 0 : _k.focus();
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
mutationObserver.observe(container.current, {
|
|
81
|
-
childList: true,
|
|
82
|
-
subtree: true
|
|
83
|
-
});
|
|
84
|
-
return () => {
|
|
85
|
-
mutationObserver.disconnect();
|
|
86
|
-
};
|
|
87
|
-
}, [container, realSelectedIndex, removedActiveTabRef]);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
export { useRestoreActiveTab };
|
|
91
|
-
//# sourceMappingURL=useRestoreActiveTab.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRestoreActiveTab.js","sources":["../src/tabs-next/hooks/useRestoreActiveTab.ts"],"sourcesContent":["import { ownerWindow, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type MutableRefObject,\n type RefObject,\n useEffect,\n useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseHandleRemovalProps {\n container: RefObject<HTMLElement>;\n tabs: Item[];\n realSelectedIndex: RefObject<number>;\n removedActiveTabRef: MutableRefObject<string | undefined>;\n}\n\nexport function useRestoreActiveTab({\n container,\n tabs,\n realSelectedIndex,\n removedActiveTabRef,\n}: UseHandleRemovalProps) {\n const tabsRef = useRef(tabs);\n const previousTabsRef = useRef(tabs);\n\n useIsomorphicLayoutEffect(() => {\n tabsRef.current = tabs;\n\n return () => {\n previousTabsRef.current = tabs;\n };\n }, [tabs]);\n\n useEffect(() => {\n if (!container.current) return;\n\n const win = ownerWindow(container.current);\n\n const mutationObserver = new win.MutationObserver((mutations) => {\n for (const mutation of mutations) {\n const removedItem =\n mutation.removedNodes[0] instanceof HTMLElement\n ? mutation.removedNodes[0]\n : null;\n\n const removedItemWasTab =\n removedActiveTabRef.current && removedItem?.dataset?.overflowitem;\n\n const activeTabWasRemoved = !tabsRef.current.find(\n ({ value }) => value === removedActiveTabRef.current,\n );\n\n if (removedItemWasTab && activeTabWasRemoved) {\n const removedTab =\n removedItem?.querySelector<HTMLElement>('[role=\"tab\"]');\n\n let nextTab: HTMLElement | null | undefined = null;\n\n if (\n removedTab?.ariaSelected === \"true\" &&\n realSelectedIndex.current != null &&\n realSelectedIndex.current >= 0\n ) {\n nextTab =\n tabsRef.current[\n Math.min(realSelectedIndex.current, tabsRef.current.length - 1)\n ]?.element;\n }\n\n if (!nextTab) {\n const previousTab =\n mutation.previousSibling instanceof HTMLElement\n ? mutation.previousSibling.querySelector<HTMLElement>(\n '[role=\"tab\"]',\n )\n : null;\n\n if (!previousTab) {\n nextTab =\n mutation.nextSibling instanceof HTMLElement\n ? mutation.nextSibling?.querySelector<HTMLElement>(\n '[role=\"tab\"]',\n )\n : null;\n } else {\n const nextTabIndex = previousTab\n ? tabsRef.current.findIndex(\n ({ element }) => element === previousTab,\n ) + 1\n : -1;\n\n nextTab =\n tabsRef.current[\n Math.min(nextTabIndex, tabsRef.current.length - 1)\n ]?.element;\n }\n }\n\n if (\n !container.current?.querySelector<HTMLElement>(\n '[role=\"tab\"][aria-selected=\"true\"]',\n )\n ) {\n nextTab?.click();\n }\n\n if (!container.current?.contains(win.document.activeElement)) {\n if (nextTab?.isConnected) {\n nextTab?.focus({ preventScroll: true });\n } else {\n container.current\n ?.querySelector<HTMLElement>(\n '[role=\"tab\"][aria-selected=\"true\"]',\n )\n ?.focus({ preventScroll: true });\n }\n }\n\n removedActiveTabRef.current = undefined;\n }\n\n // Focus the tab if it was moved from the overflow menu into the visible tabs\n if (removedActiveTabRef.current) {\n if (removedItemWasTab) {\n const tabElement = tabsRef.current.find(\n ({ value }) => value === removedActiveTabRef.current,\n )?.element;\n\n if (win.document.activeElement === win.document.body) {\n tabElement?.focus();\n }\n // If the active tab was removed and the overflow menu has been removed focus the last visible tab.\n } else if (activeTabWasRemoved && removedItem?.dataset.overflow) {\n tabsRef.current[tabsRef.current.length - 1]?.element?.focus();\n }\n }\n }\n });\n\n mutationObserver.observe(container.current, {\n childList: true,\n subtree: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [container, realSelectedIndex, removedActiveTabRef]);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type MutableRefObject, type RefObject } from "react";
|
|
2
|
-
import type { Item } from "./useCollection";
|
|
3
|
-
interface UseHandleRemovalProps {
|
|
4
|
-
container: RefObject<HTMLElement>;
|
|
5
|
-
tabs: Item[];
|
|
6
|
-
realSelectedIndex: RefObject<number>;
|
|
7
|
-
removedActiveTabRef: MutableRefObject<string | undefined>;
|
|
8
|
-
}
|
|
9
|
-
export declare function useRestoreActiveTab({ container, tabs, realSelectedIndex, removedActiveTabRef, }: UseHandleRemovalProps): void;
|
|
10
|
-
export {};
|