@norges-domstoler/dds-components 21.17.0 → 21.17.1

package/dist/index.d.mts

@@ -451,7 +451,7 @@ interface CommonComponentProps<THTMLProps extends object, TRef extends Ref<unkno
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
  */
-type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Omit<THTMLAttributesProps, 'id' | 'className'> & TOtherProps & CommonComponentProps<THTMLAttributesProps, Ref<TElement>>;
+type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Omit<THTMLAttributesProps, 'id' | 'className' | keyof TOtherProps> & TOtherProps & CommonComponentProps<THTMLAttributesProps, Ref<TElement>>;
 /**
  * Basetype for polymorfe props som eksponeres til konsumenter av designsystemet.
  * Lager en intersection-type med props som sendes inn og `id` og `htmlProps`
@@ -462,7 +462,7 @@ type BaseComponentProps<TElement extends Element, TOtherProps extends object = o
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template TComponentProps Standard `ComponentPropsWithoutRef<E>` som kan overstyres hvis man trenger en annen basetype for `htmlProps`, f.eks. for å støtte ofte brukte attributter på roten.
  */
-type PolymorphicBaseComponentProps<E extends ElementType, TOtherProps extends object = object, TComponentProps extends object = ComponentPropsWithoutRef<E>> = Omit<TComponentProps, 'id' | 'className' | 'style' | 'ref'> & TOtherProps & CommonComponentProps<TComponentProps, ComponentPropsWithRef<E>['ref']> & {
+type PolymorphicBaseComponentProps<E extends ElementType, TOtherProps extends object = object, TComponentProps extends object = ComponentPropsWithoutRef<E>> = Omit<TComponentProps, 'id' | 'className' | 'style' | 'ref' | keyof TOtherProps> & TOtherProps & CommonComponentProps<TComponentProps, ComponentPropsWithRef<E>['ref']> & {
     /**HTML- eller React-element som returneres. */
     as?: E;
     /**Inline style. */
@@ -2325,7 +2325,7 @@ type InputProps = CommonInputProps & {
      * @default "medium"
      */
     componentSize?: InputSize;
-} & Omit<ComponentPropsWithRef<'input'>, 'width'>;
+} & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
 
 declare const defaultTypographyType: TypographyBodyType;
 declare const defaultTypographyTypeClassName: HyphenTypographyType;
@@ -3695,7 +3695,7 @@ type SearchProps = Pick<InputProps, 'tip' | 'label'> & {
     buttonProps?: SearchButtonProps;
     /**Om søkeikonet skal vises. */
     showIcon?: boolean;
-} & Pick<InputProps, 'width'> & Omit<ComponentPropsWithRef<'input'>, 'width'>;
+} & Pick<InputProps, 'width'> & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
 declare const Search$1: {
     ({ componentSize, buttonProps, showIcon, name, label, tip, id, value, width, onChange, className, style, "aria-describedby": ariaDescribedby, ref, ...rest }: SearchProps): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/index.d.ts

@@ -451,7 +451,7 @@ interface CommonComponentProps<THTMLProps extends object, TRef extends Ref<unkno
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
  */
-type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Omit<THTMLAttributesProps, 'id' | 'className'> & TOtherProps & CommonComponentProps<THTMLAttributesProps, Ref<TElement>>;
+type BaseComponentProps<TElement extends Element, TOtherProps extends object = object, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Omit<THTMLAttributesProps, 'id' | 'className' | keyof TOtherProps> & TOtherProps & CommonComponentProps<THTMLAttributesProps, Ref<TElement>>;
 /**
  * Basetype for polymorfe props som eksponeres til konsumenter av designsystemet.
  * Lager en intersection-type med props som sendes inn og `id` og `htmlProps`
@@ -462,7 +462,7 @@ type BaseComponentProps<TElement extends Element, TOtherProps extends object = o
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template TComponentProps Standard `ComponentPropsWithoutRef<E>` som kan overstyres hvis man trenger en annen basetype for `htmlProps`, f.eks. for å støtte ofte brukte attributter på roten.
  */
-type PolymorphicBaseComponentProps<E extends ElementType, TOtherProps extends object = object, TComponentProps extends object = ComponentPropsWithoutRef<E>> = Omit<TComponentProps, 'id' | 'className' | 'style' | 'ref'> & TOtherProps & CommonComponentProps<TComponentProps, ComponentPropsWithRef<E>['ref']> & {
+type PolymorphicBaseComponentProps<E extends ElementType, TOtherProps extends object = object, TComponentProps extends object = ComponentPropsWithoutRef<E>> = Omit<TComponentProps, 'id' | 'className' | 'style' | 'ref' | keyof TOtherProps> & TOtherProps & CommonComponentProps<TComponentProps, ComponentPropsWithRef<E>['ref']> & {
     /**HTML- eller React-element som returneres. */
     as?: E;
     /**Inline style. */
@@ -2325,7 +2325,7 @@ type InputProps = CommonInputProps & {
      * @default "medium"
      */
     componentSize?: InputSize;
-} & Omit<ComponentPropsWithRef<'input'>, 'width'>;
+} & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
 
 declare const defaultTypographyType: TypographyBodyType;
 declare const defaultTypographyTypeClassName: HyphenTypographyType;
@@ -3695,7 +3695,7 @@ type SearchProps = Pick<InputProps, 'tip' | 'label'> & {
     buttonProps?: SearchButtonProps;
     /**Om søkeikonet skal vises. */
     showIcon?: boolean;
-} & Pick<InputProps, 'width'> & Omit<ComponentPropsWithRef<'input'>, 'width'>;
+} & Pick<InputProps, 'width'> & Omit<ComponentPropsWithRef<'input'>, 'width' | 'height'>;
 declare const Search$1: {
     ({ componentSize, buttonProps, showIcon, name, label, tip, id, value, width, onChange, className, style, "aria-describedby": ariaDescribedby, ref, ...rest }: SearchProps): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/index.js

@@ -7066,6 +7066,36 @@ DatePicker.displayName = "DatePicker";
 var import_datepicker6 = require("@react-aria/datepicker");
 var import_datepicker7 = require("@react-stately/datepicker");
 var import_react48 = require("react");
+
+// src/components/date-inputs/TimePicker/TimePicker.utils.ts
+function formatTimeSegments(segments) {
+  const hourSegment = segments.find((segment) => segment.type === "hour");
+  const minuteSegment = segments.find((segment) => segment.type === "minute");
+  const separatorSegment = segments.find(
+    (segment) => segment.type === "literal" && segment.isPlaceholder === void 0
+  );
+  if (!hourSegment || !minuteSegment || !separatorSegment) {
+    throw new Error("Invalid time segments");
+  }
+  const formattedHourSegment = {
+    ...hourSegment,
+    text: hourSegment.text.padStart(2, "0"),
+    placeholder: "\u2013\u2013"
+  };
+  const formattedMinuteSegment = {
+    ...minuteSegment,
+    text: minuteSegment.text.padStart(2, "0"),
+    placeholder: "\u2013\u2013"
+  };
+  const formattedSeparatorSegment = { ...separatorSegment, text: ":" };
+  return [
+    formattedHourSegment,
+    formattedSeparatorSegment,
+    formattedMinuteSegment
+  ];
+}
+
+// src/components/date-inputs/TimePicker/TimePicker.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
 function TimePicker({
   componentSize = "medium",
@@ -7075,7 +7105,7 @@ function TimePicker({
 }) {
   const lang = useLanguage();
   if (!lang) {
-    throw new Error("DatePicker must be used within a DdsProvider");
+    throw new Error("TimePicker must be used within a DdsProvider");
   }
   const internalRef = (0, import_react48.useRef)(null);
   const state = (0, import_datepicker7.useTimeFieldState)({
@@ -7089,6 +7119,7 @@ function TimePicker({
   );
   const iconSize = componentSize === "xsmall" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
+  const formattedSegments = formatTimeSegments(state.segments);
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
     DateInput,
     {
@@ -7114,7 +7145,7 @@ function TimePicker({
           )
         }
       ),
-      children: state.segments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
+      children: formattedSegments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
         DateSegment,
         {
           componentSize,