@paubox/ui 0.18.0 → 0.19.0

package/index.esm.js

@@ -22531,6 +22531,9 @@ var FilterRow = function(param) {
     var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
     var currentFilter = values.filters[Number(filterKey)][Number(rowIndex)];
     var _useState = _sliced_to_array$d(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
+    var currentField = fieldOptions.find(function(field) {
+        return field.value === currentFilter.field;
+    });
     return /*#__PURE__*/ jsxs(RowContainer, {
         isHovered: isHovered,
         children: [
@@ -22575,7 +22578,18 @@ var FilterRow = function(param) {
                         ]
                     }),
                     /*#__PURE__*/ jsx(MultiInputContainer, {
-                        children: /*#__PURE__*/ jsx(MultiInput, {
+                        children: currentFilter.field === 'select' ? /*#__PURE__*/ jsx(Select, {
+                            name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
+                            value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.terms,
+                            style: {
+                                width: '100%'
+                            },
+                            sz: "lg",
+                            options: currentField === null || currentField === void 0 ? void 0 : currentField.options,
+                            setValue: function(value) {
+                                return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".terms"), value);
+                            }
+                        }) : /*#__PURE__*/ jsx(MultiInput, {
                             name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
                             values: currentFilter.terms,
                             setValues: function(terms) {
@@ -23376,7 +23390,7 @@ function _templateObject$i() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$i([
-        "\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\n  width: 100%;\n  position: relative;\n  cursor: pointer;\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    ",
@@ -23517,7 +23531,7 @@ var IconWrapper$2 = styled.div(_templateObject5$1(), function(param) {
 var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
 var SelectedOption = styled.option(_templateObject7(), $paragraph200Regular, textPrimary);
 var MultiSelect = function(_param) {
-    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
+    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, className = _param.className, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
         "sz",
         "error",
         "options",
@@ -23525,6 +23539,7 @@ var MultiSelect = function(_param) {
         "placeholder",
         "label",
         "chips",
+        "className",
         "values",
         "setValues",
         "disabled",
@@ -23546,6 +23561,7 @@ var MultiSelect = function(_param) {
         type: type,
         error: error,
         open: open,
+        className: className,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
@@ -24045,8 +24061,8 @@ var MultiInput = function(_param) {
     var handleKeyDown = function(e) {
         if (e.key === 'Enter' && inputValue.trim()) {
             e.preventDefault();
-            if (!values.includes(inputValue.trim())) {
-                setValues(_to_consumable_array$5(values).concat([
+            if (!(values === null || values === void 0 ? void 0 : values.includes(inputValue.trim()))) {
+                setValues === null || setValues === void 0 ? void 0 : setValues(_to_consumable_array$5(values || []).concat([
                     inputValue.trim()
                 ]));
             }
@@ -24054,9 +24070,9 @@ var MultiInput = function(_param) {
         }
     };
     var removeValue = function(index) {
-        var newValues = _to_consumable_array$5(values);
+        var newValues = _to_consumable_array$5(values || []);
         newValues.splice(index, 1);
-        setValues(newValues);
+        setValues === null || setValues === void 0 ? void 0 : setValues(newValues);
     };
     return /*#__PURE__*/ jsxs(InputWrapper$1, _object_spread_props$k(_object_spread$n({
         error: error,
@@ -24099,7 +24115,7 @@ 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 && values.length > 0,
+                        open: isFocused && !!(values === null || values === void 0 ? void 0 : values.length),
                         onClose: function() {
                             return setIsFocused(false);
                         },
@@ -34505,10 +34521,9 @@ function _templateObject() {
         "\n  background-color: ",
         ";\n  border-radius: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  font-size: ",
         ";\n  color: ",
-        ";\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
-        ";\n  min-height: 100%;\n  width: ",
-        ";\n  height: fit-content;\n  position: absolute;\n  display: flex;\n  align-items: center;\n\n  ",
-        "\n  margin-top: auto;\n  margin-bottom: auto;\n"
+        ";\n  z-index: 50;\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
+        ";\n  width: ",
+        ";\n  position: fixed;\n  align-items: center;\n  height: min-content;\n"
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -34527,7 +34542,7 @@ function _templateObject1() {
 }
 function _templateObject2() {
     var data = _tagged_template_literal([
-        "\n  margin: auto;\n  position: absolute;\n  inset: 0;\n\n  ",
+        "\n  position: absolute;\n  ",
         "\n"
     ]);
     _templateObject2 = function _templateObject() {
@@ -34537,13 +34552,10 @@ function _templateObject2() {
 }
 var TooltipWrapper = styled.div(_templateObject(), neutral900, $paragraph300Regular, textPrimaryWhite, function(param) {
     var hover = param.hover;
-    return hover ? 'block' : 'none';
+    return hover ? 'flex' : 'none';
 }, function(param) {
     var size = param.size;
     return size === 'small' ? 'min-content' : 'max-content';
-}, function(param) {
-    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
-    return "\n  margin-right: ".concat(x === 'left' ? '100%' : 'auto', ";\n  margin-left: ").concat(x === 'right' ? '100%' : 'auto', ";\n  z-index: 50;\n  top: ").concat(y === 'bottom' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '1rem' : 'auto' : x === 'right' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '1rem' : 'auto' : x === 'left' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  ");
 });
 var TooltipContainer = styled.div(_templateObject1(), function(param) {
     var hover = param.hover;
@@ -34565,34 +34577,110 @@ var Triangle = function(param) {
     });
 };
 var ToolTipTriangle = styled(Triangle)(_templateObject2(), function(param) {
-    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
-    return "\n\n  top: ".concat(y === 'bottom' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '-0.4rem' : 'auto' : x === 'right' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '-0.4rem' : 'auto' : x === 'left' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n\n  display: ").concat(y === 'center' && x === 'center' ? 'none' : 'block', ";\n  transform: ").concat(y === 'top' ? 'rotate(180deg)' : y === 'bottom' ? 'rotate(0deg)' : x === 'left' ? 'rotate(90deg)' : x === 'right' ? 'rotate(-90deg)' : 'rotate(0deg)', ";\n  ");
+    var _param_placement = param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement;
+    if (placement === 'top') {
+        return "\n        bottom: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(180deg);\n        display: block;\n      ";
+    }
+    if (placement === 'bottom') {
+        return "\n        top: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(0deg);\n        display: block;\n      ";
+    }
+    if (placement === 'left') {
+        return "\n        right: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(90deg);\n        display: block;\n      ";
+    }
+    if (placement === 'right') {
+        return "\n        left: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(-90deg);\n        display: block;\n      ";
+    }
+    return '';
 });
 var Tooltip = function(_param) {
-    var children = _param.children, content = _param.content, rest = _object_without_properties(_param, [
+    var children = _param.children, content = _param.content, className = _param.className, placement = _param.placement, rest = _object_without_properties(_param, [
         "children",
-        "content"
+        "content",
+        "className",
+        "placement"
     ]);
-    var _useState = _sliced_to_array(useState(false), 2), hover = _useState[0], setHover = _useState[1];
+    var tooltipRef = useRef(null);
+    var childRef = useRef(null);
+    var _useState = _sliced_to_array(useState({
+        top: 0,
+        left: 0
+    }), 2), position = _useState[0], setPosition = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), hover = _useState1[0], setHover = _useState1[1];
     var handleMouseEnter = function() {
         setHover(true);
     };
     var handleMouseLeave = function() {
         setHover(false);
     };
+    useEffect(function() {
+        var updatePosition = function() {
+            if (!childRef.current || !tooltipRef.current) return;
+            var childRect = childRef.current.getBoundingClientRect();
+            var tooltipRect = tooltipRef.current.getBoundingClientRect();
+            var scrollX = window.scrollX || window.pageXOffset;
+            var scrollY = window.scrollY || window.pageYOffset;
+            var top = 0, left = 0;
+            switch(placement || 'bottom'){
+                case 'top':
+                    top = childRect.top + scrollY - tooltipRect.height - 5;
+                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+                    break;
+                case 'bottom':
+                    top = childRect.bottom + scrollY + 5;
+                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+                    break;
+                case 'left':
+                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+                    left = childRect.left + scrollX - tooltipRect.width - 5;
+                    break;
+                case 'right':
+                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+                    left = childRect.right + scrollX + 5;
+                    break;
+            }
+            setPosition({
+                top: top,
+                left: left
+            });
+        };
+        if (hover) {
+            updatePosition();
+            window.addEventListener('resize', updatePosition);
+            window.addEventListener('scroll', updatePosition);
+        }
+        return function() {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition);
+        };
+    }, [
+        hover,
+        placement
+    ]);
     return /*#__PURE__*/ jsxs(TooltipContainer, {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         hover: hover,
         children: [
             /*#__PURE__*/ jsx("div", {
+                ref: childRef,
                 children: children
             }),
-            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({}, rest), {
+            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({
+                className: className,
+                ref: tooltipRef,
+                style: {
+                    top: position.top,
+                    left: position.left
+                }
+            }, rest), {
                 hover: hover,
                 children: [
-                    content,
-                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({}, rest))
+                    /*#__PURE__*/ jsx("div", {
+                        children: content
+                    }),
+                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({
+                        placement: placement
+                    }, rest))
                 ]
             }))
         ]

package/package.json

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

package/src/lib/FilterForm/FilterForm.d.ts

@@ -1,17 +1,21 @@
+import { SelectOption } from '@components';
 export interface FilterValue {
     field: string;
     op: string;
     terms: string[];
 }
+export interface FieldOption {
+    label: string;
+    value: string;
+    type?: 'select' | 'string';
+    options?: SelectOption[];
+}
 export interface FilterFormValues {
     filters: Record<string, Record<string, FilterValue>>;
 }
-interface FilterFormProps {
+export interface FilterFormProps {
     values: FilterFormValues;
-    fieldOptions: {
-        label: string;
-        value: string;
-    }[];
+    fieldOptions: FieldOption[];
     operatorOptions: {
         label: string;
         value: string;
@@ -23,4 +27,3 @@ interface FilterFormProps {
     touched?: any;
 }
 export declare const FilterForm: ({ values, fieldOptions, operatorOptions, onSubmit, onClear, onChange, errors, touched, }: FilterFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/src/lib/Inputs/{MultiText.d.ts → MultiInput.d.ts}

@@ -4,10 +4,12 @@ interface MultiInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     type?: 'primary' | 'secondary';
     isFocused?: boolean;
     chips?: boolean;
+    values?: any[];
+    setValues?: (values: any[]) => void;
 }
 export interface MultiInputValues extends MultiInputProps {
     values: string[];
     setValues: (values: string[]) => void;
 }
-export declare const MultiInput: ({ sz, error, type, values, setValues, placeholder, chips, ...props }: MultiInputValues) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultiInput: ({ sz, error, type, values, setValues, placeholder, chips, ...props }: MultiInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Inputs/MultiSelect.d.ts

@@ -10,6 +10,7 @@ export interface MultiSelectProps extends BaseSelectProps {
     placeholder?: string;
     label?: string;
     value?: string | string[];
+    className?: string;
     chips?: boolean;
     sz?: 'sm' | 'lg';
 }
@@ -17,4 +18,4 @@ export interface ChipProps {
     sz?: 'sm' | 'lg';
     secondary?: boolean;
 }
-export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, values, setValues, disabled, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, className, values, setValues, disabled, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/index.d.ts

@@ -1,6 +1,6 @@
 export * from './Input';
 export * from './MultiSelect';
 export * from './Search';
-export * from './MultiText';
+export * from './MultiInput';
 export * from './Select';
 export * from './TextArea';

package/src/lib/Tooltip/Tooltip.d.ts

@@ -1,7 +1,7 @@
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    y?: 'top' | 'bottom' | 'center';
-    x?: 'left' | 'right' | 'center';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
     size?: 'small' | 'large';
+    className?: string;
     children: React.ReactNode;
     content: string;
 }