@abgov/react-components 6.10.0-dev.2 → 6.10.0-dev.4

package/experimental/index.d.ts

@@ -1,2 +1,4 @@
 export * from './resizable-panel/ResizablePanel';
 export * from '../lib/drawer/drawer';
+export * from './work-side-menu/work-side-menu';
+export * from './work-side-menu-item/work-side-menu-item';

package/experimental/work-side-menu/work-side-menu.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode, JSX } from 'react';
+interface WCProps {
+    heading: string;
+    url: string;
+    "user-name"?: string;
+    "user-secondary-text"?: string;
+    testid?: string;
+    primaryContent?: ReactNode;
+    secondaryContent?: ReactNode;
+    accountContent?: ReactNode;
+    open?: boolean;
+    ref: React.RefObject<HTMLElement | null>;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-work-side-menu": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabWorkSideMenuProps {
+    heading: string;
+    url: string;
+    userName?: string;
+    userSecondaryText?: string;
+    testId?: string;
+    primaryContent?: ReactNode;
+    secondaryContent?: ReactNode;
+    accountContent?: ReactNode;
+    open?: boolean;
+    onToggle?: () => void;
+}
+export declare function GoabxWorkSideMenu({ heading, url, userName, userSecondaryText, testId, primaryContent, secondaryContent, accountContent, open, onToggle, }: GoabWorkSideMenuProps): JSX.Element;
+export default GoabxWorkSideMenu;

package/experimental/work-side-menu-item/work-side-menu-item.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'react';
+import { GoabWorkSideMenuItemType } from '@abgov/ui-components-common';
+interface WCProps {
+    label: string;
+    url: string;
+    badge?: string;
+    current?: string;
+    divider?: string;
+    icon?: string;
+    testid?: string;
+    type?: GoabWorkSideMenuItemType;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-work-side-menu-item": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabWorkSideMenuItemProps {
+    label: string;
+    url: string;
+    badge?: string;
+    current?: boolean;
+    divider?: boolean;
+    icon?: string;
+    testId?: string;
+    type?: GoabWorkSideMenuItemType;
+    children?: React.ReactNode;
+}
+export declare function GoabxWorkSideMenuItem(props: GoabWorkSideMenuItemProps): JSX.Element;
+export default GoabxWorkSideMenuItem;

package/experimental.js

@@ -84,6 +84,66 @@ function ResizablePanel(props) {
     }
   );
 }
+function GoabxWorkSideMenu({
+  heading,
+  url,
+  userName,
+  userSecondaryText,
+  testId,
+  primaryContent,
+  secondaryContent,
+  accountContent,
+  open,
+  onToggle
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onToggle) {
+      return;
+    }
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_toggle", onToggle);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
+    };
+  }, [el, onToggle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-work-side-menu",
+    {
+      ref: el,
+      heading,
+      url,
+      "user-name": userName,
+      "user-secondary-text": userSecondaryText,
+      open: open ? true : false,
+      testid: testId,
+      children: [
+        primaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "primary", children: primaryContent }),
+        secondaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "secondary", children: secondaryContent }),
+        accountContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "account", children: accountContent })
+      ]
+    }
+  );
+}
+function GoabxWorkSideMenuItem(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-work-side-menu-item",
+    {
+      label: props.label,
+      url: props.url,
+      badge: props.badge,
+      current: props.current ? "true" : void 0,
+      divider: props.divider ? "true" : void 0,
+      icon: props.icon,
+      testid: props.testId,
+      type: props.type,
+      children: props.children
+    }
+  );
+}
 exports.GoabDrawer = icon.GoabDrawer;
+exports.GoabxWorkSideMenu = GoabxWorkSideMenu;
+exports.GoabxWorkSideMenuItem = GoabxWorkSideMenuItem;
 exports.ResizablePanel = ResizablePanel;
 //# sourceMappingURL=experimental.js.map

package/experimental.js.map

