@obosbbl/grunnmuren-react 3.4.6 → 3.5.0

package/dist/index.d.mts

@@ -27,7 +27,7 @@ import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/
 import { NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components/NumberField';
 import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from 'react-aria-components/RadioGroup';
 import { SelectProps as SelectProps$1 } from 'react-aria-components/Select';
-import { ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps } from 'react-aria-components/Table';
+import { ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps as ResizableTableContainerProps$1, TableHeaderProps as TableHeaderProps$1, RowProps } from 'react-aria-components/Table';
 import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from 'react-aria-components/Tabs';
 import { TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components/TagGroup';
 import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components/TextField';
@@ -179,10 +179,8 @@ declare const linkVariants: (props?: (((VariantProps<(props?: ({
 })) | undefined) => string;
 type LinkProps = VariantProps<typeof linkVariants> & LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
     children?: React.ReactNode;
-    /** @private Internal use */
-    '~iconRight'?: React.ReactNode;
 };
-declare const Link: ({ animateIcon, children, className, "~iconRight": iconRight, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
+declare const Link: ({ animateIcon, children, className, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
 
 type BreadcrumbProps = {
     /** Additional CSS className for the element. */
@@ -562,6 +560,10 @@ declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.E
 
 declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
 
+type LinkListContextValue = {
+    shouldRenderAutoIcons: boolean;
+};
+declare const LinkListContext: react.Context<LinkListContextValue | null>;
 declare const linkListContainerVariants: (props?: ({
     layout?: "stack" | "grid" | undefined;
 } & ({
@@ -578,7 +580,7 @@ declare const LinkListContainer: ({ className, layout, ...props }: LinkListConta
 type LinkListProps = React.HTMLProps<HTMLUListElement> & {
     children: JSX.Element | JSX.Element[];
 };
-declare const LinkList: ({ className, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
+declare const LinkList: ({ className, children, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
 type LinkListItemProps = React.HTMLProps<HTMLLIElement> & {
     children: ReactNode;
 };
@@ -712,12 +714,13 @@ type StepProps = HTMLProps<HTMLLIElement> & {
 };
 declare const Step: ({ isDisabled, state, children, "~stepIndex": stepIndex, progress, ...restProps }: StepProps) => react_jsx_runtime.JSX.Element;
 
+type TableVariant = 'default' | 'zebra-striped';
 type TableProps = Omit<TableProps$1, 'aria-label' | 'aria-labelledby'> & RefAttributes<HTMLTableElement> & {
     /**
      * Visual variant of the table
      * @default 'default'
      */
-    variant?: 'default' | 'zebra-striped';
+    variant?: TableVariant;
 } & ({
     'aria-label': string;
     'aria-labelledby'?: never;
@@ -734,16 +737,23 @@ type TableRowProps = RowProps<object> & RefAttributes<HTMLTableRowElement>;
 type TableCellProps = CellProps & RefAttributes<HTMLTableCellElement> & {
     children: React.ReactNode;
 };
+type TableColumnResizerProps = ColumnResizerProps;
+type ResizableTableContainerProps = ResizableTableContainerProps$1;
 /**
  * A container component for displaying tabular data with horizontal scrolling support.
  */
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
+/**
+ * Container that enables column resizing and horizontal scrolling for the
+ * nested <Table>. Use when you want resizable columns or want to apply
+ * `maxWidth`/`minWidth` truncation on columns.
+ */
+declare function ResizableTableContainer({ className, children, ...restProps }: ResizableTableContainerProps): react_jsx_runtime.JSX.Element;
 /**
  * Container for table column headers.
  */
 declare function TableHeader({ className, children, ...restProps }: TableHeaderProps): react_jsx_runtime.JSX.Element;
 declare function TableColumn(props: TableColumnProps): react_jsx_runtime.JSX.Element;
-type TableColumnResizerProps = ColumnResizerProps;
 declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResizerProps) => react_jsx_runtime.JSX.Element;
 /**
  * Container for table rows.
@@ -751,8 +761,10 @@ declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResiz
 declare function TableBody({ className, children, ...restProps }: TableBodyProps): react_jsx_runtime.JSX.Element;
 declare function TableRow(props: TableRowProps): react_jsx_runtime.JSX.Element;
 declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
-type TableContainerProps = ResizableTableContainerProps;
-declare const TableContainer: ({ className, ...restProps }: ResizableTableContainerProps) => react_jsx_runtime.JSX.Element;
+/** @deprecated Use `UNSAFE_ResizableTableContainer` instead. */
+declare const UNSAFE_TableContainer: typeof ResizableTableContainer;
+/** @deprecated Use `UNSAFE_ResizableTableContainerProps` instead. */
+type UNSAFE_TableContainerProps = ResizableTableContainerProps;
 
 type TabsProps = Omit<TabsProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
     /**
@@ -910,5 +922,5 @@ type VideoLoopProps = {
 };
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, VideoLoop, _useLocale as useLocale };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps };

package/dist/index.mjs

@@ -3,9 +3,9 @@ import { RouterProvider } from 'react-aria-components';
 export { Form, Group } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva, cx, compose } from 'cva';
-import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, useImperativeHandle, isValidElement, cloneElement, use } from 'react';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, useImperativeHandle, isValidElement, use, cloneElement } from 'react';
 import { useContextProps, Provider, DEFAULT_SLOT, useSlottedContext } from 'react-aria-components/slots';
-import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, Download, LinkExternal, ArrowRight, Edit, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
+import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, Download, LinkExternal, ArrowRight, ChevronRight, LoadingSpinner, Check, Trash, Edit, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { ButtonContext as ButtonContext$1, Button as Button$1 } from 'react-aria-components/Button';
 import { DisclosureContext, DisclosureGroupStateContext } from 'react-aria-components/DisclosureGroup';
 export { DisclosureGroup } from 'react-aria-components/DisclosureGroup';
@@ -50,7 +50,8 @@ import { Radio as Radio$1, RadioGroup as RadioGroup$1 } from 'react-aria-compone
 import { Select as Select$1, SelectValue } from 'react-aria-components/Select';
 import { ProgressBar as ProgressBar$1 } from 'react-aria-components/ProgressBar';
 import { useDebouncedCallback } from 'use-debounce';
-import { ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row } from 'react-aria-components/Table';
+import { composeRenderProps } from 'react-aria-components/composeRenderProps';
+import { ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, TableHeader as TableHeader$1, Row, ResizableTableContainer as ResizableTableContainer$1 } from 'react-aria-components/Table';
 import { Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components/Tabs';
 import { TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1 } from 'react-aria-components/TagGroup';
 import { TextArea as TextArea$1 } from 'react-aria-components/TextArea';
@@ -668,18 +669,116 @@ function Badge(props) {
     });
 }
 
+const LinkListContext = /*#__PURE__*/ createContext(null);
+const linkStyles = [
+    '*:data-[slot=link]:flex',
+    '*:data-[slot=link]:w-full',
+    '*:data-[slot=link]:justify-between',
+    '*:data-[slot=link]:gap-x-2',
+    '*:data-[slot=link]:py-3.5',
+    '*:data-[slot=link]:no-underline',
+    '*:data-[slot=link]:focus-visible:outline-focus'
+];
+const linkListContainerVariants = cva({
+    base: [
+        '*:data-[slot=link-list]:overflow-visible',
+        '*:data-[slot=heading]:p-1.25',
+        '*:data-[slot=heading]:*:data-[slot=link]:py-2.25',
+        '**:[svg]:text-base',
+        'has-data-[slot=heading]:*:data-[slot=link-list]:overflow-visible',
+        '*:data-[slot=heading]:has-not:*:data-[slot=link]:my-2.25'
+    ],
+    variants: {
+        layout: {
+            stack: null,
+            grid: '@container'
+        }
+    },
+    defaultVariants: {
+        layout: 'stack'
+    }
+});
+const LinkListContainer = ({ className, layout = 'stack', ...props })=>{
+    const container = /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    size: 'm',
+                    className: cx(linkStyles)
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            className: linkListContainerVariants({
+                className,
+                layout
+            }),
+            "data-layout": layout,
+            "data-slot": "link-list-container"
+        })
+    });
+    const hasLinkListContext = !!useContext(LinkListContext);
+    if (hasLinkListContext) {
+        return container;
+    }
+    return /*#__PURE__*/ jsx(LinkListContext.Provider, {
+        value: {
+            shouldRenderAutoIcons: true
+        },
+        children: container
+    });
+};
+const LinkList = ({ className, children, ...restProps })=>{
+    const ul = /*#__PURE__*/ jsx("ul", {
+        ...restProps,
+        "data-slot": "link-list",
+        className: cx(/**
+         * Hides dividers at the top of the list (overflow-y)
+         * while preventing arrow icons from overflowing container when animated to the right (overflow-x)
+         */ 'grid min-w-fit auto-rows-max gap-y-px overflow-hidden', className),
+        children: children
+    });
+    const hasLinkListContext = !!useContext(LinkListContext);
+    if (hasLinkListContext) {
+        return ul;
+    }
+    return /*#__PURE__*/ jsx(LinkListContext.Provider, {
+        value: {
+            shouldRenderAutoIcons: true
+        },
+        children: ul
+    });
+};
+const LinkListItem = ({ children, className, ...props })=>/*#__PURE__*/ jsx("li", {
+        ...props,
+        className: cx(className, 'after:bg-gray-light relative p-1.25 after:absolute after:inset-x-0 after:-top-px after:h-px after:w-full', '*:data-[slot=link]:paragraph', ...linkStyles),
+        "data-slot": "link-list-item",
+        children: children
+    });
+
 const linkVariants = compose(animateIconVariants, cva({
     base: 'focus-visible:outline-focus-offset inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current data-disabled:cursor-default data-disabled:font-normal data-disabled:no-underline'
 }));
-const Link = ({ animateIcon, children, className, '~iconRight': iconRight, ...props })=>{
+const Link = ({ animateIcon, children, className, ...props })=>{
     const locale = _useLocale();
     const externalLinkText = translations$1.externalLink[locale];
+    const shouldRenderAutoIcons = useContext(LinkListContext)?.shouldRenderAutoIcons ?? false;
+    let resolvedAnimateIcon = animateIcon;
+    let autoIcon = null;
+    if (shouldRenderAutoIcons) {
+        if (resolvedAnimateIcon === undefined) {
+            resolvedAnimateIcon = props.download ? 'down' : props.rel?.includes('external') ? 'up-right' : 'right';
+        }
+        autoIcon = props.download ? /*#__PURE__*/ jsx(Download, {}) : props.rel?.includes('external') ? /*#__PURE__*/ jsx(LinkExternal, {}) : /*#__PURE__*/ jsx(ArrowRight, {});
+    }
     return /*#__PURE__*/ jsxs(Link$1, {
         ...props,
         "data-slot": "link",
         className: linkVariants({
             className,
-            animateIcon
+            animateIcon: resolvedAnimateIcon
         }),
         children: [
             children,
@@ -687,7 +786,7 @@ const Link = ({ animateIcon, children, className, '~iconRight': iconRight, ...pr
                 className: "sr-only",
                 children: externalLinkText
             }),
-            iconRight
+            autoIcon
         ]
     });
 };
@@ -2290,78 +2389,6 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     });
 }
 
-const linkStyles = [
-    '*:data-[slot=link]:flex',
-    '*:data-[slot=link]:w-full',
-    '*:data-[slot=link]:justify-between',
-    '*:data-[slot=link]:gap-x-2',
-    '*:data-[slot=link]:py-3.5',
-    '*:data-[slot=link]:no-underline',
-    '*:data-[slot=link]:focus-visible:outline-focus'
-];
-const linkListContainerVariants = cva({
-    base: [
-        '*:data-[slot=link-list]:overflow-visible',
-        '*:data-[slot=heading]:p-1.25',
-        '*:data-[slot=heading]:*:data-[slot=link]:py-2.25',
-        '**:[svg]:text-base',
-        'has-data-[slot=heading]:*:data-[slot=link-list]:overflow-visible',
-        '*:data-[slot=heading]:has-not:*:data-[slot=link]:my-2.25'
-    ],
-    variants: {
-        layout: {
-            stack: null,
-            grid: '@container'
-        }
-    },
-    defaultVariants: {
-        layout: 'stack'
-    }
-});
-const LinkListContainer = ({ className, layout = 'stack', ...props })=>/*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                HeadingContext,
-                {
-                    size: 'm',
-                    className: cx(linkStyles)
-                }
-            ]
-        ],
-        children: /*#__PURE__*/ jsx("div", {
-            ...props,
-            className: linkListContainerVariants({
-                className,
-                layout
-            }),
-            "data-layout": layout,
-            "data-slot": "link-list-container"
-        })
-    });
-const LinkList = ({ className, ...restProps })=>/*#__PURE__*/ jsx("ul", {
-        ...restProps,
-        "data-slot": "link-list",
-        className: cx(/**
-       * Hides dividers at the top of the list (overflow-y)
-       * while preventing arrow icons from overflowing container when animated to the right (overflow-x)
-       */ 'grid min-w-fit auto-rows-max gap-y-px overflow-hidden', className)
-    });
-const LinkListItem = ({ children, className, ...props })=>{
-    const child = Children.only(children);
-    const childProps = /*#__PURE__*/ isValidElement(child) ? child.props : {};
-    const animateIcon = childProps.animateIcon || childProps.download ? 'down' : childProps.rel?.includes('external') ? 'up-right' : 'right';
-    const iconRight = childProps['~iconRight'] || childProps.download ? /*#__PURE__*/ jsx(Download, {}) : childProps.rel?.includes('external') ? /*#__PURE__*/ jsx(LinkExternal, {}) : /*#__PURE__*/ jsx(ArrowRight, {});
-    return /*#__PURE__*/ jsx("li", {
-        ...props,
-        className: cx(className, 'after:bg-gray-light relative p-1.25 after:absolute after:inset-x-0 after:-top-px after:h-px after:w-full', '*:data-[slot=link]:paragraph', ...linkStyles),
-        "data-slot": "link-list-item",
-        children: /*#__PURE__*/ isValidElement(child) && /*#__PURE__*/ cloneElement(child, {
-            animateIcon,
-            '~iconRight': iconRight
-        })
-    });
-};
-
 // This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
 const inputVariants$1 = compose(input, cva({
     base: '',
@@ -2760,33 +2787,28 @@ const Step = ({ isDisabled = false, state, children, '~stepIndex': stepIndex, pr
     });
 };
 
-const tableVariants = cva({
-    base: [
-        'relative'
-    ],
-    variants: {
-        variant: {
-            default: '',
-            'zebra-striped': ''
-        }
-    }
-});
+const _ResizableTableContainerContext = /*#__PURE__*/ createContext(null);
 const tableRowVariants = cva({
     base: [
+        'group/row',
         'data-focus-visible:outline-focus-inset',
-        'group-data-[variant=zebra-striped]:odd:bg-white',
-        'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
+        'group-data-[variant=zebra-striped]/table:odd:bg-white',
+        'group-data-[variant=zebra-striped]/table:even:bg-sky-lightest',
+        // When the row has expandable children, the chevron button makes the
+        // row taller than a plain text row. Center-align the cells' content so
+        // the chevron icon lines up with text in sibling cells.
+        'data-has-child-items:*:align-middle'
     ]
 });
-// Used to deal with showing or hiding scroll indicators during column resizing
-const TableScrollContainerContext = /*#__PURE__*/ createContext({
-    isResizing: false
-});
 /**
- * A container component for displaying tabular data with horizontal scrolling support.
- */ function Table(props) {
-    const { className, children, variant = 'default', ...restProps } = props;
-    const { isResizing } = useContext(TableScrollContainerContext);
+ * Shared scroll wrapper that renders an overflow container with left/right
+ * scroll indicators around the table. If it is rendered inside a
+ * <ResizableTableContainer>, the overflow element is RAC's
+ * <ResizableTableContainer> (required for column resizing to measure column
+ * widths against the correct scroll viewport); otherwise it is a plain div.
+ */ function ScrollWrapper({ children }) {
+    const containerCtx = useContext(_ResizableTableContainerContext);
+    const [isResizing, setIsResizing] = useState(false);
     const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll([
         isResizing
     ]);
@@ -2801,43 +2823,76 @@ const TableScrollContainerContext = /*#__PURE__*/ createContext({
     }, [
         scrollContainerRef
     ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: tableVariants({
-            className,
-            variant
-        }),
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "relative overflow-hidden",
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    ref: scrollContainerRef,
-                    className: "scrollbar-hidden overflow-x-auto",
-                    style: {
-                        WebkitOverflowScrolling: 'touch'
-                    },
-                    children: /*#__PURE__*/ jsx(Table$1, {
-                        ...restProps,
-                        className: "group w-full min-w-fit",
-                        "data-variant": variant,
-                        children: children
-                    })
-                }),
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "left",
-                    onClick: ()=>handleScroll('left'),
-                    isVisible: canScrollLeft,
-                    hasScrollingOccurred: hasScrollingOccurred
-                }),
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "right",
-                    onClick: ()=>handleScroll('right'),
-                    isVisible: canScrollRight,
-                    hasScrollingOccurred: hasScrollingOccurred
-                })
-            ]
+    const scrollClasses = 'scrollbar-hidden overflow-x-auto';
+    const touchStyle = {
+        WebkitOverflowScrolling: 'touch'
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative overflow-hidden",
+        children: [
+            containerCtx ? /*#__PURE__*/ jsx(ResizableTableContainer$1, {
+                ...containerCtx.resizableProps,
+                ref: scrollContainerRef,
+                className: cx(scrollClasses, containerCtx.resizableProps.className),
+                style: touchStyle,
+                onResizeStart: (widths)=>{
+                    setIsResizing(true);
+                    containerCtx.resizableProps.onResizeStart?.(widths);
+                },
+                onResizeEnd: (widths)=>{
+                    setIsResizing(false);
+                    containerCtx.resizableProps.onResizeEnd?.(widths);
+                },
+                children: children
+            }) : /*#__PURE__*/ jsx("div", {
+                ref: scrollContainerRef,
+                className: scrollClasses,
+                style: touchStyle,
+                children: children
+            }),
+            /*#__PURE__*/ jsx(ScrollButton, {
+                direction: "left",
+                onClick: ()=>handleScroll('left'),
+                isVisible: canScrollLeft,
+                hasScrollingOccurred: hasScrollingOccurred
+            }),
+            /*#__PURE__*/ jsx(ScrollButton, {
+                direction: "right",
+                onClick: ()=>handleScroll('right'),
+                isVisible: canScrollRight,
+                hasScrollingOccurred: hasScrollingOccurred
+            })
+        ]
+    });
+}
+/**
+ * A container component for displaying tabular data with horizontal scrolling support.
+ */ function Table(props) {
+    const { className, children, variant = 'default', ...restProps } = props;
+    return /*#__PURE__*/ jsx(ScrollWrapper, {
+        children: /*#__PURE__*/ jsx(Table$1, {
+            ...restProps,
+            className: cx(className, 'group/table w-full min-w-fit'),
+            "data-variant": variant,
+            children: children
         })
     });
 }
+/**
+ * Container that enables column resizing and horizontal scrolling for the
+ * nested <Table>. Use when you want resizable columns or want to apply
+ * `maxWidth`/`minWidth` truncation on columns.
+ */ function ResizableTableContainer({ className, children, ...restProps }) {
+    return /*#__PURE__*/ jsx(_ResizableTableContainerContext.Provider, {
+        value: {
+            resizableProps: {
+                ...restProps,
+                className: cx(className, '**:data-[slot=table-column]:overflow-hidden **:data-[slot=table-column]:text-ellipsis', '**:data-[slot=table-cell]:overflow-hidden **:data-[slot=table-cell]:text-ellipsis')
+            }
+        },
+        children: children
+    });
+}
 /**
  * Container for table column headers.
  */ function TableHeader({ className, children, ...restProps }) {
@@ -2884,30 +2939,32 @@ function TableCell(props) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Cell, {
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-sm/relaxed text-black', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
+        className: cx(className, 'px-4 py-3 text-sm/relaxed text-black', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset', // When this cell is in the column designated by `treeColumn` and
+        // its row has nested child rows, we render an expand/collapse button
+        // (see composeRenderProps below). Use flex so the button lines up
+        // nicely next to the cell content.
+        'data-tree-column:flex data-tree-column:items-center data-tree-column:gap-2'),
         "data-slot": "table-cell",
-        children: children
+        children: composeRenderProps(children, (resolved, { isTreeColumn, hasChildItems })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    isTreeColumn && hasChildItems && /*#__PURE__*/ jsx(Button, {
+                        slot: "chevron",
+                        variant: "tertiary",
+                        isIconOnly: true,
+                        className: "-my-1 group-data-expanded/row:[&_svg]:rotate-90",
+                        children: /*#__PURE__*/ jsx(ChevronRight, {
+                            className: "transition-transform duration-300 motion-reduce:transition-none"
+                        })
+                    }),
+                    resolved
+                ]
+            }))
     });
 }
-const TableContainer = ({ className, ...restProps })=>{
-    const [isResizing, setIsResizing] = useState(false);
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                TableScrollContainerContext,
-                {
-                    isResizing
-                }
-            ]
-        ],
-        children: /*#__PURE__*/ jsx(ResizableTableContainer, {
-            ...restProps,
-            className: cx(className, '**:data-[slot=table-column]:overflow-hidden **:data-[slot=table-column]:text-ellipsis', '**:data-[slot=table-cell]:overflow-hidden **:data-[slot=table-cell]:text-ellipsis'),
-            onResizeStart: ()=>setIsResizing(true),
-            onResizeEnd: ()=>setIsResizing(false)
-        })
-    });
-};
+// Deprecated aliases kept for backwards compatibility during the UNSAFE_ phase.
+// Remove these once the Table component is stabilized and the UNSAFE_ prefix
+// is dropped.
+/** @deprecated Use `UNSAFE_ResizableTableContainer` instead. */ const UNSAFE_TableContainer = ResizableTableContainer;
 
 const tabsVariants = cva({
     base: [
@@ -3038,8 +3095,8 @@ const tabsVariants = cva({
     return /*#__PURE__*/ jsx(Tab$1, {
         ...restProps,
         className: cx(className, 'data-focus-visible:outline-focus data-focus-visible:-outline-offset-10', 'description h-11 cursor-pointer border-transparent px-4 py-[0.71875rem] font-light', // Transition
-        'transition-colors duration-150 ease-out', // TODO: Should disabled tabs just be hidden?
-        'data-disabled:cursor-not-allowed data-disabled:opacity-50', // Selection
+        'transition-colors duration-150 ease-out', // Hide disabled tabs entirely — the design system avoids disabled states (see https://grunnmuren.obos.no/disabled-state)
+        'data-disabled:hidden', // Selection
         'data-selected:text-blue-dark data-selected:font-medium', // Hover with layout shift prevention using pseudo-element
         'after:invisible after:block after:h-0 after:overflow-hidden after:font-medium after:content-[attr(data-text)]', 'data-hovered:font-medium', // Pressed
         'data-pressed:text-blue-dark data-pressed:font-medium'),
@@ -3301,4 +3358,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.4.6",
+  "version": "3.5.0",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {