@foris/avocado-suite 1.10.1 → 1.10.3

package/dist/components/contextual-navigation/ContextualNavigation.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ContextualNavigationProps } from './types';
+declare const ContextualNavigation: FC<ContextualNavigationProps>;
+export default ContextualNavigation;

package/dist/components/contextual-navigation/components/contextual-nav-control/ContextualNavControl.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes } from 'react';
+import type { ContextualNavigationItem } from '../../types';
+export type ContextualNavControlProps = HTMLAttributes<HTMLElement> & {
+    item: ContextualNavigationItem;
+    isActive: boolean;
+};
+/** A link when the destination has an `href` and is enabled; a button otherwise. */
+declare const ContextualNavControl: FC<ContextualNavControlProps>;
+export default ContextualNavControl;

package/dist/components/contextual-navigation/components/contextual-nav-control/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextualNavControl';

package/dist/components/contextual-navigation/components/contextual-nav-icon/ContextualNavIcon.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import type { IconTypes } from '../../../../../../avocado-icons';
+export type ContextualNavIconProps = {
+    name: IconTypes;
+    isActive: boolean;
+    isDisabled?: boolean;
+    showBadge?: boolean;
+    /** Without it the badge is decorative and hidden from assistive technology. */
+    badgeAriaLabel?: string;
+};
+declare const ContextualNavIcon: FC<ContextualNavIconProps>;
+export default ContextualNavIcon;

package/dist/components/contextual-navigation/components/contextual-nav-icon/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextualNavIcon';

package/dist/components/contextual-navigation/components/contextual-nav-item/ContextualNavItem.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import type { ContextualNavigationItem, ContextualNavigationProps } from '../../types';
+export type ContextualNavItemProps = {
+    item: ContextualNavigationItem;
+    activeId?: string;
+    isCollapsed?: boolean;
+    isMobileOverflowHidden?: boolean;
+    onItemClick?: ContextualNavigationProps['onItemClick'];
+};
+declare const ContextualNavItem: FC<ContextualNavItemProps>;
+export default ContextualNavItem;

package/dist/components/contextual-navigation/components/contextual-nav-item/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextualNavItem';

package/dist/components/contextual-navigation/components/contextual-nav-overflow/ContextualNavOverflow.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { ContextualNavigationItem, ContextualNavigationProps } from '../../types';
+export type ContextualNavOverflowProps = {
+    items: ContextualNavigationItem[];
+    activeId?: string;
+    label: string;
+    onItemClick?: ContextualNavigationProps['onItemClick'];
+};
+declare const ContextualNavOverflow: FC<ContextualNavOverflowProps>;
+export default ContextualNavOverflow;

package/dist/components/contextual-navigation/components/contextual-nav-overflow/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ContextualNavOverflow';

package/dist/components/contextual-navigation/contextualNavigation.locale.d.ts

@@ -0,0 +1,14 @@
+export declare const CONTEXTUAL_NAVIGATION_STRINGS: {
+    en: {
+        navLabel: string;
+        expandNav: string;
+        collapseNav: string;
+        overflowLabel: string;
+    };
+    es: {
+        navLabel: string;
+        expandNav: string;
+        collapseNav: string;
+        overflowLabel: string;
+    };
+};

package/dist/components/contextual-navigation/hooks/useContextualNavigationCollapse.d.ts

