@mackin.com/styleguide 11.0.8 → 11.0.10

package/index.d.ts

@@ -16,6 +16,10 @@ interface AccordionProps {
     wrapperClassName?: string;
     /** Applied to the expand/collapse header button. */
     headerButtonClassName?: string;
+    /** Applied to the wrapping element that contains the expanded content wrapper.  Look for a class with `AccordionContent` in it's name in debug tools. */
+    contentWrapperClassName?: string;
+    /** Applied to the wrapping element that contains `children`.  Look for a class with `AccordionExpandedContent` in it's name in debug tools. */
+    expandedContentWrapperClassName?: string;
     /** If true, padding will not be added to the expanded content */
     noPad?: boolean;
     /** The initial state of the Accordion.  Defaults to 'false'.

package/index.esm.js

@@ -514,7 +514,7 @@ const Accordion = (props) => {
         visibility: 'hidden',
     });
     const expandedContentWrapperStyles = !props.noPad ? css({
-        label: 'AccordionWrapper',
+        label: 'AccordionExpandedContent',
         padding: '0 1rem 1rem 1rem'
     }) : undefined;
     function forceBrowserReflow() {
@@ -523,9 +523,11 @@ const Accordion = (props) => {
         (_a = content.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
     }
     React.useEffect(() => {
+        var _a;
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                (_a = document.getElementById(expandedPanelId)) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
                 currentContent.style.visibility = 'visible';
                 currentContent.style.height = '0px';
                 forceBrowserReflow();
@@ -556,8 +558,10 @@ const Accordion = (props) => {
                 }
                 else {
                     setTimeout(() => {
+                        var _a;
                         // undo the style so the root class takes back over ('hidden')
                         currentContent.style.visibility = '';
+                        (_a = document.getElementById(expandedPanelId)) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'true');
                     }, expandTimeMs + 1);
                 }
             }
@@ -590,7 +594,6 @@ const Accordion = (props) => {
                     width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
                 }, props.headerButtonClassName)), onClick: e => {
                     e.stopPropagation();
-                    console.warn('click');
                     if (props.onChange) {
                         props.onChange(!open);
                     }
@@ -599,9 +602,12 @@ const Accordion = (props) => {
                     }
                 }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
                 React.createElement("span", null, props.header))),
-        React.createElement("div", { ref: content, className: contentStyles },
-            React.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId, hidden: !open, role: "region", "aria-labelledby": buttonId }, props.children))));
+        React.createElement("div", { ref: content, className: cx([contentStyles, props.contentWrapperClassName]) },
+            React.createElement("div", { className: cx([expandedContentWrapperStyles, props.expandedContentWrapperClassName]), id: expandedPanelId, role: "region", "aria-labelledby": buttonId }, props.children))));
 };
+//TB: FEAT  Just have an AccordionGroup component that takes props.  If you just want one Accordion, pass on item in the array.
+// allows us to manage state the same way rather than having internal and external states we may need to sync up
+// AccordionDef = { label:string, getContent: () => JSX.Element }
 const useAccordionState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
         return i === openIndex;

package/index.js

@@ -532,7 +532,7 @@ const Accordion = (props) => {
         visibility: 'hidden',
     });
     const expandedContentWrapperStyles = !props.noPad ? css.css({
-        label: 'AccordionWrapper',
+        label: 'AccordionExpandedContent',
         padding: '0 1rem 1rem 1rem'
     }) : undefined;
     function forceBrowserReflow() {
@@ -541,9 +541,11 @@ const Accordion = (props) => {
         (_a = content.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
     }
     React__namespace.useEffect(() => {
+        var _a;
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                (_a = document.getElementById(expandedPanelId)) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
                 currentContent.style.visibility = 'visible';
                 currentContent.style.height = '0px';
                 forceBrowserReflow();
@@ -574,8 +576,10 @@ const Accordion = (props) => {
                 }
                 else {
                     setTimeout(() => {
+                        var _a;
                         // undo the style so the root class takes back over ('hidden')
                         currentContent.style.visibility = '';
+                        (_a = document.getElementById(expandedPanelId)) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'true');
                     }, expandTimeMs + 1);
                 }
             }
@@ -608,7 +612,6 @@ const Accordion = (props) => {
                     width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
                 }, props.headerButtonClassName)), onClick: e => {
                     e.stopPropagation();
-                    console.warn('click');
                     if (props.onChange) {
                         props.onChange(!open);
                     }
@@ -617,9 +620,12 @@ const Accordion = (props) => {
                     }
                 }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
                 React__namespace.createElement("span", null, props.header))),
-        React__namespace.createElement("div", { ref: content, className: contentStyles },
-            React__namespace.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId, hidden: !open, role: "region", "aria-labelledby": buttonId }, props.children))));
+        React__namespace.createElement("div", { ref: content, className: css.cx([contentStyles, props.contentWrapperClassName]) },
+            React__namespace.createElement("div", { className: css.cx([expandedContentWrapperStyles, props.expandedContentWrapperClassName]), id: expandedPanelId, role: "region", "aria-labelledby": buttonId }, props.children))));
 };
+//TB: FEAT  Just have an AccordionGroup component that takes props.  If you just want one Accordion, pass on item in the array.
+// allows us to manage state the same way rather than having internal and external states we may need to sync up
+// AccordionDef = { label:string, getContent: () => JSX.Element }
 const useAccordionState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
         return i === openIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "11.0.8",
+    "version": "11.0.10",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",