bianic-ui 1.0.0-beta.28 → 1.0.0-beta.29

package/dist/cjs/index.js

@@ -1757,7 +1757,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;
@@ -1766,9 +1766,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 = {
@@ -1777,6 +1779,7 @@ DefaultDropdownItem.defaultProps = {
     size: 'md',
     options: [],
     isSelected: false,
+    caption: '',
 };
 
 var sizeUnion$1 = ['md', 'sm'];
@@ -1806,7 +1809,7 @@ function SelectInput(_a) {
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 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 z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg" }, 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);
                     } }));
@@ -1826,27 +1829,36 @@ SelectInput.defaultProps = {
 
 function SelectInputSimulation(_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b;
-    var _c = React.useState(null), selected = _c[0], setSelected = _c[1];
+    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, placeholder: '-- Select Player --', id: "demo-id" }));