@temp-spotwork/ui 1.6.9 → 1.7.2

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.js

@@ -1,10 +1,11 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { useState as r } from "react";
-import { Sidebar as s } from "./sidebar.js";
-import { Button as d } from "../../button/button.js";
-const f = {
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { w as b, u as i, e as m, s as w } from "../../../../index-Dpx0xQmQ.js";
+import { Sidebar as d } from "./sidebar.js";
+import { Button as C } from "../../button/button.js";
+const I = {
   title: "@spotwork-ui/molecules/Sidebar",
-  component: s,
+  component: d,
   parameters: {
     layout: "fullscreen"
   },
@@ -27,16 +28,16 @@ const f = {
       description: "If true, no overlay is rendered. If false, renders the overlay with background."
     }
   }
-}, m = ({ args: o }) => {
-  const [t, i] = r(!1);
-  return /* @__PURE__ */ c("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(d, { text: "Open Sidebar", onClick: () => i(!0) }),
-    /* @__PURE__ */ n(s, { ...o, topItems: [
+}, u = ({ args: o }) => {
+  const [l, a] = p(!1);
+  return /* @__PURE__ */ k("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(C, { text: "Open Sidebar", onClick: () => a(!0) }),
+    /* @__PURE__ */ n(d, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/clock"
       },
@@ -44,26 +45,26 @@ const f = {
         icon: "Maximize",
         label: "Maximize",
         isActive: !0,
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/calendar"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, a = ({ args: o }) => {
-  const [t, i] = r(!1);
-  return /* @__PURE__ */ c("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(d, { text: "Open Sidebar with Top & Bottom Items", onClick: () => i(!0) }),
-    /* @__PURE__ */ n(s, { ...o, topItems: [
+}, c = ({ args: o }) => {
+  const [l, a] = p(!1);
+  return /* @__PURE__ */ k("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(C, { text: "Open Sidebar with Top & Bottom Items", onClick: () => a(!0) }),
+    /* @__PURE__ */ n(d, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
@@ -114,44 +115,44 @@ const f = {
         },
         link: "/help"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, p = ({ args: o }) => {
-  const [t, i] = r(!1);
-  return /* @__PURE__ */ c("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(d, { text: "Open Sidebar (Top Items Only)", onClick: () => i(!0) }),
-    /* @__PURE__ */ n(s, { ...o, topItems: [
+}, g = ({ args: o }) => {
+  const [l, a] = p(!1);
+  return /* @__PURE__ */ k("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(C, { text: "Open Sidebar (Top Items Only)", onClick: () => a(!0) }),
+    /* @__PURE__ */ n(d, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/clock"
       },
       {
         icon: "Maximize",
         label: "Maximize",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/calendar"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, C = ({ args: o }) => {
-  const [t, i] = r(!1);
-  return /* @__PURE__ */ c("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(d, { text: "Open Sidebar with Many Items", onClick: () => i(!0) }),
-    /* @__PURE__ */ n(s, { ...o, topItems: [
+}, y = ({ args: o }) => {
+  const [l, a] = p(!1);
+  return /* @__PURE__ */ k("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(C, { text: "Open Sidebar with Many Items", onClick: () => a(!0) }),
+    /* @__PURE__ */ n(d, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
@@ -234,73 +235,110 @@ const f = {
         },
         link: "/feedback"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, S = {
-  render: (o) => /* @__PURE__ */ n(m, { args: o }),
+}, T = {
+  render: (o) => /* @__PURE__ */ n(u, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, I = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, O = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, x = {
-  render: (o) => /* @__PURE__ */ n(p, { args: o }),
+}, z = {
+  render: (o) => /* @__PURE__ */ n(g, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, y = {
-  render: (o) => /* @__PURE__ */ n(C, { args: o }),
+}, D = {
+  render: (o) => /* @__PURE__ */ n(y, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, O = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, M = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !0
   }
-}, T = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, B = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "30rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, v = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, N = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 1e3,
     overlayTransparent: !1
   }
-}, w = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, W = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 150,
     overlayTransparent: !1
   }
+}, H = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  },
+  play: async ({ canvasElement: o }) => {
+    const a = await b(o).getByRole("button", { name: /Open Sidebar/i });
+    await i.click(a), await new Promise((r) => setTimeout(r, 500)), await i.tab();
+    const s = o.ownerDocument.activeElement;
+    await m(s).toHaveTextContent("Maximize"), await i.tab(), await i.tab();
+    const t = o.ownerDocument.activeElement;
+    await m(t).toHaveTextContent("Calendar"), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab();
+    const e = o.ownerDocument.activeElement;
+    await m(e).toHaveTextContent("Clock");
+  }
+}, A = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  },
+  play: async ({ canvasElement: o, step: l }) => {
+    const a = b(o), s = b(o.ownerDocument.body), t = await a.getByRole("button", { name: /Open Sidebar/i }), e = w(window, "open").mockImplementation(
+      () => null
+    );
+    await l("Open Sidebar", async () => {
+      await i.click(t), await new Promise((r) => setTimeout(r, 500));
+    }), await l("Command + Click Maximize item", async () => {
+      const r = await s.findByRole("link", { name: /Maximize/i });
+      await i.keyboard("{Control>}"), await i.click(r), await i.keyboard("{/Control}"), await m(e).toHaveBeenCalledWith("/maximize", "_blank");
+    }), e.mockRestore();
+  }
 };
 export {
-  S as Basic,
-  T as CustomWidth,
-  w as FastTransition,
-  y as ManyItems,
-  v as SlowTransition,
-  x as TopItemsOnly,
-  O as TransparentOverlay,
-  I as WithTopAndBottomItems,
-  f as default
+  T as Basic,
+  B as CustomWidth,
+  W as FastTransition,
+  H as KeyboardNavigation,
+  D as ManyItems,
+  A as NewTabNavigation,
+  N as SlowTransition,
+  z as TopItemsOnly,
+  M as TransparentOverlay,
+  O as WithTopAndBottomItems,
+  I as default
 };

package/dist/components/molecules/navigation/sidebar/sidebar.js

@@ -1,30 +1,30 @@
-import { jsx as e, jsxs as o, Fragment as h } from "react/jsx-runtime";
-import { NavigationItem as t } from "../../../atoms/navigation/navigation-item/navigation-item.js";
-import { u as g, a as s } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
-import { R as v, P as x, O as b, C as N, T as y, D as k } from "../../../../index-C0ZrzaoZ.js";
+import { jsx as r, jsxs as o, Fragment as h } from "react/jsx-runtime";
+import { NavigationItem as s } from "../../../atoms/navigation/navigation-item/navigation-item.js";
+import { u as v, a as c } from "../../../../react-spring_web.modern-BzbxCya-.js";
+import { R as b, P as p, O as x, C as N, T as k, D as y } from "../../../../index-Ck3lRuRz.js";
 import "../../../styles/colors/colors.js";
 import { surface as C } from "../../../styles/colors/colormap.js";
 function z({
-  open: a,
-  setOpen: c,
+  open: i,
+  setOpen: t,
   topItems: d,
-  bottomItems: l = [],
-  transitionDuration: m = 300,
-  width: f = "22.5rem",
-  overlayTransparent: i = !1
+  bottomItems: a = [],
+  transitionDuration: f = 300,
+  width: u = "22.5rem",
+  overlayTransparent: n = !1
 }) {
-  const u = g(a, {
+  const m = v(i, {
     from: { opacity: 0, transform: "translateX(-100%)" },
     enter: { opacity: 1, transform: "translateX(0%)" },
     leave: { opacity: 1 },
     config: {
-      duration: m
+      duration: f
     }
   });
-  return /* @__PURE__ */ e(v, { open: a, onOpenChange: c, modal: !i, children: /* @__PURE__ */ e(x, { children: u(
-    (n, p) => p ? /* @__PURE__ */ o(h, { children: [
-      !i && /* @__PURE__ */ e(s.div, { style: { opacity: n.opacity }, children: /* @__PURE__ */ e(
-        b,
+  return /* @__PURE__ */ r(b, { open: i, onOpenChange: t, modal: !n, children: /* @__PURE__ */ r(p, { children: m(
+    (l, g) => g ? /* @__PURE__ */ o(h, { children: [
+      !n && /* @__PURE__ */ r(c.div, { style: { opacity: l.opacity }, children: /* @__PURE__ */ r(
+        x,
         {
           forceMount: !0,
           className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
@@ -34,17 +34,38 @@ function z({
           }
         }
       ) }),
-      /* @__PURE__ */ o(N, { forceMount: !0, "data-state": a ? "open" : "close", children: [
-        /* @__PURE__ */ e(y, { className: "sr-only", children: "Navigation Sidebar" }),
-        /* @__PURE__ */ e(k, { className: "sr-only", children: "Navigation menu with links to different sections" }),
+      /* @__PURE__ */ o(N, { forceMount: !0, "data-state": i ? "open" : "close", children: [
+        /* @__PURE__ */ r(k, { className: "sr-only", children: "Navigation Sidebar" }),
+        /* @__PURE__ */ r(y, { className: "sr-only", children: "Navigation menu with links to different sections" }),
         /* @__PURE__ */ o(
-          s.div,
+          c.div,
           {
-            style: { transform: n.transform, width: f },
-            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${i ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
+            style: { transform: l.transform, width: u },
+            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${n ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
             children: [
-              /* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) }),
-              l.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-lg p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) })
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((e) => /* @__PURE__ */ o(
+                "a",
+                {
+                  href: e.link,
+                  onClick: () => e.onClick(e.link),
+                  className: "group focus-visible:ring-2 focus-visible:ring-shadow-active focus:outline-none rounded hover:bg-bcolor-divider block no-underline",
+                  children: [
+                    "                        ",
+                    /* @__PURE__ */ r(s, { ...e, isNavigation: !0 })
+                  ]
+                },
+                e.label
+              )) }),
+              a.length > 0 && /* @__PURE__ */ r("div", { className: "flex flex-col gap-lg p-md", children: a.map((e) => /* @__PURE__ */ r(
+                "a",
+                {
+                  href: e.link,
+                  onClick: () => e.onClick(e.link),
+                  className: "group focus-visible:ring-2 focus-visible:ring-shadow-active focus:outline-none rounded hover:bg-bcolor-divider block no-underline",
+                  children: /* @__PURE__ */ r(s, { ...e, isNavigation: !0 })
+                },
+                e.label
+              )) })
             ]
           }
         )

package/dist/components/molecules/notifications/content/Content.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-CktvVE7I.js";
+import { f as o } from "../../../../index-Dpx0xQmQ.js";
 import { Content as t } from "./content.js";
 const e = {
   title: "@spotwork-ui/Content",

package/dist/components/molecules/snackbar/Snackbar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { S as r, P as c, V as d } from "../../../snackbar-CgqDB5xn.js";
+import { S as r, P as c, V as d } from "../../../snackbar-BUPlWHWk.js";
 import { Button as h } from "../button/button.js";
 const w = {
   title: "@spotwork-ui/Snackbar",

package/dist/components/molecules/snackbar/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../../snackbar-CgqDB5xn.js";
+import { S as o } from "../../../snackbar-BUPlWHWk.js";
 export {
   o as Snackbar
 };

package/dist/components/molecules/snackbar/snackbar.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as D } from "../../../snackbar-CgqDB5xn.js";
+import { S as D } from "../../../snackbar-BUPlWHWk.js";
 import "../../styles/tailwind-config/index.js";
 import "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
@@ -14,7 +14,7 @@ import "../../atoms/form/time-picker/time-picker.js";
 import "../../atoms/form/dropdown/dropdown.js";
 import "../filter/dropdown-selector/styles.js";
 import "../../atoms/form/dropdown-search/dropdown-search.js";
-import "../../../index-CYyrKZeH.js";
+import "../../../index-DMvnp-vR.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
@@ -23,7 +23,7 @@ import "../../atoms/form/timeselect/timeselect.js";
 import "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
-import "../../../react-spring_web.modern-BLL8Qmtg.js";
+import "../../../react-spring_web.modern-BzbxCya-.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
 import "./styles.js";

package/dist/components/molecules/tab-group/tab-group.js

@@ -1,7 +1,7 @@
 import { jsxs as p, jsx as i } from "react/jsx-runtime";
 import { pseudoBorder as f, smallContainer as u, largeContainer as c } from "./styles.js";
 import { Tab as d } from "../../atoms/tab/tab.js";
-import { t as l } from "../../../bundle-mjs-CAy1p0fn.js";
+import { t as l } from "../../../bundle-mjs-BjFsLjkg.js";
 function j({ nodesList: m, variant: r, activeTab: e, setActiveTab: s, className: a }) {
   const o = (t) => t.id ? t.id === e ? "active" : "default" : t.title === e ? "active" : "default";
   return /* @__PURE__ */ p("div", { className: l(r === "small" ? u : c, a), children: [

package/dist/components/molecules/tab-group/tabgroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { f as c } from "../../../index-CktvVE7I.js";
+import { f as c } from "../../../index-Dpx0xQmQ.js";
 import { useState as r } from "react";
 import { TabGroup as s } from "./tab-group.js";
 import { Typography as n } from "../../styles/typography/typography.js";

package/dist/components/styles/typography/typography.js

@@ -1,5 +1,5 @@
 import { createElement as f } from "react";
-import { p as l } from "../../../purify.es-eYFoHPwR.js";
+import { p as l } from "../../../purify.es-CcKdJiNO.js";
 import { styleMap as y, fontFamilyMap as T, fontWeightMap as L, fontSizeMap as d, textTypeMap as s } from "./style.js";
 import { glyphClassesMap as $ } from "../colors/colormap.js";
 function E({

package/dist/{index-DrfOymtc.js → index-B9jfXCBx.js}

@@ -1,8 +1,8 @@
 import * as s from "react";
-import { c as L, P as O, a as I, u as j, b as N, d as S, e as H } from "./index-DotfMcM0.js";
+import { P as L, a as I, u as O, b as N, c as S, d as j, e as H } from "./index-DLKZ-XYv.js";
 import { u as z } from "./index-BZPx6jYI.js";
 import { jsx as h, jsxs as G, Fragment as K } from "react/jsx-runtime";
-var _ = "Checkbox", [U, ee] = L(_), [X, g] = U(_);
+var _ = "Checkbox", [U] = H(_), [X, g] = U(_);
 function J(t) {
   const {
     __scopeCheckbox: a,
@@ -17,20 +17,20 @@ function J(t) {
     value: k = "on",
     // @ts-expect-error
     internal_do_not_use_render: i
-  } = t, [l, v] = j({
+  } = t, [l, x] = O({
     prop: c,
     defaultProp: r ?? !1,
     onChange: d,
     caller: _
-  }), [m, x] = s.useState(null), [R, o] = s.useState(null), n = s.useRef(!1), E = m ? !!f || !!m.closest("form") : (
+  }), [m, v] = s.useState(null), [R, o] = s.useState(null), n = s.useRef(!1), E = m ? !!f || !!m.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
   ), P = {
     checked: l,
     disabled: e,
-    setChecked: v,
+    setChecked: x,
     control: m,
-    setControl: x,
+    setControl: v,
     name: p,
     form: f,
     value: k,
@@ -61,9 +61,9 @@ var w = "CheckboxTrigger", B = s.forwardRef(
       setControl: k,
       setChecked: i,
       hasConsumerStoppedPropagationRef: l,
-      isFormControl: v,
+      isFormControl: x,
       bubbleInput: m
-    } = g(w, t), x = N(r, k), R = s.useRef(d);
+    } = g(w, t), v = N(r, k), R = s.useRef(d);
     return s.useEffect(() => {
       const o = e == null ? void 0 : e.form;
       if (o) {
@@ -82,12 +82,12 @@ var w = "CheckboxTrigger", B = s.forwardRef(
         disabled: p,
         value: f,
         ...u,
-        ref: x,
+        ref: v,
         onKeyDown: S(a, (o) => {
           o.key === "Enter" && o.preventDefault();
         }),
         onClick: S(c, (o) => {
-          i((n) => b(n) ? !0 : !n), m && v && (l.current = o.isPropagationStopped(), l.current || o.stopPropagation());
+          i((n) => b(n) ? !0 : !n), m && x && (l.current = o.isPropagationStopped(), l.current || o.stopPropagation());
         })
       }
     );
@@ -145,7 +145,7 @@ var M = "CheckboxIndicator", V = s.forwardRef(
   (t, a) => {
     const { __scopeCheckbox: c, forceMount: u, ...r } = t, e = g(M, c);
     return /* @__PURE__ */ h(
-      O,
+      L,
       {
         present: u || b(e.checked) || e.checked === !0,
         children: /* @__PURE__ */ h(
@@ -176,8 +176,8 @@ var T = "CheckboxBubbleInput", q = s.forwardRef(
       value: k,
       form: i,
       bubbleInput: l,
-      setBubbleInput: v
-    } = g(T, t), m = N(c, v), x = z(e), R = H(u);
+      setBubbleInput: x
+    } = g(T, t), m = N(c, x), v = z(e), R = j(u);
     s.useEffect(() => {
       const n = l;
       if (!n) return;
@@ -185,11 +185,11 @@ var T = "CheckboxBubbleInput", q = s.forwardRef(
         E,
         "checked"
       ).set, D = !r.current;
-      if (x !== e && y) {
+      if (v !== e && y) {
         const F = new Event("click", { bubbles: D });
         n.indeterminate = b(e), y.call(n, b(e) ? !1 : e), n.dispatchEvent(F);
       }
-    }, [l, x, e, r]);
+    }, [l, v, e, r]);
     const o = s.useRef(b(e) ? !1 : e);
     return /* @__PURE__ */ h(
       I.input,