@temp-spotwork/ui 1.7.6 → 1.7.8

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

@@ -6,6 +6,7 @@ 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";
+import { renderSpotterDropdownOption as g } from "../dropdown-item/dropdown-item.js";
 const t = [
   { label: "Apple", value: "apple" },
   { label: "Banana", value: "banana" },
@@ -15,7 +16,7 @@ const t = [
   { label: "Fig", value: "fig" },
   { label: "Grape", value: "grape" },
   { label: "Honeydew", value: "honeydew" }
-], g = [
+], m = [
   { label: "Canada", value: "CA" },
   { label: "United States", value: "US" },
   { label: "United Kingdom", value: "UK" },
@@ -26,7 +27,25 @@ const t = [
   { label: "Japan", value: "JP" },
   { label: "Australia", value: "AU" },
   { label: "Brazil", value: "BR" }
-], m = (e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+], v = [
+  {
+    label: "Sarah Johnson",
+    value: "spotter-1",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  {
+    label: "Michael Chen",
+    value: "spotter-2",
+    image: "https://i.pravatar.cc/150?u=spotter-2",
+    subtitle: "Vancouver, BC"
+  },
+  {
+    label: "Emily Rodriguez",
+    value: "spotter-3",
+    subtitle: "Calgary, AB"
+  }
+], y = (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 }),
@@ -36,8 +55,8 @@ const t = [
     ] })
   ] })
 ] }), d = (e) => {
-  var r, s;
-  const [a, n] = u(e.value || "");
+  var n, s;
+  const [a, r] = u(e.value || "");
   return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
     /* @__PURE__ */ o(
       c,
@@ -45,7 +64,7 @@ const t = [
         ...e,
         value: a,
         onChange: e.onChange,
-        selectValue: n
+        selectValue: r
       }
     ),
     /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
@@ -55,11 +74,11 @@ const t = [
       ] }),
       /* @__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" })
+        /* @__PURE__ */ o("strong", { children: a ? ((s = (n = e.options) == null ? void 0 : n.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
       ] })
     ] })
   ] });
-}, A = {
+}, E = {
   title: "@spotwork-ui/atoms/form/DropdownSearch",
   component: c,
   parameters: {
@@ -137,25 +156,25 @@ const t = [
     placeholder: "Search options...",
     notFoundText: "No results found"
   }
-}, F = {
+}, D = {
   args: {
     options: t,
     label: "Select a fruit"
   }
-}, N = {
+}, k = {
   args: {
     options: t,
     label: "Choose your favorite fruit",
     placeholder: "Type to search fruits..."
   }
-}, E = {
+}, V = {
   args: {
     options: t,
     label: "Fruit Selection",
     helperText: "Select a fruit from the dropdown or search for one",
     placeholder: "Search fruits..."
   }
-}, k = {
+}, O = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -163,7 +182,7 @@ const t = [
     helperText: "Please select a valid fruit",
     placeholder: "Search fruits..."
   }
-}, D = {
+}, U = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -171,7 +190,7 @@ const t = [
     helperText: "Consider selecting a seasonal fruit",
     placeholder: "Search fruits..."
   }
-}, V = {
+}, L = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -179,7 +198,7 @@ const t = [
     value: "apple",
     placeholder: "Search fruits..."
   }
-}, U = {
+}, B = {
   args: {
     options: t,
     label: "Loading Options",
@@ -187,30 +206,30 @@ const t = [
     loadingIcon: /* @__PURE__ */ o(h, { icon: "Clock" }),
     placeholder: "Loading..."
   }
-}, L = {
+}, R = {
   args: {
     options: [],
     label: "No Options",
     placeholder: "No options available",
     notFoundText: "No options match your search"
   }
-}, O = {
+}, I = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
     label: "Controlled Dropdown",
     placeholder: "Type to search..."
   }
