@mantine/dates 3.6.4 → 3.6.8

package/esm/components/TimeInputBase/TimeField/TimeField.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useState, useRef } from 'react';
 import { useMergedRef, clamp } from '@mantine/hooks';
 import { Text } from '@mantine/core';
 import { padTime } from '../pad-time/pad-time.js';
@@ -42,6 +42,7 @@ const TimeField = forwardRef((_a, ref) => {
     withSeparator = false,
     size = "sm",
     max,
+    min = 0,
     value
   } = _b, others = __objRest(_b, [
     "className",
@@ -52,16 +53,22 @@ const TimeField = forwardRef((_a, ref) => {
     "withSeparator",
     "size",
     "max",
+    "min",
     "value"
   ]);
+  const [digitsEntered, setDigitsEntered] = useState(0);
   const { classes, cx, theme } = useStyles({ size, hasValue: !!value });
   const inputRef = useRef();
   const handleFocus = (event) => {
     typeof onFocus === "function" && onFocus(event);
     inputRef.current.select();
+    setDigitsEntered(0);
   };
   const handleBlur = (event) => {
     typeof onBlur === "function" && onBlur(event);
+    if (digitsEntered === 1) {
+      typeof onChange === "function" && onChange(event.currentTarget.value, false);
+    }
   };
   const handleClick = (event) => {
     event.stopPropagation();
@@ -70,25 +77,32 @@ const TimeField = forwardRef((_a, ref) => {
   const handleKeyDown = (event) => {
     if (event.nativeEvent.code === "ArrowUp") {
       event.preventDefault();
-      const padded = padTime(clamp({ value: parseInt(event.currentTarget.value, 10) + 1, max, min: 0 }).toString());
+      const padded = padTime(clamp({ value: parseInt(event.currentTarget.value, 10) + 1, max, min }).toString());
       if (value !== padded) {
-        setValue(padded);
         onChange(padded, false);
       }
     }
     if (event.nativeEvent.code === "ArrowDown") {
       event.preventDefault();
-      const padded = padTime(clamp({ value: parseInt(event.currentTarget.value, 10) - 1, max, min: 0 }).toString());
+      const padded = padTime(clamp({ value: parseInt(event.currentTarget.value, 10) - 1, max, min }).toString());
       if (value !== padded) {
-        setValue(padded);
         onChange(padded, false);
       }
     }
   };
+  const handleChange = (event) => {
+    setDigitsEntered(digitsEntered + 1);
+    const _val = parseInt(event.currentTarget.value, 10).toString();
+    if (_val === "0" && digitsEntered === 0) {
+      setValue("00");
+      return;
+    }
+    onChange(_val, true, digitsEntered > 0);
+  };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "text",
     ref: useMergedRef(inputRef, ref),
-    onChange: (event) => onChange(event.currentTarget.value, true),
+    onChange: handleChange,
     onClick: handleClick,
     onFocus: handleFocus,
     onBlur: handleBlur,

package/esm/components/TimeInputBase/TimeField/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../../src/components/TimeInputBase/TimeField/TimeField.tsx"],"sourcesContent":["import React, { useRef, forwardRef } from 'react';\nimport { useMergedRef, clamp } from '@mantine/hooks';\nimport { Text, MantineSize } from '@mantine/core';\nimport { padTime } from '../pad-time/pad-time';\nimport useStyles from '../TimeInputBase.styles';\n\ninterface TimeFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> {\n  /** Called with onChange event */\n  onChange(value: string, triggerShift: boolean): void;\n\n  /** Called when input loses focus, used to format value */\n  setValue(value: string): void;\n\n  /** Adds colon after the field */\n  withSeparator?: boolean;\n\n  /** Colon text size */\n  size?: MantineSize;\n\n  /** Maximum possible value, min value is always 0 */\n  max?: number;\n}\n\nexport const TimeField = forwardRef<HTMLInputElement, TimeFieldProps>(\n  (\n    {\n      className,\n      onFocus,\n      onBlur,\n      onChange,\n      setValue,\n      withSeparator = false,\n      size = 'sm',\n      max,\n      value,\n      ...others\n    }: TimeFieldProps,\n    ref\n  ) => {\n    const { classes, cx, theme } = useStyles({ size, hasValue: !!value });\n    const inputRef = useRef<HTMLInputElement>();\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onFocus === 'function' && onFocus(event);\n      inputRef.current.select();\n    };\n\n    const handleBlur = (event: any) => {\n      typeof onBlur === 'function' && onBlur(event);\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {\n      event.stopPropagation();\n      inputRef.current.select();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n        const padded = padTime(\n          clamp({ value: parseInt(event.currentTarget.value, 10) + 1, max, min: 0 }).toString()\n        );\n\n        if (value !== padded) {\n          setValue(padded);\n          onChange(padded, false);\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n        const padded = padTime(\n          clamp({ value: parseInt(event.currentTarget.value, 10) - 1, max, min: 0 }).toString()\n        );\n\n        if (value !== padded) {\n          setValue(padded);\n          onChange(padded, false);\n        }\n      }\n    };\n\n    return (\n      <>\n        <input\n          type=\"text\"\n          ref={useMergedRef(inputRef, ref)}\n          onChange={(event) => onChange(event.currentTarget.value, true)}\n          onClick={handleClick}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          value={value}\n          className={cx(classes.timeInput, className)}\n          {...others}\n        />\n\n        {withSeparator && (\n          <Text\n            size={size}\n            style={{\n              lineHeight: 1,\n              color: value\n                ? 'inherit'\n                : theme.colorScheme === 'dark'\n                ? theme.colors.dark[2]\n                : theme.colors.gray[7],\n            }}\n          >\n            :\n          </Text>\n        )}\n      </>\n    );\n  }\n);\n\nTimeField.displayName = '@mantine/dates/TimeField';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeField.js","sources":["../../../../src/components/TimeInputBase/TimeField/TimeField.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useState } from 'react';\nimport { useMergedRef, clamp } from '@mantine/hooks';\nimport { Text, MantineSize } from '@mantine/core';\nimport { padTime } from '../pad-time/pad-time';\nimport useStyles from '../TimeInputBase.styles';\nimport type { createTimeHandler } from '../create-time-handler/create-time-handler';\n\ninterface TimeFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> {\n  /** Called with onChange event */\n  onChange: ReturnType<typeof createTimeHandler>;\n\n  /** Called to set input value and bypass parent validation/onChange calls */\n  setValue(value: string): void;\n\n  /** Adds colon after the field */\n  withSeparator?: boolean;\n\n  /** Colon text size */\n  size?: MantineSize;\n\n  /** Maximum possible value */\n  max?: number;\n\n  /** Minimum possible value. Default 0 */\n  min?: number;\n}\n\nexport const TimeField = forwardRef<HTMLInputElement, TimeFieldProps>(\n  (\n    {\n      className,\n      onFocus,\n      onBlur,\n      onChange,\n      setValue,\n      withSeparator = false,\n      size = 'sm',\n      max,\n      min = 0,\n      value,\n      ...others\n    }: TimeFieldProps,\n    ref\n  ) => {\n    const [digitsEntered, setDigitsEntered] = useState(0);\n    const { classes, cx, theme } = useStyles({ size, hasValue: !!value });\n    const inputRef = useRef<HTMLInputElement>();\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      typeof onFocus === 'function' && onFocus(event);\n      inputRef.current.select();\n      setDigitsEntered(0);\n    };\n\n    const handleBlur = (event: any) => {\n      typeof onBlur === 'function' && onBlur(event);\n      // Call onChange in case the only digit entered is 0\n      if (digitsEntered === 1) {\n        typeof onChange === 'function' && onChange(event.currentTarget.value, false);\n      }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {\n      event.stopPropagation();\n      inputRef.current.select();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n        const padded = padTime(\n          clamp({ value: parseInt(event.currentTarget.value, 10) + 1, max, min }).toString()\n        );\n\n        if (value !== padded) {\n          onChange(padded, false);\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n        const padded = padTime(\n          clamp({ value: parseInt(event.currentTarget.value, 10) - 1, max, min }).toString()\n        );\n\n        if (value !== padded) {\n          onChange(padded, false);\n        }\n      }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setDigitsEntered(digitsEntered + 1);\n\n      const _val = parseInt(event.currentTarget.value, 10).toString();\n\n      // In 12-hour format, 0 is not allowed, but it could be the start of 01, 02, etc.\n      if (_val === '0' && digitsEntered === 0) {\n        setValue('00');\n        return;\n      }\n      onChange(_val, true, digitsEntered > 0);\n    };\n\n    return (\n      <>\n        <input\n          type=\"text\"\n          ref={useMergedRef(inputRef, ref)}\n          onChange={handleChange}\n          onClick={handleClick}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          value={value}\n          className={cx(classes.timeInput, className)}\n          {...others}\n        />\n\n        {withSeparator && (\n          <Text\n            size={size}\n            style={{\n              lineHeight: 1,\n              color: value\n                ? 'inherit'\n                : theme.colorScheme === 'dark'\n                ? theme.colors.dark[2]\n                : theme.colors.gray[7],\n            }}\n          >\n            :\n          </Text>\n        )}\n      </>\n    );\n  }\n);\n\nTimeField.displayName = '@mantine/dates/TimeField';\n"],"names":[],"mappings":"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"}

package/esm/components/TimeInputBase/create-time-handler/create-time-handler.js

@@ -2,22 +2,16 @@ import { clamp } from '@mantine/hooks';
 import { padTime } from '../pad-time/pad-time.js';
 
 function createTimeHandler({ onChange, nextRef, min, max, maxValue }) {
-  return (value, triggerShift) => {
-    var _a, _b, _c, _d;
-    if (value === "00") {
-      onChange("00");
-      triggerShift && ((_a = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _a.focus());
-      triggerShift && ((_b = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _b.select());
-      return;
-    }
+  return (value, triggerShift, forceTriggerShift = false) => {
+    var _a, _b;
     const parsed = parseInt(value, 10);
     if (Number.isNaN(parsed)) {
       return;
     }
-    if (parsed > maxValue) {
+    if (parsed > maxValue || forceTriggerShift) {
       onChange(padTime(clamp({ value: parsed, min, max }).toString()));
-      triggerShift && ((_c = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _c.focus());
-      triggerShift && ((_d = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _d.select());
+      triggerShift && ((_a = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _a.focus());
+      triggerShift && ((_b = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _b.select());
       return;
     }
     onChange(parsed.toString());

package/esm/components/TimeInputBase/create-time-handler/create-time-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-time-handler.js","sources":["../../../../src/components/TimeInputBase/create-time-handler/create-time-handler.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../pad-time/pad-time';\n\ninterface CreateTimeHandler {\n  onChange(value: string): void;\n  nextRef?: React.RefObject<HTMLInputElement>;\n  min: number;\n  max: number;\n  maxValue: number;\n}\n\nexport function createTimeHandler({ onChange, nextRef, min, max, maxValue }: CreateTimeHandler) {\n  return (value: string, triggerShift: boolean) => {\n    if (value === '00') {\n      onChange('00');\n      triggerShift && nextRef?.current?.focus();\n      triggerShift && nextRef?.current?.select();\n      return;\n    }\n\n    const parsed = parseInt(value, 10);\n\n    if (Number.isNaN(parsed)) {\n      return;\n    }\n\n    if (parsed > maxValue) {\n      onChange(padTime(clamp({ value: parsed, min, max }).toString()));\n      triggerShift && nextRef?.current?.focus();\n      triggerShift && nextRef?.current?.select();\n      return;\n    }\n\n    onChange(parsed.toString());\n  };\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;AAC7E,EAAE,OAAO,CAAC,KAAK,EAAE,YAAY,KAAK;AAClC,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACvB,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE;AACxB,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;AACrB,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;AACxG,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;AACzG,MAAM,OAAO;AACb,KAAK;AACL,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACvC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;AAC9B,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,MAAM,GAAG,QAAQ,EAAE;AAC3B,MAAM,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;AACvE,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;AACxG,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;AACzG,MAAM,OAAO;AACb,KAAK;AACL,IAAI,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;AAChC,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"create-time-handler.js","sources":["../../../../src/components/TimeInputBase/create-time-handler/create-time-handler.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../pad-time/pad-time';\n\ninterface CreateTimeHandler {\n  onChange(value: string): void;\n  nextRef?: React.RefObject<HTMLInputElement>;\n  min: number;\n  max: number;\n  maxValue: number;\n}\n\nexport function createTimeHandler({ onChange, nextRef, min, max, maxValue }: CreateTimeHandler) {\n  return (value: string, triggerShift: boolean, forceTriggerShift = false) => {\n    const parsed = parseInt(value, 10);\n\n    if (Number.isNaN(parsed)) {\n      return;\n    }\n\n    if (parsed > maxValue || forceTriggerShift) {\n      onChange(padTime(clamp({ value: parsed, min, max }).toString()));\n      triggerShift && nextRef?.current?.focus();\n      triggerShift && nextRef?.current?.select();\n      return;\n    }\n\n    onChange(parsed.toString());\n  };\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;AAC7E,EAAE,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE,iBAAiB,GAAG,KAAK,KAAK;AAC7D,IAAI,IAAI,EAAE,EAAE,EAAE,CAAC;AACf,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACvC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;AAC9B,MAAM,OAAO;AACb,KAAK;AACL,IAAI,IAAI,MAAM,GAAG,QAAQ,IAAI,iBAAiB,EAAE;AAChD,MAAM,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;AACvE,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;AACxG,MAAM,YAAY,KAAK,CAAC,EAAE,GAAG,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;AACzG,MAAM,OAAO;AACb,KAAK;AACL,IAAI,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;AAChC,GAAG,CAAC;AACJ;;;;"}

package/esm/components/TimeInputBase/get-date/get-date.js

@@ -8,7 +8,13 @@ function getDate(hours, minutes, seconds, format, amPm) {
   if (Number.isNaN(_hours)) {
     _hours = 0;
   }
-  return date.hour(format === "12" && amPm === "pm" ? _hours < 12 ? _hours - 12 : _hours : _hours).minute(Number.isNaN(_minutes) ? 0 : _minutes).second(Number.isNaN(_seconds) ? 0 : _seconds).toDate();
+  if (format === "12") {
+    _hours %= 12;
+    if (amPm === "pm") {
+      _hours += 12;
+    }
+  }
+  return date.hour(_hours).minute(Number.isNaN(_minutes) ? 0 : _minutes).second(Number.isNaN(_seconds) ? 0 : _seconds).toDate();
 }
 
 export { getDate };

package/esm/components/TimeInputBase/get-date/get-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-date.js","sources":["../../../../src/components/TimeInputBase/get-date/get-date.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\nexport function getDate(\n  hours: string,\n  minutes: string,\n  seconds: string,\n  format: '12' | '24',\n  amPm?: string\n) {\n  const date = dayjs();\n  let _hours = parseInt(hours, 10);\n  const _minutes = parseInt(minutes, 10);\n  const _seconds = parseInt(seconds, 10);\n\n  if (Number.isNaN(_hours)) {\n    _hours = 0;\n  }\n\n  return date\n    .hour(format === '12' && amPm === 'pm' ? (_hours < 12 ? _hours - 12 : _hours) : _hours)\n    .minute(Number.isNaN(_minutes) ? 0 : _minutes)\n    .second(Number.isNaN(_seconds) ? 0 : _seconds)\n    .toDate();\n}\n"],"names":[],"mappings":";;AACO,SAAS,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE;AAC/D,EAAE,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC;AACvB,EAAE,IAAI,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACnC,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACzC,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACzC,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;AAC5B,IAAI,MAAM,GAAG,CAAC,CAAC;AACf,GAAG;AACH,EAAE,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACxM;;;;"}
+{"version":3,"file":"get-date.js","sources":["../../../../src/components/TimeInputBase/get-date/get-date.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\nexport function getDate(\n  hours: string,\n  minutes: string,\n  seconds: string,\n  format: '12' | '24',\n  amPm?: string\n) {\n  const date = dayjs();\n  let _hours = parseInt(hours, 10);\n  const _minutes = parseInt(minutes, 10);\n  const _seconds = parseInt(seconds, 10);\n\n  if (Number.isNaN(_hours)) {\n    _hours = 0;\n  }\n\n  if (format === '12') {\n    _hours %= 12;\n    if (amPm === 'pm') {\n      _hours += 12;\n    }\n  }\n\n  return date\n    .hour(_hours)\n    .minute(Number.isNaN(_minutes) ? 0 : _minutes)\n    .second(Number.isNaN(_seconds) ? 0 : _seconds)\n    .toDate();\n}\n"],"names":[],"mappings":";;AACO,SAAS,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE;AAC/D,EAAE,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC;AACvB,EAAE,IAAI,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACnC,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACzC,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACzC,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;AAC5B,IAAI,MAAM,GAAG,CAAC,CAAC;AACf,GAAG;AACH,EAAE,IAAI,MAAM,KAAK,IAAI,EAAE;AACvB,IAAI,MAAM,IAAI,EAAE,CAAC;AACjB,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE;AACvB,MAAM,MAAM,IAAI,EAAE,CAAC;AACnB,KAAK;AACL,GAAG;AACH,EAAE,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AAChI;;;;"}

package/esm/components/TimeInputBase/get-time-values/get-time-value.js

@@ -1,13 +1,22 @@
 import { padTime } from '../pad-time/pad-time.js';
 
-function getTimeValues(value) {
+function getTimeValues(value, format) {
   if (!(value instanceof Date)) {
-    return { hours: "", minutes: "", seconds: "" };
+    return { hours: "", minutes: "", seconds: "", amPm: "" };
+  }
+  let _hours = value.getHours();
+  const isPm = _hours >= 12;
+  if (format === "12") {
+    _hours %= 12;
+    if (_hours === 0) {
+      _hours += 12;
+    }
   }
   return {
-    hours: padTime(value.getHours().toString()),
+    hours: padTime(_hours.toString()),
     minutes: padTime(value.getMinutes().toString()),
-    seconds: padTime(value.getSeconds().toString())
+    seconds: padTime(value.getSeconds().toString()),
+    amPm: isPm ? "pm" : "am"
   };
 }
 

package/esm/components/TimeInputBase/get-time-values/get-time-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-time-value.js","sources":["../../../../src/components/TimeInputBase/get-time-values/get-time-value.ts"],"sourcesContent":["import { padTime } from '../pad-time/pad-time';\n\nexport function getTimeValues(value: Date) {\n  if (!(value instanceof Date)) {\n    return { hours: '', minutes: '', seconds: '' };\n  }\n\n  return {\n    hours: padTime(value.getHours().toString()),\n    minutes: padTime(value.getMinutes().toString()),\n    seconds: padTime(value.getSeconds().toString()),\n  };\n}\n"],"names":[],"mappings":";;AACO,SAAS,aAAa,CAAC,KAAK,EAAE;AACrC,EAAE,IAAI,EAAE,KAAK,YAAY,IAAI,CAAC,EAAE;AAChC,IAAI,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;AACnD,GAAG;AACH,EAAE,OAAO;AACT,IAAI,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC;AAC/C,IAAI,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;AACnD,IAAI,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;AACnD,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"get-time-value.js","sources":["../../../../src/components/TimeInputBase/get-time-values/get-time-value.ts"],"sourcesContent":["import { padTime } from '../pad-time/pad-time';\n\nexport function getTimeValues(value: Date, format: '12' | '24') {\n  if (!(value instanceof Date)) {\n    return { hours: '', minutes: '', seconds: '', amPm: '' };\n  }\n\n  let _hours = value.getHours();\n\n  const isPm = _hours >= 12;\n  if (format === '12') {\n    _hours %= 12;\n    if (_hours === 0) {\n      _hours += 12;\n    }\n  }\n\n  return {\n    hours: padTime(_hours.toString()),\n    minutes: padTime(value.getMinutes().toString()),\n    seconds: padTime(value.getSeconds().toString()),\n    amPm: isPm ? 'pm' : 'am',\n  };\n}\n"],"names":[],"mappings":";;AACO,SAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE;AAC7C,EAAE,IAAI,EAAE,KAAK,YAAY,IAAI,CAAC,EAAE;AAChC,IAAI,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AAC7D,GAAG;AACH,EAAE,IAAI,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;AAChC,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,EAAE,CAAC;AAC5B,EAAE,IAAI,MAAM,KAAK,IAAI,EAAE;AACvB,IAAI,MAAM,IAAI,EAAE,CAAC;AACjB,IAAI,IAAI,MAAM,KAAK,CAAC,EAAE;AACtB,MAAM,MAAM,IAAI,EAAE,CAAC;AACnB,KAAK;AACL,GAAG;AACH,EAAE,OAAO;AACT,IAAI,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;AACrC,IAAI,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;AACnD,IAAI,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;AACnD,IAAI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI;AAC5B,GAAG,CAAC;AACJ;;;;"}

package/esm/components/TimeRangeInput/TimeRangeInput.js

@@ -1,18 +1,10 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { extractMargins, CloseButton, InputWrapper, Input } from '@mantine/core';
-import { useUuid, useMergedRef } from '@mantine/hooks';
-import { TimeField } from '../TimeInputBase/TimeField/TimeField.js';
-import { createTimeHandler } from '../TimeInputBase/create-time-handler/create-time-handler.js';
-import { getTimeValues } from '../TimeInputBase/get-time-values/get-time-value.js';
+import { useUuid, useDidUpdate, useMergedRef } from '@mantine/hooks';
 import useStyles from './TimeRangeInput.styles.js';
-import { padTime } from '../TimeInputBase/pad-time/pad-time.js';
-import { AmPmInput } from '../TimeInputBase/AmPmInput/AmPmInput.js';
-import { createAmPmHandler } from '../TimeInputBase/create-amPm-handler/create-amPm-handler.js';
-import { getDate } from '../TimeInputBase/get-date/get-date.js';
+import { TimeInput } from '../TimeInput/TimeInput.js';
 
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -28,7 +20,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -62,7 +53,7 @@ const TimeRangeInput = forwardRef((_a, ref) => {
     styles,
     id,
     value,
-    defaultValue,
+    defaultValue = [null, null],
     onChange,
     withSeconds = false,
     clearable = false,
@@ -111,106 +102,22 @@ const TimeRangeInput = forwardRef((_a, ref) => {
   const { classes, cx, theme } = useStyles({ size }, { classNames, styles, name: "TimeRangeInput" });
   const { margins, rest } = extractMargins(others);
   const uuid = useUuid(id);
-  const hoursRef = useRef([]);
-  const minutesRef = useRef([]);
-  const secondsRef = useRef([]);
-  const formatsRef = useRef([]);
-  const [fromTime, setFromTime] = useState(getTimeValues(value ? value[0] : defaultValue ? defaultValue[0] : void 0));
-  const [toTime, setToTime] = useState(getTimeValues(value ? value[1] : defaultValue ? defaultValue[1] : void 0));
-  const [fromAmPm, setFromAmPm] = useState("am");
-  const [toAmPm, setToAmPm] = useState("am");
-  const [selectedFieldIndex, setSelectedFieldIndex] = useState(0);
+  const fromTimeRef = useRef();
+  const toTimeRef = useRef();
   const [_value, setValue] = useState(value != null ? value : defaultValue);
-  useEffect(() => {
-    setValue([
-      getDate(fromTime.hours, fromTime.minutes, fromTime.seconds, format, fromAmPm),
-      getDate(toTime.hours, toTime.minutes, toTime.seconds, format, toAmPm)
-    ]);
-  }, [
-    fromTime.hours,
-    fromTime.minutes,
-    fromTime.seconds,
-    toTime.hours,
-    toTime.minutes,
-    toTime.seconds,
-    format,
-    fromAmPm,
-    toAmPm
-  ]);
-  useEffect(() => {
-    if (format === "12" && (_value[0] || _value[1])) {
-      setFromAmPm(parseInt(fromTime.hours, 10) >= 12 ? "pm" : "am");
-      setToAmPm(parseInt(toTime.hours, 10) >= 12 ? "pm" : "am");
-    }
-  }, [format]);
-  const setTime = (cb) => {
-    selectedFieldIndex === 0 ? setFromTime(cb) : setToTime(cb);
-  };
-  const nextMinuteRef = () => {
-    if (withSeconds) {
-      return secondsRef.current[selectedFieldIndex];
-    }
-    if (format === "12") {
-      return formatsRef.current[selectedFieldIndex];
-    }
-    if (format === "24" && selectedFieldIndex === 0) {
-      return hoursRef.current[1];
-    }
-    return void 0;
-  };
-  const handleHoursChange = createTimeHandler({
-    onChange: (val) => {
-      setTime((current) => __spreadProps(__spreadValues({}, current), { hours: padTime(val) }));
-    },
-    min: 0,
-    max: format === "12" ? 11 : 23,
-    maxValue: format === "12" ? 1 : 2,
-    nextRef: {
-      current: minutesRef.current[selectedFieldIndex]
-    }
-  });
-  const handleMinutesChange = createTimeHandler({
-    onChange: (val) => {
-      setTime((current) => __spreadProps(__spreadValues({}, current), { minutes: padTime(val) }));
-    },
-    min: 0,
-    max: 59,
-    maxValue: 5,
-    nextRef: {
-      current: nextMinuteRef()
-    }
-  });
-  const handleSecondsChange = createTimeHandler({
-    onChange: (val) => {
-      setTime((current) => __spreadProps(__spreadValues({}, current), { seconds: padTime(val) }));
-    },
-    min: 0,
-    max: 59,
-    maxValue: 5,
-    nextRef: {
-      current: format === "12" ? formatsRef.current[selectedFieldIndex] : format === "24" && selectedFieldIndex === 0 ? hoursRef.current[1] : void 0
-    }
-  });
-  const handleAmPmChange = createAmPmHandler({
-    onChange: (val) => {
-      if (selectedFieldIndex === 0) {
-        setFromAmPm(val);
-      } else {
-        setToAmPm(val);
-      }
-    },
-    nextRef: {
-      current: selectedFieldIndex === 0 ? hoursRef.current[1] : void 0
+  useDidUpdate(() => {
+    typeof onChange === "function" && onChange(_value);
+  }, [_value]);
+  useDidUpdate(() => {
+    var _a2, _b2, _c, _d;
+    if (((_a2 = value[0]) == null ? void 0 : _a2.getTime()) !== ((_b2 = _value[0]) == null ? void 0 : _b2.getTime()) || ((_c = value[1]) == null ? void 0 : _c.getTime()) !== ((_d = _value[1]) == null ? void 0 : _d.getTime())) {
+      setValue(value);
     }
-  });
+  }, [value]);
   const handleClear = () => {
     var _a2;
-    setFromTime({ hours: "", minutes: "", seconds: "" });
-    setToTime({ hours: "", minutes: "", seconds: "" });
-    setSelectedFieldIndex(0);
-    setFromAmPm("");
-    setToAmPm("");
-    (_a2 = hoursRef.current[0]) == null ? void 0 : _a2.focus();
+    setValue([null, null]);
+    (_a2 = fromTimeRef.current) == null ? void 0 : _a2.focus();
   };
   const rightSection = clearable && _value.filter((item) => Boolean(item)).length > 0 ? /* @__PURE__ */ React.createElement(CloseButton, {
     variant: "transparent",
@@ -218,6 +125,18 @@ const TimeRangeInput = forwardRef((_a, ref) => {
     onClick: handleClear,
     size
   }) : null;
+  const forwardProps = {
+    amPmLabel,
+    amPmPlaceholder,
+    disabled,
+    format,
+    hoursLabel,
+    minutesLabel,
+    secondsLabel,
+    size,
+    timePlaceholder,
+    withSeconds
+  };
   return /* @__PURE__ */ React.createElement(InputWrapper, __spreadValues(__spreadValues({
     required,
     label,
@@ -237,8 +156,8 @@ const TimeRangeInput = forwardRef((_a, ref) => {
     required,
     invalid: !!error,
     onClick: () => {
-      setSelectedFieldIndex(0);
-      hoursRef.current[selectedFieldIndex].focus();
+      var _a2;
+      (_a2 = fromTimeRef.current) == null ? void 0 : _a2.focus();
     },
     size,
     className: cx({ [classes.disabled]: disabled }),
@@ -249,130 +168,25 @@ const TimeRangeInput = forwardRef((_a, ref) => {
     rightSectionWidth: theme.fn.size({ size, sizes: RIGHT_SECTION_WIDTH })
   }, rest), /* @__PURE__ */ React.createElement("div", {
     className: classes.inputWrapper
-  }, /* @__PURE__ */ React.createElement(TimeField, {
-    ref: useMergedRef((node) => {
-      hoursRef.current[0] = node;
-    }, ref),
-    value: fromTime.hours,
-    onChange: handleHoursChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { hours: val })),
-    id: uuid,
-    className: classes.timeField,
-    withSeparator: true,
-    size,
-    max: format === "12" ? 11 : 23,
-    placeholder: timePlaceholder,
-    "aria-label": `from ${hoursLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(0),
-    name
-  }), /* @__PURE__ */ React.createElement(TimeField, {
-    ref: (node) => {
-      minutesRef.current[0] = node;
-    },
-    value: fromTime.minutes,
-    onChange: handleMinutesChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { minutes: val })),
-    className: classes.timeField,
-    withSeparator: withSeconds,
-    size,
-    max: 59,
-    placeholder: timePlaceholder,
-    "aria-label": `from ${minutesLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(0)
-  }), withSeconds && /* @__PURE__ */ React.createElement(TimeField, {
-    ref: (node) => {
-      secondsRef.current[0] = node;
-    },
-    value: fromTime.seconds,
-    onChange: handleSecondsChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { seconds: val })),
-    className: classes.timeField,
-    size,
-    max: 59,
-    placeholder: timePlaceholder,
-    "aria-label": `from ${secondsLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(0)
-  }), format === "12" && /* @__PURE__ */ React.createElement(AmPmInput, {
-    ref: (node) => {
-      formatsRef.current[0] = node;
-    },
-    value: fromAmPm,
-    onChange: handleAmPmChange,
-    setValue: (val) => {
-      setFromAmPm(val);
-    },
-    placeholder: amPmPlaceholder,
-    onFocus: () => setSelectedFieldIndex(0),
-    "aria-label": `from ${amPmLabel}`,
-    disabled
-  }), /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React.createElement(TimeInput, __spreadValues({
+    ref: useMergedRef(fromTimeRef, ref),
+    variant: "unstyled",
+    value: _value[0],
+    onChange: (date) => setValue([date, _value[1]]),
+    name,
+    nextRef: toTimeRef,
+    id: uuid
+  }, forwardProps)), /* @__PURE__ */ React.createElement("span", {
     className: classes.separator,
     style: {
-      color: (toTime == null ? void 0 : toTime.hours) ? "inherit" : theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[7]
+      color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[7]
     }
-  }, labelSeparator), /* @__PURE__ */ React.createElement("div", {
-    className: classes.inputWrapper
-  }, /* @__PURE__ */ React.createElement(TimeField, {
-    ref: (node) => {
-      hoursRef.current[1] = node;
-    },
-    value: format === "12" && parseInt(toTime.hours, 10) >= 12 ? padTime((parseInt(toTime.hours, 10) - 12).toString()) : toTime.hours,
-    onChange: handleHoursChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { hours: val })),
-    className: classes.timeField,
-    withSeparator: true,
-    size,
-    max: format === "12" ? 11 : 23,
-    placeholder: timePlaceholder,
-    "aria-label": `to ${hoursLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(1)
-  }), /* @__PURE__ */ React.createElement(TimeField, {
-    ref: (node) => {
-      minutesRef.current[1] = node;
-    },
-    value: toTime.minutes,
-    onChange: handleMinutesChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { minutes: val })),
-    className: classes.timeField,
-    withSeparator: withSeconds,
-    size,
-    max: 59,
-    placeholder: timePlaceholder,
-    "aria-label": `to ${minutesLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(1)
-  }), withSeconds && /* @__PURE__ */ React.createElement(TimeField, {
-    ref: (node) => {
-      secondsRef.current[1] = node;
-    },
-    value: toTime.seconds,
-    onChange: handleSecondsChange,
-    setValue: (val) => setTime((current) => __spreadProps(__spreadValues({}, current), { seconds: val })),
-    className: classes.timeField,
-    size,
-    max: 59,
-    placeholder: timePlaceholder,
-    "aria-label": `to ${secondsLabel}`,
-    disabled,
-    onFocus: () => setSelectedFieldIndex(1)
-  }), format === "12" && /* @__PURE__ */ React.createElement(AmPmInput, {
-    ref: (node) => {
-      formatsRef.current[1] = node;
-    },
-    value: toAmPm,
-    onChange: handleAmPmChange,
-    setValue: (val) => {
-      setToAmPm(val);
-    },
-    placeholder: amPmPlaceholder,
-    onFocus: () => setSelectedFieldIndex(1),
-    "aria-label": `to ${amPmLabel}`,
-    disabled
-  })))));
+  }, labelSeparator), /* @__PURE__ */ React.createElement(TimeInput, __spreadValues({
+    ref: toTimeRef,
+    variant: "unstyled",
+    value: _value[1],
+    onChange: (date) => setValue([_value[0], date])
+  }, forwardProps)))));
 });
 TimeRangeInput.displayName = "@mantine/dates/TimeRangeInput";