@maxio-com/react-ui-components 9.17.1 → 9.19.0

package/dist/skills/maxio-react/references/components-tabs.md

@@ -31,10 +31,11 @@ Choose the visual treatment that fits the surrounding surface.
 ### Behavior
 
 - **Mouse and touch**: selecting a tab updates the active tab and renders the matching panel.
-- **Keyboard**: Tab moves focus into the tab list. ArrowRight and ArrowLeft move selection across enabled tabs.
+- **Keyboard**: Tab moves focus into the tab list. ArrowRight and ArrowLeft move selection across enabled tabs, and Home/End jump to the first/last enabled tab.
 - **Focus management**: the selected tab receives focus after keyboard selection.
 - **Controlled state**: use `index` with `onChange` when the active tab needs to be driven by route state, saved preferences, or another component.
 - **Uncontrolled state**: use `defaultIndex` when Tabs can manage its own selection after the initial render.
+- **Overflow**: set `overflow="auto"` on `TabList` when a tab set can grow past the available width. Tabs that don't fit collapse into a "More" menu; the active tab is always kept visible, even if it would otherwise be the one to collapse.
 
 ### Accessibility
 
@@ -43,6 +44,7 @@ Choose the visual treatment that fits the surrounding surface.
 - Give icon-only tabs an accessible name with `aria-label`.
 - Do not put disabled tabs in the selected state.
 - Keep focus indicators visible and preserve the built-in arrow-key behavior.
+- The "More" overflow menu is fully keyboard-operable: `Enter`/`Space`/`ArrowDown` on the trigger opens it and focuses the first item, `ArrowUp`/`ArrowDown` move between items, and `Escape` closes it and returns focus to the trigger.
 
 ### Content
 
