@ballistix.digital/react-components 0.4.79 → 0.4.80

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Eleme
 import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
 import { TPagePaginationNavigationStyles as TPagePaginationNavigationStyles$1 } from 'components/Navigation/PagePagination';
 export { createColumnHelper } from 'helpers/table';
-import { SelectValue } from 'react-tailwindcss-select/dist/components/type';
+import { Option, SelectValue } from 'react-tailwindcss-select/dist/components/type';
 
 declare const base$j: {
     loading: string;
@@ -784,7 +784,7 @@ type TSelectMenuFormProps = {
         value: string;
         disabled?: boolean;
     };
-    error?: string;
+    error?: string | Option | Option[];
     isLoading?: boolean;
     isRequired?: boolean;
     isTouched?: boolean;
@@ -814,9 +814,18 @@ declare const base: {
     input: string;
     menuButton: string;
     menu: string;
+    tagItem: string;
+    tagItemText: string;
+    tagItemIconContainer: string;
+    tagItemIcon: string;
     list: string;
+    listGroupLabel: string;
     listItem: string;
+    listDisabledItem: string;
     searchContainer: string;
+    searchBox: string;
+    searchIcon: string;
+    closeIcon: string;
     emptyState: string;
     trailing: string;
     description: string;

package/dist/index.esm.js

@@ -2662,13 +2662,22 @@ var SelectMenuForm = function (props) {
                         //
                         classNames: {
                             menuButton: function () {
-                                return toClassName(styles$1.input, state === null && '[&>*]:!text-gray-300 ');
+                                return toClassName(styles$1.input, state === null && isValid && '[&>*]:!text-gray-300 ', state === null && !isValid && '[&>*]:!text-red-300');
                             },
                             menu: styles$1.menu,
+                            tagItem: function () { return styles$1.tagItem; },
+                            tagItemText: styles$1.tagItemText,
+                            tagItemIconContainer: styles$1.tagItemIconContainer,
+                            tagItemIcon: styles$1.tagItemIcon,
                             list: styles$1.list,
                             listItem: function () { return styles$1.listItem; },
+                            listDisabledItem: styles$1.listDisabledItem,
+                            listGroupLabel: styles$1.listGroupLabel,
                             searchContainer: styles$1.searchContainer,
-                        } }), !isSolo && (jsxs("div", __assign({ className: styles$1.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles$1.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles$1.error }, { children: error }))] })))] }))] })));
+                            searchBox: styles$1.searchBox,
+                            searchIcon: styles$1.searchIcon,
+                            closeIcon: styles$1.closeIcon,
+                        } }), !isSolo && (jsxs("div", __assign({ className: styles$1.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles$1.description }, { children: description }))), error && isTouched && (jsx("p", __assign({ className: styles$1.error }, { children: JSON.stringify(error) })))] })))] }))] })));
 };
 
 var base = {
@@ -2682,9 +2691,18 @@ var base = {
     input: 'block w-full flex border',
     menuButton: '',
     menu: '!px-0 !py-0 !w-full rounded-md overflow-hidden border !mt-1 absolute bg-white',
+    tagItem: '',
+    tagItemText: '',
+    tagItemIconContainer: '',
+    tagItemIcon: '',
     list: '!px-0 !w-full [&>*]:px-0 max-h-56 overflow-scroll !py-1',
+    listGroupLabel: '',
     listItem: '!w-full !list-none hover:bg-primary-500 hover:text-white !py-2 !px-2',
+    listDisabledItem: '',
     searchContainer: '!w-full !px-2 !py-2 border-b',
+    searchBox: '',
+    searchIcon: '',
+    closeIcon: '',
     emptyState: 'w-full inline-flex items-start justify-start px-4',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
     description: 'text-gray-400 text-xs mt-1',