@mantine/dates 8.0.1 → 8.1.0

package/esm/components/TimePicker/TimePicker.mjs

@@ -19,7 +19,6 @@ const defaultProps = {
   secondsStep: 1,
   format: "24h",
   amPmLabels: { am: "AM", pm: "PM" },
-  withDropdown: false,
   pasteSplit: getParsedTime,
   maxDropdownContentHeight: 200
 };
@@ -134,250 +133,244 @@ const TimePicker = factory((_props, ref) => {
       onBlur?.(event);
     }
   };
-  return /* @__PURE__ */ jsx(
-    TimePickerProvider,
+  return /* @__PURE__ */ jsx(TimePickerProvider, { value: { getStyles, scrollAreaProps, maxDropdownContentHeight }, children: /* @__PURE__ */ jsxs(
+    Popover,
     {
-      value: { getStyles, scrollAreaProps, maxDropdownContentHeight },
-      children: /* @__PURE__ */ jsxs(
-        Popover,
-        {
-          opened: withDropdown && !readOnly && dropdownOpened,
-          transitionProps: { duration: 0 },
-          position: "bottom-start",
-          withRoles: false,
-          ...popoverProps,
-          children: [
-            /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
-              InputBase,
+      opened: withDropdown && !readOnly && dropdownOpened,
+      transitionProps: { duration: 0 },
+      position: "bottom-start",
+      withRoles: false,
+      ...popoverProps,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+          InputBase,
+          {
+            component: "div",
+            size,
+            disabled,
+            ref,
+            onClick: (event) => {
+              onClick?.(event);
+              controller.focus("hours");
+            },
+            onMouseDown: (event) => {
+              event.preventDefault();
+              onMouseDown?.(event);
+            },
+            onFocusCapture: (event) => {
+              setDropdownOpened(true);
+              onFocusCapture?.(event);
+            },
+            onBlurCapture: (event) => {
+              setDropdownOpened(false);
+              onBlurCapture?.(event);
+            },
+            rightSection: rightSection || controller.isClearable && /* @__PURE__ */ jsx(
+              CloseButton,
               {
-                component: "div",
+                ...clearButtonProps,
                 size,
-                disabled,
-                ref,
                 onClick: (event) => {
-                  onClick?.(event);
-                  controller.focus("hours");
+                  controller.clear();
+                  clearButtonProps?.onClick?.(event);
                 },
                 onMouseDown: (event) => {
                   event.preventDefault();
-                  onMouseDown?.(event);
-                },
-                onFocusCapture: (event) => {
-                  setDropdownOpened(true);
-                  onFocusCapture?.(event);
-                },
-                onBlurCapture: (event) => {
-                  setDropdownOpened(false);
-                  onBlurCapture?.(event);
-                },
-                rightSection: rightSection || controller.isClearable && /* @__PURE__ */ jsx(
-                  CloseButton,
+                  clearButtonProps?.onMouseDown?.(event);
+                }
+              }
+            ),
+            labelProps: { htmlFor: hoursInputId, ...labelProps },
+            style,
+            className,
+            classNames: resolvedClassNames,
+            styles: resolvedStyles,
+            __staticSelector: "TimePicker",
+            ...others,
+            children: [
+              /* @__PURE__ */ jsx("div", { ...getStyles("fieldsRoot"), dir: "ltr", children: /* @__PURE__ */ jsxs("div", { ...getStyles("fieldsGroup"), onBlur: handleBlur, children: [
+                /* @__PURE__ */ jsx(
+                  SpinInput,
                   {
-                    ...clearButtonProps,
-                    size,
-                    onClick: (event) => {
-                      controller.clear();
-                      clearButtonProps?.onClick?.(event);
-                    },
-                    onMouseDown: (event) => {
-                      event.preventDefault();
-                      clearButtonProps?.onMouseDown?.(event);
+                    id: hoursInputId,
+                    ...hoursInputProps,
+                    ...getStyles("field", {
+                      className: hoursInputProps?.className,
+                      style: hoursInputProps?.style
+                    }),
+                    value: controller.values.hours,
+                    onChange: controller.setHours,
+                    onNextInput: () => controller.focus("minutes"),
+                    min: format === "12h" ? 1 : 0,
+                    max: format === "12h" ? 12 : 23,
+                    focusable: true,
+                    step: hoursStep,
+                    ref: _hoursRef,
+                    "aria-label": hoursInputLabel,
+                    readOnly,
+                    disabled,
+                    onPaste: controller.onPaste,
+                    onFocus: (event) => {
+                      handleFocus(event);
+                      hoursInputProps?.onFocus?.(event);
                     }
                   }
                 ),
-                labelProps: { htmlFor: hoursInputId, ...labelProps },
-                style,
-                className,
-                classNames: resolvedClassNames,
-                styles: resolvedStyles,
-                __staticSelector: "TimePicker",
-                ...others,
-                children: [
-                  /* @__PURE__ */ jsx("div", { ...getStyles("fieldsRoot"), dir: "ltr", children: /* @__PURE__ */ jsxs("div", { ...getStyles("fieldsGroup"), onBlur: handleBlur, children: [
-                    /* @__PURE__ */ jsx(
-                      SpinInput,
-                      {
-                        id: hoursInputId,
-                        ...hoursInputProps,
-                        ...getStyles("field", {
-                          className: hoursInputProps?.className,
-                          style: hoursInputProps?.style
-                        }),
-                        value: controller.values.hours,
-                        onChange: controller.setHours,
-                        onNextInput: () => controller.focus("minutes"),
-                        min: format === "12h" ? 1 : 0,
-                        max: format === "12h" ? 12 : 23,
-                        focusable: true,
-                        step: hoursStep,
-                        ref: _hoursRef,
-                        "aria-label": hoursInputLabel,
-                        readOnly,
-                        disabled,
-                        onPaste: controller.onPaste,
-                        onFocus: (event) => {
-                          handleFocus(event);
-                          hoursInputProps?.onFocus?.(event);
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { children: ":" }),
-                    /* @__PURE__ */ jsx(
-                      SpinInput,
-                      {
-                        ...minutesInputProps,
-                        ...getStyles("field", {
-                          className: minutesInputProps?.className,
-                          style: minutesInputProps?.style
-                        }),
-                        value: controller.values.minutes,
-                        onChange: controller.setMinutes,
-                        min: 0,
-                        max: 59,
-                        focusable: true,
-                        step: minutesStep,
-                        ref: _minutesRef,
-                        onPreviousInput: () => controller.focus("hours"),
-                        onNextInput: () => withSeconds ? controller.focus("seconds") : controller.focus("amPm"),
-                        "aria-label": minutesInputLabel,
-                        tabIndex: -1,
-                        readOnly,
-                        disabled,
-                        onPaste: controller.onPaste,
-                        onFocus: (event) => {
-                          handleFocus(event);
-                          minutesInputProps?.onFocus?.(event);
-                        }
-                      }
-                    ),
-                    withSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { children: ":" }),
-                      /* @__PURE__ */ jsx(
-                        SpinInput,
-                        {
-                          ...secondsInputProps,
-                          ...getStyles("field", {
-                            className: secondsInputProps?.className,
-                            style: secondsInputProps?.style
-                          }),
-                          value: controller.values.seconds,
-                          onChange: controller.setSeconds,
-                          min: 0,
-                          max: 59,
-                          focusable: true,
-                          step: secondsStep,
-                          ref: _secondsRef,
-                          onPreviousInput: () => controller.focus("minutes"),
-                          onNextInput: () => controller.focus("amPm"),
-                          "aria-label": secondsInputLabel,
-                          tabIndex: -1,
-                          readOnly,
-                          disabled,
-                          onPaste: controller.onPaste,
-                          onFocus: (event) => {
-                            handleFocus(event);
-                            secondsInputProps?.onFocus?.(event);
-                          }
-                        }
-                      )
-                    ] }),
-                    format === "12h" && /* @__PURE__ */ jsx(
-                      AmPmInput,
-                      {
-                        ...amPmSelectProps,
-                        inputType: withDropdown ? "input" : "select",
-                        labels: amPmLabels,
-                        value: controller.values.amPm,
-                        onChange: controller.setAmPm,
-                        ref: _amPmRef,
-                        "aria-label": amPmInputLabel,
-                        onPreviousInput: () => withSeconds ? controller.focus("seconds") : controller.focus("minutes"),
-                        readOnly,
-                        disabled,
-                        tabIndex: -1,
-                        onPaste: controller.onPaste,
-                        onFocus: (event) => {
-                          handleFocus(event);
-                          amPmSelectProps?.onFocus?.(event);
-                        }
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "hidden",
-                      name,
-                      form,
-                      value: controller.hiddenInputValue,
-                      ...hiddenInputProps
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              Popover.Dropdown,
-              {
-                ...getStyles("dropdown"),
-                onMouseDown: (event) => event.preventDefault(),
-                children: presets ? /* @__PURE__ */ jsx(
-                  TimePresets,
+                /* @__PURE__ */ jsx("span", { children: ":" }),
+                /* @__PURE__ */ jsx(
+                  SpinInput,
                   {
-                    value: controller.hiddenInputValue,
-                    onChange: controller.setTimeString,
-                    format,
-                    presets,
-                    amPmLabels,
-                    withSeconds: withSeconds || false
-                  }
-                ) : /* @__PURE__ */ jsxs("div", { ...getStyles("controlsListGroup"), children: [
-                  /* @__PURE__ */ jsx(
-                    TimeControlsList,
-                    {
-                      min: format === "12h" ? 1 : 0,
-                      max: format === "12h" ? 12 : 23,
-                      step: hoursStep,
-                      value: controller.values.hours,
-                      onSelect: controller.setHours
+                    ...minutesInputProps,
+                    ...getStyles("field", {
+                      className: minutesInputProps?.className,
+                      style: minutesInputProps?.style
+                    }),
+                    value: controller.values.minutes,
+                    onChange: controller.setMinutes,
+                    min: 0,
+                    max: 59,
+                    focusable: true,
+                    step: minutesStep,
+                    ref: _minutesRef,
+                    onPreviousInput: () => controller.focus("hours"),
+                    onNextInput: () => withSeconds ? controller.focus("seconds") : controller.focus("amPm"),
+                    "aria-label": minutesInputLabel,
+                    tabIndex: -1,
+                    readOnly,
+                    disabled,
+                    onPaste: controller.onPaste,
+                    onFocus: (event) => {
+                      handleFocus(event);
+                      minutesInputProps?.onFocus?.(event);
                     }
-                  ),
+                  }
+                ),
+                withSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { children: ":" }),
                   /* @__PURE__ */ jsx(
-                    TimeControlsList,
-                    {
-                      min: 0,
-                      max: 59,
-                      step: minutesStep,
-                      value: controller.values.minutes,
-                      onSelect: controller.setMinutes
-                    }
-                  ),
-                  withSeconds && /* @__PURE__ */ jsx(
-                    TimeControlsList,
+                    SpinInput,
                     {
+                      ...secondsInputProps,
+                      ...getStyles("field", {
+                        className: secondsInputProps?.className,
+                        style: secondsInputProps?.style
+                      }),
+                      value: controller.values.seconds,
+                      onChange: controller.setSeconds,
                       min: 0,
                       max: 59,
+                      focusable: true,
                       step: secondsStep,
-                      value: controller.values.seconds,
-                      onSelect: controller.setSeconds
-                    }
-                  ),
-                  format === "12h" && /* @__PURE__ */ jsx(
-                    AmPmControlsList,
-                    {
-                      labels: amPmLabels,
-                      value: controller.values.amPm,
-                      onSelect: controller.setAmPm
+                      ref: _secondsRef,
+                      onPreviousInput: () => controller.focus("minutes"),
+                      onNextInput: () => controller.focus("amPm"),
+                      "aria-label": secondsInputLabel,
+                      tabIndex: -1,
+                      readOnly,
+                      disabled,
+                      onPaste: controller.onPaste,
+                      onFocus: (event) => {
+                        handleFocus(event);
+                        secondsInputProps?.onFocus?.(event);
+                      }
                     }
                   )
-                ] })
+                ] }),
+                format === "12h" && /* @__PURE__ */ jsx(
+                  AmPmInput,
+                  {
+                    ...amPmSelectProps,
+                    inputType: withDropdown ? "input" : "select",
+                    labels: amPmLabels,
+                    value: controller.values.amPm,
+                    onChange: controller.setAmPm,
+                    ref: _amPmRef,
+                    "aria-label": amPmInputLabel,
+                    onPreviousInput: () => withSeconds ? controller.focus("seconds") : controller.focus("minutes"),
+                    readOnly,
+                    disabled,
+                    tabIndex: -1,
+                    onPaste: controller.onPaste,
+                    onFocus: (event) => {
+                      handleFocus(event);
+                      amPmSelectProps?.onFocus?.(event);
+                    }
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "hidden",
+                  name,
+                  form,
+                  value: controller.hiddenInputValue,
+                  ...hiddenInputProps
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Popover.Dropdown,
+          {
+            ...getStyles("dropdown"),
+            onMouseDown: (event) => event.preventDefault(),
+            children: presets ? /* @__PURE__ */ jsx(
+              TimePresets,
+              {
+                value: controller.hiddenInputValue,
+                onChange: controller.setTimeString,
+                format,
+                presets,
+                amPmLabels,
+                withSeconds: withSeconds || false
               }
-            )
-          ]
-        }
-      )
+            ) : /* @__PURE__ */ jsxs("div", { ...getStyles("controlsListGroup"), children: [
+              /* @__PURE__ */ jsx(
+                TimeControlsList,
+                {
+                  min: format === "12h" ? 1 : 0,
+                  max: format === "12h" ? 12 : 23,
+                  step: hoursStep,
+                  value: controller.values.hours,
+                  onSelect: controller.setHours
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TimeControlsList,
+                {
+                  min: 0,
+                  max: 59,
+                  step: minutesStep,
+                  value: controller.values.minutes,
+                  onSelect: controller.setMinutes
+                }
+              ),
+              withSeconds && /* @__PURE__ */ jsx(
+                TimeControlsList,
+                {
+                  min: 0,
+                  max: 59,
+                  step: secondsStep,
+                  value: controller.values.seconds,
+                  onSelect: controller.setSeconds
+                }
+              ),
+              format === "12h" && /* @__PURE__ */ jsx(
+                AmPmControlsList,
+                {
+                  labels: amPmLabels,
+                  value: controller.values.amPm,
+                  onSelect: controller.setAmPm
+                }
+              )
+            ] })
+          }
+        )
+      ]
     }
-  );
+  ) });
 });
 TimePicker.displayName = "@mantine/dates/TimePicker";
 TimePicker.classes = classes;