@@ -119,10 +121,31 @@ const Example = () => {
 </Tabs>
 ```
 
+### Handling overflow
+
+Set `overflow="auto"` on `TabList` when a tab set can grow past the
+available width (many tabs, narrow containers). Tabs that don't fit
+collapse into a "More" menu, and the currently active tab is always
+promoted to the visible row even if it would otherwise overflow.
+`moreLabel` customizes the accessible label of the "More" trigger
+(defaults to `"More"`).
+
+The menu is built with
+[react-aria-components](https://react-spectrum.adobe.com/react-aria/) and
+is fully keyboard-operable out of the box:
+
+- `Enter`, `Space`, or `ArrowDown` on the trigger opens the menu and
+  focuses its first item.
+- `ArrowUp`/`ArrowDown` move focus between items.
+- `Enter`/`Space` on a focused item selects it, closes the menu, and
+  returns focus to the trigger.
+- `Escape` closes the menu without selecting anything and also returns
+  focus to the trigger.
+
 ## Imports
 
 ```tsx
-import { Body, Icon, Tab, TabList, TabPanel, TabPanels, Tabs } from "@maxio-com/react-ui-components";
+import { Body, Card, Icon, Tab, TabList, TabPanel, TabPanels, Tabs } from "@maxio-com/react-ui-components";
 ```
 
 ## Prop Types
@@ -133,7 +156,7 @@ import { Body, Icon, Tab, TabList, TabPanel, TabPanels, Tabs } from "@maxio-com/
 | --- | --- | --- | --- | --- | --- |
 | `defaultIndex` | `number` | no | `0` | Indicates which tab should be active by default | TypeLiteral |
 | `index` | `number` | no | - | Indicates which tab should be active in controlled mode. | TypeLiteral |
-| `onChange` | `((idx: number \| ((prevIdx: number) => number)) => void)` | no | - | Callback function that is fired when the tab is changed | TabsContext |
+| `onChange` | `TabsOnChange` | no | - | Callback function that is fired when the tab is changed | TypeLiteral |
 | `variant` | `"line" \| "contained"` | no | `line` | The variant of the tabs. | TabsContext |
 | `withDivider` | `boolean` | no | `false` | Add divider between tabs | TabsContext |
 
@@ -191,3 +214,53 @@ const BareIcon = () => <Tabs>
     </TabPanels>
 </Tabs>;
 ```
+
+### Overflow
+
+Use `overflow="auto"` when a tab set can grow past the available width (many tabs, narrow containers). Tabs that don't fit collapse into a "More" menu; the active tab is always kept visible.
+
+```tsx
+const Overflow = () => <div style={{ width: '400px' }}>
+    <Tabs defaultIndex={0}>
+        <TabList ariaLabel="Account sections" overflow="auto">
+            {OVERFLOW_TABS.map((tab) => (
+              <Tab key={tab}>{tab}</Tab>
+            ))}
+        </TabList>
+        <TabPanels>
+            {OVERFLOW_TABS.map((tab) => (
+              <TabPanel key={`${tab}-content`} style={{ height: '150px' }}>
+                <Body>{`${tab} content for Acme Billing.`}</Body>
+              </TabPanel>
+            ))}
+        </TabPanels>
+    </Tabs>
+</div>;
+```
+
+### In Card
+
+Use Tabs to drive a Card's own navigation when the card represents a sectioned view: put TabList in Card.Header so the tabs read as the card's title, and put each TabPanel's content in Card.Body so the panel reads as the card's body. Tabs still wraps both sections since it's the context provider connecting TabList's selection to TabPanels, regardless of where each one sits in the DOM.
+
+```tsx
+const InCard = () => <Tabs defaultIndex={0}>
+    <Card>
+        <Card.Header style={{ padding: 0 }}>
+            <TabList ariaLabel="Customer account sections">
+                {TABS.map((tab) => (
+                  <Tab key={tab}>{tab}</Tab>
+                ))}
+            </TabList>
+        </Card.Header>
+        <Card.Body style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
+            <TabPanels>
+                {TABS.map((tab) => (
+                  <TabPanel key={`${tab}-content`}>
+                    <Body>{`${tab} content for Acme Billing.`}</Body>
+                  </TabPanel>
+                ))}
+            </TabPanels>
+        </Card.Body>
+    </Card>
+</Tabs>;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.17.1",
+  "version": "9.19.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -45,10 +45,13 @@
     "react-dom": "^19.1.1"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
     "@floating-ui/react-dom": "^2.1.6",
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "@maxio-com/design-tokens": "^4.2.2",
     "@react-aria/toast": "3.0.7",
+    "@react-aria/utils": "^3.33.1",
     "@react-stately/checkbox": "^3.7.1",
     "@react-stately/radio": "^3.11.1",
     "@react-stately/toast": "3.1.2",
@@ -56,11 +59,11 @@
     "@tanstack/react-table": "^8.21.3",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.19",
-    "react-aria": "^3.47.0",
-    "react-aria-components": "^1.14.0"
+    "react-aria": "^3.50.0",
+    "react-aria-components": "^1.19.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6e541e8259760555ada7b510dc1cd419f39dcfa3"
+  "gitHead": "550dc2c6524537ca3808d6b69a07c16f98c9848d"
 }

package/typings/index.d.ts

@@ -149,7 +149,7 @@ declare const Breadcrumbs: React$1.FC<BreadcrumbsProps>;
 declare const BreadcrumbsItem: React$1.FC<BreadcrumbsItemProps>;
 //# sourceMappingURL=BreadcrumbsItem.d.ts.map
 
-declare const Button: (props: ButtonProps) => React$1.JSX.Element;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map
 
 type ButtonSize = 'sm' | 'md' | 'lg';
@@ -163,9 +163,41 @@ declare const IconButton: ({ "aria-label": ariaLabel, className, ...props }: Ico
 
 type TableSize = 'sm' | 'md' | 'lg';
 type ColumnAlign = 'left' | 'right';
+type RowReorderMode = 'siblings' | 'same-level' | 'all';
+type RowReorderPosition = 'before' | 'after' | 'inside';
+type RowReorderLocation = {
+    parentRowId: string | null;
+    index: number;
+};
+type RowReorderEvent<TData extends RowData> = {
+    data: TData[];
+    row: Row<TData>;
+    rowId: string;
+    targetRow: Row<TData>;
+    targetRowId: string;
+    position: RowReorderPosition;
+    source: RowReorderLocation;
+    destination: RowReorderLocation;
+};
 type RequiredTableOptions<TData extends RowData> = Pick<TableOptions<TData>, 'data' | 'columns'>;
-type OptionalTableOptions<TData extends RowData> = Partial<Omit<TableOptions<TData>, 'getCoreRowModel' | 'enableExpanding'>>;
-type DataTableProps<TData extends RowData = unknown> = {
+type OptionalTableOptions<TData extends RowData> = Partial<Omit<TableOptions<TData>, 'getCoreRowModel' | 'enableExpanding' | 'enableSorting' | 'getSubRows'>>;
+type RowReorderingOptions<TData extends RowData> = {
+    enableSorting?: TableOptions<TData>['enableSorting'];
+    enableRowReordering?: false;
+    getSubRows?: TableOptions<TData>['getSubRows'];
+    getRowReorderLabel?: never;
+    onRowReorder?: never;
+    rowReorderMode?: never;
+} | {
+    enableSorting?: TableOptions<TData>['enableSorting'];
+    enableRowReordering: true;
+    getSubRows?: never;
+    getRowId: NonNullable<TableOptions<TData>['getRowId']>;
+    getRowReorderLabel?: (row: Row<TData>) => string;
+    onRowReorder: (event: RowReorderEvent<TData>) => void;
+    rowReorderMode?: RowReorderMode;
+};
+type DataTableBaseProps<TData extends RowData> = {
     size?: TableSize;
     pattern?: boolean;
     align?: ColumnAlign;
@@ -179,6 +211,7 @@ type DataTableProps<TData extends RowData = unknown> = {
     onSelect?: (selected: RowSelectionState) => void;
     onSort?: (selected: SortingState) => void;
 } & RequiredTableOptions<TData> & OptionalTableOptions<TData>;
+type DataTableProps<TData extends RowData = unknown> = DataTableBaseProps<TData> & RowReorderingOptions<TData>;
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         align?: ColumnAlign;
@@ -188,7 +221,7 @@ declare module '@tanstack/react-table' {
     }
 }
 
-declare const DataTable: <TData extends RowData>({ pattern, size, SubRowComponent, onExpand, onSelect, onSort, enableSorting, enableRowSelection, enableExpanding, columns: originalColumns, actions, actionsColumnSize, onRowAction, state: userState, ...props }: DataTableProps<TData>) => React$1.JSX.Element;
+declare const DataTable: <TData extends RowData>({ pattern, size, SubRowComponent, onExpand, onSelect, onSort, enableSorting, enableRowSelection, enableExpanding, columns: originalColumns, actions, actionsColumnSize, onRowAction, enableRowReordering, getRowReorderLabel, onRowReorder, rowReorderMode, getRowId, getSubRows, state: userState, ...props }: DataTableProps<TData>) => React$1.JSX.Element;
 //# sourceMappingURL=DataTable.d.ts.map
 
 type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
@@ -275,6 +308,8 @@ declare function useWindowSize(debounce?: number): {
     windowHeight: number;
 };
 
+declare function useElementResizeObserver<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): number;
+
 type OverlayTriggerProps = {
     children: React$1.ReactNode;
     placement?: Placement;
@@ -396,9 +431,10 @@ interface SideNavTopDropdownItem extends AnchorHTMLAttributes<HTMLAnchorElement>
 type SideNavWrapperProps = Omit<SideNavProviderProps, 'children'>;
 declare const SideNavWrapper: ({ withIcons, shouldToggleSidebar, topDropdownItems, sections, collapseBreakpoint, isOpen, onChange, }: SideNavWrapperProps) => React$1.JSX.Element;
 
-type CommonTabProps = React.HTMLAttributes<HTMLDivElement> & {
+type CommonTabProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> & {
     disabled?: boolean;
     value?: number;
+    id?: string;
     isCurrent?: boolean;
 };
 type IconTab = {
@@ -412,31 +448,32 @@ type DefaultTab = {
 };
 type TabProps = CommonTabProps & (DefaultTab | IconTab);
 
-declare const Tab: ({ disabled, value, isCurrent, ...props }: TabProps) => React$1.JSX.Element;
+declare const Tab: ({ disabled, value, className, id: legacyId, isCurrent, ...props }: TabProps) => React$1.JSX.Element;
 //# sourceMappingURL=Tab.d.ts.map
 
 type TabsVariant = 'line' | 'contained';
+type TabsOnChange = ((idx: number) => void) | ((idx: number | ((prevIdx: number) => number)) => void);
 interface TabsContext {
     variant: TabsVariant;
     withDivider: boolean;
-    onChange: (idx: number | ((prevIdx: number) => number)) => void;
-    currentIndex: number;
 }
-type TabsProviderProps = Omit<Partial<TabsContext>, 'currentIndex'> & {
+type TabsProviderProps = Partial<TabsContext> & {
     children: ReactNode;
     defaultIndex?: number;
     index?: number;
+    onChange?: TabsOnChange;
 };
 
 type TabsProps = TabsProviderProps;
 declare const Tabs: ({ children, variant, withDivider, defaultIndex, index, onChange, }: TabsProps) => React$1.JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map
 
-interface TabPanelProps extends React$1.HtmlHTMLAttributes<HTMLDivElement> {
+interface TabPanelProps extends Omit<React$1.HtmlHTMLAttributes<HTMLDivElement>, 'children' | 'id'> {
     children: ReactNode;
     value?: number;
+    id?: string;
 }
-declare const TabPanel: ({ children, value, ...props }: TabPanelProps) => React$1.JSX.Element;
+declare const TabPanel: ({ children, value, className, id: legacyId, ...props }: TabPanelProps) => React$1.JSX.Element;
 
 interface TabPanelsProps {
     children: React$1.ReactNode;
@@ -447,8 +484,10 @@ declare const TabPanels: ({ children }: TabPanelsProps) => React$1.JSX.Element;
 interface TabListProps extends React$1.HtmlHTMLAttributes<HTMLDivElement> {
     ariaLabel: string;
     children: ReactNode;
+    overflow?: 'auto' | 'none';
+    moreLabel?: string;
 }
-declare const TabList: ({ children, className, ariaLabel, ...props }: TabListProps) => React$1.JSX.Element;
+declare const TabList: ({ children, className, ariaLabel, overflow, moreLabel, ...props }: TabListProps) => React$1.JSX.Element;
 //# sourceMappingURL=TabList.d.ts.map
 
 type TagSize = 'sm';
@@ -879,5 +918,5 @@ type AuthLayoutProps = {
 declare const AuthLayout: ({ children, heading, description, sentiment, leadingElement, alert, topAddon, footer, }: AuthLayoutProps) => React$1.JSX.Element;
 //# sourceMappingURL=AuthLayout.d.ts.map
 
-export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, DataTable, Display, Drawer, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useHover, useOverlayTrigger, useToast, useWindowSize };
+export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, DataTable, Display, Drawer, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
 export type { ComboBoxProps, DrawerProps, Interactions, OverlayAriaRole, Placement, PopoverProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };