@paubox/ui 1.8.0 → 1.9.1

package/index.esm.js

@@ -22324,6 +22324,8 @@ var Popper = function(param) {
     ], onClose, open);
     var updatePosition = useCallback(function() {
         if (!anchorRef.current || !containerRef.current) return;
+        // Check if anchor element is still connected to the DOM
+        if (!anchorRef.current.isConnected) return;
         var anchorRect = anchorRef.current.getBoundingClientRect();
         var popperRect = containerRef.current.getBoundingClientRect();
         var el = anchorRef.current;
@@ -23778,7 +23780,8 @@ function _templateObject$g() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$g([
-        "\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n  position: relative;\n  cursor: ",
+        ";\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  border: 1px solid\n    ",
@@ -23792,7 +23795,7 @@ function _templateObject1$c() {
 }
 function _templateObject2$b() {
     var data = _tagged_template_literal$g([
-        "\n  flex: 1;\n  z-index: 2;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
+        "\n  flex: 1;\n  z-index: 2;\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\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  padding-right: 2rem;\n  outline: none;\n  &::placeholder {\n    color: ",
@@ -23862,6 +23865,9 @@ function _templateObject7$1() {
 // Wrapper for the Input and Icons
 var InputWrapper$2 = styled.div(_templateObject$g());
 var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, function(param) {
@@ -23902,7 +23908,10 @@ var ChipWrapper$1 = styled.div(_templateObject4$8(), neutral100, neutral300, fun
 var MultiSelectChip = function(option) {
     var label = option.label, onClick = option.onClick, _option_type = option.type, type = _option_type === void 0 ? 'primary' : _option_type, _option_sz = option.sz, sz = _option_sz === void 0 ? 'sm' : _option_sz;
     return /*#__PURE__*/ jsxs(Chip$1, {
-        onClick: onClick,
+        onClick: function(e) {
+            e.stopPropagation();
+            onClick();
+        },
         secondary: type === 'secondary',
         sz: sz,
         children: [
@@ -23934,7 +23943,7 @@ var MultiSelect = function(_param) {
         "type"
     ]);
     var _useState = _sliced_to_array$b(useState(false), 2), open = _useState[0], setOpen = _useState[1];
-    var selectRef = useRef(null);
+    var wrapperRef = useRef(null);
     var toggleSelect = function(option) {
         setValues(values.some(function(val) {
             return val === option.value;
@@ -23945,22 +23954,21 @@ var MultiSelect = function(_param) {
         ]), option);
     };
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
+        ref: wrapperRef,
         disabled: disabled,
         type: type,
         error: error,
         open: open,
         className: className,
+        onClick: function() {
+            return !disabled && setOpen(function(prev) {
+                return !prev;
+            });
+        },
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
-                    /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({
-                        ref: selectRef,
-                        onClick: function() {
-                            setOpen(function(prev) {
-                                return !prev;
-                            });
-                        }
-                    }, props), {
+                    /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({}, props), {
                         type: type,
                         sz: sz,
                         value: values,
@@ -24009,7 +24017,7 @@ var MultiSelect = function(_param) {
                 onClose: function() {
                     return setOpen(false);
                 },
-                anchorRef: selectRef,
+                anchorRef: wrapperRef,
                 align: "start",
                 offset: 4,
                 maxHeight: 400,
@@ -24025,8 +24033,9 @@ var MultiSelect = function(_param) {
                             return val === option.value;
                         })
                     }, option), {
-                        onClick: function() {
-                            return toggleSelect(option);
+                        onClick: function(e) {
+                            e.stopPropagation();
+                            toggleSelect(option);
                         }
                     }), option.value);
                 })
@@ -24679,7 +24688,8 @@ function _templateObject$d() {
 }
 function _templateObject1$a() {
     var data = _tagged_template_literal$d([
-        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: ",
+        ";\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  border: 1px solid\n    ",
@@ -24694,7 +24704,7 @@ function _templateObject1$a() {
 }
 function _templateObject2$9() {
     var data = _tagged_template_literal$d([
-        "\n  flex: 1;\n  cursor: pointer;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
+        "\n  flex: 1;\n  pointer-events: none;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\n  outline: none;\n\n  ",
         "\n"
@@ -24729,6 +24739,9 @@ function _templateObject4$6() {
 // Wrapper for the Input and Icons
 var InputWrapper = styled.div(_templateObject$d());
 var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, function(param) {
@@ -24797,20 +24810,21 @@ var Select = function(_param) {
         error: error,
         open: open,
         style: style,
+        onClick: function() {
+            return !disabled && setOpen(function(prev) {
+                return !prev;
+            });
+        },
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
-                    /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({
-                        onClick: function() {
-                            return setOpen(function(prev) {
-                                return !prev;
-                            });
-                        }
-                    }, props), {
+                    /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$h(_object_spread$k({}, props), {
                         type: type,
                         disabled: disabled,
                         sz: sz,
                         value: value,
+                        // eslint-disable-next-line @typescript-eslint/no-empty-function
+                        onChange: function() {},
                         error: error,
                         children: !value ? /*#__PURE__*/ jsx(SelectOption, {
                             value: "",
@@ -24852,8 +24866,9 @@ var Select = function(_param) {
                     return /*#__PURE__*/ jsx(MenuItem, _object_spread_props$h(_object_spread$k({
                         selected: value === option.value
                     }, option), {
-                        onClick: function() {
-                            return handleSelect(option);
+                        onClick: function(e) {
+                            e.stopPropagation();
+                            handleSelect(option);
                         }
                     }), option.value);
                 })
@@ -29160,14 +29175,15 @@ var Modal = function(param) {
                 }),
                 Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/ jsx(ModalFooter, {
                     children: actions === null || actions === void 0 ? void 0 : actions.map(function(_param) {
-                        var label = _param.label, rest = _object_without_properties$4(_param, [
+                        var id = _param.id, label = _param.label, rest = _object_without_properties$4(_param, [
+                            "id",
                             "label"
                         ]);
                         return /*#__PURE__*/ jsx(Button, _object_spread_props$7(_object_spread$8({
                             "data-testid": "".concat(testId, "-").concat(formatForId(label), "-button")
                         }, rest), {
                             children: label
-                        }));
+                        }), id !== null && id !== void 0 ? id : formatForId(label));
                     })
                 }),
                 loading && /*#__PURE__*/ jsx(LoadingOverlay, {})
@@ -34315,13 +34331,9 @@ var Table = function(param) {
     ]);
     var handleContextMenu = useCallback(function(e, row) {
         e.stopPropagation();
+        ctxMenuAnchorRef.current = e.currentTarget;
         setCtxMenuRow(function(prev) {
-            if (prev === row.original) {
-                ctxMenuAnchorRef.current = null;
-                return null;
-            }
-            ctxMenuAnchorRef.current = e.currentTarget;
-            return row.original;
+            return prev === row.original ? null : row.original;
         });
     }, []);
     var contextColumn = useMemo(function() {
@@ -34334,6 +34346,12 @@ var Table = function(param) {
             cell: function(param) {
                 var row = param.row;
                 return /*#__PURE__*/ jsx(ContextMenuButton, {
+                    ref: function(el) {
+                        // Keep anchor ref in sync when this row's menu is open
+                        if (ctxMenuRow === row.original && el) {
+                            ctxMenuAnchorRef.current = el;
+                        }
+                    },
                     onClick: function(e) {
                         e.stopPropagation();
                         handleContextMenu(e, row);
@@ -34348,7 +34366,8 @@ var Table = function(param) {
         };
     }, [
         handleContextMenu,
-        testId
+        testId,
+        ctxMenuRow
     ]);
     var allColumns = useMemo(function() {
         var cols = _to_consumable_array(tableColumns);

package/package.json

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

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

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { BaseButtonProps } from '../Button/BaseButton';
 type ModalAction = {
+    id?: string;
     label: string;
     onClick: () => void;
     color?: BaseButtonProps['color'];