@abgov/react-components 6.10.0-dev.9 → 6.10.0-next.1

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";

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";

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';