-}, I = {
+}, W = {
   render: (e) => {
-    var r, s;
-    const [a, n] = u("banana");
+    var n, s;
+    const [a, r] = 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"),
+            onClick: () => r("apple"),
             className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
             children: "Set to Apple"
           }
@@ -218,7 +237,7 @@ const t = [
         /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => n("cherry"),
+            onClick: () => r("cherry"),
             className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
             children: "Set to Cherry"
           }
@@ -226,7 +245,7 @@ const t = [
         /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => n(""),
+            onClick: () => r(""),
             className: "px-3 py-1 bg-red-500 text-white rounded text-sm",
             children: "Clear"
           }
@@ -237,7 +256,7 @@ const t = [
         {
           ...e,
           value: a,
-          selectValue: n
+          selectValue: r
         }
       ),
       /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
@@ -247,7 +266,7 @@ const t = [
         ] }),
         /* @__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" })
+          /* @__PURE__ */ o("strong", { children: a ? ((s = (n = e.options) == null ? void 0 : n.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
         ] })
       ] })
     ] });
@@ -264,7 +283,7 @@ const t = [
       }
     }
   }
-}, R = {
+}, K = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
@@ -272,14 +291,21 @@ const t = [
     placeholder: "Search or add new value...",
     addValue: b()
   }
