@obosbbl/grunnmuren-react 3.1.3 → 3.2.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableBody as TableBody$1, Cell, Column, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
-export { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
+import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
+export { DisclosureGroup, 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, isValidElement, cloneElement, useCallback } from 'react';
@@ -117,6 +117,7 @@ const disclosureButtonVariants = cva({
 });
 const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
     const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
+    const hasContext = !!useContext(DisclosureContext);
     return /*#__PURE__*/ jsxs(Button$1, {
         ...props,
         ref: ref,
@@ -125,7 +126,7 @@ const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _
             withChevron,
             isIconOnly
         }),
-        slot: "trigger",
+        slot: hasContext ? 'trigger' : undefined,
         children: [
             children,
             withChevron && /*#__PURE__*/ jsx(ChevronDown, {
@@ -349,6 +350,11 @@ const translations$1 = {
         nb: 'Neste',
         sv: 'Nästa',
         en: 'Next'
+    },
+    externalLink: {
+        nb: '(ekstern lenke)',
+        sv: '(extern länk)',
+        en: '(external link)'
     }
 };
 
@@ -476,13 +482,30 @@ const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest }
     });
 };
 
-/**
- * A basic link component that extends react-aria-components Link with consistent styling.
- * Provides accessible focus styles and maintains design system consistency.
- */ const Link = ({ children, className, ...restProps })=>{
+const _LinkContext = /*#__PURE__*/ createContext({});
+const Link = ({ ref: _ref, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, _LinkContext);
+    const { className, _innerWrapper, children: _children, ...restProps } = props;
+    const locale = _useLocale();
+    const externalLinkSR = props.rel?.includes('external') ? /*#__PURE__*/ jsx("span", {
+        className: "sr-only",
+        children: translations$1.externalLink[locale]
+    }) : null;
+    const reactNodeChildren = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            externalLinkSR
+        ]
+    });
+    const children = _innerWrapper ? _innerWrapper({
+        ...restProps,
+        children: typeof _children === 'function' ? (values)=>_children(values) : reactNodeChildren
+    }) : reactNodeChildren;
     return /*#__PURE__*/ jsx(Link$1, {
         ...restProps,
-        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0'),
+        ref: ref,
+        "data-slot": "link",
+        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0 [&>svg]:transition-transform'),
         children: children
     });
 };
@@ -1925,50 +1948,61 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
 };
 
-const LinkList = ({ className, children, ...restProps })=>{
-    const numberofLinks = Children.count(children);
-    return /*#__PURE__*/ jsx("div", {
-        className: cx(className, '@container'),
-        ...restProps,
-        children: /*#__PURE__*/ jsx("ul", {
-            className: cx('min-w-fit', // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
-            'overflow-hidden', // Add a small gap between items that fits the divider lines (this way the divider line don't take up any space in each item)
-            'grid auto-rows-max gap-y-px', // Gaps for when the list is displayed in multiple columns
-            '@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
-                '@xl:grid-cols-2',
-                (numberofLinks === 9 || numberofLinks > 10) && '@4xl:grid-cols-3'
-            ]),
-            children: children
-        })
+// Sets the correct icons for each link in the link list
+const _LinkProvider = ({ children })=>/*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                _LinkContext,
+                {
+                    _innerWrapper: ({ children, download, rel })=>(values)=>{
+                            let Icon = ArrowRight;
+                            if (download) {
+                                Icon = Download;
+                            } else if (rel?.includes('external')) {
+                                Icon = LinkExternal;
+                            }
+                            return /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    typeof children === 'function' ? children({
+                                        ...values,
+                                        defaultChildren: null
+                                    }) : children,
+                                    /*#__PURE__*/ jsx(Icon, {})
+                                ]
+                            });
+                        }
+                }
+            ]
+        ],
+        children: children
     });
-};
-const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
-    let Icon = ArrowRight;
-    let iconTransition = cx('group-hover:motion-safe:translate-x-1');
-    if (restProps.download) {
-        Icon = Download;
-        iconTransition = cx('group-hover:motion-safe:translate-y-1');
-    } else if (isExternal) {
-        iconTransition = cx('group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5');
-        Icon = LinkExternal;
-    }
-    return /*#__PURE__*/ jsx("li", {
-        // Creates divider lines that works in any grid layout and with the focus ring
-        className: "after:-top-px relative p-0.75 after:absolute after:right-0 after:left-0 after:h-px after:w-full after:bg-gray-light",
-        children: /*#__PURE__*/ jsxs(Link, {
-            ...restProps,
-            className: cx(className, 'group paragraph flex w-full cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    children: children
-                }),
-                /*#__PURE__*/ jsx(Icon, {
-                    className: iconTransition
-                })
+const LinkListContainer = ({ className, ...restProps })=>// Dual providers makes for easier typing and more readable code
+    /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    size: 'm'
+                }
             ]
+        ],
+        children: /*#__PURE__*/ jsx(_LinkProvider, {
+            children: /*#__PURE__*/ jsx("div", {
+                className: cx(className, 'link-list-container'),
+                ...restProps
+            })
         })
     });