@@ -0,0 +1,11 @@
+type UseContextualNavigationCollapseParams = {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    persistenceKey?: string;
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+export declare const useContextualNavigationCollapse: ({ collapsed, defaultCollapsed, persistenceKey, onCollapsedChange, }: UseContextualNavigationCollapseParams) => {
+    collapsed: boolean;
+    toggleCollapsed: () => void;
+};
+export {};

package/dist/components/contextual-navigation/hooks/useContextualNavigationCollapse.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/contextual-navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ContextualNavigation';
+export type { ContextualNavigationProps, ContextualNavigationItem, } from './types';

package/dist/components/contextual-navigation/types.d.ts

@@ -0,0 +1,43 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { IconTypes } from '../../../../avocado-icons';
+export type ContextualNavigationItem = {
+    /** Unique id; matches `activeId` when this destination is current. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Leading icon. */
+    icon: IconTypes;
+    /** Destination URL. When set, the item renders as a link. */
+    href?: string;
+    /** Prevents activation and navigation. */
+    disabled?: boolean;
+    /** Shows a notification dot on the item. */
+    showBadge?: boolean;
+    /** Accessible name for the badge; required when `showBadge` is true. */
+    badgeAriaLabel?: string;
+};
+export type ContextualNavigationProps = {
+    /** Every destination, in groups separated by dividers on desktop. */
+    sections: ContextualNavigationItem[][];
+    /** Id of the current destination. */
+    activeId?: string;
+    /** Controlled collapsed state for the desktop sidebar. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Called when the user toggles the desktop sidebar collapse control. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** `localStorage` key for persisting the collapsed state. */
+    persistenceKey?: string;
+    /**
+     * Called when an item is activated, before native navigation.
+     * Call `event.preventDefault()` to take over navigation.
+     */
+    onItemClick?: (item: ContextualNavigationItem, event: MouseEvent<HTMLElement>) => void;
+    /** Names the `nav` landmark — important when the page has more than one nav region. */
+    'aria-label'?: string;
+    /** Page content rendered beside or below the navigation. */
+    children: ReactNode;
+    /** Extra class for the root element. Not applied when every section is empty, since only `children` renders. */
+    className?: string;
+};

package/dist/components/contextual-navigation/utils/contextualNavigation.util.d.ts

@@ -0,0 +1,3 @@
+import type { ContextualNavigationItem } from '../types';
+/** Destinations that do not fit the mobile bar, in declaration order. */
+export declare const getMobileOverflowItems: (sections: ContextualNavigationItem[][]) => ContextualNavigationItem[];

package/dist/components/contextual-navigation/utils/contextualNavigation.util.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/matrix-table/MatrixTable.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, Key, ReactElement, ReactNode, RefAttributes } from 'react';
+/** Supported pinning edge, relative to the document direction. */
+export type MatrixTablePinnedSide = 'start';
+/**
+ * Inline alignment of a column's header and body cells. Logical, so `start` and
+ * `end` follow the document direction. Narrow numeric columns want `center`.
+ */
+export type MatrixTableAlign = 'start' | 'center' | 'end';
+/** What a group column and a detail column declare in common. */
+interface MatrixTableColumnBase {
+    /** Stable identity, unique across both groupColumns and columns. */
+    key: string;
+    /** Content of the column header. */
+    header: ReactNode;
+    /** Declared width in px. Applied to the `col`, the header cell and the body cell. */
+    width: number;
+    /**
+     * Pins the column at the logical start. Only a contiguous prefix of
+     * `groupColumns` followed by `columns` can be pinned; a later marker is
+     * ignored and warned about in development.
+     */
+    pinned?: MatrixTablePinnedSide;
+    /**
+     * Alignment of this column's header and body cells. Defaults to the matrix
+     * defaults: `center` for detail columns, whose values are short and read as a
+     * grid, and `start` for group columns, which hold blocks of text.
+     */
+    align?: MatrixTableAlign;
+    /** Class added to this column's header and body cells; modifiers may take precedence. */
+    className?: string;
+}
+/** A column whose single cell spans every detail row of its group. */
+export interface MatrixTableGroupColumn<TGroup> extends MatrixTableColumnBase {
+    /** Receives its own definition too, so one factory can serve many columns. */
+    renderGroupCell: (group: TGroup, column: MatrixTableGroupColumn<TGroup>) => ReactNode;
+}
+/** A column that renders one cell per detail row. */
+export interface MatrixTableColumn<TGroup, TRow> extends MatrixTableColumnBase {
+    /**
+     * Receives the row, its group and the column itself. The third argument is
+     * what lets a shared handler build a full payload — which row, which group,
+     * which column — without a closure per column.
+     */
+    renderCell: (row: TRow, group: TGroup, column: MatrixTableColumn<TGroup, TRow>) => ReactNode;
+    /**
+     * Renders the cell as the row's header (`th scope="row"`). Opt in for the
+     * value that names the row — a component name, a code — not for data.
+     */
+    isRowHeader?: boolean;
+}
+/** Grouped matrix data and native attributes applied to the root div. */
+export interface MatrixTableProps<TGroup, TRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** Consumer-owned group data. Never mutated, never copied into state. */
+    groups: readonly TGroup[];
+    /** Columns rendered once per group, spanning its detail rows. */
+    groupColumns: readonly MatrixTableGroupColumn<TGroup>[];
+    /** Columns rendered once per detail row. The scrolling matrix axis. */
+    columns: readonly MatrixTableColumn<TGroup, TRow>[];
+    /** Stable identity, unique within groups. */
+    getGroupKey: (group: TGroup) => Key;
+    /** Detail rows belonging to a group; an empty collection is supported. */
+    getRows: (group: TGroup) => readonly TRow[];
+    /** Stable detail-row identity, unique within its group. */
+    getRowKey: (row: TRow, group: TGroup) => Key;
+    /** Accessible name of the table and of its scroll region. Required. */
+    accessibleLabel: string;
+    /** Content of a spanning body cell when groups is empty. */
+    emptyContent?: ReactNode;
+    /** Exposed as `aria-busy`. The component ships no loader and no copy. */
+    isBusy?: boolean;
+    /** Class added to the root div alongside the component's own class. */
+    className?: string;
+}
+/** A grouped matrix table; ref and native div attributes target the root container. */
+declare const MatrixTable: <TGroup, TRow>(props: MatrixTableProps<TGroup, TRow> & RefAttributes<HTMLDivElement>) => ReactElement;
+export default MatrixTable;

