@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/dateselect/year-switch.js

@@ -0,0 +1,134 @@
+import { jsxs as D, jsx as o } from "react/jsx-runtime";
+import { Icons as v } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { getStyles as E } from "./styles.js";
+import { c as j } from "../../../../index-fN7hCOo3.js";
+import { l as I } from "../../../../lodash-BRbpQ7iy.js";
+import { eachYearOfInterval as P } from "./helpers.js";
+import { Typography as N } from "../../../styles/typography/typography.js";
+import { useRef as R, useCallback as S, useEffect as V } from "react";
+import { a as k } from "../../../../addYears-D3POA9ql.js";
+import { t as y } from "../../../../toDate-DF9e2eS8.js";
+import { c as W } from "../../../../startOfWeek-DBvLd9He.js";
+import { i as u } from "../../../../isWithinInterval-BTUruC3j.js";
+import { s as p } from "../../../../set-CXVt2sL3.js";
+import { a as F, f as h } from "../../../../format-BwmhcciO.js";
+function L(r, t) {
+  const s = y(r), a = y(t);
+  return s.getFullYear() === a.getFullYear();
+}
+function _(r, t) {
+  const s = y(r);
+  return isNaN(+s) ? W(r, NaN) : (s.setFullYear(t), s);
+}
+function U(r, t) {
+  return k(r, -2);
+}
+const te = ({
+  onChange: r,
+  currMonth: t,
+  setCurrMonth: s,
+  value: a,
+  min: c,
+  max: d
+}) => {
+  const m = E(), Y = R(null), x = P({
+    start: U(t),
+    end: k(t, 2)
+  }), n = u(p(a, { year: new Date(t).getFullYear() - 1 }), {
+    start: c,
+    end: d
+  }), l = u(p(a, { year: new Date(t).getFullYear() + 1 }), {
+    start: c,
+    end: d
+  }), b = S(
+    I.debounce((e) => {
+      e.deltaY < 0 && l ? w() : e.deltaY > 0 && n && g();
+    }, 35),
+    // Adjust the debounce delay as needed
+    [a, l, n]
+  ), f = S(
+    (e) => {
+      e.preventDefault(), b(e);
+    },
+    [b]
+  );
+  V(() => {
+    const e = Y.current;
+    return e && e.addEventListener("wheel", f), () => {
+      e && e.removeEventListener("wheel", f);
+    };
+  }, [f]);
+  const w = () => {
+    const e = F(a, { years: 1 });
+    s(h(e, "yyyy-MM")), r(e);
+  }, C = (e) => {
+    const i = _(a, e);
+    s(h(i, "yyyy-MM")), r(i);
+  }, g = () => {
+    const e = F(a, { years: -1 });
+    s(h(e, "yyyy-MM")), r(e);
+  };
+  return /* @__PURE__ */ D("div", { className: m.switchIconsLists, ref: Y, children: [
+    /* @__PURE__ */ o("div", { className: "h-[3rem] flex items-center justify-center", children: /* @__PURE__ */ o(
+      v,
+      {
+        button: !0,
+        handleClick: (e) => {
+          e.stopPropagation(), g();
+        },
+        icon: "ChevronUp",
+        color: n ? "active" : "disabled",
+        disabled: !n
+      }
+    ) }),
+    /* @__PURE__ */ o("div", { className: m.timeFlex, children: x.map((e) => {
+      const i = u(p(a, { year: e.getFullYear() }), {
+        start: c,
+        end: d
+      });
+      return /* @__PURE__ */ o(
+        "div",
+        {
+          "data-testid": e.toLocaleString(),
+          onClick: () => i && C(e.getFullYear()),
+          className: j(
+            m.hourStyle,
+            i ? "hover:bg-surface-active cursor-pointer" : "cursor-not-allowed",
+            `${L(e, t) ? "bg-surface-active" : ""}`,
+            " rounded w-min"
+          ),
+          children: /* @__PURE__ */ o(
+            N,
+            {
+              color: i ? L(e, t) ? "active" : "default" : "disabled",
+              children: e.toLocaleString("en-US", {
+                year: "numeric"
+              }),
+              swStyle: 5,
+              className: "px-md"
+            }
+          )
+        },
+        e.toLocaleString()
+      );
+    }) }),
+    /* @__PURE__ */ o("div", { className: "h-[3rem] flex items-center justify-center", children: /* @__PURE__ */ o(
+      v,
+      {
+        button: !0,
+        handleClick: (e) => {
+          e.stopPropagation(), w();
+        },
+        icon: "ChevronDown",
+        color: l ? "active" : "disabled",
+        disabled: !l
+      }
+    ) }),
+    /* @__PURE__ */ o(N, { children: "Year", swStyle: 1, color: "subdued" })
+  ] });
+};
+export {
+  te as YearSwitch
+};

