pesona-ui 1.0.9 → 1.0.11

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, forwardRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useMemo, forwardRef, useCallback } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 const Button = ({ type = 'button', className, children, ...rest }) => {
@@ -181,21 +181,67 @@ const Badge = ({ className, text }) => {
 
 const Box = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `box ${className}`, ...rest }, children));
 
-const Tabs = ({ className, navClassName, contentClassName, children, activeTab, handleActiveTab, customHeader, }) => {
+const Tab = ({ children }) => React.createElement(React.Fragment, null, children);
+const TabGroup = ({ children }) => React.createElement(React.Fragment, null, children);
+const Tabs = ({ className = '', navClassName = '', contentClassName = '', children, activeTab, handleActiveTab, customHeader, }) => {
+    const { tabs, groups } = useMemo(() => {
+        const tabs = [];
+        const groups = [];
+        React.Children.forEach(children, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            if (child.type === TabGroup) {
+                const groupTabs = [];
+                React.Children.forEach(child.props.children, (tabChild) => {
+                    if (React.isValidElement(tabChild) && tabChild.type === Tab) {
+                        tabs.push({
+                            title: tabChild.props.title,
+                            icon: tabChild.props.icon,
+                            children: tabChild.props.children,
+                        });
+                        groupTabs.push(tabs.length - 1);
+                    }
+                });
+                groups.push({
+                    title: child.props.title,
+                    tabIndices: groupTabs,
+                });
+            }
+            else if (child.type === Tab) {
+                tabs.push({
+                    title: child.props.title,
+                    icon: child.props.icon,
+                    children: child.props.children,
+                });
+            }
+        });
+        return { tabs, groups };
+    }, [children]);
+    useEffect(() => {
+        if (tabs.length > 0 && (activeTab < 0 || activeTab >= tabs.length)) {
+            handleActiveTab(0);
+        }
+    }, [tabs.length, activeTab, handleActiveTab]);
+    const renderTabItem = (tab, index) => (React.createElement("div", { key: `tab-nav-${index}`, className: `tab-item ${index === activeTab ? 'active' : ''}`, onClick: () => handleActiveTab(index), role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleActiveTab(index);
+            }
+        } },
+        tab.icon && React.createElement("span", { className: "tab-icon" }, tab.icon),
+        React.createElement("span", { className: "tab-title" }, tab.title)));
     return (React.createElement("div", { className: `card tabs ${className}` },
         React.createElement("div", { className: `card-header ${navClassName}` },
             customHeader,
-            React.createElement("div", { className: "nav-tabs", role: "tablist" }, React.Children.map(children, (child, index) => (React.createElement("div", { key: child.props.title, className: `tab-item ${index === activeTab ? 'active' : ''}`, onClick: () => handleActiveTab(index), role: "button", tabIndex: 0, onKeyDown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ')
-                        handleActiveTab(index);
-                } },
-                child.props.icon && child.props.icon,
-                child.props.title))))),
-        React.createElement("div", { className: `card-body ${contentClassName || ''}` },
+            React.createElement("div", { className: "nav-tabs", role: "tablist" }, groups.length > 0
+                ? groups.map((group) => (React.createElement(React.Fragment, { key: `group-${group.title}` },
+                    React.createElement("legend", { className: "tab-item-legend" }, group.title),
+                    group.tabIndices.map((tabIndex) => (renderTabItem(tabs[tabIndex], tabIndex))))))
+                : tabs.map((tab, i) => renderTabItem(tab, i)))),
+        React.createElement("div", { className: `card-body ${contentClassName}` },
             React.createElement("div", { className: "tab-content" },
-                React.createElement("div", { className: "tab-panel" }, React.Children.map(children, (child, index) => (index === activeTab ? child : null)))))));
+                React.createElement("div", { className: "tab-panel" }, tabs[activeTab] ? (React.createElement("div", { key: `tab-content-${activeTab}` }, tabs[activeTab].children)) : (React.createElement("div", null, "No content available")))))));
 };
-const Tab = ({ children, title }) => (React.createElement(React.Fragment, { key: title }, children));
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8669,5 +8715,5 @@ const TablePickSelectedItems = ({ count, selectedItem, selectedRows, }) => {
             " Gunakan")));
 };
 
-export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Box, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CheckboxAgreement, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWysiwyg, LinearProgress, ListItem, ListView, LoadingBar, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, Table, TableBody, TableCell, TableDeleteSelectedItems, TableFooter, TableHeader, TablePaginating, TablePickSelectedItems, TableRow, Tabs, Tooltip };
+export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Box, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CheckboxAgreement, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWysiwyg, LinearProgress, ListItem, ListView, LoadingBar, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableDeleteSelectedItems, TableFooter, TableHeader, TablePaginating, TablePickSelectedItems, TableRow, Tabs, Tooltip };
 //# sourceMappingURL=index.esm.js.map