@flipdish/ui-library 0.45.0 → 0.45.2
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/SlideoutMenu/components/SlideoutShell.cjs +4 -46
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.cjs.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.d.ts.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js +5 -47
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.cjs +41 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.d.ts +19 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.js +39 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.cjs +36 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.d.ts +21 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.js +34 -0
- package/dist/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.js.map +1 -0
- package/dist/components/organisms/Table/components/TableSortIcon.cjs +15 -0
- package/dist/components/organisms/Table/components/TableSortIcon.cjs.map +1 -0
- package/dist/components/organisms/Table/components/TableSortIcon.d.ts +4 -0
- package/dist/components/organisms/Table/components/TableSortIcon.d.ts.map +1 -0
- package/dist/components/organisms/Table/components/TableSortIcon.js +13 -0
- package/dist/components/organisms/Table/components/TableSortIcon.js.map +1 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.cjs +35 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.cjs.map +1 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.d.ts +22 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.d.ts.map +1 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.js +32 -0
- package/dist/components/organisms/Table/hooks/useSelectableRowRegistry.js.map +1 -0
- package/dist/components/organisms/Table/index.cjs +8 -16
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.js +11 -19
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/dist/components/organisms/Table/table.utils.cjs +24 -0
- package/dist/components/organisms/Table/table.utils.cjs.map +1 -1
- package/dist/components/organisms/Table/table.utils.d.ts +26 -0
- package/dist/components/organisms/Table/table.utils.d.ts.map +1 -1
- package/dist/components/organisms/Table/table.utils.js +23 -1
- package/dist/components/organisms/Table/table.utils.js.map +1 -1
- package/package.json +2 -2
|
@@ -10,9 +10,10 @@ var reactAria = require('react-aria');
|
|
|
10
10
|
var reactAriaComponents = require('react-aria-components');
|
|
11
11
|
var usePanelFocus = require('../../../../hooks/__internal__/usePanelFocus/usePanelFocus.cjs');
|
|
12
12
|
var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
|
|
13
|
-
var hotkeys_utils = require('../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
14
13
|
var Theme_context = require('../../../../providers/ThemeProvider/Theme.context.cjs');
|
|
15
14
|
var useCloseWhenCovered = require('../hooks/useCloseWhenCovered.cjs');
|
|
15
|
+
var useDialogFocusSettle = require('../hooks/useDialogFocusSettle.cjs');
|
|
16
|
+
var usePageEscapeDismiss = require('../hooks/usePageEscapeDismiss.cjs');
|
|
16
17
|
var useSlideoutState = require('../hooks/useSlideoutState.cjs');
|
|
17
18
|
var OverlayBounds_context = require('../providers/OverlayBounds.context.cjs');
|
|
18
19
|
var PageArea_context = require('../providers/PageArea.context.cjs');
|
|
@@ -36,26 +37,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
|
|
|
36
37
|
const themeRootRef = React.useMemo(() => ({ current: themeRoot }), [themeRoot]);
|
|
37
38
|
// Escape inside the panel; nothing outside is listened to for clicks, so the page stays usable and a click there never closes it.
|
|
38
39
|
const { overlayProps } = reactAria.useOverlay({ isOpen: isPresent, onClose: openState.close, isDismissable: false, shouldCloseOnBlur: false, isKeyboardDismissDisabled }, panelRef);
|
|
39
|
-
|
|
40
|
-
// took the key first (they prevent default on their own Escape and run before a document listener), and not from a field
|
|
41
|
-
// outside the panel, where Escape belongs to the field. Focus is left where the user put it.
|
|
42
|
-
const closeRef = React.useRef(openState.close);
|
|
43
|
-
closeRef.current = openState.close;
|
|
44
|
-
React.useEffect(() => {
|
|
45
|
-
if (!isPresent || isKeyboardDismissDisabled)
|
|
46
|
-
return;
|
|
47
|
-
const onKeyDown = (event) => {
|
|
48
|
-
if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
|
|
49
|
-
return;
|
|
50
|
-
if (event.target instanceof Node && panelRef.current?.contains(event.target))
|
|
51
|
-
return;
|
|
52
|
-
if (hotkeys_utils.isTypingInField(event))
|
|
53
|
-
return;
|
|
54
|
-
closeRef.current();
|
|
55
|
-
};
|
|
56
|
-
document.addEventListener('keydown', onKeyDown);
|
|
57
|
-
return () => document.removeEventListener('keydown', onKeyDown);
|
|
58
|
-
}, [isPresent, isKeyboardDismissDisabled]);
|
|
40
|
+
usePageEscapeDismiss.usePageEscapeDismiss({ panelRef, enabled: isPresent && !isKeyboardDismissDisabled, onClose: openState.close });
|
|
59
41
|
// react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close, the inert exit,
|
|
60
42
|
// and below `lg` the page area under the panel, which it takes out of reach: keyboard and screen reader skip what nobody can
|
|
61
43
|
// see. A named page area wins over the app root. `shouldFocusOnMount` is what makes the hook record the opener.
|
|
@@ -74,31 +56,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
|
|
|
74
56
|
openState.close();
|
|
75
57
|
}, [liftCover, openState.close]);
|
|
76
58
|
useCloseWhenCovered.useCloseWhenCovered({ isOpen: isPresent, onClose: closeForCoveringPanel });
|
|
77
|
-
|
|
78
|
-
// back on the row. Settle one frame later: if nothing inside holds focus by then, the dialog takes it. A new gesture before
|
|
79
|
-
// that frame means the user has moved on, such as to the next row, and the frame is dropped so focus is not pulled back.
|
|
80
|
-
React.useEffect(() => {
|
|
81
|
-
if (!isPresent)
|
|
82
|
-
return;
|
|
83
|
-
const stopWatching = () => {
|
|
84
|
-
document.removeEventListener('pointerdown', cancel, true);
|
|
85
|
-
document.removeEventListener('keydown', cancel, true);
|
|
86
|
-
};
|
|
87
|
-
const frame = requestAnimationFrame(() => {
|
|
88
|
-
stopWatching();
|
|
89
|
-
const dialog = dialogRef.current;
|
|
90
|
-
const focused = focus_utils.getFocusedElement();
|
|
91
|
-
if (dialog && !(focused && dialog.contains(focused)))
|
|
92
|
-
dialog.focus({ preventScroll: true });
|
|
93
|
-
});
|
|
94
|
-
const cancel = () => {
|
|
95
|
-
cancelAnimationFrame(frame);
|
|
96
|
-
stopWatching();
|
|
97
|
-
};
|
|
98
|
-
document.addEventListener('pointerdown', cancel, true);
|
|
99
|
-
document.addEventListener('keydown', cancel, true);
|
|
100
|
-
return cancel;
|
|
101
|
-
}, [isPresent]);
|
|
59
|
+
useDialogFocusSettle.useDialogFocusSettle({ dialogRef, isPresent });
|
|
102
60
|
// A content swap leaves focus on the row the user clicked, so the new title is spoken instead; with focus inside, the user
|
|
103
61
|
// is already reading the panel and hears the change as they move. The last title lives here, not in `Header`, since a swap
|
|
104
62
|
// between loading and loaded content remounts the header; the first title is the open, which the dialog announces itself.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoutShell.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useContext","PageAreaContext","useThemeRoot","useMemo","useOverlay","
|
|
1
|
+
{"version":3,"file":"SlideoutShell.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useContext","PageAreaContext","useThemeRoot","useMemo","useOverlay","usePageEscapeDismiss","usePanelFocus","useCallback","useCloseWhenCovered","useDialogFocusSettle","useState","getFocusedElement","_jsx","_jsxs","motion","cx","SlideoutMenuContext","FocusScope","AriaDialog","useResolvedTestId","OverlayTriggerStateContext","useSlideoutState","OverlayBoundsContext","resolveSlideoutBounds","useBreakpoints","TestIdProvider","AnimatePresence","Overlay"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoutShell.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SlideoutShell.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAetD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA8HD;;;;GAIG;AACH,eAAO,MAAM,aAAa;yMAYvB,kBAAkB;;CAqCpB,CAAC"}
|
|
@@ -3,14 +3,15 @@ import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
|
|
|
3
3
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
4
|
import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
5
|
import { AnimatePresence, useIsPresent, useReducedMotion, motion } from 'motion/react';
|
|
6
|
-
import { useContext, useRef, useMemo,
|
|
6
|
+
import { useContext, useRef, useMemo, useCallback, useState } from 'react';
|
|
7
7
|
import { Overlay, useOverlay, FocusScope } from 'react-aria';
|
|
8
8
|
import { OverlayTriggerStateContext, Dialog } from 'react-aria-components';
|
|
9
9
|
import { usePanelFocus } from '../../../../hooks/__internal__/usePanelFocus/usePanelFocus.js';
|
|
10
10
|
import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
|
|
11
|
-
import { isTypingInField } from '../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
12
11
|
import { useThemeRoot } from '../../../../providers/ThemeProvider/Theme.context.js';
|
|
13
12
|
import { useCloseWhenCovered } from '../hooks/useCloseWhenCovered.js';
|
|
13
|
+
import { useDialogFocusSettle } from '../hooks/useDialogFocusSettle.js';
|
|
14
|
+
import { usePageEscapeDismiss } from '../hooks/usePageEscapeDismiss.js';
|
|
14
15
|
import { useSlideoutState } from '../hooks/useSlideoutState.js';
|
|
15
16
|
import { OverlayBoundsContext } from '../providers/OverlayBounds.context.js';
|
|
16
17
|
import { PageAreaContext } from '../providers/PageArea.context.js';
|
|
@@ -34,26 +35,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
|
|
|
34
35
|
const themeRootRef = useMemo(() => ({ current: themeRoot }), [themeRoot]);
|
|
35
36
|
// Escape inside the panel; nothing outside is listened to for clicks, so the page stays usable and a click there never closes it.
|
|
36
37
|
const { overlayProps } = useOverlay({ isOpen: isPresent, onClose: openState.close, isDismissable: false, shouldCloseOnBlur: false, isKeyboardDismissDisabled }, panelRef);
|
|
37
|
-
|
|
38
|
-
// took the key first (they prevent default on their own Escape and run before a document listener), and not from a field
|
|
39
|
-
// outside the panel, where Escape belongs to the field. Focus is left where the user put it.
|
|
40
|
-
const closeRef = useRef(openState.close);
|
|
41
|
-
closeRef.current = openState.close;
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
if (!isPresent || isKeyboardDismissDisabled)
|
|
44
|
-
return;
|
|
45
|
-
const onKeyDown = (event) => {
|
|
46
|
-
if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
|
|
47
|
-
return;
|
|
48
|
-
if (event.target instanceof Node && panelRef.current?.contains(event.target))
|
|
49
|
-
return;
|
|
50
|
-
if (isTypingInField(event))
|
|
51
|
-
return;
|
|
52
|
-
closeRef.current();
|
|
53
|
-
};
|
|
54
|
-
document.addEventListener('keydown', onKeyDown);
|
|
55
|
-
return () => document.removeEventListener('keydown', onKeyDown);
|
|
56
|
-
}, [isPresent, isKeyboardDismissDisabled]);
|
|
38
|
+
usePageEscapeDismiss({ panelRef, enabled: isPresent && !isKeyboardDismissDisabled, onClose: openState.close });
|
|
57
39
|
// react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close, the inert exit,
|
|
58
40
|
// and below `lg` the page area under the panel, which it takes out of reach: keyboard and screen reader skip what nobody can
|
|
59
41
|
// see. A named page area wins over the app root. `shouldFocusOnMount` is what makes the hook record the opener.
|
|
@@ -72,31 +54,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
|
|
|
72
54
|
openState.close();
|
|
73
55
|
}, [liftCover, openState.close]);
|
|
74
56
|
useCloseWhenCovered({ isOpen: isPresent, onClose: closeForCoveringPanel });
|
|
75
|
-
|
|
76
|
-
// back on the row. Settle one frame later: if nothing inside holds focus by then, the dialog takes it. A new gesture before
|
|
77
|
-
// that frame means the user has moved on, such as to the next row, and the frame is dropped so focus is not pulled back.
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
if (!isPresent)
|
|
80
|
-
return;
|
|
81
|
-
const stopWatching = () => {
|
|
82
|
-
document.removeEventListener('pointerdown', cancel, true);
|
|
83
|
-
document.removeEventListener('keydown', cancel, true);
|
|
84
|
-
};
|
|
85
|
-
const frame = requestAnimationFrame(() => {
|
|
86
|
-
stopWatching();
|
|
87
|
-
const dialog = dialogRef.current;
|
|
88
|
-
const focused = getFocusedElement();
|
|
89
|
-
if (dialog && !(focused && dialog.contains(focused)))
|
|
90
|
-
dialog.focus({ preventScroll: true });
|
|
91
|
-
});
|
|
92
|
-
const cancel = () => {
|
|
93
|
-
cancelAnimationFrame(frame);
|
|
94
|
-
stopWatching();
|
|
95
|
-
};
|
|
96
|
-
document.addEventListener('pointerdown', cancel, true);
|
|
97
|
-
document.addEventListener('keydown', cancel, true);
|
|
98
|
-
return cancel;
|
|
99
|
-
}, [isPresent]);
|
|
57
|
+
useDialogFocusSettle({ dialogRef, isPresent });
|
|
100
58
|
// A content swap leaves focus on the row the user clicked, so the new title is spoken instead; with focus inside, the user
|
|
101
59
|
// is already reading the panel and hears the change as they move. The last title lives here, not in `Header`, since a swap
|
|
102
60
|
// between loading and loaded content remounts the header; the first title is the open, which the dialog announces itself.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoutShell.js","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialog"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlideoutShell.js","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialog"],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Focuses the dialog one frame after the panel opens, when a row opened by mouse selects on
|
|
8
|
+
* pointerdown and the browser then lands focus back on that row. If nothing inside holds focus
|
|
9
|
+
* by that frame, the dialog takes it. A pointer or key before the frame means the user has moved
|
|
10
|
+
* on, such as to the next row, and the frame is dropped so focus is not pulled back.
|
|
11
|
+
*
|
|
12
|
+
* @param options The dialog element and whether the panel is still present.
|
|
13
|
+
* @returns Nothing. Focus is moved on the dialog element.
|
|
14
|
+
*/
|
|
15
|
+
const useDialogFocusSettle = ({ dialogRef, isPresent }) => {
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
if (!isPresent)
|
|
18
|
+
return;
|
|
19
|
+
const stopWatching = () => {
|
|
20
|
+
document.removeEventListener('pointerdown', cancel, true);
|
|
21
|
+
document.removeEventListener('keydown', cancel, true);
|
|
22
|
+
};
|
|
23
|
+
const frame = requestAnimationFrame(() => {
|
|
24
|
+
stopWatching();
|
|
25
|
+
const dialog = dialogRef.current;
|
|
26
|
+
const focused = focus_utils.getFocusedElement();
|
|
27
|
+
if (dialog && !(focused && dialog.contains(focused)))
|
|
28
|
+
dialog.focus({ preventScroll: true });
|
|
29
|
+
});
|
|
30
|
+
const cancel = () => {
|
|
31
|
+
cancelAnimationFrame(frame);
|
|
32
|
+
stopWatching();
|
|
33
|
+
};
|
|
34
|
+
document.addEventListener('pointerdown', cancel, true);
|
|
35
|
+
document.addEventListener('keydown', cancel, true);
|
|
36
|
+
return cancel;
|
|
37
|
+
}, [dialogRef, isPresent]);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
exports.useDialogFocusSettle = useDialogFocusSettle;
|
|
41
|
+
//# sourceMappingURL=useDialogFocusSettle.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogFocusSettle.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.ts"],"sourcesContent":[null],"names":["useEffect","getFocusedElement"],"mappings":";;;;;AAaA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAA+B,KAAU;IAClGA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,MAAK;YACxB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AACvD,QAAA,CAAC;AACD,QAAA,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAK;AACvC,YAAA,YAAY,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,YAAA,MAAM,OAAO,GAAGC,6BAAiB,EAAE;AACnC,YAAA,IAAI,MAAM,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAAE,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AAC7F,QAAA,CAAC,CAAC;QACF,MAAM,MAAM,GAAG,MAAK;YAClB,oBAAoB,CAAC,KAAK,CAAC;AAC3B,YAAA,YAAY,EAAE;AAChB,QAAA,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AAClD,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC5B;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { RefObject } from 'react';
|
|
2
|
+
interface UseDialogFocusSettleOptions {
|
|
3
|
+
/** The dialog to focus when a pointer open left focus on the row that opened it. */
|
|
4
|
+
dialogRef: RefObject<HTMLElement | null>;
|
|
5
|
+
/** False once the panel is animating out. */
|
|
6
|
+
isPresent: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Focuses the dialog one frame after the panel opens, when a row opened by mouse selects on
|
|
10
|
+
* pointerdown and the browser then lands focus back on that row. If nothing inside holds focus
|
|
11
|
+
* by that frame, the dialog takes it. A pointer or key before the frame means the user has moved
|
|
12
|
+
* on, such as to the next row, and the frame is dropped so focus is not pulled back.
|
|
13
|
+
*
|
|
14
|
+
* @param options The dialog element and whether the panel is still present.
|
|
15
|
+
* @returns Nothing. Focus is moved on the dialog element.
|
|
16
|
+
*/
|
|
17
|
+
export declare const useDialogFocusSettle: ({ dialogRef, isPresent }: UseDialogFocusSettleOptions) => void;
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=useDialogFocusSettle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogFocusSettle.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,2BAA2B;IACnC,oFAAoF;IACpF,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,0BAA0B,2BAA2B,KAAG,IAqB5F,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Focuses the dialog one frame after the panel opens, when a row opened by mouse selects on
|
|
6
|
+
* pointerdown and the browser then lands focus back on that row. If nothing inside holds focus
|
|
7
|
+
* by that frame, the dialog takes it. A pointer or key before the frame means the user has moved
|
|
8
|
+
* on, such as to the next row, and the frame is dropped so focus is not pulled back.
|
|
9
|
+
*
|
|
10
|
+
* @param options The dialog element and whether the panel is still present.
|
|
11
|
+
* @returns Nothing. Focus is moved on the dialog element.
|
|
12
|
+
*/
|
|
13
|
+
const useDialogFocusSettle = ({ dialogRef, isPresent }) => {
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (!isPresent)
|
|
16
|
+
return;
|
|
17
|
+
const stopWatching = () => {
|
|
18
|
+
document.removeEventListener('pointerdown', cancel, true);
|
|
19
|
+
document.removeEventListener('keydown', cancel, true);
|
|
20
|
+
};
|
|
21
|
+
const frame = requestAnimationFrame(() => {
|
|
22
|
+
stopWatching();
|
|
23
|
+
const dialog = dialogRef.current;
|
|
24
|
+
const focused = getFocusedElement();
|
|
25
|
+
if (dialog && !(focused && dialog.contains(focused)))
|
|
26
|
+
dialog.focus({ preventScroll: true });
|
|
27
|
+
});
|
|
28
|
+
const cancel = () => {
|
|
29
|
+
cancelAnimationFrame(frame);
|
|
30
|
+
stopWatching();
|
|
31
|
+
};
|
|
32
|
+
document.addEventListener('pointerdown', cancel, true);
|
|
33
|
+
document.addEventListener('keydown', cancel, true);
|
|
34
|
+
return cancel;
|
|
35
|
+
}, [dialogRef, isPresent]);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { useDialogFocusSettle };
|
|
39
|
+
//# sourceMappingURL=useDialogFocusSettle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDialogFocusSettle.js","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAaA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAA+B,KAAU;IAClG,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,MAAK;YACxB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AACvD,QAAA,CAAC;AACD,QAAA,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAK;AACvC,YAAA,YAAY,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,YAAA,MAAM,OAAO,GAAG,iBAAiB,EAAE;AACnC,YAAA,IAAI,MAAM,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAAE,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AAC7F,QAAA,CAAC,CAAC;QACF,MAAM,MAAM,GAAG,MAAK;YAClB,oBAAoB,CAAC,KAAK,CAAC;AAC3B,YAAA,YAAY,EAAE;AAChB,QAAA,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AAClD,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC5B;;"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var hotkeys_utils = require('../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Closes the panel on Escape pressed anywhere on the page. The panel is the transient thing the
|
|
8
|
+
* user opened. An overlay that already claimed the key (it prevents default and runs before this
|
|
9
|
+
* document listener), a composing key, Escape from inside the panel, and Escape from a field
|
|
10
|
+
* outside it are left alone. Focus stays where the user put it.
|
|
11
|
+
*
|
|
12
|
+
* @param options The panel element, whether dismiss is active, and how to close.
|
|
13
|
+
* @returns Nothing. The close is reported through `onClose`.
|
|
14
|
+
*/
|
|
15
|
+
const usePageEscapeDismiss = ({ panelRef, enabled, onClose }) => {
|
|
16
|
+
const closeRef = React.useRef(onClose);
|
|
17
|
+
closeRef.current = onClose;
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
if (!enabled)
|
|
20
|
+
return;
|
|
21
|
+
const onKeyDown = (event) => {
|
|
22
|
+
if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
|
|
23
|
+
return;
|
|
24
|
+
if (event.target instanceof Node && panelRef.current?.contains(event.target))
|
|
25
|
+
return;
|
|
26
|
+
if (hotkeys_utils.isTypingInField(event))
|
|
27
|
+
return;
|
|
28
|
+
closeRef.current();
|
|
29
|
+
};
|
|
30
|
+
document.addEventListener('keydown', onKeyDown);
|
|
31
|
+
return () => document.removeEventListener('keydown', onKeyDown);
|
|
32
|
+
}, [enabled, panelRef]);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
exports.usePageEscapeDismiss = usePageEscapeDismiss;
|
|
36
|
+
//# sourceMappingURL=usePageEscapeDismiss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePageEscapeDismiss.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.ts"],"sourcesContent":[null],"names":["useRef","useEffect","isTypingInField"],"mappings":";;;;;AAeA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAA+B,KAAU;AACxG,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAC,OAAO,CAAC;AAChC,IAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;IAE1BC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,OAAO;YAAE;AACd,QAAA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;AACzC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,WAAW;gBAAE;AAC3E,YAAA,IAAI,KAAK,CAAC,MAAM,YAAY,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;gBAAE;YAC9E,IAAIC,6BAAe,CAAC,KAAK,CAAC;gBAAE;YAC5B,QAAQ,CAAC,OAAO,EAAE;AACpB,QAAA,CAAC;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACzB;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { RefObject } from 'react';
|
|
2
|
+
interface UsePageEscapeDismissOptions {
|
|
3
|
+
/** The panel. Escape whose target is inside it is left to the overlay, which already closes. */
|
|
4
|
+
panelRef: RefObject<HTMLElement | null>;
|
|
5
|
+
/** False once the panel is leaving, and while keyboard dismiss is disabled. */
|
|
6
|
+
enabled: boolean;
|
|
7
|
+
/** Closes the panel. The listener calls the close from the latest render. */
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Closes the panel on Escape pressed anywhere on the page. The panel is the transient thing the
|
|
12
|
+
* user opened. An overlay that already claimed the key (it prevents default and runs before this
|
|
13
|
+
* document listener), a composing key, Escape from inside the panel, and Escape from a field
|
|
14
|
+
* outside it are left alone. Focus stays where the user put it.
|
|
15
|
+
*
|
|
16
|
+
* @param options The panel element, whether dismiss is active, and how to close.
|
|
17
|
+
* @returns Nothing. The close is reported through `onClose`.
|
|
18
|
+
*/
|
|
19
|
+
export declare const usePageEscapeDismiss: ({ panelRef, enabled, onClose }: UsePageEscapeDismissOptions) => void;
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=usePageEscapeDismiss.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePageEscapeDismiss.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,2BAA2B;IACnC,gGAAgG;IAChG,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,+EAA+E;IAC/E,OAAO,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,gCAAgC,2BAA2B,KAAG,IAelG,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { isTypingInField } from '../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Closes the panel on Escape pressed anywhere on the page. The panel is the transient thing the
|
|
6
|
+
* user opened. An overlay that already claimed the key (it prevents default and runs before this
|
|
7
|
+
* document listener), a composing key, Escape from inside the panel, and Escape from a field
|
|
8
|
+
* outside it are left alone. Focus stays where the user put it.
|
|
9
|
+
*
|
|
10
|
+
* @param options The panel element, whether dismiss is active, and how to close.
|
|
11
|
+
* @returns Nothing. The close is reported through `onClose`.
|
|
12
|
+
*/
|
|
13
|
+
const usePageEscapeDismiss = ({ panelRef, enabled, onClose }) => {
|
|
14
|
+
const closeRef = useRef(onClose);
|
|
15
|
+
closeRef.current = onClose;
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (!enabled)
|
|
18
|
+
return;
|
|
19
|
+
const onKeyDown = (event) => {
|
|
20
|
+
if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
|
|
21
|
+
return;
|
|
22
|
+
if (event.target instanceof Node && panelRef.current?.contains(event.target))
|
|
23
|
+
return;
|
|
24
|
+
if (isTypingInField(event))
|
|
25
|
+
return;
|
|
26
|
+
closeRef.current();
|
|
27
|
+
};
|
|
28
|
+
document.addEventListener('keydown', onKeyDown);
|
|
29
|
+
return () => document.removeEventListener('keydown', onKeyDown);
|
|
30
|
+
}, [enabled, panelRef]);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export { usePageEscapeDismiss };
|
|
34
|
+
//# sourceMappingURL=usePageEscapeDismiss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePageEscapeDismiss.js","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/usePageEscapeDismiss.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAeA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAA+B,KAAU;AACxG,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;AAChC,IAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;IAE1B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,OAAO;YAAE;AACd,QAAA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;AACzC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,WAAW;gBAAE;AAC3E,YAAA,IAAI,KAAK,CAAC,MAAM,YAAY,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;gBAAE;YAC9E,IAAI,eAAe,CAAC,KAAK,CAAC;gBAAE;YAC5B,QAAQ,CAAC,OAAO,EAAE;AACpB,QAAA,CAAC;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACzB;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
|
+
|
|
7
|
+
const TableSortIcon = ({ sortDirection }) => {
|
|
8
|
+
if (!sortDirection) {
|
|
9
|
+
return jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" });
|
|
10
|
+
}
|
|
11
|
+
return jsxRuntime.jsx(uiIcons.ArrowDown, { className: cx.cx('size-3 stroke-[3px] text-fg-quaternary', sortDirection === 'ascending' && 'rotate-180') });
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.TableSortIcon = TableSortIcon;
|
|
15
|
+
//# sourceMappingURL=TableSortIcon.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSortIcon.cjs","sources":["../../../../../src/components/organisms/Table/components/TableSortIcon.tsx"],"sourcesContent":[null],"names":["_jsx","ChevronSelectorVertical","ArrowDown","cx"],"mappings":";;;;;;MAKa,aAAa,GAAG,CAAC,EAAE,aAAa,EAAkD,KAAI;IACjG,IAAI,CAAC,aAAa,EAAE;AAClB,QAAA,OAAOA,cAAA,CAACC,+BAAuB,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAC,oBAAoB,GAAG;IAC7F;AAEA,IAAA,OAAOD,eAACE,iBAAS,EAAA,EAAC,SAAS,EAAEC,KAAE,CAAC,wCAAwC,EAAE,aAAa,KAAK,WAAW,IAAI,YAAY,CAAC,GAAI;AAC9H;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSortIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Table/components/TableSortIcon.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,GAAI,mBAAmB;IAAE,aAAa,CAAC,EAAE,WAAW,GAAG,YAAY,CAAA;CAAE,gCAM9F,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { ChevronSelectorVertical, ArrowDown } from '@flipdish/ui-icons';
|
|
3
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
|
+
|
|
5
|
+
const TableSortIcon = ({ sortDirection }) => {
|
|
6
|
+
if (!sortDirection) {
|
|
7
|
+
return jsx(ChevronSelectorVertical, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" });
|
|
8
|
+
}
|
|
9
|
+
return jsx(ArrowDown, { className: cx('size-3 stroke-[3px] text-fg-quaternary', sortDirection === 'ascending' && 'rotate-180') });
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { TableSortIcon };
|
|
13
|
+
//# sourceMappingURL=TableSortIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSortIcon.js","sources":["../../../../../src/components/organisms/Table/components/TableSortIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;MAKa,aAAa,GAAG,CAAC,EAAE,aAAa,EAAkD,KAAI;IACjG,IAAI,CAAC,aAAa,EAAE;AAClB,QAAA,OAAOA,GAAA,CAAC,uBAAuB,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAC,oBAAoB,GAAG;IAC7F;AAEA,IAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,aAAa,KAAK,WAAW,IAAI,YAAY,CAAC,GAAI;AAC9H;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Remembers which selectable rows are mounted so "select all" can name them instead of react-aria's `'all'`.
|
|
7
|
+
*
|
|
8
|
+
* @returns `register`, whose cleanup drops that row, and `rowIds`, the live set a selection handler reads.
|
|
9
|
+
*/
|
|
10
|
+
const useSelectableRowRegistry = () => {
|
|
11
|
+
// react-aria reports "select all" as `'all'`; the rendered rows say which ids that covers, in mount order rather than display order.
|
|
12
|
+
const rowIds = React.useRef(new Set());
|
|
13
|
+
const register = React.useCallback((id) => {
|
|
14
|
+
rowIds.current.add(id);
|
|
15
|
+
return () => {
|
|
16
|
+
rowIds.current.delete(id);
|
|
17
|
+
};
|
|
18
|
+
}, []);
|
|
19
|
+
return { register, rowIds };
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Joins one row to the table's selectable-row set for as long as it has an id and is not disabled.
|
|
23
|
+
*
|
|
24
|
+
* @param register The table's registrar, or omitted when the table is not reporting selection.
|
|
25
|
+
* @param id The row's id. A row without one is left out of "select all".
|
|
26
|
+
* @param isDisabled Whether the row is disabled. Disabled rows stay out of the set, and leave it if they become disabled.
|
|
27
|
+
* @returns Nothing. Membership is updated while the row is rendered.
|
|
28
|
+
*/
|
|
29
|
+
const useRegisterSelectableRow = (register, id, isDisabled) => {
|
|
30
|
+
React.useEffect(() => (id === undefined || isDisabled ? undefined : register?.(id)), [register, id, isDisabled]);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.useRegisterSelectableRow = useRegisterSelectableRow;
|
|
34
|
+
exports.useSelectableRowRegistry = useSelectableRowRegistry;
|
|
35
|
+
//# sourceMappingURL=useSelectableRowRegistry.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectableRowRegistry.cjs","sources":["../../../../../src/components/organisms/Table/hooks/useSelectableRowRegistry.ts"],"sourcesContent":[null],"names":["useRef","useCallback","useEffect"],"mappings":";;;;AAOA;;;;AAIG;AACI,MAAM,wBAAwB,GAAG,MAAK;;IAE3C,MAAM,MAAM,GAAGA,YAAM,CAAC,IAAI,GAAG,EAAS,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,CAAC,EAAS,KAAI;AACzC,QAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AACtB,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;AAC3B,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC7B;AAEA;;;;;;;AAOG;AACI,MAAM,wBAAwB,GAAG,CACtC,QAAiD,EACjD,EAAqB,EACrB,UAA+B,KAC7B;AACF,IAAAC,eAAS,CAAC,OAAO,EAAE,KAAK,SAAS,IAAI,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC;AAC5G;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/** A row id. Same values as react-aria's `Key`, without importing that package into a hook. */
|
|
2
|
+
type RowId = string | number;
|
|
3
|
+
/**
|
|
4
|
+
* Remembers which selectable rows are mounted so "select all" can name them instead of react-aria's `'all'`.
|
|
5
|
+
*
|
|
6
|
+
* @returns `register`, whose cleanup drops that row, and `rowIds`, the live set a selection handler reads.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useSelectableRowRegistry: () => {
|
|
9
|
+
register: (id: RowId) => () => void;
|
|
10
|
+
rowIds: import("react").RefObject<Set<RowId>>;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Joins one row to the table's selectable-row set for as long as it has an id and is not disabled.
|
|
14
|
+
*
|
|
15
|
+
* @param register The table's registrar, or omitted when the table is not reporting selection.
|
|
16
|
+
* @param id The row's id. A row without one is left out of "select all".
|
|
17
|
+
* @param isDisabled Whether the row is disabled. Disabled rows stay out of the set, and leave it if they become disabled.
|
|
18
|
+
* @returns Nothing. Membership is updated while the row is rendered.
|
|
19
|
+
*/
|
|
20
|
+
export declare const useRegisterSelectableRow: (register: ((id: RowId) => () => void) | undefined, id: RowId | undefined, isDisabled: boolean | undefined) => void;
|
|
21
|
+
export {};
|
|
22
|
+
//# sourceMappingURL=useSelectableRowRegistry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectableRowRegistry.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Table/hooks/useSelectableRowRegistry.ts"],"names":[],"mappings":"AAIA,+FAA+F;AAC/F,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7B;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;mBAGD,KAAK;;CAQxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,CAAC,CAAC,EAAE,EAAE,KAAK,KAAK,MAAM,IAAI,CAAC,GAAG,SAAS,EACjD,IAAI,KAAK,GAAG,SAAS,EACrB,YAAY,OAAO,GAAG,SAAS,SAGhC,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Remembers which selectable rows are mounted so "select all" can name them instead of react-aria's `'all'`.
|
|
5
|
+
*
|
|
6
|
+
* @returns `register`, whose cleanup drops that row, and `rowIds`, the live set a selection handler reads.
|
|
7
|
+
*/
|
|
8
|
+
const useSelectableRowRegistry = () => {
|
|
9
|
+
// react-aria reports "select all" as `'all'`; the rendered rows say which ids that covers, in mount order rather than display order.
|
|
10
|
+
const rowIds = useRef(new Set());
|
|
11
|
+
const register = useCallback((id) => {
|
|
12
|
+
rowIds.current.add(id);
|
|
13
|
+
return () => {
|
|
14
|
+
rowIds.current.delete(id);
|
|
15
|
+
};
|
|
16
|
+
}, []);
|
|
17
|
+
return { register, rowIds };
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Joins one row to the table's selectable-row set for as long as it has an id and is not disabled.
|
|
21
|
+
*
|
|
22
|
+
* @param register The table's registrar, or omitted when the table is not reporting selection.
|
|
23
|
+
* @param id The row's id. A row without one is left out of "select all".
|
|
24
|
+
* @param isDisabled Whether the row is disabled. Disabled rows stay out of the set, and leave it if they become disabled.
|
|
25
|
+
* @returns Nothing. Membership is updated while the row is rendered.
|
|
26
|
+
*/
|
|
27
|
+
const useRegisterSelectableRow = (register, id, isDisabled) => {
|
|
28
|
+
useEffect(() => (id === undefined || isDisabled ? undefined : register?.(id)), [register, id, isDisabled]);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { useRegisterSelectableRow, useSelectableRowRegistry };
|
|
32
|
+
//# sourceMappingURL=useSelectableRowRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectableRowRegistry.js","sources":["../../../../../src/components/organisms/Table/hooks/useSelectableRowRegistry.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAOA;;;;AAIG;AACI,MAAM,wBAAwB,GAAG,MAAK;;IAE3C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,GAAG,EAAS,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,EAAS,KAAI;AACzC,QAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AACtB,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;AAC3B,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC7B;AAEA;;;;;;;AAOG;AACI,MAAM,wBAAwB,GAAG,CACtC,QAAiD,EACjD,EAAqB,EACrB,UAA+B,KAC7B;AACF,IAAA,SAAS,CAAC,OAAO,EAAE,KAAK,SAAS,IAAI,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC;AAC5G;;"}
|
|
@@ -10,6 +10,8 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
10
10
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
11
11
|
var React = require('react');
|
|
12
12
|
var reactAriaComponents = require('react-aria-components');
|
|
13
|
+
var TableSortIcon = require('./components/TableSortIcon.cjs');
|
|
14
|
+
var useSelectableRowRegistry = require('./hooks/useSelectableRowRegistry.cjs');
|
|
13
15
|
var table_utils = require('./table.utils.cjs');
|
|
14
16
|
|
|
15
17
|
/** Row actions menu behind a dots button with fixed Edit, Copy link and Delete items, for use in a table's last column. */
|
|
@@ -36,24 +38,15 @@ const TableRoot = ({ className, size: sizeProp, selectedKey, onSelectedKeyChange
|
|
|
36
38
|
const inherited = React.useContext(TableContext);
|
|
37
39
|
const size = sizeProp ?? inherited.size;
|
|
38
40
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'table', rootName: 'table' });
|
|
39
|
-
|
|
40
|
-
const rowKeys = React.useRef(new Set());
|
|
41
|
-
const registerRow = React.useCallback((id) => {
|
|
42
|
-
rowKeys.current.add(id);
|
|
43
|
-
return () => {
|
|
44
|
-
rowKeys.current.delete(id);
|
|
45
|
-
};
|
|
46
|
-
}, []);
|
|
41
|
+
const { register: registerRow, rowIds } = useSelectableRowRegistry.useSelectableRowRegistry();
|
|
47
42
|
const { onSelectionChange } = props;
|
|
48
|
-
const
|
|
43
|
+
const selectionListeners = { onSelectionChange, onSelectedKeyChange, onSelectedKeysChange };
|
|
49
44
|
const handleSelectionChange = (selection) => {
|
|
50
|
-
|
|
51
|
-
onSelectedKeyChange?.(table_utils.keyOfSelection(selection));
|
|
52
|
-
onSelectedKeysChange?.(table_utils.keysOfSelection(selection, rowKeys.current, props.disabledKeys));
|
|
45
|
+
table_utils.reportSelectionChange(selection, rowIds.current, props.disabledKeys, selectionListeners);
|
|
53
46
|
};
|
|
54
47
|
return (
|
|
55
48
|
// A row cannot see the table-level `onRowAction`, so the context carries whether one exists.
|
|
56
|
-
jsxRuntime.jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId, hasRowAction: props.onRowAction !== undefined, registerRow }, children: jsxRuntime.jsx("div", { className: "overflow-x-auto", children: jsxRuntime.jsx(reactAriaComponents.Table, { "data-testid": rootTestId, className: (state) => cx.cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props, selectedKeys: selectedKey !== undefined ? table_utils.selectionOfKey(selectedKey) : props.selectedKeys, onSelectionChange:
|
|
49
|
+
jsxRuntime.jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId, hasRowAction: props.onRowAction !== undefined, registerRow }, children: jsxRuntime.jsx("div", { className: "overflow-x-auto", children: jsxRuntime.jsx(reactAriaComponents.Table, { "data-testid": rootTestId, className: (state) => cx.cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props, selectedKeys: selectedKey !== undefined ? table_utils.selectionOfKey(selectedKey) : props.selectedKeys, onSelectionChange: table_utils.hasSelectionListener(selectionListeners) ? handleSelectionChange : undefined }) }) }));
|
|
57
50
|
};
|
|
58
51
|
TableRoot.displayName = 'Table';
|
|
59
52
|
const TableHeader = ({ columns, children, bordered = true, className, size: sizeProp, ...props }) => {
|
|
@@ -70,8 +63,7 @@ const TableHead = ({ className, tooltip, label, children, 'data-testid': dataTes
|
|
|
70
63
|
const { selectionBehavior } = reactAriaComponents.useTableOptions();
|
|
71
64
|
const { testIdPrefix } = React.useContext(TableContext);
|
|
72
65
|
const colTestId = dataTestId ?? (testIdPrefix && props.id !== undefined ? testIdUtils.joinTestId(testIdPrefix, `col-${testIdUtils.slugifyTestId(String(props.id))}`) : undefined);
|
|
73
|
-
return (jsxRuntime.jsx(reactAriaComponents.Column, { ...props, "data-testid": colTestId, className: (state) => cx.cx('relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset', selectionBehavior === 'toggle' && 'nth-2:pl-3', state.allowsSorting && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: (state) => (jsxRuntime.jsxs(reactAriaComponents.Group, { className: "flex items-center gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [label && jsxRuntime.jsx("span", { className: "text-xs font-semibold whitespace-nowrap text-quaternary", children: label }), typeof children === 'function' ? children(state) : children] }), tooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { "aria-label": tooltip, className: "cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4" }) }) })), state.allowsSorting &&
|
|
74
|
-
(state.sortDirection ? (jsxRuntime.jsx(uiIcons.ArrowDown, { className: cx.cx('size-3 stroke-[3px] text-fg-quaternary', state.sortDirection === 'ascending' && 'rotate-180') })) : (jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" })))] })) }));
|
|
66
|
+
return (jsxRuntime.jsx(reactAriaComponents.Column, { ...props, "data-testid": colTestId, className: (state) => cx.cx('relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset', selectionBehavior === 'toggle' && 'nth-2:pl-3', state.allowsSorting && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: (state) => (jsxRuntime.jsxs(reactAriaComponents.Group, { className: "flex items-center gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [label && jsxRuntime.jsx("span", { className: "text-xs font-semibold whitespace-nowrap text-quaternary", children: label }), typeof children === 'function' ? children(state) : children] }), tooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { "aria-label": tooltip, className: "cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4" }) }) })), state.allowsSorting && jsxRuntime.jsx(TableSortIcon.TableSortIcon, { sortDirection: state.sortDirection })] })) }));
|
|
75
67
|
};
|
|
76
68
|
TableHead.displayName = 'TableHead';
|
|
77
69
|
const TableRow = ({ columns, children, className, highlightSelectedRow = true, size: sizeProp, 'data-testid': dataTestId, ...props }) => {
|
|
@@ -84,7 +76,7 @@ const TableRow = ({ columns, children, className, highlightSelectedRow = true, s
|
|
|
84
76
|
(context.testIdPrefix && props.id !== undefined ? testIdUtils.joinTestId(context.testIdPrefix, `row-${testIdUtils.slugifyTestId(String(props.id))}`) : undefined);
|
|
85
77
|
const { registerRow } = context;
|
|
86
78
|
const { id, isDisabled } = props;
|
|
87
|
-
|
|
79
|
+
useSelectableRowRegistry.useRegisterSelectableRow(registerRow, id, isDisabled);
|
|
88
80
|
return (jsxRuntime.jsxs(reactAriaComponents.Row, { ...props, "data-testid": rowTestId, className: (state) => cx.cx('relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2', size === 'sm' ? 'h-14' : 'h-18', highlightSelectedRow && 'selected:bg-secondary', isInteractive && (state.isDisabled ? 'cursor-default' : 'cursor-pointer'),
|
|
89
81
|
// Row border—using an "after" pseudo-element to avoid the border taking up space.
|
|
90
82
|
'[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-secondary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0', typeof className === 'function' ? className(state) : className), children: [selectionBehavior === 'toggle' && (jsxRuntime.jsx(reactAriaComponents.Cell, { className: cx.cx('relative py-2 pr-0 pl-4', size === 'sm' ? 'md:pl-5' : 'md:pl-6'), children: jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(Checkbox.Checkbox, { slot: "selection", size: "md", "data-testid": rowTestId ? testIdUtils.joinTestId(rowTestId, 'selection') : undefined }) }) })), jsxRuntime.jsx(reactAriaComponents.Collection, { items: columns, children: children })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","Dropdown","_jsx","Edit01","Copy01","Trash01","createContext","cx","useContext","isValidElement","Badge","useResolvedTestId","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","Dropdown","_jsx","Edit01","Copy01","Trash01","createContext","cx","useContext","isValidElement","Badge","useResolvedTestId","useSelectableRowRegistry","reportSelectionChange","AriaTable","selectionOfKey","hasSelectionListener","useTableOptions","AriaTableHeader","AriaColumn","Checkbox","AriaCollection","joinTestId","slugifyTestId","AriaGroup","Tooltip","TooltipTrigger","HelpCircle","TableSortIcon","useRegisterSelectableRow","AriaRow","AriaCell","AriaTableBody"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEvH,OAAO,KAAK,EACV,SAAS,IAAI,aAAa,EAC1B,WAAW,IAAI,eAAe,EAC9B,QAAQ,IAAI,YAAY,EACxB,gBAAgB,IAAI,oBAAoB,EACxC,UAAU,IAAI,cAAc,EAC5B,GAAG,EAEJ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAOL,SAAS,IAAI,aAAa,EAG3B,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEvH,OAAO,KAAK,EACV,SAAS,IAAI,aAAa,EAC1B,WAAW,IAAI,eAAe,EAC9B,QAAQ,IAAI,YAAY,EACxB,gBAAgB,IAAI,oBAAoB,EACxC,UAAU,IAAI,cAAc,EAC5B,GAAG,EAEJ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAOL,SAAS,IAAI,aAAa,EAG3B,MAAM,uBAAuB,CAAC;AAK/B,2HAA2H;AAC3H,eAAO,MAAM,uBAAuB,mCAkBnC,CAAC;AAuBF,UAAU,oBAAoB;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoCD,UAAU,cAAe,SAAQ,cAAc,EAAE,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACnH,kJAAkJ;IAClJ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,4HAA4H;IAC5H,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iHAAiH;IACjH,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,qIAAqI;IACrI,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,SAAS;iIAQZ,cAAc;;CA2BhB,CAAC;AAGF,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,CACzC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC7B,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,WAAW;KAAI,CAAC,SAAS,MAAM,wEAA+E,gBAAgB,CAAC,CAAC,CAAC;;CAkCtI,CAAC;AAIF,UAAU,cAAe,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IACvI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,SAAS;mFAAkF,cAAc;;CA0C9G,CAAC;AAGF,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,CACtC,SAAQ,YAAY,CAAC,CAAC,CAAC,EACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACnG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ;KAAI,CAAC,SAAS,MAAM,+GAQ/B,aAAa,CAAC,CAAC,CAAC;;CA2ClB,CAAC;AAIF,UAAU,cAAe,SAAQ,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IACrI,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,SAAS;wDAAuD,cAAc;;CAwBnF,CAAC;AAGF,QAAA,MAAM,SAAS;oDArTwD,cAAc,CAAC,cAAc,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE;wEAwB1C,oBAAoB;CAgSvG,CAAC;AAEF;;;;;;GAMG;AACH,QAAA,MAAM,KAAK,EAAgB,OAAO,SAAS,GAAG;IAC5C,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,GAAG,EAAE,OAAO,QAAQ,CAAC;CACtB,CAAC;AAOF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Edit01, Copy01, Trash01, HelpCircle
|
|
2
|
+
import { Edit01, Copy01, Trash01, HelpCircle } from '@flipdish/ui-icons';
|
|
3
3
|
import { Badge } from '@flipdish/ui-library/components/atoms/Badge';
|
|
4
4
|
import { Checkbox } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
5
5
|
import { Tooltip, TooltipTrigger } from '@flipdish/ui-library/components/atoms/Tooltip';
|
|
6
6
|
import { Dropdown } from '@flipdish/ui-library/components/molecules/Dropdown';
|
|
7
7
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
8
8
|
import { useResolvedTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
9
|
-
import { createContext, useContext,
|
|
9
|
+
import { createContext, useContext, isValidElement } from 'react';
|
|
10
10
|
import { Table as Table$1, TableBody, useTableOptions, TableHeader as TableHeader$1, Column, Collection, Group, Row, Cell } from 'react-aria-components';
|
|
11
|
-
import {
|
|
11
|
+
import { TableSortIcon } from './components/TableSortIcon.js';
|
|
12
|
+
import { useSelectableRowRegistry, useRegisterSelectableRow } from './hooks/useSelectableRowRegistry.js';
|
|
13
|
+
import { hasSelectionListener, selectionOfKey, reportSelectionChange } from './table.utils.js';
|
|
12
14
|
|
|
13
15
|
/** Row actions menu behind a dots button with fixed Edit, Copy link and Delete items, for use in a table's last column. */
|
|
14
16
|
const TableRowActionsDropdown = () => (jsxs(Dropdown.Root, { children: [jsx(Dropdown.DotsButton, { color: "tertiary" }), jsx(Dropdown.Popover, { className: "w-min", children: jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { icon: Edit01, children: jsx("span", { className: "pr-4", children: "Edit" }) }), jsx(Dropdown.Item, { icon: Copy01, children: jsx("span", { className: "pr-4", children: "Copy link" }) }), jsx(Dropdown.Item, { icon: Trash01, children: jsx("span", { className: "pr-4", children: "Delete" }) })] }) })] }));
|
|
@@ -34,24 +36,15 @@ const TableRoot = ({ className, size: sizeProp, selectedKey, onSelectedKeyChange
|
|
|
34
36
|
const inherited = useContext(TableContext);
|
|
35
37
|
const size = sizeProp ?? inherited.size;
|
|
36
38
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'table', rootName: 'table' });
|
|
37
|
-
|
|
38
|
-
const rowKeys = useRef(new Set());
|
|
39
|
-
const registerRow = useCallback((id) => {
|
|
40
|
-
rowKeys.current.add(id);
|
|
41
|
-
return () => {
|
|
42
|
-
rowKeys.current.delete(id);
|
|
43
|
-
};
|
|
44
|
-
}, []);
|
|
39
|
+
const { register: registerRow, rowIds } = useSelectableRowRegistry();
|
|
45
40
|
const { onSelectionChange } = props;
|
|
46
|
-
const
|
|
41
|
+
const selectionListeners = { onSelectionChange, onSelectedKeyChange, onSelectedKeysChange };
|
|
47
42
|
const handleSelectionChange = (selection) => {
|
|
48
|
-
|
|
49
|
-
onSelectedKeyChange?.(keyOfSelection(selection));
|
|
50
|
-
onSelectedKeysChange?.(keysOfSelection(selection, rowKeys.current, props.disabledKeys));
|
|
43
|
+
reportSelectionChange(selection, rowIds.current, props.disabledKeys, selectionListeners);
|
|
51
44
|
};
|
|
52
45
|
return (
|
|
53
46
|
// A row cannot see the table-level `onRowAction`, so the context carries whether one exists.
|
|
54
|
-
jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId, hasRowAction: props.onRowAction !== undefined, registerRow }, children: jsx("div", { className: "overflow-x-auto", children: jsx(Table$1, { "data-testid": rootTestId, className: (state) => cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props, selectedKeys: selectedKey !== undefined ? selectionOfKey(selectedKey) : props.selectedKeys, onSelectionChange:
|
|
47
|
+
jsx(TableContext.Provider, { value: { size, testIdPrefix: rootTestId, hasRowAction: props.onRowAction !== undefined, registerRow }, children: jsx("div", { className: "overflow-x-auto", children: jsx(Table$1, { "data-testid": rootTestId, className: (state) => cx('w-full overflow-x-hidden', typeof className === 'function' ? className(state) : className), ...props, selectedKeys: selectedKey !== undefined ? selectionOfKey(selectedKey) : props.selectedKeys, onSelectionChange: hasSelectionListener(selectionListeners) ? handleSelectionChange : undefined }) }) }));
|
|
55
48
|
};
|
|
56
49
|
TableRoot.displayName = 'Table';
|
|
57
50
|
const TableHeader = ({ columns, children, bordered = true, className, size: sizeProp, ...props }) => {
|
|
@@ -68,8 +61,7 @@ const TableHead = ({ className, tooltip, label, children, 'data-testid': dataTes
|
|
|
68
61
|
const { selectionBehavior } = useTableOptions();
|
|
69
62
|
const { testIdPrefix } = useContext(TableContext);
|
|
70
63
|
const colTestId = dataTestId ?? (testIdPrefix && props.id !== undefined ? joinTestId(testIdPrefix, `col-${slugifyTestId(String(props.id))}`) : undefined);
|
|
71
|
-
return (jsx(Column, { ...props, "data-testid": colTestId, className: (state) => cx('relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset', selectionBehavior === 'toggle' && 'nth-2:pl-3', state.allowsSorting && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: (state) => (jsxs(Group, { className: "flex items-center gap-1", children: [jsxs("div", { className: "flex items-center gap-1", children: [label && jsx("span", { className: "text-xs font-semibold whitespace-nowrap text-quaternary", children: label }), typeof children === 'function' ? children(state) : children] }), tooltip && (jsx(Tooltip, { title: tooltip, placement: "top", children: jsx(TooltipTrigger, { "aria-label": tooltip, className: "cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: jsx(HelpCircle, { className: "size-4" }) }) })), state.allowsSorting &&
|
|
72
|
-
(state.sortDirection ? (jsx(ArrowDown, { className: cx('size-3 stroke-[3px] text-fg-quaternary', state.sortDirection === 'ascending' && 'rotate-180') })) : (jsx(ChevronSelectorVertical, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" })))] })) }));
|
|
64
|
+
return (jsx(Column, { ...props, "data-testid": colTestId, className: (state) => cx('relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset', selectionBehavior === 'toggle' && 'nth-2:pl-3', state.allowsSorting && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: (state) => (jsxs(Group, { className: "flex items-center gap-1", children: [jsxs("div", { className: "flex items-center gap-1", children: [label && jsx("span", { className: "text-xs font-semibold whitespace-nowrap text-quaternary", children: label }), typeof children === 'function' ? children(state) : children] }), tooltip && (jsx(Tooltip, { title: tooltip, placement: "top", children: jsx(TooltipTrigger, { "aria-label": tooltip, className: "cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: jsx(HelpCircle, { className: "size-4" }) }) })), state.allowsSorting && jsx(TableSortIcon, { sortDirection: state.sortDirection })] })) }));
|
|
73
65
|
};
|
|
74
66
|
TableHead.displayName = 'TableHead';
|
|
75
67
|
const TableRow = ({ columns, children, className, highlightSelectedRow = true, size: sizeProp, 'data-testid': dataTestId, ...props }) => {
|
|
@@ -82,7 +74,7 @@ const TableRow = ({ columns, children, className, highlightSelectedRow = true, s
|
|
|
82
74
|
(context.testIdPrefix && props.id !== undefined ? joinTestId(context.testIdPrefix, `row-${slugifyTestId(String(props.id))}`) : undefined);
|
|
83
75
|
const { registerRow } = context;
|
|
84
76
|
const { id, isDisabled } = props;
|
|
85
|
-
|
|
77
|
+
useRegisterSelectableRow(registerRow, id, isDisabled);
|
|
86
78
|
return (jsxs(Row, { ...props, "data-testid": rowTestId, className: (state) => cx('relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2', size === 'sm' ? 'h-14' : 'h-18', highlightSelectedRow && 'selected:bg-secondary', isInteractive && (state.isDisabled ? 'cursor-default' : 'cursor-pointer'),
|
|
87
79
|
// Row border—using an "after" pseudo-element to avoid the border taking up space.
|
|
88
80
|
'[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-secondary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0', typeof className === 'function' ? className(state) : className), children: [selectionBehavior === 'toggle' && (jsx(Cell, { className: cx('relative py-2 pr-0 pl-4', size === 'sm' ? 'md:pl-5' : 'md:pl-6'), children: jsx("div", { className: "flex items-end", children: jsx(Checkbox, { slot: "selection", size: "md", "data-testid": rowTestId ? joinTestId(rowTestId, 'selection') : undefined }) }) })), jsx(Collection, { items: columns, children: children })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaTable","AriaTableHeader","AriaColumn","AriaCollection","AriaGroup","AriaRow","AriaCell","AriaTableBody"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/Table/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaTable","AriaTableHeader","AriaColumn","AriaCollection","AriaGroup","AriaRow","AriaCell","AriaTableBody"],"mappings":"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"}
|
|
@@ -30,8 +30,32 @@ const keysOfSelection = (selection, rowKeys, disabledKeys = []) => {
|
|
|
30
30
|
const disabled = new Set(disabledKeys);
|
|
31
31
|
return [...rowKeys].filter((key) => !disabled.has(key));
|
|
32
32
|
};
|
|
33
|
+
/**
|
|
34
|
+
* Reports whether the table should replace react-aria's selection handler.
|
|
35
|
+
* Passing a handler when nobody is listening would override react-aria's own bookkeeping.
|
|
36
|
+
*
|
|
37
|
+
* @param listeners The three selection callbacks a table may be given.
|
|
38
|
+
* @returns `true` when at least one listener is set.
|
|
39
|
+
*/
|
|
40
|
+
const hasSelectionListener = (listeners) => listeners.onSelectionChange !== undefined || listeners.onSelectedKeyChange !== undefined || listeners.onSelectedKeysChange !== undefined;
|
|
41
|
+
/**
|
|
42
|
+
* Forwards one selection change to every listener the consumer passed, in that order.
|
|
43
|
+
*
|
|
44
|
+
* @param selection What react-aria reports, including `'all'` after the header checkbox.
|
|
45
|
+
* @param rowKeys Mounted selectable row ids, in mount order, used to expand `'all'`.
|
|
46
|
+
* @param disabledKeys Rows "select all" leaves out. Omitted when the table disables none.
|
|
47
|
+
* @param listeners The callbacks to notify. Each runs only when the consumer passed it.
|
|
48
|
+
* @returns Nothing. Each provided listener is called.
|
|
49
|
+
*/
|
|
50
|
+
const reportSelectionChange = (selection, rowKeys, disabledKeys, listeners) => {
|
|
51
|
+
listeners.onSelectionChange?.(selection);
|
|
52
|
+
listeners.onSelectedKeyChange?.(keyOfSelection(selection));
|
|
53
|
+
listeners.onSelectedKeysChange?.(keysOfSelection(selection, rowKeys, disabledKeys));
|
|
54
|
+
};
|
|
33
55
|
|
|
56
|
+
exports.hasSelectionListener = hasSelectionListener;
|
|
34
57
|
exports.keyOfSelection = keyOfSelection;
|
|
35
58
|
exports.keysOfSelection = keysOfSelection;
|
|
59
|
+
exports.reportSelectionChange = reportSelectionChange;
|
|
36
60
|
exports.selectionOfKey = selectionOfKey;
|
|
37
61
|
//# sourceMappingURL=table.utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.utils.cjs","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,GAAe,KAAgB,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;AAE/F;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,SAAoB,KAAgB;IACjE,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,IAAI;AACpC,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS;IACzB,OAAO,KAAK,IAAI,IAAI;AACtB;AAEA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,OAAsB,EAAE,YAAA,GAA8B,EAAE,KAAW;IACvH,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,CAAC,GAAG,SAAS,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzD
|
|
1
|
+
{"version":3,"file":"table.utils.cjs","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,GAAe,KAAgB,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;AAE/F;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,SAAoB,KAAgB;IACjE,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,IAAI;AACpC,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS;IACzB,OAAO,KAAK,IAAI,IAAI;AACtB;AAEA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,OAAsB,EAAE,YAAA,GAA8B,EAAE,KAAW;IACvH,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,CAAC,GAAG,SAAS,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzD;AAWA;;;;;;AAMG;AACI,MAAM,oBAAoB,GAAG,CAAC,SAAmC,KACtE,SAAS,CAAC,iBAAiB,KAAK,SAAS,IAAI,SAAS,CAAC,mBAAmB,KAAK,SAAS,IAAI,SAAS,CAAC,oBAAoB,KAAK;AAEjI;;;;;;;;AAQG;AACI,MAAM,qBAAqB,GAAG,CACnC,SAAoB,EACpB,OAAsB,EACtB,YAAuC,EACvC,SAAmC,KAC3B;AACR,IAAA,SAAS,CAAC,iBAAiB,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,mBAAmB,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAC1D,IAAA,SAAS,CAAC,oBAAoB,GAAG,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AACrF;;;;;;"}
|
|
@@ -19,4 +19,30 @@ export declare const keyOfSelection: (selection: Selection) => Key | null;
|
|
|
19
19
|
* @returns The selected rows' ids.
|
|
20
20
|
*/
|
|
21
21
|
export declare const keysOfSelection: (selection: Selection, rowKeys: Iterable<Key>, disabledKeys?: Iterable<Key>) => Key[];
|
|
22
|
+
export interface SelectionChangeListeners {
|
|
23
|
+
/** React Aria's own selection callback, forwarded unchanged. */
|
|
24
|
+
onSelectionChange?: (selection: Selection) => void;
|
|
25
|
+
/** Single-select callback. Receives the one key, or `null` when the selection is empty or `'all'`. */
|
|
26
|
+
onSelectedKeyChange?: (key: Key | null) => void;
|
|
27
|
+
/** Multi-select callback. Receives row ids, with `'all'` expanded to the mounted selectable rows. */
|
|
28
|
+
onSelectedKeysChange?: (keys: Key[]) => void;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Reports whether the table should replace react-aria's selection handler.
|
|
32
|
+
* Passing a handler when nobody is listening would override react-aria's own bookkeeping.
|
|
33
|
+
*
|
|
34
|
+
* @param listeners The three selection callbacks a table may be given.
|
|
35
|
+
* @returns `true` when at least one listener is set.
|
|
36
|
+
*/
|
|
37
|
+
export declare const hasSelectionListener: (listeners: SelectionChangeListeners) => boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Forwards one selection change to every listener the consumer passed, in that order.
|
|
40
|
+
*
|
|
41
|
+
* @param selection What react-aria reports, including `'all'` after the header checkbox.
|
|
42
|
+
* @param rowKeys Mounted selectable row ids, in mount order, used to expand `'all'`.
|
|
43
|
+
* @param disabledKeys Rows "select all" leaves out. Omitted when the table disables none.
|
|
44
|
+
* @param listeners The callbacks to notify. Each runs only when the consumer passed it.
|
|
45
|
+
* @returns Nothing. Each provided listener is called.
|
|
46
|
+
*/
|
|
47
|
+
export declare const reportSelectionChange: (selection: Selection, rowKeys: Iterable<Key>, disabledKeys: Iterable<Key> | undefined, listeners: SelectionChangeListeners) => void;
|
|
22
48
|
//# sourceMappingURL=table.utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,GAAG,GAAG,IAAI,KAAG,SAA+C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,SAAS,KAAG,GAAG,GAAG,IAI3D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,SAAS,EAAE,SAAS,QAAQ,CAAC,GAAG,CAAC,EAAE,eAAc,QAAQ,CAAC,GAAG,CAAM,KAAG,GAAG,EAInH,CAAC"}
|
|
1
|
+
{"version":3,"file":"table.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,GAAG,GAAG,IAAI,KAAG,SAA+C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,SAAS,KAAG,GAAG,GAAG,IAI3D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,SAAS,EAAE,SAAS,QAAQ,CAAC,GAAG,CAAC,EAAE,eAAc,QAAQ,CAAC,GAAG,CAAM,KAAG,GAAG,EAInH,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,sGAAsG;IACtG,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,qGAAqG;IACrG,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,wBAAwB,KAAG,OAC+D,CAAC;AAE3I;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAChC,WAAW,SAAS,EACpB,SAAS,QAAQ,CAAC,GAAG,CAAC,EACtB,cAAc,QAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,EACvC,WAAW,wBAAwB,KAClC,IAIF,CAAC"}
|
|
@@ -28,6 +28,28 @@ const keysOfSelection = (selection, rowKeys, disabledKeys = []) => {
|
|
|
28
28
|
const disabled = new Set(disabledKeys);
|
|
29
29
|
return [...rowKeys].filter((key) => !disabled.has(key));
|
|
30
30
|
};
|
|
31
|
+
/**
|
|
32
|
+
* Reports whether the table should replace react-aria's selection handler.
|
|
33
|
+
* Passing a handler when nobody is listening would override react-aria's own bookkeeping.
|
|
34
|
+
*
|
|
35
|
+
* @param listeners The three selection callbacks a table may be given.
|
|
36
|
+
* @returns `true` when at least one listener is set.
|
|
37
|
+
*/
|
|
38
|
+
const hasSelectionListener = (listeners) => listeners.onSelectionChange !== undefined || listeners.onSelectedKeyChange !== undefined || listeners.onSelectedKeysChange !== undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Forwards one selection change to every listener the consumer passed, in that order.
|
|
41
|
+
*
|
|
42
|
+
* @param selection What react-aria reports, including `'all'` after the header checkbox.
|
|
43
|
+
* @param rowKeys Mounted selectable row ids, in mount order, used to expand `'all'`.
|
|
44
|
+
* @param disabledKeys Rows "select all" leaves out. Omitted when the table disables none.
|
|
45
|
+
* @param listeners The callbacks to notify. Each runs only when the consumer passed it.
|
|
46
|
+
* @returns Nothing. Each provided listener is called.
|
|
47
|
+
*/
|
|
48
|
+
const reportSelectionChange = (selection, rowKeys, disabledKeys, listeners) => {
|
|
49
|
+
listeners.onSelectionChange?.(selection);
|
|
50
|
+
listeners.onSelectedKeyChange?.(keyOfSelection(selection));
|
|
51
|
+
listeners.onSelectedKeysChange?.(keysOfSelection(selection, rowKeys, disabledKeys));
|
|
52
|
+
};
|
|
31
53
|
|
|
32
|
-
export { keyOfSelection, keysOfSelection, selectionOfKey };
|
|
54
|
+
export { hasSelectionListener, keyOfSelection, keysOfSelection, reportSelectionChange, selectionOfKey };
|
|
33
55
|
//# sourceMappingURL=table.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.utils.js","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,GAAe,KAAgB,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;AAE/F;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,SAAoB,KAAgB;IACjE,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,IAAI;AACpC,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS;IACzB,OAAO,KAAK,IAAI,IAAI;AACtB;AAEA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,OAAsB,EAAE,YAAA,GAA8B,EAAE,KAAW;IACvH,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,CAAC,GAAG,SAAS,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzD;;"}
|
|
1
|
+
{"version":3,"file":"table.utils.js","sources":["../../../../src/components/organisms/Table/table.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,GAAe,KAAgB,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC;AAE/F;;;;AAIG;AACI,MAAM,cAAc,GAAG,CAAC,SAAoB,KAAgB;IACjE,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,IAAI;AACpC,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS;IACzB,OAAO,KAAK,IAAI,IAAI;AACtB;AAEA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,OAAsB,EAAE,YAAA,GAA8B,EAAE,KAAW;IACvH,IAAI,SAAS,KAAK,KAAK;AAAE,QAAA,OAAO,CAAC,GAAG,SAAS,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzD;AAWA;;;;;;AAMG;AACI,MAAM,oBAAoB,GAAG,CAAC,SAAmC,KACtE,SAAS,CAAC,iBAAiB,KAAK,SAAS,IAAI,SAAS,CAAC,mBAAmB,KAAK,SAAS,IAAI,SAAS,CAAC,oBAAoB,KAAK;AAEjI;;;;;;;;AAQG;AACI,MAAM,qBAAqB,GAAG,CACnC,SAAoB,EACpB,OAAsB,EACtB,YAAuC,EACvC,SAAmC,KAC3B;AACR,IAAA,SAAS,CAAC,iBAAiB,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,mBAAmB,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAC1D,IAAA,SAAS,CAAC,oBAAoB,GAAG,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AACrF;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/ui-library",
|
|
3
|
-
"version": "0.45.
|
|
3
|
+
"version": "0.45.2",
|
|
4
4
|
"description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"imports": {
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
"@storybook/addon-a11y": "^10.5.8",
|
|
231
231
|
"@storybook/addon-docs": "^10.5.8",
|
|
232
232
|
"@storybook/addon-mcp": "^0.7.0",
|
|
233
|
-
"@storybook/addon-vitest": "10.6.
|
|
233
|
+
"@storybook/addon-vitest": "10.6.4",
|
|
234
234
|
"@storybook/react-vite": "^10.5.8",
|
|
235
235
|
"@tailwindcss/vite": "^4.3.1",
|
|
236
236
|
"@tanstack/react-query": "^5.104.3",
|