@temp-spotwork/ui 1.4.7 → 1.5.0

package/dist/components/atoms/form/time-picker/time-picker-dropdown.js

@@ -1,66 +1,78 @@
-import { jsxs as j, jsx as c } from "react/jsx-runtime";
-import { forwardRef as z, useRef as h, useState as L, useImperativeHandle as V, useEffect as b } from "react";
+import { jsxs as P, jsx as l } from "react/jsx-runtime";
+import { forwardRef as V, useRef as h, useState as j, useImperativeHandle as W, useEffect as b } from "react";
 import { Typography as x } from "../../../styles/typography/typography.js";
-import { m as W } from "../../../../index-CYyrKZeH.js";
+import { m as q } from "../../../../index-CYyrKZeH.js";
 import { t as S } from "../../../../bundle-mjs-CAy1p0fn.js";
-import { Icons as P } from "../../icons/icons.js";
+import { Icons as k } from "../../icons/icons.js";
 import "../../icons/iconsSVGs/Large/Profile.js";
 import "../../icons/iconsSVGs/Small/Profile.js";
-import { outlinedBorder as q } from "../../../styles/defaults/defaults.js";
+import { outlinedBorder as F } from "../../../styles/defaults/defaults.js";
 import { t as d } from "../../../../toDate-DF9e2eS8.js";
