@norges-domstoler/dds-components 21.9.0 → 21.9.2

package/dist/index.mjs

@@ -952,6 +952,11 @@ var getBaseHTMLProps = (id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unkno
   }
 };
 
+// src/types/Size.tsx
+function createSizes(...sizes) {
+  return sizes;
+}
+
 // src/types/Surface.tsx
 var BORDER_RADII = [
   "button",
@@ -3218,6 +3223,7 @@ var getSize = (iconSize) => {
       return "var(--dds-icon-size-medium)";
   }
 };
+var ICON_SIZES = createSizes("small", "medium", "large", "inherit");
 function Icon(props) {
   const {
     id,
@@ -6833,6 +6839,7 @@ var useDrawerContext = () => useContext14(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx243, jsxs as jsxs50 } from "react/jsx-runtime";
+var DRAWER_SIZES = createSizes("small", "medium", "large");
 var Drawer = ({
   children,
   header,
@@ -7090,6 +7097,7 @@ var FavStar_default = {
 
 // src/components/FavStar/FavStar.tsx
 import { jsx as jsx246, jsxs as jsxs52 } from "react/jsx-runtime";
+var FAVSTAR_SIZES = createSizes("medium", "large");
 var FavStar = ({
   id,
   className,
@@ -8618,6 +8626,7 @@ var InlineEdit_default = {
   "inline-input--with-icon": "InlineEdit_inline-input--with-icon",
   "inline-textarea": "InlineEdit_inline-textarea",
   "edit-icon": "InlineEdit_edit-icon",
+  "edit-icon-textarea": "InlineEdit_edit-icon-textarea",
   chevron: "InlineEdit_chevron",
   "clear-button": "InlineEdit_clear-button"
 };
@@ -8755,7 +8764,10 @@ function InlineField(props) {
       {
         iconSize,
         icon,
-        className: cn(className2, utilStyles_default["center-absolute-y"])
+        className: cn(
+          className2,
+          elementType === "textarea" ? InlineEdit_default["edit-icon-textarea"] : utilStyles_default["center-absolute-y"]
+        )
       }
     );
   }
@@ -9448,6 +9460,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 
 // src/components/Select/Select.tsx
 import {
+  useCallback as useCallback7,
   useContext as useContext18,
   useId as useId17
 } from "react";
@@ -9732,7 +9745,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
-import { useMemo as useMemo2 } from "react";
+import React from "react";
 import {
   components
 } from "react-select";
@@ -9757,27 +9770,47 @@ var getIndicatorIconSize = (componentSize) => {
       return "small";
   }
 };
-var DDSOption = (props, componentSize) => /* @__PURE__ */ jsxs66(Option, { ...props, children: [
+var DDSOption = ({
+  componentSize,
+  ...props
+}) => /* @__PURE__ */ jsxs66(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ jsx283(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
-var CustomOption = (props, Element) => /* @__PURE__ */ jsx283(Option, { ...props, children: /* @__PURE__ */ jsx283(Element, { ...props }) });
-var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ jsx283(SingleValue, { ...props, children: /* @__PURE__ */ jsx283("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx283(Element, { ...props }) : props.children }) });
+var CustomOption = (props) => /* @__PURE__ */ jsx283(Option, { ...props, children: React.createElement(props.customElement, props) });
+var CustomSingleValue = ({
+  id,
+  Element,
+  ...props
+}) => /* @__PURE__ */ jsx283(SingleValue, { ...props, children: /* @__PURE__ */ jsx283("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ jsx283(Element, { ...props }) : props.children }) });
 var DDSNoOptionsMessage = (props) => /* @__PURE__ */ jsx283(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ jsx283(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx283(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
+var DDSClearIndicator = ({
+  size: size2,
+  ...props
+}) => /* @__PURE__ */ jsx283(ClearIndicator, { ...props, children: /* @__PURE__ */ jsx283(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
 var DDSMultiValueRemove = (props) => /* @__PURE__ */ jsx283(MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx283(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
-var DDSDropdownIndicator = (props, size2) => {
-  const { className, ...rest } = props;
+var DDSDropdownIndicator = (props) => {
+  const { className, componentSize, ...rest } = props;
   return /* @__PURE__ */ jsx283(
     DropdownIndicator,
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ jsx283(Icon, { icon: ChevronDownIcon, iconSize: getIndicatorIconSize(size2) })
+      children: /* @__PURE__ */ jsx283(
+        Icon,
+        {
+          icon: ChevronDownIcon,
+          iconSize: getIndicatorIconSize(componentSize)
+        }
+      )
     }
   );
 };
-var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx283(
+var DDSInput = ({
+  ariaInvalid,
+  ariaDescribedby,
+  ...props
+}) => /* @__PURE__ */ jsx283(
   Input2,
   {
     ...props,
@@ -9785,45 +9818,48 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ jsx283(
     "aria-describedby": ariaDescribedby
   }
 );
-function createDDSControl(componentSize, readOnly, icon, dataTestId) {
-  return function DDSControlWrapper(props) {
-    const { className, children, innerProps, ...rest } = props;
-    return /* @__PURE__ */ jsxs66(
-      Control,
-      {
-        ...rest,
-        innerProps: {
-          ...innerProps,
-          "data-testid": dataTestId ? dataTestId + "-control" : void 0
-        },
-        className: cn(
-          className,
-          Select_default.control,
-          rest.isDisabled && Select_default["control--disabled"],
-          readOnly && Select_default["control--readonly"]
+function DDSControl(props) {
+  const {
+    componentSize,
+    readOnly,
+    icon,
+    dataTestId,
+    className,
+    children,
+    innerProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs66(
+    Control,
+    {
+      ...rest,
+      innerProps: {
+        ...innerProps,
+        "data-testid": dataTestId ? dataTestId + "-control" : void 0
+      },
+      className: cn(
+        className,
+        Select_default.control,
+        rest.isDisabled && Select_default["control--disabled"],
+        readOnly && Select_default["control--readonly"]
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx283(
+          Icon,
+          {
+            icon,
+            iconSize: getFormInputIconSize(componentSize),
+            className: cn(
+              Input_default["input-group__absolute-element"],
+              Select_default[`icon--${componentSize}`]
+            )
+          }
         ),
-        children: [
-          icon && /* @__PURE__ */ jsx283(
-            Icon,
-            {
-              icon,
-              iconSize: getFormInputIconSize(componentSize),
-              className: cn(
-                Input_default["input-group__absolute-element"],
-                Select_default[`icon--${componentSize}`]
-              )
-            }
-          ),
-          children
-        ]
-      }
-    );
-  };
+        children
+      ]
+    }
+  );
 }
-var DDSControl = (componentSize, readOnly, icon, dataTestId) => useMemo2(
-  () => createDDSControl(componentSize, readOnly, icon, dataTestId),
-  [componentSize, readOnly, icon, dataTestId]
-);
 
 // src/components/Select/Select.tsx
 import { jsx as jsx284, jsxs as jsxs67 } from "react/jsx-runtime";
@@ -9855,6 +9891,7 @@ function Select({
   onKeyDown,
   openMenuOnClick,
   ref,
+  instanceId,
   ...rest
 }) {
   const themeContext = useContext18(ThemeContext);
@@ -9875,6 +9912,66 @@ function Select({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
+  const customInput = useCallback7(
+    (props) => /* @__PURE__ */ jsx284(
+      DDSInput,
+      {
+        ...props,
+        readOnly,
+        "aria-required": ariaRequired,
+        "aria-activedescendant": props["aria-activedescendant"] === "" ? void 0 : props["aria-activedescendant"],
+        ariaInvalid: hasErrorMessage,
+        ariaDescribedby: spaceSeparatedIdListGenerator([
+          singleValueId,
+          tip ? tipId : void 0,
+          errorMessage ? errorMessageId : void 0
+        ])
+      }
+    ),
+    []
+  );
+  const customSingleValue = useCallback7(
+    (props) => /* @__PURE__ */ jsx284(
+      CustomSingleValue,
+      {
+        ...props,
+        id: singleValueId,
+        Element: customSingleValueElement
+      }
+    ),
+    []
+  );
+  const customClearIndicator = useCallback7(
+    (props) => /* @__PURE__ */ jsx284(DDSClearIndicator, { ...props, size: componentSize }),
+    [componentSize]
+  );
+  const customDropdownIndicator = useCallback7(
+    (props) => /* @__PURE__ */ jsx284(DDSDropdownIndicator, { ...props, componentSize }),
+    [componentSize]
+  );
+  const customControl = useCallback7(
+    (props) => /* @__PURE__ */ jsx284(
+      DDSControl,
+      {
+        ...props,
+        componentSize,
+        readOnly,
+        icon,
+        dataTestId
+      }
+    ),
+    [componentSize, readOnly, icon, dataTestId]
+  );
+  const customOptionComponent = useCallback7(
+    (props) => {
+      if (customOptionElement) {
+        return /* @__PURE__ */ jsx284(CustomOption, { ...props, customElement: customOptionElement });
+      } else {
+        return /* @__PURE__ */ jsx284(DDSOption, { ...props, componentSize });
+      }
+    },
+    [customOptionElement, componentSize]
+  );
   const reactSelectProps = {
     options,
     value,
@@ -9884,6 +9981,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
+    instanceId: instanceId != null ? instanceId : useId17(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -9899,26 +9997,14 @@ function Select({
       return searchFilter(label2, inputValue) || inputValue === "";
     },
     components: {
-      Option: customOptionElement ? (props) => CustomOption(props, customOptionElement) : (props) => DDSOption(props, componentSize),
+      Option: customOptionComponent,
       NoOptionsMessage: DDSNoOptionsMessage,
-      Input: (props) => DDSInput(
-        {
-          ...props,
-          readOnly,
-          "aria-required": ariaRequired
-        },
-        hasErrorMessage,
-        spaceSeparatedIdListGenerator([
-          singleValueId,
-          tip ? tipId : void 0,
-          errorMessage ? errorMessageId : void 0
-        ])
-      ),
-      SingleValue: (props) => CustomSingleValue(props, singleValueId, customSingleValueElement),
-      ClearIndicator: (props) => DDSClearIndicator(props, componentSize),
-      DropdownIndicator: (props) => DDSDropdownIndicator(props, componentSize),
+      Input: customInput,
+      SingleValue: customSingleValue,
+      ClearIndicator: customClearIndicator,
+      DropdownIndicator: customDropdownIndicator,
       MultiValueRemove: DDSMultiValueRemove,
-      Control: DDSControl(componentSize, readOnly, icon, dataTestId)
+      Control: customControl
     },
     "aria-invalid": hasErrorMessage ? true : void 0,
     required,
@@ -11368,7 +11454,7 @@ import {
   cloneElement as cloneElement5,
   isValidElement as isValidElement5,
   useEffect as useEffect28,
-  useMemo as useMemo4,
+  useMemo as useMemo3,
   useState as useState25
 } from "react";
 
@@ -11405,7 +11491,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { Fragment as Fragment8, jsx as jsx290, jsxs as jsxs72 } from "react/jsx-runtime";
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -11447,7 +11533,7 @@ var ProgressTrackerItem = (props) => {
       handleStepChange == null ? void 0 : handleStepChange(index);
     }
   };
-  const stepNumberContent = useMemo3(() => {
+  const stepNumberContent = useMemo2(() => {
     if (completed) {
       return /* @__PURE__ */ jsx290(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -11569,7 +11655,7 @@ var ProgressTracker = (() => {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = useMemo4(() => {
+    const steps = useMemo3(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -11649,6 +11735,7 @@ var ProgressBar_default = {
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { jsx as jsx292, jsxs as jsxs73 } from "react/jsx-runtime";
+var PROGRESS_BAR_SIZES = createSizes("small", "medium");
 var ProgressBar = ({
   label,
   tip,
@@ -11744,6 +11831,7 @@ var Search_default = {
 };
 
 // src/components/Search/Search.utils.ts
+var SEARCH_SIZES = createSizes("small", "medium", "large");
 var typographyTypes2 = {
   small: "bodySmall",
   medium: "bodyMedium",
@@ -12704,7 +12792,6 @@ var useTabsContext = () => useContext26(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
-  tabs: "Tabs_tabs",
   "tab-row": "Tabs_tab-row",
   "tab-row--standard-widths": "Tabs_tab-row--standard-widths",
   "tab-row--custom-widths": "Tabs_tab-row--custom-widths",
@@ -12799,6 +12886,7 @@ AddTabButton.displayName = "AddTabButton";
 // src/components/Tabs/Tabs.tsx
 import { useEffect as useEffect33, useId as useId24, useRef as useRef36, useState as useState31 } from "react";
 import { jsx as jsx312 } from "react/jsx-runtime";
+var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
   id,
   activeTab,
@@ -12845,12 +12933,7 @@ var Tabs = ({
       children: /* @__PURE__ */ jsx312(
         Box,
         {
-          ...getBaseHTMLProps(
-            uniqueId,
-            cn(className, Tabs_default.tabs),
-            htmlProps,
-            rest
-          ),
+          ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
           width,
           children
         }
@@ -12862,7 +12945,7 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useEffect as useEffect34,
   useRef as useRef37
 } from "react";
@@ -12895,7 +12978,7 @@ var Tab = ({
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = useCallback7(() => {
+  const handleSelect = useCallback8(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -13404,6 +13487,7 @@ var Toggle_default = {
 
 // src/components/Toggle/Toggle.tsx
 import { jsx as jsx319, jsxs as jsxs84 } from "react/jsx-runtime";
+var TOGGLE_SIZES = createSizes("medium", "large");
 var Toggle = ({
   id,
   children,
@@ -14048,6 +14132,7 @@ export {
   cn,
   countryOptions,
   createSelectOptions,
+  createSizes,
   dateValueToNativeDate,
   defaultTypographyType,
   defaultTypographyTypeClassName,