@uxf/ui 11.22.0 → 11.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.22.0",
+  "version": "11.22.1",
   "description": "",
   "publishConfig": {
     "access": "public"

package/tabs/components/tabs-button-list.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ForwardedRef, ReactNode } from "react";
 interface TabsButtonListProps {
+    className?: string;
     isVertical?: boolean;
     children: ReactNode;
     onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;

package/tabs/components/tabs-button-list.js

@@ -30,7 +30,7 @@ function Component(props, ref) {
     var _a;
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-tabs__button-list", props.isVertical ? "uxf-tabs__button-list--vertical" : "uxf-tabs__button-list--horizontal", `uxf-tabs__button-list--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`), role: "tablist", onKeyDown: props.onKeyDown, style: props.style }, props.children));
+    react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-tabs__button-list", props.isVertical ? "uxf-tabs__button-list--vertical" : "uxf-tabs__button-list--horizontal", `uxf-tabs__button-list--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.className), role: "tablist", onKeyDown: props.onKeyDown, style: props.style }, props.children));
 }
 exports.Component = Component;
 exports.TabsButtonList = (0, react_1.forwardRef)(Component);

package/tabs/tabs.d.ts

@@ -1,15 +1,16 @@
 import { TabsVariant } from "@uxf/ui/tabs/theme";
 import React, { ReactNode } from "react";
 import { Panel } from "./panel";
-export interface TabsProps {
+export interface TabsProps<TValue> {
     className?: string;
+    classNameButtonList?: string;
     children: ReactNode;
-    value: string;
-    onChange: (value: string) => void;
+    value: TValue;
+    onChange: (value: TValue) => void;
     isVertical?: boolean;
     variant?: TabsVariant;
 }
-declare function Root(props: TabsProps): React.JSX.Element;
+declare function Root<TValue>(props: TabsProps<TValue>): React.JSX.Element;
 declare namespace Root {
     var displayName: string;
 }

package/tabs/tabs.js

@@ -64,7 +64,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, { isVertical: props.isVertical, variant: props.variant, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { key: panel.props.name, ref: (ref) => (tabRefs.current[index] = ref), 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, onClick: () => props.onChange(panel.props.name), variant: props.variant }, typeof panel.props.label === "function"
+        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { isVertical: props.isVertical, variant: props.variant, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, className: props.classNameButtonList }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { key: panel.props.name, ref: (ref) => (tabRefs.current[index] = ref), 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, onClick: () => props.onChange(panel.props.name), variant: props.variant }, typeof panel.props.label === "function"
             ? panel.props.label({ isActive: panel.props.name === props.value })
             : panel.props.label)))),
         hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { key: panel.props.name, className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isHidden: panel.props.isHidden, isAlwaysMounted: panel.props.isAlwaysMounted }, panel.props.children)))))));

package/tabs/tabs.stories.js

@@ -29,17 +29,25 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 const toggle_1 = require("../toggle");
 const tabs_1 = require("./tabs");
+var TabEnum;
+(function (TabEnum) {
+    TabEnum["Basic"] = "tab-basic";
+    TabEnum["Disabled"] = "tab-disabled";
+    TabEnum["Hidden"] = "tab-hidden";
+    TabEnum["AlwaysMounted"] = "tab-always-mounted";
+    TabEnum["Custom"] = "tab-custom";
+})(TabEnum || (TabEnum = {}));
 function Default() {
-    const [activeTab, setActiveTab] = (0, react_1.useState)("tab-basic");
+    const [activeTab, setActiveTab] = (0, react_1.useState)(TabEnum.Basic);
     const [isVertical, setIsVertical] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "Vertical", value: isVertical, onChange: setIsVertical, name: "isVertical", className: "mb-5" }),
         react_1.default.createElement(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, isVertical: isVertical },
-            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-basic", label: "Basic" }, "Basic tab"),
-            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-disabled", label: "Disabled", isDisabled: true }, "Disabled tab"),
-            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-hidden", label: "Hidden", isHidden: true }, "Hidden"),
-            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-always-mounted", label: "Always mounted", isAlwaysMounted: true }, "Always mounted tab"),
-            react_1.default.createElement(tabs_1.Tabs.Panel, { name: "tab-custom", label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Basic, label: "Basic" }, "Basic tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Disabled, label: "Disabled", isDisabled: true }, "Disabled tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Hidden, label: "Hidden", isHidden: true }, "Hidden"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.AlwaysMounted, label: "Always mounted", isAlwaysMounted: true }, "Always mounted tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { name: TabEnum.Custom, label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
                     react_1.default.createElement(icon_1.Icon, { name: "camera", className: "size-4" }),
                     " Custom button")) }, "Custom button tab"))));
 }