@fixefy/fixefy-ui-components 0.1.91 → 0.1.92

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -17,7 +17,9 @@ export type AsyncDropdownPropsType = {
     multiple?: boolean;
     name: any;
     variables: any;
-    onChange?: (value: any, actionType: 'check' | 'uncheck' | null) => void;
+    onAdd?: (value: any) => void;
+    onRemoveOne?: (value: any) => void;
+    onRemoveAll?: () => void;
     type?: 'checkbox' | 'text';
     renderOptions?: (option: Option, index: number) => void;
     [x: string]: any;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -121,7 +121,7 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
 });
 const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
     var _props_styles;
-    const { onChange, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
+    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
     const ref = (0, _react.useRef)(null);
     const theme = (0, _material.useTheme)();
     const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
@@ -228,7 +228,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         }
         sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
     };
-    const removeFromStoredDisplayed = (option)=>{
+    const removeOneFromStoredDisplayed = (option)=>{
         let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
         if (storedDisplayed) {
             storedDisplayed = JSON.parse(storedDisplayed);
@@ -258,9 +258,9 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                         return item[search_path];
                     }
                 }).includes(clicked)) {
-                    deleteItem(option);
+                    deleteOneItem(option);
                 } else {
-                    onChange && onChange(option, 'check');
+                    onAdd && onAdd(option);
                     setDisplayed((prev)=>[
                             ...prev,
                             option
@@ -270,18 +270,22 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                 break;
             default:
                 setDisplayed(option);
-                onChange && onChange(option, null);
+                onAdd && onAdd(option);
                 addToStoredDisplayed(option);
         }
     };
-    const deleteItem = (item)=>{
-        if (search_path.includes('workspace')) {
-            setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
+    const deleteOneItem = (item)=>{
+        if (multiple) {
+            if (search_path.includes('workspace')) {
+                setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
+            } else {
+                setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
+            }
         } else {
-            setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
+            setDisplayed('');
         }
-        onChange && onChange(item, 'uncheck');
-        removeFromStoredDisplayed(item);
+        onRemoveOne && onRemoveOne(item);
+        removeOneFromStoredDisplayed(item);
     };
     const isChecked = (option)=>{
         const clicked = getClicked(option);
@@ -378,27 +382,32 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         }
         return rv;
     };
-    const getDeleteButton = (option)=>{
-        if (multiple) {
-            if (displayed.length > 0) {
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    onClick: ()=>{
-                        deleteItem(option);
-                    },
-                    children: "x"
-                });
-            }
-        } else {
-            if (displayed[search_path] === getClicked(option)) {
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    onClick: ()=>{
-                        deleteItem(option);
-                    },
-                    children: "x"
-                });
-            }
+    const DeleteButton = ({ option })=>{
+        let rv = null;
+        switch(multiple){
+            case true:
+                if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
+            case false:
+            default:
+                if (displayed[search_path] === getClicked(option)) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
         }
-        return null;
+        return rv;
     };
     const getValueByModalType = (option, location)=>{
         let rv = null;
@@ -410,7 +419,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                     label: (0, _helpers.titleCase)(clicked),
                     variant: "outlined",
                     onDelete: ()=>{
-                        deleteItem(option);
+                        deleteOneItem(option);
                     }
                 }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
                     status: clicked,
@@ -438,16 +447,25 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                                 height: 16
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                             sx: {
                                 width: '170px',
-                                overflow: 'hidden'
+                                overflow: 'hidden',
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                gap: 1
                             },
-                            variant: "subtitle2",
-                            color: theme.palette.typography.title,
-                            children: (0, _helpers.titleCase)(clicked)
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _helpers.titleCase)(clicked)
+                                }),
+                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                    option: option
+                                })
+                            ]
                         }),
-                        location === 'displayed' && getDeleteButton(option),
                         location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
                             width: 16,
                             height: 16,
@@ -469,16 +487,25 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                         cursor: 'pointer'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                             sx: {
                                 width: '210px',
-                                overflow: 'hidden'
+                                overflow: 'hidden',
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                gap: 1
                             },
-                            variant: "subtitle2",
-                            color: theme.palette.typography.title,
-                            children: (0, _helpers.titleCase)(clicked)
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _helpers.titleCase)(clicked)
+                                }),
+                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                    option: option
+                                })
+                            ]
                         }),
-                        location === 'displayed' && getDeleteButton(option),
                         location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
                             width: 16,
                             height: 16,
