@eml-payments/ui-kit 1.5.1 → 1.5.3

package/dist/src/components/Select/Select.js

@@ -5,6 +5,7 @@ import { FaCheck } from 'react-icons/fa6';
 import { IoMdArrowDropdown, IoMdArrowDropup } from 'react-icons/io';
 import { FaSearch } from 'react-icons/fa';
 import { cn } from '../../lib/utils';
+import { Button } from '../Button';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
@@ -14,31 +15,72 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "aria-label": "Scroll down", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(IoMdArrowDropdown, { className: "h-4 w-4" }) })));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = 'popper', showAlwaysSearch = false, searchPlaceholder = 'Search...', ...props }, ref) => {
+const isSelectItemElement = (node) => {
+    return React.isValidElement(node) && node.type === SelectItem;
+};
+const getNodeText = (node) => {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(getNodeText).join('');
+    }
+    if (React.isValidElement(node)) {
+        const nodeProps = node.props;
+        return getNodeText(nodeProps.children);
+    }
+    return '';
+};
+const countSelectItems = (node) => {
+    return React.Children.toArray(node).reduce((count, child) => {
+        if (isSelectItemElement(child)) {
+            return count + 1;
+        }
+        if (!React.isValidElement(child)) {
+            return count;
+        }
+        const childProps = child.props;
+        if (!childProps.children) {
+            return count;
+        }
+        return count + countSelectItems(childProps.children);
+    }, 0);
+};
+const filterSelectChildren = (node, normalizedSearch) => {
+    return React.Children.toArray(node).reduce((acc, child) => {
+        if (!React.isValidElement(child)) {
+            acc.push(child);
+            return acc;
+        }
+        if (isSelectItemElement(child)) {
+            const childProps = child.props;
+            const itemText = getNodeText(childProps.children).toLowerCase();
+            if (itemText.includes(normalizedSearch)) {
+                acc.push(child);
+            }
+            return acc;
+        }
+        const childProps = child.props;
+        if (!childProps.children) {
+            acc.push(child);
+            return acc;
+        }
+        const filteredNestedChildren = filterSelectChildren(childProps.children, normalizedSearch);
+        if (filteredNestedChildren.length > 0) {
+            acc.push(React.cloneElement(child, {}, filteredNestedChildren));
+        }
+        return acc;
+    }, []);
+};
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', showAlwaysSearch = false, searchPlaceholder = 'Search...', noResultsText = 'No results found', noResultsButtonText, onNoResultsButtonClick, ...props }, ref) => {
     const [searchValue, setSearchValue] = React.useState('');
     const searchRef = React.useRef(null);
     const viewportRef = React.useRef(null);
     const totalItems = React.useMemo(() => {
-        let count = 0;
-        const countItems = (node) => {
-            React.Children.forEach(node, (child) => {
-                if (React.isValidElement(child)) {
-                    if (child.type === SelectItem) {
-                        count++;
-                    }
-                    else {
-                        const childProps = child.props;
-                        if (childProps.children) {
-                            countItems(childProps.children);
-                        }
-                    }
-                }
-            });
-        };
-        countItems(children);
-        return count;
+        return countSelectItems(children);
     }, [children]);
     const shouldShowSearch = showAlwaysSearch || totalItems > 7;
