@temp-spotwork/ui 1.7.7 → 1.7.8

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

@@ -0,0 +1,40 @@
+import { LabelValuePair } from '../form-types';
+
+export type SpotterDropdownOption = LabelValuePair & {
+    /**
+     * URL of the spotter profile image.
+     */
+    image?: string;
+    /**
+     * Optional secondary line (e.g. email, role, location).
+     */
+    subtitle?: string;
+};
+export type DropdownItemProps = {
+    /**
+     * Unique identifier for the avatar.
+     */
+    avatarId: string;
+    /**
+     * Spotter display name.
+     */
+    name: string;
+    /**
+     * URL of the spotter profile image.
+     */
+    image?: string;
+    /**
+     * Text abbreviation fallback when no image is provided.
+     */
+    textView?: string;
+    /**
+     * Optional secondary line displayed below the name.
+     */
+    subtitle?: string;
+    /**
+     * Optional classes for the container.
+     */
+    className?: string;
+};
+export declare function DropdownItem({ avatarId, name, image, textView, subtitle, className, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function renderSpotterDropdownOption(option: string | LabelValuePair | SpotterDropdownOption): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { t as c } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { Avatar as p } from "../../avatar/avatar.js";
+import { Typography as s } from "../../../styles/typography/typography.js";
+import { getStyles as u } from "./styles.js";
+function n({
+  avatarId: e,
+  name: t,
+  image: l,
+  textView: m,
+  subtitle: i,
+  className: d
+}) {
+  const a = u();
+  return /* @__PURE__ */ o("div", { className: c(a.container, d), "data-testid": "dropdown-item", children: [
+    /* @__PURE__ */ r(
+      p,
+      {
+        id: e,
+        variant: "circular",
+        image: l,
+        textView: m ?? t,
+        size: 3.5
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: a.textContainer, children: [
+      /* @__PURE__ */ r(s, { swStyle: 5, color: "default", className: a.name, children: t }),
+      i && /* @__PURE__ */ r(s, { swStyle: 6, color: "subdued", className: a.subtitle, children: i })
+    ] })
+  ] });
+}
+function h(e) {
+  if (typeof e == "string")
+    return /* @__PURE__ */ r(n, { avatarId: e, name: e });
+  const t = e;
+  return /* @__PURE__ */ r(
+    n,
+    {
+      avatarId: t.value,
+      name: t.label,
+      image: t.image,
+      subtitle: t.subtitle
+    }
+  );
+}
+export {
+  n as DropdownItem,
+  h as renderSpotterDropdownOption
+};

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropdownItem } from './dropdown-item';
+
+declare const meta: Meta<typeof DropdownItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutImage: Story;
+export declare const WithoutSubtitle: Story;
+export declare const WithDropdownSearch: Story;
+export declare const WithTypeahead: Story;

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

@@ -0,0 +1,109 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { DropdownItem as l, renderSpotterDropdownOption as a } from "./dropdown-item.js";
+import { DropdownSearch as p } from "../dropdown-search/dropdown-search.js";
+import { Typeahead as c } from "../typeahead/typeahead.js";
+const s = [
+  {
+    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"
+  },
+  {
+    label: "James Wilson",
+    value: "spotter-4",
+    image: "https://i.pravatar.cc/150?u=spotter-4"
+  }
+], g = {
+  title: "@spotwork-ui/atoms/form/DropdownItem",
+  component: l,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "A reusable dropdown row for spotter search results. Displays an avatar, name, and optional subtitle using design tokens."
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    name: { control: "text" },
+    subtitle: { control: "text" },
+    image: { control: "text" }
+  }
+}, n = {
+  args: {
+    avatarId: "spotter-1",
+    name: "Sarah Johnson",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  decorators: [
+    (t) => /* @__PURE__ */ e("div", { className: "w-[32rem] border border-bcolor-subdued rounded", children: /* @__PURE__ */ e("div", { className: "min-h-[4rem] w-full flex items-center border-b border-bcolor-subdued py-[0.75rem] px-[1rem]", children: /* @__PURE__ */ e(t, {}) }) })
+  ]
+}, w = {
+  args: {
+    avatarId: "spotter-3",
+    name: "Emily Rodriguez",
+    subtitle: "Calgary, AB"
+  },
+  decorators: n.decorators
+}, y = {
+  args: {
+    avatarId: "spotter-4",
+    name: "James Wilson",
+    image: "https://i.pravatar.cc/150?u=spotter-4"
+  },
+  decorators: n.decorators
+}, i = () => {
+  const [t, r] = o("");
+  return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
+    p,
+    {
+      label: "Search spotters",
+      placeholder: "Search by name...",
+      options: s,
+      value: t,
+      selectValue: r,
+      renderOption: a
+    }
+  ) });
+}, S = {
+  render: () => /* @__PURE__ */ e(i, {})
+}, d = () => {
+  const [t, r] = o("");
+  return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
+    c,
+    {
+      label: "Search spotters",
+      placeholder: "Search by name...",
+      options: s,
+      value: t,
+      onChange: r,
+      selectValue: r,
+      renderOption: a
+    }
+  ) });
+}, f = {
+  render: () => /* @__PURE__ */ e(d, {})
+};
+export {
+  n as Default,
+  S as WithDropdownSearch,
+  f as WithTypeahead,
+  w as WithoutImage,
+  y as WithoutSubtitle,
+  g as default
+};

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

