@fabio.caffarello/react-design-system 1.23.17 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -13
- package/dist/index.cjs +204 -375
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +7399 -6914
- package/dist/index.js.map +1 -1
- package/dist/react-design-system.css +1 -1
- package/dist/ui/components/Accordion/Accordion.d.ts +1 -1
- package/dist/ui/components/Autocomplete/Autocomplete.d.ts +0 -1
- package/dist/ui/components/Autocomplete/AutocompleteList.d.ts +1 -1
- package/dist/ui/components/Autocomplete/index.d.ts +1 -1
- package/dist/ui/components/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/ui/components/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/ui/components/Card/Card.d.ts +1 -1
- package/dist/ui/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/dist/ui/components/CommandPalette/CommandPalette.d.ts +1 -1
- package/dist/ui/components/DashboardLayout/DashboardLayout.d.ts +1 -1
- package/dist/ui/components/DataGrid/DataGrid.d.ts +27 -4
- package/dist/ui/components/DataTablePattern/DataTablePattern.d.ts +1 -1
- package/dist/ui/components/DatePicker/DatePicker.d.ts +4 -4
- package/dist/ui/components/DatePicker/DatePickerCalendar.d.ts +1 -1
- package/dist/ui/components/DatePicker/DatePickerInput.d.ts +1 -1
- package/dist/ui/components/DatePicker/DatePickerProvider.d.ts +1 -1
- package/dist/ui/components/Dialog/AlertDialog.d.ts +1 -1
- package/dist/ui/components/Dialog/Dialog.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogClose.d.ts +6 -2
- package/dist/ui/components/Dialog/DialogContent.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogDescription.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogFooter.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogHeader.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogTitle.d.ts +1 -1
- package/dist/ui/components/Dialog/DialogTrigger.d.ts +6 -2
- package/dist/ui/components/Drawer/Drawer.d.ts +1 -1
- package/dist/ui/components/Drawer/DrawerContext.d.ts +1 -1
- package/dist/ui/components/Drawer/DrawerFooter.d.ts +1 -1
- package/dist/ui/components/Drawer/DrawerHeader.d.ts +1 -1
- package/dist/ui/components/Dropdown/Dropdown.d.ts +2 -1
- package/dist/ui/components/EmptyState/EmptyState.d.ts +1 -1
- package/dist/ui/components/FileUpload/FileUpload.d.ts +1 -1
- package/dist/ui/components/Form/Form.d.ts +1 -1
- package/dist/ui/components/Form/FormContext.d.ts +15 -4
- package/dist/ui/components/Form/FormField.d.ts +3 -3
- package/dist/ui/components/Form/FormProvider.d.ts +1 -1
- package/dist/ui/components/Form/useFormFieldArray.d.ts +2 -2
- package/dist/ui/components/FormWizardPattern/FormWizardPattern.d.ts +1 -1
- package/dist/ui/components/Header/Header.d.ts +1 -1
- package/dist/ui/components/Header/components/HeaderActions.d.ts +1 -1
- package/dist/ui/components/Header/components/HeaderHamburger.d.ts +2 -2
- package/dist/ui/components/Header/components/HeaderLogo.d.ts +1 -1
- package/dist/ui/components/Header/components/HeaderMobileMenu.d.ts +1 -1
- package/dist/ui/components/Header/components/HeaderNavigation.d.ts +1 -1
- package/dist/ui/components/Header/contexts/HeaderContext.d.ts +1 -1
- package/dist/ui/components/LoginBox/LoginBox.d.ts +1 -1
- package/dist/ui/components/Menu/Menu.d.ts +1 -1
- package/dist/ui/components/Menu/MenuContext.d.ts +1 -1
- package/dist/ui/components/Menu/MenuSeparator.d.ts +1 -1
- package/dist/ui/components/Modal/Modal.d.ts +1 -1
- package/dist/ui/components/Navigation/Navigation.d.ts +1 -1
- package/dist/ui/components/PageHeader/PageHeader.d.ts +1 -1
- package/dist/ui/components/Pagination/Pagination.d.ts +1 -1
- package/dist/ui/components/Popover/Popover.d.ts +1 -1
- package/dist/ui/components/Rating/Rating.d.ts +1 -1
- package/dist/ui/components/SearchAndFilterPattern/SearchAndFilterPattern.d.ts +1 -1
- package/dist/ui/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/ui/components/SideNavbar/SideNavbar.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Navbar/Navbar.d.ts +2 -1
- package/dist/ui/components/SideNavbar/components/Navbar/NavbarGroup.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Navbar/NavbarItem.d.ts +2 -1
- package/dist/ui/components/SideNavbar/components/Navbar/NavbarSeparator.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Navbar/NavbarToggle.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/SideNavbarBackdrop.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/SideNavbarGroup.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/SideNavbarResizeHandle.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/SideNavbarRoot.d.ts +2 -1
- package/dist/ui/components/SideNavbar/components/SideNavbarToggle.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/Sidebar.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarContent.d.ts +2 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarFooter.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarGroup.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarHeader.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarSlot.d.ts +1 -1
- package/dist/ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.d.ts +1 -1
- package/dist/ui/components/SideNavbar/hooks/useSideNavbar.d.ts +3 -3
- package/dist/ui/components/SideNavbar/providers/SideNavbarConfigProvider.d.ts +1 -1
- package/dist/ui/components/SideNavbar/providers/SideNavbarProvider.d.ts +1 -1
- package/dist/ui/components/SideNavbar/providers/SideNavbarStateProvider.d.ts +1 -1
- package/dist/ui/components/SideNavbar/providers/SideNavbarThemeProvider.d.ts +1 -1
- package/dist/ui/components/SideNavbar/providers/SidebarSlotProvider.d.ts +1 -1
- package/dist/ui/components/SideNavbar/types/index.d.ts +31 -3
- package/dist/ui/components/Stepper/Stepper.d.ts +1 -1
- package/dist/ui/components/Table/Table.d.ts +1 -1
- package/dist/ui/components/Table/TableActions/TableActions.d.ts +1 -1
- package/dist/ui/components/Table/TableActions.d.ts +1 -1
- package/dist/ui/components/Table/TableBody.d.ts +2 -2
- package/dist/ui/components/Table/TableCell.d.ts +1 -1
- package/dist/ui/components/Table/TableContext.d.ts +20 -2
- package/dist/ui/components/Table/TableEmptyState.d.ts +1 -1
- package/dist/ui/components/Table/TableFilters/TableFilters.d.ts +1 -1
- package/dist/ui/components/Table/TableFilters.d.ts +1 -1
- package/dist/ui/components/Table/TableHeader.d.ts +1 -1
- package/dist/ui/components/Table/TableHeaderCell.d.ts +1 -1
- package/dist/ui/components/Table/TableHeaderRow.d.ts +1 -1
- package/dist/ui/components/Table/TablePagination/TablePagination.d.ts +1 -1
- package/dist/ui/components/Table/TablePagination.d.ts +1 -1
- package/dist/ui/components/Table/TableProvider.d.ts +1 -1
- package/dist/ui/components/Table/TableRow.d.ts +1 -1
- package/dist/ui/components/Tabs/TabsContent.d.ts +1 -1
- package/dist/ui/components/Tabs/TabsList.d.ts +12 -3
- package/dist/ui/components/Tabs/TabsProvider.d.ts +1 -1
- package/dist/ui/components/Tabs/TabsTrigger.d.ts +1 -1
- package/dist/ui/components/TimePicker/TimePicker.d.ts +1 -1
- package/dist/ui/components/Timeline/Timeline.d.ts +1 -1
- package/dist/ui/components/Toast/Toast.d.ts +1 -1
- package/dist/ui/components/Toast/ToastContainer.d.ts +1 -1
- package/dist/ui/components/index.d.ts +1 -1
- package/dist/ui/hooks/createGenericContext.d.ts +85 -0
- package/dist/ui/hooks/focusable.d.ts +33 -0
- package/dist/ui/hooks/useAutoFocus.d.ts +37 -0
- package/dist/ui/hooks/useFocusRestore.d.ts +28 -0
- package/dist/ui/hooks/useFocusTrap.d.ts +33 -0
- package/dist/ui/primitives/Avatar/AvatarGroup.d.ts +1 -1
- package/dist/ui/primitives/Checkbox/Checkbox.d.ts +9 -0
- package/dist/ui/primitives/Collapsible/Collapsible.d.ts +8 -2
- package/dist/ui/primitives/ErrorMessage/ErrorMessage.d.ts +1 -1
- package/dist/ui/primitives/Info/Info.d.ts +1 -1
- package/dist/ui/primitives/NavLink/NavLink.d.ts +12 -1
- package/dist/ui/primitives/Radio/Radio.d.ts +9 -0
- package/dist/ui/primitives/Separator/Separator.d.ts +1 -1
- package/dist/ui/primitives/Skeleton/Skeleton.d.ts +1 -1
- package/dist/ui/primitives/Spinner/Spinner.d.ts +1 -1
- package/dist/ui/primitives/Switch/Switch.d.ts +16 -2
- package/dist/ui/primitives/Text/Text.d.ts +0 -1
- package/dist/ui/primitives/Textarea/Textarea.d.ts +18 -0
- package/dist/ui/primitives/Tooltip/Tooltip.d.ts +2 -1
- package/dist/ui/providers/AppProvider.d.ts +1 -1
- package/dist/ui/providers/ConfigProvider.d.ts +1 -1
- package/dist/ui/providers/DialogProvider.d.ts +1 -1
- package/dist/ui/providers/ThemeProvider.d.ts +1 -1
- package/dist/ui/providers/ToastProvider.d.ts +1 -1
- package/dist/ui/tokens/TokenVisualizations.d.ts +8 -8
- package/dist/ui/tokens/spacing.d.ts +1 -1
- package/dist/ui/utils/index.d.ts +1 -0
- package/dist/ui/utils/mergeRefs.d.ts +16 -0
- package/package.json +56 -35
- package/dist/ui/components/Dialog/DialogContext.d.ts +0 -10
- package/dist/ui/components/Dialog/DialogProvider.d.ts +0 -10
- package/dist/ui/components/Toast/ToastContext.d.ts +0 -21
- package/dist/ui/components/Toast/ToastProvider.d.ts +0 -7
|
@@ -37,4 +37,4 @@ export interface SidebarSlotProps {
|
|
|
37
37
|
* </SideNavbar>
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
|
-
export declare function SidebarSlot({ id, children }: SidebarSlotProps): import("react
|
|
40
|
+
export declare function SidebarSlot({ id, children }: SidebarSlotProps): import("react").JSX.Element | null;
|
|
@@ -26,4 +26,4 @@ export interface SidebarSlotContentProps {
|
|
|
26
26
|
* </SideNavbar.Sidebar>
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare function SidebarSlotContent({ fallback, }: SidebarSlotContentProps): import("react
|
|
29
|
+
export declare function SidebarSlotContent({ fallback, }: SidebarSlotContentProps): import("react").JSX.Element;
|
|
@@ -29,7 +29,7 @@ export { useSideNavbarContent } from "./useSideNavbarContent";
|
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
31
|
export declare function useSideNavbarCombined(): {
|
|
32
|
-
theme:
|
|
33
|
-
config:
|
|
34
|
-
state:
|
|
32
|
+
theme: import("..").SideNavbarThemeContextValue;
|
|
33
|
+
config: import("..").SideNavbarConfigContextValue;
|
|
34
|
+
state: import("..").SideNavbarStateContextValue;
|
|
35
35
|
};
|
|
@@ -14,5 +14,5 @@ import type { SideNavbarConfigProviderProps } from "../types";
|
|
|
14
14
|
* </SideNavbarConfigProvider>
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
|
-
export declare function SideNavbarConfigProvider({ children, mode, resizable, minWidth, maxWidth, snapPoints, responsive, mobileBreakpoint, mobileVariant, overlayBackdrop, persistState, persistWidth, storageKey, keyboardShortcut, enableKeyboardShortcut, }: SideNavbarConfigProviderProps): import("react
|
|
17
|
+
export declare function SideNavbarConfigProvider({ children, mode, resizable, minWidth, maxWidth, snapPoints, responsive, mobileBreakpoint, mobileVariant, overlayBackdrop, persistState, persistWidth, storageKey, keyboardShortcut, enableKeyboardShortcut, }: SideNavbarConfigProviderProps): import("react").JSX.Element;
|
|
18
18
|
export default SideNavbarConfigProvider;
|
|
@@ -22,5 +22,5 @@ import type { SideNavbarProviderProps } from "../types";
|
|
|
22
22
|
* </SideNavbarProvider>
|
|
23
23
|
* ```
|
|
24
24
|
*/
|
|
25
|
-
export declare function SideNavbarProvider({ children, variant, navigationWidth, contentWidth, animationDuration, animationEasing, mode, resizable, minWidth, maxWidth, snapPoints, responsive, mobileBreakpoint, mobileVariant, overlayBackdrop, persistState, persistWidth, storageKey, keyboardShortcut, enableKeyboardShortcut, defaultCollapsed, collapsed, onCollapseChange, onWidthChange, onMobileChange, exclusiveGroups, }: SideNavbarProviderProps): import("react
|
|
25
|
+
export declare function SideNavbarProvider({ children, variant, navigationWidth, contentWidth, animationDuration, animationEasing, mode, resizable, minWidth, maxWidth, snapPoints, responsive, mobileBreakpoint, mobileVariant, overlayBackdrop, persistState, persistWidth, storageKey, keyboardShortcut, enableKeyboardShortcut, defaultCollapsed, collapsed, onCollapseChange, onWidthChange, onMobileChange, exclusiveGroups, }: SideNavbarProviderProps): import("react").JSX.Element;
|
|
26
26
|
export default SideNavbarProvider;
|
|
@@ -18,5 +18,5 @@ import type { SideNavbarStateProviderProps } from "../types";
|
|
|
18
18
|
* </SideNavbarThemeProvider>
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
export declare function SideNavbarStateProvider({ children, defaultCollapsed, collapsed: controlledCollapsed, onCollapseChange, onWidthChange, onMobileChange, exclusiveGroups, }: SideNavbarStateProviderProps): import("react
|
|
21
|
+
export declare function SideNavbarStateProvider({ children, defaultCollapsed, collapsed: controlledCollapsed, onCollapseChange, onWidthChange, onMobileChange, exclusiveGroups, }: SideNavbarStateProviderProps): import("react").JSX.Element;
|
|
22
22
|
export default SideNavbarStateProvider;
|
|
@@ -16,5 +16,5 @@ import type { SideNavbarThemeProviderProps } from "../types";
|
|
|
16
16
|
* </SideNavbarThemeProvider>
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
|
-
export declare function SideNavbarThemeProvider({ children, variant, navigationWidth, contentWidth, animationDuration, animationEasing, }: SideNavbarThemeProviderProps): import("react
|
|
19
|
+
export declare function SideNavbarThemeProvider({ children, variant, navigationWidth, contentWidth, animationDuration, animationEasing, }: SideNavbarThemeProviderProps): import("react").JSX.Element;
|
|
20
20
|
export default SideNavbarThemeProvider;
|
|
@@ -31,4 +31,4 @@ import type { SidebarSlotProviderProps } from "../types";
|
|
|
31
31
|
* </SideNavbar>
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
|
-
export declare function SidebarSlotProvider({ children, defaultSlot, }: SidebarSlotProviderProps): import("react
|
|
34
|
+
export declare function SidebarSlotProvider({ children, defaultSlot, }: SidebarSlotProviderProps): import("react").JSX.Element;
|
|
@@ -395,9 +395,37 @@ export interface NavbarItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
|
|
|
395
395
|
* Navbar props with expanded mode and label support (defined below)
|
|
396
396
|
*/
|
|
397
397
|
export interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
398
|
-
/**
|
|
398
|
+
/**
|
|
399
|
+
* Per-Navbar override for the SideNavbar's main toggle button's
|
|
400
|
+
* visibility. When set, takes precedence over the root SideNavbar's
|
|
401
|
+
* `showToggle` prop. The toggle continues to render at the `<aside>`
|
|
402
|
+
* level (same DOM position as the default global toggle); only its
|
|
403
|
+
* visibility changes.
|
|
404
|
+
*
|
|
405
|
+
* Resolution is render-driven and SSR-safe — the value applies on
|
|
406
|
+
* the first commit without effects.
|
|
407
|
+
*
|
|
408
|
+
* Override is a single-Navbar feature. If multiple
|
|
409
|
+
* `<SideNavbar.Navbar>` children set overrides simultaneously, the
|
|
410
|
+
* first in tree order wins and the others are ignored — dev mode
|
|
411
|
+
* warns when this happens (mirrors React's duplicate-key warning).
|
|
412
|
+
*
|
|
413
|
+
* Only DIRECT `<SideNavbar.Navbar>` children are inspected. A Navbar
|
|
414
|
+
* wrapped in another element (e.g. inside a `<div>` or any custom
|
|
415
|
+
* wrapper) won't have its override applied — dev mode warns when it
|
|
416
|
+
* detects this one-level-deep miswiring.
|
|
417
|
+
*/
|
|
399
418
|
showMainToggle?: boolean;
|
|
400
|
-
/**
|
|
419
|
+
/**
|
|
420
|
+
* Per-Navbar override for the SideNavbar's main toggle button's
|
|
421
|
+
* position. When set, takes precedence over the root SideNavbar's
|
|
422
|
+
* `togglePosition` prop. The toggle continues to render at the
|
|
423
|
+
* `<aside>` level; only the position value changes.
|
|
424
|
+
*
|
|
425
|
+
* See `showMainToggle` for the resolution semantics, the
|
|
426
|
+
* multi-Navbar conflict policy, and the direct-children scope
|
|
427
|
+
* (with dev-mode warning when a wrapper hides a Navbar override).
|
|
428
|
+
*/
|
|
401
429
|
mainTogglePosition?: SideNavbarTogglePosition;
|
|
402
430
|
/** Whether to show the internal toggle button (inside navbar) */
|
|
403
431
|
showToggle?: boolean;
|
|
@@ -434,7 +462,7 @@ export interface SidebarContextValue {
|
|
|
434
462
|
/** Whether viewport is mobile */
|
|
435
463
|
isMobile: boolean;
|
|
436
464
|
/** Reference to sidebar element */
|
|
437
|
-
sidebarRef: React.RefObject<
|
|
465
|
+
sidebarRef: React.RefObject<HTMLDivElement | null>;
|
|
438
466
|
/** Current scroll position */
|
|
439
467
|
scrollPosition: number;
|
|
440
468
|
/** Set scroll position */
|
|
@@ -37,4 +37,4 @@ export interface StepperProps {
|
|
|
37
37
|
* />
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
|
-
export default function Stepper({ steps, currentStep: controlledCurrentStep, defaultCurrentStep, onStepChange, onComplete, allowNavigation, showStepNumbers, orientation, className, }: StepperProps): import("react
|
|
40
|
+
export default function Stepper({ steps, currentStep: controlledCurrentStep, defaultCurrentStep, onStepChange, onComplete, allowNavigation, showStepNumbers, orientation, className, }: StepperProps): import("react").JSX.Element;
|
|
@@ -88,7 +88,7 @@ type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = S
|
|
|
88
88
|
* </Table>
|
|
89
89
|
* ```
|
|
90
90
|
*/
|
|
91
|
-
declare function TableComponent<T = unknown
|
|
91
|
+
declare function TableComponent<T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T>): import("react").JSX.Element;
|
|
92
92
|
declare namespace TableComponent {
|
|
93
93
|
var Header: typeof TableHeader;
|
|
94
94
|
var HeaderRow: typeof TableHeaderRow;
|
|
@@ -28,4 +28,4 @@ export interface TableActionsProps<T extends Record<string, unknown> = Record<st
|
|
|
28
28
|
* />
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
|
-
export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({ actions, row, align, className, ...props }: TableActionsProps<T>): import("react
|
|
31
|
+
export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({ actions, row, align, className, ...props }: TableActionsProps<T>): import("react").JSX.Element;
|
|
@@ -10,4 +10,4 @@ export interface TableActionsProps<T extends Record<string, unknown> = Record<st
|
|
|
10
10
|
* Uses actions configuration from Table context.
|
|
11
11
|
* Must be used within a Table component.
|
|
12
12
|
*/
|
|
13
|
-
export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({ row, align, className, ...props }: TableActionsProps<T>): import("react
|
|
13
|
+
export default function TableActions<T extends Record<string, unknown> = Record<string, unknown>>({ row, align, className, ...props }: TableActionsProps<T>): import("react").JSX.Element | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type HTMLAttributes, ReactNode } from "react";
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
2
|
export interface TableBodyProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLTableSectionElement>, "children"> {
|
|
3
3
|
children?: (row: T, index: number) => ReactNode;
|
|
4
4
|
className?: string;
|
|
@@ -10,4 +10,4 @@ export interface TableBodyProps<T extends Record<string, unknown> = Record<strin
|
|
|
10
10
|
* Can render loading skeleton, empty state, or data rows.
|
|
11
11
|
* Must be used within a Table component.
|
|
12
12
|
*/
|
|
13
|
-
export default function TableBody({ children, className, ...props }: TableBodyProps): import("react
|
|
13
|
+
export default function TableBody({ children, className, ...props }: TableBodyProps): import("react").JSX.Element;
|
|
@@ -11,4 +11,4 @@ export interface TableCellProps<T = unknown> extends HTMLAttributes<HTMLTableCel
|
|
|
11
11
|
* Uses column.render if available, otherwise renders the raw value.
|
|
12
12
|
* Must be used within a Table component.
|
|
13
13
|
*/
|
|
14
|
-
export default function TableCell<T extends Record<string, unknown> = Record<string, unknown>>({ column, row, className, ...props }: TableCellProps<T>): import("react
|
|
14
|
+
export default function TableCell<T extends Record<string, unknown> = Record<string, unknown>>({ column, row, className, ...props }: TableCellProps<T>): import("react").JSX.Element;
|
|
@@ -39,6 +39,11 @@ export interface TableContextValue<T extends Record<string, unknown> = Record<st
|
|
|
39
39
|
resizable?: boolean;
|
|
40
40
|
columnWidths?: Record<string, number>;
|
|
41
41
|
virtualScrolling?: boolean;
|
|
42
|
+
virtualScrollingOptions?: {
|
|
43
|
+
itemHeight?: number;
|
|
44
|
+
containerHeight?: number;
|
|
45
|
+
overscan?: number;
|
|
46
|
+
};
|
|
42
47
|
emptyMessage?: string;
|
|
43
48
|
emptyStateTitle?: string;
|
|
44
49
|
emptyStateMessage?: string;
|
|
@@ -61,7 +66,21 @@ export interface TableContextValue<T extends Record<string, unknown> = Record<st
|
|
|
61
66
|
onRowClick?: (row: T) => void;
|
|
62
67
|
onColumnResize?: (columnKey: string, width: number) => void;
|
|
63
68
|
}
|
|
64
|
-
|
|
69
|
+
/**
|
|
70
|
+
* Raw React Context object. Exposed so `useContextSelector(TableContext, …)`
|
|
71
|
+
* keeps working (see hooks/useContextSelector.ts, which cites Table as
|
|
72
|
+
* its canonical selector consumer). Prefer the typed hooks below for
|
|
73
|
+
* direct reads.
|
|
74
|
+
*/
|
|
75
|
+
export declare const TableContext: import("react").Context<TableContextValue<Record<string, unknown>> | undefined>;
|
|
76
|
+
/**
|
|
77
|
+
* Internal Provider — consumed by `TableProvider.tsx` only. Not
|
|
78
|
+
* re-exported from `Table/index.ts`; keeps the public surface unchanged.
|
|
79
|
+
*/
|
|
80
|
+
export declare const TableContextProvider: <TSpecific = TableContextValue<Record<string, unknown>>>(props: {
|
|
81
|
+
value: TSpecific;
|
|
82
|
+
children: ReactNode;
|
|
83
|
+
}) => import("react").JSX.Element;
|
|
65
84
|
/**
|
|
66
85
|
* Hook to access Table context
|
|
67
86
|
*
|
|
@@ -72,4 +91,3 @@ export declare function useTableContext<T extends Record<string, unknown> = Reco
|
|
|
72
91
|
* Hook to access Table context (optional, returns undefined if not in Table)
|
|
73
92
|
*/
|
|
74
93
|
export declare function useTableContextOptional<T extends Record<string, unknown> = Record<string, unknown>>(): TableContextValue<T> | undefined;
|
|
75
|
-
export { TableContext };
|
|
@@ -7,4 +7,4 @@ export type TableEmptyStateProps = HTMLAttributes<HTMLDivElement>;
|
|
|
7
7
|
* Uses empty state configuration from Table context.
|
|
8
8
|
* Must be used within a Table component.
|
|
9
9
|
*/
|
|
10
|
-
export default function TableEmptyState({ className, ...props }: TableEmptyStateProps): import("react
|
|
10
|
+
export default function TableEmptyState({ className, ...props }: TableEmptyStateProps): import("react").JSX.Element;
|
|
@@ -34,4 +34,4 @@ export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
34
34
|
* />
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
|
-
export default function TableFilters({ filters, onFilter, initialValues, showClearAll, className, ...props }: TableFiltersProps): import("react
|
|
37
|
+
export default function TableFilters({ filters, onFilter, initialValues, showClearAll, className, ...props }: TableFiltersProps): import("react").JSX.Element;
|
|
@@ -9,4 +9,4 @@ export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
9
|
* Uses filter configuration from Table context.
|
|
10
10
|
* Must be used within a Table component.
|
|
11
11
|
*/
|
|
12
|
-
export default function TableFilters({ showClearAll, className, ...props }: TableFiltersProps): import("react
|
|
12
|
+
export default function TableFilters({ showClearAll, className, ...props }: TableFiltersProps): import("react").JSX.Element | null;
|
|
@@ -8,4 +8,4 @@ export interface TableHeaderProps extends Omit<HTMLAttributes<HTMLTableSectionEl
|
|
|
8
8
|
* Renders the table header (thead) with columns.
|
|
9
9
|
* Must be used within a Table component.
|
|
10
10
|
*/
|
|
11
|
-
export default function TableHeader({ className, ...props }: TableHeaderProps): import("react
|
|
11
|
+
export default function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
|
|
@@ -15,4 +15,4 @@ export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElemen
|
|
|
15
15
|
* Supports sorting if column is sortable.
|
|
16
16
|
* Must be used within a Table component.
|
|
17
17
|
*/
|
|
18
|
-
export default function TableHeaderCell({ column, resizable, width, onResize, minWidth, maxWidth, className, ...props }: TableHeaderCellProps): import("react
|
|
18
|
+
export default function TableHeaderCell({ column, resizable, width, onResize, minWidth, maxWidth, className, ...props }: TableHeaderCellProps): import("react").JSX.Element;
|
|
@@ -6,4 +6,4 @@ export type TableHeaderRowProps = HTMLAttributes<HTMLTableRowElement>;
|
|
|
6
6
|
* Renders a header row (tr) with header cells.
|
|
7
7
|
* Must be used within a Table component.
|
|
8
8
|
*/
|
|
9
|
-
export default function TableHeaderRow({ className, ...props }: TableHeaderRowProps): import("react
|
|
9
|
+
export default function TableHeaderRow({ className, ...props }: TableHeaderRowProps): import("react").JSX.Element;
|
|
@@ -26,4 +26,4 @@ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
26
26
|
* />
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export default function TablePagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, showPageSizeSelector, showPageInfo, className, ...props }: TablePaginationProps): import("react
|
|
29
|
+
export default function TablePagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, showPageSizeSelector, showPageInfo, className, ...props }: TablePaginationProps): import("react").JSX.Element;
|
|
@@ -11,4 +11,4 @@ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
11
11
|
* Uses pagination state from Table context.
|
|
12
12
|
* Must be used within a Table component.
|
|
13
13
|
*/
|
|
14
|
-
export default function TablePagination({ showPageSizeSelector, showPageInfo, pageSizeOptions, className, ...props }: TablePaginationProps): import("react
|
|
14
|
+
export default function TablePagination({ showPageSizeSelector, showPageInfo, pageSizeOptions, className, ...props }: TablePaginationProps): import("react").JSX.Element | null;
|
|
@@ -52,4 +52,4 @@ export interface TableProviderProps<T extends Record<string, unknown> = Record<s
|
|
|
52
52
|
* Manages table state (pagination, sorting, filters, selection) and provides it via Context.
|
|
53
53
|
* Supports both client-side and server-side pagination with auto-detection.
|
|
54
54
|
*/
|
|
55
|
-
export declare function TableProvider<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, loading, paginationMode: explicitMode, page: controlledPage, pageSize: controlledPageSize, total: externalTotal, onPageChange, onPageSizeChange, defaultPageSize, pageSizeOptions: _pageSizeOptions, sortColumn: controlledSortColumn, sortDirection: controlledSortDirection, onSort, defaultSortColumn, defaultSortDirection, filters, filterValues: controlledFilterValues, onFilter, initialFilterValues, selectable, selectedRows: controlledSelectedRows, onSelectionChange, rowId, actions, emptyMessage, emptyStateTitle, emptyStateMessage, emptyStateIllustration, emptyStateAction, onRowClick, resizable, columnWidths, onColumnResize, virtualScrolling, virtualScrollingOptions
|
|
55
|
+
export declare function TableProvider<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, loading, paginationMode: explicitMode, page: controlledPage, pageSize: controlledPageSize, total: externalTotal, onPageChange, onPageSizeChange, defaultPageSize, pageSizeOptions: _pageSizeOptions, sortColumn: controlledSortColumn, sortDirection: controlledSortDirection, onSort, defaultSortColumn, defaultSortDirection, filters, filterValues: controlledFilterValues, onFilter, initialFilterValues, selectable, selectedRows: controlledSelectedRows, onSelectionChange, rowId, actions, emptyMessage, emptyStateTitle, emptyStateMessage, emptyStateIllustration, emptyStateAction, onRowClick, resizable, columnWidths, onColumnResize, virtualScrolling, virtualScrollingOptions, children, }: TableProviderProps<T>): import("react").JSX.Element;
|
|
@@ -12,4 +12,4 @@ export interface TableRowProps<T extends Record<string, unknown> = Record<string
|
|
|
12
12
|
* Supports selection and row click.
|
|
13
13
|
* Must be used within a Table component.
|
|
14
14
|
*/
|
|
15
|
-
export default function TableRow<T extends Record<string, unknown> = Record<string, unknown>>({ row, rowIndex, className, onClick, style, ...props }: TableRowProps<T>): import("react
|
|
15
|
+
export default function TableRow<T extends Record<string, unknown> = Record<string, unknown>>({ row, rowIndex, className, onClick, style, ...props }: TableRowProps<T>): import("react").JSX.Element;
|
|
@@ -11,4 +11,4 @@ export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
11
11
|
* Only renders when the tab is active (unless forceMount is true).
|
|
12
12
|
* Must be used within a Tabs component.
|
|
13
13
|
*/
|
|
14
|
-
export declare function TabsContent({ value, children, forceMount, className, ...props }: TabsContentProps): import("react
|
|
14
|
+
export declare function TabsContent({ value, children, forceMount, className, ...props }: TabsContentProps): import("react").JSX.Element | null;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import { type HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
export interface TabsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "orientation"> {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
variant?: "default" | "compact";
|
|
5
|
+
/**
|
|
6
|
+
* Override orientation set on the `Tabs` provider. When omitted,
|
|
7
|
+
* inherits from context (default "horizontal"). Controls keyboard
|
|
8
|
+
* navigation axis (ArrowLeft/Right vs ArrowUp/Down), flex direction,
|
|
9
|
+
* and `aria-orientation`.
|
|
10
|
+
*/
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
5
12
|
}
|
|
6
13
|
/**
|
|
7
14
|
* TabsList Component
|
|
@@ -9,5 +16,7 @@ export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
16
|
* Container for tab triggers.
|
|
10
17
|
* Manages keyboard navigation between tabs.
|
|
11
18
|
* Must be used within a Tabs component.
|
|
19
|
+
*
|
|
20
|
+
* Orientation precedence: local `orientation` prop > Tabs context > "horizontal".
|
|
12
21
|
*/
|
|
13
|
-
export declare function TabsList({ children, className, variant, ...props }: TabsListProps): import("react
|
|
22
|
+
export declare function TabsList({ children, className, variant, orientation: orientationProp, ...props }: TabsListProps): import("react").JSX.Element;
|
|
@@ -13,4 +13,4 @@ export interface TabsProviderProps {
|
|
|
13
13
|
* Provides Tabs context to children.
|
|
14
14
|
* Manages active tab state and handles controlled/uncontrolled modes.
|
|
15
15
|
*/
|
|
16
|
-
export declare function TabsProvider({ defaultValue, value: controlledValue, onValueChange, orientation, activationMode, children, }: TabsProviderProps): import("react
|
|
16
|
+
export declare function TabsProvider({ defaultValue, value: controlledValue, onValueChange, orientation, activationMode, children, }: TabsProviderProps): import("react").JSX.Element;
|
|
@@ -10,4 +10,4 @@ export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
10
10
|
* Individual tab trigger button.
|
|
11
11
|
* Must be used within a TabsList component.
|
|
12
12
|
*/
|
|
13
|
-
export declare function TabsTrigger({ value, children, disabled, className, onClick, onKeyDown, ...props }: TabsTriggerProps): import("react
|
|
13
|
+
export declare function TabsTrigger({ value, children, disabled, className, onClick, onKeyDown, ...props }: TabsTriggerProps): import("react").JSX.Element;
|
|
@@ -26,4 +26,4 @@ export interface TimePickerProps {
|
|
|
26
26
|
* />
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export default function TimePicker({ value: controlledValue, defaultValue, format, onChange, disabled, label, error, helperText, className, }: TimePickerProps): import("react
|
|
29
|
+
export default function TimePicker({ value: controlledValue, defaultValue, format, onChange, disabled, label, error, helperText, className, }: TimePickerProps): import("react").JSX.Element;
|
|
@@ -31,4 +31,4 @@ export interface TimelineProps {
|
|
|
31
31
|
* />
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
|
-
export default function Timeline({ items, orientation, className, }: TimelineProps): import("react
|
|
34
|
+
export default function Timeline({ items, orientation, className, }: TimelineProps): import("react").JSX.Element;
|
|
@@ -5,4 +5,4 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
|
|
|
5
5
|
onDismiss: (id: string) => void;
|
|
6
6
|
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
|
|
7
7
|
}
|
|
8
|
-
export declare function Toast({ toast, onDismiss, position, className, style, ...props }: ToastProps): import("react
|
|
8
|
+
export declare function Toast({ toast, onDismiss, position, className, style, ...props }: ToastProps): import("react").JSX.Element;
|
|
@@ -2,4 +2,4 @@ export interface ToastContainerProps {
|
|
|
2
2
|
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
|
|
3
3
|
maxToasts?: number;
|
|
4
4
|
}
|
|
5
|
-
export declare function ToastContainer({ position, maxToasts, }: ToastContainerProps): import("react
|
|
5
|
+
export declare function ToastContainer({ position, maxToasts, }: ToastContainerProps): import("react").JSX.Element | null;
|
|
@@ -12,7 +12,7 @@ export * from "./Tabs";
|
|
|
12
12
|
export { default as SearchInput } from "./SearchInput";
|
|
13
13
|
export type { SearchInputProps } from "./SearchInput";
|
|
14
14
|
export * from "./Autocomplete";
|
|
15
|
-
export type { AutocompleteProps,
|
|
15
|
+
export type { AutocompleteProps, AutocompleteOptionProps, AutocompleteListProps, } from "./Autocomplete";
|
|
16
16
|
export * from "./MultiSelect";
|
|
17
17
|
export type { MultiSelectProps } from "./MultiSelect";
|
|
18
18
|
export { default as Rating } from "./Rating";
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { type Context, type JSX, type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Options for createGenericContext.
|
|
4
|
+
*/
|
|
5
|
+
export interface CreateGenericContextOptions {
|
|
6
|
+
/**
|
|
7
|
+
* displayName surfaced in React DevTools for the underlying Context.
|
|
8
|
+
*/
|
|
9
|
+
displayName: string;
|
|
10
|
+
/**
|
|
11
|
+
* Error thrown by the required hook when called outside the Provider
|
|
12
|
+
* tree. Keep this verbatim to whatever the legacy hook threw — it is
|
|
13
|
+
* a behavioural contract consumers rely on.
|
|
14
|
+
*/
|
|
15
|
+
errorMessage: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Surface returned by createGenericContext.
|
|
19
|
+
*
|
|
20
|
+
* @typeParam TBase - The "default" shape stored in the underlying
|
|
21
|
+
* React Context. For generic context families this is the type fully
|
|
22
|
+
* instantiated at the default generic argument (e.g. for
|
|
23
|
+
* `XxxContextValue<TGeneric extends Base = Base>` use
|
|
24
|
+
* `XxxContextValue` — no argument — which TS resolves to the default).
|
|
25
|
+
*/
|
|
26
|
+
export interface GenericContext<TBase> {
|
|
27
|
+
/**
|
|
28
|
+
* Raw React Context object. Exposed unchanged so existing consumers
|
|
29
|
+
* (especially `useContextSelector`) keep working. `useContext(Context)`
|
|
30
|
+
* returns `TBase | undefined`; the typed hooks below carry the
|
|
31
|
+
* per-call generic.
|
|
32
|
+
*/
|
|
33
|
+
Context: Context<TBase | undefined>;
|
|
34
|
+
/**
|
|
35
|
+
* Generic Provider. Accepts `value` typed at the per-call `TSpecific`,
|
|
36
|
+
* not at `TBase`, so each call site is cast-free.
|
|
37
|
+
*
|
|
38
|
+
* Inside, the single `as TBase` assignment encodes the cost of React's
|
|
39
|
+
* invariant Context typing — see the implementation comment for the
|
|
40
|
+
* full reason.
|
|
41
|
+
*/
|
|
42
|
+
Provider: <TSpecific = TBase>(props: {
|
|
43
|
+
value: TSpecific;
|
|
44
|
+
children: ReactNode;
|
|
45
|
+
}) => JSX.Element;
|
|
46
|
+
/**
|
|
47
|
+
* Required hook. Returns the context value typed at the per-call
|
|
48
|
+
* `TSpecific` (defaults to `TBase`). Throws `options.errorMessage`
|
|
49
|
+
* when called outside the Provider tree.
|
|
50
|
+
*/
|
|
51
|
+
useContextRequired: <TSpecific = TBase>() => TSpecific;
|
|
52
|
+
/**
|
|
53
|
+
* Optional variant — returns `undefined` outside the Provider tree
|
|
54
|
+
* instead of throwing.
|
|
55
|
+
*/
|
|
56
|
+
useContextOptional: <TSpecific = TBase>() => TSpecific | undefined;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Build a React Context family where the value carries a per-call
|
|
60
|
+
* generic that is preserved at the Provider and at the consuming hook
|
|
61
|
+
* site, without spreading `as unknown as` casts through every consumer.
|
|
62
|
+
*
|
|
63
|
+
* The motivation: React's `Context<T>` is invariant in `T`. A generic
|
|
64
|
+
* value type whose generic flows into an invariant inner position
|
|
65
|
+
* (e.g. `UseFormReturn<T>` inside `FormContextValue<T>`, or
|
|
66
|
+
* `TableColumn<T>` / `(row: T) => …` inside `TableContextValue<T>`)
|
|
67
|
+
* cannot be made structurally assignable to its default-generic
|
|
68
|
+
* counterpart. The cast is irreducible. This factory confines it to
|
|
69
|
+
* three sites inside the helper — the Provider value and both hook
|
|
70
|
+
* returns — and consumers stay cast-free.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```ts
|
|
74
|
+
* const formContext = createGenericContext<FormContextValue>({
|
|
75
|
+
* displayName: "FormContext",
|
|
76
|
+
* errorMessage: "useFormContext must be used within a Form …",
|
|
77
|
+
* });
|
|
78
|
+
*
|
|
79
|
+
* export const FormContext = formContext.Context;
|
|
80
|
+
* export function useFormContext<T extends FieldValues = FieldValues>() {
|
|
81
|
+
* return formContext.useContextRequired<FormContextValue<T>>();
|
|
82
|
+
* }
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
export declare function createGenericContext<TBase>(options: CreateGenericContextOptions): GenericContext<TBase>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared focusable-element helpers consumed by the focus-management
|
|
3
|
+
* hooks (`useFocusTrap`, `useAutoFocus`). Centralised so the selector
|
|
4
|
+
* and visibility filter have one definition — if the rules change
|
|
5
|
+
* (a new tabbable role lands, jsdom's offsetParent quirk needs a
|
|
6
|
+
* different handling pivot, etc.), there's exactly one site to edit.
|
|
7
|
+
*
|
|
8
|
+
* Originally lived inline in `DialogContent`'s focus trap; the trap
|
|
9
|
+
* hook took ownership in Phase 3 PR 1, and PR 2 split it out again
|
|
10
|
+
* once `useAutoFocus` became the second consumer.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Selector covering tabbable elements per WAI-ARIA Authoring Practices.
|
|
14
|
+
* Mirrors the selector DialogContent has shipped with since the dialog
|
|
15
|
+
* pattern landed.
|
|
16
|
+
*/
|
|
17
|
+
export declare const FOCUSABLE_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
|
|
18
|
+
/**
|
|
19
|
+
* Return the focusable descendants of `container` that are eligible to
|
|
20
|
+
* receive Tab focus.
|
|
21
|
+
*
|
|
22
|
+
* Filters out:
|
|
23
|
+
* - `disabled` form controls (button/input/select/textarea expose the
|
|
24
|
+
* DOM property; the cast is safe at the call site because every
|
|
25
|
+
* selector match either has the property or returns `undefined`,
|
|
26
|
+
* which short-circuits to falsy).
|
|
27
|
+
* - hidden elements (`offsetParent === null` — covers `display: none`,
|
|
28
|
+
* `visibility: hidden`, detached subtrees). In jsdom this filter
|
|
29
|
+
* rejects every connected element because jsdom doesn't compute
|
|
30
|
+
* layout; tests work around this by stubbing `offsetParent` on the
|
|
31
|
+
* nodes they care about. Production stays correct.
|
|
32
|
+
*/
|
|
33
|
+
export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* On `isActive` rising edge, move keyboard focus to the first focusable
|
|
4
|
+
* element inside `containerRef`. Falls back to focusing the container
|
|
5
|
+
* itself (after temporarily setting `tabindex="-1"` if needed) when the
|
|
6
|
+
* container has no focusable children — so the modal still owns focus
|
|
7
|
+
* and Escape/Tab handlers attached to it remain reachable.
|
|
8
|
+
*
|
|
9
|
+
* Deferred via `setTimeout(0)`, matching the timing the existing Dialog
|
|
10
|
+
* implementation proved out. Two reasons that timing matters:
|
|
11
|
+
*
|
|
12
|
+
* 1. The overlay's content (button, input, link) is committed to the
|
|
13
|
+
* DOM in the same render that flips `isActive` true. Synchronous
|
|
14
|
+
* focus from inside the effect can land on the *previous* DOM
|
|
15
|
+
* snapshot in React 19's concurrent paths; the timer guarantees
|
|
16
|
+
* we run after commit.
|
|
17
|
+
* 2. Composes with `useFocusRestore`. Restore snapshots
|
|
18
|
+
* `document.activeElement` on open *before* this hook moves focus
|
|
19
|
+
* inside the overlay — order guaranteed by the snapshot running in
|
|
20
|
+
* its own effect at the rising edge while auto-focus is deferred.
|
|
21
|
+
*
|
|
22
|
+
* Idempotent on `isActive=false`: the hook does nothing on the falling
|
|
23
|
+
* edge (focus restoration is `useFocusRestore`'s concern; this hook
|
|
24
|
+
* only handles the rising-edge auto-focus).
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* function MyModal({ isOpen }: { isOpen: boolean }) {
|
|
29
|
+
* const contentRef = useRef<HTMLDivElement>(null);
|
|
30
|
+
* useFocusRestore(isOpen);
|
|
31
|
+
* useFocusTrap(contentRef, isOpen);
|
|
32
|
+
* useAutoFocus(contentRef, isOpen);
|
|
33
|
+
* // ...
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export declare function useAutoFocus(containerRef: RefObject<HTMLElement | null>, isActive: boolean): void;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Snapshot focus when an overlay opens; restore on close.
|
|
3
|
+
*
|
|
4
|
+
* When `isOpen` flips from false to true, snapshots
|
|
5
|
+
* `document.activeElement` at that moment. When `isOpen` flips back to
|
|
6
|
+
* false, restores focus to the snapshotted element in a `setTimeout(0)`
|
|
7
|
+
* — matching the timing the existing DialogProvider proved out
|
|
8
|
+
* (Dialog.test.tsx:221 depends on this exact shape).
|
|
9
|
+
*
|
|
10
|
+
* Trigger-ref-free by design: the snapshot mechanism captures whatever
|
|
11
|
+
* had focus at open time, so overlays can be opened by any composition
|
|
12
|
+
* (button click, programmatic call from a notification, etc.) without
|
|
13
|
+
* carrying a ref to a single triggering element.
|
|
14
|
+
*
|
|
15
|
+
* Scope is restore only. Focus trapping (Tab cycling within an open
|
|
16
|
+
* modal container) is the separate concern of `useFocusTrap`. The two
|
|
17
|
+
* hooks compose: modal surfaces (Dialog, Drawer) use both; non-modal
|
|
18
|
+
* surfaces (Popover) use only restore.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* function MyOverlay({ isOpen }: { isOpen: boolean }) {
|
|
23
|
+
* useFocusRestore(isOpen);
|
|
24
|
+
* // ...
|
|
25
|
+
* }
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare function useFocusRestore(isOpen: boolean): void;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Trap Tab / Shift+Tab cycling within `containerRef` while `isActive`.
|
|
4
|
+
*
|
|
5
|
+
* Boundary-only intervention: the handler intercepts Tab on the LAST
|
|
6
|
+
* focusable element (cycles back to first) and Shift+Tab on the FIRST
|
|
7
|
+
* focusable element (cycles back to last). Tab/Shift+Tab on any
|
|
8
|
+
* intermediate element falls through to the browser's default
|
|
9
|
+
* sequential focus navigation. This is the exact shape the existing
|
|
10
|
+
* `DialogContent` proved out — extracting it here means there's only
|
|
11
|
+
* one place to fix when the subtle parts (disabled filtering,
|
|
12
|
+
* `offsetParent !== null`, zero-focusable edge case) need to evolve.
|
|
13
|
+
*
|
|
14
|
+
* Zero-focusable edge case: if the container has no tabbable elements,
|
|
15
|
+
* Tab and Shift+Tab are both preventDefault'd, so focus can't escape
|
|
16
|
+
* the trap onto the underlying page. The container can still be closed
|
|
17
|
+
* via Escape (a concern of the consumer, not this hook).
|
|
18
|
+
*
|
|
19
|
+
* Trap is restore-only on the focus side: it does NOT auto-focus the
|
|
20
|
+
* first element when activated (the consumer typically handles that
|
|
21
|
+
* separately) and it does NOT snapshot/restore focus on toggle (that's
|
|
22
|
+
* `useFocusRestore`'s job — the two hooks compose).
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* function MyModal({ isOpen, ... }) {
|
|
27
|
+
* const contentRef = useRef<HTMLDivElement>(null);
|
|
28
|
+
* useFocusTrap(contentRef, isOpen);
|
|
29
|
+
* // ...
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, isActive: boolean): void;
|
|
@@ -23,4 +23,4 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
23
23
|
* </AvatarGroup>
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
|
-
export declare function AvatarGroup({ children, max, size, variant, spacing, className, ...props }: AvatarGroupProps): import("react
|
|
26
|
+
export declare function AvatarGroup({ children, max, size, variant, spacing, className, ...props }: AvatarGroupProps): import("react").JSX.Element;
|
|
@@ -2,6 +2,15 @@ import type { InputHTMLAttributes, ReactNode } from "react";
|
|
|
2
2
|
export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
3
3
|
label?: ReactNode;
|
|
4
4
|
error?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Validation success state — paints the border and (when
|
|
7
|
+
* `helperText` is also set) the helper-text color green. Matches
|
|
8
|
+
* the Input + Select + Radio + Switch + Textarea convention; the
|
|
9
|
+
* three feedback flags (`error`, `success`, `helperText`) cover
|
|
10
|
+
* every form primitive in the DS. Error takes precedence when
|
|
11
|
+
* both `error` and `success` are set.
|
|
12
|
+
*/
|
|
13
|
+
success?: boolean;
|
|
5
14
|
helperText?: string;
|
|
6
15
|
indeterminate?: boolean;
|
|
7
16
|
}
|