bianic-ui 1.0.0-beta.24 → 1.0.0-beta.26

package/dist/cjs/index.js

@@ -1545,9 +1545,9 @@ function TextInput(_a) {
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
     if (!disabled && isExistValidation && isValid)
-        bottomBorderColor = 'hover:border-b-bia-green';
+        bottomBorderColor = 'border-b-bia-green';
     if (!disabled && isExistValidation && !isValid)
-        bottomBorderColor = 'hover:border-b-bia-red focus:border-b-bia-red';
+        bottomBorderColor = 'border-b-bia-red';
     var iconElement = null;
     if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
@@ -1744,7 +1744,7 @@ var sizeConfig$5 = {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function DefaultDropdownItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, isSelected = _a.isSelected, options = _a.options, caption = _a.caption;
     var _f = React.useState(false), isHovered = _f[0], setisHovered = _f[1];
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
@@ -1753,9 +1753,11 @@ function DefaultDropdownItem(_a) {
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "w-full relative focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
-        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none ".concat(itemClass) },
-            label,
-            isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
+        React.createElement("div", { className: "hover:bg-bia-blue-light-90 active:bg-bia-blue-light-80 select-none flex flex-col ".concat(itemClass) },
+            React.createElement("span", null,
+                label,
+                isExistSubDropdown && (React.createElement(TbChevronRight, { className: "float-right text-bia-grey" }))),
+            React.createElement(Text, { variant: "small-text", extended: "text-bia-coolgrey" }, caption)),
         isOpenDropdown && options && isExistSubDropdown && (React.createElement("div", { className: "absolute z-50 top-0 right-0 translate-x-full border w-full bg-primary-white border-bia-grey-dark-10 rounded-md shadow-lg", onMouseEnter: function () { return setIsHoveredSubMenu(true); }, onMouseLeave: function () { return setIsHoveredSubMenu(false); } }, options.map(function (option) { return (React.createElement(DefaultDropdownItem, { label: option.label, size: size, options: option.options })); })))));
 }
 DefaultDropdownItem.defaultProps = {
@@ -1764,6 +1766,7 @@ DefaultDropdownItem.defaultProps = {
     size: 'md',
     options: [],
     isSelected: false,
+    caption: '',
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1794,7 +1797,7 @@ function SelectInput(_a) {
             React.createElement("div", { className: "absolute inset-y-0 pl-3 flex items-center pointer-events-none text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? (React.createElement(TbChevronUp, { className: "" })) : (React.createElement(TbChevronDown, { className: "" }))),
             isOpen && (React.createElement("div", { className: "absolute border w-full bg-primary-white border-bia-grey-dark-10 rounded-b-md shadow-lg z-10" }, options.map(function (option) {
                 var isSelected = selected && selected.id && option.id === selected.id;
-                return (React.createElement(DefaultDropdownItem, { label: option.label, size: validatedSize, isSelected: isSelected, onClick: function () {
+                return (React.createElement(DefaultDropdownItem, { label: option.label, caption: option.caption, size: validatedSize, isSelected: isSelected, onClick: function () {
                         setSelected(option);
                         setIsOpen(false);
                     } }));
@@ -1817,27 +1820,33 @@ function SelectInputSimulation(_a) {
     var _c = React.useState({
         id: 1,
         label: 'Mohammed Salah',
+        caption: 'Liverpool',
     }), selected = _c[0], setSelected = _c[1];
     var optionData = [
         {
             id: 1,
             label: 'Mohammed Salah',
+            caption: 'Liverpool',
         },
         {
             id: 2,
             label: 'Cristiono Ronaldo',
+            caption: 'Manchester United',
         },
         {
             id: 3,
             label: 'Vinicius Junior',
+            caption: 'Real Madrid',
         },
         {
             id: 4,
             label: 'Lionel Messi',
+            caption: 'Paris Saint Germain',
         },
         {
             id: 5,
             label: 'Ricardo Kaka',
+            caption: 'AC Milan',
         },
     ];
     return (React.createElement(SelectInput, { label: "Input Select", descText: "Deskripsi Input Select", options: optionData, selected: selected, setSelected: setSelected, size: size, id: "demo-id" }));
@@ -2593,31 +2602,51 @@ TagLabel.defaultProps = {
 
 var classConfig = {
     top: {
-        tooltipContainer: 'bottom-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
     },
     right: {
-        tooltipContainer: 'left-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
     },
     bottom: {
-        tooltipContainer: 'top-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
     },
     left: {
-        tooltipContainer: 'right-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
     },
+    'top-right': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'top-left': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-right': {
+        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-left': {
+        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? '300px' : _b;
     var timeout;
-    var _b = React.useState(false), active = _b[0], setActive = _b[1];
+    var _c = React.useState(false), active = _c[0], setActive = _c[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2627,17 +2656,16 @@ function Tooltip(props) {
         clearInterval(timeout);
         setActive(false);
     };
-    var _c = classConfig[direction], tooltipContainer = _c.tooltipContainer, triangleContainer = _c.triangleContainer, triangleShape = _c.triangleShape;
-    return (React.createElement("div", { className: "Tooltip-Wrapper relative block w-fit h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
+    var _d = classConfig[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
+    return (React.createElement("div", { className: "Tooltip-Wrapper relative flex flex-col w-full h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
         children,
-        active && (React.createElement("div", { className: "Tooltip-Tip absolute px-[7px] py-[4px] text-bia-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer) },
-            content,
-            React.createElement("div", { className: "absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "w-0 h-0 ".concat(triangleShape) }))))));
+        active && (React.createElement("div", { className: "Tooltip absolute px-[7px] py-[4px] text-size-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer), style: { maxWidth: maxWidth } },
+            React.createElement("p", { className: " whitespace-pre-wrap break-words" }, content)))));
 }
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
+    maxWidth: '300px',
 };
 Tooltip.defaultProps = {};