@abgov/react-components 7.3.0 → 7.4.0

package/README.md

@@ -0,0 +1,60 @@
+# React UI Components
+
+[![npm version](https://img.shields.io/npm/v/@abgov/react-components?color=%230081a2&label=react-components&style=flat-square)](https://www.npmjs.com/package/@abgov/react-components)
+
+React wrappers for the Government of Alberta Design System web components.
+
+Supported React versions: 17, 18, and 19.
+
+## Install
+
+```bash
+npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokens
+```
+
+## Register the web components
+
+Import the underlying web components once in your application entry point, such as
+`src/main.tsx`:
+
+```typescript
+import "@abgov/web-components";
+```
+
+## Add styles
+
+Import the component styles and design tokens in your main stylesheet, such as
+`src/index.css`:
+
+```css
+@import "@abgov/web-components/index.css";
+@import "@abgov/design-tokens/dist/tokens.css";
+```
+
+## Add icons
+
+Add Ionicons to the `<head>` of `index.html`:
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"
+></script>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"
+></script>
+```
+
+## Use a component
+
+```tsx
+import { GoabButton } from "@abgov/react-components";
+
+export function App() {
+  return <GoabButton type="primary">Continue</GoabButton>;
+}
+```
+
+See the [developer setup guide](https://design.alberta.ca/get-started/developers/setup/) and
+[Government of Alberta Design System](https://design.alberta.ca) for more information.

package/index.d.ts

@@ -19,6 +19,7 @@ export * from './lib/divider/divider';
 export * from './lib/drawer/drawer';
 export * from './lib/dropdown/dropdown';
 export * from './lib/dropdown/dropdown-item';
+export * from './lib/dropdown-multiselect/dropdown-multiselect';
 export * from './lib/file-upload-card/file-upload-card';
 export * from './lib/file-upload-input/file-upload-input';
 export * from './lib/footer/footer';

package/index.js

@@ -65,10 +65,26 @@ function GoabAccordion({
     }
   );
 }
+function renderSlottedItems(children, slot) {
+  return react.Children.map(children, (child) => {
+    if (!react.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === react.Fragment) {
+      const fragment = child;
+      return renderSlottedItems(fragment.props.children, slot);
+    }
+    return react.cloneElement(child, { slot });
+  });
+}
 function GoabAppHeader({
   onMenuClick,
   children,
   secondaryText,
+  banner,
+  phase,
+  navigation,
+  utilities,
   ...rest
 }) {
   const el = react.useRef(null);
@@ -89,7 +105,7 @@ function GoabAppHeader({
       current.removeEventListener("_menuClick", listener);
     };
   }, [el, onMenuClick]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-app-header",
     {
       ref: el,
@@ -97,7 +113,13 @@ function GoabAppHeader({
       secondarytext: secondaryText,
       ..._props,
       version: "2",
-      children
+      children: [
+        children,
+        banner && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "banner", children: banner }),
+        phase && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "phase", children: phase }),
+        navigation && renderSlottedItems(navigation, "navigation"),
+        utilities && renderSlottedItems(utilities, "utilities")
+      ]
     }
   );
 }
@@ -116,6 +138,7 @@ function getIconValue(icon, iconType) {
   return iconType ? "true" : "false";
 }
 function GoabBadge({
+  content,
   icon,
   iconType,
   size = "medium",
@@ -128,16 +151,23 @@ function GoabBadge({
     {
       icon: getIconValue(icon, iconType),
       icontype: iconType,
+      content: typeof content === "string" ? content : void 0,
       ..._props,
       version: "2",
       size,
-      emphasis
+      emphasis,
+      children: typeof content !== "string" && content != null && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content })
     }
   );
 }
-function GoabBlock({ testId, children, ...rest }) {
+function GoabBlock({
+  testId,
+  stretch,
+  children,
+  ...rest
+}) {
   const _props = transformProps({ testid: testId, ...rest }, kebab);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-block", { ..._props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-block", { ..._props, stretch: stretch ? "true" : void 0, children });
 }
 function GoabButton({
   disabled,
@@ -246,6 +276,8 @@ function GoabCheckbox({
   description,
   reveal,
   onChange,
+  onFocus,
+  onBlur,
   name,
   children,
   size = "default",
@@ -262,11 +294,23 @@ function GoabCheckbox({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     current.addEventListener("_change", listener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", listener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [name, onChange]);
+  }, [name, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-checkbox",
     {
@@ -298,6 +342,8 @@ function GoabCheckboxList({
   size = "default",
   children,
   onChange,
+  onFocus,
+  onBlur,
   mt,
   mr,
   mb,
@@ -311,11 +357,23 @@ function GoabCheckboxList({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     current.addEventListener("_change", listener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", listener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [onChange]);
+  }, [onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-checkbox-list",
     {
@@ -2614,6 +2672,8 @@ function GoabDatePicker({
   disabled,
   relative,
   onChange,
+  onFocus,
+  onBlur,
   ...rest
 }) {
   const ref = react.useRef(null);
@@ -2634,15 +2694,27 @@ function GoabDatePicker({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const handleFocus = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const handleBlur = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     if (onChange) {
       current.addEventListener("_change", handleChange);
     }
+    current.addEventListener("_focus", handleFocus);
+    current.addEventListener("_blur", handleBlur);
     return () => {
       if (onChange) {
         current.removeEventListener("_change", handleChange);
       }
+      current.removeEventListener("_focus", handleFocus);
+      current.removeEventListener("_blur", handleBlur);
     };
-  }, [onChange]);
+  }, [onChange, onFocus, onBlur]);
   const formatValue = (val) => {
     if (!val) return "";
     if (val instanceof Date) {
@@ -2738,6 +2810,8 @@ function stringify(value) {
 function GoabDropdown({
   value,
   onChange,
+  onFocus,
+  onBlur,
   disabled,
   error,
   filterable,
@@ -2759,15 +2833,27 @@ function GoabDropdown({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     if (onChange) {
       current.addEventListener("_change", handler);
     }
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       if (onChange) {
         current.removeEventListener("_change", handler);
       }
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onChange]);
+  }, [el, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown",
     {
@@ -2796,7 +2882,8 @@ function GoabDropdownItem({
   label,
   filter,
   name,
-  mountType = "append"
+  mountType = "append",
+  children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown-item",
@@ -2805,7 +2892,71 @@ function GoabDropdownItem({
       label,
       filter,
       name,
-      mount: mountType
+      mount: mountType,
+      children
+    }
+  );
+}
+function GoabDropdownMultiselect({
+  name,
+  value = [],
+  placeholder,
+  disabled,
+  error,
+  filterable,
+  leadingIcon,
+  showSelectAll,
+  testId,
+  ariaLabel,
+  ariaLabelledBy,
+  maxHeight,
+  width,
+  size = "default",
+  labelFormat,
+  children,
+  onChange,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-dropdown-multiselect",
+    {
+      ref: el,
+      name,
+      value,
+      placeholder,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      filterable: filterable ? "true" : void 0,
+      "leading-icon": leadingIcon,
+      testid: testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "max-height": maxHeight,
+      width,
+      size,
+      "label-format": labelFormat ? labelFormat : void 0,
+      "show-select-all": showSelectAll ? "true" : void 0,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
     }
   );
 }
@@ -3170,6 +3321,7 @@ function GoabHeroBannerActions({
 }
 function GoabIconButton({
   variant = "color",
+  type = "default",
   size = "medium",
   theme = "outline",
   disabled,
@@ -3180,7 +3332,7 @@ function GoabIconButton({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = transformProps({ variant, size, theme, ...rest }, lowercase);
+  const _props = transformProps({ variant, type, size, theme, ...rest }, lowercase);
   react.useEffect(() => {
     if (!ref.current) {
       return;
@@ -3836,6 +3988,8 @@ function GoabRadioGroup({
   disabled,
   error,
   onChange,
+  onFocus,
+  onBlur,
   name,
   children,
   size = "default",
@@ -3849,16 +4003,28 @@ function GoabRadioGroup({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     const currentEl = el.current;
     if (onChange) {
       currentEl.addEventListener("_change", listener);
     }
+    currentEl.addEventListener("_focus", focusListener);
+    currentEl.addEventListener("_blur", blurListener);
     return () => {
       if (onChange) {
         currentEl.removeEventListener("_change", listener);
       }
+      currentEl.removeEventListener("_focus", focusListener);
+      currentEl.removeEventListener("_blur", blurListener);
     };
-  }, [name, onChange]);
+  }, [name, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-radio-group",
     {
@@ -3971,14 +4137,25 @@ function GoabScrollPanel({
   footer,
   height,
   testId,
+  direction = "vertical",
   ...rest
 }) {
   const hostStyle = height ? { height } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("goa-scroll-panel", { height, testid: testId, style: hostStyle, ...rest, children: [
-    header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: header }),
-    children,
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: footer })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-scroll-panel",
+    {
+      height,
+      testid: testId,
+      direction,
+      style: hostStyle,
+      ...rest,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: header }),
+        children,
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: footer })
+      ]
+    }
+  );
 }
 function GoabTable({ onSort, onMultiSort, sortMode, ...props }) {
   const ref = react.useRef(null);
@@ -4122,6 +4299,7 @@ function GoabTextArea({
   error,
   onChange,
   onKeyPress,
+  onFocus,
   onBlur,
   ...rest
 }) {
@@ -4140,19 +4318,25 @@ function GoabTextArea({
       const detail = e.detail;
       onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
     const blurListener = (e) => {
       const detail = e.detail;
       onBlur == null ? void 0 : onBlur({ ...detail, event: e });
     };
     current.addEventListener("_change", changeListener);
     current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_focus", focusListener);
     current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", changeListener);
       current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_focus", focusListener);
       current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onChange, onKeyPress, onBlur]);
+  }, [el, onChange, onKeyPress, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-textarea",
     {
@@ -4211,6 +4395,7 @@ function GoabTwoColumnLayout(props) {
   );
 }
 const GoabFilterChip = ({
+  content,
   iconTheme = "outline",
   error,
   onClick,
@@ -4231,9 +4416,11 @@ const GoabFilterChip = ({
     "goa-filter-chip",
     {
       ref: el,
+      content: typeof content === "string" ? content : void 0,
       error: error ? "true" : void 0,
       version: "2",
-      ..._props
+      ..._props,
+      children: typeof content !== "string" && content != null && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content })
     }
   );
 };
@@ -4592,6 +4779,7 @@ exports.GoabDivider = GoabDivider;
 exports.GoabDrawer = GoabDrawer;
 exports.GoabDropdown = GoabDropdown;
 exports.GoabDropdownItem = GoabDropdownItem;
+exports.GoabDropdownMultiselect = GoabDropdownMultiselect;
 exports.GoabDropdownOption = GoabDropdownOption;
 exports.GoabFieldset = GoabFieldset;
 exports.GoabFileUploadCard = GoabFileUploadCard;