@@ -0,0 +1,2 @@
+export { DropdownItem, renderSpotterDropdownOption } from './dropdown-item';
+export type { DropdownItemProps, SpotterDropdownOption } from './dropdown-item';

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

@@ -0,0 +1,5 @@
+import { DropdownItem as e, renderSpotterDropdownOption as p } from "./dropdown-item.js";
+export {
+  e as DropdownItem,
+  p as renderSpotterDropdownOption
+};

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

@@ -0,0 +1,6 @@
+export declare const getStyles: () => {
+    container: string;
+    textContainer: string;
+    name: string;
+    subtitle: string;
+};

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

@@ -0,0 +1,9 @@
+const e = () => ({
+  container: "flex items-center gap-md w-full min-w-0",
+  textContainer: "flex flex-col min-w-0 flex-1",
+  name: "truncate",
+  subtitle: "truncate"
+});
+export {
+  e as getStyles
+};

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

@@ -16,6 +16,7 @@ export declare const Controlled: Story;
 export declare const ControlledWithExternalState: Story;
 export declare const WithAddValue: Story;
 export declare const CustomRenderOption: Story;
+export declare const SpotterSearch: Story;
 export declare const LargeDataset: Story;
 export declare const AutoFocus: Story;
 export declare const CustomNotFoundText: Story;

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/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';

package/dist/main.js

@@ -1,168 +1,171 @@
-import { tailwindConfig as a } from "./components/styles/tailwind-config/index.js";
+import { tailwindConfig as m } from "./components/styles/tailwind-config/index.js";
 import { a as x } from "./index-CSucbNlF.js";
-import { Avatar as i } from "./components/atoms/avatar/avatar.js";
+import { Avatar as n } from "./components/atoms/avatar/avatar.js";
 import { Badge as l } from "./components/atoms/badge/badge.js";
 import { LabelValuePair as d } from "./components/atoms/card-content/label-value-pair/label-value-pair.js";
 import { Note as b } from "./components/atoms/card-content/note/note.js";
 import { Chatheader as u } from "./components/atoms/conversation/chatheader/chatheader.js";
-import { ContextMenu as h } from "./components/molecules/navigation/context-menu/context-menu.js";
-import { Dateselect as T } from "./components/atoms/form/dateselect/dateselect.js";
-import { TimePicker as M } from "./components/atoms/form/time-picker/time-picker.js";
+import { ContextMenu as S } from "./components/molecules/navigation/context-menu/context-menu.js";
+import { Dateselect as D } from "./components/atoms/form/dateselect/dateselect.js";
+import { TimePicker as w } from "./components/atoms/form/time-picker/time-picker.js";
 import { RecurrenceDay as y } from "./components/atoms/daybubble/recurrence-day/recurrence-day.js";
 import { RecurrenceWeek as k } from "./components/atoms/form/recurrence-week/recurrence-week.js";
 import { Checkbox as N } from "./components/atoms/form/checkbox/checkbox.js";
 import { Chips as L } from "./components/atoms/form/chips/chips.js";
 import { Dropdown as G } from "./components/atoms/form/dropdown/dropdown.js";
 import { DropdownFilter as P } from "./components/molecules/filter/dropdown-selector/dropdown-selector.js";
