@obosbbl/grunnmuren-react 3.4.6 → 3.4.7

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/dist/index.d.mts CHANGED
@@ -27,7 +27,7 @@ import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/
27
27
  import { NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components/NumberField';
28
28
  import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from 'react-aria-components/RadioGroup';
29
29
  import { SelectProps as SelectProps$1 } from 'react-aria-components/Select';
30
- import { ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps } from 'react-aria-components/Table';
30
+ 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';
31
31
  import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from 'react-aria-components/Tabs';
32
32
  import { TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components/TagGroup';
33
33
  import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components/TextField';
@@ -220,7 +220,7 @@ declare const buttonVariants: (props?: (((VariantProps<(props?: ({
220
220
  className?: cva.ClassValue;
221
221
  })) | undefined) => string> & VariantProps<(props?: ({
222
222
  variant?: "primary" | "secondary" | "tertiary" | undefined;
223
- color?: "blue" | "mint" | "white" | undefined;
223
+ color?: "mint" | "white" | "blue" | undefined;
224
224
  isIconOnly?: boolean | undefined;
225
225
  isPending?: boolean | undefined;
226
226
  } & ({
@@ -245,7 +245,7 @@ type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
245
245
  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
246
246
  };
247
247
  type ButtonProps = (ButtonProps$1 | LinkProps$1) & ButtonOrLinkProps;
248
- declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>;
248
+ declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLAnchorElement | HTMLButtonElement>>;
249
249
  declare function Button({ ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
250
250
 
251
251
  type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivElement> & {
@@ -441,7 +441,7 @@ type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<t
441
441
  };
442
442
  declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
443
443
  declare const headingVariants: (props?: ({
444
- size?: "xl" | "l" | "m" | "s" | "xs" | undefined;
444
+ size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
445
445
  } & ({
446
446
  class?: cva.ClassValue;
447
447
  className?: never;
@@ -465,7 +465,7 @@ type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant>
465
465
  ref?: Ref<HTMLDivElement>;
466
466
  };
467
467
  declare const mediaVariant: (props?: ({
468
- fit?: "cover" | "contain" | undefined;
468
+ fit?: "contain" | "cover" | undefined;
469
469
  } & ({
470
470
  class?: cva.ClassValue;
471
471
  className?: never;
@@ -563,7 +563,7 @@ declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.E
563
563
  declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
564
564
 
565
565
  declare const linkListContainerVariants: (props?: ({
566
- layout?: "stack" | "grid" | undefined;
566
+ layout?: "grid" | "stack" | undefined;
567
567
  } & ({
568
568
  class?: cva.ClassValue;
569
569
  className?: never;
@@ -712,12 +712,13 @@ type StepProps = HTMLProps<HTMLLIElement> & {
712
712
  };
713
713
  declare const Step: ({ isDisabled, state, children, "~stepIndex": stepIndex, progress, ...restProps }: StepProps) => react_jsx_runtime.JSX.Element;
714
714
 
715
+ type TableVariant = 'default' | 'zebra-striped';
715
716
  type TableProps = Omit<TableProps$1, 'aria-label' | 'aria-labelledby'> & RefAttributes<HTMLTableElement> & {
716
717
  /**
717
718
  * Visual variant of the table
718
719
  * @default 'default'
719
720
  */
720
- variant?: 'default' | 'zebra-striped';
721
+ variant?: TableVariant;
721
722
  } & ({
722
723
  'aria-label': string;
723
724
  'aria-labelledby'?: never;
@@ -734,16 +735,23 @@ type TableRowProps = RowProps<object> & RefAttributes<HTMLTableRowElement>;
734
735
  type TableCellProps = CellProps & RefAttributes<HTMLTableCellElement> & {
735
736
  children: React.ReactNode;
736
737
  };
738
+ type TableColumnResizerProps = ColumnResizerProps;
739
+ type ResizableTableContainerProps = ResizableTableContainerProps$1;
737
740
  /**
738
741
  * A container component for displaying tabular data with horizontal scrolling support.
739
742
  */
740
743
  declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
744
+ /**
745
+ * Container that enables column resizing and horizontal scrolling for the
746
+ * nested <Table>. Use when you want resizable columns or want to apply
747
+ * `maxWidth`/`minWidth` truncation on columns.
748
+ */
749
+ declare function ResizableTableContainer({ className, children, ...restProps }: ResizableTableContainerProps): react_jsx_runtime.JSX.Element;
741
750
  /**
742
751
  * Container for table column headers.
743
752
  */
744
753
  declare function TableHeader({ className, children, ...restProps }: TableHeaderProps): react_jsx_runtime.JSX.Element;
745
754
  declare function TableColumn(props: TableColumnProps): react_jsx_runtime.JSX.Element;
746
- type TableColumnResizerProps = ColumnResizerProps;
747
755
  declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResizerProps) => react_jsx_runtime.JSX.Element;
748
756
  /**
749
757
  * Container for table rows.
@@ -751,8 +759,10 @@ declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResiz
751
759
  declare function TableBody({ className, children, ...restProps }: TableBodyProps): react_jsx_runtime.JSX.Element;
752
760
  declare function TableRow(props: TableRowProps): react_jsx_runtime.JSX.Element;
753
761
  declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
754
- type TableContainerProps = ResizableTableContainerProps;
755
- declare const TableContainer: ({ className, ...restProps }: ResizableTableContainerProps) => react_jsx_runtime.JSX.Element;
762
+ /** @deprecated Use `UNSAFE_ResizableTableContainer` instead. */
763
+ declare const UNSAFE_TableContainer: typeof ResizableTableContainer;
764
+ /** @deprecated Use `UNSAFE_ResizableTableContainerProps` instead. */
765
+ type UNSAFE_TableContainerProps = ResizableTableContainerProps;
756
766
 
757
767
  type TabsProps = Omit<TabsProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
758
768
  /**
@@ -910,5 +920,5 @@ type VideoLoopProps = {
910
920
  };
911
921
  declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
912
922
 
913
- 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 };
914
- 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 };
923
+ 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, ResizableTableContainer as UNSAFE_ResizableTableContainer, 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, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };
924
+ 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, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, 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, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
package/dist/index.mjs CHANGED
@@ -50,7 +50,8 @@ import { Radio as Radio$1, RadioGroup as RadioGroup$1 } from 'react-aria-compone
50
50
  import { Select as Select$1, SelectValue } from 'react-aria-components/Select';
51
51
  import { ProgressBar as ProgressBar$1 } from 'react-aria-components/ProgressBar';
52
52
  import { useDebouncedCallback } from 'use-debounce';
53
- import { ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row } from 'react-aria-components/Table';
53
+ import { composeRenderProps } from 'react-aria-components/composeRenderProps';
54
+ 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';
54
55
  import { Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components/Tabs';
55
56
  import { TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1 } from 'react-aria-components/TagGroup';
56
57
  import { TextArea as TextArea$1 } from 'react-aria-components/TextArea';
@@ -2760,33 +2761,28 @@ const Step = ({ isDisabled = false, state, children, '~stepIndex': stepIndex, pr
2760
2761
  });
2761
2762
  };
2762
2763
 
2763
- const tableVariants = cva({
2764
- base: [
2765
- 'relative'
2766
- ],
2767
- variants: {
2768
- variant: {
2769
- default: '',
2770
- 'zebra-striped': ''
2771
- }
2772
- }
2773
- });
2764
+ const _ResizableTableContainerContext = /*#__PURE__*/ createContext(null);
2774
2765
  const tableRowVariants = cva({
2775
2766
  base: [
2767
+ 'group/row',
2776
2768
  'data-focus-visible:outline-focus-inset',
2777
- 'group-data-[variant=zebra-striped]:odd:bg-white',
2778
- 'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
2769
+ 'group-data-[variant=zebra-striped]/table:odd:bg-white',
2770
+ 'group-data-[variant=zebra-striped]/table:even:bg-sky-lightest',
2771
+ // When the row has expandable children, the chevron button makes the
2772
+ // row taller than a plain text row. Center-align the cells' content so
2773
+ // the chevron icon lines up with text in sibling cells.
2774
+ 'data-has-child-items:*:align-middle'
2779
2775
  ]
2780
2776
  });
2781
- // Used to deal with showing or hiding scroll indicators during column resizing
2782
- const TableScrollContainerContext = /*#__PURE__*/ createContext({
2783
- isResizing: false
2784
- });
2785
2777
  /**
2786
- * A container component for displaying tabular data with horizontal scrolling support.
2787
- */ function Table(props) {
2788
- const { className, children, variant = 'default', ...restProps } = props;
2789
- const { isResizing } = useContext(TableScrollContainerContext);
2778
+ * Shared scroll wrapper that renders an overflow container with left/right
2779
+ * scroll indicators around the table. If it is rendered inside a
2780
+ * <ResizableTableContainer>, the overflow element is RAC's
2781
+ * <ResizableTableContainer> (required for column resizing to measure column
2782
+ * widths against the correct scroll viewport); otherwise it is a plain div.
2783
+ */ function ScrollWrapper({ children }) {
2784
+ const containerCtx = useContext(_ResizableTableContainerContext);
2785
+ const [isResizing, setIsResizing] = useState(false);
2790
2786
  const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll([
2791
2787
  isResizing
2792
2788
  ]);
@@ -2801,43 +2797,76 @@ const TableScrollContainerContext = /*#__PURE__*/ createContext({
2801
2797
  }, [
2802
2798
  scrollContainerRef
2803
2799
  ]);
2804
- return /*#__PURE__*/ jsx("div", {
2805
- className: tableVariants({
2806
- className,
2807
- variant
2808
- }),
2809
- children: /*#__PURE__*/ jsxs("div", {
2810
- className: "relative overflow-hidden",
2811
- children: [
2812
- /*#__PURE__*/ jsx("div", {
2813
- ref: scrollContainerRef,
2814
- className: "scrollbar-hidden overflow-x-auto",
2815
- style: {
2816
- WebkitOverflowScrolling: 'touch'
2817
- },
2818
- children: /*#__PURE__*/ jsx(Table$1, {
2819
- ...restProps,
2820
- className: "group w-full min-w-fit",
2821
- "data-variant": variant,
2822
- children: children
2823
- })
2824
- }),
2825
- /*#__PURE__*/ jsx(ScrollButton, {
2826
- direction: "left",
2827
- onClick: ()=>handleScroll('left'),
2828
- isVisible: canScrollLeft,
2829
- hasScrollingOccurred: hasScrollingOccurred
2830
- }),
2831
- /*#__PURE__*/ jsx(ScrollButton, {
2832
- direction: "right",
2833
- onClick: ()=>handleScroll('right'),
2834
- isVisible: canScrollRight,
2835
- hasScrollingOccurred: hasScrollingOccurred
2836
- })
2837
- ]
2800
+ const scrollClasses = 'scrollbar-hidden overflow-x-auto';
2801
+ const touchStyle = {
2802
+ WebkitOverflowScrolling: 'touch'
2803
+ };
2804
+ return /*#__PURE__*/ jsxs("div", {
2805
+ className: "relative overflow-hidden",
2806
+ children: [
2807
+ containerCtx ? /*#__PURE__*/ jsx(ResizableTableContainer$1, {
2808
+ ...containerCtx.resizableProps,
2809
+ ref: scrollContainerRef,
2810
+ className: cx(scrollClasses, containerCtx.resizableProps.className),
2811
+ style: touchStyle,
2812
+ onResizeStart: (widths)=>{
2813
+ setIsResizing(true);
2814
+ containerCtx.resizableProps.onResizeStart?.(widths);
2815
+ },
2816
+ onResizeEnd: (widths)=>{
2817
+ setIsResizing(false);
2818
+ containerCtx.resizableProps.onResizeEnd?.(widths);
2819
+ },
2820
+ children: children
2821
+ }) : /*#__PURE__*/ jsx("div", {
2822
+ ref: scrollContainerRef,
2823
+ className: scrollClasses,
2824
+ style: touchStyle,
2825
+ children: children
2826
+ }),
2827
+ /*#__PURE__*/ jsx(ScrollButton, {
2828
+ direction: "left",
2829
+ onClick: ()=>handleScroll('left'),
2830
+ isVisible: canScrollLeft,
2831
+ hasScrollingOccurred: hasScrollingOccurred
2832
+ }),
2833
+ /*#__PURE__*/ jsx(ScrollButton, {
2834
+ direction: "right",
2835
+ onClick: ()=>handleScroll('right'),
2836
+ isVisible: canScrollRight,
2837
+ hasScrollingOccurred: hasScrollingOccurred
2838
+ })
2839
+ ]
2840
+ });
2841
+ }
2842
+ /**
2843
+ * A container component for displaying tabular data with horizontal scrolling support.
2844
+ */ function Table(props) {
2845
+ const { className, children, variant = 'default', ...restProps } = props;
2846
+ return /*#__PURE__*/ jsx(ScrollWrapper, {
2847
+ children: /*#__PURE__*/ jsx(Table$1, {
2848
+ ...restProps,
2849
+ className: cx(className, 'group/table w-full min-w-fit'),
2850
+ "data-variant": variant,
2851
+ children: children
2838
2852
  })
2839
2853
  });
2840
2854
  }
2855
+ /**
2856
+ * Container that enables column resizing and horizontal scrolling for the
2857
+ * nested <Table>. Use when you want resizable columns or want to apply
2858
+ * `maxWidth`/`minWidth` truncation on columns.
2859
+ */ function ResizableTableContainer({ className, children, ...restProps }) {
2860
+ return /*#__PURE__*/ jsx(_ResizableTableContainerContext.Provider, {
2861
+ value: {
2862
+ resizableProps: {
2863
+ ...restProps,
2864
+ 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')
2865
+ }
2866
+ },
2867
+ children: children
2868
+ });
2869
+ }
2841
2870
  /**
2842
2871
  * Container for table column headers.
2843
2872
  */ function TableHeader({ className, children, ...restProps }) {
@@ -2884,30 +2913,32 @@ function TableCell(props) {
2884
2913
  const { className, children, ...restProps } = props;
2885
2914
  return /*#__PURE__*/ jsx(Cell, {
2886
2915
  ...restProps,
2887
- 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'),
2916
+ 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
2917
+ // its row has nested child rows, we render an expand/collapse button
2918
+ // (see composeRenderProps below). Use flex so the button lines up
2919
+ // nicely next to the cell content.
2920
+ 'data-tree-column:flex data-tree-column:items-center data-tree-column:gap-2'),
2888
2921
  "data-slot": "table-cell",
2889
- children: children
2922
+ children: composeRenderProps(children, (resolved, { isTreeColumn, hasChildItems })=>/*#__PURE__*/ jsxs(Fragment, {
2923
+ children: [
2924
+ isTreeColumn && hasChildItems && /*#__PURE__*/ jsx(Button, {
2925
+ slot: "chevron",
2926
+ variant: "tertiary",
2927
+ isIconOnly: true,
2928
+ className: "-my-1 group-data-expanded/row:[&_svg]:rotate-90",
2929
+ children: /*#__PURE__*/ jsx(ChevronRight, {
2930
+ className: "transition-transform duration-300 motion-reduce:transition-none"
2931
+ })
2932
+ }),
2933
+ resolved
2934
+ ]
2935
+ }))
2890
2936
  });
2891
2937
  }
2892
- const TableContainer = ({ className, ...restProps })=>{
2893
- const [isResizing, setIsResizing] = useState(false);
2894
- return /*#__PURE__*/ jsx(Provider, {
2895
- values: [
2896
- [
2897
- TableScrollContainerContext,
2898
- {
2899
- isResizing
2900
- }
2901
- ]
2902
- ],
2903
- children: /*#__PURE__*/ jsx(ResizableTableContainer, {
2904
- ...restProps,
2905
- 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'),
2906
- onResizeStart: ()=>setIsResizing(true),
2907
- onResizeEnd: ()=>setIsResizing(false)
2908
- })
2909
- });
2910
- };
2938
+ // Deprecated aliases kept for backwards compatibility during the UNSAFE_ phase.
2939
+ // Remove these once the Table component is stabilized and the UNSAFE_ prefix
2940
+ // is dropped.
2941
+ /** @deprecated Use `UNSAFE_ResizableTableContainer` instead. */ const UNSAFE_TableContainer = ResizableTableContainer;
2911
2942
 
2912
2943
  const tabsVariants = cva({
2913
2944
  base: [
@@ -3301,4 +3332,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
3301
3332
  });
3302
3333
  };
3303
3334
 
3304
- 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 };
3335
+ 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, ResizableTableContainer as UNSAFE_ResizableTableContainer, 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, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "3.4.6",
3
+ "version": "3.4.7",
4
4
  "description": "Grunnmuren components in React",
5
5
  "license": "MIT",
6
6
  "repository": {