-import { i as F } from "../../../../isBefore-D0yKF9R5.js";
-import { m as G } from "../../../../constants-BfMb81ht.js";
-function J(t) {
+import { i as G } from "../../../../isBefore-D0yKF9R5.js";
+import { m as J } from "../../../../constants-BfMb81ht.js";
+function K(t) {
   return (r) => {
     const n = Math[t], s = n(r);
     return s === 0 ? 0 : s;
   };
 }
-function K(t, r) {
+function Q(t, r) {
   return +d(t) - +d(r);
 }
-function Q(t, r, n) {
-  const s = K(t, r) / G;
-  return J(n == null ? void 0 : n.roundingMethod)(s);
+function X(t, r, n) {
+  const s = Q(t, r) / J;
+  return K(n == null ? void 0 : n.roundingMethod)(s);
 }
-function $(t) {
+function L(t) {
   const r = d(t);
   return r.setSeconds(0, 0), r;
 }
-function X(t, r) {
+function Y(t, r) {
   const n = d(t), s = d(r);
   return n.getTime() > s.getTime();
 }
-function Y(t, r) {
-  const n = $(t), s = $(r);
+function Z(t, r) {
+  const n = L(t), s = L(r);
   return +n == +s;
 }
-const de = z(
-  ({ isOpened: t, value: r, onOptionClick: n, timezone: s, dateToCompare: M, notRenderTimeDifference: k, label: y, min: I, max: T, options: w }, B) => {
-    const l = h(null), f = h(null), i = h(), a = h(1), [A, H] = L(!1), [N, R] = L(!1), C = () => {
-      if (l.current && f.current) {
-        const e = l.current.clientHeight, o = f.current.offsetTop, u = f.current.clientHeight, E = o - (e - -20 * 2) / 2 + u / 2, U = l.current.scrollHeight - e, _ = Math.max(0, Math.min(E, U));
-        l.current.scrollTop = _;
+const me = V(
+  ({
+    isOpened: t,
+    value: r,
+    onOptionClick: n,
+    timezone: s,
+    dateToCompare: M,
+    notRenderTimeDifference: $,
+    label: y,
+    min: I,
+    max: T,
+    options: w,
+    dropdownPlacement: B = "bottom"
+  }, O) => {
+    const c = h(null), f = h(null), i = h(), a = h(1), [A, C] = j(!1), [H, N] = j(!1), R = () => {
+      if (c.current && f.current) {
+        const e = c.current.clientHeight, o = f.current.offsetTop, u = f.current.clientHeight, U = o - (e - -20 * 2) / 2 + u / 2, _ = c.current.scrollHeight - e, z = Math.max(0, Math.min(U, _));
+        c.current.scrollTop = z;
       }
     };
-    V(B, () => ({
-      scrollToSelectedValue: C
+    W(O, () => ({
+      scrollToSelectedValue: R
     })), b(() => {
-      t && C();
+      t && R();
     }, [t, r]), b(() => {
-      const e = l.current;
+      const e = c.current;
       if (!e) return;
       const o = () => {
-        H(e.scrollTop === 0), R(e.scrollTop === e.scrollHeight - e.clientHeight);
+        C(e.scrollTop === 0), N(e.scrollTop === e.scrollHeight - e.clientHeight);
       };
       return o(), e.addEventListener("scroll", o), () => {
         e.removeEventListener("scroll", o);
       };
-    }, [t, H, R]);
+    }, [t, C, N]);
     const m = (e) => {
-      if (l.current) {
+      if (c.current) {
         const u = 2 * a.current;
-        l.current.scrollTop += e === "up" ? -u : u;
+        c.current.scrollTop += e === "up" ? -u : u;
       }
     }, D = (e) => {
       a.current = 0.5, m(e), i.current = setInterval(() => {
@@ -72,21 +84,28 @@ const de = z(
     b(() => () => {
       i.current && clearInterval(i.current);
     }, []);
-    const O = (e, o) => {
-      const u = Q(e, o, {
+    const E = (e, o) => {
+      const u = X(e, o, {
         roundingMethod: "round"
-      }), g = Math.round(u * 100 / 60) / 100;
-      return g <= 0 ? "" : `+${g} hours`;
-    }, v = (e) => !!(I && F(e, I) || T && X(e, T));
-    return t ? /* @__PURE__ */ j(
+      }), v = Math.round(u * 100 / 60) / 100;
+      return v <= 0 ? "" : `+${v} hours`;
+    }, g = (e) => !!(I && G(e, I) || T && Y(e, T));
+    return t ? /* @__PURE__ */ P(
       "div",
       {
+        "data-testid": "time-picker-dropdown",
         className: S(
-          "absolute top-full left-0 mt-1 bg-surface-default rounded-lg border-[0.15rem] outline-none w-[20rem] p-md",
-          q.active
+          "absolute bg-surface-default rounded-lg border-[0.15rem] outline-none w-[20rem] p-md",
+          {
+            top: "bottom-full left-0 mb-1",
+            bottom: "top-full left-0 mt-1",
+            left: "top-0 right-full mr-1",
+            right: "top-0 left-full ml-1"
+          }[B],
+          F.active
         ),
         children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ l(
             "button",
             {
               type: "button",
@@ -96,22 +115,22 @@ const de = z(
               onMouseUp: p,
               onMouseLeave: p,
               disabled: A,
-              children: /* @__PURE__ */ c(P, { id: `${y}-dropdown-scroll-up`, disabled: !0, icon: "ChevronUp", color: A ? "disabled" : "active" })
+              children: /* @__PURE__ */ l(k, { id: `${y}-dropdown-scroll-up`, disabled: !0, icon: "ChevronUp", color: A ? "disabled" : "active" })
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ l(
             "div",
             {
-              ref: l,
+              ref: c,
               className: "max-h-[20rem] overflow-y-auto flex flex-col gap-xs",
               style: { scrollbarWidth: "none", msOverflowStyle: "none" },
               children: w == null ? void 0 : w.map((e) => {
                 if (typeof e == "string")
-                  return /* @__PURE__ */ c(
+                  return /* @__PURE__ */ l(
                     "div",
                     {
                       className: S("flex flex-row items-center gap-xs justify-between py-xxs px-sm"),
-                      children: /* @__PURE__ */ c(
+                      children: /* @__PURE__ */ l(
                         x,
                         {
                           swStyle: 1,
@@ -124,33 +143,33 @@ const de = z(
                     `dropdown-option-${e}`
                   );
                 {
-                  const o = Y(e, r);
-                  return /* @__PURE__ */ j(
+                  const o = Z(e, r);
+                  return /* @__PURE__ */ P(
                     "div",
                     {
                       ref: o ? f : null,
                       className: S(
                         "flex flex-row items-center gap-xs justify-between py-xxs px-sm rounded cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none",
                         o && "bg-surface-active",
-                        v(e) && "cursor-not-allowed"
+                        g(e) && "cursor-not-allowed"
                       ),
                       onClick: () => n(e),
                       children: [
-                        /* @__PURE__ */ c(
+                        /* @__PURE__ */ l(
                           x,
                           {
                             swStyle: 5,
-                            children: W(e).tz(s).format("hh:mm A"),
-                            color: v(e) ? "disabled" : o ? "active" : "default",
+                            children: q(e).tz(s).format("hh:mm A"),
+                            color: g(e) ? "disabled" : o ? "active" : "default",
                             className: "whitespace-nowrap overflow-hidden text-ellipsis"
                           }
                         ),
-                        M && !k && /* @__PURE__ */ c(
+                        M && !$ && /* @__PURE__ */ l(
                           x,
                           {
                             swStyle: 1,
-                            children: O(e, M),
-                            color: v(e) ? "disabled" : o ? "active" : "default",
+                            children: E(e, M),
+                            color: g(e) ? "disabled" : o ? "active" : "default",
                             className: "whitespace-nowrap overflow-hidden text-ellipsis"
                           }
                         )
@@ -162,7 +181,7 @@ const de = z(
               })
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ l(
             "button",
             {
               type: "button",
@@ -171,14 +190,14 @@ const de = z(
               onMouseDown: () => D("down"),
               onMouseUp: p,
               onMouseLeave: p,
-              disabled: N,
-              children: /* @__PURE__ */ c(
-                P,
+              disabled: H,
+              children: /* @__PURE__ */ l(
+                k,
                 {
                   id: `${y}-dropdown-scroll-down`,
                   disabled: !0,
                   icon: "ChevronDown",
-                  color: N ? "disabled" : "active"
+                  color: H ? "disabled" : "active"
                 }
               )
             }
@@ -189,5 +208,5 @@ const de = z(
   }
 );
 export {
-  de as TimePickerDropdown
+  me as TimePickerDropdown
 };

package/dist/components/atoms/form/time-picker/time-picker-input.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SvgKey } from '../../icons/iconMap';
 
 /**
  * TimePickerInput Component
@@ -102,6 +103,14 @@ type TimePickerInputProps = {
      * The list of possible values for the input.
      */
     options: (Date | string)[];
+    /**
+     * Optional height for the input button container.
+     */
+    inputHeight: string;
+    /**
+     * Optional icon rendered on the right side of the input.
+     */
+    icon?: SvgKey;
 };
 export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/atoms/form/time-picker/time-picker-input.js

@@ -1,48 +1,50 @@
-import { jsxs as Q, jsx as M } from "react/jsx-runtime";
-import { forwardRef as W, useRef as X, useState as Y, useEffect as x, useCallback as z } from "react";
+import { jsxs as X, jsx as M } from "react/jsx-runtime";
+import { forwardRef as Y, useRef as z, useState as B, useEffect as I, useCallback as O } from "react";
 import "../../../../purify.es-eYFoHPwR.js";
-import { styleMap as B } from "../../../styles/typography/style.js";
+import { styleMap as ee } from "../../../styles/typography/style.js";
 import "../../../styles/colors/colormap.js";
-import { t as I } from "../../../../bundle-mjs-CAy1p0fn.js";
-import { Icons as O } from "../../icons/icons.js";
+import { t as L } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Icons as te } from "../../icons/icons.js";
 import "../../icons/iconsSVGs/Large/Profile.js";
 import "../../icons/iconsSVGs/Small/Profile.js";
-import { outlinedBorder as L } from "../../../styles/defaults/defaults.js";
+import { outlinedBorder as P } from "../../../styles/defaults/defaults.js";
 import { m as c } from "../../../../index-CYyrKZeH.js";
-import { getLabelColor as ee, getBorderClasses as te } from "../utils-for-forms/state-functions.js";
-const pe = W(
+import { getLabelColor as se, getBorderClasses as ne } from "../utils-for-forms/state-functions.js";
+const de = Y(
   ({
     value: o,
     error: v = !1,
     warning: A = !1,
     disabled: f = !1,
-    label: P,
+    label: U,
     isOpened: r,
     focus: T,
-    onFocus: U,
+    onFocus: $,
     onBlur: m,
     setIsOpened: _,
     selectValue: N,
     onScrollToSelectedValue: E,
-    autoFocus: $ = !1,
+    autoFocus: K = !1,
     step: R = 5,
     min: p,
     max: y,
     timezone: i,
-    options: S
-  }, K) => {
-    const g = "__:__ __", V = X(null), [n, a] = Y(c(o).tz(i).format("hh:mm A")), Z = ee(r || T, A, v, f), q = te(T || r, A, v, f), F = f ? `bg-surface-disabled ${L.disabled}` : "", G = () => {
+    options: S,
+    inputHeight: Z,
+    icon: j
+  }, q) => {
+    const g = "__:__ __", V = z(null), [n, a] = B(c(o).tz(i).format("hh:mm A")), F = se(r || T, A, v, f), G = ne(T || r, A, v, f), H = f ? `bg-surface-disabled ${P.disabled}` : "", J = () => {
       _(!0), r || setTimeout(() => {
         var e;
         (e = V.current) == null || e.select();
       }, 0);
-    }, H = () => {
+    }, Q = () => {
       m == null || m();
     };
-    x(() => {
+    I(() => {
       r || a(c(o).tz(i).format("hh:mm A"));
     }, [r, o]);
-    const j = z(
+    const x = O(
       (e) => {
         if (r)
           try {
@@ -62,10 +64,10 @@ const pe = W(
       },
       [r, S, i, p, y, N, E, R, o]
     );
-    x(() => {
-      j(n);
-    }, [n, r, S, i, p, y, j]);
-    const J = (e) => {
+    I(() => {
+      x(n);
+    }, [n, r, S, i, p, y, x]);
+    const W = (e) => {
       var h;
       if (e.key === "Enter" || e.key === "Escape" || e.key === "Tab") {
         a(c(o).tz(i).format("hh:mm A")), e.key === "Escape" && ((h = V.current) == null || h.blur(), e.target.selectionStart = 0, e.target.selectionEnd = 0, m == null || m(), _(!1));
@@ -204,18 +206,19 @@ const pe = W(
         }, 0);
       }
     };
-    return /* @__PURE__ */ Q(
+    return /* @__PURE__ */ X(
       "button",
       {
-        ref: K,
+        ref: q,
         type: "button",
-        autoFocus: $,
-        className: I(
-          "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-md",
-          q,
-          F
+        autoFocus: K,
+        className: L(
+          "px-md w-full flex flex-row justify-between items-center gap-md",
+          G,
+          H
         ),
-        onClick: G,
+        style: { height: Z },
+        onClick: J,
         disabled: f,
         children: [
           /* @__PURE__ */ M(
@@ -225,24 +228,24 @@ const pe = W(
               type: "text",
               maxLength: 8,
               value: n,
-              onKeyDown: J,
+              onKeyDown: W,
               readOnly: !r || f || !T,
-              onFocus: U,
-              onBlur: H,
-              className: I(
+              onFocus: $,
+              onBlur: Q,
+              className: L(
                 "reset-input",
-                `${L.none} ${B[5]} bg-transparent w-full`,
+                `${P.none} ${ee[5]} bg-transparent w-full`,
                 f ? "text-glyph-disabled" : ""
               ),
               placeholder: g
             }
           ),
-          /* @__PURE__ */ M("div", { children: /* @__PURE__ */ M(O, { id: `${P}-clock`, disabled: !0, icon: "Clock", color: Z }) })
+          j && /* @__PURE__ */ M("div", { children: /* @__PURE__ */ M(te, { id: `${U}-clock`, disabled: !0, icon: j, color: F }) })
         ]
       }
     );
   }
 );
 export {
-  pe as TimePickerInput
+  de as TimePickerInput
 };

package/dist/components/atoms/form/time-picker/time-picker.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SvgKey } from '../../icons/iconMap';
 
 /**
  * A TimePicker component that allows users to select a time using either a dropdown or direct input.
@@ -107,5 +108,20 @@ export type TimePickerProps = {
      * Optional className to apply to the time picker container.
      */
     className?: string;
+    /**
+     * Optional height for the time picker input button (e.g. "3rem", "48px").
+     * @default "4rem"
+     */
+    inputHeight?: string;
+    /**
+     * Optional icon displayed at the right side of the input.
+     * @default "Clock"
+     */
+    icon?: SvgKey;
+    /**
+     * Controls where the dropdown opens relative to the input trigger.
+     * @default "bottom"
+     */
+    dropdownPlacement?: 'top' | 'bottom' | 'left' | 'right';
 };
 export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/form/time-picker/time-picker.js

@@ -1,13 +1,13 @@
 import { jsxs as A, jsx as S } from "react/jsx-runtime";
-import K, { useState as Y, useEffect as P, useRef as x, useMemo as Q } from "react";
-import { Typography as U } from "../../../styles/typography/typography.js";
-import { getLabelColor as W, getHelperTextColor as X } from "../utils-for-forms/state-functions.js";
-import { FormHelperText as Z } from "../form-helper-text/form-helper-text.js";
-import { TimePickerInput as B } from "./time-picker-input.js";
-import { TimePickerDropdown as b } from "./time-picker-dropdown.js";
+import W, { useState as Y, useEffect as P, useRef as x, useMemo as X } from "react";
+import { Typography as Z } from "../../../styles/typography/typography.js";
+import { getLabelColor as B, getHelperTextColor as b } from "../utils-for-forms/state-functions.js";
+import { FormHelperText as ee } from "../form-helper-text/form-helper-text.js";
+import { TimePickerInput as te } from "./time-picker-input.js";
+import { TimePickerDropdown as oe } from "./time-picker-dropdown.js";
 import { m as n } from "../../../../index-CYyrKZeH.js";
-import { t as ee } from "../../../../bundle-mjs-CAy1p0fn.js";
-const fe = K.forwardRef(
+import { t as ne } from "../../../../bundle-mjs-CAy1p0fn.js";
+const pe = W.forwardRef(
   ({
     value: c,
     selectValue: O,
@@ -25,11 +25,14 @@ const fe = K.forwardRef(
     dateToCompare: p,
     daySeparatorFormat: z = "literal",
     notRenderTimeDifference: N = !1,
-    className: _
-  }, j) => {
-    const [d, D] = Y(!1), [a, v] = Y(c), [C, I] = Y(!1);
+    className: _,
+    inputHeight: j = "4rem",
+    icon: H = "Clock",
+    dropdownPlacement: $ = "bottom"
+  }, F) => {
+    const [d, D] = Y(!1), [a, C] = Y(c), [v, I] = Y(!1);
     P(() => {
-      v(c);
+      C(c);
     }, [c]);
     const T = x(null), R = x(null), o = E || n.tz.guess();
     P(() => {
@@ -38,19 +41,19 @@ const fe = K.forwardRef(
       };
       return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
     }, [d, a, O]);
-    const H = W(d || C, m, f, h), $ = X(m, f, h), F = (t) => {
+    const q = B(d || v, m, f, h), G = b(m, f, h), J = (t) => {
       O(t), D(!1);
-    }, q = () => {
+    }, K = () => {
       var t;
       (t = R.current) == null || t.scrollToSelectedValue();
-    }, V = Q(() => {
-      const t = p ? n.tz(p, o) : null, r = n.tz(c, o), G = s ? n.tz(s, o) : r.startOf("day"), w = l ? n.tz(l, o) : r.endOf("day");
-      let e = G;
+    }, V = X(() => {
+      const t = p ? n.tz(p, o) : null, r = n.tz(c, o), Q = s ? n.tz(s, o) : r.startOf("day"), w = l ? n.tz(l, o) : r.endOf("day");
+      let e = Q;
       if (s) {
         const g = e.minutes() % i;
         if (g !== 0) {
-          const J = i - g;
-          e = e.add(J, "minutes");
+          const U = i - g;
+          e = e.add(U, "minutes");
         }
       }
       const M = /* @__PURE__ */ new Set([]);
@@ -62,22 +65,22 @@ const fe = K.forwardRef(
         ), e.isSameOrBefore(w) && M.add(e.toDate()), e = n(e).tz(o).add(i, "minutes");
       return Array.from(M);
     }, [c, i, s, l, p, z, o]);
-    return /* @__PURE__ */ A("div", { className: ee("w-[13.5rem]", _), children: [
-      u && /* @__PURE__ */ S(U, { swStyle: 3, color: H, children: u }),
+    return /* @__PURE__ */ A("div", { className: ne("w-[13.5rem]", _), children: [
+      u && /* @__PURE__ */ S(Z, { swStyle: 3, color: q, children: u }),
       /* @__PURE__ */ A("div", { className: "relative", ref: T, id: a.toISOString() + Math.random(), children: [
         /* @__PURE__ */ S(
-          B,
+          te,
           {
-            ref: j,
+            ref: F,
             value: a,
             options: V,
-            selectValue: v,
+            selectValue: C,
             error: f,
             warning: m,
             disabled: h,
             label: u,
             isOpened: d,
-            focus: C,
+            focus: v,
             onFocus: () => I(!0),
             onBlur: () => {
               I(!1), y == null || y();
@@ -85,42 +88,45 @@ const fe = K.forwardRef(
             setIsOpened: D,
             autoFocus: L,
             step: i,
-            onScrollToSelectedValue: q,
+            onScrollToSelectedValue: K,
             min: s,
             max: l,
-            timezone: o
+            timezone: o,
+            inputHeight: j,
+            icon: H
           }
         ),
         /* @__PURE__ */ S(
-          b,
+          oe,
           {
             ref: R,
             isOpened: d,
             value: a,
             timezone: o,
-            onOptionClick: F,
+            onOptionClick: J,
             dateToCompare: p,
             notRenderTimeDifference: N,
             label: u,
             min: s,
             max: l,
             step: i,
-            options: V
+            options: V,
+            dropdownPlacement: $
           }
         )
       ] }),
       k && /* @__PURE__ */ S(
-        Z,
+        ee,
         {
           helperText: k,
           warning: m,
           error: f,
-          helperTextAndIconColor: $
+          helperTextAndIconColor: G
         }
       )
     ] });
   }
 );
 export {
-  fe as TimePicker
+  pe as TimePicker
 };

package/dist/components/atoms/form/time-picker/time-picker.stories.d.ts

@@ -28,3 +28,10 @@ export declare const MidnightMinus1Hour: Story;
 export declare const MidnightMinus1HourAnd18HoursMaxUpperBound: Story;
 export declare const Noon: Story;
 export declare const FifteenMinutesStep: Story;
+export declare const CustomInputHeight: Story;
+export declare const WithoutIcon: Story;
+export declare const WithCustomIcon: Story;
+export declare const DropdownOpensBottom: Story;
+export declare const DropdownOpensTop: Story;
+export declare const DropdownOpensLeft: Story;
+export declare const DropdownOpensRight: Story;