@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,197 @@
+import { jsx as f, jsxs as N } from "react/jsx-runtime";
+import { useRef as T, useCallback as a, useState as S, useEffect as O, useMemo as ee } from "react";
+import { t as j } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Textfield as te } from "../textfield/textfield.js";
+import { Icons as re } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as A } from "../../../styles/typography/typography.js";
+import { outlinedBorder as oe } from "../../../styles/defaults/defaults.js";
+const h = {
+  outDiv: "relative flex gap-md w-full",
+  dropdown: `flex flex-col items-start max-h-[24rem] min-h-[4rem] w-full overflow-x-hidden absolute ${oe.active} bg-surface-default z-50 overflow-y-auto`,
+  itemContainer: "w-full gap-md flex items-center border-b border-bcolor-subdued hover:cursor-pointer py-[0.75rem] px-[1rem] first:rounded-t last:rounded-b",
+  addValue: "flex flex-row items-center gap-xs self-stretch py-[0.75rem] px-[1rem] w-[full] h-[4rem] cursor-pointer"
+};
+function pe({
+  error: C = !1,
+  warning: F = !1,
+  helperText: H,
+  label: M,
+  placeholder: K = "",
+  disabled: R = !1,
+  options: d = [],
+  value: r,
+  selectValue: o,
+  onChange: s,
+  addValue: y,
+  inputRef: $,
+  onBlur: c,
+  autoFocus: z,
+  notFoundText: G = "No results found",
+  renderOption: k,
+  loadingIcon: q,
+  noFilter: J = !1,
+  addValueLabel: P = "Add value",
+  preventBrowserSuggestions: Q = !1
+}) {
+  const I = T(null), U = T(null), w = $ || U, W = a(() => {
+    var e;
+    return r && ((e = d.find((t) => t.value === r)) == null ? void 0 : e.label) || "";
+  }, [r, d]), [m, b] = S(!1), [i, p] = S(W()), [u, l] = S(-1);
+  O(() => {
+    const e = d.find((t) => t.value === r);
+    r && d.length > 0 && e && i === "" && (p(e.label), s == null || s(e.label));
+  }, [r, d, i, s]);
+  const n = ee(() => {
+    if (!i.trim() || J) return d;
+    const e = i.toLowerCase();
+    return [...d].filter((t) => t.label.toLowerCase().includes(e)).sort((t, E) => t.label.toLowerCase().localeCompare(E.label.toLowerCase()));
+  }, [d, i]), X = a(
+    (e) => {
+      p(e), s == null || s(e), b(!0), l(-1), e || o == null || o("");
+    },
+    [s, o, r]
+  ), x = a(
+    (e) => {
+      o == null || o(e.value), p(e.label), b(!1), l(-1), c == null || c();
+    },
+    [o, c]
+  ), Y = a(() => {
+    var e;
+    p(""), b(!0), o == null || o(""), l(-1), s == null || s(""), (e = w == null ? void 0 : w.current) == null || e.focus();
+  }, [w, o, s]), Z = a(() => {
+    b(!0), l(-1);
+  }, []), v = a(() => {
+    if (b(!1), l(-1), r) {
+      const e = d.find((t) => t.value === r);
+      p(e ? e.label : "");
+    } else
+      p("");
+    c == null || c();
+  }, [c, r, d]), g = a(
+    (e) => {
+      if (!(!m || !n.length))
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), l((t) => t < n.length - 1 ? t + 1 : 0);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), l((t) => t > 0 ? t - 1 : n.length - 1);
+            break;
+          case "Enter":
+            e.preventDefault(), u >= 0 && u < n.length && x(n[u]);
+            break;
+          case "Escape":
+            e.preventDefault(), v();
+            break;
+        }
+    },
+    [m, n, u, x, v]
+  ), D = a(
+    (e) => {
+      I.current && !I.current.contains(e.target) && v();
+    },
+    [v]
+  );
+  O(() => {
+    if (m)
+      return document.addEventListener("mousedown", D, { passive: !0 }), document.addEventListener("keydown", g), () => {
+        document.removeEventListener("mousedown", D), document.removeEventListener("keydown", g);
+      };
+  }, [m, D, g]), O(() => {
+    l(-1);
+  }, [n]);
+  const _ = i ? "Cross" : "MagnifyingGlass", B = a(
+    (e, t) => {
+      const E = t === u, L = e.value === r, V = k ? k(e) : /* @__PURE__ */ f(A, { swStyle: 5, children: e.label, color: "default" });
+      return /* @__PURE__ */ f(
+        "div",
+        {
+          "data-testid": `dropdown-search-${e.value}`,
+          onClick: () => x(e),
+          onMouseEnter: () => l(t),
+          className: j(
+            h.itemContainer,
+            L ? "bg-surface-active" : "bg-white",
+            E && !L ? "bg-gray-50" : ""
+          ),
+          role: "option",
+          "aria-selected": L,
+          children: V
+        },
+        e.value
+      );
+    },
+    [u, r, k, x]
+  );
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      className: "flex flex-col w-full relative",
+      onFocus: Z,
+      ref: I,
+      role: "combobox",
+      "aria-expanded": m,
+      "aria-haspopup": "listbox",
+      children: [
+        /* @__PURE__ */ f("div", { className: h.outDiv, children: /* @__PURE__ */ f(
+          te,
+          {
+            ref: w,
+            autoFocus: z,
+            fieldType: "text",
+            placeholder: K,
+            value: i,
+            endIcon: {
+              icon: _,
+              handleClick: Y
+            },
+            onChange: X,
+            label: M,
+            helperText: H,
+            error: C,
+            warning: F,
+            disabled: R,
+            externalActive: m,
+            loadingIcon: q,
+            "aria-autocomplete": "list",
+            "aria-controls": "dropdown-options",
+            preventBrowserSuggestions: Q
+          }
+        ) }),
+        m && /* @__PURE__ */ N(
+          "div",
+          {
+            id: "dropdown-options",
+            "data-testid": "dropdown-search-dropdown",
+            className: j(h.dropdown, M ? "top-[6.8rem]" : "top-[4.5rem]"),
+            role: "listbox",
+            children: [
+              n.length > 0 ? n.map(B) : /* @__PURE__ */ f("div", { className: h.itemContainer, role: "option", children: /* @__PURE__ */ f(A, { swStyle: 5, color: "default", children: G }) }),
+              y && /* @__PURE__ */ N(
+                "div",
+                {
+                  className: h.addValue,
+                  onClick: () => y(i),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(i));
+                  },
+                  children: [
+                    /* @__PURE__ */ f(re, { disabled: !0, id: "addvalue", color: "active", icon: "Add" }),
+                    /* @__PURE__ */ f(A, { children: P, swStyle: 5, color: "active" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  pe as DropdownSearch
+};

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropdownSearch } from './dropdown-search';
+
+declare const meta: Meta<typeof DropdownSearch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithHelperText: Story;
+export declare const ErrorState: Story;
+export declare const WarningState: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const EmptyState: Story;
+export declare const Controlled: Story;
+export declare const ControlledWithExternalState: Story;
+export declare const WithAddValue: Story;
+export declare const CustomRenderOption: Story;
+export declare const LargeDataset: Story;
+export declare const AutoFocus: Story;
+export declare const CustomNotFoundText: Story;
+export declare const WithPreselectedValue: Story;
+export declare const KeyboardNavigation: Story;
+export declare const Accessibility: Story;

package/dist/components/atoms/form/dropdown-search/dropdown-search.stories.js

@@ -0,0 +1,362 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { f as b } from "../../../../index-DfdAzObv.js";
+import { useState as u } from "react";
+import { DropdownSearch as c } from "./dropdown-search.js";
+import { Typography as p } from "../../../styles/typography/typography.js";
+import { Icons as h } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+const t = [
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+  { label: "Cherry", value: "cherry" },
+  { label: "Date", value: "date" },
+  { label: "Elderberry", value: "elderberry" },
+  { label: "Fig", value: "fig" },
+  { label: "Grape", value: "grape" },
+  { label: "Honeydew", value: "honeydew" }
+], g = [
+  { label: "Canada", value: "CA" },
+  { label: "United States", value: "US" },
+  { label: "United Kingdom", value: "UK" },
+  { label: "Germany", value: "DE" },
+  { label: "France", value: "FR" },
+  { label: "Spain", value: "ES" },
+  { label: "Italy", value: "IT" },
+  { label: "Japan", value: "JP" },
+  { label: "Australia", value: "AU" },
+  { label: "Brazil", value: "BR" }
+], m = (e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ o(h, { icon: "Building" }),
+  /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ o(p, { swStyle: 5, color: "default", children: e.label }),
+    /* @__PURE__ */ l(p, { swStyle: 6, color: "subdued", children: [
+      "Code: ",
+      e.value
+    ] })
+  ] })
+] }), d = (e) => {
+  var r, s;
+  const [a, n] = u(e.value || "");
+  return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ o(
+      c,
+      {
+        ...e,
+        value: a,
+        onChange: e.onChange,
+        selectValue: n
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
+      /* @__PURE__ */ l("p", { children: [
+        "External value: ",
+        /* @__PURE__ */ o("strong", { children: a || "none" })
+      ] }),
+      /* @__PURE__ */ l("p", { children: [
+        "Selected option: ",
+        /* @__PURE__ */ o("strong", { children: a ? ((s = (r = e.options) == null ? void 0 : r.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
+      ] })
+    ] })
+  ] });
+}, A = {
+  title: "@spotwork-ui/atoms/form/DropdownSearch",
+  component: c,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "A searchable dropdown component with keyboard navigation, accessibility features, and customizable rendering options."
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    error: {
+      control: "boolean",
+      description: "Trigger error state"
+    },
+    warning: {
+      control: "boolean",
+      description: "Trigger warning state"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable input field"
+    },
+    autoFocus: {
+      control: "boolean",
+      description: "Auto focus the input field"
+    },
+    isLoading: {
+      control: "boolean",
+      description: "Show loading icon"
+    },
+    label: {
+      control: "text",
+      description: "A label to be displayed above the input field"
+    },
+    placeholder: {
+      control: "text",
+      description: "A placeholder to be displayed in the input field"
+    },
+    helperText: {
+      control: "text",
+      description: "Display helper text"
+    },
+    notFoundText: {
+      control: "text",
+      description: "Text to show when no results are found"
+    },
+    value: {
+      control: "text",
+      description: "Set value for controlled components"
+    },
+    options: {
+      control: "object",
+      description: "An Array of options"
+    },
+    onChange: {
+      action: "changed",
+      description: "Function called when the input field changes"
+    },
+    selectValue: {
+      action: "selected",
+      description: "Function called when an option is selected"
+    },
+    addValue: {
+      action: "add value",
+      description: "Function called when add value button is clicked"
+    },
+    onBlur: {
+      action: "blurred",
+      description: "Function called when the input loses focus"
+    }
+  },
+  args: {
+    placeholder: "Search options...",
+    notFoundText: "No results found"
+  }
+}, F = {
+  args: {
+    options: t,
+    label: "Select a fruit"
+  }
+}, N = {
+  args: {
+    options: t,
+    label: "Choose your favorite fruit",
+    placeholder: "Type to search fruits..."
+  }
+}, E = {
+  args: {
+    options: t,
+    label: "Fruit Selection",
+    helperText: "Select a fruit from the dropdown or search for one",
+    placeholder: "Search fruits..."
+  }
+}, k = {
+  args: {
+    options: t,
+    label: "Fruit Selection",
+    error: !0,
+    helperText: "Please select a valid fruit",
+    placeholder: "Search fruits..."
+  }
+}, D = {
+  args: {
+    options: t,
+    label: "Fruit Selection",
+    warning: !0,
+    helperText: "Consider selecting a seasonal fruit",
+    placeholder: "Search fruits..."
+  }
+}, V = {
+  args: {
+    options: t,
+    label: "Fruit Selection",
+    disabled: !0,
+    value: "apple",
+    placeholder: "Search fruits..."
+  }
+}, U = {
+  args: {
+    options: t,
+    label: "Loading Options",
+    isLoading: !0,
+    loadingIcon: /* @__PURE__ */ o(h, { icon: "Clock" }),
+    placeholder: "Loading..."
+  }
+}, L = {
+  args: {
+    options: [],
+    label: "No Options",
+    placeholder: "No options available",
+    notFoundText: "No options match your search"
+  }
+}, O = {
+  render: (e) => /* @__PURE__ */ o(d, { ...e }),
+  args: {
+    options: t,
+    label: "Controlled Dropdown",
+    placeholder: "Type to search..."
+  }
+}, I = {
+  render: (e) => {
+    var r, s;
+    const [a, n] = u("banana");
+    return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => n("apple"),
+            className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
+            children: "Set to Apple"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => n("cherry"),
+            className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
+            children: "Set to Cherry"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => n(""),
+            className: "px-3 py-1 bg-red-500 text-white rounded text-sm",
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(
+        c,
+        {
+          ...e,
+          value: a,
+          selectValue: n
+        }
+      ),
+      /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
+        /* @__PURE__ */ l("p", { children: [
+          "External value: ",
+          /* @__PURE__ */ o("strong", { children: a || "none" })
+        ] }),
+        /* @__PURE__ */ l("p", { children: [
+          "Selected option: ",
+          /* @__PURE__ */ o("strong", { children: a ? ((s = (r = e.options) == null ? void 0 : r.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
+        ] })
+      ] })
+    ] });
+  },
+  args: {
+    options: t,
+    label: "External State Control",
+    placeholder: "Type to search or use buttons above..."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This story demonstrates that the component properly handles external state changes. Use the buttons above to change the external value and see that the input field updates correctly."
+      }
+    }
+  }
+}, R = {
+  render: (e) => /* @__PURE__ */ o(d, { ...e }),
+  args: {
+    options: t,
+    label: "Add Custom Value",
+    placeholder: "Search or add new value...",
+    addValue: b()
+  }
+}, W = {
+  args: {
+    options: g,
+    label: "Select Country",
+    placeholder: "Search countries...",
+    renderOption: m
+  }
+}, B = {
+  args: {
+    options: Array.from({ length: 100 }, (e, a) => ({
+      label: `Option ${a + 1}`,
+      value: `option-${a + 1}`
+    })),
+    label: "Large Dataset",
+    placeholder: "Search through 100 options..."
+  }
+}, K = {
+  args: {
+    options: t,
+    label: "Auto Focus",
+    autoFocus: !0,
+    placeholder: "This field is auto-focused"
+  }
+}, P = {
+  args: {
+    options: [],
+    label: "Custom Not Found",
+    placeholder: "Search for something...",
+    notFoundText: "Sorry, we couldn't find what you're looking for. Try a different search term."
+  }
+}, j = {
+  args: {
+    options: t,
+    label: "Preselected Value",
+    value: "banana",
+    placeholder: "Search fruits..."
+  }
+}, z = {
+  render: (e) => /* @__PURE__ */ o(d, { ...e }),
+  args: {
+    options: t,
+    label: "Try Keyboard Navigation",
+    placeholder: "Use arrow keys, Enter, and Escape",
+    helperText: "Use ↑↓ arrows to navigate, Enter to select, Escape to close"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This story demonstrates keyboard navigation. Use arrow keys to navigate through options, Enter to select, and Escape to close the dropdown."
+      }
+    }
+  }
+}, G = {
+  args: {
+    options: t,
+    label: "Accessible Dropdown",
+    placeholder: "Search with screen reader support",
+    helperText: "This component includes proper ARIA attributes and keyboard navigation"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This component includes comprehensive accessibility features including ARIA attributes, keyboard navigation, and screen reader support."
+      }
+    }
+  }
+};
+export {
+  G as Accessibility,
+  K as AutoFocus,
+  O as Controlled,
+  I as ControlledWithExternalState,
+  P as CustomNotFoundText,
+  W as CustomRenderOption,
+  F as Default,
+  V as Disabled,
+  L as EmptyState,
+  k as ErrorState,
+  z as KeyboardNavigation,
+  B as LargeDataset,
+  U as Loading,
+  D as WarningState,
+  R as WithAddValue,
+  E as WithHelperText,
+  N as WithLabel,
+  j as WithPreselectedValue,
+  A as default
+};

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

