@uxf/ui 11.40.0 → 11.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.40.0",
+    "version": "11.42.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.23",
         "@headlessui/react": "1.7.14",
-        "@uxf/core": "11.35.0",
-        "@uxf/core-react": "11.38.3",
+        "@uxf/core": "11.42.0",
+        "@uxf/core-react": "11.42.0",
         "@uxf/datepicker": "11.32.0",
-        "@uxf/styles": "11.35.0",
+        "@uxf/styles": "11.42.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/tabs/README.md

@@ -28,19 +28,27 @@ function Example() {
 }
 ```
 
-### Only buttons
+### Tabs usage with separate tab content
 
 ```tsx
-import { Tabs } from "@uxf/ui/tabs";
+import {Tabs} from "@uxf/ui/tabs";
 
 function Example() {
     const [activeTab, setActiveTab] = useState("tab-1");
-    
+
     return (
-        <Tabs value={activeTab} onChange={setActiveTab}>
-            <Tabs.Panel name="tab-1" label="Tab 1" />
-            <Tabs.Panel name="tab-2" label="Tab 2" />
-        </Tabs>
+        <div>
+            <Tabs value={activeTab} onChange={setActiveTab}>
+                <Tabs.Panel name="tab-1" label="Tab 1"/>
+                <Tabs.Panel name="tab-2" label="Tab 2"/>
+            </Tabs>
+            <Tabs.PanelContent activeTab={activeTab} name="tab-1">
+                Content outside the tabs
+            </Tabs.PanelContent>
+            <Tabs.PanelContent activeTab={activeTab} name="tab-2">
+                Content outside the tabs
+            </Tabs.PanelContent>
+        </div>
     );
 }
 ```

package/tabs/components/tabs-panel.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsPanel = TabsPanel;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
 function TabsPanel(props) {
+    if ((0, is_nil_1.isNil)(props.children)) {
+        return null;
+    }
     return props.isAlwaysMounted || props.isActive ? (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__panel", !props.isActive && `uxf-tabs__panel--${classes_1.CLASSES.IS_HIDDEN} ${classes_1.CLASSES.IS_HIDDEN}`, props.className) }, props.children)) : null;
 }

package/tabs/create-tab-id.d.ts

@@ -0,0 +1 @@
+export declare function createTabId(containerId: string, tabName: string): string;

package/tabs/create-tab-id.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTabId = createTabId;
+function createTabId(containerId, tabName) {
+    return `${containerId}-${tabName}`;
+}

package/tabs/panel-content.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface PanelContentProps {
+    children?: React.ReactNode;
+    name: string;
+    activeTab: string;
+    shouldStayRendered?: boolean;
+    className?: string;
+}
+export declare function PanelContent(props: PanelContentProps): React.JSX.Element;

package/tabs/panel-content.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelContent = PanelContent;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const create_tab_id_1 = require("./create-tab-id");
+function PanelContent(props) {
+    const id = (0, react_1.useId)();
+    const isTabActive = props.activeTab === props.name;
+    const isTabHidden = !isTabActive;
+    return (react_1.default.createElement("div", { "aria-labelledby": (0, create_tab_id_1.createTabId)(id, props.name), hidden: isTabHidden, id: props.name, role: "tabpanel" }, (props.shouldStayRendered || isTabActive) && (react_1.default.createElement("div", { className: (0, cx_1.cx)(props.className), hidden: props.activeTab !== props.name }, props.children))));
+}

package/tabs/tabs.d.ts

@@ -1,6 +1,7 @@
 import { TabsVariant } from "@uxf/ui/tabs/theme";
 import React, { ReactNode } from "react";
 import { Panel } from "./panel";
+import { PanelContent } from "./panel-content";
 export interface TabsProps<TValue> {
     className?: string;
     classNameButtonList?: string;
@@ -16,5 +17,6 @@ declare namespace Root {
 }
 export declare const Tabs: typeof Root & {
     Panel: typeof Panel;
+    PanelContent: typeof PanelContent;
 };
 export {};

package/tabs/tabs.js

@@ -32,10 +32,9 @@ const tabs_button_list_1 = require("./components/tabs-button-list");
 const tabs_panel_1 = require("./components/tabs-panel");
 const tabs_panels_1 = require("./components/tabs-panels");
 const tabs_root_1 = require("./components/tabs-root");
+const create_tab_id_1 = require("./create-tab-id");
 const panel_1 = require("./panel");
-function createId(containerId, tabName) {
-    return `${containerId}-${tabName}`;
-}
+const panel_content_1 = require("./panel-content");
 function Root(props) {
     const id = (0, react_1.useId)();
     const buttonListRef = (0, react_1.useRef)(null);
@@ -64,7 +63,7 @@ function Root(props) {
     };
     const hasPanelWithChildren = (0, is_not_nil_1.isNotNil)(tabPanels.find((panel) => (0, is_not_nil_1.isNotNil)(panel.props.children)));
     return (react_1.default.createElement(tabs_root_1.TabsRoot, { className: props.className, isVertical: props.isVertical, variant: props.variant },
-        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { className: props.classNameButtonList, isVertical: props.isVertical, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, variant: props.variant }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { className: panel.props.classNameButton, id: createId(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, key: panel.props.name, onClick: () => props.onChange(panel.props.name), ref: (ref) => {
+        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { className: props.classNameButtonList, isVertical: props.isVertical, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, variant: props.variant }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { className: panel.props.classNameButton, id: (0, create_tab_id_1.createTabId)(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, key: panel.props.name, onClick: () => props.onChange(panel.props.name), ref: (ref) => {
                 tabRefs.current[index] = ref;
             }, variant: props.variant }, typeof panel.props.label === "function"
             ? panel.props.label({ isActive: panel.props.name === props.value })
@@ -72,4 +71,4 @@ function Root(props) {
         hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isAlwaysMounted: panel.props.isAlwaysMounted, isHidden: panel.props.isHidden, key: panel.props.name }, panel.props.children)))))));
 }
 Root.displayName = "UxfUiTabs";
-exports.Tabs = Object.assign(Root, { Panel: panel_1.Panel });
+exports.Tabs = Object.assign(Root, { Panel: panel_1.Panel, PanelContent: panel_content_1.PanelContent });

package/tabs/tabs.stories.js

@@ -44,7 +44,7 @@ function Default() {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { className: "mb-5", label: "Vertical", name: "isVertical", onChange: setIsVertical, value: isVertical }),
         react_1.default.createElement(tabs_1.Tabs, { isVertical: isVertical, onChange: setActiveTab, value: activeTab },
-            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "Basic", name: TabEnum.Basic }, "Basic tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "Basic", name: TabEnum.Basic }),
             react_1.default.createElement(tabs_1.Tabs.Panel, { isDisabled: true, label: "Disabled", name: TabEnum.Disabled }, "Disabled tab"),
             react_1.default.createElement(tabs_1.Tabs.Panel, { isHidden: true, label: "Hidden", name: TabEnum.Hidden }, "Hidden"),
             react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Always mounted", name: TabEnum.AlwaysMounted }, "Always mounted tab"),