+    const normalizedSearch = searchValue.trim().toLowerCase();
     const handleSearchChange = (value) => {
         setSearchValue(value);
         setTimeout(() => {
@@ -66,45 +108,22 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
         }
     };
     const filteredChildren = React.useMemo(() => {
-        var _a;
-        if (!shouldShowSearch || !searchValue) {
+        if (!shouldShowSearch || !normalizedSearch) {
             return children;
         }
-        const filterChild = (child) => {
-            var _a;
-            if (React.isValidElement(child)) {
-                if (child.type === SelectItem) {
-                    const childProps = child.props;
-                    const itemText = typeof childProps.children === 'string'
-                        ? childProps.children
-                        : React.Children.toArray(childProps.children || []).join('');
-                    if (!itemText.toLowerCase().includes(searchValue.toLowerCase())) {
-                        return null;
-                    }
-                }
-                else if (React.isValidElement(child) && child.props) {
-                    const childProps = child.props;
-                    if (childProps.children) {
-                        const filteredGrandChildren = (_a = React.Children.map(childProps.children, filterChild)) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-                        if (!filteredGrandChildren || filteredGrandChildren.length === 0) {
-                            return null;
-                        }
-                        return React.cloneElement(child, {}, filteredGrandChildren);
-                    }
-                }
-            }
-            return child;
-        };
-        const filtered = (_a = React.Children.map(children, filterChild)) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-        return filtered || [];
-    }, [children, shouldShowSearch, searchValue]);
+        return filterSelectChildren(children, normalizedSearch);
+    }, [children, shouldShowSearch, normalizedSearch]);
+    const filteredItemsCount = React.useMemo(() => {
+        return countSelectItems(filteredChildren);
+    }, [filteredChildren]);
+    const noResultsContent = (_jsxs("div", { className: "px-2 py-1.5 flex flex-col items-start gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: noResultsText }), noResultsButtonText && onNoResultsButtonClick && (_jsx(Button, { variant: "secondaryText", onMouseDown: (event) => event.preventDefault(), onClick: onNoResultsButtonClick, className: "h-auto p-0 text-sm", children: noResultsButtonText }))] }));
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-(--uikit-radius) border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, onCloseAutoFocus: () => {
                 if (shouldShowSearch) {
                     setSearchValue('');
                 }
             }, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsxs(SelectPrimitive.Viewport, { ref: viewportRef, className: cn('p-1', position === 'popper' &&
-                        'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: [shouldShowSearch && (_jsxs("div", { className: "flex items-center px-2 py-1.5 mb-1", children: [_jsx(FaSearch, { className: "h-4 w-4 mr-2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleSearchKeyDown, className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", autoComplete: "off" })] })), filteredChildren] }), _jsx(SelectScrollDownButton, {})] }) }));
+                        'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: [shouldShowSearch && (_jsxs("div", { className: "flex items-center px-2 py-1.5 mb-1", children: [_jsx(FaSearch, { className: "h-4 w-4 mr-2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleSearchKeyDown, className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", autoComplete: "off" })] })), filteredItemsCount === 0 ? noResultsContent : filteredChildren] }), _jsx(SelectScrollDownButton, {})] }) }));
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));

package/dist/src/components/Select/Select.stories.d.ts

@@ -10,3 +10,6 @@ export declare const Size: Story;
 export declare const WithError: Story;
 export declare const WithManyOptions: Story;
 export declare const WithSearchEnabled: Story;
+export declare const EmptyOptions: Story;
+export declare const EmptyOptionsWithCustomText: Story;
+export declare const EmptyOptionsWithActionButton: Story;

package/dist/src/components/Select/Select.stories.js

@@ -37,3 +37,14 @@ export const WithManyOptions = {
 export const WithSearchEnabled = {
     render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select a fruit..." }) }), _jsxs(SelectContent, { showAlwaysSearch: true, children: [_jsx(SelectScrollUpButton, { children: _jsx(FaChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(FaChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" })] })] })] })),
 };
+export const EmptyOptions = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, {})] })),
+};
+export const EmptyOptionsWithCustomText = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, { noResultsText: "No matching options available" })] })),
+};
+export const EmptyOptionsWithActionButton = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, { noResultsText: "No results found", noResultsButtonText: "Add new option", onNoResultsButtonClick: () => {
+                    console.log('Add new option clicked');
+                } })] })),
+};

package/dist/src/components/Select/Select.types.d.ts

@@ -12,4 +12,7 @@ export interface SelectTriggerProps extends ComponentProps<typeof ShadCNSelectTr
 export interface SelectContentProps extends ComponentProps<typeof ShadCNSelectContent> {
     showAlwaysSearch?: boolean;
     searchPlaceholder?: string;
+    noResultsText?: string;
+    noResultsButtonText?: string;
+    onNoResultsButtonClick?: () => void;
 }

