@abgov/react-components 6.10.0-dev.1 → 6.10.0-dev.11

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const icon = require("./icon-CK55b563.js");
+const icon = require("./icon-B3p90m2x.js");
 const panel = "_panel_m3z4m_1";
 const panelBackground = "_panelBackground_m3z4m_8";
 const children = "_children_m3z4m_12";
@@ -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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { a as GoabIcon } from "./icon-CoYGOp1V.mjs";
-import { G } from "./icon-CoYGOp1V.mjs";
+import { a as GoabIcon } from "./icon-CCNDGfBO.mjs";
+import { G } from "./icon-CCNDGfBO.mjs";
 const panel = "_panel_m3z4m_1";
 const panelBackground = "_panelBackground_m3z4m_8";
 const children = "_children_m3z4m_12";
@@ -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/{icon-CK55b563.js → icon-B3p90m2x.js}

@@ -1,6 +1,20 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const lowercase = (input) => input.toLowerCase();
+const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function transformProps(props, transform = lowercase) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key.startsWith("data-")) {
+      result[key] = value;
+    } else {
+      result[transform(key)] = value;
+    }
+  }
+  return result;
+}
 function GoabDrawer({
   position,
   open,
@@ -41,40 +55,21 @@ function GoabDrawer({
   );
 }
 function GoabIcon({
-  type,
-  theme,
-  size,
   inverted,
-  // TODO: change to boolean only
-  fillColor,
-  opacity,
-  title,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-icon",
     {
-      type,
-      theme,
-      size,
       inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
-      fillcolor: fillColor,
-      opacity,
-      title,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId
+      ..._props
     }
   );
 }
 exports.GoabDrawer = GoabDrawer;
 exports.GoabIcon = GoabIcon;
-//# sourceMappingURL=icon-CK55b563.js.map
+exports.kebab = kebab;
+exports.lowercase = lowercase;
+exports.transformProps = transformProps;
+//# sourceMappingURL=icon-B3p90m2x.js.map

package/icon-B3p90m2x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-B3p90m2x.js","sources":["../../../libs/react-components/src/lib/common/extract-props.ts","../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["/**\n * Transform function type for converting prop names to attribute names.\n */\nexport type TransformFn = (input: string) => string;\n\n/**\n * Converts a camelCase string to lowercase (e.g., \"headingSize\" -> \"headingsize\")\n */\nexport const lowercase: TransformFn = (input) => input.toLowerCase();\n\n/**\n * Converts a camelCase string to kebab-case (e.g., \"verticalPosition\" -> \"vertical-position\")\n */\nexport const kebab: TransformFn = (input) =>\n  input.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n\n/**\n * Transforms React props to web component attributes.\n * Use object destructuring to extract props that need special handling,\n * then pass the rest through this function.\n *\n * @param props - The remaining props after destructuring\n * @param transform - Transform function (lowercase or kebab), defaults to lowercase\n * @returns Converted props ready to spread on the web component\n *\n * @example\n * export function GoabAccordion({open, onChange, headingContent, children, ...rest}: GoabAccordionProps) {\n *   const _props = transformProps<WCProps>(rest, lowercase);\n *   return (\n *     <goa-accordion open={open ? \"true\" : undefined} {..._props}>\n *       {children}\n *     </goa-accordion>\n *   );\n * }\n */\nexport function transformProps<WC = Record<string, unknown>>(\n  props: object,\n  transform: TransformFn = lowercase\n): WC {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    // Skip undefined values - they shouldn't be passed to web components\n    if (value === undefined) continue;\n\n    // Data attributes pass through unchanged\n    if (key.startsWith(\"data-\")) {\n      result[key] = value;\n    } else {\n      result[transform(key)] = value;\n    }\n  }\n\n  return result as WC;\n}\n","import { ReactNode, useEffect, useRef, type JSX } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string;\n  maxsize?: GoabDrawerSize;\n  testid?: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabDrawerProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string | ReactNode;\n  maxSize?: GoabDrawerSize;\n  testId?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  onClose: () => void;\n}\n\nexport function GoabDrawer({\n  position,\n  open,\n  heading,\n  maxSize,\n  testId,\n  actions,\n  children,\n  onClose,\n}: GoabDrawerProps): JSX.Element {\n  const el = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!el?.current || !onClose) {\n      return;\n    }\n    el.current?.addEventListener(\"_close\", onClose);\n    return () => {\n      el.current?.removeEventListener(\"_close\", onClose);\n    };\n  }, [el, onClose]);\n\n  return (\n    <goa-drawer\n      ref={el}\n      position={position}\n      open={open ? true : undefined}\n      heading={typeof heading === \"string\" ? heading : undefined}\n      maxsize={maxSize}\n      testid={testId}\n    >\n      {heading && typeof heading !== \"string\" && <div slot=\"heading\">{heading}</div>}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {children}\n    </goa-drawer>\n  );\n}\n\nexport default GoabDrawer;\n","import {\n  GoabIconOverridesType,\n  GoabIconSize,\n  GoabIconTheme,\n  GoabIconType,\n  Margins, DataAttributes,\n} from \"@abgov/ui-components-common\";\n\nimport type { JSX } from \"react\";\nimport { transformProps, lowercase } from \"../common/extract-props\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n    }\n  }\n}\n\nexport interface GoabIconProps extends Margins, DataAttributes {\n  type: GoabIconType | GoabIconOverridesType;\n  size?: GoabIconSize;\n  theme?: GoabIconTheme;\n  inverted?: string | boolean; // TODO: Change type to only boolean\n  fillColor?: string;\n  opacity?: number;\n  title?: string;\n  ariaLabel?: string;\n  testId?: string;\n}\n\ninterface WCProps extends Margins {\n  type: GoabIconType | GoabIconOverridesType;\n  theme?: GoabIconTheme;\n  size?: GoabIconSize;\n  inverted?: string;\n  fillcolor?: string;\n  opacity?: number;\n  title?: string;\n  arialabel?: string;\n  testid?: string;\n}\n\nexport function GoabIcon({\n  inverted,\n  ...rest\n}: GoabIconProps): JSX.Element {\n  const _props = transformProps<WCProps>(rest, lowercase);\n\n  return (\n    <goa-icon\n      inverted={\n        typeof inverted === \"boolean\" ? (inverted ? \"true\" : undefined) : inverted\n      }\n      {..._props}\n    />\n  );\n}\n"],"names":["useRef","useEffect","_a","jsxs","jsx"],"mappings":";;;AAQO,MAAM,YAAyB,CAAC,UAAU,MAAM,YAAA;AAKhD,MAAM,QAAqB,CAAC,UACjC,MAAM,QAAQ,mBAAmB,OAAO,EAAE,YAAA;AAqBrC,SAAS,eACd,OACA,YAAyB,WACrB;AACJ,QAAM,SAAkC,CAAA;AAExC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAEhD,QAAI,UAAU,OAAW;AAGzB,QAAI,IAAI,WAAW,OAAO,GAAG;AAC3B,aAAO,GAAG,IAAI;AAAA,IAChB,OAAO;AACL,aAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;ACtBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,KAAKA,MAAAA,OAAoB,IAAI;AAEnCC,QAAAA,UAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACA,aAAG,YAAH,mBAAY,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACX,OAAAC,MAAA,GAAG,YAAH,gBAAAA,IAAY,oBAAoB,UAAU;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,IAAI,OAAO,CAAC;AAEhB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAM,OAAO,OAAO;AAAA,MACpB,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,2CAAa,OAAA,EAAI,MAAK,WAAW,UAAA,SAAQ;AAAA,QACvE,WAAWC,2BAAAA,IAAC,OAAA,EAAI,MAAK,WAAW,UAAA,SAAQ;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACrBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,SAAS,eAAwB,MAAM,SAAS;AAEtD,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,UACE,OAAO,aAAa,YAAa,WAAW,SAAS,SAAa;AAAA,MAEnE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;;;;;"}

package/{icon-CoYGOp1V.mjs → icon-CCNDGfBO.mjs}

@@ -1,5 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
+const lowercase = (input) => input.toLowerCase();
+const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function transformProps(props, transform = lowercase) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key.startsWith("data-")) {
+      result[key] = value;
+    } else {
+      result[transform(key)] = value;
+    }
+  }
+  return result;
+}
 function GoabDrawer({
   position,
   open,
@@ -40,42 +54,23 @@ function GoabDrawer({
   );
 }
 function GoabIcon({
-  type,
-  theme,
-  size,
   inverted,
-  // TODO: change to boolean only
-  fillColor,
-  opacity,
-  title,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
     "goa-icon",
     {
-      type,
-      theme,
-      size,
       inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
-      fillcolor: fillColor,
-      opacity,
-      title,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId
+      ..._props
     }
   );
 }
 export {
   GoabDrawer as G,
-  GoabIcon as a
+  GoabIcon as a,
+  kebab as k,
+  lowercase as l,
+  transformProps as t
 };
-//# sourceMappingURL=icon-CoYGOp1V.mjs.map
+//# sourceMappingURL=icon-CCNDGfBO.mjs.map

package/icon-CCNDGfBO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-CCNDGfBO.mjs","sources":["../../../libs/react-components/src/lib/common/extract-props.ts","../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["/**\n * Transform function type for converting prop names to attribute names.\n */\nexport type TransformFn = (input: string) => string;\n\n/**\n * Converts a camelCase string to lowercase (e.g., \"headingSize\" -> \"headingsize\")\n */\nexport const lowercase: TransformFn = (input) => input.toLowerCase();\n\n/**\n * Converts a camelCase string to kebab-case (e.g., \"verticalPosition\" -> \"vertical-position\")\n */\nexport const kebab: TransformFn = (input) =>\n  input.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n\n/**\n * Transforms React props to web component attributes.\n * Use object destructuring to extract props that need special handling,\n * then pass the rest through this function.\n *\n * @param props - The remaining props after destructuring\n * @param transform - Transform function (lowercase or kebab), defaults to lowercase\n * @returns Converted props ready to spread on the web component\n *\n * @example\n * export function GoabAccordion({open, onChange, headingContent, children, ...rest}: GoabAccordionProps) {\n *   const _props = transformProps<WCProps>(rest, lowercase);\n *   return (\n *     <goa-accordion open={open ? \"true\" : undefined} {..._props}>\n *       {children}\n *     </goa-accordion>\n *   );\n * }\n */\nexport function transformProps<WC = Record<string, unknown>>(\n  props: object,\n  transform: TransformFn = lowercase\n): WC {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    // Skip undefined values - they shouldn't be passed to web components\n    if (value === undefined) continue;\n\n    // Data attributes pass through unchanged\n    if (key.startsWith(\"data-\")) {\n      result[key] = value;\n    } else {\n      result[transform(key)] = value;\n    }\n  }\n\n  return result as WC;\n}\n","import { ReactNode, useEffect, useRef, type JSX } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string;\n  maxsize?: GoabDrawerSize;\n  testid?: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabDrawerProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string | ReactNode;\n  maxSize?: GoabDrawerSize;\n  testId?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  onClose: () => void;\n}\n\nexport function GoabDrawer({\n  position,\n  open,\n  heading,\n  maxSize,\n  testId,\n  actions,\n  children,\n  onClose,\n}: GoabDrawerProps): JSX.Element {\n  const el = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (!el?.current || !onClose) {\n      return;\n    }\n    el.current?.addEventListener(\"_close\", onClose);\n    return () => {\n      el.current?.removeEventListener(\"_close\", onClose);\n    };\n  }, [el, onClose]);\n\n  return (\n    <goa-drawer\n      ref={el}\n      position={position}\n      open={open ? true : undefined}\n      heading={typeof heading === \"string\" ? heading : undefined}\n      maxsize={maxSize}\n      testid={testId}\n    >\n      {heading && typeof heading !== \"string\" && <div slot=\"heading\">{heading}</div>}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {children}\n    </goa-drawer>\n  );\n}\n\nexport default GoabDrawer;\n","import {\n  GoabIconOverridesType,\n  GoabIconSize,\n  GoabIconTheme,\n  GoabIconType,\n  Margins, DataAttributes,\n} from \"@abgov/ui-components-common\";\n\nimport type { JSX } from \"react\";\nimport { transformProps, lowercase } from \"../common/extract-props\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n    }\n  }\n}\n\nexport interface GoabIconProps extends Margins, DataAttributes {\n  type: GoabIconType | GoabIconOverridesType;\n  size?: GoabIconSize;\n  theme?: GoabIconTheme;\n  inverted?: string | boolean; // TODO: Change type to only boolean\n  fillColor?: string;\n  opacity?: number;\n  title?: string;\n  ariaLabel?: string;\n  testId?: string;\n}\n\ninterface WCProps extends Margins {\n  type: GoabIconType | GoabIconOverridesType;\n  theme?: GoabIconTheme;\n  size?: GoabIconSize;\n  inverted?: string;\n  fillcolor?: string;\n  opacity?: number;\n  title?: string;\n  arialabel?: string;\n  testid?: string;\n}\n\nexport function GoabIcon({\n  inverted,\n  ...rest\n}: GoabIconProps): JSX.Element {\n  const _props = transformProps<WCProps>(rest, lowercase);\n\n  return (\n    <goa-icon\n      inverted={\n        typeof inverted === \"boolean\" ? (inverted ? \"true\" : undefined) : inverted\n      }\n      {..._props}\n    />\n  );\n}\n"],"names":["_a"],"mappings":";;AAQO,MAAM,YAAyB,CAAC,UAAU,MAAM,YAAA;AAKhD,MAAM,QAAqB,CAAC,UACjC,MAAM,QAAQ,mBAAmB,OAAO,EAAE,YAAA;AAqBrC,SAAS,eACd,OACA,YAAyB,WACrB;AACJ,QAAM,SAAkC,CAAA;AAExC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAEhD,QAAI,UAAU,OAAW;AAGzB,QAAI,IAAI,WAAW,OAAO,GAAG;AAC3B,aAAO,GAAG,IAAI;AAAA,IAChB,OAAO;AACL,aAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;ACtBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,KAAK,OAAoB,IAAI;AAEnC,YAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACA,aAAG,YAAH,mBAAY,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACX,OAAAA,MAAA,GAAG,YAAH,gBAAAA,IAAY,oBAAoB,UAAU;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,IAAI,OAAO,CAAC;AAEhB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAM,OAAO,OAAO;AAAA,MACpB,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,gCAAa,OAAA,EAAI,MAAK,WAAW,UAAA,SAAQ;AAAA,QACvE,WAAW,oBAAC,OAAA,EAAI,MAAK,WAAW,UAAA,SAAQ;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACrBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,SAAS,eAAwB,MAAM,SAAS;AAEtD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UACE,OAAO,aAAa,YAAa,WAAW,SAAS,SAAa;AAAA,MAEnE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/index.d.ts

@@ -12,6 +12,7 @@ export * from './lib/checkbox-list/checkbox-list';
 export * from './lib/chip/chip';
 export * from './lib/circular-progress/circular-progress';
 export * from './lib/container/container';
+export * from './lib/data-grid/data-grid';
 export * from './lib/date-picker/date-picker';
 export * from './lib/details/details';
 export * from './lib/divider/divider';
@@ -40,6 +41,7 @@ export * from './lib/hero-banner/hero-banner-actions';
 export * from './lib/icon-button/icon-button';
 export * from './lib/icon/icon';
 export * from './lib/input/input';
+export * from './lib/linear-progress/linear-progress';
 export * from './lib/link/link';
 export * from './lib/link-button/link-button';
 export * from './lib/menu-button/menu-button';