-};
+const LinkList = (props)=>/*#__PURE__*/ jsx(_LinkProvider, {
+        children: /*#__PURE__*/ jsx("ul", {
+            ...props,
+            "data-slot": "link-list"
+        })
+    });
+const LinkListItem = (props)=>/*#__PURE__*/ jsx("li", {
+        ...props,
+        "data-slot": "link-list-item"
+    });
 
 const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
         ...props
@@ -2233,7 +2267,7 @@ function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, cla
 /**
  * Simple hook for detecting horizontal scroll capabilities
  * Returns scroll state and a ref to attach to your scrollable container
- */ function useHorizontalScroll() {
+ */ function useHorizontalScroll(scrollStateDeps = []) {
     const scrollContainerRef = useRef(null);
     const [scrollState, setScrollState] = useState({
         canScrollLeft: false,
@@ -2255,13 +2289,15 @@ function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, cla
             }));
     }, []);
     const debouncedUpdateScrollState = useDebouncedCallback(updateScrollState, 100);
+    // Initial check and react to dependency changes
+    useEffect(updateScrollState, [
+        ...scrollStateDeps
+    ]);
     useEffect(()=>{
         const container = scrollContainerRef.current;
         if (!container) {
             return;
         }
-        // Initial check
-        updateScrollState();
         // Listen for scroll events
         container.addEventListener('scroll', debouncedUpdateScrollState);
         // Listen for resize events (content or container size changes)
@@ -2299,11 +2335,18 @@ const tableRowVariants = cva({
         'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
     ]
 });
+// 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 { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll();
+    const { isResizing } = useContext(TableScrollContainerContext);
+    const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll([
+        isResizing
+    ]);
     const handleScroll = useCallback((direction)=>{
         const container = scrollContainerRef.current;
         if (!container) return;
@@ -2369,10 +2412,16 @@ function TableColumn(props) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Column, {
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', 'min-w-fit whitespace-nowrap'),
+        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', '[&_:not([data-slot="table-column-resizer"]):focus-visible]:outline-focus-offset', 'min-w-fit whitespace-nowrap', 'has-data-[slot=table-column-resizer]:*:data-[slot=content]:flex has-data-[slot=table-column-resizer]:*:data-[slot=content]:justify-between has-data-[slot=table-column-resizer]:*:data-[slot=content]:gap-2'),
+        "data-slot": "table-column",
         children: children
     });
 }
+const TableColumnResizer = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ColumnResizer, {
+        ...restProps,
+        className: cx(className, '-my-3 -mr-4.5 size-11 flex-none', 'cursor-ew-resize', 'relative after:absolute after:top-2 after:right-5 after:bottom-2 after:w-px after:bg-black', 'data-focused:after:outline-focus-offset'),
+        "data-slot": "table-column-resizer"
+    });
 /**
  * Container for table rows.
  */ function TableBody({ className, children, ...restProps }) {
@@ -2397,9 +2446,29 @@ function TableCell(props) {
     return /*#__PURE__*/ jsx(Cell, {
         ...restProps,
         className: cx(className, 'px-4 py-3 text-black text-sm leading-relaxed', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
+        "data-slot": "table-cell",
         children: children
     });
 }
+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)
+        })
+    });
+};
 
 const tabsVariants = cva({
     base: [
@@ -2795,4 +2864,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, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, 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, 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, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListContainer as UNSAFE_LinkListContainer, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, 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, _LinkContext, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.1.3",
+  "version": "3.2.1",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -24,7 +24,6 @@
     "@react-aria/utils": "^3.29.1",
     "@react-stately/form": "^3.1.5",
     "@react-stately/utils": "^3.10.7",
-    "@types/node": "^22.0.0",
     "cva": "^1.0.0-0",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -35,7 +34,8 @@
     "react": "^19"
   },
   "devDependencies": {
-    "tailwindcss": "4.1.16"
+    "@types/node": "^24.0.0",
+    "tailwindcss": "4.1.17"
   },
   "scripts": {
     "build": "bunchee"