@paubox/ui 0.12.1 → 0.13.0

package/index.esm.js

@@ -23709,7 +23709,7 @@ function _templateObject$g() {
 }
 function _templateObject1$b() {
     var data = _tagged_template_literal$g([
-        "\n  flex: 1;\n  border: none;\n  overflow: scroll;\n  min-width: 10rem;\n  background-color: transparent;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n\n  :focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: ",
+        "\n  flex: 1;\n  border: none;\n  overflow: scroll;\n  min-width: 10rem;\n  background-color: transparent;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n\n  :focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: ",
         ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  ",
         "\n"
     ]);
@@ -23784,13 +23784,6 @@ var MultiInput = function(_param) {
     var _useState = _sliced_to_array$9(useState(''), 2), inputValue = _useState[0], setInputValue = _useState[1];
     var _useState1 = _sliced_to_array$9(useState(false), 2), isFocused = _useState1[0], setIsFocused = _useState1[1];
     var popperRef = useRef(null);
-    var popperContentRef = useRef(null);
-    useClickOutside([
-        popperRef,
-        popperContentRef
-    ], function() {
-        setIsFocused(false);
-    }, isFocused);
     var handleKeyDown = function(e) {
         if (e.key === 'Enter' && inputValue.trim()) {
             e.preventDefault();
@@ -23842,11 +23835,10 @@ var MultiInput = function(_param) {
                 maxWidth: popperRef === null || popperRef === void 0 ? void 0 : (_popperRef_current = popperRef.current) === null || _popperRef_current === void 0 ? void 0 : _popperRef_current.offsetWidth,
                 side: "bottom",
                 align: "start",
-                open: isFocused,
+                open: isFocused && values.length > 0,
                 onClose: function() {
                     return setIsFocused(false);
                 },
-                containerRefOverride: popperContentRef,
                 children: /*#__PURE__*/ jsx(ChipWrapper, {
                     sz: sz,
                     children: values === null || values === void 0 ? void 0 : values.map(function(value, index) {
@@ -28473,7 +28465,7 @@ var ModalHeader = styled.div(_templateObject2$5());
 var ModalBody = styled.div(_templateObject3$4());
 var ModalFooter = styled.div(_templateObject4$2(), spacing(1));
 var Modal = function(param) {
-    var open = param.open, onClose = param.onClose, loading = param.loading, title = param.title, header = param.header, children = param.children, actions = param.actions, style = param.style;
+    var open = param.open, onClose = param.onClose, loading = param.loading, title = param.title, header = param.header, children = param.children, actions = param.actions, style = param.style, _param_testId = param.testId, testId = _param_testId === void 0 ? 'modal' : _param_testId;
     return /*#__PURE__*/ jsx(StyledModal, {
         open: open,
         onClose: onClose,
@@ -28506,6 +28498,7 @@ var Modal = function(param) {
                                 right: spacing(2),
                                 background: 'transparent'
                             },
+                            "data-testid": "".concat(testId, "-close-button"),
                             children: /*#__PURE__*/ jsx(Close, {
                                 fontSize: 24
                             })
@@ -28520,7 +28513,9 @@ var Modal = function(param) {
                         var label = _param.label, rest = _object_without_properties$3(_param, [
                             "label"
                         ]);
-                        return /*#__PURE__*/ jsx(Button, _object_spread_props$7(_object_spread$7({}, rest), {
+                        return /*#__PURE__*/ jsx(Button, _object_spread_props$7(_object_spread$7({
+                            "data-testid": "".concat(testId, "-").concat(label.replace(' ', '-').toLowerCase(), "-button")
+                        }, rest), {
                             children: label
                         }));
                     })
@@ -28564,7 +28559,7 @@ function _templateObject1$6() {
 var PaginationContainer = styled.div(_templateObject$8(), spacing(2), spacing(1), spacing(1));
 var PageControls = styled.div(_templateObject1$6());
 var Pagination = function(param) {
-    var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange;
+    var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
     return /*#__PURE__*/ jsxs(PaginationContainer, {
         children: [
             /*#__PURE__*/ jsxs(PageControls, {
@@ -28588,6 +28583,7 @@ var Pagination = function(param) {
                         style: {
                             fontSize: '0.75rem'
                         },
+                        "data-testid": "".concat(testId, "-pagesize-select"),
                         children: [
                             /*#__PURE__*/ jsx("option", {
                                 value: "50",
@@ -28619,6 +28615,7 @@ var Pagination = function(param) {
                             padding: spacing(1),
                             marginLeft: spacing(1)
                         },
+                        "data-testid": "".concat(testId, "-prev-button"),
                         children: /*#__PURE__*/ jsx(ChevronLeft, {})
                     }),
                     /*#__PURE__*/ jsx(Button, {
@@ -28632,6 +28629,7 @@ var Pagination = function(param) {
                             padding: spacing(1),
                             marginLeft: spacing(1)
                         },
+                        "data-testid": "".concat(testId, "-next-button"),
                         children: /*#__PURE__*/ jsx(ChevronRight, {})
                     })
                 ]
@@ -28917,13 +28915,14 @@ var IconWrapper = styled(IconWrapper$3)(_templateObject1$5(), neutral200, neutra
 var StyledInput = styled(BaseInput$1)(_templateObject2$4());
 var GoButton = styled(Button)(_templateObject3$3(), spacing(1), spacing(1));
 var SearchBar = function(_param) {
-    var placeholder = _param.placeholder, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, onClear = _param.onClear, onSubmit = _param.onSubmit, _param_showButton = _param.showButton, showButton = _param_showButton === void 0 ? true : _param_showButton, _param_showFilters = _param.showFilters, showFilters = _param_showFilters === void 0 ? false : _param_showFilters, props = _object_without_properties$2(_param, [
+    var placeholder = _param.placeholder, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, onClear = _param.onClear, onSubmit = _param.onSubmit, _param_showButton = _param.showButton, showButton = _param_showButton === void 0 ? true : _param_showButton, _param_showFilters = _param.showFilters, showFilters = _param_showFilters === void 0 ? false : _param_showFilters, _param_testId = _param.testId, testId = _param_testId === void 0 ? 'search' : _param_testId, props = _object_without_properties$2(_param, [
         "placeholder",
         "error",
         "onClear",
         "onSubmit",
         "showButton",
-        "showFilters"
+        "showFilters",
+        "testId"
     ]);
     var handleKeyDown = function(e) {
         switch(e.key){
@@ -28949,7 +28948,8 @@ var SearchBar = function(_param) {
                     /*#__PURE__*/ jsx(StyledInput, _object_spread_props$5(_object_spread$5({}, props), {
                         onKeyDown: handleKeyDown,
                         error: error,
-                        placeholder: placeholder || 'Search'
+                        placeholder: placeholder || 'Search',
+                        "data-testid": "".concat(testId, "-input")
                     })),
                     Boolean(props.value && typeof onClear === 'function') && /*#__PURE__*/ jsx(IconButton, {
                         onClick: onClear,
@@ -28959,13 +28959,15 @@ var SearchBar = function(_param) {
                         style: {
                             position: 'absolute',
                             right: showButton ? spacing(10) : spacing(1)
-                        }
+                        },
+                        "data-testid": "".concat(testId, "-clear-button")
                     }),
                     showButton && /*#__PURE__*/ jsx(GoButton, {
                         color: "primary",
                         size: "large",
                         disabled: !props.value,
                         onClick: onSubmit,
+                        "data-testid": "".concat(testId, "-go-button"),
                         children: "Go"
                     })
                 ]
@@ -33123,7 +33125,7 @@ var ResizeHandleContainer = styled.div(_templateObject3$2());
 var ResizeHandle = styled.div(_templateObject4$1(), neutral300);
 var SortIcon = styled.span(_templateObject5(), spacing(1));
 var TableHeader = function(param) {
-    var table = param.table, disableControls = param.disableControls, dense = param.dense;
+    var table = param.table, disableControls = param.disableControls, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     return /*#__PURE__*/ jsx(StyledHeader, {
         children: table.getHeaderGroups().map(function(headerGroup) {
             return /*#__PURE__*/ jsx("tr", {
@@ -33152,6 +33154,7 @@ var TableHeader = function(param) {
                                     width: (actionHeaders === null || actionHeaders === void 0 ? void 0 : actionHeaders.includes(header === null || header === void 0 ? void 0 : header.id)) ? "".concat(header.getSize(), "px") : '100%',
                                     cursor: header.column.getCanSort() ? 'pointer' : 'default'
                                 },
+                                "data-testid": header.column.getCanSort() ? "".concat(testId, "-column-header-").concat(header.id.replace(' ', '-').toLowerCase(), "-sort-button") : undefined,
                                 children: [
                                     flexRender(header.column.columnDef.header, header.getContext()),
                                     header.column.getCanSort() && /*#__PURE__*/ jsxs(SortIcon, {
@@ -33240,7 +33243,7 @@ var Tr = styled.tr(_templateObject2$2(), function(props) {
 });
 var Td = styled(Typography)(_templateObject3$1(), neutral300);
 var TableBody = function(param) {
-    var table = param.table, columnWidths = param.columnWidths, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, dense = param.dense;
+    var table = param.table, columnWidths = param.columnWidths, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     return /*#__PURE__*/ jsxs(StyledTableBody, {
         children: [
             /*#__PURE__*/ jsx("colgroup", {
@@ -33261,6 +33264,7 @@ var TableBody = function(param) {
                         background: row.getIsSelected() ? primary100 : undefined
                     },
                     enableHover: rowClickEnabled,
+                    "data-testid": "".concat(testId, "-row-").concat(row.id),
                     children: row.getVisibleCells().map(function(cell) {
                         return /*#__PURE__*/ jsx(Td, {
                             variant: "paragraph200Regular",
@@ -33300,7 +33304,7 @@ function _templateObject$3() {
 }
 var ContextMenuButton = styled(Button)(_templateObject$3(), spacing(0.5));
 var ContextMenuCell = function(param) {
-    var row = param.row, setOpenMenuId = param.setOpenMenuId, openMenuId = param.openMenuId, contextMenuActions = param.contextMenuActions;
+    var row = param.row, setOpenMenuId = param.setOpenMenuId, openMenuId = param.openMenuId, contextMenuActions = param.contextMenuActions, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     var cellRef = useRef(null);
     return /*#__PURE__*/ jsxs("div", {
         ref: cellRef,
@@ -33313,6 +33317,7 @@ var ContextMenuCell = function(param) {
                     e.stopPropagation();
                     setOpenMenuId(openMenuId === row.id ? null : row.id);
                 },
+                "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-button"),
                 children: /*#__PURE__*/ jsx(MoreVertical, {})
             }),
             /*#__PURE__*/ jsx(Popper, {
@@ -33334,7 +33339,8 @@ var ContextMenuCell = function(param) {
                                 setOpenMenuId(null);
                             }
                         },
-                        label: action.label
+                        label: action.label,
+                        "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-").concat(action.label.replace(' ', '-').toLowerCase(), "-button")
                     }, index);
                 })
             })
@@ -33484,7 +33490,7 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
 }))(_templateObject$2(), neutral300, spacing(1));
 var TableWrapper = styled.table(_templateObject1$2());
 var Table = function(param) {
-    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error;
+    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     var containerRef = useRef(null);
     var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
     var _useState1 = _sliced_to_array$1(useState(null), 2), openMenuId = _useState1[0], setOpenMenuId = _useState1[1];
@@ -33522,7 +33528,8 @@ var Table = function(param) {
                         checked: table.getIsAllRowsSelected(),
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllPageRowsSelectedHandler(),
-                        disabled: disableControls
+                        disabled: disableControls,
+                        "data-testid": "".concat(testId, "-header-checkbox")
                     });
                 },
                 cell: function(param) {
@@ -33534,7 +33541,8 @@ var Table = function(param) {
                         onClick: function(e) {
                             return e.stopPropagation();
                         },
-                        onChange: row.getToggleSelectedHandler()
+                        onChange: row.getToggleSelectedHandler(),
+                        "data-testid": "".concat(testId, "-row-").concat(row.id, "-checkbox")
                     });
                 },
                 enableResizing: false
@@ -33553,7 +33561,8 @@ var Table = function(param) {
                         row: row,
                         setOpenMenuId: setOpenMenuId,
                         openMenuId: openMenuId,
-                        contextMenuActions: contextMenuActions
+                        contextMenuActions: contextMenuActions,
+                        testId: testId
                     });
                 },
                 enableResizing: false
@@ -33662,14 +33671,16 @@ var Table = function(param) {
                                 table: table,
                                 columnWidths: columnWidths,
                                 disableControls: disableControls,
-                                dense: dense
+                                dense: dense,
+                                testId: testId
                             }),
                             /*#__PURE__*/ jsx(TableBody, {
                                 table: table,
                                 columnWidths: columnWidths,
                                 enableRowSelection: enableRowSelection,
                                 onRowClick: onRowClick,
-                                dense: dense
+                                dense: dense,
+                                testId: testId
                             })
                         ]
                     })
@@ -33685,7 +33696,8 @@ var Table = function(param) {
                 onPageChange: function(page) {
                     resetContainerScroll();
                     onPageChange(page);
-                }
+                },
+                testId: "".concat(testId, "-pagination")
             })
         ]
     });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Modal/Modal.d.ts

@@ -15,6 +15,7 @@ export interface ModalProps {
     children?: ReactNode;
     actions?: ModalAction[];
     style?: CSSProperties;
+    testId?: string;
 }
-export declare const Modal: ({ open, onClose, loading, title, header, children, actions, style, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ open, onClose, loading, title, header, children, actions, style, testId, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Pagination/Pagination.d.ts

@@ -9,6 +9,7 @@ interface PaginationProps {
     isLoading: boolean;
     onPageSizeChange: (size: number) => void;
     onPageChange: (page: number) => void;
+    testId?: string;
 }
-export declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, onPageChange, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/SearchBar/SearchBar.d.ts

@@ -6,5 +6,6 @@ export interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
     error?: boolean;
     showButton?: boolean;
     showFilters?: boolean;
+    testId?: string;
 }
-export declare const SearchBar: ({ placeholder, error, onClear, onSubmit, showButton, showFilters, ...props }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SearchBar: ({ placeholder, error, onClear, onSubmit, showButton, showFilters, testId, ...props }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Table/ContextMenuCell.d.ts

@@ -5,6 +5,7 @@ interface ContextMenuCellProps<T extends object> {
     setOpenMenuId: React.Dispatch<React.SetStateAction<string | null>>;
     openMenuId: string | null;
     contextMenuActions: RowAction<T>[];
+    testId?: string;
 }
-export declare const ContextMenuCell: <T extends object>({ row, setOpenMenuId, openMenuId, contextMenuActions, }: ContextMenuCellProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ContextMenuCell: <T extends object>({ row, setOpenMenuId, openMenuId, contextMenuActions, testId, }: ContextMenuCellProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/Table.d.ts

@@ -48,6 +48,7 @@ interface PaginationProps {
 }
 interface TableDataProps<T> {
     columns: TableColumn<T>[];
+    testId?: string;
     data?: T[];
     getRowId: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
     isLoading?: boolean;
@@ -58,5 +59,5 @@ interface TableDataProps<T> {
 }
 export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, PaginationProps {
 }
-export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, onRowClick, contextMenuActions, dense, height, error, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/TableBody.d.ts

@@ -6,6 +6,7 @@ interface TableBodyProps<T extends object> {
     enableRowSelection?: boolean;
     onRowClick?: (row: T) => void;
     dense: boolean;
+    testId?: string;
 }
-export declare const TableBody: <T extends object>({ table, columnWidths, enableRowSelection, onRowClick, dense, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T extends object>({ table, columnWidths, enableRowSelection, onRowClick, dense, testId, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/TableHeader.d.ts

@@ -5,6 +5,7 @@ interface TableHeaderProps<T> {
     columnWidths: ColumnWidth[];
     disableControls: boolean;
     dense: boolean;
+    testId?: string;
 }
-export declare const TableHeader: <T extends object>({ table, disableControls, dense, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ table, disableControls, dense, testId, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};