@paubox/ui 0.13.0 → 0.14.1

package/index.esm.js

@@ -21944,7 +21944,8 @@ var Popper = function(param) {
         containerRef,
         side,
         align,
-        offset
+        offset,
+        detectEdges
     ]);
     useEffect(function() {
         updatePosition();
@@ -21975,7 +21976,7 @@ var Popper = function(param) {
             overflow: maxHeight ? 'auto' : undefined
         }, style),
         children: children
-    }), document.body);
+    }), document.querySelector('[role="presentation"]') || document.body);
 };
 
 function _array_like_to_array$h(arr, len) {
@@ -23158,7 +23159,7 @@ function _templateObject2$a() {
         ";\n  border-radius: 0.5rem;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
         ";\n  }\n  color: ",
         ";\n  padding: ",
-        ";\n  outline: none;\n  &::placeholder {\n    color: ",
+        ";\n  padding-right: 2rem;\n  outline: none;\n  &::placeholder {\n    color: ",
         ";\n    opacity: 0.3;\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:hover {\n    background-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
@@ -24010,7 +24011,7 @@ function _templateObject2$8() {
         ";\n\n  background-color: ",
         ";\n  border-radius: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
         ";\n  padding: ",
-        ";\n  outline: none;\n  &::placeholder {\n    color: ",
+        ";\n  padding-right: 2rem;\n  outline: none;\n  &::placeholder {\n    color: ",
         ";\n    opacity: 0.3;\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:hover {\n    background-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
@@ -33239,11 +33240,11 @@ function _templateObject3$1() {
 }
 var StyledTableBody = styled.tbody(_templateObject$4());
 var Tr = styled.tr(_templateObject2$2(), function(props) {
-    return props.enableHover && css(_templateObject1$3(), primary100);
+    return props.enableHover && css(_templateObject1$3(), props.disabled ? neutral100 : primary100);
 });
 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, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var table = param.table, columnWidths = param.columnWidths, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     return /*#__PURE__*/ jsxs(StyledTableBody, {
         children: [
             /*#__PURE__*/ jsx("colgroup", {
@@ -33254,13 +33255,15 @@ var TableBody = function(param) {
             }),
             table.getRowModel().rows.map(function(row) {
                 var rowClickEnabled = enableRowSelection || !!onRowClick;
+                var isDisabled = !!(getRowDisabled === null || getRowDisabled === void 0 ? void 0 : getRowDisabled(row.original));
                 return /*#__PURE__*/ jsx(Tr, {
                     role: rowClickEnabled ? 'button' : undefined,
+                    disabled: isDisabled,
                     onClick: onRowClick ? function() {
-                        return onRowClick(row.original);
+                        return !isDisabled && onRowClick(row.original);
                     } : row.getToggleSelectedHandler(),
                     style: {
-                        cursor: rowClickEnabled ? 'pointer' : undefined,
+                        cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined,
                         background: row.getIsSelected() ? primary100 : undefined
                     },
                     enableHover: rowClickEnabled,
@@ -33333,7 +33336,8 @@ var ContextMenuCell = function(param) {
                     var isDisabled = typeof action.disabled === 'function' ? action.disabled(row.original) : action.disabled;
                     return /*#__PURE__*/ jsx(MenuItem, {
                         disabled: isDisabled,
-                        onClick: function() {
+                        onClick: function(e) {
+                            e.stopPropagation();
                             if (!isDisabled) {
                                 action.onClick(row.original);
                                 setOpenMenuId(null);
@@ -33490,7 +33494,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, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    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, getRowDisabled = param.getRowDisabled, 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];
@@ -33574,7 +33578,8 @@ var Table = function(param) {
         enableRowSelection,
         contextMenuActions,
         disableControls,
-        openMenuId
+        openMenuId,
+        testId
     ]);
     var handleSortingChange = useCallback(function(updater) {
         var currentSort = sortBy ? [
@@ -33679,6 +33684,7 @@ var Table = function(param) {
                                 columnWidths: columnWidths,
                                 enableRowSelection: enableRowSelection,
                                 onRowClick: onRowClick,
+                                getRowDisabled: getRowDisabled,
                                 dense: dense,
                                 testId: testId
                             })

package/package.json

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

package/src/lib/MenuItem/MenuItem.d.ts

@@ -1,7 +1,8 @@
+import { MouseEventHandler } from 'react';
 export interface MenuItemProps {
     label: string;
     href?: string;
-    onClick?: () => void;
+    onClick?: MouseEventHandler;
     icon?: React.ReactNode;
     selected?: boolean;
     checkbox?: boolean;

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

@@ -39,6 +39,7 @@ interface TableRowProps<T> {
     selectedRows?: RowSelectState;
     onRowSelectionChange?: OnChangeFn<RowSelectState>;
     onRowClick?: (row: T) => void;
+    getRowDisabled?: (row: T) => boolean;
     contextMenuActions?: RowAction<T>[];
 }
 interface PaginationProps {
@@ -59,5 +60,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, testId, }: 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, getRowDisabled, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

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