@norges-domstoler/dds-components 21.9.0 → 21.9.2

package/dist/index.js

@@ -341,6 +341,7 @@ __export(index_exports, {
   cn: () => cn,
   countryOptions: () => countryOptions,
   createSelectOptions: () => createSelectOptions,
+  createSizes: () => createSizes,
   dateValueToNativeDate: () => dateValueToNativeDate,
   defaultTypographyType: () => defaultTypographyType,
   defaultTypographyTypeClassName: () => defaultTypographyTypeClassName,
@@ -1332,6 +1333,11 @@ var getBaseHTMLProps = (id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unkno
   }
 };
 
+// src/types/Size.tsx
+function createSizes(...sizes) {
+  return sizes;
+}
+
 // src/types/Surface.tsx
 var BORDER_RADII = [
   "button",
@@ -3582,6 +3588,7 @@ var getSize = (iconSize) => {
       return "var(--dds-icon-size-medium)";
   }
 };
+var ICON_SIZES = createSizes("small", "medium", "large", "inherit");
 function Icon(props) {
   const {
     id,
@@ -7156,6 +7163,7 @@ var useDrawerContext = () => (0, import_react50.useContext)(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
+var DRAWER_SIZES = createSizes("small", "medium", "large");
 var Drawer = ({
   children,
   header,
@@ -7406,6 +7414,7 @@ var FavStar_default = {
 
 // src/components/FavStar/FavStar.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
+var FAVSTAR_SIZES = createSizes("medium", "large");
 var FavStar = ({
   id,
   className,
@@ -8916,6 +8925,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"
 };
@@ -9053,7 +9063,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"]
+        )
       }
     );
   }
@@ -10020,7 +10033,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
-var import_react69 = require("react");
+var import_react69 = __toESM(require("react"));
 var import_react_select = require("react-select");
 var import_jsx_runtime284 = require("react/jsx-runtime");
 var {
@@ -10043,27 +10056,47 @@ var getIndicatorIconSize = (componentSize) => {
       return "small";
   }
 };
-var DDSOption = (props, componentSize) => /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(Option, { ...props, children: [
+var DDSOption = ({
+  componentSize,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(Option, { ...props, children: [
   props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: CheckIcon, iconSize: getFormInputIconSize(componentSize) }),
   props.children
 ] });
-var CustomOption = (props, Element) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Option, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Element, { ...props }) });
-var CustomSingleValue = (props, id, Element) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Element, { ...props }) : props.children }) });
+var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Option, { ...props, children: import_react69.default.createElement(props.customElement, props) });
+var CustomSingleValue = ({
+  id,
+  Element,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(SingleValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("div", { id, className: Select_default["inner-single-value"], children: Element ? /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Element, { ...props }) : props.children }) });
 var DDSNoOptionsMessage = (props) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(NoOptionsMessage, { ...props, children: "Ingen treff" });
-var DDSClearIndicator = (props, size2) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
+var DDSClearIndicator = ({
+  size: size2,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: CloseSmallIcon, iconSize: getIndicatorIconSize(size2) }) });
 var DDSMultiValueRemove = (props) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: CloseSmallIcon, iconSize: "small" }) });
