@mackin.com/styleguide 10.2.4 → 10.2.6

package/index.d.ts

@@ -140,6 +140,7 @@ interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
     checkedThemeColor?: 'primary' | 'primary2' | 'secondary';
     /** Background color when checked.  Mutually exclusive with 'checkedThemeColor'. */
     checkedColor?: string;
+    tabIndex?: number | undefined;
 }
 declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 
@@ -865,6 +866,7 @@ interface SliderProps<T extends SliderValue> {
     sliderTextClassName?: string;
     /** Sets the aria-label value. */
     ariaLabel?: (T extends number ? string : readonly string[] | undefined) | undefined;
+    tabIndex?: number | undefined;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;
 

package/index.esm.js

@@ -497,45 +497,6 @@ const Button = React.forwardRef((props, ref) => {
     return content;
 });
 
-/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
-if the child component is focusable based on certain properties on the control that are found on focusable components */
-const isChildFocusable = (props, type) => {
-    if (props.tabIndex !== undefined && props.tabIndex !== null) {
-        return true;
-    }
-    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
-        return true;
-    }
-    if (props.href || props.cols || props.rows || props.maxLength) {
-        return true;
-    }
-    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
-        return true;
-    }
-    return false;
-};
-const TabIndexContainer = (props) => {
-    const processElement = (node) => {
-        if (!React__default.isValidElement(node)) {
-            return node;
-        }
-        let updatedNode = node;
-        // Use the props-based logic to check focusability
-        if (isChildFocusable(node.props, node.type)) {
-            updatedNode = React__default.cloneElement(node, { tabIndex: props.tabIndexValue });
-        }
-        // Recursively process children
-        if (updatedNode.props.children) {
-            const clonedChildren = React__default.Children.map(updatedNode.props.children, processElement);
-            updatedNode = React__default.cloneElement(updatedNode, {
-                children: clonedChildren,
-            });
-        }
-        return updatedNode;
-    };
-    return (React__default.createElement(React__default.Fragment, null, React__default.Children.map(props.children, processElement)));
-};
-
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -549,6 +510,7 @@ const Accordian = (props) => {
     const [open, setOpen] = React.useState(false);
     const theme = useThemeSafely();
     const content = React.useRef(null);
+    const [children, setChildren] = React.useState();
     const contentStyles = css({
         overflow: 'hidden',
         maxHeight: 0,
@@ -564,6 +526,7 @@ const Accordian = (props) => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                setChildren(props.children);
                 currentContent.classList.add(expandedContentStyles);
                 window.setTimeout(() => {
                     currentContent.classList.add(visibleStyle);
@@ -571,6 +534,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -602,8 +570,7 @@ const Accordian = (props) => {
             }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
             React.createElement("span", null, props.header)),
         React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
-            React.createElement("div", { className: expandedContentWrapperStyles },
-                React.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
+            React.createElement("div", { className: expandedContentWrapperStyles }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -1525,6 +1492,7 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
+    var _a;
     const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
     const selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
@@ -1589,7 +1557,7 @@ const Checkbox = (props) => {
 	`;
     return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
         React.createElement("label", { className: labelStyles },
-            React.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+            React.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -3984,7 +3952,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/index.js

@@ -515,45 +515,6 @@ const Button = React__namespace.forwardRef((props, ref) => {
     return content;
 });
 
-/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
-if the child component is focusable based on certain properties on the control that are found on focusable components */
-const isChildFocusable = (props, type) => {
-    if (props.tabIndex !== undefined && props.tabIndex !== null) {
-        return true;
-    }
-    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
-        return true;
-    }
-    if (props.href || props.cols || props.rows || props.maxLength) {
-        return true;
-    }
-    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
-        return true;
-    }
-    return false;
-};
-const TabIndexContainer = (props) => {
-    const processElement = (node) => {
-        if (!React.isValidElement(node)) {
-            return node;
-        }
-        let updatedNode = node;
-        // Use the props-based logic to check focusability
-        if (isChildFocusable(node.props, node.type)) {
-            updatedNode = React.cloneElement(node, { tabIndex: props.tabIndexValue });
-        }
-        // Recursively process children
-        if (updatedNode.props.children) {
-            const clonedChildren = React.Children.map(updatedNode.props.children, processElement);
-            updatedNode = React.cloneElement(updatedNode, {
-                children: clonedChildren,
-            });
-        }
-        return updatedNode;
-    };
-    return (React.createElement(React.Fragment, null, React.Children.map(props.children, processElement)));
-};
-
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -567,6 +528,7 @@ const Accordian = (props) => {
     const [open, setOpen] = React__namespace.useState(false);
     const theme = useThemeSafely();
     const content = React__namespace.useRef(null);
+    const [children, setChildren] = React__namespace.useState();
     const contentStyles = css.css({
         overflow: 'hidden',
         maxHeight: 0,
@@ -582,6 +544,7 @@ const Accordian = (props) => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                setChildren(props.children);
                 currentContent.classList.add(expandedContentStyles);
                 window.setTimeout(() => {
                     currentContent.classList.add(visibleStyle);
@@ -589,6 +552,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -620,8 +588,7 @@ const Accordian = (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: css.cx('accordian__body', contentStyles) },
-            React__namespace.createElement("div", { className: expandedContentWrapperStyles },
-                React__namespace.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -1543,6 +1510,7 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
+    var _a;
     const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
     const selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
@@ -1607,7 +1575,7 @@ const Checkbox = (props) => {
 	`;
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
-            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -4002,7 +3970,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css.css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/package.json

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