@paubox/ui 0.12.0 → 0.12.1

package/index.esm.js

@@ -1676,7 +1676,7 @@ function _templateObject6$2() {
     };
     return data;
 }
-function _templateObject7() {
+function _templateObject7$1() {
     var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
@@ -1684,7 +1684,7 @@ function _templateObject7() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject7 = function _templateObject() {
+    _templateObject7$1 = function _templateObject() {
         return data;
     };
     return data;
@@ -1932,7 +1932,7 @@ var $headline200Semibold = css(_templateObject4$8(), commonStyles, headline200Fo
 var $headline300Regular = css(_templateObject5$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 var $headline300Semibold = css(_templateObject6$2(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
-var $paragraph100Regular = css(_templateObject7(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
+var $paragraph100Regular = css(_templateObject7$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
 var $paragraph100Semibold = css(_templateObject8(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
 var $paragraph200Regular = css(_templateObject9(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph200Semibold = css(_templateObject10(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
@@ -23213,6 +23213,17 @@ function _templateObject6() {
     };
     return data;
 }
+function _templateObject7() {
+    var data = _tagged_template_literal$i([
+        "\n  ",
+        "\n  color: ",
+        ";\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 // Wrapper for the Input and Icons
 var InputWrapper$2 = styled.div(_templateObject$i());
 var MultiSelectWrapper = styled.div(_templateObject1$c());
@@ -23225,7 +23236,7 @@ var BaseSelect$1 = styled.select(_templateObject2$a(), function(param) {
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, neutral500, function(param) {
     var value = param.value;
-    return value ? textPrimary : neutral500;
+    return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
@@ -23268,13 +23279,16 @@ var MultiSelectChip = function(option) {
 // Style for the Icons
 var IconWrapper$2 = styled.span(_templateObject5$1());
 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; var _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, values = _param.values, setValues = _param.setValues, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$d(_param, [
+    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz; _param.error; var _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_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$d(_param, [
         "sz",
         "error",
         "options",
         "checkbox",
         "placeholder",
+        "label",
+        "chips",
         "values",
         "setValues",
         "type"
@@ -23304,19 +23318,25 @@ var MultiSelect = function(_param) {
                     }, props), {
                         type: type,
                         sz: sz,
+                        value: values,
                         defaultValue: '',
-                        children: !values.length && /*#__PURE__*/ jsx(PlaceholderOption, {
+                        children: !values.length ? /*#__PURE__*/ jsx(PlaceholderOption, {
                             value: "",
                             disabled: true,
                             hidden: true,
                             selected: true,
                             children: "".concat(placeholder || 'Please select...')
+                        }) : !chips && /*#__PURE__*/ jsx(SelectedOption, {
+                            value: "",
+                            hidden: true,
+                            selected: true,
+                            children: "".concat(label || 'Selected', " (").concat(values.length, ")")
                         })
                     })),
                     /*#__PURE__*/ jsx(IconWrapper$2, {
                         children: /*#__PURE__*/ jsx(ChevronDown, {})
                     }),
-                    /*#__PURE__*/ jsx(ChipWrapper$1, {
+                    chips && /*#__PURE__*/ jsx(ChipWrapper$1, {
                         sz: sz,
                         children: values.map(function(value) {
                             var optionData = options.find(function(o) {
@@ -23711,7 +23731,7 @@ function _templateObject2$9() {
 }
 function _templateObject3$7() {
     var data = _tagged_template_literal$g([
-        "\n  display: flex;\n  gap: 0.25rem;\n  max-width: 70%;\n  flex-wrap: wrap;\n  height: auto;\n"
+        "\n  display: flex;\n  gap: 0.25rem;\n  flex-wrap: wrap;\n  height: auto;\n"
     ]);
     _templateObject3$7 = function _templateObject() {
         return data;
@@ -23751,16 +23771,26 @@ var MultiInputChip = function(param) {
     });
 };
 var MultiInput = 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_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, values = _param.values, setValues = _param.setValues, placeholder = _param.placeholder, props = _object_without_properties$b(_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_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, values = _param.values, setValues = _param.setValues, placeholder = _param.placeholder, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, props = _object_without_properties$b(_param, [
         "sz",
         "error",
         "type",
         "values",
         "setValues",
-        "placeholder"
+        "placeholder",
+        "chips"
     ]);
+    var _popperRef_current;
     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();
@@ -23781,6 +23811,7 @@ var MultiInput = function(_param) {
         error: error,
         isFocused: isFocused
     }, props), {
+        ref: popperRef,
         children: [
             /*#__PURE__*/ jsx(BaseInput, _object_spread_props$i(_object_spread$k({}, props), {
                 value: inputValue,
@@ -23793,12 +23824,9 @@ var MultiInput = function(_param) {
                 sz: sz,
                 onFocus: function() {
                     return setIsFocused(true);
-                },
-                onBlur: function() {
-                    return setIsFocused(false);
                 }
             })),
-            /*#__PURE__*/ jsx(ChipWrapper, {
+            chips ? /*#__PURE__*/ jsx(ChipWrapper, {
                 sz: sz,
                 children: values === null || values === void 0 ? void 0 : values.map(function(value, index) {
                     return /*#__PURE__*/ jsx(MultiInputChip, {
@@ -23809,6 +23837,28 @@ var MultiInput = function(_param) {
                         }
                     }, value);
                 })
+            }) : /*#__PURE__*/ jsx(Popper, {
+                anchorRef: popperRef,
+                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,
+                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) {
+                        return /*#__PURE__*/ jsx(MultiInputChip, {
+                            label: value,
+                            type: type,
+                            onClick: function() {
+                                return removeValue(index);
+                            }
+                        }, value);
+                    })
+                })
             })
         ]
     }));

package/package.json

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

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

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

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

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