@norges-domstoler/dds-components 0.0.0-dev-20240117123110 → 0.0.0-dev-20240117135928

package/dist/index.d.mts

@@ -2305,20 +2305,36 @@ declare namespace Calendar {
 type DateFieldProps<T extends DateValue$1 = CalendarDate> = AriaDateFieldOptions<T> & {
     className?: string;
     buttonProps?: ReturnType<typeof useDatePicker>['buttonProps'];
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
 } & Pick<InputProps$1, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
 
 interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'granularity'>, Pick<DateFieldProps<CalendarDate>, 'componentSize' | 'tip' | 'style'> {
     label?: string;
     errorMessage?: string;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
 }
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLElement>>;
 
 type TimePickerProps = Omit<AriaTimeFieldProps<Time>, 'hideTimeZone'> & {
     className?: string;
-} & Pick<InputProps$1, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
+} & Pick<InputProps, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
 declare const TimePicker: react.ForwardRefExoticComponent<Omit<AriaTimeFieldProps<Time>, "hideTimeZone"> & {
     className?: string | undefined;
-} & Pick<InputProps$1, "style" | "disabled" | "tip" | "errorMessage" | "componentSize"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
+} & Pick<InputProps, "style" | "disabled" | "tip" | "errorMessage" | "componentSize"> & react.RefAttributes<HTMLDivElement>>;
 
 declare function nativeDateToDateValue(date: Date, timeZone?: string | undefined): DateValue$1;
 declare function dateValueToNativeDate(date: DateValue$1, timeZone?: string | undefined): Date;

package/dist/index.d.ts

@@ -2305,20 +2305,36 @@ declare namespace Calendar {
 type DateFieldProps<T extends DateValue$1 = CalendarDate> = AriaDateFieldOptions<T> & {
     className?: string;
     buttonProps?: ReturnType<typeof useDatePicker>['buttonProps'];
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
 } & Pick<InputProps$1, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
 
 interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'granularity'>, Pick<DateFieldProps<CalendarDate>, 'componentSize' | 'tip' | 'style'> {
     label?: string;
     errorMessage?: string;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
 }
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLElement>>;
 
 type TimePickerProps = Omit<AriaTimeFieldProps<Time>, 'hideTimeZone'> & {
     className?: string;
-} & Pick<InputProps$1, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
+} & Pick<InputProps, 'componentSize' | 'errorMessage' | 'tip' | 'disabled' | 'style'>;
 declare const TimePicker: react.ForwardRefExoticComponent<Omit<AriaTimeFieldProps<Time>, "hideTimeZone"> & {
     className?: string | undefined;
-} & Pick<InputProps$1, "style" | "disabled" | "tip" | "errorMessage" | "componentSize"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * For å sette en egendefinert bredde på komponenten.
+     */
+    width?: CSS.Properties['width'];
+} & Pick<InputProps, "style" | "disabled" | "tip" | "errorMessage" | "componentSize"> & react.RefAttributes<HTMLDivElement>>;
 
 declare function nativeDateToDateValue(date: Date, timeZone?: string | undefined): DateValue$1;
 declare function dateValueToNativeDate(date: DateValue$1, timeZone?: string | undefined): Date;

package/dist/index.js

@@ -10897,7 +10897,11 @@ var DateFieldContainer = import_styled_components72.default.div`
 var InputDiv = (0, import_styled_components72.default)(StatefulInput).attrs({
   as: "div"
 })`
-  min-width: ${({ componentSize = "medium" }) => datePickerTokens.datefield[componentSize].minWidth};
+  ${({ $width, componentSize = "medium" }) => $width ? import_styled_components72.css`
+          width: ${$width};
+        ` : import_styled_components72.css`
+          min-width: ${datePickerTokens.datefield[componentSize].minWidth};
+        `}
   display: inline-flex;
   flex-direction: row;
   gap: ${datePickerTokens.gap};
@@ -10925,6 +10929,7 @@ var DateInput = (0, import_react81.forwardRef)(
     prefix: button3,
     labelProps,
     fieldProps,
+    width,
     ...props
   }, forwardedRef) => {
     var _a;
@@ -10938,6 +10943,7 @@ var DateInput = (0, import_react81.forwardRef)(
         InputDiv,
         {
           ...fieldProps,
+          $width: width,
           style,
           disabled,
           componentSize,
@@ -11107,7 +11113,7 @@ var import_jsx_runtime237 = require("react/jsx-runtime");
 var refIsFocusable = (ref) => {
   return typeof ref === "object" && ref !== null && "focus" in ref;
 };
-function _DatePicker({ errorMessage, componentSize, tip, style, ...props }, forwardedRef) {
+function _DatePicker({ errorMessage, componentSize, tip, style, width, ...props }, forwardedRef) {
   const state = (0, import_datepicker4.useDatePickerState)(props);
   const domRef = useFocusManagerRef(
     refIsFocusable(import_react85.forwardRef) ? forwardedRef : null
@@ -11131,7 +11137,8 @@ function _DatePicker({ errorMessage, componentSize, tip, style, ...props }, forw
         errorMessage,
         buttonProps,
         isOpen: state.isOpen,
-        style
+        style,
+        width
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(CalendarPopoverContent, { children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Calendar, { ...calendarProps }) })
@@ -11151,7 +11158,7 @@ var TimePickerIcon = (0, import_styled_components74.default)(Icon)`
   width: ${({ $componentSize }) => datePickerTokens.calendarButton[$componentSize].size};
   margin-left: -1px; // To align with TextInputs icons
 `;
-function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
+function _TimePicker({ componentSize = "medium", width, ...props }, forwardedRef) {
   const ref = (0, import_react86.useRef)(null);
   const state = (0, import_datepicker7.useTimeFieldState)({
     ...props,
@@ -11167,6 +11174,7 @@ function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
     DateInput,
     {
       ...props,
+      width,
       disabled,
       required: props.isRequired,
       componentSize,