@@ -0,0 +1,2 @@
+export { DropdownSearch } from './dropdown-search';
+export type { DropdownSearchProps, ExtendedDropdownSearchOption, BaseDropdownSearchOption } from './dropdown-search';

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

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

package/dist/components/atoms/form/form-helper-text/form-helper-text.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { GlyphColor } from '../../../styles/colors';
+
+export type FormHelperText = {
+    /**
+     * the variable for the hint string
+     */
+    helperText?: string | React.ReactNode;
+    /**
+     * error state for the component
+     */
+    error?: boolean;
+    /**
+     * warning state for the component
+     */
+    warning?: boolean;
+    /**
+     * GlyphColor for the icons and the text
+     */
+    helperTextAndIconColor?: GlyphColor;
+};
+export declare const FormHelperText: ({ helperText, error, warning, helperTextAndIconColor }: FormHelperText) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/form-helper-text/form-helper-text.js

@@ -0,0 +1,13 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import a from "react";
+import { Icons as l } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as c } from "../../../styles/typography/typography.js";
+const g = ({ helperText: t, error: r, warning: o, helperTextAndIconColor: m }) => /* @__PURE__ */ s("div", { className: "flex justify-start items-start gap-xs mt-xs", children: [
+  (r || o) && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(l, { disabled: !0, icon: r ? "AlertSmall" : "WarningSmall", color: m }) }),
+  typeof t == "string" && !a.isValidElement(t) ? /* @__PURE__ */ i(c, { children: t, swStyle: 1, color: m }) : t
+] });
+export {
+  g as FormHelperText
+};

package/dist/components/atoms/form/form-helper-text/index.d.ts

@@ -0,0 +1 @@
+export * from './form-helper-text';

package/dist/components/atoms/form/form-helper-text/index.js

@@ -0,0 +1,4 @@
+import { FormHelperText as o } from "./form-helper-text.js";
+export {
+  o as FormHelperText
+};

package/dist/components/atoms/form/form-types.d.ts

@@ -0,0 +1,4 @@
+export type LabelValuePair = {
+    value: string;
+    label: string;
+};

package/dist/components/atoms/form/form-types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+export { Multiselect } from './multiselect';
+export type { MultiselectProps } from './multiselect';

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

@@ -0,0 +1,4 @@
+import { Multiselect as l } from "./multiselect.js";
+export {
+  l as Multiselect
+};