@norges-domstoler/dds-components 23.1.0 → 23.1.1

package/dist/index.mjs

@@ -4456,7 +4456,7 @@ var Button = ({
   as: propAs,
   children,
   purpose = "primary",
-  size: size2 = "medium",
+  size: propSize = "medium",
   iconPosition = "left",
   loading,
   loadingTooltip,
@@ -4483,11 +4483,12 @@ var Button = ({
   const isIconButton = !hasLabel && hasIcon;
   const isTextButton = hasLabel && !hasIcon;
   const noContent = !hasLabel && !hasIcon;
+  const size2 = groupSize != null ? groupSize : propSize;
   const buttonCn = cn(
     className,
     Button_default.button,
     Button_default[`button--${groupPurpose ? groupPurpose : purpose}`],
-    Button_default[`button--${groupSize ? groupSize : size2}`],
+    Button_default[`button--${size2}`],
     isTextButton && Button_default["just-text"],
     ...hasLabelAndIcon ? [Button_default["with-text-and-icon"], Button_default[`with-icon-${iconPosition}`]] : [],
     isIconButton && Button_default["just-icon"],
@@ -6414,7 +6415,6 @@ var DateInput_default = {
   segment: "DateInput_segment",
   segment__placeholder: "DateInput_segment__placeholder",
   "segment__placeholder--invisible": "DateInput_segment__placeholder--invisible",
-  "clear-button--inactive": "DateInput_clear-button--inactive",
   "icon-wrapper--disabled": "DateInput_icon-wrapper--disabled",
   "popover-button": "DateInput_popover-button",
   "icon-wrapper--readonly": "DateInput_icon-wrapper--readonly",
@@ -6430,8 +6430,8 @@ var DateInput_default = {
   "calendar__cell-button": "DateInput_calendar__cell-button",
   "calendar__cell-button--today": "DateInput_calendar__cell-button--today",
   "calendar__cell-button--default": "DateInput_calendar__cell-button--default",
-  "calendar__cell-button--selected": "DateInput_calendar__cell-button--selected",
   "calendar__cell-button--unavailable": "DateInput_calendar__cell-button--unavailable",
+  "calendar__cell-button--selected": "DateInput_calendar__cell-button--selected",
   "calendar__cell-button--unavailable--today": "DateInput_calendar__cell-button--unavailable--today"
 };
 
@@ -6458,28 +6458,31 @@ function CalendarCell({ date, state, onClose }) {
     isDisabled,
     isUnavailable
   } = useCalendarCell({ date }, state, ref);
-  if (isDisabled) {
+  if (isOutsideVisibleRange) {
     return /* @__PURE__ */ jsx241("td", { ...cellProps });
   }
-  const variant = isSelected ? "selected" : isUnavailable || isDisabled ? "unavailable" : "default";
   const closeOnKeyboardBlurForward = (event) => {
     if (event.key === "Tab" && event.shiftKey === false) {
       onClose();
     }
   };
+  const isEffectivelyUnavailable = isUnavailable || isDisabled;
+  const isUnavailableToday = isEffectivelyUnavailable && isToday(date, timezone);
   return /* @__PURE__ */ jsx241("td", { ...cellProps, children: /* @__PURE__ */ jsx241(
     "button",
     {
       ...buttonProps,
       type: "button",
       ref,
-      hidden: isOutsideVisibleRange,
       onKeyDown: closeOnKeyboardBlurForward,
       className: cn(
         DateInput_default["calendar__grid-element"],
         DateInput_default["calendar__cell-button"],
         isToday(date, timezone) && DateInput_default["calendar__cell-button--today"],
-        DateInput_default[`calendar__cell-button--${variant}`],
+        DateInput_default[`calendar__cell-button--default`],
+        isSelected && DateInput_default[`calendar__cell-button--selected`],
+        isEffectivelyUnavailable && DateInput_default[`calendar__cell-button--unavailable`],
+        isUnavailableToday && DateInput_default["calendar__cell-button--unavailable--today"],
         typographyStyles_default["body-short-small"],
         focusable
       ),
@@ -6861,6 +6864,8 @@ function Calendar(props) {
     nextButtonProps: { onPress: onNext },
     title
   } = useCalendar(props, state);
+  const isPrevDisabled = !!props.minValue && state.visibleRange.start.compare(props.minValue) <= 0;
+  const isNextDisabled = !!props.maxValue && state.visibleRange.end.compare(props.maxValue) >= 0;
   const { onClose, closeButtonRef } = useContext12(CalendarPopoverContext);
   const closeOnKeyboardBlurBack = (event) => {
     var _a;
@@ -6875,6 +6880,7 @@ function Calendar(props) {
       /* @__PURE__ */ jsx244(
         Button,
         {
+          "aria-hidden": optAttr(isPrevDisabled),
           type: "button",
           "aria-label": t(texts7.previousMonth),
           onClick: (e) => onPrev == null ? void 0 : onPrev(e),
@@ -6882,7 +6888,10 @@ function Calendar(props) {
           purpose: "tertiary",
           icon: ArrowLeftIcon,
           htmlProps: { onKeyDown: closeOnKeyboardBlurBack },
-          className: DateInput_default["calendar__month-button"]
+          className: cn(
+            DateInput_default["calendar__month-button"],
+            isPrevDisabled && utilStyles_default.invisible
+          )
         }
       ),
       /* @__PURE__ */ jsx244(
@@ -6898,12 +6907,16 @@ function Calendar(props) {
         Button,
         {
           type: "button",
+          "aria-hidden": optAttr(isNextDisabled),
           "aria-label": t(texts7.nextMonth),
           onClick: (e) => onNext == null ? void 0 : onNext(e),
           size: "small",
           purpose: "tertiary",
           icon: ArrowRightIcon,
-          className: DateInput_default["calendar__month-button"]
+          className: cn(
+            DateInput_default["calendar__month-button"],
+            isNextDisabled && utilStyles_default.invisible
+          )
         }
       )
     ] }),
@@ -7119,9 +7132,13 @@ function DateSegment({
   const ref = useRef15(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
   return /* @__PURE__ */ jsxs90(
-    "div",
+    Box,
     {
       ...segmentProps,
+      padding: "0 0.05rem",
+      width: "max-content",
+      height: "max-content",
+      marginBlock: "auto",
       "aria-describedby": spaceSeparatedIdListGenerator([
         errorMessageId ? errorMessageId : void 0,
         tipId ? tipId : void 0
@@ -7398,7 +7415,7 @@ function DateField({
           absolute: true,
           "aria-label": t(texts9.clearDate),
           "aria-hidden": !hasValue,
-          className: cn(!hasValue && DateInput_default["clear-button--inactive"]),
+          className: cn(!hasValue && utilStyles_default.invisible),
           size: componentSize,
           onClick: clearDate
         }
@@ -10147,6 +10164,7 @@ var inlineInputCns = (hasErrorState, showEditingIcon) => [
 var inlineTextareaCns = (hasErrorState, showEditingIcon) => [
   ...inlineInputCns(hasErrorState, showEditingIcon),
   typographyStyles_default["body-long-medium"],
+  InlineEdit_default["inline-textarea"],
   utilStyles_default.scrollbar
 ];
 var inlineSelectCns = (hasErrorState, showEditingIcon, hasValue) => [
@@ -11073,7 +11091,6 @@ import { useState as useState23 } from "react";
 var Pagination_default = {
   list: "Pagination_list",
   list__item: "Pagination_list__item",
-  "list__item--hidden": "Pagination_list__item--hidden",
   indicators: "Pagination_indicators",
   "truncation-icon": "Pagination_truncation-icon"
 };
@@ -11275,12 +11292,16 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     boxSizing: "border-box",
-    paddingInline: "var(--dds-spacing-x0-25)",
+    paddingInlineStart: "var(--dds-spacing-x0-25)",
+    paddingBlock: "var(--dds-spacing-x0-125)",
     ...state.selectProps.isDisabled && {
       color: "var(--dds-color-text-subtle)"
     },
     ...isReadOnly && {
       color: "var(--dds-color-text-medium)"
+    },
+    ...(state.selectProps.isDisabled || isReadOnly) && {
+      paddingInlineEnd: "var(--dds-spacing-x0-25)"
     }
   }),
   multiValueRemove: (provided, state) => state.selectProps.isDisabled || isReadOnly ? {
@@ -11968,7 +11989,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: previousPageButton
@@ -11980,7 +12001,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: nextPageButton
@@ -12001,7 +12022,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: /* @__PURE__ */ jsx309(
@@ -12023,7 +12044,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: previousPageButton
@@ -12044,7 +12065,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: nextPageButton
@@ -12055,7 +12076,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: /* @__PURE__ */ jsx309(
@@ -12579,7 +12600,8 @@ var PhoneInput_default = {
   "inputs-container--small-screen-md": "PhoneInput_inputs-container--small-screen-md",
   "inputs-container--small-screen-lg": "PhoneInput_inputs-container--small-screen-lg",
   "inputs-container--small-screen-xl": "PhoneInput_inputs-container--small-screen-xl",
-  "calling-code": "PhoneInput_calling-code"
+  "calling-code": "PhoneInput_calling-code",
+  "calling-code--disabled": "PhoneInput_calling-code--disabled"
 };
 
 // src/components/PhoneInput/PhoneInput.tsx
@@ -12774,7 +12796,8 @@ var PhoneInput = ({
                 className: cn(
                   typographyStyles_default[`body-short-${componentSize}`],
                   Input_default["input-group__absolute-el"],
-                  PhoneInput_default["calling-code"]
+                  PhoneInput_default["calling-code"],
+                  (commonProps.disabled || commonProps.readOnly) && PhoneInput_default["calling-code--disabled"]
                 ),
                 ref: callingCodeRef,
                 children: callingCode
@@ -15204,12 +15227,6 @@ ToggleBar.displayName = "ToggleBar";
 // src/components/ToggleBar/ToggleRadio.tsx
 import { useId as useId31 } from "react";
 import { jsx as jsx343, jsxs as jsxs133 } from "react/jsx-runtime";
-var typographyTypes = {
-  large: "bodyShortLarge",
-  medium: "bodyShortMedium",
-  small: "bodyShortSmall",
-  xsmall: "bodyShortXsmall"
-};
 var calculateChecked = (value, group, checked) => {
   if (typeof checked !== "undefined") return checked;
   if (typeof value !== "undefined" && value !== null && group) {
@@ -15272,11 +15289,13 @@ var ToggleRadio = ({
           }
         ),
         /* @__PURE__ */ jsxs133(
-          Typography,
+          HStack,
           {
             as: "span",
-            typographyType: typographyTypes[group.size],
+            justifyContent: "center",
+            alignItems: "center",
             className: cn(
+              typographyStyles_default[`body-short-${group.size}`],
               ToggleBar_default.content,
               Button_default[contentTypeCn],
               hasLabel && hasIcon && Button_default["with-icon-left"],
@@ -15300,10 +15319,7 @@ import { useId as useId32 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
-  content: "ToggleButton_content",
-  small: "ToggleButton_small",
-  xsmall: "ToggleButton_xsmall",
-  "content--with-icon": "ToggleButton_content--with-icon"
+  content: "ToggleButton_content"
 };
 
 // src/components/ToggleButton/ToggleButton.tsx
@@ -15336,19 +15352,29 @@ var ToggleButton = ({
       }
     ),
     /* @__PURE__ */ jsxs134(
-      "span",
+      Paper,
       {
+        as: "span",
+        border: "border-default",
+        background: "surface-default",
+        borderRadius: "rounded",
+        width: "fit-content",
+        display: "inline-flex",
+        alignItems: "center",
         className: cn(
           ToggleButton_default.content,
-          ToggleButton_default[size2],
-          hasIcon && ToggleButton_default["content--with-icon"],
           typographyStyles_default[`body-short-${size2}`],
-          focus_default["focus-styled-sibling"]
+          focus_default["focus-styled-sibling"],
+          Button_default[`button--${size2}`],
+          Button_default["just-text"],
+          ...hasIcon ? [
+            Button_default["with-text-and-icon"],
+            Button_default["with-icon-left"]
+          ] : []
         ),
         children: [
           hasIcon && /* @__PURE__ */ jsx344(Icon, { icon, iconSize: "component" }),
-          " ",
-          label
+          /* @__PURE__ */ jsx344("span", { children: label })
         ]
       }
     )
@@ -15763,7 +15789,6 @@ export {
   removeListStyling,
   renderInputMessage,
   scrollbarStyling,
-  typographyTypes,
   useAccordion,
   useAccordionContext,
   useCallbackRef,