pixel-react 1.21.92 → 1.21.93
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/lib/components/AddResourceButton/AddResourceButton.js +55 -3
- package/lib/components/AddResourceButton/AddResourceButton.js.map +1 -1
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.js +1 -1
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.js.map +1 -1
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.js +108 -11
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.js +50 -4
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/Drawer/Drawer.js +67 -8
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.js +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Cell.js +4 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Cell.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.js +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.js +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/EditableCell.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/EditableCell.js +2 -2
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/EditableCell.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.js +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.js +118 -2
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.js +12 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.js.map +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +3 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.js +12 -5
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.js.map +1 -1
- package/lib/components/FileDropzone/Dropzone.js +2 -2
- package/lib/components/FileDropzone/Dropzone.js.map +1 -1
- package/lib/components/FileDropzone/FileDropzone.d.ts +9 -1
- package/lib/components/FileDropzone/FileDropzone.js +6 -2
- package/lib/components/FileDropzone/FileDropzone.js.map +1 -1
- package/lib/components/FileDropzone/FilePreview.js +41 -11
- package/lib/components/FileDropzone/FilePreview.js.map +1 -1
- package/lib/components/FileDropzone/RadioFilePreview.js +4 -2
- package/lib/components/FileDropzone/RadioFilePreview.js.map +1 -1
- package/lib/components/FileDropzone/RejectedFilePreview.d.ts +4 -0
- package/lib/components/FileDropzone/RejectedFilePreview.js +26 -0
- package/lib/components/FileDropzone/RejectedFilePreview.js.map +1 -0
- package/lib/components/FileDropzone/index.d.ts +3 -0
- package/lib/components/FileDropzone/index.js +3 -0
- package/lib/components/FileDropzone/index.js.map +1 -1
- package/lib/components/FileDropzone/types.d.ts +69 -0
- package/lib/components/Icon/Icon.js +42 -11
- package/lib/components/Icon/Icon.js.map +1 -1
- package/lib/components/Icon/types.d.ts +2 -0
- package/lib/components/Input/Input.js +9 -6
- package/lib/components/Input/Input.js.map +1 -1
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/MenuOption.js +86 -7
- package/lib/components/MenuOption/MenuOption.js.map +1 -1
- package/lib/components/MenuOption/types.d.ts +8 -0
- package/lib/components/MiniModal/MiniModal.js +61 -6
- package/lib/components/MiniModal/MiniModal.js.map +1 -1
- package/lib/components/Modal/Modal.js +29 -13
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/types.d.ts +7 -1
- package/lib/components/Search/Search.js +36 -3
- package/lib/components/Search/Search.js.map +1 -1
- package/lib/components/StatusCard/StatusCard.js +8 -1
- package/lib/components/StatusCard/StatusCard.js.map +1 -1
- package/lib/components/Table/Table.js +23 -2
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Table/Types.d.ts +5 -0
- package/lib/components/Table/components/SortableRow.js +2 -1
- package/lib/components/Table/components/SortableRow.js.map +1 -1
- package/lib/components/TableTreeFn/Components/TableCell.js +2 -2
- package/lib/components/TableTreeFn/Components/TableCell.js.map +1 -1
- package/lib/components/TableTreeFn/Components/TableHead.js +2 -2
- package/lib/components/TableTreeFn/Components/TableHead.js.map +1 -1
- package/lib/components/TableTreeFn/Components/TableRow.js +48 -4
- package/lib/components/TableTreeFn/Components/TableRow.js.map +1 -1
- package/lib/components/TableTreeFn/TableTreeFn.js +1 -1
- package/lib/components/TableTreeFn/TableTreeFn.js.map +1 -1
- package/lib/components/Tabs/Tabs.js +33 -3
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.js +35 -2
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Typography/Typography.js +44 -3
- package/lib/components/Typography/Typography.js.map +1 -1
- package/lib/hooks/useFileDropzone.js +7 -2
- package/lib/hooks/useFileDropzone.js.map +1 -1
- package/lib/hooks/useFocusTrap.d.ts +29 -0
- package/lib/hooks/useFocusTrap.js +97 -0
- package/lib/hooks/useFocusTrap.js.map +1 -0
- package/lib/hooks/useInteractiveAncestor.d.ts +7 -0
- package/lib/hooks/useInteractiveAncestor.js +18 -0
- package/lib/hooks/useInteractiveAncestor.js.map +1 -0
- package/lib/index.d.ts +135 -5
- package/lib/index.js +9 -9
- package/lib/index.js.map +1 -1
- package/lib/styles.css +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/a11y/a11y.d.ts +28 -0
- package/lib/utils/a11y/a11y.js +62 -0
- package/lib/utils/a11y/a11y.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Remembers the element that had focus when `isOpen` became true, read during
|
|
4
|
+
* render — before children with autoFocus take focus — so it can be restored.
|
|
5
|
+
*/
|
|
6
|
+
export declare const useOpenerElement: (isOpen: boolean) => import("react").MutableRefObject<HTMLElement | null>;
|
|
7
|
+
interface FocusTrapOptions {
|
|
8
|
+
active: boolean;
|
|
9
|
+
/** Element to focus on activation; defaults to the first focusable child. */
|
|
10
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
11
|
+
/** Return focus to the element that was focused before activation. */
|
|
12
|
+
restoreFocus?: boolean;
|
|
13
|
+
/** Explicit element to return focus to (see useOpenerElement). */
|
|
14
|
+
returnFocusRef?: RefObject<HTMLElement | null>;
|
|
15
|
+
/**
|
|
16
|
+
* Keep Tab/Shift+Tab inside the container (modal). When false, focus only
|
|
17
|
+
* moves in on activation and back out afterwards (non-modal panel).
|
|
18
|
+
*/
|
|
19
|
+
trapTab?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const isTopMostFocusTrap: (container: HTMLElement | null) => boolean;
|
|
22
|
+
export declare const getTopMostFocusTrap: () => HTMLElement | null;
|
|
23
|
+
/**
|
|
24
|
+
* Moves keyboard focus into a dialog when it opens, optionally keeps it there
|
|
25
|
+
* while it is modal, and restores it to the trigger afterwards — WCAG 2.4.3
|
|
26
|
+
* Focus Order and 2.1.2 No Keyboard Trap (focus is released on close).
|
|
27
|
+
*/
|
|
28
|
+
declare const useFocusTrap: (containerRef: RefObject<HTMLElement>, { active, initialFocusRef, restoreFocus, trapTab, returnFocusRef, }: FocusTrapOptions) => void;
|
|
29
|
+
export default useFocusTrap;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { getFocusableElements } from '../utils/a11y/a11y';
|
|
3
|
+
/**
|
|
4
|
+
* Remembers the element that had focus when `isOpen` became true, read during
|
|
5
|
+
* render — before children with autoFocus take focus — so it can be restored.
|
|
6
|
+
*/
|
|
7
|
+
export const useOpenerElement = (isOpen) => {
|
|
8
|
+
const openerRef = useRef(null);
|
|
9
|
+
const wasOpenRef = useRef(false);
|
|
10
|
+
if (isOpen && !wasOpenRef.current && typeof document !== 'undefined') {
|
|
11
|
+
const focused = document.activeElement;
|
|
12
|
+
openerRef.current =
|
|
13
|
+
focused instanceof HTMLElement && focused !== document.body
|
|
14
|
+
? focused
|
|
15
|
+
: null;
|
|
16
|
+
}
|
|
17
|
+
wasOpenRef.current = isOpen;
|
|
18
|
+
return openerRef;
|
|
19
|
+
};
|
|
20
|
+
// Traps are stacked so only the top-most dialog handles Tab and Escape.
|
|
21
|
+
const trapStack = [];
|
|
22
|
+
export const isTopMostFocusTrap = (container) => !!container && trapStack[trapStack.length - 1] === container;
|
|
23
|
+
export const getTopMostFocusTrap = () => trapStack[trapStack.length - 1] ?? null;
|
|
24
|
+
/**
|
|
25
|
+
* Moves keyboard focus into a dialog when it opens, optionally keeps it there
|
|
26
|
+
* while it is modal, and restores it to the trigger afterwards — WCAG 2.4.3
|
|
27
|
+
* Focus Order and 2.1.2 No Keyboard Trap (focus is released on close).
|
|
28
|
+
*/
|
|
29
|
+
const useFocusTrap = (containerRef, { active, initialFocusRef, restoreFocus = true, trapTab = true, returnFocusRef, }) => {
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
const container = containerRef.current;
|
|
32
|
+
if (!active || !container)
|
|
33
|
+
return undefined;
|
|
34
|
+
const focusedNow = document.activeElement instanceof HTMLElement
|
|
35
|
+
? document.activeElement
|
|
36
|
+
: null;
|
|
37
|
+
// Prefer the opener captured at render; otherwise whatever had focus,
|
|
38
|
+
// unless that is already inside the container (e.g. an autoFocus field).
|
|
39
|
+
const previouslyFocused = returnFocusRef?.current ??
|
|
40
|
+
(focusedNow && !container.contains(focusedNow) ? focusedNow : null);
|
|
41
|
+
if (trapTab)
|
|
42
|
+
trapStack.push(container);
|
|
43
|
+
// Deferred so children using autoFocus win, and portal content is laid out.
|
|
44
|
+
const frame = requestAnimationFrame(() => {
|
|
45
|
+
if (container.contains(document.activeElement))
|
|
46
|
+
return;
|
|
47
|
+
const target = initialFocusRef?.current ??
|
|
48
|
+
getFocusableElements(container)[0] ??
|
|
49
|
+
container;
|
|
50
|
+
target.focus({ preventScroll: true });
|
|
51
|
+
});
|
|
52
|
+
const handleKeyDown = (event) => {
|
|
53
|
+
if (event.key !== 'Tab' ||
|
|
54
|
+
// Composite widgets (e.g. a spreadsheet) may use Tab internally.
|
|
55
|
+
event.defaultPrevented ||
|
|
56
|
+
!isTopMostFocusTrap(container)) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const focusable = getFocusableElements(container);
|
|
60
|
+
const first = focusable[0];
|
|
61
|
+
const last = focusable[focusable.length - 1];
|
|
62
|
+
if (!first || !last) {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
container.focus({ preventScroll: true });
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
const activeElement = document.activeElement;
|
|
68
|
+
const focusIsOutside = !container.contains(activeElement);
|
|
69
|
+
if (event.shiftKey && (activeElement === first || focusIsOutside)) {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
last.focus();
|
|
72
|
+
}
|
|
73
|
+
else if (!event.shiftKey && (activeElement === last || focusIsOutside)) {
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
first.focus();
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
if (trapTab)
|
|
79
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
80
|
+
return () => {
|
|
81
|
+
cancelAnimationFrame(frame);
|
|
82
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
83
|
+
const index = trapStack.lastIndexOf(container);
|
|
84
|
+
if (index !== -1)
|
|
85
|
+
trapStack.splice(index, 1);
|
|
86
|
+
// Only restore when focus would otherwise be lost (inside the closing
|
|
87
|
+
// container or already on <body>), never steal it from elsewhere.
|
|
88
|
+
const focused = document.activeElement;
|
|
89
|
+
const focusWouldBeLost = !focused || focused === document.body || container.contains(focused);
|
|
90
|
+
if (restoreFocus && focusWouldBeLost && previouslyFocused?.isConnected) {
|
|
91
|
+
previouslyFocused.focus({ preventScroll: true });
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
}, [active, containerRef, initialFocusRef, restoreFocus, trapTab, returnFocusRef]);
|
|
95
|
+
};
|
|
96
|
+
export default useFocusTrap;
|
|
97
|
+
//# sourceMappingURL=useFocusTrap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* True when the element is rendered inside a control that already handles
|
|
4
|
+
* keyboard activation, so the element should not add its own tab stop.
|
|
5
|
+
*/
|
|
6
|
+
declare const useInteractiveAncestor: (ref: RefObject<HTMLElement>, enabled: boolean) => boolean;
|
|
7
|
+
export default useInteractiveAncestor;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useLayoutEffect, useState } from 'react';
|
|
2
|
+
import { hasInteractiveAncestor } from '../utils/a11y/a11y';
|
|
3
|
+
/**
|
|
4
|
+
* True when the element is rendered inside a control that already handles
|
|
5
|
+
* keyboard activation, so the element should not add its own tab stop.
|
|
6
|
+
*/
|
|
7
|
+
const useInteractiveAncestor = (ref, enabled) => {
|
|
8
|
+
const [isNested, setIsNested] = useState(false);
|
|
9
|
+
useLayoutEffect(() => {
|
|
10
|
+
if (!enabled)
|
|
11
|
+
return;
|
|
12
|
+
const nested = hasInteractiveAncestor(ref.current);
|
|
13
|
+
setIsNested((previous) => (previous === nested ? previous : nested));
|
|
14
|
+
}, [enabled, ref]);
|
|
15
|
+
return enabled && isNested;
|
|
16
|
+
};
|
|
17
|
+
export default useInteractiveAncestor;
|
|
18
|
+
//# sourceMappingURL=useInteractiveAncestor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInteractiveAncestor.js","sourceRoot":"","sources":["../../src/hooks/useInteractiveAncestor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;;GAGG;AACH,MAAM,sBAAsB,GAAG,CAC7B,GAA2B,EAC3B,OAAgB,EAChB,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACnD,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAEnB,OAAO,OAAO,IAAI,QAAQ,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default, { ReactNode, FC, RefObject, LegacyRef, CSSProperties, ReactElement, Ref, ComponentProps, Component, ErrorInfo } from 'react';
|
|
2
|
+
import React__default, { ReactNode, FC, KeyboardEventHandler, RefObject, LegacyRef, CSSProperties, ReactElement, Ref, ComponentProps, Component, ErrorInfo, KeyboardEvent } from 'react';
|
|
3
3
|
import * as LazyLoad from 'react-window';
|
|
4
4
|
export { LazyLoad };
|
|
5
5
|
import * as Form from 'react-hook-form';
|
|
@@ -400,6 +400,7 @@ interface IconProps$2 {
|
|
|
400
400
|
width?: number;
|
|
401
401
|
color?: string;
|
|
402
402
|
onClick?: (data?: any) => void;
|
|
403
|
+
onKeyDown?: KeyboardEventHandler<Element>;
|
|
403
404
|
hoverEffect?: boolean;
|
|
404
405
|
isSelected?: boolean;
|
|
405
406
|
disabled?: boolean;
|
|
@@ -1268,6 +1269,8 @@ interface MenuOptionProps {
|
|
|
1268
1269
|
* @optional
|
|
1269
1270
|
*/
|
|
1270
1271
|
labelName?: string;
|
|
1272
|
+
/** Accessible name of the trigger when the icon alone does not describe it */
|
|
1273
|
+
ariaLabel?: string;
|
|
1271
1274
|
/**
|
|
1272
1275
|
* The name of the icon to be displayed.
|
|
1273
1276
|
* @type {string}
|
|
@@ -1366,7 +1369,7 @@ interface MenuOptionProps {
|
|
|
1366
1369
|
selectedValue?: string;
|
|
1367
1370
|
}
|
|
1368
1371
|
|
|
1369
|
-
declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, variant, zIndex, dropdownPlacement, optionCardVariant, targetRef, treeRowRef, isAddResourceButton, disabled, alignOption, displayCard, didMouseEntered, tableMenu, dropdownHeight, selectedValue, }: MenuOptionProps) => React$1.JSX.Element;
|
|
1372
|
+
declare const MenuOption: ({ labelName, ariaLabel, iconName, tooltipTitle, tooltipPlacement, options, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, variant, zIndex, dropdownPlacement, optionCardVariant, targetRef, treeRowRef, isAddResourceButton, disabled, alignOption, displayCard, didMouseEntered, tableMenu, dropdownHeight, selectedValue, }: MenuOptionProps) => React$1.JSX.Element;
|
|
1370
1373
|
|
|
1371
1374
|
interface DataProps$3 {
|
|
1372
1375
|
/**
|
|
@@ -1519,6 +1522,11 @@ interface TableProps$2 {
|
|
|
1519
1522
|
};
|
|
1520
1523
|
uniqueRowIdForAccordion?: string | number;
|
|
1521
1524
|
openAccordionId?: string | number | null;
|
|
1525
|
+
/**
|
|
1526
|
+
* Accessible name of the scrollable table region, announced when it
|
|
1527
|
+
* receives keyboard focus
|
|
1528
|
+
*/
|
|
1529
|
+
ariaLabel?: string;
|
|
1522
1530
|
}
|
|
1523
1531
|
|
|
1524
1532
|
declare const Table: React$1.ForwardRefExoticComponent<TableProps$2 & React$1.RefAttributes<any>>;
|
|
@@ -1720,6 +1728,13 @@ interface FileDropzoneProps {
|
|
|
1720
1728
|
showRejectedFileDetails?: boolean;
|
|
1721
1729
|
disabledDragAndDrop?: boolean;
|
|
1722
1730
|
tooltipPosition?: TooltipPosition;
|
|
1731
|
+
/**
|
|
1732
|
+
* Controls whether the built-in accepted-file preview list is rendered.
|
|
1733
|
+
* Defaults to true. Set to false to compose a custom layout using the
|
|
1734
|
+
* FileDropzone.AcceptedFilePreview / FileDropzone.RejectedFilePreview
|
|
1735
|
+
* subcomponents together with getAcceptedFiles / getRejectedFiles.
|
|
1736
|
+
**/
|
|
1737
|
+
showPreview?: boolean;
|
|
1723
1738
|
}
|
|
1724
1739
|
interface FileError {
|
|
1725
1740
|
message: string;
|
|
@@ -1778,6 +1793,23 @@ interface DroppableProps {
|
|
|
1778
1793
|
setFileContent?: (data: string) => void;
|
|
1779
1794
|
fileContent?: string;
|
|
1780
1795
|
}
|
|
1796
|
+
interface FilePreviewAction {
|
|
1797
|
+
/**
|
|
1798
|
+
* Unique key for the action, also used to derive a CSS hook
|
|
1799
|
+
* (ff-file-actions__icon-{key}) for styling a specific action.
|
|
1800
|
+
**/
|
|
1801
|
+
key: string;
|
|
1802
|
+
/**
|
|
1803
|
+
* Icon name (rendered via the Icon component) or a fully custom node.
|
|
1804
|
+
**/
|
|
1805
|
+
icon: ReactNode | string;
|
|
1806
|
+
tooltip?: string;
|
|
1807
|
+
ariaLabel?: string;
|
|
1808
|
+
disabled?: boolean;
|
|
1809
|
+
hidden?: boolean;
|
|
1810
|
+
color?: string;
|
|
1811
|
+
onClick: (file: File) => void;
|
|
1812
|
+
}
|
|
1781
1813
|
interface FilePreviewProps {
|
|
1782
1814
|
file: File;
|
|
1783
1815
|
error?: string;
|
|
@@ -1790,14 +1822,65 @@ interface FilePreviewProps {
|
|
|
1790
1822
|
isError?: boolean;
|
|
1791
1823
|
isIndependentPreview?: boolean;
|
|
1792
1824
|
tooltipPosition?: TooltipPosition;
|
|
1825
|
+
/**
|
|
1826
|
+
* Overrides the leading file icon. Defaults to the built-in file icon.
|
|
1827
|
+
**/
|
|
1828
|
+
icon?: ReactNode;
|
|
1829
|
+
/**
|
|
1830
|
+
* Overrides how the file name is rendered. Defaults to a truncated,
|
|
1831
|
+
* tooltip-wrapped Typography of file.name.
|
|
1832
|
+
**/
|
|
1833
|
+
renderFileName?: (file: File) => ReactNode;
|
|
1834
|
+
/**
|
|
1835
|
+
* Overrides how the error message is rendered when isError is true.
|
|
1836
|
+
**/
|
|
1837
|
+
renderError?: (error?: string) => ReactNode;
|
|
1838
|
+
/**
|
|
1839
|
+
* Fully replaces the default replace/remove/upload action buttons with
|
|
1840
|
+
* a custom, config-driven set of actions.
|
|
1841
|
+
**/
|
|
1842
|
+
actions?: FilePreviewAction[];
|
|
1843
|
+
className?: string;
|
|
1844
|
+
}
|
|
1845
|
+
interface RejectedFilePreviewProps {
|
|
1846
|
+
fileRejection: FileRejection;
|
|
1847
|
+
onRemoveClick?: (file: File) => void;
|
|
1848
|
+
tooltipPosition?: TooltipPosition;
|
|
1849
|
+
/**
|
|
1850
|
+
* Overrides the leading icon. Defaults to the built-in alert icon.
|
|
1851
|
+
**/
|
|
1852
|
+
icon?: ReactNode;
|
|
1853
|
+
/**
|
|
1854
|
+
* Overrides how the file name is rendered. Defaults to a truncated,
|
|
1855
|
+
* tooltip-wrapped Typography of file.name.
|
|
1856
|
+
**/
|
|
1857
|
+
renderFileName?: (file: File) => ReactNode;
|
|
1858
|
+
/**
|
|
1859
|
+
* Overrides how the rejection reasons are rendered. Defaults to the
|
|
1860
|
+
* joined error messages.
|
|
1861
|
+
**/
|
|
1862
|
+
renderError?: (errors: FileError[]) => ReactNode;
|
|
1863
|
+
/**
|
|
1864
|
+
* Fully replaces the default remove action button with a custom,
|
|
1865
|
+
* config-driven set of actions.
|
|
1866
|
+
**/
|
|
1867
|
+
actions?: FilePreviewAction[];
|
|
1868
|
+
className?: string;
|
|
1793
1869
|
}
|
|
1794
|
-
|
|
1795
|
-
declare const FileDropzone: React.FC<FileDropzoneProps>;
|
|
1796
1870
|
|
|
1797
1871
|
declare const Dropzone: FC<DroppableProps>;
|
|
1798
1872
|
|
|
1799
1873
|
declare const FilePreview: React.FC<FilePreviewProps>;
|
|
1800
1874
|
|
|
1875
|
+
declare const RejectedFilePreview: React.FC<RejectedFilePreviewProps>;
|
|
1876
|
+
|
|
1877
|
+
type FileDropzoneComponent = React.FC<FileDropzoneProps> & {
|
|
1878
|
+
Dropzone: typeof Dropzone;
|
|
1879
|
+
AcceptedFilePreview: typeof FilePreview;
|
|
1880
|
+
RejectedFilePreview: typeof RejectedFilePreview;
|
|
1881
|
+
};
|
|
1882
|
+
declare const FileDropzone: FileDropzoneComponent;
|
|
1883
|
+
|
|
1801
1884
|
type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
|
|
1802
1885
|
interface ThemeContextType {
|
|
1803
1886
|
currentTheme: Theme;
|
|
@@ -2792,6 +2875,12 @@ interface ModalProps {
|
|
|
2792
2875
|
ariaHideApp?: boolean;
|
|
2793
2876
|
/*** Whether the modal should close when clicking outside of it (on the overlay) */
|
|
2794
2877
|
shouldCloseOnOverlayClick?: boolean;
|
|
2878
|
+
/*** Keep keyboard focus inside the dialog while it is open (WCAG 2.4.3) */
|
|
2879
|
+
trapFocus?: boolean;
|
|
2880
|
+
/*** Return focus to the triggering element after the dialog closes */
|
|
2881
|
+
shouldReturnFocusAfterClose?: boolean;
|
|
2882
|
+
/*** Element to focus when the dialog opens; defaults to the first focusable element */
|
|
2883
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
2795
2884
|
headerContent?: string | ReactNode;
|
|
2796
2885
|
footerContent?: ReactNode;
|
|
2797
2886
|
/***Content to be displayed inside the modal */
|
|
@@ -6568,5 +6657,46 @@ interface DotLoaderProps {
|
|
|
6568
6657
|
|
|
6569
6658
|
declare const DotLoader: ({ dotCount, label, labelFontSize, labelFontWeight, dotFontSize, dotFontWeight }: DotLoaderProps) => React$1.JSX.Element;
|
|
6570
6659
|
|
|
6571
|
-
|
|
6660
|
+
interface FocusTrapOptions {
|
|
6661
|
+
active: boolean;
|
|
6662
|
+
/** Element to focus on activation; defaults to the first focusable child. */
|
|
6663
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
6664
|
+
/** Return focus to the element that was focused before activation. */
|
|
6665
|
+
restoreFocus?: boolean;
|
|
6666
|
+
/** Explicit element to return focus to (see useOpenerElement). */
|
|
6667
|
+
returnFocusRef?: RefObject<HTMLElement | null>;
|
|
6668
|
+
/**
|
|
6669
|
+
* Keep Tab/Shift+Tab inside the container (modal). When false, focus only
|
|
6670
|
+
* moves in on activation and back out afterwards (non-modal panel).
|
|
6671
|
+
*/
|
|
6672
|
+
trapTab?: boolean;
|
|
6673
|
+
}
|
|
6674
|
+
declare const isTopMostFocusTrap: (container: HTMLElement | null) => boolean;
|
|
6675
|
+
/**
|
|
6676
|
+
* Moves keyboard focus into a dialog when it opens, optionally keeps it there
|
|
6677
|
+
* while it is modal, and restores it to the trigger afterwards — WCAG 2.4.3
|
|
6678
|
+
* Focus Order and 2.1.2 No Keyboard Trap (focus is released on close).
|
|
6679
|
+
*/
|
|
6680
|
+
declare const useFocusTrap: (containerRef: RefObject<HTMLElement>, { active, initialFocusRef, restoreFocus, trapTab, returnFocusRef, }: FocusTrapOptions) => void;
|
|
6681
|
+
|
|
6682
|
+
declare const isActivationKey: (key: string) => key is "Enter" | " " | "Spacebar";
|
|
6683
|
+
declare const getFocusableElements: (container: HTMLElement | null) => HTMLElement[];
|
|
6684
|
+
interface ButtonA11yOptions<T extends HTMLElement> {
|
|
6685
|
+
onActivate: (event: KeyboardEvent<T>) => void;
|
|
6686
|
+
disabled?: boolean;
|
|
6687
|
+
role?: 'button' | 'link';
|
|
6688
|
+
}
|
|
6689
|
+
/**
|
|
6690
|
+
* Makes a non-semantic element (div/span) keyboard operable like a native
|
|
6691
|
+
* button or link — WCAG 2.1.1 Keyboard and 4.1.2 Name, Role, Value.
|
|
6692
|
+
* Links activate on Enter only, buttons on Enter and Space.
|
|
6693
|
+
*/
|
|
6694
|
+
declare const getButtonA11yProps: <T extends HTMLElement>({ onActivate, disabled, role, }: ButtonA11yOptions<T>) => {
|
|
6695
|
+
role: "button" | "link";
|
|
6696
|
+
tabIndex: number;
|
|
6697
|
+
'aria-disabled': true | undefined;
|
|
6698
|
+
onKeyDown: (event: KeyboardEvent<T>) => void;
|
|
6699
|
+
};
|
|
6700
|
+
|
|
6701
|
+
export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHABET_WITH_SPACES_ONLY_REGEX, ALPHANUMERIC_PARENTHESIS_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_DOT_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, ALPHA_NUM_EXTENDED_REGEX, ALPHA_NUM_REGEX, Accordion, AddContentButton, AddResourceButton, AiToggle, AllProjectsDropdown, AnimatedSetting, AppHeader, AttachMedia, AttachmentButton, AudioPlayer, AutoTruncateText, Avatar, BASE64_REGEX, BIG_END_WHITESPACE, BINARY_NUMBER_REGEX, BODY_TAG_TYPE_VALIDATION, BarChart, Card as Box, BrowserTabs, Button, CAMEL_CASE_REGEX, CERTIFICATES_NAME_REGEX, CHECK_CAMEL_CASE, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, CardPanel, ChatModal, ChatModalAi, Checkbox, Chip, ChipWithCount, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, ContentCard, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DYNAMIC_VALUE_PATTERN_REGEX, DYNAMIC_VALUE_TYPE_REGEX, DYNAMIC_VALUE_WITH_VALID_BRACKETS_REGEX, DYNAMIC_VALUE__PLACEHOLDER_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DebugToolsPanel, DonutChart, DotLoader, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_FORMAT_REGEX, EMAIL_REGEX, EMAIL_VALIDATION_REGEX, EXCEL_SPACING_REGEX, EXECUTION_ID_VALIDATION, EditLabel, EditTextField, Editor, ErrorBoundary, ExcelFile as Excel, ExpandableMenu, FILENAME_VALIDATION_REGEX, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_FILE_TYPE_VALIDATION, HTML_TAG_REGEX, HighlightText, HistoryCard, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, INVALID_EMAIL_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, JAVASCRIPT_FILE_TYPE_VALIDATION, LINKEDIN_PROFILE_REGEX, LINK_VALIDATION_REGEX, LabelEditTextField, LayoutWithDrawer, LineChart, LineLoader, Link, Loader, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MediaPreview, MediaViewerModal as MediaViewerModel, MenuOption, MessageBox, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NO_LEADING_TRAILING_SPACE_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, NetworkErrorBoundary, NoDataAvailable, NoDataContent, NoResultFound, OsTree, OtpVerification, OverviewModal, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, PrePostTable, ProcessedSourceSelector, ProgressBar, Prompt, PromptContainer, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, RejectedFilePreview, Row, SCRIPT_REGEX, SERVER_HOST_REGEX, SSN_REGEX, START_END_WHITESPACE_REGEX, STEP_GROUP_NAME_REGEX, ScoreGaugeChart, ScriptGenerationLoader, ScriptSwitchButton, Search, Select, SelectionSwitcher, SequentialConnectingBranch, SessionDropdown, SessionManager, StackedBarChart, StateDropdown, StatusBadge, StatusButton, StatusCard, StatusIndicator, StepLandingTable, StepResultStats, StorageUsageBar, SwitchButton, TIME_REGEX, TWITTER_HANDLE_REGEX, Table, TreeTable as TableTree, TableTreeFn, TableWithAccordion, Tabs, TabsWithSilder, Textarea as TextArea, TextEditor, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, TooltipService, TruncatedTooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VALID_NAME_PATTERN, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, VariableSuggestionInputDropDown, WHITESPACE_REGEX, WeightageTable, XML_FILE_TYPE_VALIDATION, ZoomControl, addPrePostStepGroup, addStepGroup, autoScrollToTableLastRow, capitalize, checkEmpty, checkMicrophoneAccess, cleanAllTooltips, clearStore, compareArrays, compareObjects, computeTreeCountsAndFormatNodes, convertFormDataToObject, convertToBytes, convertToGB, convertToISO, copyToClipboard, debounce, deleteStoreValue, ffid, findAndInsert, formatDate, formatResponseDate, getButtonA11yProps, getEncryptedData, getExtension, getExtensionWithPeriod, getFiltersFromUrl, getFocusableElements, getNavigateToKey, getSequentialPayload, getStoreValue, getTopVisibleNodeKey, getTreeDetails, handleTimeZoneChange, handleTreeExpandAllCollapseAll, handleTreeNodeExpandCollapse, handleTreeNodeSect, handleUnCheckAllTreeNodesWithUpdates, hasDuplicateFile, isActivationKey, isEmptyObject, isTextTruncated, isTopMostFocusTrap, nlpInputDelay, passesFilters, rearrangeDragItem, restoreSelectedFilters, saveFileFromBlob, scrollToView, setStoreValue, throttle, toCamelCase, toast, toggleShowHideEntity, truncateText, updateSearchTree, updateTreeState, useBeforeUnload, useClickOutside, useDeviceType, useFileDropzone, useFocusTrap, useKeyboardActions, useTheme, useTriggerControl, validateFileContent };
|
|
6572
6702
|
export type { RootNode$1 as RootNode, TreeNodeProps, WeightageCellRenderProps, WeightageColumnLabels, WeightageGroup, WeightageRow, WeightageTableProps };
|