@eml-payments/ui-kit 1.5.3 → 1.5.4

package/dist/src/components/InputGroup/InputGroup.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Button } from '../../components/Button';
+import { Input } from '../../components/Input';
+import { Textarea } from '../../components/Textarea';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto', className), ...props }));
+}
+const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    variants: {
+        align: {
+            'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+            'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+            'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+            'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            var _a, _b;
+            if (e.target.closest('button')) {
+                return;
+            }
+            (_b = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: '',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1', className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputGroup } from './InputGroup';
+declare const meta: Meta<typeof InputGroup>;
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+export declare const Basic: Story;
+export declare const WithInlineStartAddon: Story;
+export declare const WithInlineEndAddon: Story;
+export declare const WithBothInlineAddons: Story;
+export declare const WithBlockStartAddon: Story;
+export declare const WithBlockEndAddon: Story;
+export declare const WithInlineStartButton: Story;
+export declare const WithInlineEndButton: Story;
+export declare const WithPassword: Story;
+export declare const WithMultipleButtons: Story;
+export declare const WithTextAndIcon: Story;
+export declare const WithTextarea: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon, CalendarIcon, UserIcon, MailIcon, XIcon, EyeIcon, EyeOffIcon } from 'lucide-react';
+import { useState } from 'react';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, } from './InputGroup';
+const meta = {
+    title: 'UIKit/InputGroup',
+    component: InputGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A versatile input group component that allows combining inputs with addons, buttons, and text.',
+            },
+        },
+    },
+};
+export default meta;
+export const Basic = {
+    render: () => (_jsx(InputGroup, { children: _jsx(InputGroupInput, { placeholder: "Enter text..." }) })),
+};
+export const WithInlineStartAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Search..." })] })),
+};
+export const WithInlineEndAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter email..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(MailIcon, {}) })] })),
+};
+export const WithBothInlineAddons = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(UserIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Username" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx("span", { className: "text-xs", children: "@domain.com" }) })] })),
+};
+export const WithBlockStartAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Email Address" }) }), _jsx(InputGroupInput, { placeholder: "john@example.com" })] })),
+};
+export const WithBlockEndAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter your message..." }), _jsx(InputGroupAddon, { align: "block-end", children: _jsx(InputGroupText, { children: "Additional information" }) })] })),
+};
+export const WithInlineStartButton = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(InputGroupButton, { size: "icon-xs", children: _jsx(SearchIcon, {}) }) }), _jsx(InputGroupInput, { placeholder: "Search..." })] })),
+};
+export const WithInlineEndButton = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter text..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", children: _jsx(XIcon, {}) }) })] })),
+};
+export const WithPassword = {
+    render: () => {
+        const [showPassword, setShowPassword] = useState(false);
+        return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { type: showPassword ? 'text' : 'password', placeholder: "Enter password..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }) })] }));
+    },
+};
+export const WithMultipleButtons = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(InputGroupButton, { size: "xs", children: "Copy" }) }), _jsx(InputGroupInput, { placeholder: "Enter value..." }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(InputGroupButton, { size: "xs", variant: "primary", children: "Save" }), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", children: _jsx(XIcon, {}) })] })] })),
+};
+export const WithTextAndIcon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsxs(InputGroupAddon, { align: "inline-start", children: [_jsx(CalendarIcon, {}), _jsx(InputGroupText, { children: "Date" })] }), _jsx(InputGroupInput, { placeholder: "Select date..." })] })),
+};
+export const WithTextarea = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Description" }) }), _jsx(InputGroupTextarea, { placeholder: "Enter your description...", rows: 4 }), _jsx(InputGroupAddon, { align: "block-end", children: _jsx(InputGroupText, { children: "Max 500 characters" }) })] })),
+};
+export const Disabled = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(UserIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Disabled input...", disabled: true }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", disabled: true, children: _jsx(XIcon, {}) }) })] })),
+};
+export const Invalid = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(MailIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Enter email...", "aria-invalid": "true", defaultValue: "Invalid email" })] })),
+};

package/dist/src/components/InputGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './InputGroup';

package/dist/src/components/InputGroup/index.js

@@ -0,0 +1 @@
+export * from './InputGroup';

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

@@ -24,6 +24,7 @@ export function useInfiniteScrolling(params) {
         count: allRows.length + (isInfinite && hasNextPage ? 1 : 0),
         getScrollElement: () => parentScrollRef.current,
         estimateSize: () => { var _a; return (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.rowEstimate) !== null && _a !== void 0 ? _a : 48; },
+        measureElement: (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 48; },
         overscan: (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.overscan) !== null && _a !== void 0 ? _a : 6,
     });
     const loadLockRef = useRef(false);

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

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
@@ -12,17 +12,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
     const columnVisibility = useMemo(() => {
         return Object.fromEntries(stableGrouping.map((columnId) => [columnId, false]));
     }, [stableGrouping]);
-    const [containerWidth, setContainerWidth] = useState(0);
-    useLayoutEffect(() => {
-        if (!parentScrollRef.current)
-            return;
-        const ro = new ResizeObserver(([entry]) => {
-            setContainerWidth(entry.contentRect.width);
-        });
-        ro.observe(parentScrollRef.current);
-        return () => ro.disconnect();
-    }, []);
-    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled)));
+    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
     const [internalRowSelection, setInternalRowSelection] = useState(() => {
         if (selectedRowIds) {
@@ -108,7 +98,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
         return checkboxSelection ? getCheckboxSelectionColumn(table) : null;
     }, [checkboxSelection, table]);
     useEffect(() => {
-        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled));
+        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : []);
         let finalColumns;
         if (checkboxSelection && selectionColumn) {
             if (checkboxPosition === 'start') {
@@ -125,7 +115,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
             finalColumns = normalized;
         }
         setTableColumns(finalColumns);
-    }, [columns, checkboxSelection, checkboxPosition, containerWidth, virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled]);
+    }, [columns, checkboxSelection, checkboxPosition]);
     return {
         table,
         height,

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

@@ -31,3 +31,5 @@ export * from './Popover';
 export * from './DatePicker';
 export * from './Calendar';
 export * from './Textarea';
+export * from './Combobox';
+export * from './InputGroup';

package/dist/src/components/index.js

@@ -31,3 +31,5 @@ export * from './Popover';
 export * from './DatePicker';
 export * from './Calendar';
 export * from './Textarea';
+export * from './Combobox';
+export * from './InputGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.5.3",
+	"version": "1.5.4",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -49,6 +49,7 @@
 		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
 	},
 	"dependencies": {
+		"@base-ui/react": "^1.3.0",
 		"@radix-ui/react-avatar": "^1.1.10",
 		"@radix-ui/react-checkbox": "^1.3.2",
 		"@radix-ui/react-dialog": "^1.1.14",
@@ -67,7 +68,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.19",
-		"lucide-react": "^0.575.0",
+		"lucide-react": "^0.577.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",