-var DDSDropdownIndicator = (props, size2) => {
-  const { className, ...rest } = props;
+var DDSDropdownIndicator = (props) => {
+  const { className, componentSize, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
     DropdownIndicator,
     {
       ...rest,
       className: cn(className, Select_default["dropdown-indicator"]),
-      children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { icon: ChevronDownIcon, iconSize: getIndicatorIconSize(size2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+        Icon,
+        {
+          icon: ChevronDownIcon,
+          iconSize: getIndicatorIconSize(componentSize)
+        }
+      )
     }
   );
 };
-var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+var DDSInput = ({
+  ariaInvalid,
+  ariaDescribedby,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
   Input2,
   {
     ...props,
@@ -10071,45 +10104,48 @@ var DDSInput = (props, ariaInvalid, ariaDescribedby) => /* @__PURE__ */ (0, impo
     "aria-describedby": ariaDescribedby
   }
 );
-function createDDSControl(componentSize, readOnly, icon, dataTestId) {
-  return function DDSControlWrapper(props) {
-    const { className, children, innerProps, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)(
-      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__ */ (0, import_jsx_runtime284.jsxs)(
+    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__ */ (0, import_jsx_runtime284.jsx)(
+          Icon,
+          {
+            icon,
+            iconSize: getFormInputIconSize(componentSize),
+            className: cn(
+              Input_default["input-group__absolute-element"],
+              Select_default[`icon--${componentSize}`]
+            )
+          }
         ),
-        children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
-            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) => (0, import_react69.useMemo)(
-  () => createDDSControl(componentSize, readOnly, icon, dataTestId),
-  [componentSize, readOnly, icon, dataTestId]
-);
 
 // src/components/Select/Select.tsx
 var import_jsx_runtime285 = require("react/jsx-runtime");
@@ -10141,6 +10177,7 @@ function Select({
   onKeyDown,
   openMenuOnClick,
   ref,
+  instanceId,
   ...rest
 }) {
   const themeContext = (0, import_react70.useContext)(ThemeContext);
@@ -10161,6 +10198,66 @@ function Select({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
+  const customInput = (0, import_react70.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
+      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 = (0, import_react70.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
+      CustomSingleValue,
+      {
+        ...props,
+        id: singleValueId,
+        Element: customSingleValueElement
+      }
+    ),
+    []
+  );
+  const customClearIndicator = (0, import_react70.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(DDSClearIndicator, { ...props, size: componentSize }),
+    [componentSize]
+  );
+  const customDropdownIndicator = (0, import_react70.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(DDSDropdownIndicator, { ...props, componentSize }),
+    [componentSize]
+  );
+  const customControl = (0, import_react70.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
+      DDSControl,
+      {
+        ...props,
+        componentSize,
+        readOnly,
+        icon,
+        dataTestId
+      }
+    ),
+    [componentSize, readOnly, icon, dataTestId]
+  );
+  const customOptionComponent = (0, import_react70.useCallback)(
+    (props) => {
+      if (customOptionElement) {
+        return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(CustomOption, { ...props, customElement: customOptionElement });
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(DDSOption, { ...props, componentSize });
+      }
+    },
+    [customOptionElement, componentSize]
+  );
   const reactSelectProps = {
     options,
     value,
@@ -10170,6 +10267,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
+    instanceId: instanceId != null ? instanceId : (0, import_react70.useId)(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -10185,26 +10283,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,
@@ -11908,6 +11994,7 @@ var ProgressBar_default = {
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_jsx_runtime293 = require("react/jsx-runtime");
+var PROGRESS_BAR_SIZES = createSizes("small", "medium");
 var ProgressBar = ({
   label,
   tip,
@@ -11997,6 +12084,7 @@ var Search_default = {
 };
 
 // src/components/Search/Search.utils.ts
+var SEARCH_SIZES = createSizes("small", "medium", "large");
 var typographyTypes2 = {
   small: "bodySmall",
   medium: "bodyMedium",
@@ -12941,7 +13029,6 @@ var useTabsContext = () => (0, import_react90.useContext)(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",
@@ -13032,6 +13119,7 @@ AddTabButton.displayName = "AddTabButton";
 // src/components/Tabs/Tabs.tsx
 var import_react93 = require("react");
 var import_jsx_runtime313 = require("react/jsx-runtime");
+var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
   id,
   activeTab,
@@ -13078,12 +13166,7 @@ var Tabs = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
         Box,
         {
-          ...getBaseHTMLProps(
-            uniqueId,
-            cn(className, Tabs_default.tabs),
-            htmlProps,
-            rest
-          ),
+          ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
           width,
           children
         }
@@ -13624,6 +13707,7 @@ var Toggle_default = {
 
 // src/components/Toggle/Toggle.tsx
 var import_jsx_runtime320 = require("react/jsx-runtime");
+var TOGGLE_SIZES = createSizes("medium", "large");
 var Toggle = ({
   id,
   children,
@@ -14269,6 +14353,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   cn,
   countryOptions,
   createSelectOptions,
+  createSizes,
   dateValueToNativeDate,
   defaultTypographyType,
   defaultTypographyTypeClassName,