@abgov/react-components 6.2.2-alpha.6 → 6.3.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/experimental.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const icon = require("./icon-DmXlIizF.js");
5
+ const icon = require("./icon-BPmPItnm.js");
6
6
  const panel = "_panel_m3z4m_1";
7
7
  const panelBackground = "_panelBackground_m3z4m_8";
8
8
  const children = "_children_m3z4m_12";
@@ -84,40 +84,6 @@ function ResizablePanel(props) {
84
84
  }
85
85
  );
86
86
  }
87
- function GoADrawer({
88
- open,
89
- position,
90
- heading,
91
- maxSize,
92
- testId,
93
- children: children2,
94
- onClose
95
- }) {
96
- const el = react.useRef(null);
97
- react.useEffect(() => {
98
- var _a;
99
- if (!(el == null ? void 0 : el.current) || !onClose) {
100
- return;
101
- }
102
- (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
103
- return () => {
104
- var _a2;
105
- (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
106
- };
107
- }, [el, onClose]);
108
- return /* @__PURE__ */ jsxRuntime.jsx(
109
- "goa-drawer",
110
- {
111
- ref: el,
112
- open: open ? true : void 0,
113
- position,
114
- heading,
115
- maxsize: maxSize,
116
- "data-testid": testId,
117
- children: children2
118
- }
119
- );
120
- }
121
- exports.GoADrawer = GoADrawer;
87
+ exports.GoabDrawer = icon.GoabDrawer;
122
88
  exports.ResizablePanel = ResizablePanel;
123
89
  //# sourceMappingURL=experimental.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } 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 } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): 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 open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon","children","_a"],"mappings":"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"}
1
+ {"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } 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;AAE3D,QAAA,QAAQA,aAA8B,IAAI;AAC1C,QAAA,aAAaA,aAA2B,IAAI;AAC5C,QAAA,WAAWA,aAA8B,IAAI;AAC7C,QAAA,YAAYA,aAA8B,IAAI;AAG9C,QAAA,WAAWA,aAAe,CAAC;AAC3B,QAAA,iBAAiBA,aAAmB,QAAQ;AAGlD,QAAM,CAACC,QAAO,QAAQ,IAAIC,MAAiB,SAAA;AAE3CC,QAAAA,UAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,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;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAA,gCAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAAC,+BAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9CA,2BAAA,IAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAACA,2BAAAA,IAAAC,KAAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,uCACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHL,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}
package/experimental.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useRef, useState, useEffect } from "react";
3
- import { G as GoabIcon } from "./icon-iZ6Uu6WB.mjs";
3
+ import { a as GoabIcon } from "./icon-BNGrU_R_.mjs";
4
+ import { G } from "./icon-BNGrU_R_.mjs";
4
5
  const panel = "_panel_m3z4m_1";
5
6
  const panelBackground = "_panelBackground_m3z4m_8";
6
7
  const children = "_children_m3z4m_12";
@@ -82,42 +83,8 @@ function ResizablePanel(props) {
82
83
  }
83
84
  );
84
85
  }
