@norges-domstoler/dds-components 15.2.1 → 15.3.0

package/dist/index.mjs

@@ -5033,7 +5033,7 @@ var Breadcrumb = forwardRef14(
 Breadcrumb.displayName = "Breadcrumb";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Children as Children2, forwardRef as forwardRef15 } from "react";
+import { Children as Children2, forwardRef as forwardRef15, isValidElement as isValidElement2 } from "react";
 import styled24 from "styled-components";
 
 // src/components/Breadcrumbs/Breadcrumb.tokens.tsx
@@ -5044,7 +5044,10 @@ var icon2 = {
   color: colors12.DdsColorInteractiveBase
 };
 var listItem = {
-  gap: spacing11.SizesDdsSpacingX05
+  gap: spacing11.SizesDdsSpacingX05,
+  notSmallScreen: {
+    padding: `${spacing11.SizesDdsSpacingX0125} 0`
+  }
 };
 var list = {
   gap: spacing11.SizesDdsSpacingX05
@@ -5056,7 +5059,7 @@ var breadcrumbTokens = {
 };
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { jsx as jsx184, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx184, jsxs as jsxs29 } from "react/jsx-runtime";
 var { icon: icon3, list: list2, listItem: listItem2 } = breadcrumbTokens;
 var List = styled24.ol`
   ${removeListStyling}
@@ -5066,11 +5069,14 @@ var List = styled24.ol`
   gap: ${list2.gap};
 `;
 List.displayName = "List";
-var ListItem = styled24.li`
+var ListItem = styled24.li.withConfig({
+  shouldForwardProp: (prop) => prop !== "smallScreen"
+})`
   align-items: center;
   display: flex;
   gap: ${listItem2.gap};
   ${getFontStyling(typographyType2)}
+  padding: ${({ smallScreen }) => smallScreen ? "0" : listItem2.notSmallScreen.padding};
 `;
 ListItem.displayName = "ListItem";
 var StyledIcon = styled24(Icon)`
@@ -5078,21 +5084,51 @@ var StyledIcon = styled24(Icon)`
 `;
 var Breadcrumbs = forwardRef15(
   (props, ref) => {
-    const { children, id, className, htmlProps, ...rest } = props;
+    const { children, smallScreen, id, className, htmlProps, ...rest } = props;
+    const chevronIcon = /* @__PURE__ */ jsx184(StyledIcon, { iconSize: "inherit", icon: ChevronRightIcon });
     const childrenArray = Children2.toArray(children);
     const breadcrumbChildren = childrenArray.map((item, index) => {
-      return /* @__PURE__ */ jsxs29(ListItem, { children: [
-        index !== 0 && /* @__PURE__ */ jsx184(StyledIcon, { icon: ChevronRightIcon }),
+      return /* @__PURE__ */ jsxs29(ListItem, { smallScreen, children: [
+        index !== 0 && chevronIcon,
         item
       ] }, `breadcrumb-${index}`);
     });
+    const breadcrumbChildrenTruncated = childrenArray.length > 2 ? childrenArray.slice(1, childrenArray.length - 1).map((item) => {
+      if (isValidElement2(item))
+        return {
+          title: item.props.children,
+          href: item.props.href
+        };
+    }).filter((item) => item) : [];
+    const breadcrumbChildrenSmallScreen = /* @__PURE__ */ jsxs29(Fragment5, { children: [
+      /* @__PURE__ */ jsx184(ListItem, { smallScreen, children: childrenArray[0] }),
+      breadcrumbChildrenTruncated.length > 0 && /* @__PURE__ */ jsxs29(ListItem, { smallScreen, children: [
+        chevronIcon,
+        /* @__PURE__ */ jsxs29(OverflowMenuGroup, { children: [
+          /* @__PURE__ */ jsx184(
+            Button,
+            {
+              size: "tiny",
+              icon: MoreHorizontalIcon,
+              appearance: "borderless",
+              "aria-label": `Vis br\xF8dsmulesti br\xF8dsmule 2 ${breadcrumbChildrenTruncated.length > 1 && `til ${breadcrumbChildren.length - 1}`}`
+            }
+          ),
+          /* @__PURE__ */ jsx184(OverflowMenu, { items: breadcrumbChildrenTruncated })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs29(ListItem, { smallScreen, children: [
+        chevronIcon,
+        childrenArray[childrenArray.length - 1]
+      ] })
+    ] });
     return /* @__PURE__ */ jsx184(
       "nav",
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
         ref,
         "aria-label": "br\xF8dsmulesti",
-        children: /* @__PURE__ */ jsx184(List, { children: breadcrumbChildren })
+        children: /* @__PURE__ */ jsx184(List, { children: smallScreen ? breadcrumbChildrenSmallScreen : breadcrumbChildren })
       }
     );
   }
@@ -6955,12 +6991,12 @@ Drawer.displayName = "Drawer";
 import {
   Children as ReactChildren2,
   cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement3,
   useId as useId6,
   useRef as useRef18,
   useState as useState11
 } from "react";
-import { Fragment as Fragment5, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsxs as jsxs39 } from "react/jsx-runtime";
 var DrawerGroup = ({
   children,
   drawerId,
@@ -6982,7 +7018,7 @@ var DrawerGroup = ({
     onClose && onClose();
   };
   const Children9 = ReactChildren2.map(children, (child, childIndex) => {
-    return isValidElement2(child) && (childIndex === 0 ? cloneElement2(child, {
+    return isValidElement3(child) && (childIndex === 0 ? cloneElement2(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniqueDrawerId,
       "aria-expanded": !closed,
@@ -6995,7 +7031,7 @@ var DrawerGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsxs39(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs39(Fragment6, { children: [
     " ",
     Children9,
     " "
@@ -7484,7 +7520,7 @@ import {
   Children as ReactChildren3,
   cloneElement as cloneElement3,
   forwardRef as forwardRef33,
-  isValidElement as isValidElement3,
+  isValidElement as isValidElement4,
   useEffect as useEffect19,
   useId as useId9,
   useRef as useRef21,
@@ -7614,7 +7650,7 @@ var Tooltip = forwardRef33(
     };
     const anchorProps = children.props;
     const anchorElement = ReactChildren3.only(
-      isValidElement3(children) && cloneElement3(children, {
+      isValidElement4(children) && cloneElement3(children, {
         ref: refs.setReference,
         onFocus: combineHandlers(openTooltip, anchorProps.onFocus),
         onBlur: combineHandlers(closeTooltip, anchorProps.onBlur),
@@ -8683,10 +8719,10 @@ import { forwardRef as forwardRef36, useRef as useRef24 } from "react";
 import {
   Children as Children4,
   cloneElement as cloneElement4,
-  isValidElement as isValidElement4,
+  isValidElement as isValidElement5,
   useState as useState17
 } from "react";
-import { Fragment as Fragment6, jsx as jsx222 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx222 } from "react/jsx-runtime";
 var InlineEdit = (props) => {
   const {
     emptiable,
@@ -8727,7 +8763,7 @@ var InlineEdit = (props) => {
   useOnKeyDown(["Escape"], () => onExitHandler());
   useOnClickOutside(inputRef.current, () => onExitHandler());
   const inputChild = Children4.only(
-    isValidElement4(children) && cloneElement4(children, {
+    isValidElement5(children) && cloneElement4(children, {
       onChange: onChangeHandler,
       onBlur: onBlurHandler,
       onFocus: onFocusHandler,
@@ -8736,7 +8772,7 @@ var InlineEdit = (props) => {
       emptiable
     })
   );
-  return /* @__PURE__ */ jsx222(Fragment6, { children: inputChild });
+  return /* @__PURE__ */ jsx222(Fragment7, { children: inputChild });
 };
 InlineEdit.displayName = "InlineEdit";
 
@@ -9481,7 +9517,7 @@ var localMessageTokens = {
 };
 
 // src/components/LocalMessage/LocalMessage.tsx
-import { Fragment as Fragment7, jsx as jsx231, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx231, jsxs as jsxs53 } from "react/jsx-runtime";
 var { container: container10, content: content4, icon: icon6, purposeVariants: purposeVariants3 } = localMessageTokens;
 var Container8 = styled63.div.withConfig({
   shouldForwardProp: (prop) => {
@@ -9570,7 +9606,7 @@ var LocalMessage = forwardRef42(
       ref
     };
     if (isClosed) {
-      return /* @__PURE__ */ jsx231(Fragment7, {});
+      return /* @__PURE__ */ jsx231(Fragment8, {});
     }
     return /* @__PURE__ */ jsxs53(Container8, { ...containerProps, children: [
       /* @__PURE__ */ jsx231(
@@ -10813,12 +10849,12 @@ Popover.displayName = "Popover";
 import {
   Children as ReactChildren4,
   cloneElement as cloneElement5,
-  isValidElement as isValidElement5,
+  isValidElement as isValidElement6,
   useId as useId15,
   useRef as useRef28,
   useState as useState21
 } from "react";
-import { Fragment as Fragment8, jsx as jsx239 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx239 } from "react/jsx-runtime";
 var PopoverGroup = ({
   isOpen = false,
   onCloseButtonClick,
@@ -10848,7 +10884,7 @@ var PopoverGroup = ({
   });
   const handleClose = () => setOpen(false);
   const Children9 = ReactChildren4.map(children, (child, childIndex) => {
-    return isValidElement5(child) && (childIndex === 0 ? cloneElement5(child, {
+    return isValidElement6(child) && (childIndex === 0 ? cloneElement5(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
@@ -10864,17 +10900,17 @@ var PopoverGroup = ({
       onClose: handleClose
     }));
   });
-  return /* @__PURE__ */ jsx239(Fragment8, { children: Children9 });
+  return /* @__PURE__ */ jsx239(Fragment9, { children: Children9 });
 };
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
 import {
   Children as Children5,
-  Fragment as Fragment9,
+  Fragment as Fragment10,
   cloneElement as cloneElement6,
   forwardRef as forwardRef49,
-  isValidElement as isValidElement6,
+  isValidElement as isValidElement7,
   useEffect as useEffect23,
   useMemo as useMemo3,
   useState as useState22
@@ -11197,7 +11233,7 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return Children5.toArray(children).filter(isValidElement6);
+  return Children5.toArray(children).filter(isValidElement7);
 }
 function passIndexPropToProgressTrackerItem(children) {
   return Children5.map(
@@ -11212,7 +11248,7 @@ var intersperseItemsWithConnector = (children) => Children5.map(children, (child
   if (index === 0) {
     return child;
   }
-  return /* @__PURE__ */ jsxs60(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs60(Fragment10, { children: [
     /* @__PURE__ */ jsx241(ProgressTrackerConnector, { "aria-hidden": true }),
     child
   ] }, index);
@@ -11433,7 +11469,7 @@ var SearchSuggestions = forwardRef50((props, ref) => {
 SearchSuggestions.displayName = "SearchSuggestions";
 
 // src/components/Search/Search.tsx
-import { Fragment as Fragment10, jsx as jsx243, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx243, jsxs as jsxs62 } from "react/jsx-runtime";
 var { input: input4, outerContainer: outerContainer6, horisontalContainer: horisontalContainer2, searchIcon: searchIcon2, clearButton: clearButton2 } = searchTokens;
 var getIconSize = (size2) => {
   switch (size2) {
@@ -11578,7 +11614,7 @@ var Search = forwardRef51(
                     role: hasSuggestions ? "combobox" : void 0
                   }
                 ),
-                hasSuggestions && /* @__PURE__ */ jsxs62(Fragment10, { children: [
+                hasSuggestions && /* @__PURE__ */ jsxs62(Fragment11, { children: [
                   /* @__PURE__ */ jsx243(
                     SearchSuggestions,
                     {
@@ -12516,10 +12552,10 @@ SplitButton.displayName = "SplitButton";
 // src/components/Table/collapsible/CollapsibleRow.tsx
 import {
   Children as Children6,
-  Fragment as Fragment11,
+  Fragment as Fragment12,
   cloneElement as cloneElement7,
   forwardRef as forwardRef64,
-  isValidElement as isValidElement7,
+  isValidElement as isValidElement8,
   useEffect as useEffect26,
   useState as useState28
 } from "react";
@@ -12947,7 +12983,7 @@ Table2.Row = Row;
 Table2.Foot = Foot;
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-import { Fragment as Fragment12, jsx as jsx259, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx259, jsxs as jsxs69 } from "react/jsx-runtime";
 var { collapseButton: collapseButton2 } = tableTokens;
 var CollapseButton = styled86.button`
   ${removeButtonStyling}
@@ -12997,9 +13033,9 @@ var CollapsibleRow = forwardRef64(
     const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
       const id = derivativeIdGenerator(prefix2, index.toString());
       collapsibleIds.push(id);
-      return /* @__PURE__ */ jsxs69(Fragment11, { children: [
+      return /* @__PURE__ */ jsxs69(Fragment12, { children: [
         /* @__PURE__ */ jsx259(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-        isValidElement7(child) && cloneElement7(child, {
+        isValidElement8(child) && cloneElement7(child, {
           collapsibleProps: { isCollapsibleChild: true }
         })
       ] }, `DL-${index}`);
@@ -13011,7 +13047,7 @@ var CollapsibleRow = forwardRef64(
     const headerRow = () => {
       if (type !== "head" || !isCollapsed)
         return null;
-      return /* @__PURE__ */ jsx259(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ jsxs69(Fragment12, { children: [
+      return /* @__PURE__ */ jsx259(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ jsxs69(Fragment13, { children: [
         definingColumnCells,
         /* @__PURE__ */ jsxs69(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
@@ -13052,9 +13088,9 @@ var CollapsibleRow = forwardRef64(
         }
       );
     };
-    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs69(Fragment12, { children: [
+    return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsxs69(Fragment13, { children: [
       headerRow(),
-      type === "body" && /* @__PURE__ */ jsxs69(Fragment12, { children: [
+      type === "body" && /* @__PURE__ */ jsxs69(Fragment13, { children: [
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
@@ -13385,7 +13421,7 @@ import {
   Children as Children7,
   cloneElement as cloneElement8,
   forwardRef as forwardRef68,
-  isValidElement as isValidElement8,
+  isValidElement as isValidElement9,
   useState as useState30
 } from "react";
 import styled90, { css as css40 } from "styled-components";
@@ -13432,7 +13468,7 @@ var TabList = forwardRef68(
     const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
     const combinedRef = useCombinedRef(ref, tabListRef);
     const tabListChildren = Children7.map(children, (child, index) => {
-      return isValidElement8(child) && cloneElement8(child, {
+      return isValidElement9(child) && cloneElement8(child, {
         id: `${tabsId}-tab-${index}`,
         "aria-controls": `${tabsId}-panel-${index}`,
         active: activeTab === index,
@@ -13515,7 +13551,7 @@ import {
   Children as Children8,
   cloneElement as cloneElement9,
   forwardRef as forwardRef70,
-  isValidElement as isValidElement9
+  isValidElement as isValidElement10
 } from "react";
 import { jsx as jsx266 } from "react/jsx-runtime";
 var TabPanels = forwardRef70(
@@ -13524,7 +13560,7 @@ var TabPanels = forwardRef70(
     const combinedRef = useCombinedRef(ref, tabPanelsRef);
     const panelChildren = Children8.map(children, (child, index) => {
       const active = index === activeTab;
-      return isValidElement9(child) && cloneElement9(child, {
+      return isValidElement10(child) && cloneElement9(child, {
         id: `${tabsId}-panel-${index}`,
         "aria-labelledby": `${tabsId}-tab-${index}`,
         active,