chaser-components - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

dist/index.js

@@ -1918,2 +1918,91 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var style$f = {"accordionItem":"_2HVom","header":"_3usRe","open":"_3eJs3","content":"_39lxI"};
+
+const createContent = content => {
+  if (typeof content === 'string') return /*#__PURE__*/React.createElement(Text, null, content);
+  return content;
+};
+
+function createHeader(header, open) {
+  if (typeof header === 'function') return header({
+    open
+  });
+  if (typeof header === 'string') return /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, header);
+  return header;
+}
+
+function singleOpen(sectionId, openSection) {
+  if (sectionId === openSection) return true;
+  return false;
+}
+
+const AccordionItem = ({
+  header,
+  content,
+  openSection,
+  setOpenSection,
+  allowMultiple = true,
+  sectionId
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  function setSingleOpen(sectionId, openSection) {
+    if (sectionId === openSection) return setOpenSection(undefined);
+    return setOpenSection(sectionId);
+  }
+
+  function isOpen() {
+    return allowMultiple ? open : singleOpen(sectionId, openSection);
+  }
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "xsmall",
+    onClick: () => allowMultiple ? setOpen(!open) : setSingleOpen(sectionId, openSection),
+    className: cx(style$f.accordionItem, isOpen() && style$f.open)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style$f.header
+  }, createHeader(header, open)), isOpen() && /*#__PURE__*/React.createElement("div", {
+    className: style$f.content
+  }, createContent(content)));
+};
+
+AccordionItem.propTypes = {
+  header: PropTypes.node.isRequired,
+  content: PropTypes.node.isRequired,
+  open: PropTypes.bool,
+  setOpen: PropTypes.func
+};
+
+var style$g = {"accordion":"_1ajie"};
+
+const Accordion = ({
+  children,
+  allowMultiple = true
+}) => {
+  const childArray = flatMap(React.Children.toArray(children), child => child.type === React.Fragment ? React.Children.toArray(child.props.children) : child);
+  const [openSection, setOpenSection] = React.useState();
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "xsmall",
+    dividers: true,
+    className: style$g.accordion
+  }, childArray.map((child, i) => allowMultiple ? React.cloneElement(child, {
+    key: i.toString()
+  }) : React.cloneElement(child, {
+    allowMultiple,
+    openSection,
+    setOpenSection,
+    sectionId: i.toString()
+  }, {
+    key: i.toString()
+  })));
+};
+
+Accordion.propTypes = {
+  children: PropTypes.node.isRequired,
+  allowMultiple: PropTypes.bool
+};
+Accordion.Item = AccordionItem;
+
 function useOnMount(fn) {
@@ -1927,2 +2016,3 @@ React.useEffect(fn, []);
 
+exports.Accordion = Accordion;
 exports.Box = Box;
@@ -1929,0 +2019,0 @@ exports.Button = Button;

dist/index.modern.js

@@ -1915,2 +1915,91 @@ import cx from 'classnames';
 
+var style$f = {"accordionItem":"_2HVom","header":"_3usRe","open":"_3eJs3","content":"_39lxI"};
+
+const createContent = content => {
+  if (typeof content === 'string') return /*#__PURE__*/createElement(Text, null, content);
+  return content;
+};
+
+function createHeader(header, open) {
+  if (typeof header === 'function') return header({
+    open
+  });
+  if (typeof header === 'string') return /*#__PURE__*/createElement(Text, {
+    weight: "bold"
+  }, header);
+  return header;
+}
+
+function singleOpen(sectionId, openSection) {
+  if (sectionId === openSection) return true;
+  return false;
+}
+
+const AccordionItem = ({
+  header,
+  content,
+  openSection,
+  setOpenSection,
+  allowMultiple = true,
+  sectionId
+}) => {
+  const [open, setOpen] = useState(false);
+
+  function setSingleOpen(sectionId, openSection) {
+    if (sectionId === openSection) return setOpenSection(undefined);
+    return setOpenSection(sectionId);
+  }
+
+  function isOpen() {
+    return allowMultiple ? open : singleOpen(sectionId, openSection);
+  }
+
+  return /*#__PURE__*/createElement(Stack, {
+    space: "xsmall",
+    onClick: () => allowMultiple ? setOpen(!open) : setSingleOpen(sectionId, openSection),
+    className: cx(style$f.accordionItem, isOpen() && style$f.open)
+  }, /*#__PURE__*/createElement("div", {
+    className: style$f.header
+  }, createHeader(header, open)), isOpen() && /*#__PURE__*/createElement("div", {
+    className: style$f.content
+  }, createContent(content)));
+};
+
+AccordionItem.propTypes = {
+  header: node.isRequired,
+  content: node.isRequired,
+  open: bool,
+  setOpen: func
+};
+
+var style$g = {"accordion":"_1ajie"};
+
+const Accordion = ({
+  children,
+  allowMultiple = true
+}) => {
+  const childArray = flatMap(Children.toArray(children), child => child.type === Fragment ? Children.toArray(child.props.children) : child);
+  const [openSection, setOpenSection] = useState();
+  return /*#__PURE__*/createElement(Stack, {
+    space: "xsmall",
+    dividers: true,
+    className: style$g.accordion
+  }, childArray.map((child, i) => allowMultiple ? cloneElement(child, {
+    key: i.toString()
+  }) : cloneElement(child, {
+    allowMultiple,
+    openSection,
+    setOpenSection,
+    sectionId: i.toString()
+  }, {
+    key: i.toString()
+  })));
+};
+
+Accordion.propTypes = {
+  children: node.isRequired,
+  allowMultiple: bool
+};
+Accordion.Item = AccordionItem;
+
 function useOnMount(fn) {
@@ -1924,3 +2013,3 @@ useEffect(fn, []);
 
-export { Box, Button, ButtonGroup, Card, Columns, Heading, Healthscore, Icon, Menu, Modal, Popover, Position, Positioner, Shelf, Stack, Stock, Text, Tooltip, ZIndexProvider, useControlProp, useId, useOnMount, useOnOutsideClick, useOnUnmount, useOnUpdate, usePrevious, useUpdateEffect, useZIndex };
+export { Accordion, Box, Button, ButtonGroup, Card, Columns, Heading, Healthscore, Icon, Menu, Modal, Popover, Position, Positioner, Shelf, Stack, Stock, Text, Tooltip, ZIndexProvider, useControlProp, useId, useOnMount, useOnOutsideClick, useOnUnmount, useOnUpdate, usePrevious, useUpdateEffect, useZIndex };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "chaser-components",
   "description": "Chaser HQ Component Library",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "module": "dist/index.modern.js",

src/index.js

@@ -21,2 +21,3 @@ import './index.scss';
 export { default as Card } from './components/Card/index';
+export { default as Accordion } from './components/Accordion/index';
 export { ZIndexProvider, useZIndex } from './components/ZIndex/index';
@@ -23,0 +24,0 @@

No alert changes

Improved metrics

Total package byte prevSize

537873

increased by4.59%

Number of package files

133

increased by4.72%

Lines of code

7466

increased by4.9%

No dependency changes