@@ -491,18 +518,44 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
         return rv;
     };
     const getMultipleDisplayedValues = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             direction: 'row',
             sx: {
                 maxWidth: 270,
                 minWidth: 270,
-                overflow: 'hidden',
-                flexWrap: 'wrap',
-                gap: 1
+                display: 'flex',
+                justifyContent: 'space-between'
             },
-            children: displayed.map((item)=>{
-                return getValueByModalType(item, 'displayed');
-            })
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: 'row',
+                    sx: {
+                        overflow: 'hidden',
+                        flexWrap: 'wrap',
+                        gap: 1
+                    },
+                    children: displayed.map((item)=>{
+                        return getValueByModalType(item, 'displayed');
+                    })
+                }),
+                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        minWidth: '20px',
+                        maxWidth: '20px',
+                        cursor: 'pointer'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            onRemoveAll && onRemoveAll();
+                            sessionStorage.removeItem(`dropdown-${query}`);
+                        },
+                        icon: `filters/remove_all_button.svg`,
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {

package/dist/FxAsyncDropdown/styles/dropdown.styles.js

@@ -136,7 +136,6 @@ const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=
             color: theme.palette.typography.title,
             height: 36,
             boxSizing: 'border-box',
-            padding: '4px 6px 4px 16px',
             width: 0,
             minWidth: 30,
             flexGrow: 1,

package/dist/FxFilterSortButton/FxFilterSortButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const FxFilterSortButton: ({ btnValue, onClick, startIcon, sx, }: {
+    btnValue: string;
+    onClick: any;
+    startIcon?: any;
+    sx?: any;
+}) => React.JSX.Element;

package/dist/FxFilterSortButton/FxFilterSortButton.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxFilterSortButton", {
+    enumerable: true,
+    get: function() {
+        return FxFilterSortButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const FxFilterSortButton = ({ btnValue, onClick, startIcon, sx })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+        id: "fade-button",
+        sx: _object_spread_props(_object_spread({}, sx), {
+            fontWeight: 'normal'
+        }),
+        "aria-haspopup": "true",
+        startIcon: startIcon,
+        onClick: onClick,
+        children: btnValue
+    });
+};

package/dist/FxFilterSortButton/index.d.ts

@@ -0,0 +1 @@
+export { FxFilterSortButton } from './FxFilterSortButton';

package/dist/FxFilterSortButton/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxFilterSortButton", {
+    enumerable: true,
+    get: function() {
+        return _FxFilterSortButton.FxFilterSortButton;
+    }
+});
+const _FxFilterSortButton = require("./FxFilterSortButton");

package/dist/FxModalWithButton/FxModalWithButton.js

@@ -73,7 +73,7 @@ const FxModalWithButton = ({ btnValue, modalData, onClick })=>{
                 "aria-haspopup": "true",
                 onClick: handleClick,
                 sx: {
-                    fontWeight: isOpen ? 'bold' : 'normal'
+                    fontWeight: 'normal'
                 },
                 children: btnValue
             }),

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { FxAggregationsBar, AggregationsDataPropsType, AggreationsBarPropsType }
 export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
 export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
 export { FxButton, ButtonPropsType } from './FxButton';
+export { FxFilterSortButton } from './FxFilterSortButton';
 export { FxChip, ChipPropsType } from './FxChip';
 export { FxIcon } from './FxIcon';
 export { FxModal, ModalPropsType } from './FxModal';

package/dist/index.js

@@ -63,6 +63,9 @@ _export(exports, {
     FxChip: function() {
         return _FxChip.FxChip;
     },
+    FxFilterSortButton: function() {
+        return _FxFilterSortButton.FxFilterSortButton;
+    },
     FxIcon: function() {
         return _FxIcon.FxIcon;
     },
@@ -192,6 +195,7 @@ const _FxAggregationsBar = require("./FxAggregationsBar");
 const _FxAsyncDropdown = require("./FxAsyncDropdown");
 const _FxAvatar = require("./FxAvatar");
 const _FxButton = require("./FxButton");
+const _FxFilterSortButton = require("./FxFilterSortButton");
 const _FxChip = require("./FxChip");
 const _FxIcon = require("./FxIcon");
 const _FxModal = require("./FxModal");

package/package.json

@@ -13,8 +13,8 @@
     "@react-spring/web": "^9.7.3",
     "graphql-tag": "^2.12.6",
     "next": "^13.5.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "swc-loader": "^0.2.3"
   },
   "devDependencies": {
@@ -70,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.1.91"
+  "version": "0.1.92"
 }