@mackin.com/styleguide 11.0.9 → 11.0.11

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);
                 }
             }
@@ -598,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;
@@ -1216,7 +1223,9 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     const selected = selectedResultIndex === listItemIndex;
-                    return (React.createElement(ListItem, { key: v, variant: "full", className: cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected, onClick: () => {
+                            onPickValue(v, true);
+                        } },
                         React.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React.createElement(ListItem, { className: p.listItemClassName },

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);
                 }
             }
@@ -616,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;
@@ -1234,7 +1241,9 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     const selected = selectedResultIndex === listItemIndex;
-                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: css.cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: css.cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected, onClick: () => {
+                            onPickValue(v, true);
+                        } },
                         React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React__namespace.createElement(ListItem, { className: p.listItemClassName },

package/package.json

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