@smwb/ui-react 2.4.0 → 2.5.0

package/dist/components/inputs/dateTimePicker/dateTimePicker.js

@@ -1,14 +1,14 @@
-import { jsx as o, jsxs as C, Fragment as de } from "react/jsx-runtime";
-import ue, { useMemo as k, useState as v, useRef as E, useCallback as r } from "react";
+import { jsx as o, jsxs as v, Fragment as de } from "react/jsx-runtime";
+import ue, { useMemo as y, useState as C, useRef as E, useCallback as r } from "react";
 import { useFloating as fe, autoUpdate as pe } from "@floating-ui/react";
 import he from "react-transition-group/Transition";
-import { resolvePlacement as ge, buildFloatingMiddleware as ke } from "../../../utils/floating.js";
+import { resolvePlacement as ge, buildFloatingMiddleware as ye } from "../../../utils/floating.js";
 import { useSafeLayoutEffect as we } from "../../../hooks/useSafeLayoutEffect.js";
 import { useForkRef as Y } from "../../../hooks/useForkRef.js";
-import { DataPickerHeader as ye } from "../datePicker/dataPickerHeader.js";
+import { DataPickerHeader as ke } from "../datePicker/dataPickerHeader.js";
 import { DataPickerDays as be } from "../datePicker/dataPickerDays.js";
 import { DatePickerList as x } from "../datePicker/datePickerList.js";
-import { isValidDate as F, setMonth as De, setYear as Ce, getMonths as ve, getYears as Fe } from "../datePicker/utils.js";
+import { isValidDate as F, setMonth as De, setYear as ve, getMonths as Ce, getYears as Fe } from "../datePicker/utils.js";
 import { OpenView as n } from "../datePicker/datePicker.js";
 import { DateTimePickerInput as Te } from "./dateTimePickerInput.js";
 import { TimePickerColumns as _e } from "../timePicker/timePickerColumns.js";
