@symply.io/basic-components 1.6.6-alpha.1 → 1.6.6-beta.1

package/FormSelector/MultipleSelector.d.ts

@@ -1,3 +1,3 @@
 import { MultipleSelectorProps } from "./types";
-declare function MultipleSelector(props: MultipleSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function MultipleSelector<T extends string | number>(props: MultipleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
 export default MultipleSelector;

package/FormSelector/MultipleSelector.js

@@ -55,8 +55,8 @@ function MultipleSelector(props) {
                                     .join("; ");
                             }
                             : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
-                            var _a = option, label = _a.label, v = _a.value;
-                            return (_jsxs(MenuItem, __assign({ value: v }, { children: [showCheckmarks ? (_jsx(Checkbox, { checked: !!options.find(function (opt) { return opt.value === v; }) })) : (_jsx(_Fragment, {})), _jsx(ListItemText, { primary: label })] }), v));
+                            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));
                         })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,3 +1,3 @@
 import { SimpleSelectorProps } from "./types";
-declare function SimpleSelector(props: SimpleSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function SimpleSelector<T extends string | number>(props: SimpleSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
 import { FormControlProps } from "@mui/material/FormControl";
-interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
+interface SelectorBaseProps<T extends string | number> extends Omit<FormControlProps, "onChange"> {
     label?: string;
     name?: string;
     tooltip?: ReactNode;
@@ -12,17 +12,17 @@ interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
     secondaryColor?: CSSProperties["color"];
     options: Array<{
         label: string;
-        value: string | number;
+        value: T;
         disabled?: boolean;
     }>;
 }
-export interface SimpleSelectorProps extends SelectorBaseProps {
-    value: number | string;
-    onChange: (value?: string | number) => void;
+export interface SimpleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
+    value: T;
+    onChange: (value?: string | T) => void;
 }
-export interface MultipleSelectorProps extends SelectorBaseProps {
-    value: Array<number> | Array<string>;
+export interface MultipleSelectorProps<T extends string | number> extends SelectorBaseProps<T> {
+    value: Array<T>;
     showCheckmarks?: boolean;
-    onChange: (value?: string | Array<number> | Array<string>) => void;
+    onChange: (value?: string | Array<T>) => void;
 }
 export {};

package/README.md

@@ -573,11 +573,11 @@ 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    | string \| number \| bool |         | true     | The value of the option.                 |
+| 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.                 |
 
 <h5>Base Props</h5>
 
@@ -594,18 +594,18 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
 
 <h5>Simple Selector Props</h5> Extended from the Base Props
 
-| Name     | Type             | Default | Required | Description                                                  |
-| -------- | ---------------- | ------- | -------- | ------------------------------------------------------------ |
-| onChange | func             |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: string | number) => void`<br/>*value:* The value of the `Select` element. |
-| value    | number \| string |         | true     | The value of the `Select` element.                           |
+| Name     | Type                       | Default | Required | Description                                                  |
+| -------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func                       |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: string | number) => void`<br/>*value:* The value of the `Select` element. |
+| value    | T extends number \| string |         | true     | The value of the `Select` element.                           |
 
 <h5>Multiple Selector Props</h5> Extended from the Base Props
 
-| Name           | Type                               | Default | Required | Description                                                  |
-| -------------- | ---------------------------------- | ------- | -------- | ------------------------------------------------------------ |
-| onChange       | func                               |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: Array<number> | Array<string>) => void`<br/>*value:* The value of the `Select` element. |
-| showCheckmarks | bool                               | false   | false    | If `true` the option will be shown with a checkbox.          |
-| value          | Array\<number\> \| Array\<string\> |         | false    | The value of the `Select` element.                           |
+| Name           | Type                                | Default | Required | Description                                                  |
+| -------------- | ----------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| onChange       | func                                |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: Array<number> | Array<string>) => void`<br/>*value:* The value of the `Select` element. |
+| showCheckmarks | bool                                | false   | false    | If `true` the option will be shown with a checkbox.          |
+| value          | Array\<T extends number \| string\> |         |          | The value of the `Select` element.                           |
 
 
 

package/package.json

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