@uva-glass/component-library 3.35.1 → 3.36.1

package/dist/components/SelectListbox/SelectProvider.js

@@ -1,41 +1,43 @@
 import { jsx as m } from "react/jsx-runtime";
-import { createContext as g, useContext as p, useState as l, useRef as C, useId as P } from "react";
-const d = g({}), L = ({ options: e, defaultValue: o, children: i }) => {
-  const [c, v] = l({ value: "", label: "" }), [x, s] = l(!1), [f, r] = l(-1), I = C(P()), b = () => {
-    s((t) => !t);
-  }, u = (t) => e.find((n) => n.value === t) || {
+import { createContext as w, useContext as L, useState as a, useRef as g, useId as C, useEffect as P } from "react";
+const i = w({}), O = ({ options: e, defaultValue: n, children: v }) => {
+  const [s, d] = a({ value: "", label: "" }), [x, c] = a(!1), [b, u] = a(-1), f = g(C()), I = () => {
+    c((t) => !t);
+  }, l = (t) => e.find((r) => r.value === t) || {
     value: -1,
     label: "",
     selectedLabel: "-"
-  }, a = (t) => {
-    const n = e.findIndex((S) => S.value === t.value);
-    r(n), v(t), s(!1);
+  }, o = (t) => {
+    const r = e.findIndex((S) => S.value === t.value);
+    u(r), d(t), c(!1);
   };
-  return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
-    d.Provider,
+  return n !== -1 && !s.value && o(l(n)), P(() => {
+    l(s.value || n).label !== s.label && o(l(s.value || n));
+  }, [e, n]), /* @__PURE__ */ m(
+    i.Provider,
     {
       value: {
         options: e,
-        selectedValue: c,
-        setSelectedValue: a,
+        selectedValue: s,
+        setSelectedValue: o,
         isOpen: x,
-        setIsOpen: s,
-        toggleListbox: b,
-        getValue: u,
-        activeIndex: f,
-        setActiveIndex: r,
-        listboxId: I.current
+        setIsOpen: c,
+        toggleListbox: I,
+        getValue: l,
+        activeIndex: b,
+        setActiveIndex: u,
+        listboxId: f.current
       },
-      children: i
+      children: v
     }
   );
-}, O = () => {
-  const e = p(d);
+}, h = () => {
+  const e = L(i);
   if (e === void 0) throw new Error("useSelect can only be used in an SelectProvider");
   return e;
 };
 export {
-  L as SelectProvider,
-  O as useSelect
+  O as SelectProvider,
+  h as useSelect
 };
 //# sourceMappingURL=SelectProvider.js.map

package/dist/components/SelectListbox/SelectProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AAC/F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAC1B,IAAAN,EAAU,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AAC/C,UAAMe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SAChCc,EAAiBF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MAAA;AAAA,MAGtB,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEakB,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAE5F,SAAOA;AACT;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  useEffect(() => {\n    const newLabel = getValue(value.value || defaultValue).label;\n    if (newLabel !== value.label) {\n      setSelectedValue(getValue(value.value || defaultValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, defaultValue]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","useEffect","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AAC/F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAC1B,IAAAN,EAAU,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AAC/C,UAAMe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SAChCc,EAAiBF,EAASd,CAAY,CAAC,GAGzCkB,EAAU,MAAM;AAEd,IADiBJ,EAASZ,EAAM,SAASF,CAAY,EAAE,UACtCE,EAAM,SACrBc,EAAiBF,EAASZ,EAAM,SAASF,CAAY,CAAC;AAAA,EACxD,GAEC,CAACD,GAASC,CAAY,CAAC,GAGxB,gBAAAmB;AAAA,IAACvB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MAAA;AAAA,MAGtB,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEamB,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAW1B,CAAa;AAExC,MAAIyB,MAAY,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAE5F,SAAOA;AACT;"}

package/dist/components/StatusBadge/StatusBadge.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DzN3R4wD.js";
-import { r as t, s } from "../../react.esm-DMlPLy-4.js";
+import "../../index-C5wAoUNf.js";
+import { r as t, s } from "../../react.esm-QfxS8egK.js";
 import { StatusBadge as a } from "./StatusBage.js";
 describe("StatusBadge", () => {
   it("should render with message", () => {

package/dist/components/TextArea/TextArea.test.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import "../../index-DzN3R4wD.js";
-import { r as o, s as t, f as r } from "../../react.esm-DMlPLy-4.js";
+import "../../index-C5wAoUNf.js";
+import { r as o, s as t, f as r } from "../../react.esm-QfxS8egK.js";
 import { J as c } from "../../index-DFu0GqDc.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {

package/dist/components/VarIndicator/VarIndicator.d.ts

@@ -1,9 +1,15 @@
 export type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';
 export interface VarIndicatorProps {
+    /** Label on the indicator */
     label: Record<StatusType, string>;
+    /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */
     variant?: StatusType;
+    /** Maximum number of steps if variant is 'SUBMITTED' */
     maxSteps?: number;
+    /** Current step if variant is 'SUBMITTED' */
     currentStep?: number;
+    /** If set shows compact view and opens to the left on hover */
+    isCompact?: boolean;
     onClick?: () => void;
 }
-export declare const VarIndicator: ({ label, variant, maxSteps, currentStep, onClick }: VarIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VarIndicator: ({ label, variant, maxSteps, currentStep, isCompact, onClick, }: VarIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VarIndicator/VarIndicator.js

@@ -1,31 +1,61 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import { Icon as c } from "../Icon/Icon.js";
-import '../../assets/VarIndicator.css';const i = {
-  "var-indicator__container": "_var-indicator__container_1m025_29",
-  "var-indicator__container--draft": "_var-indicator__container--draft_1m025_48",
-  "var-indicator__container--rejected": "_var-indicator__container--rejected_1m025_49",
-  "var-indicator__container--submitted": "_var-indicator__container--submitted_1m025_61",
-  "var-indicator__container--active": "_var-indicator__container--active_1m025_72",
-  "var-indicator__label": "_var-indicator__label_1m025_83",
-  "var-indicator__step-container": "_var-indicator__step-container_1m025_94"
-}, s = {
+import { jsx as r, jsxs as o, Fragment as d } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { Icon as t } from "../Icon/Icon.js";
+import '../../assets/VarIndicator.css';const a = {
+  "var-indicator__container": "_var-indicator__container_9n427_27",
+  "var-indicator__label": "_var-indicator__label_9n427_46",
+  "var-indicator__step-container": "_var-indicator__step-container_9n427_50",
+  "var-indicator__container--compact": "_var-indicator__container--compact_9n427_61",
+  "var-indicator__container--compact-flyover-wrapper": "_var-indicator__container--compact-flyover-wrapper_9n427_71",
+  "var-indicator__container--draft": "_var-indicator__container--draft_9n427_85",
+  "var-indicator__container--rejected": "_var-indicator__container--rejected_9n427_86",
+  "var-indicator__container--submitted": "_var-indicator__container--submitted_9n427_101",
+  "var-indicator__container--active": "_var-indicator__container--active_9n427_113"
+}, v = {
   DRAFT: "CircleLarge",
   REJECTED: "CircleLarge",
   SUBMITTED: "CircleLargeDotted",
   ACTIVE: "SignalActive"
-}, E = ({ label: t, variant: r = "DRAFT", maxSteps: n, currentStep: e = 1, onClick: o }) => /* @__PURE__ */ l(
-  "button",
-  {
-    className: m(i["var-indicator__container"], i[`var-indicator__container--${r.toLowerCase()}`]),
-    onClick: o,
-    children: [
-      /* @__PURE__ */ a(c, { name: s[r], size: 16 }),
-      /* @__PURE__ */ a("span", { className: i["var-indicator__label"], children: t[`${r}`] }),
-      n && n > 0 && r === "SUBMITTED" ? Array.from({ length: n }, (_, d) => d + 1).map((_) => /* @__PURE__ */ a("div", { className: i["var-indicator__step-container"], children: /* @__PURE__ */ a(c, { name: _ <= e ? "CircleSmallFilled" : "CircleSmall" }) }, _)) : null
-    ]
-  }
-);
+}, E = ({
+  label: s,
+  variant: n = "DRAFT",
+  maxSteps: i,
+  currentStep: m = 1,
+  isCompact: _,
+  onClick: p
+}) => {
+  const e = () => /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ r(t, { name: v[n], size: 16 }),
+    /* @__PURE__ */ r("span", { className: a["var-indicator__label"], children: s[`${n}`] }),
+    i && i > 0 && n === "SUBMITTED" && Array.from({ length: i }, (c, f) => f + 1).map((c) => /* @__PURE__ */ r("div", { className: a["var-indicator__step-container"], children: /* @__PURE__ */ r(t, { name: c <= m ? "CircleSmallFilled" : "CircleSmall" }) }, c))
+  ] });
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      className: l(
+        a["var-indicator__container"],
+        a[`var-indicator__container--${n.toLowerCase()}`],
+        {
+          [a["var-indicator__container--compact"]]: _
+        }
+      ),
+      onClick: p,
+      children: _ ? /* @__PURE__ */ o(d, { children: [
+        /* @__PURE__ */ r(t, { name: v[n], size: 16 }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: l(
+              a["var-indicator__container"],
+              a["var-indicator__container--compact-flyover-wrapper"]
+            ),
+            children: /* @__PURE__ */ r(e, {})
+          }
+        )
+      ] }) : /* @__PURE__ */ r(e, {})
+    }
+  );
+};
 export {
   E as VarIndicator
 };

package/dist/components/VarIndicator/VarIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VarIndicator.js","sources":["../../../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n  label: Record<StatusType, string>;\n  variant?: StatusType;\n  maxSteps?: number;\n  currentStep?: number;\n  onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n  DRAFT: 'CircleLarge',\n  REJECTED: 'CircleLarge',\n  SUBMITTED: 'CircleLargeDotted',\n  ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({ label, variant = 'DRAFT', maxSteps, currentStep = 1, onClick }: VarIndicatorProps) => (\n  <button\n    className={clsx(styles['var-indicator__container'], styles[`var-indicator__container--${variant.toLowerCase()}`])}\n    onClick={onClick}\n  >\n    <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n    <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n    {maxSteps && maxSteps > 0 && variant === 'SUBMITTED'\n      ? Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n          <div key={step} className={styles['var-indicator__step-container']}>\n            <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n          </div>\n        ))\n      : null}\n  </button>\n);\n"],"names":["ICON_NAMES","VarIndicator","label","variant","maxSteps","currentStep","onClick","jsxs","clsx","styles","jsx","Icon","idx","step"],"mappings":";;;;;;;;;;;GAkBMA,IAAa;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV,GAEaC,IAAe,CAAC,EAAE,OAAAC,GAAO,SAAAC,IAAU,SAAS,UAAAC,GAAU,aAAAC,IAAc,GAAG,SAAAC,EAAA,MAClF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,0BAA0B,GAAGA,EAAO,6BAA6BN,EAAQ,YAAA,CAAa,EAAE,CAAC;AAAA,IAChH,SAAAG;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAMX,EAAWG,CAAO,GAAwB,MAAM,IAAI;AAAA,MAChE,gBAAAO,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAP,EAAM,GAAGC,CAAO,EAAE,EAAA,CAAE;AAAA,MACrEC,KAAYA,IAAW,KAAKD,MAAY,cACrC,MAAM,KAAK,EAAE,QAAQC,EAAA,GAAY,CAAC,GAAGQ,MAAQA,IAAM,CAAC,EAAE,IAAI,CAACC,wBACxD,OAAA,EAAe,WAAWJ,EAAO,+BAA+B,GAC/D,UAAA,gBAAAC,EAACC,GAAA,EAAK,MAAME,KAAQR,IAAc,sBAAsB,cAAA,CAAe,EAAA,GAD/DQ,CAEV,CACD,IACD;AAAA,IAAA;AAAA,EAAA;AACN;"}
+{"version":3,"file":"VarIndicator.js","sources":["../../../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n  /** Label on the indicator */\n  label: Record<StatusType, string>;\n  /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */\n  variant?: StatusType;\n  /** Maximum number of steps if variant is 'SUBMITTED' */\n  maxSteps?: number;\n  /** Current step if variant is 'SUBMITTED' */\n  currentStep?: number;\n  /** If set shows compact view and opens to the left on hover */\n  isCompact?: boolean;\n  onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n  DRAFT: 'CircleLarge',\n  REJECTED: 'CircleLarge',\n  SUBMITTED: 'CircleLargeDotted',\n  ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({\n  label,\n  variant = 'DRAFT',\n  maxSteps,\n  currentStep = 1,\n  isCompact,\n  onClick,\n}: VarIndicatorProps) => {\n  const IndicatorContent = () => (\n    <>\n      <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n      <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n      {maxSteps &&\n        maxSteps > 0 &&\n        variant === 'SUBMITTED' &&\n        Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n          <div key={step} className={styles['var-indicator__step-container']}>\n            <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n          </div>\n        ))}\n    </>\n  );\n\n  return (\n    <button\n      className={clsx(\n        styles['var-indicator__container'],\n        styles[`var-indicator__container--${variant.toLowerCase()}`],\n        {\n          [styles['var-indicator__container--compact']]: isCompact,\n        }\n      )}\n      onClick={onClick}\n    >\n      {isCompact ? (\n        <>\n          <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n          <div\n            className={clsx(\n              styles['var-indicator__container'],\n              styles['var-indicator__container--compact-flyover-wrapper']\n            )}\n          >\n            <IndicatorContent />\n          </div>\n        </>\n      ) : (\n        <IndicatorContent />\n      )}\n    </button>\n  );\n};\n"],"names":["ICON_NAMES","VarIndicator","label","variant","maxSteps","currentStep","isCompact","onClick","IndicatorContent","jsxs","Fragment","jsx","Icon","styles","_","idx","step","clsx"],"mappings":";;;;;;;;;;;;;GAwBMA,IAAa;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV,GAEaC,IAAe,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,SAAAC;AACF,MAAyB;AACvB,QAAMC,IAAmB,MACvB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAMZ,EAAWG,CAAO,GAAwB,MAAM,IAAI;AAAA,IAChE,gBAAAQ,EAAC,QAAA,EAAK,WAAWE,EAAO,sBAAsB,GAAI,UAAAX,EAAM,GAAGC,CAAO,EAAE,EAAA,CAAE;AAAA,IACrEC,KACCA,IAAW,KACXD,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQC,KAAY,CAACU,GAAGC,MAAQA,IAAM,CAAC,EAAE,IAAI,CAACC,MACzD,gBAAAL,EAAC,OAAA,EAAe,WAAWE,EAAO,+BAA+B,GAC/D,UAAA,gBAAAF,EAACC,GAAA,EAAK,MAAMI,KAAQX,IAAc,sBAAsB,cAAA,CAAe,EAAA,GAD/DW,CAEV,CACD;AAAA,EAAA,GACL;AAGF,SACE,gBAAAL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWM;AAAA,QACTJ,EAAO,0BAA0B;AAAA,QACjCA,EAAO,6BAA6BV,EAAQ,YAAA,CAAa,EAAE;AAAA,QAC3D;AAAA,UACE,CAACU,EAAO,mCAAmC,CAAC,GAAGP;AAAA,QAAA;AAAA,MACjD;AAAA,MAEF,SAAAC;AAAA,MAEC,cACC,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAK,MAAMZ,EAAWG,CAAO,GAAwB,MAAM,IAAI;AAAA,QAChE,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWM;AAAA,cACTJ,EAAO,0BAA0B;AAAA,cACjCA,EAAO,mDAAmD;AAAA,YAAA;AAAA,YAG5D,4BAACL,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpB,GACF,sBAECA,GAAA,CAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAI1B;"}

package/dist/components/VarIndicator/VarIndicator.stories.js

@@ -1,7 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
-import { l as o } from "../../index-DFu0GqDc.js";
+import { jsx as r } from "react/jsx-runtime";
+import { l as n } from "../../index-DFu0GqDc.js";
 import { VarIndicator as t } from "./VarIndicator.js";
-const n = {
+const o = {
   DRAFT: "Concept",
   REJECTED: "Concept",
   SUBMITTED: "Verificatie",
@@ -14,14 +14,14 @@ const n = {
     inspectComponent: t,
     codeString: a
   }
-}, c = (r) => /* @__PURE__ */ e(t, { ...r }), i = {
-  label: n,
+}, i = (e) => /* @__PURE__ */ r("div", { style: { margin: "0 0 0 6rem" }, children: /* @__PURE__ */ r(t, { ...e }) }), c = {
+  label: o,
   maxSteps: 3,
   currentStep: 2,
-  onClick: o()
-}, s = c.bind({});
+  onClick: n()
+}, s = i.bind({});
 s.args = {
-  ...i
+  ...c
 };
 export {
   s as VarIndicatorExample,

package/dist/components/VarIndicator/VarIndicator.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"VarIndicator.stories.js","sources":["../../../src/components/VarIndicator/VarIndicator.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { VarIndicatorProps } from './VarIndicator';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n  DRAFT: 'Concept',\n  REJECTED: 'Concept',\n  SUBMITTED: 'Verificatie',\n  ACTIVE: 'Actief',\n};\n\nconst codeString =\n  '<VarIndicator label={[string]: [string]} maxSteps={number} currentStep={number} onClick={() => void} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/VarIndicator',\n  component: VarIndicator,\n  argTypes: {},\n  parameters: {\n    inspectComponent: VarIndicator,\n    codeString: codeString,\n  },\n} as Meta<VarIndicatorProps>;\n\nconst Template: StoryFn<VarIndicatorProps> = (args) => <VarIndicator {...args} />;\n\nconst defaultArgs: Partial<VarIndicatorProps> = {\n  label: LABELS,\n  maxSteps: 3,\n  currentStep: 2,\n  onClick: fn(),\n};\n\nexport const VarIndicatorExample = Template.bind({});\nVarIndicatorExample.args = {\n  ...defaultArgs,\n};\n"],"names":["LABELS","codeString","VarIndicator_stories","VarIndicator","Template","args","jsx","defaultArgs","fn","VarIndicatorExample"],"mappings":";;;AAOA,MAAMA,IAAS;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV,GAEMC,IACJ,2GAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAc,GAAGE,GAAM,GAEzEE,IAA0C;AAAA,EAC9C,OAAOP;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAASQ,EAAA;AACX,GAEaC,IAAsBL,EAAS,KAAK,CAAA,CAAE;AACnDK,EAAoB,OAAO;AAAA,EACzB,GAAGF;AACL;"}
+{"version":3,"file":"VarIndicator.stories.js","sources":["../../../src/components/VarIndicator/VarIndicator.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { VarIndicatorProps } from './VarIndicator';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n  DRAFT: 'Concept',\n  REJECTED: 'Concept',\n  SUBMITTED: 'Verificatie',\n  ACTIVE: 'Actief',\n};\n\nconst codeString =\n  '<VarIndicator label={[string]: [string]} maxSteps={number} currentStep={number} onClick={() => void} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/VarIndicator',\n  component: VarIndicator,\n  argTypes: {},\n  parameters: {\n    inspectComponent: VarIndicator,\n    codeString: codeString,\n  },\n} as Meta<VarIndicatorProps>;\n\nconst Template: StoryFn<VarIndicatorProps> = (args) => (\n  <div style={{ margin: '0 0 0 6rem' }}>\n    <VarIndicator {...args} />\n  </div>\n);\n\nconst defaultArgs: Partial<VarIndicatorProps> = {\n  label: LABELS,\n  maxSteps: 3,\n  currentStep: 2,\n  onClick: fn(),\n};\n\nexport const VarIndicatorExample = Template.bind({});\nVarIndicatorExample.args = {\n  ...defaultArgs,\n};\n"],"names":["LABELS","codeString","VarIndicator_stories","VarIndicator","Template","args","jsx","defaultArgs","fn","VarIndicatorExample"],"mappings":";;;AAOA,MAAMA,IAAS;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV,GAEMC,IACJ,2GAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAAC,SAAI,OAAO,EAAE,QAAQ,aAAA,GACpB,UAAA,gBAAAA,EAACH,GAAA,EAAc,GAAGE,GAAM,GAC1B,GAGIE,IAA0C;AAAA,EAC9C,OAAOP;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAASQ,EAAA;AACX,GAEaC,IAAsBL,EAAS,KAAK,CAAA,CAAE;AACnDK,EAAoB,OAAO;AAAA,EACzB,GAAGF;AACL;"}

package/dist/components/VarIndicator/VarIndicator.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-DzN3R4wD.js";
-import { r as l, s as e, w as a } from "../../react.esm-DMlPLy-4.js";
-import { u as i } from "../../index-DDN7R-oN.js";
+import "../../index-C5wAoUNf.js";
+import { r as l, s as e, w as a } from "../../react.esm-QfxS8egK.js";
+import { u as i } from "../../index-DBXreWnr.js";
 import { useState as s } from "react";
 import { VarIndicator as n } from "./VarIndicator.js";
 const o = {