85
- function GoADrawer({
86
- open,
87
- position,
88
- heading,
89
- maxSize,
90
- testId,
91
- children: children2,
92
- onClose
93
- }) {
94
- const el = useRef(null);
95
- useEffect(() => {
96
- var _a;
97
- if (!(el == null ? void 0 : el.current) || !onClose) {
98
- return;
99
- }
100
- (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
101
- return () => {
102
- var _a2;
103
- (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
104
- };
105
- }, [el, onClose]);
106
- return /* @__PURE__ */ jsx(
107
- "goa-drawer",
108
- {
109
- ref: el,
110
- open: open ? true : void 0,
111
- position,
112
- heading,
113
- maxsize: maxSize,
114
- "data-testid": testId,
115
- children: children2
116
- }
117
- );
118
- }
119
86
  export {
120
- GoADrawer,
87
+ G as GoabDrawer,
121
88
  ResizablePanel
122
89
  };
123
90
  //# sourceMappingURL=experimental.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } 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 } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): 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 open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["width","children","_a"],"mappings":"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"}
1
+ {"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } 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;AAE3D,QAAA,QAAQ,OAA8B,IAAI;AAC1C,QAAA,aAAa,OAA2B,IAAI;AAC5C,QAAA,WAAW,OAA8B,IAAI;AAC7C,QAAA,YAAY,OAA8B,IAAI;AAG9C,QAAA,WAAW,OAAe,CAAC;AAC3B,QAAA,iBAAiB,OAAmB,QAAQ;AAGlD,QAAM,CAACA,QAAO,QAAQ,IAAI,SAAiB;AAE3C,YAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,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;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9C,oBAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAAC,oBAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,4BACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
@@ -0,0 +1,80 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useRef, useEffect } from "react";
3
+ function GoabDrawer({
4
+ open,
5
+ position,
6
+ heading,
7
+ maxSize,
8
+ testId,
9
+ actions,
10
+ children,
11
+ onClose
12
+ }) {
13
+ const el = useRef(null);
14
+ useEffect(() => {
15
+ var _a;
16
+ if (!(el == null ? void 0 : el.current) || !onClose) {
17
+ return;
18
+ }
19
+ (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
20
+ return () => {
21
+ var _a2;
22
+ (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
23
+ };
24
+ }, [el, onClose]);
25
+ return /* @__PURE__ */ jsxs(
26
+ "goa-drawer",
27
+ {
28
+ ref: el,
29
+ open: open ? true : void 0,
30
+ position,
31
+ heading: typeof heading === "string" ? heading : void 0,
32
+ maxsize: maxSize,
33
+ testid: testId,
34
+ children: [
35
+ heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
36
+ actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
37
+ children
38
+ ]
39
+ }
40
+ );
41
+ }
42
+ function GoabIcon({
43
+ type,
44
+ theme,
45
+ size,
46
+ inverted,
47
+ fillColor,
48
+ opacity,
49
+ title,
50
+ ariaLabel,
51
+ mt,
52
+ mr,
53
+ mb,
54
+ ml,
55
+ testId
56
+ }) {
57
+ return /* @__PURE__ */ jsx(
58
+ "goa-icon",
59
+ {
60
+ type,
61
+ theme,
62
+ size,
63
+ inverted,
64
+ fillcolor: fillColor,
65
+ opacity,
66
+ title,
67
+ arialabel: ariaLabel,
68
+ mt,
69
+ mr,
70
+ mb,
71
+ ml,
72
+ testid: testId
73
+ }
74
+ );
75
+ }
76
+ export {
77
+ GoabDrawer as G,
78
+ GoabIcon as a
79
+ };
80
+ //# sourceMappingURL=icon-BNGrU_R_.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-BNGrU_R_.mjs","sources":["../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n open: boolean | undefined;\n position: GoabDrawerPosition;\n heading?: string;\n maxsize?: GoabDrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDrawerProps {\n open: boolean;\n position: GoabDrawerPosition;\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 open,\n position,\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 open={open ? true : undefined}\n position={position}\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 GoabIconFilledType,\n GoabIconSize,\n GoabIconTheme,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface IonIconProps {\n name: GoabIconType | GoabIconFilledType;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\nexport interface GoabIconProps extends Margins {\n type: GoabIconType;\n size?: GoabIconSize;\n theme?: GoabIconTheme;\n inverted?: string;\n fillColor?: string;\n opacity?: number;\n title?: string;\n ariaLabel?: string;\n testId?: string;\n}\n\ninterface WCProps extends Margins {\n type: GoabIconType;\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 type,\n theme,\n size,\n inverted,\n fillColor,\n opacity,\n title,\n ariaLabel,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabIconProps): JSX.Element {\n return (\n <goa-icon\n type={type}\n theme={theme}\n size={size}\n inverted={inverted}\n fillcolor={fillColor}\n opacity={opacity}\n title={title}\n arialabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n />\n );\n}\n"],"names":["_a"],"mappings":";;AAiCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AACzB,QAAA,KAAK,OAAoB,IAAI;AAEnC,YAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACG,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAA,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAAO;AAAA,EACnD,GACC,CAAC,IAAI,OAAO,CAAC;AAGd,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM,OAAO,OAAO;AAAA,MACpB;AAAA,MACA,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,gCAAa,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACvE,WAAW,oBAAC,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACVO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAE3B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;"}
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ const jsxRuntime = require("react/jsx-runtime");
3
+ const react = require("react");
4
+ function GoabDrawer({
5
+ open,
6
+ position,
7
+ heading,
8
+ maxSize,
9
+ testId,
10
+ actions,
11
+ children,
12
+ onClose
13
+ }) {
14
+ const el = react.useRef(null);
15
+ react.useEffect(() => {
16
+ var _a;
17
+ if (!(el == null ? void 0 : el.current) || !onClose) {
18
+ return;
19
+ }
20
+ (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
21
+ return () => {
22
+ var _a2;
23
+ (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
24
+ };
25
+ }, [el, onClose]);
26
+ return /* @__PURE__ */ jsxRuntime.jsxs(
27
+ "goa-drawer",
28
+ {
29
+ ref: el,
30
+ open: open ? true : void 0,
31
+ position,
32
+ heading: typeof heading === "string" ? heading : void 0,
33
+ maxsize: maxSize,
34
+ testid: testId,
35
+ children: [
36
+ heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
37
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
38
+ children
39
+ ]
40
+ }
41
+ );
42
+ }
43
+ function GoabIcon({
44
+ type,
45
+ theme,
46
+ size,
47
+ inverted,
48
+ fillColor,
49
+ opacity,
50
+ title,
51
+ ariaLabel,
52
+ mt,
53
+ mr,
54
+ mb,
55
+ ml,
56
+ testId
57
+ }) {
58
+ return /* @__PURE__ */ jsxRuntime.jsx(
59
+ "goa-icon",
60
+ {
61
+ type,
62
+ theme,
63
+ size,
64
+ inverted,
65
+ fillcolor: fillColor,
66
+ opacity,
67
+ title,
68
+ arialabel: ariaLabel,
69
+ mt,
70
+ mr,
71
+ mb,
72
+ ml,
73
+ testid: testId
74
+ }
75
+ );
76
+ }
77
+ exports.GoabDrawer = GoabDrawer;
78
+ exports.GoabIcon = GoabIcon;
79
+ //# sourceMappingURL=icon-BPmPItnm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-BPmPItnm.js","sources":["../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n open: boolean | undefined;\n position: GoabDrawerPosition;\n heading?: string;\n maxsize?: GoabDrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDrawerProps {\n open: boolean;\n position: GoabDrawerPosition;\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 open,\n position,\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 open={open ? true : undefined}\n position={position}\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 GoabIconFilledType,\n GoabIconSize,\n GoabIconTheme,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface IonIconProps {\n name: GoabIconType | GoabIconFilledType;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\nexport interface GoabIconProps extends Margins {\n type: GoabIconType;\n size?: GoabIconSize;\n theme?: GoabIconTheme;\n inverted?: string;\n fillColor?: string;\n opacity?: number;\n title?: string;\n ariaLabel?: string;\n testId?: string;\n}\n\ninterface WCProps extends Margins {\n type: GoabIconType;\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 type,\n theme,\n size,\n inverted,\n fillColor,\n opacity,\n title,\n ariaLabel,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabIconProps): JSX.Element {\n return (\n <goa-icon\n type={type}\n theme={theme}\n size={size}\n inverted={inverted}\n fillcolor={fillColor}\n opacity={opacity}\n title={title}\n arialabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n />\n );\n}\n"],"names":["useRef","useEffect","_a","jsxs","jsx"],"mappings":";;;AAiCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AACzB,QAAA,KAAKA,aAAoB,IAAI;AAEnCC,QAAAA,UAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACG,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAC,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAAO;AAAA,EACnD,GACC,CAAC,IAAI,OAAO,CAAC;AAGd,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM,OAAO,OAAO;AAAA,MACpB;AAAA,MACA,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,2CAAa,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACvE,WAAWC,2BAAA,IAAC,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACVO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAE3B,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;;;"}
package/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export * from './lib/container/container';
14
14
  export * from './lib/date-picker/date-picker';
15
15
  export * from './lib/details/details';
16
16
  export * from './lib/divider/divider';
17
+ export * from './lib/drawer/drawer';
17
18
  export * from './lib/dropdown/dropdown';
18
19
  export * from './lib/dropdown/dropdown-item';
19
20
  export * from './lib/fieldset/fieldset';
@@ -58,4 +59,4 @@ export * from './lib/three-column-layout/three-column-layout';
58
59
  export * from './lib/tooltip/tooltip';
59
60
  export * from './lib/two-column-layout/two-column-layout';
60
61
  export * from './lib/filter-chip/filter-chip';
61
- export type { GoabSpinnerType, GoabSpinnerSize, GoabRadioGroupOnChangeDetail, GoabInputOnChangeDetail, GoabInputOnFocusDetail, GoaInputOnBlurDetail, GoabInputAutoCapitalize, GoabInputOnKeyPressDetail, GoabFormStepperOnChangeDetail, GoabFileUploadInputOnSelectFileDetail, GoabFileUploadOnCancelDetail, GoabFileUploadOnDeleteDetail, GoabDropdownItemMountType, GoabDropdownOnChangeDetail, GoabDatePickerOnChangeDetail, GoabChipVariant, GoabChipTheme, GoabFilterChipTheme, GoabCheckboxOnChangeDetail, GoabCalendarOnChangeDetail, GoabBadgeType, GoabPaginationVariant, GoabPaginationOnChangeDetail, GoabFormStepperType, GoabFormStepStatus, GoabFormItemLabelSize, GoabFormItemRequirement, GoabFileUploadInputVariant, GoabContainerAccent, GoabContainerPadding, GoabContainerType, GoabContainerWidth, GoabCalloutType, GoabCalloutSize, GoabCalloutAriaLive, GoabCalloutIconTheme, GoabButtonType, GoabButtonSize, GoabButtonVariant, GoabButtonGroupAlignment, GoabButtonGroupGap, GoabAccordionHeadingSize, GoabAccordionIconPosition, GoabTooltipPosition, GoabTooltipHorizontalAlignment, GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTabsProps, GoabTabsOnChangeDetail, GoabTableVariant, GoabTableSortDirection, GoabTableProps, GoabTableOnSortDetail, GoabSpacerHorizontalSpacing, GoabSpacerVerticalSpacing, GoabSpacerProps, GoabSkeletonProps, GoabSkeletonType, GoabSkeletonSize, GoabRadioGroupOrientation, GoabRadioGroupProps, GoabRadioItemProps, GoabCircularProgressVariant, GoabCircularProgressSize, GoabPopoverPosition, GoabPopoverProps, GoabNotificationType, GoabAriaLiveType, GoabServiceLevel, GoabLinkTarget, GoabModalRole, GoabModalTransition, GoabModalCalloutVariant, GoabDate, GoabInputType, GoabAutoCapitalize, OnChange, OnFocus, OnBlur, OnKeyPress, GoabInputProps, GoabNumberInputProps, GoabDateInputProps, GoabIconFilledType, GoabIconType, GoabIconSize, GoabIconTheme, GoabIconButtonVariant, GoabIconVariant, NumericSpacing, TShirtSpacing, Spacing, Margins, GoabBlockDirection, GoabBlockAlignment, GoabLinkButtonType, GoabTextMaxWidth, GoabTextHeadingElement, GoabTextTextElement, GoabTextHeadingSize, GoabTextBodySize, GoabTextSize, GoabTextColor, GoabFielsetOnContinueDetail, GoabFormField, GoabFormState, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange, } from '@abgov/ui-components-common';
62
+ export type { GoabSpinnerType, GoabSpinnerSize, GoabRadioGroupOnChangeDetail, GoabInputOnChangeDetail, GoabInputOnFocusDetail, GoaInputOnBlurDetail, GoabInputAutoCapitalize, GoabInputOnKeyPressDetail, GoabFormStepperOnChangeDetail, GoabFileUploadInputOnSelectFileDetail, GoabFileUploadOnCancelDetail, GoabFileUploadOnDeleteDetail, GoabDropdownItemMountType, GoabDropdownOnChangeDetail, GoabDatePickerOnChangeDetail, GoabChipVariant, GoabChipTheme, GoabFilterChipTheme, GoabCheckboxOnChangeDetail, GoabCalendarOnChangeDetail, GoabBadgeType, GoabPaginationVariant, GoabPaginationOnChangeDetail, GoabFormStepperType, GoabFormStepStatus, GoabFormItemLabelSize, GoabFormItemRequirement, GoabFileUploadInputVariant, GoabContainerAccent, GoabContainerPadding, GoabContainerType, GoabContainerWidth, GoabCalloutType, GoabCalloutSize, GoabCalloutAriaLive, GoabCalloutIconTheme, GoabButtonType, GoabButtonSize, GoabButtonVariant, GoabButtonGroupAlignment, GoabButtonGroupGap, GoabAccordionHeadingSize, GoabAccordionIconPosition, GoabTooltipPosition, GoabTooltipHorizontalAlignment, GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTabsProps, GoabTabsOnChangeDetail, GoabTableVariant, GoabTableSortDirection, GoabTableProps, GoabTableOnSortDetail, GoabSpacerHorizontalSpacing, GoabSpacerVerticalSpacing, GoabSpacerProps, GoabSkeletonProps, GoabSkeletonType, GoabSkeletonSize, GoabRadioGroupOrientation, GoabRadioGroupProps, GoabRadioItemProps, GoabCircularProgressVariant, GoabCircularProgressSize, GoabPopoverPosition, GoabPopoverProps, GoabNotificationType, GoabAriaLiveType, GoabServiceLevel, GoabLinkTarget, GoabModalRole, GoabModalTransition, GoabModalCalloutVariant, GoabDate, GoabInputType, GoabAutoCapitalize, OnChange, OnFocus, OnBlur, OnKeyPress, GoabInputProps, GoabNumberInputProps, GoabDateInputProps, GoabIconFilledType, GoabIconType, GoabIconSize, GoabIconTheme, GoabIconButtonVariant, GoabIconVariant, NumericSpacing, TShirtSpacing, Spacing, Margins, GoabBlockDirection, GoabBlockAlignment, GoabLinkButtonType, GoabTextMaxWidth, GoabTextHeadingElement, GoabTextTextElement, GoabTextHeadingSize, GoabTextBodySize, GoabTextSize, GoabTextColor, GoabFielsetOnContinueDetail, GoabFormField, GoabFormState, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange, GoabDrawerSize, GoabDrawerPosition, } from '@abgov/ui-components-common';
package/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const icon = require("./icon-DmXlIizF.js");
5
+ const icon = require("./icon-BPmPItnm.js");
6
6
  function GoabAccordion({
7
7
  open,
8
8
  heading,
@@ -3571,6 +3571,7 @@ const GoabFilterChip = ({
3571
3571
  }
3572
3572
  );
3573
3573
  };
3574
+ exports.GoabDrawer = icon.GoabDrawer;
3574
3575
  exports.GoabIcon = icon.GoabIcon;
3575
3576
  exports.GoALinkButton = GoALinkButton;
3576
3577
  exports.GoabAccordion = GoabAccordion;