@@ -1 +1 @@
-{"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n  minWidth?: number;\n  children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n  // element refs\n  const bgRef = useRef<HTMLDivElement | null>(null);\n  const sectionRef = useRef<HTMLElement | null>(null);\n  const widthRef = useRef<HTMLDivElement | null>(null);\n  const handleRef = useRef<HTMLDivElement | null>(null);\n\n  // value refs\n  const maxWidth = useRef<number>(0);\n  const resizeBarState = useRef<MouseState>(\"static\");\n\n  // state\n  const [width, setWidth] = useState<string>();\n\n  useEffect(() => {\n    maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n  }, []);\n\n  function resetMouseState() {\n    resizeBarState.current = \"static\";\n  }\n\n  function onMouseDown(_: React.MouseEvent) {\n    resizeBarState.current = \"active\";\n    window.addEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseUp(_: React.MouseEvent) {\n    resizeBarState.current = \"static\";\n    window.removeEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseMove(e: React.MouseEvent) {\n    if (resizeBarState.current === \"static\") {\n      return;\n    }\n\n    const sectionEl = sectionRef.current;\n    const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n    const mouseX = e.clientX;\n    const minWidth = props.minWidth || 0;\n\n    if (mouseX <= 0) {\n      return;\n    }\n\n    // mouse direction\n    const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n    // set width of preview area\n    const calcWidth = Math.max(\n      newXPos - xOffset,\n      Math.min(mouseX - xOffset, maxWidth.current),\n    );\n    const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n    // prevent dragging bar more than allowed\n    if (elementWidth <= minWidth) {\n      return;\n    }\n\n    // set resizable area width\n    sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n    // set displayed px width\n    widthRef.current?.setAttribute(\n      \"style\",\n      `right: ${maxWidth.current - calcWidth + 32}px`,\n    );\n    setWidth(`${Math.round(elementWidth)}px`);\n  }\n\n  return (\n    <div\n      ref={bgRef}\n      className={Css.panelBackground}\n      onMouseDown={onMouseDown}\n      onMouseMove={onMouseMove}\n      onMouseUp={onMouseUp}\n    >\n      <section ref={sectionRef} className={Css.panel}>\n        <div className={Css.children}>{props.children}</div>\n        <div ref={handleRef} className={Css.handle}>\n          <GoabIcon type=\"reorder-two\" />\n        </div>\n      </section>\n      <div ref={widthRef} className={Css.width}>\n        {width}\n      </div>\n    </div>\n  );\n}\n\nexport default ResizablePanel;\n"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon"],"mappings":";;;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAEjE,QAAM,QAAQA,MAAAA,OAA8B,IAAI;AAChD,QAAM,aAAaA,MAAAA,OAA2B,IAAI;AAClD,QAAM,WAAWA,MAAAA,OAA8B,IAAI;AACnD,QAAM,YAAYA,MAAAA,OAA8B,IAAI;AAGpD,QAAM,WAAWA,MAAAA,OAAe,CAAC;AACjC,QAAM,iBAAiBA,MAAAA,OAAmB,QAAQ;AAGlD,QAAM,CAACC,QAAO,QAAQ,IAAIC,eAAA;AAE1BC,QAAAA,UAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAA,CAAE;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AACzB,WAAO,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AACzB,WAAO,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACxC,QAAI,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACjB,UAAM,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAA,gCAAC,WAAA,EAAQ,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAAC,+BAAC,OAAA,EAAI,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9CA,2BAAAA,IAAC,OAAA,EAAI,KAAK,WAAW,WAAW,IAAI,QAClC,UAAAA,2BAAAA,IAACC,KAAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAAA,CAC/B;AAAA,QAAA,GACF;AAAA,uCACC,OAAA,EAAI,KAAK,UAAU,WAAW,IAAI,OAChC,UAAAL,OAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}
+{"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/experimental/work-side-menu/work-side-menu.tsx","../../../libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n  minWidth?: number;\n  children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n  // element refs\n  const bgRef = useRef<HTMLDivElement | null>(null);\n  const sectionRef = useRef<HTMLElement | null>(null);\n  const widthRef = useRef<HTMLDivElement | null>(null);\n  const handleRef = useRef<HTMLDivElement | null>(null);\n\n  // value refs\n  const maxWidth = useRef<number>(0);\n  const resizeBarState = useRef<MouseState>(\"static\");\n\n  // state\n  const [width, setWidth] = useState<string>();\n\n  useEffect(() => {\n    maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n  }, []);\n\n  function resetMouseState() {\n    resizeBarState.current = \"static\";\n  }\n\n  function onMouseDown(_: React.MouseEvent) {\n    resizeBarState.current = \"active\";\n    window.addEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseUp(_: React.MouseEvent) {\n    resizeBarState.current = \"static\";\n    window.removeEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseMove(e: React.MouseEvent) {\n    if (resizeBarState.current === \"static\") {\n      return;\n    }\n\n    const sectionEl = sectionRef.current;\n    const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n    const mouseX = e.clientX;\n    const minWidth = props.minWidth || 0;\n\n    if (mouseX <= 0) {\n      return;\n    }\n\n    // mouse direction\n    const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n    // set width of preview area\n    const calcWidth = Math.max(\n      newXPos - xOffset,\n      Math.min(mouseX - xOffset, maxWidth.current),\n    );\n    const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n    // prevent dragging bar more than allowed\n    if (elementWidth <= minWidth) {\n      return;\n    }\n\n    // set resizable area width\n    sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n    // set displayed px width\n    widthRef.current?.setAttribute(\n      \"style\",\n      `right: ${maxWidth.current - calcWidth + 32}px`,\n    );\n    setWidth(`${Math.round(elementWidth)}px`);\n  }\n\n  return (\n    <div\n      ref={bgRef}\n      className={Css.panelBackground}\n      onMouseDown={onMouseDown}\n      onMouseMove={onMouseMove}\n      onMouseUp={onMouseUp}\n    >\n      <section ref={sectionRef} className={Css.panel}>\n        <div className={Css.children}>{props.children}</div>\n        <div ref={handleRef} className={Css.handle}>\n          <GoabIcon type=\"reorder-two\" />\n        </div>\n      </section>\n      <div ref={widthRef} className={Css.width}>\n        {width}\n      </div>\n    </div>\n  );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef, type JSX } from \"react\";\n\ninterface WCProps {\n  heading: string;\n  url: string;\n  \"user-name\"?: string;\n  \"user-secondary-text\"?: string;\n  testid?: string;\n  primaryContent?: ReactNode;\n  secondaryContent?: ReactNode;\n  accountContent?: ReactNode;\n  open?: boolean;\n  ref: React.RefObject<HTMLElement | null>;\n}\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-work-side-menu\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabWorkSideMenuProps {\n  heading: string;\n  url: string;\n  userName?: string;\n  userSecondaryText?: string;\n  testId?: string;\n  primaryContent?: ReactNode;\n  secondaryContent?: ReactNode;\n  accountContent?: ReactNode;\n  open?: boolean;\n  onToggle?: () => void;\n}\n\nexport function GoabxWorkSideMenu({\n  heading,\n  url,\n  userName,\n  userSecondaryText,\n  testId,\n  primaryContent,\n  secondaryContent,\n  accountContent,\n  open,\n  onToggle,\n}: GoabWorkSideMenuProps): JSX.Element {\n  const el = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!el?.current || !onToggle) {\n      return;\n    }\n    el.current?.addEventListener(\"_toggle\", onToggle);\n    return () => {\n      el.current?.removeEventListener(\"_toggle\", onToggle);\n    };\n  }, [el, onToggle]);\n  return (\n    <goa-work-side-menu\n      ref={el}\n      heading={heading}\n      url={url}\n      user-name={userName}\n      user-secondary-text={userSecondaryText}\n      open={open ? true : false}\n      testid={testId}\n    >\n      {primaryContent && <div slot=\"primary\">{primaryContent}</div>}\n      {secondaryContent && <div slot=\"secondary\">{secondaryContent}</div>}\n      {accountContent && <div slot=\"account\">{accountContent}</div>}\n    </goa-work-side-menu>\n  );\n}\n\nexport default GoabxWorkSideMenu;\n","import { type JSX } from \"react\";\nimport { GoabWorkSideMenuItemType } from \"@abgov/ui-components-common\";\ninterface WCProps {\n  label: string;\n  url: string;\n  badge?: string;\n  current?: string;\n  divider?: string;\n  icon?: string;\n  testid?: string;\n  type?: GoabWorkSideMenuItemType;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-work-side-menu-item\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabWorkSideMenuItemProps {\n  label: string;\n  url: string;\n  badge?: string;\n  current?: boolean;\n  divider?: boolean;\n  icon?: string;\n  testId?: string;\n  type?: GoabWorkSideMenuItemType;\n  children?: React.ReactNode;\n}\n\nexport function GoabxWorkSideMenuItem(props: GoabWorkSideMenuItemProps): JSX.Element {\n  return (\n    <goa-work-side-menu-item\n      label={props.label}\n      url={props.url}\n      badge={props.badge}\n      current={props.current ? \"true\" : undefined}\n      divider={props.divider ? \"true\" : undefined}\n      icon={props.icon}\n      testid={props.testId}\n      type={props.type}\n    >\n      {props.children}\n    </goa-work-side-menu-item>\n  );\n}\n\nexport default GoabxWorkSideMenuItem;\n"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon","_a"],"mappings":"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"}

package/experimental.mjs

@@ -83,8 +83,68 @@ function ResizablePanel(props) {
     }
   );
 }