-import { DropdownSearch as z } from "./components/atoms/form/dropdown-search/dropdown-search.js";
-import { Calendar as V } from "./components/atoms/form/calendar/calendar.js";
-import { CheckboxFilter as E } from "./components/molecules/filter/checkbox/checkbox.js";
-import { Navigation as j } from "./components/atoms/form/navigation/navigation.js";
-import { Icons as J } from "./components/atoms/icons/icons.js";
+import { DropdownSearch as I } from "./components/atoms/form/dropdown-search/dropdown-search.js";
+import { DropdownItem as V, renderSpotterDropdownOption as W } from "./components/atoms/form/dropdown-item/dropdown-item.js";
+import { Calendar as O } from "./components/atoms/form/calendar/calendar.js";
+import { CheckboxFilter as j } from "./components/molecules/filter/checkbox/checkbox.js";
+import { Navigation as J } from "./components/atoms/form/navigation/navigation.js";
+import { Icons as Q } from "./components/atoms/icons/icons.js";
 import "react/jsx-runtime";
 import "./components/atoms/icons/iconsSVGs/Large/Profile.js";
 import "./components/atoms/icons/iconsSVGs/Small/Profile.js";
-import { Message as O } from "./components/atoms/message/message.js";
-import { Multiselect as U } from "./components/atoms/form/multiselect/multiselect.js";
-import { NavigationItem as Y } from "./components/atoms/navigation/navigation-item/navigation-item.js";
-import { Radiobutton as $ } from "./components/atoms/form/radiobutton/radiobutton.js";
-import { SegmentedControl as ro } from "./components/molecules/filter/segmented-control/segmented-control.js";
-import { Switch as to } from "./components/atoms/form/switch/switch.js";
-import { Stepper as ao } from "./components/atoms/form/stepper/stepper.js";
-import { Tab as xo } from "./components/atoms/tab/tab.js";
-import { Textarea as io } from "./components/atoms/form/textarea/textarea.js";
-import { RichTextarea as lo } from "./components/atoms/form/textarea/rich-textarea.js";
-import { Textfield as co } from "./components/atoms/form/textfield/textfield.js";
-import { Timeselect as go } from "./components/atoms/form/timeselect/timeselect.js";
-import { Typeahead as Co } from "./components/atoms/form/typeahead/typeahead.js";
-import { Button as So } from "./components/molecules/button/button.js";
-import { NotesAndHistory as Do } from "./components/molecules/card-content/notes-and-history/notes-and-history.js";
-import { CollapsibleCard as wo } from "./components/molecules/collapsible-card/collapsible-card.js";
-import { Contact as Ro } from "./components/molecules/conversation/contact/contact.js";
-import { MessageEditor as Bo } from "./components/molecules/conversation/message-editor/message-editor.js";
-import { MessageGroupComposer as vo } from "./components/molecules/conversation/message-group-composer/message-group-composer.js";
-import { Cell as Fo } from "./components/molecules/datatables/cell/cell.js";
-import { Row as Ho } from "./components/molecules/datatables/row/row.js";
-import { RowHeader as Ao } from "./components/molecules/datatables/row-header/row-header.js";
-import { DonutChart as Io } from "./components/molecules/dataviz/donut-chart/donut-chart.js";
-import { DotMatrix as Wo } from "./components/molecules/dataviz/dot-matrix/dot-matrix.js";
-import { ProgressBar as _o } from "./components/molecules/dataviz/progress-bar/progress-bar.js";
-import { SingleStackedBar as qo } from "./components/molecules/dataviz/single-stacked-bar/single-stacked-bar.js";
-import { Legend as Ko } from "./components/molecules/dataviz/legend/legend.js";
-import { Drawer as Qo } from "./components/molecules/drawer/drawer.js";
-import { DateSelector as Xo } from "./components/molecules/filter/date-selector/date-selector.js";
-import { DateRangeSelector as Zo } from "./components/molecules/filter/date-range-selector/date-range-selector.js";
-import { RangeSelector as or } from "./components/molecules/filter/range-selector/range-selector.js";
-import { Radiogroup as er } from "./components/molecules/form/radiogroup/radiogroup.js";
-import { Link as pr } from "./components/molecules/link/link.js";
-import { Header as mr } from "./components/molecules/navigation/header/header.js";
-import { Sidebar as fr } from "./components/molecules/navigation/sidebar/sidebar.js";
-import { Content as nr } from "./components/molecules/notifications/content/content.js";
-import { S as sr, i as dr } from "./snackbar-B9zd5z5s.js";
-import { Tooltip as br } from "./components/atoms/tooltip/tooltip.js";
-import { TabGroup as ur } from "./components/molecules/tab-group/tab-group.js";
-import { Menubar as hr } from "./components/molecules/navigation/menubar/menubar.js";
-import { ContextSearch as Tr } from "./components/molecules/filter/context-search/context-search.js";
-import { SmallLargeText as Mr } from "./components/atoms/small-large-text/small-large-text.js";
-import { HorizontalBorder as yr } from "./components/atoms/horizontal-border/horizontal-border.js";
-import { Dialog as kr } from "./components/molecules/dialog/dialog.js";
-import { Alert as Nr } from "./components/molecules/alert/alert.js";
-import { c as Lr } from "./card-Cc2Qkiqr.js";
-import { Colors as Gr } from "./components/styles/colors/colors.js";
-import { apple as Pr, blueRibbon as Ar, borderColor as zr, buttonBorder as Ir, buttonGlyph as Vr, buttonSurface as Wr, cinnabar as Er, crusta as _r, glyph as jr, linkColors as qr, progressBar as Jr, shadow as Kr, sun as Or, surface as Qr, woodsmoke as Ur } from "./components/styles/colors/colormap.js";
-import { Typography as Yr } from "./components/styles/typography/typography.js";
-import { fontFamilyMap as $r, fontSizeMap as oe, fontWeightMap as re, styleMap as ee, textTypeMap as te } from "./components/styles/typography/style.js";
-import { DashedLineSVG as ae } from "./components/styles/dashedBorder/DashedLineSVG.js";
+import { Message as X } from "./components/atoms/message/message.js";
+import { Multiselect as Z } from "./components/atoms/form/multiselect/multiselect.js";
+import { NavigationItem as oo } from "./components/atoms/navigation/navigation-item/navigation-item.js";
+import { Radiobutton as eo } from "./components/atoms/form/radiobutton/radiobutton.js";
+import { SegmentedControl as po } from "./components/molecules/filter/segmented-control/segmented-control.js";
+import { Switch as ao } from "./components/atoms/form/switch/switch.js";
+import { Stepper as fo } from "./components/atoms/form/stepper/stepper.js";
+import { Tab as io } from "./components/atoms/tab/tab.js";
+import { Textarea as so } from "./components/atoms/form/textarea/textarea.js";
+import { RichTextarea as bo } from "./components/atoms/form/textarea/rich-textarea.js";
+import { Textfield as uo } from "./components/atoms/form/textfield/textfield.js";
+import { Timeselect as So } from "./components/atoms/form/timeselect/timeselect.js";
+import { Typeahead as Do } from "./components/atoms/form/typeahead/typeahead.js";
+import { Button as wo } from "./components/molecules/button/button.js";
+import { NotesAndHistory as yo } from "./components/molecules/card-content/notes-and-history/notes-and-history.js";
+import { CollapsibleCard as ko } from "./components/molecules/collapsible-card/collapsible-card.js";
+import { Contact as No } from "./components/molecules/conversation/contact/contact.js";
+import { MessageEditor as Lo } from "./components/molecules/conversation/message-editor/message-editor.js";
+import { MessageGroupComposer as Go } from "./components/molecules/conversation/message-group-composer/message-group-composer.js";
+import { Cell as Po } from "./components/molecules/datatables/cell/cell.js";
+import { Row as Io } from "./components/molecules/datatables/row/row.js";
+import { RowHeader as Vo } from "./components/molecules/datatables/row-header/row-header.js";
+import { DonutChart as Eo } from "./components/molecules/dataviz/donut-chart/donut-chart.js";
+import { DotMatrix as _o } from "./components/molecules/dataviz/dot-matrix/dot-matrix.js";
+import { ProgressBar as qo } from "./components/molecules/dataviz/progress-bar/progress-bar.js";
+import { SingleStackedBar as Ko } from "./components/molecules/dataviz/single-stacked-bar/single-stacked-bar.js";
+import { Legend as Uo } from "./components/molecules/dataviz/legend/legend.js";
+import { Drawer as Yo } from "./components/molecules/drawer/drawer.js";
+import { DateSelector as $o } from "./components/molecules/filter/date-selector/date-selector.js";
+import { DateRangeSelector as rr } from "./components/molecules/filter/date-range-selector/date-range-selector.js";
+import { RangeSelector as tr } from "./components/molecules/filter/range-selector/range-selector.js";
+import { Radiogroup as mr } from "./components/molecules/form/radiogroup/radiogroup.js";
+import { Link as xr } from "./components/molecules/link/link.js";
+import { Header as nr } from "./components/molecules/navigation/header/header.js";
+import { Sidebar as lr } from "./components/molecules/navigation/sidebar/sidebar.js";
+import { Content as dr } from "./components/molecules/notifications/content/content.js";
+import { S as br, i as gr } from "./snackbar-B9zd5z5s.js";
+import { Tooltip as Cr } from "./components/atoms/tooltip/tooltip.js";
+import { TabGroup as hr } from "./components/molecules/tab-group/tab-group.js";
+import { Menubar as Tr } from "./components/molecules/navigation/menubar/menubar.js";
+import { ContextSearch as Mr } from "./components/molecules/filter/context-search/context-search.js";
+import { SmallLargeText as Rr } from "./components/atoms/small-large-text/small-large-text.js";
+import { HorizontalBorder as Br } from "./components/atoms/horizontal-border/horizontal-border.js";
+import { Dialog as vr } from "./components/molecules/dialog/dialog.js";
+import { Alert as Fr } from "./components/molecules/alert/alert.js";
+import { c as Hr } from "./card-Cc2Qkiqr.js";
+import { Colors as Ar } from "./components/styles/colors/colors.js";
+import { apple as zr, blueRibbon as Vr, borderColor as Wr, buttonBorder as Er, buttonGlyph as Or, buttonSurface as _r, cinnabar as jr, crusta as qr, glyph as Jr, linkColors as Kr, progressBar as Qr, shadow as Ur, sun as Xr, surface as Yr, woodsmoke as Zr } from "./components/styles/colors/colormap.js";
+import { Typography as oe } from "./components/styles/typography/typography.js";
+import { fontFamilyMap as ee, fontSizeMap as te, fontWeightMap as pe, styleMap as me, textTypeMap as ae } from "./components/styles/typography/style.js";
+import { DashedLineSVG as fe } from "./components/styles/dashedBorder/DashedLineSVG.js";
 export {
-  Nr as Alert,
-  i as Avatar,
+  Fr as Alert,
+  n as Avatar,
   l as Badge,
-  So as Button,
-  V as Calendar,
-  Lr as Card,
-  Fo as Cell,
+  wo as Button,
+  O as Calendar,
+  Hr as Card,
+  Po as Cell,
   u as Chatheader,
   N as Checkbox,
-  E as CheckboxFilter,
+  j as CheckboxFilter,
   L as Chips,
-  wo as CollapsibleCard,
-  Gr as Colors,
-  Ro as Contact,
-  h as ContextMenu,
-  Tr as ContextSearch,
-  ae as DashedLineSVG,
-  Zo as DateRangeSelector,
-  Xo as DateSelector,
-  T as Dateselect,
-  kr as Dialog,
-  Io as DonutChart,
-  Wo as DotMatrix,
-  Qo as Drawer,
+  ko as CollapsibleCard,
+  Ar as Colors,
+  No as Contact,
+  S as ContextMenu,
+  Mr as ContextSearch,
+  fe as DashedLineSVG,
+  rr as DateRangeSelector,
+  $o as DateSelector,
+  D as Dateselect,
+  vr as Dialog,
+  Eo as DonutChart,
+  _o as DotMatrix,
+  Yo as Drawer,
   G as Dropdown,
   P as DropdownFilter,
-  z as DropdownSearch,
-  j as FormNavigation,
-  mr as Header,
-  yr as HorizontalBorder,
-  J as Icons,
+  V as DropdownItem,
+  I as DropdownSearch,
+  J as FormNavigation,
+  nr as Header,
+  Br as HorizontalBorder,
+  Q as Icons,
   d as LabelValuePair,
-  Ko as Legend,
-  pr as Link,
-  hr as Menubar,
-  O as Message,
-  Bo as MessageEditor,
-  vo as MessageGroupComposer,
-  U as Multiselect,
-  Y as NavigationItem,
+  Uo as Legend,
+  xr as Link,
+  Tr as Menubar,
+  X as Message,
+  Lo as MessageEditor,
+  Go as MessageGroupComposer,
+  Z as Multiselect,
+  oo as NavigationItem,
   b as Note,
-  Do as NotesAndHistory,
-  nr as NotificationContent,
-  _o as ProgressBar,
-  $ as Radiobutton,
-  er as Radiogroup,
-  or as RangeSelector,
+  yo as NotesAndHistory,
+  dr as NotificationContent,
+  qo as ProgressBar,
+  eo as Radiobutton,
+  mr as Radiogroup,
+  tr as RangeSelector,
   y as RecurrenceDay,
   k as RecurrenceWeek,
-  lo as RichTextarea,
-  Ho as Row,
-  Ao as RowHeader,
-  ro as SegmentedControl,
-  fr as Sidebar,
-  qo as SingleStackedBar,
-  Mr as SmallLargeText,
-  sr as Snackbar,
-  ao as Stepper,
-  to as Switch,
-  xo as Tab,
-  ur as TabGroup,
-  io as Textarea,
-  co as Textfield,
-  M as TimePicker,
-  go as Timeselect,
-  dr as Toast,
-  br as Tooltip,
+  bo as RichTextarea,
+  Io as Row,
+  Vo as RowHeader,
+  po as SegmentedControl,
+  lr as Sidebar,
+  Ko as SingleStackedBar,
+  Rr as SmallLargeText,
+  br as Snackbar,
+  fo as Stepper,
+  ao as Switch,
+  io as Tab,
+  hr as TabGroup,
+  so as Textarea,
+  uo as Textfield,
+  w as TimePicker,
+  So as Timeselect,
+  gr as Toast,
+  Cr as Tooltip,
   x as TooltipProvider,
-  Co as Typeahead,
-  Yr as Typography,
-  Pr as apple,
-  Ar as blue_ribbon,
-  zr as borderColor,
-  Ir as buttonBorder,
-  Vr as buttonGlyph,
-  Wr as buttonSurface,
-  Er as cinnabar,
-  _r as crusta,
-  $r as fontFamilyMap,
-  oe as fontSizeMap,
-  re as fontWeightMap,
-  jr as glyph,
-  qr as linkColors,
-  Jr as progressBar,
-  Kr as shadow,
-  ee as styleMap,
-  Or as sun,
-  Qr as surface,
-  a as tailwindConfig,
-  te as textTypeMap,
-  Ur as woodsmoke
+  Do as Typeahead,
+  oe as Typography,
+  zr as apple,
+  Vr as blue_ribbon,
+  Wr as borderColor,
+  Er as buttonBorder,
+  Or as buttonGlyph,
+  _r as buttonSurface,
+  jr as cinnabar,
+  qr as crusta,
+  ee as fontFamilyMap,
+  te as fontSizeMap,
+  pe as fontWeightMap,
+  Jr as glyph,
+  Kr as linkColors,
+  Qr as progressBar,
+  W as renderSpotterDropdownOption,
+  Ur as shadow,
+  me as styleMap,
+  Xr as sun,
+  Yr as surface,
+  m as tailwindConfig,
+  ae as textTypeMap,
+  Zr as woodsmoke
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.7.7",
+  "version": "1.7.8",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",