-}, W = {
+}, P = {
   args: {
-    options: g,
+    options: m,
     label: "Select Country",
     placeholder: "Search countries...",
-    renderOption: m
+    renderOption: y
   }
-}, B = {
+}, j = {
+  args: {
+    options: v,
+    label: "Search spotters",
+    placeholder: "Search by name...",
+    renderOption: g
+  }
+}, z = {
   args: {
     options: Array.from({ length: 100 }, (e, a) => ({
       label: `Option ${a + 1}`,
@@ -288,28 +314,28 @@ const t = [
     label: "Large Dataset",
     placeholder: "Search through 100 options..."
   }
-}, K = {
+}, J = {
   args: {
     options: t,
     label: "Auto Focus",
     autoFocus: !0,
     placeholder: "This field is auto-focused"
   }
-}, P = {
+}, G = {
   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 = {
+}, H = {
   args: {
     options: t,
     label: "Preselected Value",
     value: "banana",
     placeholder: "Search fruits..."
   }
-}, z = {
+}, $ = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
@@ -324,7 +350,7 @@ const t = [
       }
     }
   }
-}, G = {
+}, M = {
   args: {
     options: t,
     label: "Accessible Dropdown",
@@ -340,23 +366,24 @@ const t = [
   }
 };
 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
+  M as Accessibility,
+  J as AutoFocus,
+  I as Controlled,
+  W as ControlledWithExternalState,
+  G as CustomNotFoundText,
+  P as CustomRenderOption,
+  D as Default,
+  L as Disabled,
+  R as EmptyState,
+  O as ErrorState,
+  $ as KeyboardNavigation,
+  z as LargeDataset,
+  B as Loading,
+  j as SpotterSearch,
+  U as WarningState,
+  K as WithAddValue,
+  V as WithHelperText,
+  k as WithLabel,
+  H as WithPreselectedValue,
+  E as default
 };

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

@@ -79,5 +79,9 @@ export type TypeaheadProps = {
      * This prop added specially for Address Form Component when we render addresses from google API and don't need to filter them.
      */
     disableOptionsFiltering?: boolean;
+    /**
+     * Custom renderer for dropdown options.
+     */
+    renderOption?: (option: string | LabelValuePair) => React.ReactNode;
 };
-export declare function Typeahead({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, endIconClick, addValue, inputRef, onBlur, loadingIcon, autoFocus, expandOnFocus, notFoundText, disableOptionsFiltering, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+export declare function Typeahead({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, endIconClick, addValue, inputRef, onBlur, loadingIcon, autoFocus, expandOnFocus, notFoundText, disableOptionsFiltering, renderOption, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,69 +1,70 @@
 import { jsxs as b, jsx as a } from "react/jsx-runtime";
-import A, { useState as L, useEffect as R } from "react";
-import { t as D } from "../../../../bundle-mjs-BjFsLjkg.js";
-import { Textfield as C } from "../textfield/textfield.js";
-import { Icons as k } from "../../icons/icons.js";
+import A, { useState as L, useEffect as C } from "react";
+import { t as F } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { Textfield as k } from "../textfield/textfield.js";
+import { Icons as I } from "../../icons/icons.js";
 import "../../icons/iconsSVGs/Large/Profile.js";
 import "../../icons/iconsSVGs/Small/Profile.js";
 import { Typography as N } from "../../../styles/typography/typography.js";
-import { getStyles as I } from "./styles.js";
-function le({
-  error: F = !1,
-  warning: M = !1,
-  helperText: _,
+import { getStyles as V } from "./styles.js";
+function fe({
+  error: M = !1,
+  warning: _ = !1,
+  helperText: G,
   label: O,
-  placeholder: G = "",
-  disabled: $ = !1,
+  placeholder: $ = "",
+  disabled: q = !1,
   options: r,
   value: s,
   selectValue: m,
-  onChange: d,
-  endIconClick: c,
-  addValue: p,
+  onChange: c,
+  endIconClick: d,
+  addValue: E,
   inputRef: n,
   onBlur: l,
-  loadingIcon: q,
-  autoFocus: z,
-  expandOnFocus: E,
-  notFoundText: H = "No results found",
-  disableOptionsFiltering: J = !1
+  loadingIcon: z,
+  autoFocus: H,
+  expandOnFocus: j,
+  notFoundText: J = "No results found",
+  disableOptionsFiltering: K = !1,
+  renderOption: T
 }) {
-  const j = A.useRef(null), y = A.useRef(null), [g, h] = L(!1), [K, w] = L(!1), [T, u] = L(""), i = Array.isArray(r) && typeof r[0] == "object" && r[0] !== null && "label" in r[0] && "value" in r[0];
+  const p = A.useRef(null), y = A.useRef(null), [g, h] = L(!1), [P, w] = L(!1), [D, u] = L(""), f = Array.isArray(r) && typeof r[0] == "object" && r[0] !== null && "label" in r[0] && "value" in r[0];
   A.useEffect(() => {
     const e = (t) => {
-      const f = j.current;
-      f && t.target !== f && !f.contains(t.target) && g && (h(!1), w(!1), l == null || l());
+      const i = p.current;
+      i && t.target !== i && !i.contains(t.target) && g && (h(!1), w(!1), l == null || l());
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [g]), R(() => {
-    if (i && r && s) {
+  }, [g]), C(() => {
+    if (f && r && s) {
       const e = r.find(
         (t) => t.value === s
       );
       u(e.label);
     }
   }, [r]);
-  const x = (e) => typeof e == "string" ? e : e.value, v = (e) => typeof e == "string" ? e : e.label, P = (e) => x(e) === s, o = I(), Q = s !== "" && s !== void 0 ? "Cross" : "MagnifyingGlass", U = (e) => {
-    const t = (i ? T : s) ?? "";
+  const x = (e) => typeof e == "string" ? e : e.value, v = (e) => typeof e == "string" ? e : e.label, Q = (e) => x(e) === s, o = V(), U = s !== "" && s !== void 0 ? "Cross" : "MagnifyingGlass", W = (e) => {
+    const t = (f ? D : s) ?? "";
     return e.toLowerCase().includes(t.toLowerCase());
-  }, W = () => {
+  }, X = () => {
     var e, t;
-    i && u(""), c == null || c(), h(!0), (e = n == null ? void 0 : n.current) == null || e.focus(), (t = y == null ? void 0 : y.current) == null || t.focus();
-  }, X = (e) => {
-    if (m == null || m(e), i) {
+    f && u(""), d == null || d(), h(!0), (e = n == null ? void 0 : n.current) == null || e.focus(), (t = y == null ? void 0 : y.current) == null || t.focus();
+  }, Y = (e) => {
+    if (m == null || m(e), f) {
       const t = r.find(
-        (f) => typeof f != "string" && f.value === e
+        (i) => typeof i != "string" && i.value === e
       );
       t && u(t.label);
     }
     h(!1), w(!1), l == null || l();
-  }, Y = (e) => {
-    d == null || d(e), w(!!e);
   }, Z = (e) => {
-    u(e), d == null || d(e);
-  }, S = r == null ? void 0 : r.filter((e) => J ? !0 : U(v(e))).sort(
+    c == null || c(e), w(!!e);
+  }, R = (e) => {
+    u(e), c == null || c(e);
+  }, S = r == null ? void 0 : r.filter((e) => K ? !0 : W(v(e))).sort(
     (e, t) => v(e).toLowerCase().localeCompare(v(t).toLowerCase())
   );
   return /* @__PURE__ */ b(
@@ -71,37 +72,37 @@ function le({
     {
       className: "flex flex-col w-full relative",
       onFocus: () => {
-        E && w(!0), h(!0);
+        j && w(!0), h(!0);
       },
-      ref: j,
+      ref: p,
       children: [
         /* @__PURE__ */ a("div", { className: o.outDiv, children: /* @__PURE__ */ a(
-          C,
+          k,
           {
             ref: n ?? y,
-            autoFocus: z,
+            autoFocus: H,
             fieldType: "text",
-            placeholder: G,
-            value: i ? T : s,
+            placeholder: $,
+            value: f ? D : s,
             endIcon: {
-              icon: Q,
-              handleClick: W
+              icon: U,
+              handleClick: X
             },
-            onChange: (e) => i ? Z(e) : Y(e),
+            onChange: (e) => f ? R(e) : Z(e),
             label: O,
-            helperText: _,
-            error: F,
-            warning: M,
-            disabled: $,
+            helperText: G,
+            error: M,
+            warning: _,
+            disabled: q,
             externalActive: g,
-            loadingIcon: q
+            loadingIcon: z
           }
         ) }),
-        K && (s || E) && m && /* @__PURE__ */ b(
+        P && (s || j) && m && /* @__PURE__ */ b(
           "div",
           {
             "data-testid": "typeahead-dropdown",
-            className: D(
+            className: F(
               o.dropdown,
               O ? "top-[6.8rem]" : "top-[4.5rem]"
               // if label doesn't define the height of textfield is different
@@ -111,12 +112,12 @@ function le({
                 "div",
                 {
                   "data-testid": `typeahead-${e}`,
-                  onClick: () => X(x(e)),
-                  className: D(
+                  onClick: () => Y(x(e)),
+                  className: F(
                     o.itemContainer,
-                    P(e) ? "bg-surface-active" : "bg-white"
+                    Q(e) ? "bg-surface-active" : "bg-white"
                   ),
-                  children: /* @__PURE__ */ a(
+                  children: T ? T(e) : /* @__PURE__ */ a(
                     N,
                     {
                       swStyle: 5,
@@ -127,11 +128,11 @@ function le({
                 },
                 x(e)
               )) : /* @__PURE__ */ b("div", { className: o.itemContainer, children: [
-                /* @__PURE__ */ a(N, { swStyle: 5, color: "default", children: H }),
+                /* @__PURE__ */ a(N, { swStyle: 5, color: "default", children: J }),
                 " "
               ] }),
-              p && s && /* @__PURE__ */ b("div", { className: o.addValue, onClick: () => p(s), children: [
-                /* @__PURE__ */ a(k, { disabled: !0, id: "addvalue", color: "active", icon: "Add" }),
+              E && s && /* @__PURE__ */ b("div", { className: o.addValue, onClick: () => E(s), children: [
+                /* @__PURE__ */ a(I, { disabled: !0, id: "addvalue", color: "active", icon: "Add" }),
                 /* @__PURE__ */ a(N, { children: "Add value", swStyle: 5, color: "active" })
               ] })
             ]
@@ -142,5 +143,5 @@ function le({
   );
 }
 export {
-  le as Typeahead
+  fe as Typeahead
 };

package/dist/components/styles/colors/colormap.d.ts

@@ -93,6 +93,8 @@ export declare const glyph: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     disabled: string;
     disabledInverted: string;
     firstPartyMessage: string;
@@ -123,6 +125,8 @@ export declare const surface: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     badge: string;
     disabled: string;
     disabledInverted: string;

package/dist/components/styles/colors/colormap.js

@@ -87,12 +87,14 @@ const f = {
   warningInverted: d[100],
   alert: t[700],
   alertInverted: t[200],
+  paidBackup: "#8314DB",
+  paidBackupInverted: "#F3E6FF",
   disabled: e[500],
   disabledInverted: e[100],
   firstPartyMessage: e[0],
   secondPartyMessage: a[700],
   visualPlaceholderDefault: f[700]
-}, o = Object.keys(n), u = Object.entries(n).reduce((r, [s]) => (r[s] = `text-glyph-${s}`, r), {}), i = {
+}, u = Object.keys(n), o = Object.entries(n).reduce((r, [s]) => (r[s] = `text-glyph-${s}`, r), {}), i = {
   default: a[600],
   hover: a[700],
   active: a[800],
@@ -113,6 +115,8 @@ const f = {
   warningInverted: d[800],
   alert: t[200],
   alertInverted: t[700],
+  paidBackup: "#F3E6FF",
+  paidBackupInverted: "#8314DB",
   badge: t[500],
   disabled: e[100],
   disabledInverted: e[600],
@@ -120,7 +124,7 @@ const f = {
   visualPlaceholderDefault: f[100],
   firstPartyMessage: a[700],
   secondPartyMessage: a[200]
-}, b = Object.keys(n), h = Object.entries(n).reduce((r, [s]) => (r[s] = `bg-surface-${s}`, r), {}), g = {
+}, b = Object.keys(n), h = Object.entries(n).reduce((r, [s]) => (r[s] = `bg-surface-${s}`, r), {}), p = {
   none: "transparent",
   default: e[300],
   active: a[700],
@@ -133,12 +137,12 @@ const f = {
   disabled: e[200],
   outline: e[100],
   success: c[800]
-}, y = {
+}, g = {
   active: a[200],
   warning: d[100],
   destructive: t[100],
   alert: t[200]
-}, p = {
+}, y = {
   success: c[600],
   warning: d[400],
   caution: f[400],
@@ -197,7 +201,7 @@ const f = {
       default: d[800]
     }
   }
-}, w = {
+}, F = {
   primary: {
     disabled: e[100],
     affirmative: {
@@ -243,7 +247,7 @@ const f = {
       active: e[800]
     }
   }
-}, m = {
+}, w = {
   hue1: "#00BD3F",
   hue2: "#FFCE1B",
   hue3: "#FF7E33",
@@ -257,20 +261,20 @@ const f = {
 export {
   c as apple,
   a as blueRibbon,
-  g as borderColor,
+  p as borderColor,
   C as buttonBorder,
   I as buttonGlyph,
-  w as buttonSurface,
+  F as buttonSurface,
   t as cinnabar,
   f as crusta,
-  m as dataVizColors,
+  w as dataVizColors,
   n as glyph,
-  u as glyphClassesMap,
-  o as glyphColorsKeys,
+  o as glyphClassesMap,
+  u as glyphColorsKeys,
   v as linkColorClassesMap,
   i as linkColors,
-  p as progressBar,
-  y as shadow,
+  y as progressBar,
+  g as shadow,
   d as sun,
   l as surface,
   h as surfaceClassesMap,

package/dist/main.d.ts

@@ -23,6 +23,8 @@ export type { DropdownProps } from './components/atoms/form/dropdown';
 export { DropdownFilter } from './components/molecules/filter/dropdown-selector';
 export { DropdownSearch } from './components/atoms/form/dropdown-search';
 export type { DropdownSearchProps, ExtendedDropdownSearchOption, BaseDropdownSearchOption, } from './components/atoms/form/dropdown-search';
+export { DropdownItem, renderSpotterDropdownOption } from './components/atoms/form/dropdown-item';
+export type { DropdownItemProps, SpotterDropdownOption } from './components/atoms/form/dropdown-item';
 export { Calendar } from './components/atoms/form/calendar';
 export type { CalendarProps, CalendarDate } from './components/atoms/form/calendar';
 export type { DropdownFilterProps, DropdownFilterOption } from './components/molecules/filter/dropdown-selector';