+function GoabxWorkSideMenu({
+  heading,
+  url,
+  userName,
+  userSecondaryText,
+  testId,
+  primaryContent,
+  secondaryContent,
+  accountContent,
+  open,
+  onToggle
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onToggle) {
+      return;
+    }
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_toggle", onToggle);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
+    };
+  }, [el, onToggle]);
+  return /* @__PURE__ */ jsxs(
+    "goa-work-side-menu",
+    {
+      ref: el,
+      heading,
+      url,
+      "user-name": userName,
+      "user-secondary-text": userSecondaryText,
+      open: open ? true : false,
+      testid: testId,
+      children: [
+        primaryContent && /* @__PURE__ */ jsx("div", { slot: "primary", children: primaryContent }),
+        secondaryContent && /* @__PURE__ */ jsx("div", { slot: "secondary", children: secondaryContent }),
+        accountContent && /* @__PURE__ */ jsx("div", { slot: "account", children: accountContent })
+      ]
+    }
+  );
+}
+function GoabxWorkSideMenuItem(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-work-side-menu-item",
+    {
+      label: props.label,
+      url: props.url,
+      badge: props.badge,
+      current: props.current ? "true" : void 0,
+      divider: props.divider ? "true" : void 0,
+      icon: props.icon,
+      testid: props.testId,
+      type: props.type,
+      children: props.children
+    }
+  );
+}
 export {
   G as GoabDrawer,
+  GoabxWorkSideMenu,
+  GoabxWorkSideMenuItem,
   ResizablePanel
 };
 //# sourceMappingURL=experimental.mjs.map

