@norges-domstoler/dds-components 21.8.0 → 21.9.1

package/dist/index.d.mts

@@ -2311,7 +2311,7 @@ declare const Typography: {
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
-    /**Bredde for inputfeltet. */
+    /**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
     width?: ResponsiveProps['width'];
     /**Hjelpetekst. */
     tip?: string;
@@ -3769,7 +3769,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     ref?: SelectForwardRefType<Option, IsMulti>;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & Pick<ResponsiveProps, 'width'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
-declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, required, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
+declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, required, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2311,7 +2311,7 @@ declare const Typography: {
 interface CommonInputProps {
     /**Ledetekst. */
     label?: string;
-    /**Bredde for inputfeltet. */
+    /**Bredde for inputfeltet. Kan settes per brekkpunkt, manglende brekkpunter får da default bredde. */
     width?: ResponsiveProps['width'];
     /**Hjelpetekst. */
     tip?: string;
@@ -3769,7 +3769,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     ref?: SelectForwardRefType<Option, IsMulti>;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & Pick<ResponsiveProps, 'width'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
-declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, required, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
+declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, required, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }

package/dist/index.js

@@ -1492,7 +1492,7 @@ function getResponsiveCSSProperties(property, prefix2, suffix) {
   }
   return properties;
 }
-function applyResponsiveStyle(p, bp, largeScreenP) {
+function styleUpToBreakpoint(p, bp, largeScreenP) {
   if (!bp) return largeScreenP;
   const bpIndex = BREAKPOINTS.indexOf(bp);
   return BREAKPOINTS.reduce((acc, curr, index) => {
@@ -5863,7 +5863,7 @@ function CookieBanner({
       ),
       role: "region",
       "aria-label": tAriaLabel,
-      padding: applyResponsiveStyle("x1", "sm", "x1.5"),
+      padding: styleUpToBreakpoint("x1", "sm", "x1.5"),
       width,
       maxHeight,
       border: "border-default",
@@ -5896,7 +5896,7 @@ function CookieBanner({
               buttons && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
                 HStack,
                 {
-                  gap: applyResponsiveStyle("x1", "sm", "x1.5"),
+                  gap: styleUpToBreakpoint("x1", "sm", "x1.5"),
                   flexWrap: "wrap",
                   paddingBlock: "x0.25 0",
                   children: buttons.map((props) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Button, { ...props, size: "medium", purpose: "secondary" }))
@@ -6631,7 +6631,16 @@ function getDefaultText(value, defaultValue) {
   return "";
 }
 function getInputWidth(width, defaultW) {
-  return width ? width : defaultW ? defaultW : "var(--dds-input-default-width)";
+  const fallback = defaultW ? defaultW : "var(--dds-input-default-width)";
+  if (isBreakpointObject(width)) {
+    return BREAKPOINTS.reduce((acc, bp) => {
+      return {
+        ...acc,
+        [bp]: bp in width ? width[bp] : fallback
+      };
+    }, {});
+  }
+  return width != null ? width : fallback;
 }
 
 // src/components/date-inputs/common/DateInput.tsx
@@ -9285,8 +9294,8 @@ var InternalHeader = (props) => {
     {
       display: "flex",
       alignItems: "center",
-      gap: applyResponsiveStyle("x1.5", smallScreenBreakpoint, "x1"),
-      paddingInline: applyResponsiveStyle(
+      gap: styleUpToBreakpoint("x1.5", smallScreenBreakpoint, "x1"),
+      paddingInline: styleUpToBreakpoint(
         "x1.5",
         smallScreenBreakpoint,
         "x1 x0.5"
@@ -10132,6 +10141,7 @@ function Select({
   onKeyDown,
   openMenuOnClick,
   ref,
+  instanceId,
   ...rest
 }) {
   const themeContext = (0, import_react70.useContext)(ThemeContext);
@@ -10161,6 +10171,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,
@@ -10182,7 +10193,8 @@ function Select({
         {
           ...props,
           readOnly,
-          "aria-required": ariaRequired
+          "aria-required": ariaRequired,
+          "aria-activedescendant": props["aria-activedescendant"] === "" ? void 0 : props["aria-activedescendant"]
         },
         hasErrorMessage,
         spaceSeparatedIdListGenerator([
@@ -10629,8 +10641,8 @@ var Pagination = ({
       gap: "x0.75",
       justifyContent: "space-between",
       flexWrap: "wrap",
-      flexDirection: applyResponsiveStyle("column", smallScreenBreakpoint),
-      alignItems: applyResponsiveStyle("center", smallScreenBreakpoint),
+      flexDirection: styleUpToBreakpoint("column", smallScreenBreakpoint),
+      alignItems: styleUpToBreakpoint("center", smallScreenBreakpoint),
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime287.jsxs)("div", { className: Pagination_default.indicators, children: [
@@ -11275,7 +11287,7 @@ var PhoneInput = ({
       Box,
       {
         display: "flex",
-        flexDirection: applyResponsiveStyle("column", bp, "row"),
+        flexDirection: styleUpToBreakpoint("column", bp, "row"),
         className: cn(
           PhoneInput_default["inputs-container"],
           !!bp && PhoneInput_default[`inputs-container--small-screen-${bp}`]
@@ -11288,7 +11300,7 @@ var PhoneInput = ({
           /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
             NativeSelect,
             {
-              width: applyResponsiveStyle(
+              width: styleUpToBreakpoint(
                 "100%",
                 bp,
                 componentSize === "xsmall" ? "5rem" : "8rem"