bianic-ui 1.0.0-beta.25 → 1.0.0-beta.27

package/dist/cjs/index.js

@@ -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" }));

package/dist/cjs/types/components/Forms/DropdownItem/Default.d.ts

@@ -6,8 +6,9 @@ interface DefaultDropdownItemProps {
     size?: 'md' | 'sm';
     options?: any;
     isSelected?: boolean;
+    caption?: string;
 }
-declare function DefaultDropdownItem({ className, label, onClick, size, isSelected, options, }: DefaultDropdownItemProps): React.JSX.Element;
+declare function DefaultDropdownItem({ className, label, onClick, size, isSelected, options, caption, }: DefaultDropdownItemProps): React.JSX.Element;
 declare namespace DefaultDropdownItem {
     var defaultProps: {
         className: string;
@@ -15,6 +16,7 @@ declare namespace DefaultDropdownItem {
         size: string;
         options: never[];
         isSelected: boolean;
+        caption: string;
     };
 }
 export default DefaultDropdownItem;

package/dist/esm/index.js

@@ -1742,7 +1742,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 = useState(false), isHovered = _f[0], setisHovered = _f[1];
     var _g = useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
@@ -1751,9 +1751,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 = {
@@ -1762,6 +1764,7 @@ DefaultDropdownItem.defaultProps = {
     size: 'md',
     options: [],
     isSelected: false,
+    caption: '',
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1792,7 +1795,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);
                     } }));
@@ -1815,27 +1818,33 @@ function SelectInputSimulation(_a) {
     var _c = 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" }));

package/dist/esm/types/components/Forms/DropdownItem/Default.d.ts

@@ -6,8 +6,9 @@ interface DefaultDropdownItemProps {
     size?: 'md' | 'sm';
     options?: any;
     isSelected?: boolean;
+    caption?: string;
 }
-declare function DefaultDropdownItem({ className, label, onClick, size, isSelected, options, }: DefaultDropdownItemProps): React.JSX.Element;
+declare function DefaultDropdownItem({ className, label, onClick, size, isSelected, options, caption, }: DefaultDropdownItemProps): React.JSX.Element;
 declare namespace DefaultDropdownItem {
     var defaultProps: {
         className: string;
@@ -15,6 +16,7 @@ declare namespace DefaultDropdownItem {
         size: string;
         options: never[];
         isSelected: boolean;
+        caption: string;
     };
 }
 export default DefaultDropdownItem;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",