package/dist/src/components/SelectWrapper/SelectWrapper.d.ts

@@ -1,2 +1,2 @@
 import type { SelectWrapperProps } from './SelectWrapper.types';
-export declare const SelectWrapper: ({ label, options, value, onChange, size, disabled, error, placeholder, className, }: SelectWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectWrapper: ({ label, options, value, onChange, size, disabled, error, placeholder, noResultsText, noResultsButtonText, onNoResultsButtonClick, className, }: SelectWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectWrapper/SelectWrapper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { Label } from '../Label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/Select';
-export const SelectWrapper = ({ label, options, value, onChange, size = 'default', disabled = false, error = false, placeholder = '', className = '', }) => {
+export const SelectWrapper = ({ label, options, value, onChange, size = 'default', disabled = false, error = false, placeholder = '', noResultsText = 'No results found', noResultsButtonText, onNoResultsButtonClick, className = '', }) => {
     // Component implementation goes here
-    return (_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [label && _jsx(Label, { className: "text-sm font-medium", children: label }), _jsxs(Select, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { "aria-invalid": error, className: cn('w-full', error && 'border-(--uikit-error) ring-1 ring-(--uikit-error)', size === 'small' ? 'h-8 text-xs' : 'h-10 text-sm', className), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, className: cn(size === 'small' ? 'h-8 text-xs' : 'h-10 text-sm'), children: _jsx("span", { children: option.label }) }, option.value))) })] }), error && _jsx("span", { className: "text-(--uikit-error) text-sm", children: "This field is required." })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [label && _jsx(Label, { className: "text-sm font-medium", children: label }), _jsxs(Select, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { "aria-invalid": error, className: cn('w-full', error && 'border-(--uikit-error) ring-1 ring-(--uikit-error)', size === 'small' ? 'h-8 text-xs' : 'h-10 text-sm', className), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { noResultsText: noResultsText, noResultsButtonText: noResultsButtonText, onNoResultsButtonClick: onNoResultsButtonClick, children: options.map((option) => (_jsx(SelectItem, { value: option.value, className: cn(size === 'small' ? 'h-8 text-xs' : 'h-10 text-sm'), children: _jsx("span", { children: option.label }) }, option.value))) })] }), error && _jsx("span", { className: "text-(--uikit-error) text-sm", children: "This field is required." })] }));
 };

package/dist/src/components/SelectWrapper/SelectWrapper.stories.d.ts

@@ -6,7 +6,10 @@ type Story = StoryObj<SelectWrapperProps>;
 export declare const Default: Story;
 export declare const WithValue: Story;
 export declare const Disabled: Story;
-export declare const Error: Story;
+export declare const WithError: Story;
 export declare const WithLabel: Story;
 export declare const WithPlaceholder: Story;
 export declare const WithSize: Story;
+export declare const EmptyOptions: Story;
+export declare const EmptyOptionsWithCustomText: Story;
+export declare const EmptyOptionsWithActionButton: Story;

package/dist/src/components/SelectWrapper/SelectWrapper.stories.js

@@ -18,66 +18,76 @@ const meta = {
         disabled: false,
         error: false,
         className: '',
+        noResultsText: 'No results found',
+        noResultsButtonText: undefined,
+        onNoResultsButtonClick: undefined,
     },
 };
 export default meta;
