@norges-domstoler/dds-components 23.1.0 → 23.1.2

package/dist/index.js

@@ -406,7 +406,6 @@ __export(index_exports, {
   removeListStyling: () => removeListStyling,
   renderInputMessage: () => renderInputMessage,
   scrollbarStyling: () => scrollbarStyling,
-  typographyTypes: () => typographyTypes,
   useAccordion: () => useAccordion,
   useAccordionContext: () => useAccordionContext,
   useCallbackRef: () => useCallbackRef,
@@ -4849,7 +4848,7 @@ var Button = ({
   as: propAs,
   children,
   purpose = "primary",
-  size: size2 = "medium",
+  size: propSize = "medium",
   iconPosition = "left",
   loading,
   loadingTooltip,
@@ -4876,11 +4875,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"],
@@ -6785,7 +6785,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",
@@ -6801,8 +6800,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"
 };
 
@@ -6829,28 +6828,31 @@ function CalendarCell({ date, state, onClose }) {
     isDisabled,
     isUnavailable
   } = (0, import_calendar.useCalendarCell)({ date }, state, ref);
-  if (isDisabled) {
+  if (isOutsideVisibleRange) {
     return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)("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 && (0, import_date.isToday)(date, timezone);
   return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)("td", { ...cellProps, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
     "button",
     {
       ...buttonProps,
       type: "button",
       ref,
-      hidden: isOutsideVisibleRange,
       onKeyDown: closeOnKeyboardBlurForward,
       className: cn(
         DateInput_default["calendar__grid-element"],
         DateInput_default["calendar__cell-button"],
         (0, import_date.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
       ),
@@ -7223,6 +7225,8 @@ function Calendar(props) {
     nextButtonProps: { onPress: onNext },
     title
   } = (0, import_calendar3.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 } = (0, import_react43.useContext)(CalendarPopoverContext);
   const closeOnKeyboardBlurBack = (event) => {
     var _a;
@@ -7237,6 +7241,7 @@ function Calendar(props) {
       /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
         Button,
         {
+          "aria-hidden": optAttr(isPrevDisabled),
           type: "button",
           "aria-label": t(texts7.previousMonth),
           onClick: (e) => onPrev == null ? void 0 : onPrev(e),
@@ -7244,7 +7249,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__ */ (0, import_jsx_runtime244.jsx)(
@@ -7260,12 +7268,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
+          )
         }
       )
     ] }),
@@ -7477,9 +7489,13 @@ function DateSegment({
   const ref = (0, import_react45.useRef)(null);
   const { segmentProps } = (0, import_datepicker.useDateSegment)(segment, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
-    "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
@@ -7488,8 +7504,7 @@ function DateSegment({
       className: cn(
         segmentProps.className,
         DateInput_default.segment,
-        typographyStyles_default[`body-short-${componentSize}`],
-        Input_default[`input--${componentSize}`]
+        typographyStyles_default[`body-short-${componentSize}`]
       ),
       style: {
         ...segmentProps.style,
@@ -7756,7 +7771,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
         }
@@ -10472,6 +10487,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) => [
@@ -11393,7 +11409,6 @@ var import_react76 = require("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"
 };
@@ -11589,12 +11604,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 ? {
@@ -12280,7 +12299,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: previousPageButton
@@ -12292,7 +12311,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: nextPageButton
@@ -12313,7 +12332,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
@@ -12335,7 +12354,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnFirstPage && Pagination_default["list__item--hidden"]
+                    isOnFirstPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnFirstPage,
                   children: previousPageButton
@@ -12356,7 +12375,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: nextPageButton
@@ -12367,7 +12386,7 @@ var Pagination = ({
                 {
                   className: cn(
                     Pagination_default.list__item,
-                    isOnLastPage && Pagination_default["list__item--hidden"]
+                    isOnLastPage && utilStyles_default.invisible
                   ),
                   "aria-hidden": isOnLastPage,
                   children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
@@ -12885,7 +12904,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
@@ -13080,7 +13100,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
@@ -15450,12 +15471,6 @@ ToggleBar.displayName = "ToggleBar";
 // src/components/ToggleBar/ToggleRadio.tsx
 var import_react104 = require("react");
 var import_jsx_runtime344 = require("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) {
@@ -15518,11 +15533,13 @@ var ToggleRadio = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
-          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"],
@@ -15546,10 +15563,7 @@ var import_react105 = require("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
@@ -15582,19 +15596,29 @@ var ToggleButton = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
-      "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__ */ (0, import_jsx_runtime345.jsx)(Icon, { icon, iconSize: "component" }),
-          " ",
-          label
+          /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { children: label })
         ]
       }
     )
@@ -16010,7 +16034,6 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   removeListStyling,
   renderInputMessage,
   scrollbarStyling,
-  typographyTypes,
   useAccordion,
   useAccordionContext,
   useCallbackRef,