@symply.io/basic-components 1.7.0 → 1.7.1-alpha.1

package/FormSelector/MultipleSelector.js

@@ -21,13 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Grid from "@mui/material/Grid";
 import Select from "@mui/material/Select";
 import Tooltip from "@mui/material/Tooltip";
 import Checkbox from "@mui/material/Checkbox";
 import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
-import ListItemText from "@mui/material/ListItemText";
 import FormHelperText from "@mui/material/FormHelperText";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
@@ -55,8 +56,11 @@ function MultipleSelector(props) {
                                     .join("; ");
                             }
                             : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
-                            var label = option.label, v = option.value;
-                            return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})), _jsx(ListItemText, { primary: label })] }), v));
+                            var label = option.label, v = option.value, endIcon = option.endIcon, onEndIconClick = option.onEndIconClick;
+                            return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!value.includes(v) })) : (_jsx(_Fragment, {})), _jsxs(Grid, __assign({ container: true, justifyContent: "space-between", direction: "row", columnSpacing: 0.5, alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true }, { children: label })), endIcon ? (_jsx(Grid, __assign({ item: true }, { children: onEndIconClick ? (_jsx(IconButton, __assign({ size: "small", onClick: function (ev) {
+                                                        ev.stopPropagation();
+                                                        onEndIconClick(ev);
+                                                    } }, { children: endIcon }))) : (endIcon) }))) : (_jsx(_Fragment, {}))] }))] }), v));
                         })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.js

@@ -20,10 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Grid from "@mui/material/Grid";
 import Select from "@mui/material/Select";
 import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
@@ -42,8 +44,11 @@ function SimpleSelector(props) {
                             onFocus: onOpenTooltip,
                             onBlur: onCloseTooltip,
                         }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
-                            var label = option.label, v = option.value, disabled = option.disabled;
-                            return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: label }), v));
+                            var label = option.label, v = option.value, disabled = option.disabled, endIcon = option.endIcon, onEndIconClick = option.onEndIconClick;
+                            return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: _jsxs(Grid, __assign({ container: true, justifyContent: "space-between", direction: "row", columnSpacing: 0.5, alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true }, { children: label })), endIcon ? (_jsx(Grid, __assign({ item: true }, { children: onEndIconClick ? (_jsx(IconButton, __assign({ size: "small", onClick: function (ev) {
+                                                    ev.stopPropagation();
+                                                    onEndIconClick(ev);
+                                                } }, { children: endIcon }))) : (endIcon) }))) : (_jsx(_Fragment, {}))] })) }), v));
                         })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
+import { IconButtonProps } from "@mui/material/IconButton";
 import { FormControlProps } from "@mui/material/FormControl";
 interface SelectorBaseProps<T extends string | number> extends Omit<FormControlProps, "onChange"> {
     label?: string;
@@ -14,6 +15,8 @@ interface SelectorBaseProps<T extends string | number> extends Omit<FormControlP
         label: string;
         value: T;
         disabled?: boolean;
+        endIcon?: IconButtonProps["children"];
+        onEndIconClick?: IconButtonProps["onClick"];
     }>;
 }
 export interface SimpleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {

package/README.md

@@ -42,6 +42,7 @@
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
+  - [VirtualDataTable](#virtualdatatable)
 - [Changelog](#changelog)
 
 
@@ -576,11 +577,13 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
 
 <h5>Selector Option Props</h5>
 
-| Name     | Type                       | Default | Required | Description                              |
-| -------- | -------------------------- | ------- | -------- | ---------------------------------------- |
-| disabled | bool                       | false   | false    | If `true`, the opiton would be disabled. |
-| label    | string                     |         | true     | The label of the option.                 |
-| value    | T extends number \| string |         |          | The value of the option.                 |
+| Name           | Type                       | Default | Required | Description                                 |
+| -------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
+| disabled       | bool                       | false   | false    | If `true`, the opiton would be disabled.    |
+| endIcon        | ReactNode                  |         | false    | The customized icon.                        |
+| label          | string                     |         | true     | The label of the option.                    |
+| value          | T extends number \| string |         |          | The value of the option.                    |
+| onEndIconClick | func                       |         | false    | Callback fired when the end icon is clicked |
 
 <h5>Base Props</h5>
 
@@ -975,7 +978,7 @@ Reusable data table component with virtualizer
 <h5>Import</h5>
 
 ```tsx
-import { VirtualDataTablev } from '@symply.io/basic-components';
+import { VirtualDataTable } from '@symply.io/basic-components';
 // or 
 import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable'; 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0",
+  "version": "1.7.1-alpha.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",