bianic-ui 2.10.0-alpha.1 → 2.10.0-alpha.2

package/dist/cjs/index.js

@@ -4562,8 +4562,7 @@ var actionButtonConfig = {
 };
 
 var TabMenu = React.forwardRef(function (props, ref) {
-    var variant = props.variant, rounded = props.rounded, _a = props.text, text = _a === void 0 ? '' : _a, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.moreCount, moreCount = _c === void 0 ? 1 : _c, onClose = props.onClose, onClick = props.onClick, _d = props.className, className = _d === void 0 ? '' : _d, rest = __rest(props, ["variant", "rounded", "text", "isActive", "moreCount", "onClose", "onClick", "className"]);
-    var _e = React.useState(false), isMoreExpand = _e[0], setIsMoreExpand = _e[1];
+    var variant = props.variant, rounded = props.rounded, _a = props.text, text = _a === void 0 ? '' : _a, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.moreCount, moreCount = _c === void 0 ? 0 : _c, onClose = props.onClose, onClick = props.onClick, _d = props.className, className = _d === void 0 ? '' : _d, isMoreExpand = props.isMoreExpand, rest = __rest(props, ["variant", "rounded", "text", "isActive", "moreCount", "onClose", "onClick", "className", "isMoreExpand"]);
     var validatedVariant = validUnion(variant, [
         'default',
         'alternative',
@@ -4584,18 +4583,10 @@ var TabMenu = React.forwardRef(function (props, ref) {
     var itemButtonStyles = validatedVariant === 'alternative'
         ? alternativeButtonConfigs[stateKey]
         : defaultButtonConfigs[stateKey];
-    var handleWrapperClick = function (e) {
-        if (isMoreDropdown) {
-            setIsMoreExpand(function (prev) { return !prev; });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
+    var handleWrapperClick = function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); };
     var handleKeyDown = function (e) {
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            if (isMoreDropdown) {
-                setIsMoreExpand(function (prev) { return !prev; });
-            }
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }
     };
@@ -4603,8 +4594,9 @@ var TabMenu = React.forwardRef(function (props, ref) {
         e.stopPropagation();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
+    var moreCountText = moreCount > 0 ? " (".concat(moreCount, ")") : '';
     return (React.createElement("div", __assign({ ref: ref, role: "tab", tabIndex: 0, "aria-selected": isActive, "aria-expanded": isMoreDropdown ? isMoreExpand : undefined, className: "tab-menu group/container flex flex-row items-center font-arial text-size-tiny font-normal select-none transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary-black/30 ".concat(isAlternative && !isMoreDropdown ? 'pe-[36px]' : '', " ").concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(baseStyles, " ").concat(className).trim(), onClick: handleWrapperClick, onKeyDown: handleKeyDown }, rest),
-        React.createElement("span", { className: "truncate flex-grow" }, isMoreDropdown ? "More (".concat(moreCount, ")") : text),
+        React.createElement("span", { className: "truncate flex-grow" }, isMoreDropdown ? "More".concat(moreCountText) : text),
         React.createElement("div", { className: "grid items-center ".concat(itemButtonStyles) }, isMoreDropdown ? (React.createElement("div", { className: "col-start-2 pl-[2px] flex items-center justify-center h-full" }, isMoreExpand ? (React.createElement(TbChevronUp, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })) : (React.createElement(TbChevronDown, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })))) : (React.createElement("button", { type: "button", className: "col-start-2 group p-0.5 focus:outline-none flex items-center justify-center", onClick: handleCloseClick, "aria-label": "Close ".concat(text) },
             React.createElement(TbX, { className: "rounded-radius-sm transition-colors ".concat(actionButtonStyles), size: 14 }))))));
 });

package/dist/cjs/types/components/TabMenu/TabMenu.d.ts

@@ -1,14 +1,24 @@
 import React from 'react';
 import type { ComponentPropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';
-import type { TabMenuVariant, TabMenuRounded } from './configs';
-export interface TabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
-    variant?: TabMenuVariant;
+import type { TabMenuRounded } from './configs';
+interface BaseTabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
     rounded?: TabMenuRounded;
-    text?: string;
-    isActive?: Boolean;
-    moreCount?: number;
+    isActive?: boolean;
     onClose?: () => void;
     onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
 }
+interface StandardTabProps extends BaseTabMenuProps {
+    variant?: 'default' | 'alternative';
+    text: string;
+    isMoreExpand?: never;
+    moreCount?: never;
+}
+interface MoreDropdownTabProps extends BaseTabMenuProps {
+    variant: 'alternative-more';
+    text?: never;
+    isMoreExpand?: boolean;
+    moreCount?: number;
+}
+export type TabMenuProps = StandardTabProps | MoreDropdownTabProps;
 declare const TabMenu: React.ForwardRefExoticComponent<TabMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default TabMenu;

package/dist/cjs/types/stories/TabMenu/TabMenu.stories.d.ts

@@ -11,23 +11,38 @@ declare const meta: {
             control: "select";
             options: string[];
         };
-        rounded: {
-            control: "select";
-            options: string[];
+        text: {
+            control: "text";
+            if: {
+                arg: string;
+                neq: string;
+            };
         };
-        isActive: {
+        isMoreExpand: {
             control: "boolean";
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
         moreCount: {
             control: "number";
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
-        text: {
-            control: "text";
+        rounded: {
+            control: "select";
+            options: string[];
+        };
+        isActive: {
+            control: "boolean";
         };
     };
     args: {
         text: string;
-        isActive: boolean;
+        isActive: false;
         variant: "default";
         rounded: "top";
     };

package/dist/esm/index.js

@@ -4560,8 +4560,7 @@ var actionButtonConfig = {
 };
 
 var TabMenu = forwardRef(function (props, ref) {
-    var variant = props.variant, rounded = props.rounded, _a = props.text, text = _a === void 0 ? '' : _a, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.moreCount, moreCount = _c === void 0 ? 1 : _c, onClose = props.onClose, onClick = props.onClick, _d = props.className, className = _d === void 0 ? '' : _d, rest = __rest(props, ["variant", "rounded", "text", "isActive", "moreCount", "onClose", "onClick", "className"]);
-    var _e = useState(false), isMoreExpand = _e[0], setIsMoreExpand = _e[1];
+    var variant = props.variant, rounded = props.rounded, _a = props.text, text = _a === void 0 ? '' : _a, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.moreCount, moreCount = _c === void 0 ? 0 : _c, onClose = props.onClose, onClick = props.onClick, _d = props.className, className = _d === void 0 ? '' : _d, isMoreExpand = props.isMoreExpand, rest = __rest(props, ["variant", "rounded", "text", "isActive", "moreCount", "onClose", "onClick", "className", "isMoreExpand"]);
     var validatedVariant = validUnion(variant, [
         'default',
         'alternative',
@@ -4582,18 +4581,10 @@ var TabMenu = forwardRef(function (props, ref) {
     var itemButtonStyles = validatedVariant === 'alternative'
         ? alternativeButtonConfigs[stateKey]
         : defaultButtonConfigs[stateKey];
-    var handleWrapperClick = function (e) {
-        if (isMoreDropdown) {
-            setIsMoreExpand(function (prev) { return !prev; });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
+    var handleWrapperClick = function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); };
     var handleKeyDown = function (e) {
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            if (isMoreDropdown) {
-                setIsMoreExpand(function (prev) { return !prev; });
-            }
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }
     };
@@ -4601,8 +4592,9 @@ var TabMenu = forwardRef(function (props, ref) {
         e.stopPropagation();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
+    var moreCountText = moreCount > 0 ? " (".concat(moreCount, ")") : '';
     return (React.createElement("div", __assign({ ref: ref, role: "tab", tabIndex: 0, "aria-selected": isActive, "aria-expanded": isMoreDropdown ? isMoreExpand : undefined, className: "tab-menu group/container flex flex-row items-center font-arial text-size-tiny font-normal select-none transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary-black/30 ".concat(isAlternative && !isMoreDropdown ? 'pe-[36px]' : '', " ").concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(baseStyles, " ").concat(className).trim(), onClick: handleWrapperClick, onKeyDown: handleKeyDown }, rest),
-        React.createElement("span", { className: "truncate flex-grow" }, isMoreDropdown ? "More (".concat(moreCount, ")") : text),
+        React.createElement("span", { className: "truncate flex-grow" }, isMoreDropdown ? "More".concat(moreCountText) : text),
         React.createElement("div", { className: "grid items-center ".concat(itemButtonStyles) }, isMoreDropdown ? (React.createElement("div", { className: "col-start-2 pl-[2px] flex items-center justify-center h-full" }, isMoreExpand ? (React.createElement(TbChevronUp, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })) : (React.createElement(TbChevronDown, { className: "rounded-radius-sm ".concat(isActive ? 'text-primary-black' : 'text-primary-white'), size: 14 })))) : (React.createElement("button", { type: "button", className: "col-start-2 group p-0.5 focus:outline-none flex items-center justify-center", onClick: handleCloseClick, "aria-label": "Close ".concat(text) },
             React.createElement(TbX, { className: "rounded-radius-sm transition-colors ".concat(actionButtonStyles), size: 14 }))))));
 });

package/dist/esm/types/components/TabMenu/TabMenu.d.ts

@@ -1,14 +1,24 @@
 import React from 'react';
 import type { ComponentPropsWithoutRef, MouseEvent, KeyboardEvent } from 'react';
-import type { TabMenuVariant, TabMenuRounded } from './configs';
-export interface TabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
-    variant?: TabMenuVariant;
+import type { TabMenuRounded } from './configs';
+interface BaseTabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
     rounded?: TabMenuRounded;
-    text?: string;
-    isActive?: Boolean;
-    moreCount?: number;
+    isActive?: boolean;
     onClose?: () => void;
     onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
 }
+interface StandardTabProps extends BaseTabMenuProps {
+    variant?: 'default' | 'alternative';
+    text: string;
+    isMoreExpand?: never;
+    moreCount?: never;
+}
+interface MoreDropdownTabProps extends BaseTabMenuProps {
+    variant: 'alternative-more';
+    text?: never;
+    isMoreExpand?: boolean;
+    moreCount?: number;
+}
+export type TabMenuProps = StandardTabProps | MoreDropdownTabProps;
 declare const TabMenu: React.ForwardRefExoticComponent<TabMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default TabMenu;

package/dist/esm/types/stories/TabMenu/TabMenu.stories.d.ts

@@ -11,23 +11,38 @@ declare const meta: {
             control: "select";
             options: string[];
         };
-        rounded: {
-            control: "select";
-            options: string[];
+        text: {
+            control: "text";
+            if: {
+                arg: string;
+                neq: string;
+            };
         };
-        isActive: {
+        isMoreExpand: {
             control: "boolean";
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
         moreCount: {
             control: "number";
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
-        text: {
-            control: "text";
+        rounded: {
+            control: "select";
+            options: string[];
+        };
+        isActive: {
+            control: "boolean";
         };
     };
     args: {
         text: string;
-        isActive: boolean;
+        isActive: false;
         variant: "default";
         rounded: "top";
     };

package/dist/index.d.ts

@@ -728,18 +728,27 @@ interface TabProps extends ComponentPropsWithoutRef<'button'> {
 }
 declare function Tab({ children, active, icon, disabled, mode, fit, size, className, ...rest }: TabProps): React$1.JSX.Element;
 
-type TabMenuVariant = 'default' | 'alternative' | 'alternative-more';
 type TabMenuRounded = 'none' | 'all' | 'top' | 'right' | 'left';
 
-interface TabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
-    variant?: TabMenuVariant;
+interface BaseTabMenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'> {
     rounded?: TabMenuRounded;
-    text?: string;
-    isActive?: Boolean;
-    moreCount?: number;
+    isActive?: boolean;
     onClose?: () => void;
     onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
 }
+interface StandardTabProps extends BaseTabMenuProps {
+    variant?: 'default' | 'alternative';
+    text: string;
+    isMoreExpand?: never;
+    moreCount?: never;
+}
+interface MoreDropdownTabProps extends BaseTabMenuProps {
+    variant: 'alternative-more';
+    text?: never;
+    isMoreExpand?: boolean;
+    moreCount?: number;
+}
+type TabMenuProps = StandardTabProps | MoreDropdownTabProps;
 declare const TabMenu: React$1.ForwardRefExoticComponent<TabMenuProps & React$1.RefAttributes<HTMLDivElement>>;
 
 interface TableCellProps extends ComponentPropsWithoutRef<'td'> {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.10.0-alpha.1",
+  "version": "2.10.0-alpha.2",
   "description": "Design Language System develop by BIAENERGI",
   "repository": {
     "type": "git",