package/experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n  minWidth?: number;\n  children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n  // element refs\n  const bgRef = useRef<HTMLDivElement | null>(null);\n  const sectionRef = useRef<HTMLElement | null>(null);\n  const widthRef = useRef<HTMLDivElement | null>(null);\n  const handleRef = useRef<HTMLDivElement | null>(null);\n\n  // value refs\n  const maxWidth = useRef<number>(0);\n  const resizeBarState = useRef<MouseState>(\"static\");\n\n  // state\n  const [width, setWidth] = useState<string>();\n\n  useEffect(() => {\n    maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n  }, []);\n\n  function resetMouseState() {\n    resizeBarState.current = \"static\";\n  }\n\n  function onMouseDown(_: React.MouseEvent) {\n    resizeBarState.current = \"active\";\n    window.addEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseUp(_: React.MouseEvent) {\n    resizeBarState.current = \"static\";\n    window.removeEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseMove(e: React.MouseEvent) {\n    if (resizeBarState.current === \"static\") {\n      return;\n    }\n\n    const sectionEl = sectionRef.current;\n    const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n    const mouseX = e.clientX;\n    const minWidth = props.minWidth || 0;\n\n    if (mouseX <= 0) {\n      return;\n    }\n\n    // mouse direction\n    const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n    // set width of preview area\n    const calcWidth = Math.max(\n      newXPos - xOffset,\n      Math.min(mouseX - xOffset, maxWidth.current),\n    );\n    const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n    // prevent dragging bar more than allowed\n    if (elementWidth <= minWidth) {\n      return;\n    }\n\n    // set resizable area width\n    sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n    // set displayed px width\n    widthRef.current?.setAttribute(\n      \"style\",\n      `right: ${maxWidth.current - calcWidth + 32}px`,\n    );\n    setWidth(`${Math.round(elementWidth)}px`);\n  }\n\n  return (\n    <div\n      ref={bgRef}\n      className={Css.panelBackground}\n      onMouseDown={onMouseDown}\n      onMouseMove={onMouseMove}\n      onMouseUp={onMouseUp}\n    >\n      <section ref={sectionRef} className={Css.panel}>\n        <div className={Css.children}>{props.children}</div>\n        <div ref={handleRef} className={Css.handle}>\n          <GoabIcon type=\"reorder-two\" />\n        </div>\n      </section>\n      <div ref={widthRef} className={Css.width}>\n        {width}\n      </div>\n    </div>\n  );\n}\n\nexport default ResizablePanel;\n"],"names":["width"],"mappings":";;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAEjE,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,aAAa,OAA2B,IAAI;AAClD,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,YAAY,OAA8B,IAAI;AAGpD,QAAM,WAAW,OAAe,CAAC;AACjC,QAAM,iBAAiB,OAAmB,QAAQ;AAGlD,QAAM,CAACA,QAAO,QAAQ,IAAI,SAAA;AAE1B,YAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAA,CAAE;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AACzB,WAAO,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AACzB,WAAO,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACxC,QAAI,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACjB,UAAM,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,WAAA,EAAQ,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9C,oBAAC,OAAA,EAAI,KAAK,WAAW,WAAW,IAAI,QAClC,UAAA,oBAAC,UAAA,EAAS,MAAK,cAAA,CAAc,EAAA,CAC/B;AAAA,QAAA,GACF;AAAA,4BACC,OAAA,EAAI,KAAK,UAAU,WAAW,IAAI,OAChC,UAAAA,OAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/experimental/work-side-menu/work-side-menu.tsx","../../../libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n  minWidth?: number;\n  children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n  // element refs\n  const bgRef = useRef<HTMLDivElement | null>(null);\n  const sectionRef = useRef<HTMLElement | null>(null);\n  const widthRef = useRef<HTMLDivElement | null>(null);\n  const handleRef = useRef<HTMLDivElement | null>(null);\n\n  // value refs\n  const maxWidth = useRef<number>(0);\n  const resizeBarState = useRef<MouseState>(\"static\");\n\n  // state\n  const [width, setWidth] = useState<string>();\n\n  useEffect(() => {\n    maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n  }, []);\n\n  function resetMouseState() {\n    resizeBarState.current = \"static\";\n  }\n\n  function onMouseDown(_: React.MouseEvent) {\n    resizeBarState.current = \"active\";\n    window.addEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseUp(_: React.MouseEvent) {\n    resizeBarState.current = \"static\";\n    window.removeEventListener(\"mouseup\", resetMouseState);\n  }\n\n  function onMouseMove(e: React.MouseEvent) {\n    if (resizeBarState.current === \"static\") {\n      return;\n    }\n\n    const sectionEl = sectionRef.current;\n    const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n    const mouseX = e.clientX;\n    const minWidth = props.minWidth || 0;\n\n    if (mouseX <= 0) {\n      return;\n    }\n\n    // mouse direction\n    const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n    // set width of preview area\n    const calcWidth = Math.max(\n      newXPos - xOffset,\n      Math.min(mouseX - xOffset, maxWidth.current),\n    );\n    const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n    // prevent dragging bar more than allowed\n    if (elementWidth <= minWidth) {\n      return;\n    }\n\n    // set resizable area width\n    sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n    // set displayed px width\n    widthRef.current?.setAttribute(\n      \"style\",\n      `right: ${maxWidth.current - calcWidth + 32}px`,\n    );\n    setWidth(`${Math.round(elementWidth)}px`);\n  }\n\n  return (\n    <div\n      ref={bgRef}\n      className={Css.panelBackground}\n      onMouseDown={onMouseDown}\n      onMouseMove={onMouseMove}\n      onMouseUp={onMouseUp}\n    >\n      <section ref={sectionRef} className={Css.panel}>\n        <div className={Css.children}>{props.children}</div>\n        <div ref={handleRef} className={Css.handle}>\n          <GoabIcon type=\"reorder-two\" />\n        </div>\n      </section>\n      <div ref={widthRef} className={Css.width}>\n        {width}\n      </div>\n    </div>\n  );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef, type JSX } from \"react\";\n\ninterface WCProps {\n  heading: string;\n  url: string;\n  \"user-name\"?: string;\n  \"user-secondary-text\"?: string;\n  testid?: string;\n  primaryContent?: ReactNode;\n  secondaryContent?: ReactNode;\n  accountContent?: ReactNode;\n  open?: boolean;\n  ref: React.RefObject<HTMLElement | null>;\n}\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-work-side-menu\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabWorkSideMenuProps {\n  heading: string;\n  url: string;\n  userName?: string;\n  userSecondaryText?: string;\n  testId?: string;\n  primaryContent?: ReactNode;\n  secondaryContent?: ReactNode;\n  accountContent?: ReactNode;\n  open?: boolean;\n  onToggle?: () => void;\n}\n\nexport function GoabxWorkSideMenu({\n  heading,\n  url,\n  userName,\n  userSecondaryText,\n  testId,\n  primaryContent,\n  secondaryContent,\n  accountContent,\n  open,\n  onToggle,\n}: GoabWorkSideMenuProps): JSX.Element {\n  const el = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!el?.current || !onToggle) {\n      return;\n    }\n    el.current?.addEventListener(\"_toggle\", onToggle);\n    return () => {\n      el.current?.removeEventListener(\"_toggle\", onToggle);\n    };\n  }, [el, onToggle]);\n  return (\n    <goa-work-side-menu\n      ref={el}\n      heading={heading}\n      url={url}\n      user-name={userName}\n      user-secondary-text={userSecondaryText}\n      open={open ? true : false}\n      testid={testId}\n    >\n      {primaryContent && <div slot=\"primary\">{primaryContent}</div>}\n      {secondaryContent && <div slot=\"secondary\">{secondaryContent}</div>}\n      {accountContent && <div slot=\"account\">{accountContent}</div>}\n    </goa-work-side-menu>\n  );\n}\n\nexport default GoabxWorkSideMenu;\n","import { type JSX } from \"react\";\nimport { GoabWorkSideMenuItemType } from \"@abgov/ui-components-common\";\ninterface WCProps {\n  label: string;\n  url: string;\n  badge?: string;\n  current?: string;\n  divider?: string;\n  icon?: string;\n  testid?: string;\n  type?: GoabWorkSideMenuItemType;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-work-side-menu-item\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabWorkSideMenuItemProps {\n  label: string;\n  url: string;\n  badge?: string;\n  current?: boolean;\n  divider?: boolean;\n  icon?: string;\n  testId?: string;\n  type?: GoabWorkSideMenuItemType;\n  children?: React.ReactNode;\n}\n\nexport function GoabxWorkSideMenuItem(props: GoabWorkSideMenuItemProps): JSX.Element {\n  return (\n    <goa-work-side-menu-item\n      label={props.label}\n      url={props.url}\n      badge={props.badge}\n      current={props.current ? \"true\" : undefined}\n      divider={props.divider ? \"true\" : undefined}\n      icon={props.icon}\n      testid={props.testId}\n      type={props.type}\n    >\n      {props.children}\n    </goa-work-side-menu-item>\n  );\n}\n\nexport default GoabxWorkSideMenuItem;\n"],"names":["width","_a"],"mappings":"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"}

