@uipath/apollo-wind 2.7.1 → 2.9.0

package/dist/components/ui/data-table.cjs

@@ -39,24 +39,57 @@ const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_table_cjs_namespaceObject = require("./table.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const react_table_namespaceObject = require("@tanstack/react-table");
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, sorting: controlledSorting, onSortingChange: controlledOnSortingChange, initialSorting, columnSizing: controlledColumnSizing, onColumnSizingChange: controlledOnColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange: controlledOnColumnVisibilityChange, globalFilterFn, allowWrap = false, toolbarContent, maxBodyHeight }) {
     const useBlockLayout = void 0 !== maxBodyHeight;
     const blockRowClasses = '[&>tr]:table [&>tr]:w-full [&>tr]:table-fixed';
-    const [sorting, setSorting] = external_react_namespaceObject.useState([]);
+    const [internalSorting, setInternalSorting] = external_react_namespaceObject.useState(initialSorting ?? []);
     const [columnFilters, setColumnFilters] = external_react_namespaceObject.useState([]);
-    const [columnVisibility, setColumnVisibility] = external_react_namespaceObject.useState({});
+    const [internalColumnVisibility, setInternalColumnVisibility] = external_react_namespaceObject.useState({});
+    const [internalColumnSizing, setInternalColumnSizing] = external_react_namespaceObject.useState({});
     const [internalRowSelection, setInternalRowSelection] = external_react_namespaceObject.useState({});
-    const isControlled = void 0 !== controlledRowSelection;
-    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const [globalFilter, setGlobalFilter] = external_react_namespaceObject.useState('');
+    const isRowSelectionControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isRowSelectionControlled ? controlledRowSelection : internalRowSelection;
+    const rowSelectionRef = external_react_namespaceObject.useRef(rowSelection);
+    rowSelectionRef.current = rowSelection;
     const setRowSelection = external_react_namespaceObject.useCallback((updater)=>{
-        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
-        if (!isControlled) setInternalRowSelection(next);
+        const next = 'function' == typeof updater ? updater(rowSelectionRef.current) : updater;
+        if (!isRowSelectionControlled) setInternalRowSelection(next);
         controlledOnRowSelectionChange?.(next);
     }, [
-        isControlled,
-        rowSelection,
+        isRowSelectionControlled,
         controlledOnRowSelectionChange
     ]);
+    const isSortingControlled = void 0 !== controlledSorting;
+    const sorting = isSortingControlled ? controlledSorting : internalSorting;
+    const onSortingChange = external_react_namespaceObject.useCallback((updater)=>{
+        if (!isSortingControlled) setInternalSorting((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnSortingChange?.(updater);
+    }, [
+        isSortingControlled,
+        controlledOnSortingChange
+    ]);
+    const isColumnSizingControlled = void 0 !== controlledColumnSizing;
+    const columnSizing = isColumnSizingControlled ? controlledColumnSizing : internalColumnSizing;
+    const onColumnSizingChange = external_react_namespaceObject.useCallback((updater)=>{
+        if (!isColumnSizingControlled) setInternalColumnSizing((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnColumnSizingChange?.(updater);
+    }, [
+        isColumnSizingControlled,
+        controlledOnColumnSizingChange
+    ]);
+    const isColumnVisibilityControlled = void 0 !== controlledColumnVisibility;
+    const columnVisibility = isColumnVisibilityControlled ? controlledColumnVisibility : internalColumnVisibility;
+    const onColumnVisibilityChange = external_react_namespaceObject.useCallback((updater)=>{
+        if (!isColumnVisibilityControlled) setInternalColumnVisibility((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnColumnVisibilityChange?.(updater);
+    }, [
+        isColumnVisibilityControlled,
+        controlledOnColumnVisibilityChange
+    ]);
+    const tanstackGlobalFilterFn = external_react_namespaceObject.useMemo(()=>globalFilterFn ? (row, _columnId, filterValue)=>globalFilterFn(row.original, filterValue) : void 0, [
+        globalFilterFn
+    ]);
     const processedColumns = external_react_namespaceObject.useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -80,21 +113,26 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
     const table = (0, react_table_namespaceObject.useReactTable)({
         data,
         columns: processedColumns,
-        onSortingChange: setSorting,
+        onSortingChange,
         onColumnFiltersChange: setColumnFilters,
         getCoreRowModel: (0, react_table_namespaceObject.getCoreRowModel)(),
         getPaginationRowModel: (0, react_table_namespaceObject.getPaginationRowModel)(),
         getSortedRowModel: (0, react_table_namespaceObject.getSortedRowModel)(),
         getFilteredRowModel: (0, react_table_namespaceObject.getFilteredRowModel)(),
-        onColumnVisibilityChange: setColumnVisibility,
+        onColumnVisibilityChange,
+        onColumnSizingChange,
         onRowSelectionChange: setRowSelection,
+        onGlobalFilterChange: setGlobalFilter,
+        globalFilterFn: tanstackGlobalFilterFn,
         enableColumnResizing: resizable,
         columnResizeMode: 'onChange',
         state: {
             sorting,
             columnFilters,
             columnVisibility,
-            rowSelection
+            columnSizing,
+            rowSelection,
+            globalFilter
         },
         initialState: {
             pagination: {
@@ -108,7 +146,12 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "flex items-center gap-4 py-4",
                 children: [
-                    searchKey && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+                    globalFilterFn ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+                        placeholder: searchPlaceholder,
+                        value: globalFilter,
+                        onChange: (event)=>setGlobalFilter(event.target.value),
+                        className: "max-w-sm"
+                    }) : searchKey && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
                         placeholder: searchPlaceholder,
                         value: table.getColumn(searchKey)?.getFilterValue() ?? '',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
@@ -197,8 +240,9 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableCell, {
-                                            className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
+                                            className: (0, index_cjs_namespaceObject.cn)(allowWrap ? compact ? 'min-h-8 px-2 py-1' : 'min-h-12 px-4 py-2' : compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0'),
                                             onMouseEnter: (e)=>{
+                                                if (allowWrap) return;
                                                 const el = e.currentTarget;
                                                 const value = cell.getValue();
                                                 el.title = el.scrollWidth > el.clientWidth && ('string' == typeof value || 'number' == typeof value) ? String(value) : '';

package/dist/components/ui/data-table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Column, ColumnDef, RowSelectionState } from '@tanstack/react-table';
+import { Column, ColumnDef, ColumnSizingState, OnChangeFn, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
 export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -15,6 +15,28 @@ export interface DataTableProps<TData, TValue> {
     columnToggleText?: string;
     rowSelection?: RowSelectionState;
     onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Controlled sort state. When provided, the table runs in controlled mode for sorting. */
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Initial sort applied when `sorting` is uncontrolled. */
+    initialSorting?: SortingState;
+    /** Controlled column-sizing state. Pairs with `resizable`. */
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
+    /** Controlled column-visibility state. */
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /**
+     * When set, the search input filters whole rows via this predicate.
+     * Takes precedence over `searchKey`.
+     */
+    globalFilterFn?: (row: TData, query: string) => boolean;
+    /**
+     * When true, body cells render multi-line content (drops the default `truncate` class).
+     * Useful for tables that show JSON, long text, or preformatted content.
+     * Default: false (single-line + ellipsis).
+     */
+    allowWrap?: boolean;
     toolbarContent?: React.ReactNode;
     /**
      * When set, the table body scrolls independently with this max height (any CSS length).
@@ -23,7 +45,7 @@ export interface DataTableProps<TData, TValue> {
      */
     maxBodyHeight?: string;
 }
-export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, sorting: controlledSorting, onSortingChange: controlledOnSortingChange, initialSorting, columnSizing: controlledColumnSizing, onColumnSizingChange: controlledOnColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange: controlledOnColumnVisibilityChange, globalFilterFn, allowWrap, toolbarContent, maxBodyHeight, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export declare function DataTableColumnHeader<TData, TValue>({ column, title, children, }: {
     column: Column<TData, TValue>;
     title: string;

package/dist/components/ui/data-table.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-react";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
@@ -9,24 +9,57 @@ import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import { cn } from "../../lib/index.js";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, maxBodyHeight }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, sorting: controlledSorting, onSortingChange: controlledOnSortingChange, initialSorting, columnSizing: controlledColumnSizing, onColumnSizingChange: controlledOnColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange: controlledOnColumnVisibilityChange, globalFilterFn, allowWrap = false, toolbarContent, maxBodyHeight }) {
     const useBlockLayout = void 0 !== maxBodyHeight;
     const blockRowClasses = '[&>tr]:table [&>tr]:w-full [&>tr]:table-fixed';
-    const [sorting, setSorting] = useState([]);
+    const [internalSorting, setInternalSorting] = useState(initialSorting ?? []);
     const [columnFilters, setColumnFilters] = useState([]);
-    const [columnVisibility, setColumnVisibility] = useState({});
+    const [internalColumnVisibility, setInternalColumnVisibility] = useState({});
+    const [internalColumnSizing, setInternalColumnSizing] = useState({});
     const [internalRowSelection, setInternalRowSelection] = useState({});
-    const isControlled = void 0 !== controlledRowSelection;
-    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const [globalFilter, setGlobalFilter] = useState('');
+    const isRowSelectionControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isRowSelectionControlled ? controlledRowSelection : internalRowSelection;
+    const rowSelectionRef = useRef(rowSelection);
+    rowSelectionRef.current = rowSelection;
     const setRowSelection = useCallback((updater)=>{
-        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
-        if (!isControlled) setInternalRowSelection(next);
+        const next = 'function' == typeof updater ? updater(rowSelectionRef.current) : updater;
+        if (!isRowSelectionControlled) setInternalRowSelection(next);
         controlledOnRowSelectionChange?.(next);
     }, [
-        isControlled,
-        rowSelection,
+        isRowSelectionControlled,
         controlledOnRowSelectionChange
     ]);
+    const isSortingControlled = void 0 !== controlledSorting;
+    const sorting = isSortingControlled ? controlledSorting : internalSorting;
+    const onSortingChange = useCallback((updater)=>{
+        if (!isSortingControlled) setInternalSorting((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnSortingChange?.(updater);
+    }, [
+        isSortingControlled,
+        controlledOnSortingChange
+    ]);
+    const isColumnSizingControlled = void 0 !== controlledColumnSizing;
+    const columnSizing = isColumnSizingControlled ? controlledColumnSizing : internalColumnSizing;
+    const onColumnSizingChange = useCallback((updater)=>{
+        if (!isColumnSizingControlled) setInternalColumnSizing((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnColumnSizingChange?.(updater);
+    }, [
+        isColumnSizingControlled,
+        controlledOnColumnSizingChange
+    ]);
+    const isColumnVisibilityControlled = void 0 !== controlledColumnVisibility;
+    const columnVisibility = isColumnVisibilityControlled ? controlledColumnVisibility : internalColumnVisibility;
+    const onColumnVisibilityChange = useCallback((updater)=>{
+        if (!isColumnVisibilityControlled) setInternalColumnVisibility((prev)=>'function' == typeof updater ? updater(prev) : updater);
+        controlledOnColumnVisibilityChange?.(updater);
+    }, [
+        isColumnVisibilityControlled,
+        controlledOnColumnVisibilityChange
+    ]);
+    const tanstackGlobalFilterFn = useMemo(()=>globalFilterFn ? (row, _columnId, filterValue)=>globalFilterFn(row.original, filterValue) : void 0, [
+        globalFilterFn
+    ]);
     const processedColumns = useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -50,21 +83,26 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
     const table = useReactTable({
         data,
         columns: processedColumns,
-        onSortingChange: setSorting,
+        onSortingChange,
         onColumnFiltersChange: setColumnFilters,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
+        onColumnVisibilityChange,
+        onColumnSizingChange,
         onRowSelectionChange: setRowSelection,
+        onGlobalFilterChange: setGlobalFilter,
+        globalFilterFn: tanstackGlobalFilterFn,
         enableColumnResizing: resizable,
         columnResizeMode: 'onChange',
         state: {
             sorting,
             columnFilters,
             columnVisibility,
-            rowSelection
+            columnSizing,
+            rowSelection,
+            globalFilter
         },
         initialState: {
             pagination: {
@@ -78,7 +116,12 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center gap-4 py-4",
                 children: [
-                    searchKey && /*#__PURE__*/ jsx(Input, {
+                    globalFilterFn ? /*#__PURE__*/ jsx(Input, {
+                        placeholder: searchPlaceholder,
+                        value: globalFilter,
+                        onChange: (event)=>setGlobalFilter(event.target.value),
+                        className: "max-w-sm"
+                    }) : searchKey && /*#__PURE__*/ jsx(Input, {
                         placeholder: searchPlaceholder,
                         value: table.getColumn(searchKey)?.getFilterValue() ?? '',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
@@ -167,8 +210,9 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ jsx(TableCell, {
-                                            className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
+                                            className: cn(allowWrap ? compact ? 'min-h-8 px-2 py-1' : 'min-h-12 px-4 py-2' : compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0'),
                                             onMouseEnter: (e)=>{
+                                                if (allowWrap) return;
                                                 const el = e.currentTarget;
                                                 const value = cell.getValue();
                                                 el.title = el.scrollWidth > el.clientWidth && ('string' == typeof value || 'number' == typeof value) ? String(value) : '';

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "./badge" (module) {
+    "@/components/ui/badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -30,22 +30,22 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
-    "./checkbox" (module) {
+    "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
         module.exports = require("./combobox.cjs");
     },
-    "./command" (module) {
+    "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -72,13 +72,13 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("./badge");
+    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -276,21 +276,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -304,14 +304,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_combobox__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _command__rspack_import_14 = __webpack_require__("./command");
+    var _command__rspack_import_14 = __webpack_require__("@/components/ui/command");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _command__rspack_import_14)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -339,21 +339,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -374,21 +374,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_24[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_25 = __webpack_require__("./input");
+    var _input__rspack_import_25 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_25)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("./label");
+    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_46 = __webpack_require__("./table");
+    var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_46)if ([
         "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/dist/components/ui/switch.cjs

@@ -24,24 +24,54 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    switchVariants: ()=>switchVariants,
     Switch: ()=>Switch
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_switch_namespaceObject = require("@radix-ui/react-switch");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const Switch = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_switch_namespaceObject.Root, {
-        className: (0, index_cjs_namespaceObject.cn)('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', className),
+const switchVariants = (0, external_class_variance_authority_namespaceObject.cva)('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', {
+    variants: {
+        size: {
+            default: 'h-6 w-11',
+            sm: 'h-5 w-9'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const switchThumbVariants = (0, external_class_variance_authority_namespaceObject.cva)('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0', {
+    variants: {
+        size: {
+            default: 'h-5 w-5 data-[state=checked]:translate-x-5',
+            sm: 'h-4 w-4 data-[state=checked]:translate-x-4'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const Switch = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, size, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_switch_namespaceObject.Root, {
+        className: (0, index_cjs_namespaceObject.cn)(switchVariants({
+            size
+        }), className),
         ...props,
         ref: ref,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_switch_namespaceObject.Thumb, {
-            className: (0, index_cjs_namespaceObject.cn)('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')
+            className: (0, index_cjs_namespaceObject.cn)(switchThumbVariants({
+                size
+            }))
         })
     }));
 Switch.displayName = react_switch_namespaceObject.Root.displayName;
 exports.Switch = __webpack_exports__.Switch;
+exports.switchVariants = __webpack_exports__.switchVariants;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Switch"
+    "Switch",
+    "switchVariants"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/components/ui/switch.d.ts

@@ -1,4 +1,10 @@
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Switch };
+declare const switchVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch, switchVariants };

package/dist/components/ui/switch.js

@@ -1,14 +1,41 @@
 import { jsx } from "react/jsx-runtime";
 import { Root, Thumb } from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const Switch = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
-        className: cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', className),
+const switchVariants = cva('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', {
+    variants: {
+        size: {
+            default: 'h-6 w-11',
+            sm: 'h-5 w-9'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const switchThumbVariants = cva('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0', {
+    variants: {
+        size: {
+            default: 'h-5 w-5 data-[state=checked]:translate-x-5',
+            sm: 'h-4 w-4 data-[state=checked]:translate-x-4'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const Switch = /*#__PURE__*/ forwardRef(({ className, size, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
+        className: cn(switchVariants({
+            size
+        }), className),
         ...props,
         ref: ref,
         children: /*#__PURE__*/ jsx(Thumb, {
-            className: cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')
+            className: cn(switchThumbVariants({
+                size
+            }))
         })
     }));
 Switch.displayName = Root.displayName;
-export { Switch };
+export { Switch, switchVariants };

package/dist/styles.css

@@ -1146,9 +1146,15 @@
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
   .min-h-\[32px\] {
     min-height: 32px;
   }
@@ -5419,6 +5425,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .data-\[state\=checked\]\:translate-x-4 {
+    &[data-state="checked"] {
+      --tw-translate-x: calc(var(--spacing) * 4);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=checked\]\:translate-x-5 {
     &[data-state="checked"] {
       --tw-translate-x: calc(var(--spacing) * 5);
@@ -6101,6 +6113,11 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_table\]\:\!w-full {
+    & table {
+      width: 100% !important;
+    }
+  }
   .\[\&_tr\]\:border-b {
     & tr {
       border-bottom-style: var(--tw-border-style);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",