@@ -24,8 +24,8 @@ const Se = (_) => ({
   exiting: { opacity: 0 }
 }, We = ue.forwardRef(function(w, A) {
   const {
-    value: y,
-    onChange: m,
+    value: k,
+    onChange: c,
     showDaysOutsideMonth: H,
     disablePast: I,
     disableFuture: N,
@@ -43,13 +43,13 @@ const Se = (_) => ({
     calendarIcon: G,
     onBlur: J,
     ...K
-  } = w, t = k(() => y === void 0 ? void 0 : new Date(y), [y]), [a, d] = v(
+  } = w, t = y(() => k === void 0 ? void 0 : new Date(k), [k]), [a, d] = C(
     () => F(t) || T(t) ? t : /* @__PURE__ */ new Date()
-  ), [c, f] = v(n.days), [P, R] = v(!1), V = E(null), D = E(null), O = ge(j), { refs: S, floatingStyles: Q } = fe({
+  ), [m, f] = C(n.days), [P, R] = C(!1), V = E(null), D = E(null), O = ge(j), { refs: S, floatingStyles: Q } = fe({
     open: P,
     placement: O.placement,
     whileElementsMounted: pe,
-    middleware: ke(O)
+    middleware: ye(O)
   }), W = Y(V, S.setReference, A), X = Y(D, S.setFloating);
   we(() => {
     s || d(F(t) || T(t) ? t : /* @__PURE__ */ new Date());
@@ -57,24 +57,24 @@ const Se = (_) => ({
   const Z = r((e) => {
     d(e);
   }, []), ee = r(() => {
-    f(c === n.months ? n.days : n.months);
-  }, [c]), te = r(() => {
-    f(c === n.years ? n.days : n.years);
-  }, [c]), ae = r(
+    f(m === n.months ? n.days : n.months);
+  }, [m]), te = r(() => {
+    f(m === n.years ? n.days : n.years);
+  }, [m]), ae = r(
     (e) => {
       d(De(a, e)), f(n.days);
     },
     [a]
   ), ne = r(
     (e) => {
-      d(Ce(a, e)), f(n.days);
+      d(ve(a, e)), f(n.days);
     },
     [a]
   ), p = r(
     (e) => {
-      d(e), m == null || m(void 0, e, w);
+      d(e), c == null || c(void 0, e, w);
     },
-    [m, w]
+    [c, w]
   ), oe = r(
     (e, i) => {
       if (!i)
@@ -95,9 +95,9 @@ const Se = (_) => ({
     var g, L;
     const i = e.target;
     (g = D.current) != null && g.contains(i) || (L = V.current) != null && L.contains(i) || R(!1);
-  }, []), ce = k(() => b || (l != null && l.includes("HH:mm:ss") ? "HH:mm:ss" : Re), [l, b]), me = k(() => ve(u), [u]), le = k(() => Fe((/* @__PURE__ */ new Date()).getFullYear(), 100), []);
+  }, []), me = y(() => b || (l != null && l.includes("HH:mm:ss") ? "HH:mm:ss" : Re), [l, b]), ce = y(() => Ce(u), [u]), le = y(() => Fe((/* @__PURE__ */ new Date()).getFullYear(), 100), []);
   let h = null;
-  switch (c) {
+  switch (m) {
     case n.days:
       h = /* @__PURE__ */ o(
         be,
@@ -117,19 +117,19 @@ const Se = (_) => ({
       );
       break;
     case n.months:
-      h = /* @__PURE__ */ o(x, { value: a.getMonth(), items: me, onChange: ae });
+      h = /* @__PURE__ */ o(x, { value: a.getMonth(), items: ce, onChange: ae });
       break;
     case n.years:
       h = /* @__PURE__ */ o(x, { value: a.getFullYear(), items: le, onChange: ne });
       break;
   }
-  return /* @__PURE__ */ C(de, { children: [
+  return /* @__PURE__ */ v(de, { children: [
     /* @__PURE__ */ o(
       Te,
       {
         ref: W,
         value: t,
-        onChange: m,
+        onChange: c,
         onBlur: J,
         onToggle: ie,
         disabled: s,
@@ -159,24 +159,25 @@ const Se = (_) => ({
                 ...Le[e]
               },
               "data-testid": "date-time-picker",
+              "data-smwb-overlay-layer": "",
               role: "dialog",
               "aria-modal": "false",
               "aria-label": U,
-              children: /* @__PURE__ */ C("div", { className: "smwb-date-picker__inner smwb-date-time-picker__inner", children: [
+              children: /* @__PURE__ */ v("div", { className: "smwb-date-picker__inner smwb-date-time-picker__inner", children: [
                 /* @__PURE__ */ o(
-                  ye,
+                  ke,
                   {
                     viewValue: a,
                     locale: u,
-                    openView: c,
+                    openView: m,
                     onChange: Z,
                     onMonthLabelClick: ee,
                     onYearLabelClick: te
                   }
                 ),
-                /* @__PURE__ */ C("div", { className: "smwb-date-time-picker__content", children: [
+                /* @__PURE__ */ v("div", { className: "smwb-date-time-picker__content", children: [
                   /* @__PURE__ */ o("div", { className: "smwb-date-picker__body smwb-date-time-picker__body", children: h }),
-                  /* @__PURE__ */ o(_e, { value: a, format: ce, onChange: re })
+                  /* @__PURE__ */ o(_e, { value: a, format: me, onChange: re })
                 ] })
               ] })
             }

package/dist/components/inputs/dateTimePicker/dateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { getMonths, setMonth, getYears, setYear, isValidDate } from \"../datePicker/utils\";\nimport { OpenView } from \"../datePicker/datePicker\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface DateTimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  showDaysOutsideMonth?: boolean;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  isDateDisabled?: (day: Date) => boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  locale?: string;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string;\n  placement?: Placement;\n  disableCalendar?: boolean;\n  label?: string;\n  calendarAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  calendarIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n}\n\nexport const DateTimePicker = React.forwardRef(function DateTimePicker(props: DateTimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    showDaysOutsideMonth,\n    disablePast,\n    disableFuture,\n    weekStartsOn = 1,\n    placement = \"bottom-start\",\n    disabled,\n    disableCalendar,\n    calendarAriaLabel = \"Choose date and time\",\n    minDate,\n    maxDate,\n    isDateDisabled,\n    locale,\n    format,\n    timeFormat,\n    calendarIcon,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() =>\n    isValidDate(value) || isValidTimeDate(value) ? value : new Date()\n  );\n  const [openView, setOpenView] = useState<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const popupForkRef = useForkRef(popupRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidDate(value) || isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onViewValueChange = useCallback((next: Date) => {\n    setViewValue(next);\n  }, []);\n\n  const onMonthLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.months ? OpenView.days : OpenView.months);\n  }, [openView]);\n\n  const onYearLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.years ? OpenView.days : OpenView.years);\n  }, [openView]);\n\n  const onMonthChange = useCallback(\n    (month: number) => {\n      setViewValue(setMonth(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onYearChange = useCallback(\n    (year: number) => {\n      setViewValue(setYear(viewValue, year));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const emitChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onDateChange = useCallback(\n    (_event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => {\n      if (!date) {\n        return;\n      }\n\n      const timeSource = isValidTimeDate(value) ? value : viewValue;\n      emitChange(mergeDate(date, timeSource));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onTimeChange = useCallback(\n    (timeDate: Date) => {\n      const dateSource = isValidDate(value) ? value : viewValue;\n      emitChange(mergeTime(dateSource, timeDate));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (popupRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const resolvedTimeFormat = useMemo(() => {\n    if (timeFormat) {\n      return timeFormat;\n    }\n\n    if (format?.includes(\"HH:mm:ss\")) {\n      return \"HH:mm:ss\";\n    }\n\n    return DEFAULT_TIME_FORMAT;\n  }, [format, timeFormat]);\n\n  const months = useMemo(() => getMonths(locale), [locale]);\n  const years = useMemo(() => getYears(new Date().getFullYear(), 100), []);\n\n  let view: React.ReactNode = null;\n\n  switch (openView) {\n    case OpenView.days:\n      view = (\n        <DataPickerDays\n          viewValue={viewValue}\n          value={value}\n          showDaysOutsideMonth={showDaysOutsideMonth}\n          onChange={onDateChange}\n          disablePast={disablePast}\n          disableFuture={disableFuture}\n          weekStartsOn={weekStartsOn}\n          minDate={minDate}\n          maxDate={maxDate}\n          isDateDisabled={isDateDisabled}\n          locale={locale}\n        />\n      );\n      break;\n    case OpenView.months:\n      view = <DatePickerList value={viewValue.getMonth()} items={months} onChange={onMonthChange} />;\n      break;\n    case OpenView.years:\n      view = <DatePickerList value={viewValue.getFullYear()} items={years} onChange={onYearChange} />;\n      break;\n  }\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableCalendar={disableCalendar}\n        format={format}\n        calendarIcon={calendarIcon}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={popupRef}\n          in={isOpen && !disabled && !disableCalendar}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={popupForkRef}\n                className=\"smwb-date-picker smwb-date-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"date-time-picker\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={calendarAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n                  <DataPickerHeader\n                    viewValue={viewValue}\n                    locale={locale}\n                    openView={openView}\n                    onChange={onViewValueChange}\n                    onMonthLabelClick={onMonthLabelClick}\n                    onYearLabelClick={onYearLabelClick}\n                  />\n                  <div className=\"smwb-date-time-picker__content\">\n                    <div className=\"smwb-date-picker__body smwb-date-time-picker__body\">{view}</div>\n                    <TimePickerColumns value={viewValue} format={resolvedTimeFormat} onChange={onTimeChange} />\n                  </div>\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default DateTimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","DateTimePicker","React","props","ref","valueProp","onChangeProp","showDaysOutsideMonth","disablePast","disableFuture","weekStartsOn","placement","disabled","disableCalendar","calendarAriaLabel","minDate","maxDate","isDateDisabled","locale","format","timeFormat","calendarIcon","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidDate","isValidTimeDate","openView","setOpenView","OpenView","isOpen","setIsOpen","anchorRef","useRef","popupRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","popupForkRef","useSafeLayoutEffect","onViewValueChange","useCallback","next","onMonthLabelClick","onYearLabelClick","onMonthChange","month","setMonth","onYearChange","year","setYear","emitChange","onDateChange","_event","date","timeSource","mergeDate","onTimeChange","timeDate","dateSource","mergeTime","onToggle","prevState","onClickAway","event","target","_a","_b","resolvedTimeFormat","DEFAULT_TIME_FORMAT","months","getMonths","years","getYears","view","jsx","DataPickerDays","DatePickerList","jsxs","Fragment","DateTimePickerInput","createPortal","Transition","state","ClickAwayListener","DataPickerHeader","TimePickerColumns"],"mappings":"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"}
+{"version":3,"file":"dateTimePicker.js","sources":["../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { getMonths, setMonth, getYears, setYear, isValidDate } from \"../datePicker/utils\";\nimport { OpenView } from \"../datePicker/datePicker\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface DateTimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  showDaysOutsideMonth?: boolean;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  isDateDisabled?: (day: Date) => boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  locale?: string;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string;\n  placement?: Placement;\n  disableCalendar?: boolean;\n  label?: string;\n  calendarAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  calendarIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: DateTimePickerProps) => void;\n}\n\nexport const DateTimePicker = React.forwardRef(function DateTimePicker(props: DateTimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    showDaysOutsideMonth,\n    disablePast,\n    disableFuture,\n    weekStartsOn = 1,\n    placement = \"bottom-start\",\n    disabled,\n    disableCalendar,\n    calendarAriaLabel = \"Choose date and time\",\n    minDate,\n    maxDate,\n    isDateDisabled,\n    locale,\n    format,\n    timeFormat,\n    calendarIcon,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() =>\n    isValidDate(value) || isValidTimeDate(value) ? value : new Date()\n  );\n  const [openView, setOpenView] = useState<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const popupForkRef = useForkRef(popupRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidDate(value) || isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onViewValueChange = useCallback((next: Date) => {\n    setViewValue(next);\n  }, []);\n\n  const onMonthLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.months ? OpenView.days : OpenView.months);\n  }, [openView]);\n\n  const onYearLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.years ? OpenView.days : OpenView.years);\n  }, [openView]);\n\n  const onMonthChange = useCallback(\n    (month: number) => {\n      setViewValue(setMonth(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onYearChange = useCallback(\n    (year: number) => {\n      setViewValue(setYear(viewValue, year));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const emitChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onDateChange = useCallback(\n    (_event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => {\n      if (!date) {\n        return;\n      }\n\n      const timeSource = isValidTimeDate(value) ? value : viewValue;\n      emitChange(mergeDate(date, timeSource));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onTimeChange = useCallback(\n    (timeDate: Date) => {\n      const dateSource = isValidDate(value) ? value : viewValue;\n      emitChange(mergeTime(dateSource, timeDate));\n    },\n    [emitChange, value, viewValue]\n  );\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (popupRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const resolvedTimeFormat = useMemo(() => {\n    if (timeFormat) {\n      return timeFormat;\n    }\n\n    if (format?.includes(\"HH:mm:ss\")) {\n      return \"HH:mm:ss\";\n    }\n\n    return DEFAULT_TIME_FORMAT;\n  }, [format, timeFormat]);\n\n  const months = useMemo(() => getMonths(locale), [locale]);\n  const years = useMemo(() => getYears(new Date().getFullYear(), 100), []);\n\n  let view: React.ReactNode = null;\n\n  switch (openView) {\n    case OpenView.days:\n      view = (\n        <DataPickerDays\n          viewValue={viewValue}\n          value={value}\n          showDaysOutsideMonth={showDaysOutsideMonth}\n          onChange={onDateChange}\n          disablePast={disablePast}\n          disableFuture={disableFuture}\n          weekStartsOn={weekStartsOn}\n          minDate={minDate}\n          maxDate={maxDate}\n          isDateDisabled={isDateDisabled}\n          locale={locale}\n        />\n      );\n      break;\n    case OpenView.months:\n      view = <DatePickerList value={viewValue.getMonth()} items={months} onChange={onMonthChange} />;\n      break;\n    case OpenView.years:\n      view = <DatePickerList value={viewValue.getFullYear()} items={years} onChange={onYearChange} />;\n      break;\n  }\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableCalendar={disableCalendar}\n        format={format}\n        calendarIcon={calendarIcon}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={popupRef}\n          in={isOpen && !disabled && !disableCalendar}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={popupForkRef}\n                className=\"smwb-date-picker smwb-date-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"date-time-picker\"\n                data-smwb-overlay-layer=\"\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={calendarAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n                  <DataPickerHeader\n                    viewValue={viewValue}\n                    locale={locale}\n                    openView={openView}\n                    onChange={onViewValueChange}\n                    onMonthLabelClick={onMonthLabelClick}\n                    onYearLabelClick={onYearLabelClick}\n                  />\n                  <div className=\"smwb-date-time-picker__content\">\n                    <div className=\"smwb-date-picker__body smwb-date-time-picker__body\">{view}</div>\n                    <TimePickerColumns value={viewValue} format={resolvedTimeFormat} onChange={onTimeChange} />\n                  </div>\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default DateTimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","DateTimePicker","React","props","ref","valueProp","onChangeProp","showDaysOutsideMonth","disablePast","disableFuture","weekStartsOn","placement","disabled","disableCalendar","calendarAriaLabel","minDate","maxDate","isDateDisabled","locale","format","timeFormat","calendarIcon","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidDate","isValidTimeDate","openView","setOpenView","OpenView","isOpen","setIsOpen","anchorRef","useRef","popupRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","popupForkRef","useSafeLayoutEffect","onViewValueChange","useCallback","next","onMonthLabelClick","onYearLabelClick","onMonthChange","month","setMonth","onYearChange","year","setYear","emitChange","onDateChange","_event","date","timeSource","mergeDate","onTimeChange","timeDate","dateSource","mergeTime","onToggle","prevState","onClickAway","event","target","_a","_b","resolvedTimeFormat","DEFAULT_TIME_FORMAT","months","getMonths","years","getYears","view","jsx","DataPickerDays","DatePickerList","jsxs","Fragment","DateTimePickerInput","createPortal","Transition","state","ClickAwayListener","DataPickerHeader","TimePickerColumns"],"mappings":"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"}

package/dist/components/inputs/selectField/dropdownMenu.js

@@ -8,10 +8,10 @@ import { TextField as J } from "../textField/textField.js";
 import { MenuDivider as Q } from "../../navigation/menu/menuDivider.js";
 import { MenuItem as g } from "../../navigation/menu/menuItem.js";
 function re({
-  menuMaxHeight: n,
+  menuMaxHeight: a,
   menuMiddleware: x,
   search: N,
-  onSearchInputChange: a,
+  onSearchInputChange: n,
   items: l,
   searchValue: k,
   isOpen: i,
@@ -29,7 +29,7 @@ function re({
 }) {
   const T = Array.isArray(c) ? c : [c], _ = l.some((e) => !!e.group);
   let f;
-  const h = !!D && !_ && !p && l.length > 0, v = n || 240, { startIndex: j, endIndex: F, totalHeight: G, offsetY: H, onScroll: L } = K({
+  const h = !!D && !_ && !p && l.length > 0, v = a || 240, { startIndex: j, endIndex: F, totalHeight: G, offsetY: H, onScroll: L } = K({
     itemCount: h ? l.length : 0,
     itemHeight: E,
     viewportHeight: v
@@ -75,10 +75,11 @@ function re({
         onClose: d,
         anchorElement: s.current,
         middleware: x,
+        "data-smwb-overlay-layer": "",
         style: {
           minWidth: P,
-          maxHeight: n || void 0,
-          overflowY: n ? "auto" : void 0
+          maxHeight: a || void 0,
+          overflowY: a ? "auto" : void 0
         },
         children: [
           N && /* @__PURE__ */ u($, { children: [
@@ -89,7 +90,7 @@ function re({
                 type: "text",
                 placeholder: "Найти...",
                 value: k,
-                onChange: (e, r) => a == null ? void 0 : a(e, r.value),
+                onChange: (e, r) => n == null ? void 0 : n(e, r.value),
                 fullWidth: !0
               }
             ) }),

package/dist/components/inputs/selectField/dropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { Menu, MenuDivider, MenuItem, MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container = document.body,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  let lastGroup: string | undefined;\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n\n  const renderItem = (el: DropdownItem) => {\n    const node: React.ReactNode[] = [];\n    if (hasGroups && el.group !== lastGroup) {\n      lastGroup = el.group;\n      node.push(\n        <li key={`group-${el.group ?? \"ungrouped\"}`} className=\"smwb-select-field__group-label\" role=\"presentation\">\n          {el.group}\n        </li>\n      );\n    }\n    node.push(\n      <MenuItem\n        key={el.key || el.value}\n        value={el.value}\n        disabled={el.disabled}\n        selected={!!valueArray.find((v) => v === el.value)}\n        onClick={(e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        }}\n        optionRenderer={optionRenderer}\n      >\n        {el.text}\n        {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n      </MenuItem>\n    );\n    return node;\n  };\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  return createPortal(\n    <Menu\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <TextField\n              className=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={searchValue}\n              onChange={(e, data) => onSearchInputChange?.(e, data.value)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <div className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </div>\n      ) : useVirtual ? (\n        <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n          <div\n            className=\"smwb-select-field__virtual-scroller\"\n            style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n            onScroll={onScroll}\n          >\n            <div style={{ height: totalHeight, position: \"relative\" }}>\n              <ul\n                role=\"presentation\"\n                className=\"smwb-select-field__virtual-list\"\n                style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n              >\n                {items.slice(startIndex, endIndex).map((el) => renderItem(el))}\n              </ul>\n            </div>\n          </div>\n        </li>\n      ) : items.length ? (\n        items.map((el) => renderItem(el))\n      ) : !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n      {createOption ? (\n        <MenuItem\n          key=\"__create__\"\n          value=\"__create__\"\n          onClick={(e: React.SyntheticEvent) => createOption.onCreate(e)}\n          className=\"smwb-select-field__create-option\"\n        >\n          {createOption.text}\n        </MenuItem>\n      ) : null}\n    </Menu>,\n    container\n  );\n}\n"],"names":["DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","value","onItemClick","isLoading","optionRenderer","menuNoItemsMessage","container","createOption","virtualized","itemHeight","valueArray","hasGroups","i","lastGroup","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","renderItem","el","node","jsx","_a","jsxs","MenuItem","v","e","menuMinWidth","setMenuMinWidth","React","useEffect","onKeyDown","event","createPortal","Menu","Fragment","TextField","data","MenuDivider","ProgressIndicator"],"mappings":"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"}
+{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { Menu, MenuDivider, MenuItem, MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container = document.body,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  let lastGroup: string | undefined;\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n\n  const renderItem = (el: DropdownItem) => {\n    const node: React.ReactNode[] = [];\n    if (hasGroups && el.group !== lastGroup) {\n      lastGroup = el.group;\n      node.push(\n        <li key={`group-${el.group ?? \"ungrouped\"}`} className=\"smwb-select-field__group-label\" role=\"presentation\">\n          {el.group}\n        </li>\n      );\n    }\n    node.push(\n      <MenuItem\n        key={el.key || el.value}\n        value={el.value}\n        disabled={el.disabled}\n        selected={!!valueArray.find((v) => v === el.value)}\n        onClick={(e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        }}\n        optionRenderer={optionRenderer}\n      >\n        {el.text}\n        {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n      </MenuItem>\n    );\n    return node;\n  };\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  return createPortal(\n    <Menu\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\n      data-smwb-overlay-layer=\"\"\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <TextField\n              className=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={searchValue}\n              onChange={(e, data) => onSearchInputChange?.(e, data.value)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <div className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </div>\n      ) : useVirtual ? (\n        <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n          <div\n            className=\"smwb-select-field__virtual-scroller\"\n            style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n            onScroll={onScroll}\n          >\n            <div style={{ height: totalHeight, position: \"relative\" }}>\n              <ul\n                role=\"presentation\"\n                className=\"smwb-select-field__virtual-list\"\n                style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n              >\n                {items.slice(startIndex, endIndex).map((el) => renderItem(el))}\n              </ul>\n            </div>\n          </div>\n        </li>\n      ) : items.length ? (\n        items.map((el) => renderItem(el))\n      ) : !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n      {createOption ? (\n        <MenuItem\n          key=\"__create__\"\n          value=\"__create__\"\n          onClick={(e: React.SyntheticEvent) => createOption.onCreate(e)}\n          className=\"smwb-select-field__create-option\"\n        >\n          {createOption.text}\n        </MenuItem>\n      ) : null}\n    </Menu>,\n    container\n  );\n}\n"],"names":["DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","value","onItemClick","isLoading","optionRenderer","menuNoItemsMessage","container","createOption","virtualized","itemHeight","valueArray","hasGroups","i","lastGroup","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","renderItem","el","node","jsx","_a","jsxs","MenuItem","v","e","menuMinWidth","setMenuMinWidth","React","useEffect","onKeyDown","event","createPortal","Menu","Fragment","TextField","data","MenuDivider","ProgressIndicator"],"mappings":"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"}

package/dist/components/inputs/timePicker/timePicker.js

@@ -1,6 +1,6 @@
 import { jsxs as I, Fragment as N, jsx as n } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/timePicker/timePicker.entry.css';/* empty css                                                               */
-import _, { useMemo as U, useState as b, useRef as C, useCallback as r } from "react";
+import _, { useMemo as U, useState as h, useRef as C, useCallback as i } from "react";
 import { useFloating as $, autoUpdate as q } from "@floating-ui/react";
 import z from "react-transition-group/Transition";
 import { resolvePlacement as G, buildFloatingMiddleware as H } from "../../../utils/floating.js";
@@ -20,8 +20,8 @@ const Y = (m) => ({
   exiting: { opacity: 0 }
 }, de = _.forwardRef(function(a, F) {
   const {
-    value: s,
-    onChange: i,
+    value: l,
+    onChange: r,
     placement: P = "bottom-start",
     disabled: t,
     disableClock: f,
@@ -29,7 +29,7 @@ const Y = (m) => ({
     format: u,
     onBlur: x,
     ...D
-  } = a, o = U(() => s === void 0 ? void 0 : new Date(s), [s]), [E, d] = b(() => T(o) ? o : /* @__PURE__ */ new Date()), [p, l] = b(!1), k = C(null), c = C(null), g = G(P), { refs: w, floatingStyles: O } = $({
+  } = a, o = U(() => l === void 0 ? void 0 : new Date(l), [l]), [E, d] = h(() => T(o) ? o : /* @__PURE__ */ new Date()), [p, s] = h(!1), k = C(null), c = C(null), g = G(P), { refs: w, floatingStyles: O } = $({
     open: p,
     placement: g.placement,
     whileElementsMounted: q,
@@ -38,19 +38,19 @@ const Y = (m) => ({
   J(() => {
     t || d(T(o) ? o : /* @__PURE__ */ new Date());
   }, [o, t]);
-  const B = r(() => {
-    t || l((e) => !e);
-  }, [t]), L = r((e) => {
-    var h, v;
+  const B = i(() => {
+    t || s((e) => !e);
+  }, [t]), L = i((e) => {
+    var v, b;
     const y = e.target;
-    (h = c.current) != null && h.contains(y) || (v = k.current) != null && v.contains(y) || l(!1);
-  }, []), M = r(
+    (v = c.current) != null && v.contains(y) || (b = k.current) != null && b.contains(y) || s(!1);
+  }, []), M = i(
     (e) => {
-      d(e), i == null || i(void 0, e, a);
+      d(e), r == null || r(void 0, e, a);
     },
-    [i, a]
-  ), j = r(() => {
-    l(!1);
+    [r, a]
+  ), j = i(() => {
+    s(!1);
   }, []);
   return /* @__PURE__ */ I(N, { children: [
     /* @__PURE__ */ n(
@@ -58,7 +58,7 @@ const Y = (m) => ({
       {
         ref: V,
         value: o,
-        onChange: i,
+        onChange: r,
         onBlur: x,
         onToggle: B,
         disabled: t,
@@ -87,6 +87,7 @@ const Y = (m) => ({
                 ...Z[e]
               },
               "data-testid": "time-picker",
+              "data-smwb-overlay-layer": "",
               role: "dialog",
               "aria-modal": "false",
               "aria-label": S,

package/dist/components/inputs/timePicker/timePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={clockRef}\n          in={isOpen && !disabled && !disableClock}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={clockForkRef}\n                className=\"smwb-date-picker smwb-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"time-picker\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={clockAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner\">\n                  <TimePickerColumns\n                    value={viewValue}\n                    format={format}\n                    onChange={onTimeChange}\n                    onComplete={onComplete}\n                  />\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}
+{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { createPortal } from \"react-dom\";\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface TimePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string;\n  placement?: Placement;\n  disableClock?: boolean;\n  label?: string;\n  clockAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  clockIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: TimePickerProps) => void;\n}\n\nexport const TimePicker = React.forwardRef(function TimePicker(props: TimePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    placement = \"bottom-start\",\n    disabled,\n    disableClock,\n    clockAriaLabel = \"Choose time\",\n    format,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidTimeDate(value) ? value : new Date()));\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const clockRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const clockForkRef = useForkRef(clockRef, refs.setFloating);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidTimeDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (clockRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const onTimeChange = useCallback(\n    (next: Date) => {\n      setViewValue(next);\n      onChangeProp?.(undefined, next, props);\n    },\n    [onChangeProp, props]\n  );\n\n  const onComplete = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <>\n      <TimePickerInput\n        ref={anchorForkRef}\n        value={value}\n        onChange={onChangeProp}\n        onBlur={onBlurProp}\n        onToggle={onToggle}\n        disabled={disabled}\n        disableClock={disableClock}\n        format={format}\n        {...rest}\n      />\n      {createPortal(\n        <Transition\n          nodeRef={clockRef}\n          in={isOpen && !disabled && !disableClock}\n          timeout={150}\n          mountOnEnter\n          unmountOnExit\n        >\n          {(state) => (\n            <ClickAwayListener onClickAway={onClickAway}>\n              <div\n                ref={clockForkRef}\n                className=\"smwb-date-picker smwb-time-picker\"\n                style={{\n                  ...floatingStyles,\n                  ...defaultStyle(150),\n                  ...transitionStyles[state],\n                }}\n                data-testid=\"time-picker\"\n                data-smwb-overlay-layer=\"\"\n                role=\"dialog\"\n                aria-modal=\"false\"\n                aria-label={clockAriaLabel}\n              >\n                <div className=\"smwb-date-picker__inner\">\n                  <TimePickerColumns\n                    value={viewValue}\n                    format={format}\n                    onChange={onTimeChange}\n                    onComplete={onComplete}\n                  />\n                </div>\n              </div>\n            </ClickAwayListener>\n          )}\n        </Transition>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default TimePicker;\n"],"names":["defaultStyle","duration","transitionStyles","TimePicker","React","props","ref","valueProp","onChangeProp","placement","disabled","disableClock","clockAriaLabel","format","onBlurProp","rest","value","useMemo","viewValue","setViewValue","useState","isValidTimeDate","isOpen","setIsOpen","anchorRef","useRef","clockRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","clockForkRef","useSafeLayoutEffect","onToggle","useCallback","prevState","onClickAway","event","target","_a","_b","onTimeChange","next","onComplete","jsxs","Fragment","jsx","TimePickerInput","createPortal","Transition","state","ClickAwayListener","TimePickerColumns"],"mappings":"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"}