@sebgroup/green-react 1.9.0 → 1.9.2

package/index.js

@@ -1620,6 +1620,85 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+const AccordionItem = ({
+  item,
+  index,
+  uuid
+}) => {
+  const {
+    labelElementLevel,
+    label,
+    subLabel,
+    content
+  } = item;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOnClick = event => {
+    item.onClick && item.onClick(event);
+    setIsOpen(state => {
+      if (!state) {
+        item.onOpen && item.onOpen(event);
+      } else {
+        item.onClose && item.onClose(event);
+      }
+      return !state;
+    });
+  };
+  return jsxs("div", {
+    children: [jsx("div", Object.assign({
+      role: "heading",
+      "aria-level": labelElementLevel
+    }, {
+      children: jsxs("button", Object.assign({
+        id: `accordion-item-button-${index}-${uuid}`,
+        "aria-expanded": isOpen,
+        "aria-controls": `accordion-item-region-${index}-${uuid}`,
+        onClick: event => {
+          handleOnClick(event);
+        }
+      }, {
+        children: [jsx("span", {
+          children: label
+        }), subLabel && jsx("span", {
+          children: subLabel
+        }), jsx("svg", Object.assign({
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, {
+          children: jsx("path", {
+            d: "M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z",
+            fill: "#333333"
+          })
+        }))]
+      }))
+    })), jsx("div", Object.assign({
+      role: "region",
+      id: `accordion-item-region-${index}-${uuid}`,
+      "aria-labelledby": `accordion-item-button-${index}-${uuid}`,
+      hidden: !isOpen
+    }, {
+      children: jsx("div", {
+        children: content
+      })
+    }))]
+  });
+};
+
+const Accordion = ({
+  items
+}) => {
+  const uuid = randomId();
+  return jsx("div", Object.assign({
+    className: "accordion"
+  }, {
+    children: items && items.map((item, index) => jsx(AccordionItem, {
+      item: item,
+      index: index,
+      uuid: uuid
+    }, `accordion-${uuid}-${index}`))
+  }));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2402,6 +2481,7 @@ function Button({
 }
 
 const IconButton = _a => {
+  var _b;
   var {
       children,
       onClick
@@ -2411,7 +2491,8 @@ const IconButton = _a => {
     className: "icon",
     onClick: onClick,
     "aria-controls": props['aria-controls'],
-    "aria-expanded": props['aria-expanded']
+    "aria-expanded": props['aria-expanded'],
+    type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button'
   }, {
     children: children
   }));
@@ -3914,4 +3995,4 @@ const Modal = _a => {
   return isOpen ? modalContent() : null;
 };
 
-export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tabs, Text, TextInput, valueList$1 as ValueList };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tabs, Text, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.10.0",
-    "@sebgroup/extract": "^1.3.1",
+    "@sebgroup/chlorophyll": "^1.10.1",
+    "@sebgroup/extract": "^1.3.2",
     "classnames": "^2.3.2"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",

package/src/lib/accordion/accordion.d.ts

@@ -2,5 +2,5 @@ import { AccordionItemInterface } from './accordion-item';
 export interface AccordionInterface {
     items: AccordionItemInterface[];
 }
-declare const Accordion: ({ items }: AccordionInterface) => JSX.Element;
+export declare const Accordion: ({ items }: AccordionInterface) => JSX.Element;
 export default Accordion;

package/src/lib/form/iconButton/iconButton.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode, MouseEvent } from 'react';
+import { ButtonType } from '@sebgroup/extract';
 interface IconButtonInterface {
     children: ReactNode;
+    type?: ButtonType;
     onClick: (event: MouseEvent) => void;
     'aria-expanded'?: boolean;
     'aria-controls'?: string;