@temp-spotwork/ui 1.4.3

package/dist/components/molecules/filter/date-selector/date-selector.d.ts

@@ -0,0 +1,31 @@
+type SingleValue = string | Date;
+type RangeValues = [string | Date, string | Date];
+export type DateSelectorProps = {
+    /**
+     * mode of component.
+     * If it is the day mode you can select only an one day.
+     * If this is the week mode you can select a week (not custom values)
+     */
+    mode?: 'day' | 'week';
+    /**
+     * it shifts the calendar rendering to provided value
+  
+     */
+    weekStartsAt?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * value of the component.
+     * String or Date for the day mode
+     * An array of 2 values. Start date and End date.
+     */
+    value: SingleValue | RangeValues;
+    /**
+     * return a new value.
+     */
+    onChange: (value: SingleValue | RangeValues) => void;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function DateSelector({ mode, weekStartsAt, value, onChange, autoFocus, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/molecules/filter/date-selector/date-selector.js

@@ -0,0 +1,243 @@
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
+import m from "react";
+import { Icons as g } from "../../../atoms/icons/icons.js";
+import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { Button as ct } from "../../button/button.js";
+import "../../../styles/colors/colors.js";
+import { surface as a } from "../../../styles/colors/colormap.js";
+import { outlinedBorder as it } from "../../../styles/defaults/defaults.js";
+import { Typography as p } from "../../../styles/typography/typography.js";
+import { c as x } from "../../../../index-fN7hCOo3.js";
+import { formatDateToMonthYear as N, endOfMonth as v, parseShortMonthYear as u, formatShortMonthYear as lt, isSameMonth as Y, isSameWeek as D } from "../../../atoms/form/dateselect/helpers.js";
+import { p as dt, e as k, s as mt, a as ft, b as ht, i as O, c as w } from "../../../../isToday-DmBTkQMq.js";
+import { f as o, g as ut, a as E } from "../../../../format-BwmhcciO.js";
+import { s as yt } from "../../../../startOfToday-BPMZZniU.js";
+import { s as Mt, a as f } from "../../../../startOfWeek-DBvLd9He.js";
+function Gt({
+  mode: y = "day",
+  weekStartsAt: s = 0,
+  value: r,
+  onChange: l,
+  autoFocus: P = !1
+}) {
+  const $ = m.useRef(null), F = m.useRef(null), S = yt(), [H, W] = m.useState(!1), _ = () => {
+    W((t) => !t);
+  };
+  m.useEffect(() => {
+    const t = (e) => {
+      const i = $.current;
+      i && e.target !== i && !i.contains(e.target) && W(!1);
+    };
+    return document.addEventListener("click", t), () => {
+      document.removeEventListener("click", t);
+    };
+  }, []);
+  const [c, d] = m.useState(() => r && Array.isArray(r) ? N(new Date(r[0])) : r ? N(new Date(r)) : N(S)), z = () => y === "day" ? O(S, r) ? "Today" : o(r, "dd MMM") : o(r[0], "dd MMM") + "–" + o(r[1], "dd MMM"), q = () => {
+    const t = E(h, { months: -1 });
+    d(o(t, "MMM-yyyy"));
+  }, J = () => {
+    const t = E(h, { months: 1 });
+    d(o(t, "MMM-yyyy"));
+  }, C = ["S", "M", "T", "W", "T", "F", "S"], K = C.slice(s).concat(C.slice(0, s)), Q = () => /* @__PURE__ */ M("div", { className: "flex items-center w-full justify-between h-[3rem]", children: [
+    /* @__PURE__ */ n(
+      g,
+      {
+        disabled: !1,
+        handleClick: q,
+        icon: "ChevronLeftSmall",
+        color: "active",
+        button: !0,
+        id: "prev-month"
+      }
+    ),
+    /* @__PURE__ */ n(
+      p,
+      {
+        swStyle: 1,
+        color: "active",
+        children: `${lt(c)}`,
+        className: "min-w-[2rem] text-center"
+      }
+    ),
+    /* @__PURE__ */ n(
+      g,
+      {
+        disabled: !1,
+        handleClick: J,
+        icon: "ChevronRightSmall",
+        color: "active",
+        button: !0,
+        id: "next-month"
+      }
+    )
+  ] }), U = () => /* @__PURE__ */ n("div", { className: "flex justify-center items-center gap-[1rem] bg-[#e7e7e7] rounded-[0.5rem] w-full h-[2rem]", children: K.map((t, e) => /* @__PURE__ */ n(
+    p,
+    {
+      swStyle: 1,
+      color: e === 0 || e === 6 ? "subdued" : "default",
+      children: t,
+      className: "min-w-[2rem] text-center"
+    },
+    t + e
+  )) }), h = dt(c, "MMM-yyyy", /* @__PURE__ */ new Date()), j = k({
+    start: h,
+    end: v(h)
+  }), V = (h.getDay() - s + 7) % 7;
+  j.unshift(...new Array(V).fill(null));
+  const X = () => {
+    const t = f(r, -1);
+    d(o(t, "MMM-yyyy")), l(t);
+  }, Z = () => {
+    const t = f(r, 1);
+    d(o(t, "MMM-yyyy")), l(t);
+  }, A = () => /* @__PURE__ */ n("div", { className: "flex flex-row flex-wrap gap-md justify-start items-start", children: j.map((t, e) => t === null ? /* @__PURE__ */ n("div", { className: "w-[2rem] h-[2rem]" }, `null-${e}`) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: x(
+        "cursor-pointer rounded w-[2rem] h-[2rem] hover:bg-surface-active",
+        w(t) && "border border-bcolor-subdued rounded",
+        O(new Date(t), r) && "bg-surface-active border-bcolor-active"
+      ),
+      onClick: () => l(t),
+      children: /* @__PURE__ */ n(
+        p,
+        {
+          swStyle: 1,
+          color: O(t, r) ? "active" : "default",
+          children: t.getDate(),
+          className: "min-w-[2rem] text-center"
+        }
+      )
+    },
+    t.getDate()
+  )) }), [T, B] = m.useState(), tt = () => {
+    const t = f(r[0], 7), e = f(r[1], 7);
+    d(o(t, "MMM-yyyy")), l([t, e]);
+  }, et = () => {
+    const t = f(r[0], -7), e = f(r[1], -7);
+    d(o(t, "MMM-yyyy")), l([t, e]);
+  };
+  function rt(t) {
+    const e = mt(u(t)), i = v(u(t));
+    return ft(
+      {
+        start: e,
+        end: i
+      },
+      { weekStartsOn: s }
+    ).map((b) => k({
+      start: Mt(b, { weekStartsOn: s }),
+      end: ht(b, { weekStartsOn: s })
+    }));
+  }
+  const nt = rt(c), R = (t) => {
+    const e = 0.07142857142857142;
+    if (t[t.length - 1].getMonth() > u(c).getMonth() || t[t.length - 1].getFullYear() > u(c).getFullYear()) {
+      const L = v(t[0]).getDay() - s, at = (L / t.length + e) * 100, ot = ((L + 1) / t.length + e) * 100;
+      return `linear-gradient(to right, ${a.active} 0%, ${a.active} ${at}%, ${a.default} ${ot}%, ${a.default} 100%)`;
+    }
+    if (t[0].getMonth() === u(c).getMonth())
+      return a.active;
+    const i = v(t[0]).getDay() - s, I = (i / t.length + e) * 100, G = ((i + 1) / t.length + e) * 100;
+    return `linear-gradient(to right, ${a.default} 0%, ${a.default} ${I}%, ${a.active} ${G}%, ${a.active} 100%)`;
+  }, st = () => /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: nt.map((t) => /* @__PURE__ */ n(
+    "div",
+    {
+      className: x(
+        "flex gap-md justify-start items-start",
+        "cursor-pointer rounded "
+      ),
+      style: D(t[0], r[0]) ? {
+        background: R(t)
+        //render bg for selected week
+      } : T && D(t[0], T[0]) ? {
+        background: R(t)
+        // render bg for hovered week
+      } : {},
+      onMouseEnter: () => B(t),
+      onMouseLeave: () => B(void 0),
+      onClick: () => l([t[0], t[t.length - 1]]),
+      children: t.map((e) => Y(c, e) ? /* @__PURE__ */ n(
+        "div",
+        {
+          className: x(
+            "cursor-pointer rounded w-[2rem] h-[2rem]",
+            w(e) && "border border-bcolor-subdued rounded",
+            D(e, r[0]) && "border-bcolor-active"
+          ),
+          children: /* @__PURE__ */ n(
+            p,
+            {
+              swStyle: 1,
+              color: D(e, r[0], s) ? "active" : "default",
+              children: Y(c, e) ? e.getDate() : "",
+              className: "min-w-[2rem] text-center"
+            }
+          )
+        },
+        e.getDate()
+      ) : /* @__PURE__ */ n("div", { className: "w-[2rem] h-[2rem]" }, e.getDate()))
+    },
+    `week-${ut(t[0])}`
+  )) });
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      ref: $,
+      className: "inline-flex items-center justify-center gap-md min-h-[3rem] ",
+      children: [
+        /* @__PURE__ */ n(
+          g,
+          {
+            disabled: !1,
+            handleClick: () => y === "day" ? X() : et(),
+            icon: "ChevronLeftSmall",
+            color: "active",
+            button: !0,
+            id: "prev-period"
+          }
+        ),
+        /* @__PURE__ */ M("div", { className: "relative", id: "custom", ref: F, children: [
+          /* @__PURE__ */ n(
+            ct,
+            {
+              autoFocus: P,
+              "data-testid": "date-selected",
+              size: "small",
+              variant: "tertiary",
+              color: "affirmative",
+              text: z(),
+              onClick: _
+            }
+          ),
+          H && /* @__PURE__ */ n(
+            "div",
+            {
+              className: `absolute top-[3rem] z-[25] right-0 bg-surface-default ${it.active} p-md`,
+              children: /* @__PURE__ */ M("div", { className: "flex flex-col justify-center items-center gap-md", children: [
+                Q(),
+                U(),
+                /* @__PURE__ */ n("div", { className: "flex flex-col gap-md", children: y === "day" ? A() : st() })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          g,
+          {
+            disabled: !1,
+            handleClick: () => y === "day" ? Z() : tt(),
+            icon: "ChevronRightSmall",
+            color: "active",
+            button: !0,
+            id: "next-period"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Gt as DateSelector
+};

package/dist/components/molecules/filter/date-selector/index.d.ts

@@ -0,0 +1,2 @@
+export { DateSelector } from './date-selector';
+export type { DateSelectorProps } from './date-selector';

package/dist/components/molecules/filter/date-selector/index.js

@@ -0,0 +1,4 @@
+import { DateSelector as r } from "./date-selector.js";
+export {
+  r as DateSelector
+};

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { IconsProps } from '../../../atoms/icons';
+import { GlyphColor } from '../../../styles/colors';
+
+export type DropdownFilterOption = {
+    label: string;
+    value: string;
+    color?: GlyphColor;
+    badgeText?: string;
+    icon?: IconsProps;
+    hide?: boolean;
+    hasTopBorder?: boolean;
+};
+export type DropdownFilterProps = {
+    options: DropdownFilterOption[];
+    onChange: React.Dispatch<React.SetStateAction<string | string[]>>;
+    value: string | string[];
+    placeholder?: string;
+    multiselect?: boolean;
+    disabled?: boolean;
+    minWidth?: string | number;
+};
+export declare const DropdownFilter: ({ onChange, value, placeholder, options, multiselect, disabled, minWidth, }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.js

@@ -0,0 +1,172 @@
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import { useRef as R, useState as V } from "react";
+import { R as P, T as $, I as F, P as K, C as z, V as L, a as M } from "../../../../index-CnWyMXBX.js";
+import { c as U } from "../../../../index-fN7hCOo3.js";
+import { outlinedBorder as N, border as W } from "../../../styles/defaults/defaults.js";
+import { Typography as g } from "../../../styles/typography/typography.js";
+import { filterDropdownStyles as Z, contentStyles as q } from "./styles.js";
+import { Badge as S } from "../../../atoms/badge/badge.js";
+import { Icons as k } from "../../../atoms/icons/icons.js";
+import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { CheckboxFilter as G } from "../checkbox/checkbox.js";
+import { t as A } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { getBorderClasses as H } from "../../../atoms/form/utils-for-forms/state-functions.js";
+import { useStickyZIndex as J } from "../../../../hooks/use-sticky-z-index.js";
+const fe = ({
+  onChange: y,
+  value: o,
+  placeholder: C = "Select value",
+  options: f,
+  multiselect: t = !1,
+  disabled: a = !1,
+  minWidth: D
+}) => {
+  const x = R(null), O = J(x), [c, i] = V(!1), v = H(c, !1, !1, a), I = a ? `bg-surface-disabled ${N.disabled}` : "bg-surface-default", u = Array.isArray(o) ? o.length - 1 : 0;
+  function w(e) {
+    return Array.isArray(e) && typeof e[0] == "object" && e[0] !== null && "label" in e[0] && "value" in e[0];
+  }
+  const b = (e, r) => {
+    if (Array.isArray(r)) {
+      if (!r.length) return "";
+      if (w(e)) {
+        const l = e.find((p) => p.value === r[0]);
+        return l ? l.label : "";
+      }
+      return r[0];
+    } else {
+      if (w(e)) {
+        const l = e.find((p) => p.value === r);
+        return l ? l.label : "";
+      }
+      return r;
+    }
+  }, d = (e) => typeof e == "string" ? e : e.value, B = (e) => typeof e == "string" ? e : e.label, m = (e) => {
+    if (t) {
+      let r = [];
+      Array.isArray(o) && o.includes(e) ? r = [...o.filter((l) => l !== e)] : r = [...o, e], y(r);
+    } else
+      y(e);
+  }, h = f.filter((e) => !e.hide), T = (e, r) => {
+    e.key === "Enter" && m(r);
+  }, j = (e) => {
+    e.key === "Escape" && i(!1);
+  }, E = () => {
+    i(!1);
+  };
+  return /* @__PURE__ */ s("div", { className: "w-full", children: /* @__PURE__ */ n(
+    P,
+    {
+      value: b(f, o),
+      onValueChange: (e) => !t && m(e),
+      open: c,
+      onOpenChange: (e) => {
+        t && !c && i(e), !t && i(e);
+      },
+      disabled: a,
+      children: [
+        /* @__PURE__ */ n(
+          $,
+          {
+            className: A(Z, I, v),
+            ref: x,
+            style: { height: "3rem", padding: "0.75rem", minWidth: D },
+            children: [
+              o && o.length !== 0 ? /* @__PURE__ */ n("div", { className: "min-w-0 flex gap-xxs items-center", children: [
+                /* @__PURE__ */ s(
+                  g,
+                  {
+                    swStyle: 1,
+                    children: b(f, o),
+                    className: "whitespace-nowrap overflow-hidden text-ellipsis",
+                    color: a ? "disabled" : "default"
+                  }
+                ),
+                t && u > 0 && /* @__PURE__ */ s(S, { text: "+" + u, color: "affirmative" })
+              ] }) : /* @__PURE__ */ s(
+                g,
+                {
+                  swStyle: 1,
+                  children: C,
+                  color: a ? "disabled" : "default",
+                  className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                }
+              ),
+              /* @__PURE__ */ s(F, { className: "flex-shrink-0", children: /* @__PURE__ */ s(
+                k,
+                {
+                  id: "dropdown-icon",
+                  disabled: !0,
+                  color: a ? "disabled" : c ? "active" : "default",
+                  icon: c ? "ChevronUpSmall" : "ChevronDownSmall"
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(
+          z,
+          {
+            className: U(
+              q,
+              "max-h-[27.3rem]",
+              // to fit 9 items in timesheet filter (with border width)
+              c ? N.active : W.default
+            ),
+            position: "popper",
+            side: "bottom",
+            onPointerDownOutside: E,
+            onKeyDown: j,
+            style: { minWidth: "auto", zIndex: O },
+            children: /* @__PURE__ */ s(L, { children: h == null ? void 0 : h.map((e, r) => /* @__PURE__ */ s(
+              M,
+              {
+                className: A(
+                  "flex flex-row items-center gap-xs py-sm  cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none",
+                  e.hasTopBorder && "border-t border-e-bcolor-subdued",
+                  t ? "pr-xs" : "px-md"
+                ),
+                value: d(e),
+                onClick: () => t && m(d(e)),
+                onKeyDown: (l) => T(l, d(e)),
+                style: { height: "3rem" },
+                children: /* @__PURE__ */ n("div", { className: "flex items-center", style: { height: "100%" }, children: [
+                  t && /* @__PURE__ */ s(
+                    G,
+                    {
+                      "data-testid": `checkbox-${r}`,
+                      checked: o ? o.includes(d(e)) : !1
+                    }
+                  ),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-xxs", children: [
+                    e.icon && /* @__PURE__ */ s(k, { ...e.icon, color: e.color ? e.color : "default" }),
+                    !e.icon && e.badgeText && /* @__PURE__ */ s(
+                      S,
+                      {
+                        text: e.badgeText,
+                        color: e.color ? e.color : "default"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      g,
+                      {
+                        swStyle: 1,
+                        children: B(e),
+                        color: e.color ? e.color : "default",
+                        className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              `dropdown-option-${r}`
+            )) })
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+export {
+  fe as DropdownFilter
+};

package/dist/components/molecules/filter/dropdown-selector/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownFilter } from './dropdown-selector';
+export type { DropdownFilterProps, DropdownFilterOption, } from './dropdown-selector';

package/dist/components/molecules/filter/dropdown-selector/index.js

@@ -0,0 +1,4 @@
+import { DropdownFilter as e } from "./dropdown-selector.js";
+export {
+  e as DropdownFilter
+};

package/dist/components/molecules/filter/dropdown-selector/styles.d.ts

@@ -0,0 +1,13 @@
+import { BadgeColorVariants } from '../../../atoms/badge/badge';
+
+export declare const triggerStyles: string;
+export declare const filterDropdownStyles: string;
+export declare const contentStyles: string;
+export declare const itemStyles = "flex flex-row items-center gap-xs py-sm px-md 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";
+type BadgeStyleMap = {
+    [key: string]: BadgeColorVariants;
+};
+export declare const badgeStyleMap: BadgeStyleMap;
+export {};

package/dist/components/molecules/filter/dropdown-selector/styles.js

@@ -0,0 +1,22 @@
+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(
+  "px-md h-[4rem] w-auto flex flex-row justify-between items-center gap-xs"
+), n = 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 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", c = "flex items-center gap-xs self-stretch", a = {
+  default: "affirmative",
+  warning: "warning",
+  error: "alert",
+  disabled: "disabled"
+};
+export {
+  a as badgeStyleMap,
+  n as contentStyles,
+  s as filterDropdownStyles,
+  c as hintStyles,
+  o as itemStyles,
+  l as scrollButtonStyles,
+  r as triggerStyles
+};

package/dist/components/molecules/filter/range-selector/RangeSelector.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RangeSelector } from './';
+
+declare const meta: Meta<typeof RangeSelector>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/molecules/filter/range-selector/RangeSelector.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { RangeSelector as r } from "./range-selector.js";
+const a = {
+  title: "@spotwork-ui/RangeSelector",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, c = {
+  args: {}
+};
+export {
+  c as Primary,
+  a as default
+};

package/dist/components/molecules/filter/range-selector/index.d.ts

@@ -0,0 +1,2 @@
+export { RangeSelector } from './range-selector';
+export type { RangeSelectorProps } from './range-selector';

package/dist/components/molecules/filter/range-selector/index.js

@@ -0,0 +1,4 @@
+import { RangeSelector as r } from "./range-selector.js";
+export {
+  r as RangeSelector
+};

package/dist/components/molecules/filter/range-selector/range-selector.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+export type RangeSelectorProps = {
+    /**
+     * Range for the max and min values of the selector
+     */
+    range: [number, number];
+    /**
+     * optional: step between each value
+     */
+    step?: number;
+    /**
+     * default value
+     */
+    defaultValue: [number, number];
+    /**
+     * optional: the handle change for when the slider is moved or an input is entered
+     */
+    handleChange?: React.Dispatch<React.SetStateAction<[number, number]>>;
+    /**
+     * selected min and max values
+     */
+    value: [number, number];
+    /**
+     * Label for the display text beside the badge
+     */
+    label: string;
+    /**
+     * optional: disabled state
+     */
+    disabled?: boolean;
+};
+export declare function RangeSelector({ range, step, defaultValue, value, label, disabled, handleChange, }: RangeSelectorProps): import("react/jsx-runtime").JSX.Element;