package/dist/components/atoms/form/dropdown/dropdown.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { SvgKey } from '../../icons';
+
+export type DropdownProps = {
+    /**
+     * Dropdown label
+     */
+    label?: string;
+    /**
+     * Array of strings to be shown as options
+     */
+    options: string[] | {
+        label: string;
+        value: string;
+    }[];
+    /**
+     * the dropdown handler, return a new value. The value type depends on multiselect prop
+     */
+    onChange: React.Dispatch<React.SetStateAction<string | string[]>>;
+    /**
+     * the dropdown value. The value type depends on multiselect prop
+     */
+    value: string | string[];
+    /**
+     * default value of the dropdown. The value type depends on multiselect prop
+     */
+    defaultValue?: string | string[];
+    /**
+     * placeholder for the dropdown field
+     */
+    placeholder?: string;
+    /**
+     * any helper text to be shown
+     */
+    helperText?: string;
+    /**
+     * any icon for the helper text. Default value for warning state is 'Warning', for error state is 'Alert'. If the dropdown has disabled state - the icon doesn't render.
+     */
+    helperTextIcon?: SvgKey;
+    /**
+     * multiselect option. If it is not defined - onChange, value and defaultValue props can work only with string. If this prop is defined as true -  onChange, value and defaultValue props can work only with string[]
+     */
+    multiselect?: boolean;
+    /**
+     * boolean value to show error
+     */
+    error?: boolean;
+    /**
+     * boolean value to show warning
+     */
+    warning?: boolean;
+    /**
+     * boolean value to disable the dropdown
+     */
+    disabled?: boolean;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * optional?: autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/form/dropdown/dropdown.js

@@ -0,0 +1,182 @@
+import { jsxs as f, jsx as r, Fragment as Z } from "react/jsx-runtime";
+import j, { useRef as V, useState as x } from "react";
+import { R as ee, T as re, I as se, P as oe, C as te, S as ne, V as ce, a as le, b as ae } from "../../../../index-CnWyMXBX.js";
+import { Icons as b } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { selectorContainer as ie, badgeStyleMap as w, triggerStyles as de, scrollButtonStyles as R, itemStyles as fe, contentStyles as he, hintStyles as me } from "./styles.js";
+import { c as W } from "../../../../index-fN7hCOo3.js";
+import { outlinedBorder as P, border as pe } from "../../../styles/defaults/defaults.js";
+import { Checkbox as ye } from "../checkbox/checkbox.js";
+import { Typography as g } from "../../../styles/typography/typography.js";
+import { Badge as we } from "../../badge/badge.js";
+import { getLabelColor as ge, getInnerIconColor as Se, getBorderClasses as Ce, getHelperTextColor as be } from "../utils-for-forms/state-functions.js";
+const Re = j.forwardRef(
+  ({
+    onChange: S,
+    value: s,
+    error: l = !1,
+    warning: i = !1,
+    defaultValue: h,
+    label: d,
+    placeholder: U = "Select value",
+    options: m,
+    helperText: $,
+    helperTextIcon: O,
+    multiselect: t = !1,
+    disabled: a = !1,
+    onBlur: u,
+    autoFocus: F = !1
+  }, H) => {
+    const p = V(null), [K, L] = x(0), [n, C] = x(!1), [y, k] = x(!1);
+    j.useEffect(() => {
+      var e;
+      (e = p == null ? void 0 : p.current) != null && e.offsetWidth && L(p.current.offsetWidth), t && h && Array.isArray(h) && !s.length && S(h), !t && h && typeof h == "string" && !s && S(h);
+    }, []);
+    const T = ge(n || y, i, l, a), I = be(i, l, a), _ = Ce(n || y, i, l, a), M = a ? `bg-surface-disabled ${P.disabled}` : "bg-surface-default", q = O || (l ? "AlertSmall" : "WarningSmall"), z = Se(n || y, i, l, a), G = a ? w.disabled : n || y ? w.default : l ? w.error : i ? w.warning : w.default, B = Array.isArray(s) ? s.length - 1 : 0;
+    function v(e) {
+      return Array.isArray(e) && typeof e[0] == "object" && e[0] !== null && "label" in e[0] && "value" in e[0];
+    }
+    const E = (e, o) => {
+      if (Array.isArray(o)) {
+        if (!o.length) return "";
+        if (v(e)) {
+          const c = e.find((D) => D.value === o[0]);
+          return c ? c.label : "";
+        }
+        return o[0];
+      } else {
+        if (v(e)) {
+          const c = e.find((D) => D.value === o);
+          return c ? c.label : "";
+        }
+        return o;
+      }
+    }, N = (e) => typeof e == "string" ? e : e.value, J = (e) => typeof e == "string" ? e : e.label, A = (e) => {
+      if (t) {
+        let o = [];
+        Array.isArray(s) && s.includes(e) ? o = [...s.filter((c) => c !== e)] : o = [...s, e], S(o);
+      } else
+        S(e);
+    }, Q = (e, o) => {
+      e.key === "Enter" && A(o);
+    }, X = (e) => {
+      e.key === "Escape" && C(!1);
+    }, Y = () => {
+      C(!1);
+    };
+    return (
+      // Root component that controls the whole dropdown
+      /* @__PURE__ */ f("div", { "data-testid": `${d}-dropdown`, className: "w-full", children: [
+        /* @__PURE__ */ r(g, { swStyle: 3, children: d, color: T }),
+        /* @__PURE__ */ r("div", { className: ie, ref: p, onBlur: () => !n && (u == null ? void 0 : u()), children: /* @__PURE__ */ f(
+          ee,
+          {
+            value: E(m, s),
+            onValueChange: (e) => !t && A(e),
+            open: n,
+            onOpenChange: (e) => {
+              t && !n && C(e), !t && C(e);
+            },
+            disabled: a,
+            children: [
+              /* @__PURE__ */ f(
+                re,
+                {
+                  autoFocus: F,
+                  className: W(de, _, M),
+                  ref: H,
+                  onFocus: () => k(!0),
+                  onBlur: () => k(!1),
+                  children: [
+                    s && s.length !== 0 ? /* @__PURE__ */ f("div", { className: "min-w-0 flex gap-xxs items-center", children: [
+                      /* @__PURE__ */ r(
+                        g,
+                        {
+                          swStyle: 5,
+                          children: E(m, s),
+                          className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                        }
+                      ),
+                      B > 0 && /* @__PURE__ */ r(we, { text: "+" + B, color: G })
+                    ] }) : /* @__PURE__ */ r(Z, { children: /* @__PURE__ */ r(
+                      g,
+                      {
+                        swStyle: 5,
+                        children: U,
+                        className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(se, { className: "flex-shrink-0", children: /* @__PURE__ */ r(
+                      b,
+                      {
+                        id: `${d}-dropdown-icon`,
+                        disabled: !0,
+                        color: z,
+                        icon: n ? "ChevronUp" : "ChevronDown"
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(oe, { children: /* @__PURE__ */ f(
+                te,
+                {
+                  className: W(
+                    he,
+                    "max-h-96",
+                    n || y ? P.active : pe.default
+                  ),
+                  style: { width: `${K / 10}rem` },
+                  position: "popper",
+                  side: "bottom",
+                  onPointerDownOutside: Y,
+                  onKeyDown: X,
+                  children: [
+                    /* @__PURE__ */ r(ne, { className: R, children: /* @__PURE__ */ r(b, { id: `${d}-dropdown-scroll-up`, disabled: !0, icon: "ChevronUp", color: "active" }) }),
+                    /* @__PURE__ */ r(ce, { children: m == null ? void 0 : m.map((e, o) => /* @__PURE__ */ f(
+                      le,
+                      {
+                        className: fe,
+                        value: N(e),
+                        onClick: () => t && A(typeof e == "string" ? e : e.value),
+                        onKeyDown: (c) => Q(c, typeof e == "string" ? e : e.value),
+                        children: [
+                          t && /* @__PURE__ */ r(
+                            ye,
+                            {
+                              "data-testid": `checkbox-${o}`,
+                              checked: s ? s.includes(N(e)) : !1
+                            }
+                          ),
+                          /* @__PURE__ */ r(
+                            g,
+                            {
+                              swStyle: 5,
+                              children: J(e),
+                              color: !t && N(e) === s ? "active" : "default",
+                              className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                            }
+                          )
+                        ]
+                      },
+                      `${d}-dropdown-option-${o}`
+                    )) }),
+                    /* @__PURE__ */ r(ae, { className: R, children: /* @__PURE__ */ r(b, { id: `${d}-dropdown-scroll-down`, disabled: !0, icon: "ChevronDown", color: "active" }) })
+                  ]
+                }
+              ) }),
+              ($ || l || i) && /* @__PURE__ */ f("div", { className: me, children: [
+                (i || l) && !a && /* @__PURE__ */ r(b, { id: `${d}-dropdown-helper-icon`, icon: q, disabled: !0, color: I }),
+                /* @__PURE__ */ r(g, { swStyle: 1, children: $, color: I })
+              ] })
+            ]
+          }
+        ) })
+      ] })
+    );
+  }
+);
+export {
+  Re as Dropdown
+};

package/dist/components/atoms/form/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './dropdown';
+export type { DropdownProps } from './dropdown';

package/dist/components/atoms/form/dropdown/index.js

@@ -0,0 +1,4 @@
+import { Dropdown as p } from "./dropdown.js";
+export {
+  p as Dropdown
+};

package/dist/components/atoms/form/dropdown/styles.d.ts

@@ -0,0 +1,13 @@
+import { BadgeColorVariants } from '../../badge/badge';
+
+export declare const triggerStyles: string;
+export declare const contentStyles: string;
+export declare const itemStyles = "flex flex-row items-center gap-xs py-sm px-md border-b border-bcolor-subdued cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none";
+export declare const scrollButtonStyles = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default";
+export declare const hintStyles = "flex items-center gap-xs self-stretch";
+export declare const selectorContainer = "flex flex-col justify-center items-start gap-xs self-stretch";
+type BadgeStyleMap = {
+    [key: string]: BadgeColorVariants;
+};
+export declare const badgeStyleMap: BadgeStyleMap;
+export {};

package/dist/components/atoms/form/dropdown/styles.js

@@ -0,0 +1,20 @@
+import { c as e } from "../../../../index-fN7hCOo3.js";
+const r = e(
+  "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-md"
+), s = e(
+  "overflow-hidden bg-surface-default rounded-lg my-[0.3rem] border-[0.15rem] outline-none"
+), o = "flex flex-row items-center gap-xs py-sm px-md border-b border-bcolor-subdued cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none", l = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default", n = "flex items-center gap-xs self-stretch", c = "flex flex-col justify-center items-start gap-xs self-stretch", a = {
+  default: "affirmative",
+  warning: "warning",
+  error: "alert",
+  disabled: "disabled"
+};
+export {
+  a as badgeStyleMap,
+  s as contentStyles,
+  n as hintStyles,
+  o as itemStyles,
+  l as scrollButtonStyles,
+  c as selectorContainer,
+  r as triggerStyles
+};

package/dist/components/atoms/form/dropdown-search/dropdown-search.d.ts

@@ -0,0 +1,93 @@
+import { default as React } from 'react';
+import { LabelValuePair } from '../form-types';
+
+export type BaseDropdownSearchOption = LabelValuePair;
+export type ExtendedDropdownSearchOption<T extends BaseDropdownSearchOption = BaseDropdownSearchOption> = T;
+export type DropdownSearchProps<T extends BaseDropdownSearchOption = BaseDropdownSearchOption> = {
+    /**
+     * Trigger error state.
+     */
+    error?: boolean;
+    /**
+     * Trigger warning state.
+     */
+    warning?: boolean;
+    /**
+     * Display helper text.
+     */
+    helperText?: string;
+    /**
+     * Disable input field
+     */
+    disabled?: boolean;
+    /**
+     * A label to be displayed above the input field.
+     */
+    label?: string;
+    /**
+     * A placeholder to be displayed in the input field.
+     */
+    placeholder?: string;
+    /**
+     * Assign a function to be called when the input field changes
+     */
+    onChange?: React.Dispatch<string>;
+    /**
+     * Set value for controlled components
+     */
+    value?: string;
+    /**
+     * Set value for controlled components, if it is defined it shows a dropdown
+     */
+    selectValue?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * An Array of options
+     */
+    options?: T[];
+    /**
+     * will not filter the options (default: false)
+     * if true, the options will be shown in the dropdown without filtering
+     */
+    noFilter?: boolean;
+    /**
+     * handle click to the 'add value' button in the end of dropdown
+     */
+    addValue?: (value: string) => void;
+    /**
+     * label for the 'add value' button in the end of dropdown
+     */
+    addValueLabel?: string;
+    /**
+     * render option as a component
+     */
+    renderOption?: (option: T) => React.ReactNode;
+    /**
+     * ref to the input of textfield
+     */
+    inputRef?: React.LegacyRef<HTMLInputElement>;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * show loading icon
+     */
+    isLoading?: boolean;
+    /**
+     * optional: autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * optional: autoFocus
+     */
+    notFoundText?: string;
+    /**
+     * loading icon
+     */
+    loadingIcon?: React.ReactNode;
+    /**
+     * prevent rendering a browser suggestion list (history of typed text, etc)
+     */
+    preventBrowserSuggestions?: boolean;
+};
+export declare function DropdownSearch<T extends BaseDropdownSearchOption = BaseDropdownSearchOption>({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, addValue, inputRef, onBlur, autoFocus, notFoundText, renderOption, loadingIcon, noFilter, addValueLabel, preventBrowserSuggestions, }: DropdownSearchProps<T>): import("react/jsx-runtime").JSX.Element;