package/dist/components/matrix-table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MatrixTable';
+export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './MatrixTable';

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import DropdownButton from './components/dropdown-button/DropdownButton';
 import Heading from './components/heading/Heading';
 import Link from './components/link/Link';
 import Loading from './components/loading/Loading';
+import MatrixTable from './components/matrix-table';
 import Menu from './components/menu/Menu';
 import Modal from './components/modal/Modal';
 import Pager from './components/pager/Pager';
@@ -60,13 +61,14 @@ import AccessPanel from './components/access-panel/AccessPanel';
 import AccountMenu from './components/account-menu/AccountMenu';
 import Header from './components/header/Header';
 import HeaderNavigation from './components/header-navigation';
+import ContextualNavigation from './components/contextual-navigation';
 import NavList from './components/nav-list';
 import { toast } from 'react-toastify';
 /**
  * Hooks
  */
 export { useFloatingPortal } from './hooks/useFloatingPortal';
-export { Banner, Beacon, Header, HeaderNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
+export { Banner, Beacon, Header, HeaderNavigation, ContextualNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, MatrixTable, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
 /**
  * Types
  */
@@ -82,7 +84,9 @@ export type { DropzoneDisplay, DropzoneProps, DropzoneUploadStatus, } from './co
 export type { FileUploadProps } from './components/file-upload/FileUpload';
 export type { HeadingProps } from './components/heading/Heading';
 export type { HeaderNavigationProps, HeaderNavigationVisual, } from './components/header-navigation';
+export type { ContextualNavigationProps, ContextualNavigationItem, } from './components/contextual-navigation';
 export type { LinkProps } from './components/link/Link';
+export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './components/matrix-table';
 export type { MenuItem } from './types/menu.types';
 export type { RoundButtonProps } from './components/round-button/RoundButton';
 export type { SelectProps } from './components/select/Select';