infinity-ui-elements 1.8.33 → 1.8.42

package/dist/index.esm.js

@@ -2083,18 +2083,49 @@ const formatDateByPattern = (date, format) => {
     const month = date.getMonth() + 1; // getMonth() returns 0-11
     const year = date.getFullYear();
     const monthNames = [
-        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
-        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
     ];
     const monthNamesFull = [
-        "January", "February", "March", "April", "May", "June",
-        "July", "August", "September", "October", "November", "December"
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
     ];
     const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-    const dayNamesFull = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    const dayNamesFull = [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+    ];
     // Pad numbers with leading zeros
     const pad = (n, length = 2) => {
-        return n.toString().padStart(length, "0");
+        const str = n.toString();
+        if (str.length >= length)
+            return str;
+        return "0".repeat(length - str.length) + str;
     };
     let formatted = format;
     // Replace format patterns
@@ -3850,7 +3881,7 @@ const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-f
         isDisabled: false,
     },
 });
-const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
+const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, position = "suffix", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
     const [uncontrolledTextValue, setUncontrolledTextValue] = React.useState(defaultTextValue || "");
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -4005,12 +4036,14 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
             gap: "gap-3",
         },
     };
-    // Create the select suffix component
-    const selectSuffix = (jsxs("div", { className: "relative flex items-center h-full", children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
+    // Create the select component (prefix or suffix)
+    const selectComponent = (jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), "border-l border-action-outline-neutral-faded pl-2 ml-2 h-full flex items-center", selectTriggerClassName), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
+                }), "h-full flex items-center self-stretch", position === "prefix"
+                    ? "border-r border-action-outline-neutral-faded"
+                    : "border-l border-action-outline-neutral-faded", selectTriggerClassName, position === "prefix" ? "pr-4" : "pl-4"), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
                             ? "w-3 h-3"
                             : size === "medium"
                                 ? "w-3.5 h-3.5"
@@ -4020,10 +4053,12 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 right-0", dropdownPlacement === "bottom"
-                    ? "top-full mt-1"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
+                    ? "top-[30px] mt-1"
                     : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
-    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, suffix: selectSuffix, size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, ...(position === "prefix"
+                    ? { prefix: selectComponent }
+                    : { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
                     ? "default"
                     : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });
@@ -4296,7 +4331,7 @@ function renderDefaultEmptyState({ colSpan }) {
 }
 
 // ==================== Component ====================
-function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
     // ==================== Computed Values ====================
     const hasData = table.getRowModel().rows?.length > 0;
     const headerGroups = table.getHeaderGroups();
@@ -4315,13 +4350,6 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             maxWidth: normalizeSizeValue(maxWidth),
         };
     }, [columnWidths, columnMinWidths, columnMaxWidths]);
-    const containerStyle = React.useMemo(() => {
-        if (!maxHeight)
-            return undefined;
-        return {
-            maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-        };
-    }, [maxHeight]);
     // Resolve loading state: prefer 'loading' prop, fallback to 'isLoading' for backward compatibility
     const resolvedLoading = typeof loading === "boolean" ? loading : Boolean(isLoading);
     const skeletonRowCount = loadingSkeletonRows ?? 5;
@@ -4380,7 +4408,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size, headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", containerClassName), children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size, headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
 }
 // ==================== Export ====================
 const Table = React.forwardRef(TableComponent);