package/index.js

@@ -2109,12 +2109,15 @@ const formatters = {
   G: function(date, token, localize2) {
     const era = date.getFullYear() > 0 ? 1 : 0;
     switch (token) {
+      // AD, BC
       case "G":
       case "GG":
       case "GGG":
         return localize2.era(era, { width: "abbreviated" });
+      // A, B
       case "GGGGG":
         return localize2.era(era, { width: "narrow" });
+      // Anno Domini, Before Christ
       case "GGGG":
       default:
         return localize2.era(era, { width: "wide" });
@@ -2164,22 +2167,28 @@ const formatters = {
   Q: function(date, token, localize2) {
     const quarter = Math.ceil((date.getMonth() + 1) / 3);
     switch (token) {
+      // 1, 2, 3, 4
       case "Q":
         return String(quarter);
+      // 01, 02, 03, 04
       case "QQ":
         return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
       case "Qo":
         return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
       case "QQQ":
         return localize2.quarter(quarter, {
           width: "abbreviated",
           context: "formatting"
         });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
       case "QQQQQ":
         return localize2.quarter(quarter, {
           width: "narrow",
           context: "formatting"
         });
+      // 1st quarter, 2nd quarter, ...
       case "QQQQ":
       default:
         return localize2.quarter(quarter, {
@@ -2192,22 +2201,28 @@ const formatters = {
   q: function(date, token, localize2) {
     const quarter = Math.ceil((date.getMonth() + 1) / 3);
     switch (token) {
+      // 1, 2, 3, 4
       case "q":
         return String(quarter);
+      // 01, 02, 03, 04
       case "qq":
         return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
       case "qo":
         return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
       case "qqq":
         return localize2.quarter(quarter, {
           width: "abbreviated",
           context: "standalone"
         });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
       case "qqqqq":
         return localize2.quarter(quarter, {
           width: "narrow",
           context: "standalone"
         });
+      // 1st quarter, 2nd quarter, ...
       case "qqqq":
       default:
         return localize2.quarter(quarter, {
@@ -2223,18 +2238,22 @@ const formatters = {
       case "M":
       case "MM":
         return lightFormatters.M(date, token);
+      // 1st, 2nd, ..., 12th
       case "Mo":
         return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
       case "MMM":
         return localize2.month(month, {
           width: "abbreviated",
           context: "formatting"
         });
+      // J, F, ..., D
       case "MMMMM":
         return localize2.month(month, {
           width: "narrow",
           context: "formatting"
         });
+      // January, February, ..., December
       case "MMMM":
       default:
         return localize2.month(month, { width: "wide", context: "formatting" });
@@ -2244,22 +2263,28 @@ const formatters = {
   L: function(date, token, localize2) {
     const month = date.getMonth();
     switch (token) {
+      // 1, 2, ..., 12
       case "L":
         return String(month + 1);
+      // 01, 02, ..., 12
       case "LL":
         return addLeadingZeros(month + 1, 2);
+      // 1st, 2nd, ..., 12th
       case "Lo":
         return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
       case "LLL":
         return localize2.month(month, {
           width: "abbreviated",
           context: "standalone"
         });
+      // J, F, ..., D
       case "LLLLL":
         return localize2.month(month, {
           width: "narrow",
           context: "standalone"
         });
+      // January, February, ..., December
       case "LLLL":
       default:
         return localize2.month(month, { width: "wide", context: "standalone" });
@@ -2300,6 +2325,7 @@ const formatters = {
   E: function(date, token, localize2) {
     const dayOfWeek = date.getDay();
     switch (token) {
+      // Tue
       case "E":
       case "EE":
       case "EEE":
@@ -2307,16 +2333,19 @@ const formatters = {
           width: "abbreviated",
           context: "formatting"
         });
+      // T
       case "EEEEE":
         return localize2.day(dayOfWeek, {
           width: "narrow",
           context: "formatting"
         });
+      // Tu
       case "EEEEEE":
         return localize2.day(dayOfWeek, {
           width: "short",
           context: "formatting"
         });
+      // Tuesday
       case "EEEE":
       default:
         return localize2.day(dayOfWeek, {
@@ -2330,10 +2359,13 @@ const formatters = {
     const dayOfWeek = date.getDay();
     const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
     switch (token) {
+      // Numerical value (Nth day of week with current locale or weekStartsOn)
       case "e":
         return String(localDayOfWeek);
+      // Padded numerical value
       case "ee":
         return addLeadingZeros(localDayOfWeek, 2);
+      // 1st, 2nd, ..., 7th
       case "eo":
         return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
       case "eee":
@@ -2341,16 +2373,19 @@ const formatters = {
           width: "abbreviated",
           context: "formatting"
         });
+      // T
       case "eeeee":
         return localize2.day(dayOfWeek, {
           width: "narrow",
           context: "formatting"
         });
+      // Tu
       case "eeeeee":
         return localize2.day(dayOfWeek, {
           width: "short",
           context: "formatting"
         });
+      // Tuesday
       case "eeee":
       default:
         return localize2.day(dayOfWeek, {
@@ -2364,10 +2399,13 @@ const formatters = {
     const dayOfWeek = date.getDay();
     const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
     switch (token) {
+      // Numerical value (same as in `e`)
       case "c":
         return String(localDayOfWeek);
+      // Padded numerical value
       case "cc":
         return addLeadingZeros(localDayOfWeek, token.length);
+      // 1st, 2nd, ..., 7th
       case "co":
         return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
       case "ccc":
@@ -2375,16 +2413,19 @@ const formatters = {
           width: "abbreviated",
           context: "standalone"
         });
+      // T
       case "ccccc":
         return localize2.day(dayOfWeek, {
           width: "narrow",
           context: "standalone"
         });
+      // Tu
       case "cccccc":
         return localize2.day(dayOfWeek, {
           width: "short",
           context: "standalone"
         });
+      // Tuesday
       case "cccc":
       default:
         return localize2.day(dayOfWeek, {
@@ -2398,27 +2439,34 @@ const formatters = {
     const dayOfWeek = date.getDay();
     const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
     switch (token) {
+      // 2
       case "i":
         return String(isoDayOfWeek);
+      // 02
       case "ii":
         return addLeadingZeros(isoDayOfWeek, token.length);
+      // 2nd
       case "io":
         return localize2.ordinalNumber(isoDayOfWeek, { unit: "day" });
+      // Tue
       case "iii":
         return localize2.day(dayOfWeek, {
           width: "abbreviated",
           context: "formatting"
         });
+      // T
       case "iiiii":
         return localize2.day(dayOfWeek, {
           width: "narrow",
           context: "formatting"
         });
+      // Tu
       case "iiiiii":
         return localize2.day(dayOfWeek, {
           width: "short",
           context: "formatting"
         });
+      // Tuesday
       case "iiii":
       default:
         return localize2.day(dayOfWeek, {
@@ -2584,13 +2632,21 @@ const formatters = {
       return "Z";
     }
     switch (token) {
+      // Hours and optional minutes
       case "X":
         return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XX`
       case "XXXX":
       case "XX":
         return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XXX`
       case "XXXXX":
       case "XXX":
+      // Hours and minutes with `:` delimiter
       default:
         return formatTimezone(timezoneOffset, ":");
     }
@@ -2599,13 +2655,21 @@ const formatters = {
   x: function(date, token, _localize) {
     const timezoneOffset = date.getTimezoneOffset();
     switch (token) {
+      // Hours and optional minutes
       case "x":
         return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xx`
       case "xxxx":
       case "xx":
         return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xxx`
       case "xxxxx":
       case "xxx":
+      // Hours and minutes with `:` delimiter
       default:
         return formatTimezone(timezoneOffset, ":");
     }
@@ -2614,10 +2678,12 @@ const formatters = {
   O: function(date, token, _localize) {
     const timezoneOffset = date.getTimezoneOffset();
     switch (token) {
+      // Short
       case "O":
       case "OO":
       case "OOO":
         return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
       case "OOOO":
       default:
         return "GMT" + formatTimezone(timezoneOffset, ":");
@@ -2627,10 +2693,12 @@ const formatters = {
   z: function(date, token, _localize) {
     const timezoneOffset = date.getTimezoneOffset();
     switch (token) {
+      // Short
       case "z":
       case "zz":
       case "zzz":
         return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
       case "zzzz":
       default:
         return "GMT" + formatTimezone(timezoneOffset, ":");
@@ -3804,6 +3872,7 @@ function GoabText(props) {
       size: props.size,
       maxwidth: props.maxWidth,
       color: props.color,
+      id: props.id,
       mt: props.mt,
       mb: props.mb,
       ml: props.ml,