@abgov/react-components 6.10.0-dev.3 → 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":";;;;;;;;;;;;;;;;;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;AChEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,KAAKD,MAAAA,OAAoB,IAAI;AAEnCG,QAAAA,UAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,UAAU;AAC7B;AAAA,IACF;AACA,aAAG,YAAH,mBAAY,iBAAiB,WAAW;AACxC,WAAO,MAAM;;AACX,OAAAI,MAAA,GAAG,YAAH,gBAAAA,IAAY,oBAAoB,WAAW;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,QAAQ,CAAC;AACjB,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX,uBAAqB;AAAA,MACrB,MAAM,OAAO,OAAO;AAAA,MACpB,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,kBAAkBC,2BAAAA,IAAC,OAAA,EAAI,MAAK,WAAW,UAAA,gBAAe;AAAA,QACtD,oBAAoBA,2BAAAA,IAAC,OAAA,EAAI,MAAK,aAAa,UAAA,kBAAiB;AAAA,QAC5D,kBAAkBA,2BAAAA,IAAC,OAAA,EAAI,MAAK,WAAW,UAAA,eAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;ACzCO,SAAS,sBAAsB,OAA+C;AACnF,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,KAAK,MAAM;AAAA,MACX,OAAO,MAAM;AAAA,MACb,SAAS,MAAM,UAAU,SAAS;AAAA,MAClC,SAAS,MAAM,UAAU,SAAS;AAAA,MAClC,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,MAAM,MAAM;AAAA,MAEX,UAAA,MAAM;AAAA,IAAA;AAAA,EAAA;AAGb;;;;;"}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "6.10.0-dev.3",
+  "version": "6.10.0-dev.4",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"