@norges-domstoler/dds-components 21.0.0 → 21.2.0

package/dist/index.mjs

@@ -2664,6 +2664,7 @@ var getLiteralScreenSize = (screenSize) => {
 // src/components/helpers/StylelessList/StylelessList.tsx
 import { jsx as jsx176 } from "react/jsx-runtime";
 var StylelessList = ({ className, ...rest }) => /* @__PURE__ */ jsx176("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
+var StylelessOList = ({ className, ...rest }) => /* @__PURE__ */ jsx176("ul", { ...rest, className: cn(className, utilStyles_default["remove-list-styling"]) });
 
 // src/components/helpers/styling/utils.ts
 var outlineOffset = "var(--dds-spacing-x0-125)";
@@ -5939,6 +5940,7 @@ var DetailList_default = {
   "list--with-dividers": "DetailList_list--with-dividers",
   row: "DetailList_row",
   "list--striped": "DetailList_list--striped",
+  "list--striped-with-bp": "DetailList_list--striped-with-bp",
   "list--small": "DetailList_list--small",
   cell: "DetailList_cell",
   "list--medium": "DetailList_list--medium",
@@ -5973,7 +5975,8 @@ var DetailList = ({
         DetailList_default.list,
         DetailList_default[`list--${size2}`],
         withDividers && DetailList_default["list--with-dividers"],
-        striped && DetailList_default["list--striped"]
+        striped && !smallScreenBreakpoint && DetailList_default["list--striped"],
+        striped && smallScreenBreakpoint && DetailList_default["list--striped-with-bp"]
       ),
       htmlProps,
       rest
@@ -5991,17 +5994,18 @@ DetailListDesc.displayName = "DetailListDesc";
 import { Fragment as Fragment5, jsx as jsx235, jsxs as jsxs46 } from "react/jsx-runtime";
 var DetailListRow = ({ className, ...rest }) => {
   const { smallScreenBreakpoint: bp } = useDetailListContext();
+  const hasBp = !!bp;
   return /* @__PURE__ */ jsxs46(Fragment5, { children: [
     /* @__PURE__ */ jsx235(
       Box,
       {
         display: "table-row",
-        hideBelow: bp,
+        hideBelow: hasBp ? bp : void 0,
         className: cn(className, DetailList_default.row),
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx235(
+    hasBp && /* @__PURE__ */ jsx235(
       Box,
       {
         display: "flex",
@@ -8182,8 +8186,7 @@ var LocalMessage = ({
       ),
       width,
       display: "grid",
-      alignItems: "center",
-      padding: "x0.75",
+      padding: "x0.75 x0.75 x0.75 x0.5",
       gap: "x0.5",
       children: [
         /* @__PURE__ */ jsx271(
@@ -8203,7 +8206,7 @@ var LocalMessage = ({
               setClosed(true);
               onClose && onClose();
             },
-            size: "small",
+            size: "xsmall",
             "aria-label": "Lukk melding",
             className: LocalMessage_default.container__button
           }
@@ -10240,7 +10243,8 @@ var useProgressTrackerContext = () => useContext18(ProgressTrackerContext);
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
   list: "ProgressTracker_list",
-  connector: "ProgressTracker_connector",
+  "connector--column": "ProgressTracker_connector--column",
+  "connector--row": "ProgressTracker_connector--row",
   item: "ProgressTracker_item",
   "item-button": "ProgressTracker_item-button",
   "item-number--active-incomplete": "ProgressTracker_item-number--active-incomplete",
@@ -10373,6 +10377,7 @@ var ProgressTracker = (() => {
     id,
     activeStep = 0,
     onStepChange,
+    direction = "column",
     children,
     className,
     htmlProps,
@@ -10391,9 +10396,13 @@ var ProgressTracker = (() => {
     const steps = useMemo3(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
-      const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
+      const itemsWithConnectorsBetween = intersperseItemsWithConnector(
+        itemsWithIndex,
+        direction
+      );
       return itemsWithConnectorsBetween;
     }, [children]);
+    const isRow = direction === "row";
     return /* @__PURE__ */ jsx283(
       ProgressTrackerContext,
       {
@@ -10407,7 +10416,21 @@ var ProgressTracker = (() => {
             role: "group",
             "aria-label": "progress",
             ...getBaseHTMLProps(id, className, htmlProps, rest),
-            children: /* @__PURE__ */ jsx283("ol", { className: ProgressTracker_default.list, children: steps })
+            children: /* @__PURE__ */ jsx283(
+              Box,
+              {
+                as: StylelessOList,
+                display: "flex",
+                flexDirection: direction,
+                alignItems: "start",
+                gap: isRow ? "x0.5" : "x0.125",
+                overflowX: isRow ? "auto" : void 0,
+                margin: "0",
+                padding: isRow ? "x0.25" : "0",
+                className: cn(ProgressTracker_default.list, scrollbar),
+                children: steps
+              }
+            )
           }
         )
       }
@@ -10429,12 +10452,12 @@ function passIndexPropToProgressTrackerItem(children) {
     })
   );
 }
-var intersperseItemsWithConnector = (children) => Children3.map(children, (child, index) => {
+var intersperseItemsWithConnector = (children, direction) => Children3.map(children, (child, index) => {
   if (index === 0) {
     return child;
   }
   return /* @__PURE__ */ jsxs70(Fragment8, { children: [
-    /* @__PURE__ */ jsx283("div", { "aria-hidden": true, className: ProgressTracker_default.connector }),
+    /* @__PURE__ */ jsx283("div", { "aria-hidden": true, className: ProgressTracker_default[`connector--${direction}`] }),
     child
   ] }, index);
 });
@@ -10541,17 +10564,11 @@ var useAutocompleteSearch = () => {
 
 // src/components/Search/Search.module.css
 var Search_default = {
-  container: "Search_container",
-  "input-group": "Search_input-group",
   "with-button-container": "Search_with-button-container",
   input: "Search_input",
-  "input--small": "Search_input--small",
-  "input--medium": "Search_input--medium",
-  "input--large": "Search_input--large",
   "search-icon": "Search_search-icon",
   "clear-button": "Search_clear-button",
-  suggestions: "Search_suggestions",
-  suggestions__header: "Search_suggestions__header"
+  suggestions: "Search_suggestions"
 };
 
 // src/components/Search/Search.utils.ts
@@ -10657,15 +10674,20 @@ var SearchSuggestions = ({
       ),
       "aria-hidden": !showSuggestions,
       border: "border-default",
+      position: "absolute",
+      top: "100%",
+      width: "100%",
+      maxHeight: "300px",
+      overflowY: "scroll",
+      marginBlock: "x0.25 0",
       children: [
         /* @__PURE__ */ jsx286(
-          "span",
+          Box,
           {
+            as: "h2",
+            paddingInline: "0 x1",
             id: suggestionsHeaderId,
-            className: cn(
-              Search_default.suggestions__header,
-              typographyStyles_default["body-xsmall"]
-            ),
+            className: typographyStyles_default["body-xsmall"],
             children: "S\xF8keforslag"
           }
         ),
@@ -10702,14 +10724,34 @@ var getIconSize2 = (size2) => {
       return "small";
   }
 };
+var getPadding = (size2, showIcon) => {
+  const paddingRight = (textSize) => `calc(
+ var(--dds-spacing-x1) + ${textSize} * 1.5 + var(--dds-spacing-x0-5)
+ )`;
+  const paddingLeft = (iconSize) => `calc(
+ var(--dds-spacing-x0-75) + ${iconSize} + var(--dds-spacing-x0-5)
+ )`;
+  const pRSmallButton = paddingRight("0.875rem");
+  const pRMediumButton = paddingRight("1rem");
+  const pLSmallIcon = paddingLeft("var(--dds-icon-size-small)");
+  const pLMediumIcon = paddingLeft("var(--dds-icon-size-medium)");
+  const paddingMap = {
+    large: `x1 ${pRMediumButton} x1 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    medium: `x0.75 ${pRSmallButton} x0.75 ${showIcon ? pLMediumIcon : "x0.75"}`,
+    small: `x0.5 ${pRSmallButton} x0.5 ${showIcon ? pLSmallIcon : "x0.75"}`
+  };
+  return paddingMap[size2];
+};
 var Search = ({
   componentSize = "medium",
   buttonProps,
+  showIcon = true,
   name,
   label,
   tip,
   id,
   value,
+  width,
   onChange,
   className,
   style,
@@ -10746,85 +10788,98 @@ var Search = ({
   } = buttonProps != null ? buttonProps : {};
   const hasSuggestions = !!context.suggestions;
   const showSearchButton = !!buttonProps && !!onClick;
-  return /* @__PURE__ */ jsxs73("div", { className: Search_default.container, children: [
+  const inputGroup = /* @__PURE__ */ jsxs73(
+    HStack,
+    {
+      position: "relative",
+      width: !showSearchButton ? width : void 0,
+      className: !showSearchButton ? className : void 0,
+      children: [
+        showIcon && /* @__PURE__ */ jsx287(
+          Icon,
+          {
+            icon: SearchIcon,
+            iconSize: getIconSize2(componentSize),
+            className: cn(
+              Input_default["input-group__absolute-element"],
+              Search_default["search-icon"]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx287(
+          Box,
+          {
+            as: Input,
+            ...rest,
+            ref: combinedRef,
+            name,
+            type: "search",
+            id: uniqueId,
+            "aria-describedby": spaceSeparatedIdListGenerator([
+              tip ? tipId : void 0,
+              context.suggestions ? suggestionsDescriptionId : void 0,
+              ariaDescribedby
+            ]),
+            value: (_a = context.inputValue) != null ? _a : value,
+            onChange: handleChange,
+            autoComplete: "off",
+            "aria-autocomplete": hasSuggestions ? "list" : void 0,
+            "aria-controls": hasSuggestions ? suggestionsId : void 0,
+            "aria-expanded": context.showSuggestions,
+            role: hasSuggestions ? "combobox" : void 0,
+            width: "100%",
+            padding: getPadding(componentSize, showIcon),
+            className: cn(
+              Search_default.input,
+              typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
+            )
+          }
+        ),
+        hasSuggestions && /* @__PURE__ */ jsxs73(Fragment9, { children: [
+          /* @__PURE__ */ jsx287(
+            SearchSuggestions,
+            {
+              id: suggestionsId,
+              ref: context.suggestionsRef,
+              searchId: uniqueId,
+              onSuggestionClick: context.onSugggestionClick,
+              suggestions: context.suggestions,
+              showSuggestions: context.showSuggestions,
+              componentSize
+            }
+          ),
+          /* @__PURE__ */ jsx287(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+        ] }),
+        hasValue && /* @__PURE__ */ jsx287(
+          Button,
+          {
+            icon: CloseSmallIcon,
+            size: componentSize === "large" ? "medium" : "small",
+            purpose: "tertiary",
+            "aria-label": "T\xF8m",
+            onClick: clearInput,
+            className: Search_default["clear-button"]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs73(VStack, { gap: "x0.125", children: [
     hasLabel && /* @__PURE__ */ jsx287(Label, { htmlFor: uniqueId, children: label }),
     /* @__PURE__ */ jsxs73("div", { children: [
-      /* @__PURE__ */ jsxs73(
-        "div",
+      showSearchButton ? /* @__PURE__ */ jsxs73(
+        Grid,
         {
-          className: cn(
-            className,
-            showSearchButton && Search_default["with-button-container"]
-          ),
+          className,
+          width,
+          columnGap: "x0.5",
+          rowGap: "0",
+          marginInline: "0",
+          gridTemplateColumns: "1fr auto",
           style,
           children: [
-            /* @__PURE__ */ jsxs73("div", { className: Search_default["input-group"], children: [
-              /* @__PURE__ */ jsx287(
-                Icon,
-                {
-                  icon: SearchIcon,
-                  iconSize: getIconSize2(componentSize),
-                  className: cn(
-                    Input_default["input-group__absolute-element"],
-                    Search_default["search-icon"]
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx287(
-                Input,
-                {
-                  ...rest,
-                  ref: combinedRef,
-                  name,
-                  type: "search",
-                  id: uniqueId,
-                  "aria-describedby": spaceSeparatedIdListGenerator([
-                    tip ? tipId : void 0,
-                    context.suggestions ? suggestionsDescriptionId : void 0,
-                    ariaDescribedby
-                  ]),
-                  value: (_a = context.inputValue) != null ? _a : value,
-                  onChange: handleChange,
-                  autoComplete: "off",
-                  "aria-autocomplete": hasSuggestions ? "list" : void 0,
-                  "aria-controls": hasSuggestions ? suggestionsId : void 0,
-                  "aria-expanded": context.showSuggestions,
-                  role: hasSuggestions ? "combobox" : void 0,
-                  className: cn(
-                    Search_default.input,
-                    Search_default[`input--${componentSize}`],
-                    typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
-                  )
-                }
-              ),
-              hasSuggestions && /* @__PURE__ */ jsxs73(Fragment9, { children: [
-                /* @__PURE__ */ jsx287(
-                  SearchSuggestions,
-                  {
-                    id: suggestionsId,
-                    ref: context.suggestionsRef,
-                    searchId: uniqueId,
-                    onSuggestionClick: context.onSugggestionClick,
-                    suggestions: context.suggestions,
-                    showSuggestions: context.showSuggestions,
-                    componentSize
-                  }
-                ),
-                /* @__PURE__ */ jsx287(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
-              ] }),
-              hasValue && /* @__PURE__ */ jsx287(
-                Button,
-                {
-                  icon: CloseSmallIcon,
-                  size: componentSize === "large" ? "medium" : "small",
-                  purpose: "tertiary",
-                  "aria-label": "T\xF8m",
-                  onClick: clearInput,
-                  className: Search_default["clear-button"]
-                }
-              )
-            ] }),
-            showSearchButton && /* @__PURE__ */ jsx287(
+            inputGroup,
+            /* @__PURE__ */ jsx287(
               Button,
               {
                 size: componentSize,
@@ -10835,7 +10890,7 @@ var Search = ({
             )
           ]
         }
-      ),
+      ) : inputGroup,
       renderInputMessage(tip, tipId)
     ] })
   ] });
@@ -12958,6 +13013,7 @@ export {
   StarIcon,
   StatefulInput,
   StylelessList,
+  StylelessOList,
   SvgWrapper,
   SyncIcon,
   Tab,