@temp-spotwork/ui 1.7.7 → 1.7.9

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/molecules/dataviz/progress-bar/ProgressBar.stories.d.ts

@@ -11,3 +11,4 @@ export declare const WithLabelColorAlert: Story;
 export declare const WithLabelColorWarning: Story;
 export declare const WithLabelColorActive: Story;
 export declare const WithTotalCount: Story;
+export declare const WithTextClassName: Story;

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.js

@@ -1,9 +1,13 @@
-import { ProgressBar as o } from "./progress-bar.js";
+import t from "react";
+import { ProgressBar as e } from "./progress-bar.js";
 import "../../../styles/colors/colors.js";
-import { glyphColorsKeys as t } from "../../../styles/colors/colormap.js";
-const s = {
+import { glyphColorsKeys as l } from "../../../styles/colors/colormap.js";
+const n = {
   title: "@spotwork-ui/ProgresBar",
-  component: o,
+  component: e,
+  decorators: [
+    (o) => t.createElement("div", { style: { width: 100 } }, t.createElement(o))
+  ],
   parameters: {
     layout: "centered"
   },
@@ -11,7 +15,7 @@ const s = {
   argTypes: {
     labelColor: {
       control: "select",
-      options: t,
+      options: l,
       description: 'Custom color for the label. Defaults to "subdued" if not provided.'
     },
     progress: {
@@ -27,47 +31,47 @@ const s = {
       control: "text"
     }
   }
-}, a = {
+}, c = {
   args: {
     progress: 50,
     total: 100,
     text: "Filled"
   }
-}, n = {
+}, g = {
   args: {
     progress: 75,
     total: 100,
     text: "Filled"
   }
-}, i = {
+}, p = {
   args: {
     progress: 80,
     total: 100,
     text: "Filled",
     labelColor: "success"
   }
-}, c = {
+}, u = {
   args: {
     progress: 30,
     total: 100,
     text: "Filled",
     labelColor: "alert"
   }
-}, g = {
+}, C = {
   args: {
     progress: 60,
     total: 100,
     text: "Filled",
     labelColor: "warning"
   }
-}, p = {
+}, d = {
   args: {
     progress: 90,
     total: 100,
     text: "Filled",
     labelColor: "active"
   }
-}, u = {
+}, m = {
   args: {
     progress: 75,
     total: 100,
@@ -75,14 +79,24 @@ const s = {
     hasTotalCount: !0,
     labelColor: "active"
   }
+}, b = {
+  args: {
+    progress: 75,
+    total: 100,
+    text: "",
+    hasTotalCount: !0,
+    labelColor: "active",
+    textClassName: "flex justify-center items-center"
+  }
 };
 export {
-  a as Default,
-  p as WithLabelColorActive,
-  c as WithLabelColorAlert,
-  i as WithLabelColorSuccess,
-  g as WithLabelColorWarning,
-  u as WithTotalCount,
-  n as WithoutLabelColor,
-  s as default
+  c as Default,
+  d as WithLabelColorActive,
+  u as WithLabelColorAlert,
+  p as WithLabelColorSuccess,
+  C as WithLabelColorWarning,
+  b as WithTextClassName,
+  m as WithTotalCount,
+  g as WithoutLabelColor,
+  n as default
 };

package/dist/components/molecules/dataviz/progress-bar/progress-bar.d.ts

@@ -30,5 +30,9 @@ export type ProgressBarProps = {
      * Custom class name for the component
      */
     className?: string;
+    /**
+     * Custom class name for the text label
+     */
+    textClassName?: string;
 };
-export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, textClassName, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/progress-bar/progress-bar.js

@@ -1,41 +1,42 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { Typography as h } from "../../../styles/typography/typography.js";
+import { jsx as d, jsxs as t } from "react/jsx-runtime";
+import { Typography as b } from "../../../styles/typography/typography.js";
 import "../../../styles/colors/colors.js";
-import { surface as b, crusta as B, sun as v, apple as y } from "../../../styles/colors/colormap.js";
+import { surface as B, crusta as v, sun as y, apple as N } from "../../../styles/colors/colormap.js";
 import { getStyles as $ } from "./styles.js";
 import { t as o } from "../../../../bundle-mjs-BjFsLjkg.js";
-function P({
+function W({
   progress: e,
   total: r,
-  hasTotalCount: n = !1,
-  text: l = "Filled",
+  hasTotalCount: l = !1,
+  text: n = "Filled",
   swStyle: m = 1,
   labelColor: u,
-  className: p
+  className: p,
+  textClassName: f
 }) {
-  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, f = s <= 33.99 ? b.badge : s <= 66.99 ? B[400] : s <= 99.99 ? v[400] : y[600], g = (n ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + l, t = u ?? "subdued", d = $();
-  return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c("div", { className: o(d.container, p), children: [
-    /* @__PURE__ */ a(h, { swStyle: m, color: t, children: g }),
-    /* @__PURE__ */ c("div", { className: d.chartBox, children: [
-      /* @__PURE__ */ a(
+  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, g = s <= 33.99 ? B.badge : s <= 66.99 ? v[400] : s <= 99.99 ? y[400] : N[600], h = (l ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + n, c = u ?? "subdued", a = $();
+  return /* @__PURE__ */ d("div", { children: /* @__PURE__ */ t("div", { className: o(a.container, p), children: [
+    /* @__PURE__ */ d(b, { swStyle: m, className: f, color: c, children: h }),
+    /* @__PURE__ */ t("div", { className: a.chartBox, children: [
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "progress-bar",
-          style: { width: `${s}%`, background: f },
+          style: { width: `${s}%`, background: g },
           className: o(
-            d.progressBar,
+            a.progressBar,
             s >= 100 ? "rounded-r-[0.3rem] rounded-l-[0.3rem]" : "rounded-l-[0.3rem]"
           )
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "unfilled-progress-bar",
           style: { width: `${i}%` },
           className: o(
-            d.progressBar,
-            t === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
+            a.progressBar,
+            c === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
             i >= 100 ? "rounded-[0.3rem]" : "rounded-r-[0.3rem]"
           )
         }
@@ -44,5 +45,5 @@ function P({
   ] }) });
 }
 export {
-  P as ProgressBar
+  W as ProgressBar
 };

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