+const ControlledSelectWrapper = (args) => {
+    const [value, setValue] = React.useState(args.value);
+    return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+};
 export const Default = {
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
 export const WithValue = {
     args: {
         value: 'option2',
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
 export const Disabled = {
     args: {
         disabled: true,
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
-export const Error = {
+export const WithError = {
     args: {
         error: true,
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
 export const WithLabel = {
     args: {
         label: 'Select an option',
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
 export const WithPlaceholder = {
     args: {
         placeholder: 'Select an option...',
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
-    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };
 export const WithSize = {
     args: {
         size: 'small',
     },
-    render: (args) => {
-        const [value, setValue] = React.useState(args.value);
-        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
+};
+export const EmptyOptions = {
+    args: {
+        options: [],
+    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
+};
+export const EmptyOptionsWithCustomText = {
+    args: {
+        options: [],
+        noResultsText: 'No matching options available',
+    },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
+};
+export const EmptyOptionsWithActionButton = {
+    args: {
+        options: [],
+        noResultsText: 'No results found',
+        noResultsButtonText: 'Add new option',
+        onNoResultsButtonClick: () => {
+            console.log('Add new option clicked');
+        },
     },
+    render: (args) => _jsx(ControlledSelectWrapper, { ...args }),
 };

package/dist/src/components/SelectWrapper/SelectWrapper.types.d.ts

@@ -11,5 +11,8 @@ export interface SelectWrapperProps {
     disabled?: boolean;
     error?: boolean;
     placeholder?: string;
+    noResultsText?: string;
+    noResultsButtonText?: string;
+    onNoResultsButtonClick?: () => void;
     className?: string;
 }

package/dist/src/components/Stepper/Stepper.js

@@ -19,7 +19,7 @@ export function Stepper({ steps, currentStep, onStepChange, contentProps, classN
                                     onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(step.id);
                                 }, children: [_jsx("div", { className: cn('w-9 h-9 rounded-full flex items-center justify-center', isPastStep && 'bg-(--uikit-success)/10 text-(--uikit-success)', isActive &&
                                             !isPastStep &&
-                                            'bg-(--uikit-primary)/10 text-[var(--uikit-primary)]', !isPastStep && !isActive && 'bg-muted/50 text-muted-foreground'), children: isPastStep ? _jsx(Check, { size: 16, strokeWidth: 3 }) : ((_a = step.icon) !== null && _a !== void 0 ? _a : index + 1) }), _jsx("span", { className: cn('text-sm font-normal not-italic', isPastStep && 'text-(--uikit-success)', isActive && 'text-[var(--uikit-primary)]', !isPastStep && !isActive && 'text-muted-foreground'), children: step.label })] }), index < steps.length - 1 && (_jsx("div", { className: cn(isVertical ? 'w-[3px] h-14 my-2' : 'h-[3px] flex-1 mx-3 mt-4', isPastStep ? 'bg-(--uikit-success)' : 'bg-muted') }))] }, step.id));
+                                            'bg-(--uikit-secondary)/10 text-[var(--uikit-secondary)]', !isPastStep && !isActive && 'bg-muted/50 text-muted-foreground'), children: isPastStep ? _jsx(Check, { size: 16, strokeWidth: 3 }) : ((_a = step.icon) !== null && _a !== void 0 ? _a : index + 1) }), _jsx("span", { className: cn('text-sm font-normal not-italic', isPastStep && 'text-(--uikit-success)', isActive && 'text-[var(--uikit-secondary)]', !isPastStep && !isActive && 'text-muted-foreground'), children: step.label })] }), index < steps.length - 1 && (_jsx("div", { className: cn(isVertical ? 'w-[3px] h-14 my-2' : 'h-[3px] flex-1 mx-3 mt-4', isPastStep ? 'bg-(--uikit-success)' : 'bg-muted') }))] }, step.id));
                 }) })), _jsx("div", { className: "flex-1", children: (() => {
                     if (React.isValidElement(currentContent)) {
                         return currentContent;

package/dist/src/components/Table/BaseTable/index.d.ts

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

package/dist/src/components/Table/BaseTable/index.js

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

package/dist/src/components/Table/StandardTable/StandardTable.stories.js

@@ -56,7 +56,11 @@ export const EmptyState = {
     render: () => (_jsx(StandardTable, { id: "empty-table", data: [], columns: columns, customNoRows: { message: 'No users found' }, paginationMode: "client" })),
 };
 export const EmptyStateWithIcon = {
-    render: () => (_jsx(StandardTable, { id: "empty-table-with-icon", data: [], columns: columns, paginationMode: "none", customNoRows: { message: 'No transactions', icon: _jsx(MdReceiptLong, { size: 56 }), messageClassName: 'text-xl font-bold' } })),
+    render: () => (_jsx(StandardTable, { id: "empty-table-with-icon", data: [], columns: columns, paginationMode: "none", customNoRows: {
+            message: 'No transactions',
+            icon: _jsx(MdReceiptLong, { size: 56 }),
+            messageClassName: 'text-xl font-bold',
+        } })),
 };
 export const Loading = {
     render: () => _jsx(StandardTable, { id: "loading-table", data: [], columns: columns, isLoading: true, paginationMode: "client" }),

package/dist/src/components/Table/Table.js

@@ -59,7 +59,7 @@ export function Table(props) {
     const paddingBottom = Math.max(totalSize - end, 0);
     const tableRows = table.getRowModel().rows;
     const isTrulyEmpty = tableRows.length === 0 && !props.isLoading && !hasNextPage;
-    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && (_jsx("div", { className: classNames('mui-loader', showHeader ? 'mt-4' : 'mt-0') })), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
+    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader mt-4" }), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
                                         return (_jsx("th", { scope: "col", style: { width: header.getSize() }, className: classNames('select-none text-[14px] font-bold ', header.id === 'select' ? 'p-0' : ' p-4 text-left cursor-pointer'), onClick: !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort()
                                                 ? header.column.getToggleSortingHandler()
                                                 : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'

package/dist/src/components/Textarea/Textarea.js

@@ -2,20 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../lib/utils';
 import { useUIKitTheme } from '../../context/useUIKitTheme';
-export const Textarea = React.forwardRef(({ label, error, helperText, className, maxLength, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }, ref) => {
-    var _a, _b;
+export const Textarea = React.forwardRef(({ label, error, helperText, className, value, defaultValue, onChange, maxLength, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }, ref) => {
+    var _a;
     const theme = useUIKitTheme();
     const generatedId = React.useId();
     const textareaId = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const isInvalid = Boolean(error) || (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== 'false');
-    const isControlled = props.value !== undefined;
-    const currentValue = isControlled ? String((_b = props.value) !== null && _b !== void 0 ? _b : '') : '';
-    const currentLength = currentValue.length;
-    const showLengthIndicator = isControlled && typeof maxLength === 'number' && !error;
+    const isControlled = value !== undefined;
+    const [uncontrolledLength, setUncontrolledLength] = React.useState(() => String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '').length);
+    const currentLength = isControlled ? String(value !== null && value !== void 0 ? value : '').length : uncontrolledLength;
+    const showLengthIndicator = typeof maxLength === 'number' && !error;
     const showHelperRow = !error && (helperText || showLengthIndicator);
     const errorId = error ? `${textareaId}-error` : undefined;
     const helperId = showHelperRow ? `${textareaId}-helper` : undefined;
     const describedBy = [ariaDescribedBy, errorId, helperId].filter(Boolean).join(' ') || undefined;
-    return (_jsxs("div", { className: cn(className), children: [label && (_jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground", children: label })), _jsx("textarea", { id: textareaId, "aria-invalid": isInvalid, "aria-describedby": describedBy, maxLength: maxLength, style: { fontFamily: theme.fontFamily }, className: cn('flex min-h-[80px] w-full text-(--uikit-textSecondary) rounded-(--uikit-radius) border border-(--uikit-inputEnabledBorder) bg-background hover:border-(--uikit-inputHoverBorder) px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition focus-visible:outline-none focus-visible:border-(--uikit-primary) focus-visible:ring-2 focus-visible:ring-(--uikit-primary) aria-invalid:border-(--uikit-error) aria-invalid:focus-visible:ring-(--uikit-error)'), ref: ref, ...props }), error && (_jsx("p", { id: errorId, className: "text-sm font-medium text-error", children: error })), showHelperRow && (_jsxs("div", { id: helperId, className: "mt-1 flex items-center justify-between gap-2", children: [helperText ? _jsx("p", { className: "text-sm font-medium text-foreground", children: helperText }) : _jsx("span", {}), showLengthIndicator && (_jsxs("span", { className: "text-sm font-medium text-foreground", children: [currentLength, "/", maxLength] }))] }))] }));
+    return (_jsxs("div", { className: cn(className), children: [label && (_jsx("label", { htmlFor: textareaId, className: "text-xs font-normal text-muted-foreground", children: label })), _jsx("textarea", { id: textareaId, "aria-invalid": isInvalid, "aria-describedby": describedBy, value: value, defaultValue: defaultValue, onChange: (event) => {
+                    if (!isControlled) {
+                        setUncontrolledLength(event.target.value.length);
+                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                }, maxLength: maxLength, style: { fontFamily: theme.fontFamily }, className: cn('flex min-h-[80px] w-full text-(--uikit-textSecondary) rounded-(--uikit-radius) border border-(--uikit-inputEnabledBorder) bg-background hover:border-(--uikit-inputHoverBorder) px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition focus-visible:outline-none focus-visible:border-(--uikit-primary) focus-visible:ring-2 focus-visible:ring-(--uikit-primary) aria-invalid:border-(--uikit-error) aria-invalid:focus-visible:ring-(--uikit-error)'), ref: ref, ...props }), error && (_jsx("p", { id: errorId, className: "text-sm font-medium text-error", children: error })), showHelperRow && (_jsxs("div", { id: helperId, className: "mt-1 flex items-center justify-between gap-2", children: [helperText ? (_jsx("p", { className: "text-xs font-normal text-muted-foreground", children: helperText })) : (_jsx("span", {})), showLengthIndicator && (_jsxs("span", { className: "text-xs font-normal text-muted-foreground", children: [currentLength, "/", maxLength] }))] }))] }));
 });
 Textarea.displayName = 'Textarea';

package/dist/src/components/Textarea/Textarea.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<TextareaProps>;
 export declare const Default: Story;
 export declare const WithHelperText: Story;
-export declare const WithTextLengthIndicator: Story;
+export declare const WithMaxLengthIndicator: Story;
+export declare const WithMaxLengthIndicatorControlled: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;

package/dist/src/components/Textarea/Textarea.stories.js

@@ -21,12 +21,16 @@ export const WithHelperText = {
         helperText: 'This is a helper text',
     },
 };
-export const WithTextLengthIndicator = {
-    render: (args) => _jsx(ControlledLengthIndicator, { ...args }),
+export const WithMaxLengthIndicator = {
     args: {
+        maxLength: 50,
         helperText: 'This is a helper text',
+        placeholder: 'Type here to see counter...',
     },
 };
+export const WithMaxLengthIndicatorControlled = {
+    render: (args) => _jsx(ControlledLengthIndicator, { ...args }),
+};
 export const WithError = {
     args: {
         error: 'Something went wrong',

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.5.1",
+	"version": "1.5.3",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -43,8 +43,8 @@
 		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
 		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
 		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:eslint": "eslint \"./src/**/*\" --ext .ts,.tsx --cache",
-		"task:eslint:fix": "eslint \"./src/**/*.tsx\" --fix --cache && eslint \"src/**/*.ts\" --fix --cache",
+		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
+		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
 		"task:typecheck": "tsc",
 		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
 	},
@@ -87,6 +87,7 @@
 		"@storybook/react-vite": "^10.0.6",
 		"@tailwindcss/cli": "^4.1.12",
 		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"baseline-browser-mapping": "^2.10.0",
 		"eslint": "^9.31.0",
 		"eslint-config-prettier": "^10.1.5",
 		"eslint-plugin-import": "^2.32.0",
@@ -113,6 +114,10 @@
 		]
 	},
 	"lint-staged": {
-		"*.{js,ts,tsx}": "eslint --fix"
+		"*.{js,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		],
+		"*.{json,md,css}": "prettier --write"
 	}
 }