@norges-domstoler/dds-components 21.17.0 → 21.17.1

package/dist/index.mjs

@@ -6733,6 +6733,36 @@ DatePicker.displayName = "DatePicker";
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
 import { useRef as useRef18 } from "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
 import { jsx as jsx238 } from "react/jsx-runtime";
 function TimePicker({
   componentSize = "medium",
@@ -6742,7 +6772,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 = useRef18(null);
   const state = useTimeFieldState({
@@ -6756,6 +6786,7 @@ function TimePicker({
   );
   const iconSize = componentSize === "xsmall" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
+  const formattedSegments = formatTimeSegments(state.segments);
   return /* @__PURE__ */ jsx238(
     DateInput,
     {
@@ -6781,7 +6812,7 @@ function TimePicker({
           )
         }
       ),
-      children: state.segments.map((segment, i) => /* @__PURE__ */ jsx238(
+      children: formattedSegments.map((segment, i) => /* @__PURE__ */ jsx238(
         DateSegment,
         {
           componentSize,