@abgov/react-components 7.2.0-dev.20 → 7.2.0-dev.22

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")
+      ]
     }
   );
 }
@@ -2857,7 +2879,8 @@ function GoabDropdownItem({
   label,
   filter,
   name,
-  mountType = "append"
+  mountType = "append",
+  children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown-item",
@@ -2866,7 +2889,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
     }
   );
 }
@@ -4674,6 +4761,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;