@ballistix.digital/react-components 9.8.3 → 9.9.0

package/dist/index.js

@@ -4407,6 +4407,7 @@ var $4439474512e19952$export$2e2bcd8739ae039 = $4439474512e19952$var$PagePaginat
 
 
 
+
 const $9420756208be2d43$var$defaultStyles = {
     container: '',
     list: {
@@ -4418,9 +4419,11 @@ const $9420756208be2d43$var$defaultStyles = {
         navigation: 'border-b border-gray-200 -mb-px flex space-x-8'
     },
     tab: {
-        base: 'cursor-pointer',
+        base: 'cursor-pointer flex items-center',
         active: '',
-        inactive: ''
+        inactive: '',
+        loading: 'opacity-50 text-gray-300! cursor-default!',
+        disabled: 'opacity-80 text-gray-300! cursor-not-allowed!'
     }
 };
 const $9420756208be2d43$var$underline = {
@@ -4453,18 +4456,20 @@ const $9420756208be2d43$var$styles = {
 var $9420756208be2d43$export$2e2bcd8739ae039 = $9420756208be2d43$var$styles;
 
 
-const $06795e94e474e27d$var$Container = (props)=>{
-    const { children: children, styles: stylesOverrides } = props;
-    const [active, setActive] = (0, $iA2ta$react.useState)('');
-    const handleGenerateStyle = ()=>{
+const $06795e94e474e27d$var$useGeneratedStyles = (stylesOverrides, variant)=>(0, $iA2ta$react.useMemo)(()=>{
         const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        const keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        keys.forEach((key)=>{
-            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039).base, key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+        (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $9420756208be2d43$export$2e2bcd8739ae039).base).forEach((key)=>{
+            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039).base, key), variant ? (0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039)[variant], key) : undefined, (0, $iA2ta$lodash.get)(stylesOverrides, key)));
         });
         return result;
-    };
-    const styles = handleGenerateStyle();
+    }, [
+        stylesOverrides,
+        variant
+    ]);
+const $06795e94e474e27d$var$Container = (props)=>{
+    const { children: children, styles: stylesOverrides } = props;
+    const [active, setActive] = (0, $iA2ta$react.useState)('');
+    const styles = $06795e94e474e27d$var$useGeneratedStyles(stylesOverrides);
     return (0, $iA2ta$reactjsxruntime.jsx)("div", {
         className: styles.container,
         children: children({
@@ -4475,45 +4480,40 @@ const $06795e94e474e27d$var$Container = (props)=>{
 };
 const $06795e94e474e27d$var$List = (props)=>{
     const { name: name, children: children, active: active, setActive: setActive, styles: stylesOverrides } = props;
-    const handleGenerateStyle = ()=>{
-        const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        const keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        keys.forEach((key)=>{
-            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039).base, key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
-        });
-        return result;
-    };
-    const styles = handleGenerateStyle();
-    const handleChangeSelect = (0, $iA2ta$react.useCallback)((e)=>{
-        const key = e?.currentTarget?.value;
-        const tab = (0, $iA2ta$react.Children).map(children, (child)=>child)?.find((child)=>child.props.accessor === key);
-        if (tab?.props.isDisabled) return;
-        if (tab?.props.href) window.location.href = tab.props.href;
-        else if (tab?.props.onClick) setActive && setActive(tab?.props.accessor);
+    const styles = $06795e94e474e27d$var$useGeneratedStyles(stylesOverrides);
+    const tabs = (0, $iA2ta$react.useMemo)(()=>children, [
+        children
+    ]);
+    const handleChangeSelect = (0, $iA2ta$react.useCallback)((event)=>{
+        const tab = (0, $iA2ta$lodash.find)(tabs, [
+            'props.accessor',
+            event.currentTarget.value
+        ]);
+        if (!tab || tab.props.isDisabled) return;
+        if (tab.props.href) window.location.href = tab.props.href;
+        else if (tab.props.onClick) setActive?.(tab.props.accessor);
     }, [
-        children,
+        tabs,
         setActive
     ]);
     (0, $iA2ta$react.useEffect)(()=>{
-        let tab;
-        const tabs = (0, $iA2ta$react.Children).map(children, (child)=>child);
         const initialTab = (0, $iA2ta$lodash.find)(tabs, [
             'props.isInitial',
             true
-        ]);
-        if (initialTab !== undefined) tab = initialTab;
-        else tab = tabs[0];
-        setActive && setActive(tab?.props?.accessor);
+        ]) ?? tabs[0];
+        if (setActive) setActive(initialTab?.props.accessor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const handleCalculateActiveAccessor = ()=>{
-        let result = active;
-        const currentItem = (0, $iA2ta$react.Children).map(children, (child)=>({
-                ...child.props
-            }))?.find((tab)=>tab?.isCurrent);
-        if (currentItem?.href) result = currentItem?.accessor;
-        return result;
-    };
+    const selectedAccessor = (0, $iA2ta$react.useMemo)(()=>{
+        const current = (0, $iA2ta$lodash.find)(tabs, [
+            'props.isCurrent',
+            true
+        ]);
+        return current?.props.href ? current.props.accessor : active;
+    }, [
+        tabs,
+        active
+    ]);
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.list.container,
         children: [
@@ -4528,17 +4528,14 @@ const $06795e94e474e27d$var$List = (props)=>{
                     (0, $iA2ta$reactjsxruntime.jsx)("select", {
                         id: name,
                         name: name,
-                        value: handleCalculateActiveAccessor(),
+                        value: selectedAccessor,
                         className: styles.list.select,
                         onChange: handleChangeSelect,
-                        children: (0, $iA2ta$react.Children).map(children, (child)=>{
-                            if (child.props.isHidden) return null;
-                            return (0, $iA2ta$reactjsxruntime.jsx)("option", {
-                                value: child.props.accessor,
-                                disabled: child.props.isDisabled,
-                                children: child.props.label
-                            }, child?.props?.accessor);
-                        })
+                        children: (0, $iA2ta$lodash.map)((0, $iA2ta$lodash.filter)(tabs, (tab)=>!tab.props.isHidden), (tab)=>(0, $iA2ta$reactjsxruntime.jsx)("option", {
+                                value: tab.props.accessor,
+                                disabled: tab.props.isDisabled,
+                                children: tab.props.label
+                            }, tab.props.accessor))
                     })
                 ]
             }),
@@ -4553,47 +4550,45 @@ const $06795e94e474e27d$var$List = (props)=>{
     });
 };
 const $06795e94e474e27d$var$Item = (props)=>{
-    const { label: label, icon: icon, as: LinkComponent = 'a', type: type = 'underline', href: href, isCurrent: isCurrent, onClick: onClick, styles: stylesOverrides, isLoading: isLoading, isHidden: isHidden, isDisabled: isDisabled = false } = props;
-    if (isHidden) return null;
-    const handleGenerateStyle = ()=>{
-        const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        const keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $9420756208be2d43$export$2e2bcd8739ae039).base);
-        keys.forEach((key)=>{
-            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039).base, key), type && (0, $iA2ta$lodash.get)((0, $9420756208be2d43$export$2e2bcd8739ae039)[type], key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
-        });
-        return result;
-    };
-    const styles = handleGenerateStyle();
-    const handleClickLink = (e)=>{
-        if (isDisabled || isLoading) {
-            e.preventDefault();
+    const { label: label, icon: icon, as: LinkComponent = 'a', type: type = 'underline', href: href, isCurrent: isCurrent, onClick: onClick, styles: stylesOverrides, isLoading: isLoading, isHidden: isHidden, isDisabled: isDisabled = false, tooltipConfig: { content: tooltipContent, placement: tooltipPlacement } = {} } = props;
+    const styles = $06795e94e474e27d$var$useGeneratedStyles(stylesOverrides, type);
+    const isInteractive = !isDisabled && !isLoading;
+    const handleClick = (0, $iA2ta$react.useCallback)((event)=>{
+        if (!isInteractive) {
+            if (href) event.preventDefault();
             return;
         }
-        if (onClick) onClick(e);
-    };
-    const handleClick = (e)=>{
-        if (isDisabled || isLoading || !onClick) return;
-        onClick(e);
-    };
-    if (href && LinkComponent) return (0, $iA2ta$reactjsxruntime.jsxs)(LinkComponent, {
-        href: href,
-        "aria-disabled": isDisabled,
-        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 text-gray-300! cursor-default!', isLoading && styles.tab.inactive, isDisabled && 'opacity-30 text-gray-300! cursor-not-allowed! pointer-events-none', isDisabled && styles.tab.inactive),
-        onClick: handleClickLink,
+        onClick?.(event);
+    }, [
+        isInteractive,
+        href,
+        onClick
+    ]);
+    if (isHidden) return null;
+    const className = (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && styles.tab.loading, isLoading && styles.tab.inactive, isDisabled && styles.tab.disabled, isDisabled && styles.tab.inactive);
+    const content = (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$reactjsxruntime.Fragment), {
         children: [
             icon,
             label
         ]
     });
-    return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 text-gray-300! cursor-default!', isLoading && styles.tab.inactive, isDisabled && 'opacity-30 text-gray-300! cursor-not-allowed!', isDisabled && styles.tab.inactive),
+    const tab = href && LinkComponent ? (0, $iA2ta$reactjsxruntime.jsx)(LinkComponent, {
+        href: href,
         "aria-disabled": isDisabled,
+        className: className,
         onClick: handleClick,
-        children: [
-            icon,
-            label
-        ]
+        children: content
+    }) : (0, $iA2ta$reactjsxruntime.jsx)("div", {
+        "aria-disabled": isDisabled,
+        className: className,
+        onClick: handleClick,
+        children: content
     });
+    return tooltipContent ? (0, $iA2ta$reactjsxruntime.jsx)((0, $861db172649fba92$export$2e2bcd8739ae039), {
+        content: tooltipContent,
+        placement: tooltipPlacement,
+        children: tab
+    }) : tab;
 };
 const $06795e94e474e27d$var$View = (props)=>{
     const { children: children } = props;