@symply.io/basic-components 1.0.0-alpha.16 → 1.0.0-alpha.17

package/Autocomplete/index.d.ts

@@ -1,6 +1,4 @@
-import { TextFieldProps } from "@mui/material/TextField";
 import { CustomAutocompleteProps } from "./types";
-declare type textFieldProps = Omit<TextFieldProps, "onChange">;
-declare function CustomAutocomplete(props: CustomAutocompleteProps & textFieldProps): JSX.Element;
+declare function CustomAutocomplete(props: CustomAutocompleteProps): JSX.Element;
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/index.js

@@ -32,7 +32,7 @@ function CustomAutocomplete(props) {
     var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
                 onChange(value);
-            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { size: size }))); } }) })));
+            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
 }
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/types.d.ts

@@ -1,10 +1,11 @@
 import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
 export interface IAutocompleteOption {
     label: string;
     [name: string]: unknown;
 }
 export declare type AutocompleteOptionType = IAutocompleteOption | string;
-export interface CustomAutocompleteProps {
+export interface CustomAutocompleteProps extends Omit<TextFieldProps, "onChange"> {
     multiple?: boolean;
     options: Array<AutocompleteOptionType>;
     value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;

package/AutocompleteWithFilter/index.d.ts

@@ -1,6 +1,4 @@
-import { TextFieldProps } from "@mui/material/TextField";
 import { AutoCompleteWithFilterProps } from "./types";
-declare type textFieldProps = Omit<TextFieldProps, "onChange">;
-declare function AutocompleteWithFilter(props: AutoCompleteWithFilterProps & textFieldProps): JSX.Element;
+declare function AutocompleteWithFilter(props: AutoCompleteWithFilterProps): JSX.Element;
 export default AutocompleteWithFilter;
 export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -1,10 +1,11 @@
 import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
 export interface IAutoCompleteWithFilterOption {
     label: string;
     [name: string]: unknown;
 }
 export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
-export interface AutoCompleteWithFilterProps {
+export interface AutoCompleteWithFilterProps extends Omit<TextFieldProps, "onChange"> {
     multiple?: boolean;
     value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
     options: Array<AutoCompleteWithFilterOptionType>;

package/CheckBox/CheckBox.d.ts

@@ -0,0 +1,3 @@
+import { CheckBoxProps } from "./types";
+export declare function CheckBox(props: CheckBoxProps): JSX.Element;
+export default CheckBox;

package/CheckBox/CheckBox.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+export function CheckBox(props) {
+    var label = props.label, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["label", "onChange", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, __assign({ onChange: function (event) {
+                    event.stopPropagation();
+                    onChange(event.target.checked);
+                } }, rest)), label: label }) })));
+}
+export default CheckBox;

package/CheckBox/CheckBoxGroup.d.ts

@@ -0,0 +1,3 @@
+import { CheckBoxGroupProps } from "./types";
+export declare function CheckBoxGroup(props: CheckBoxGroupProps): JSX.Element;
+export default CheckBoxGroup;

package/CheckBox/CheckBoxGroup.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import FormGroup from "@mui/material/FormGroup";
+import CheckBox from "./CheckBox";
+export function CheckBoxGroup(props) {
+    var checkboxes = props.checkboxes, rest = __rest(props, ["checkboxes"]);
+    return (_jsx(FormGroup, __assign({}, rest, { children: checkboxes.map(function (checkbox, index) { return (_jsx(CheckBox, __assign({}, checkbox), index)); }) })));
+}
+export default CheckBoxGroup;

package/CheckBox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/index.js

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+import { CheckboxProps } from "@mui/material/Checkbox";
+import { FormGroupProps } from "@mui/material/FormGroup";
+export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
+    label: string;
+    onChange: (val: boolean) => void;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
+export interface CheckBoxGroupProps extends FormGroupProps {
+    checkboxes: Array<CheckBoxProps>;
+}

package/CheckBox/types.js

@@ -0,0 +1 @@
+export {};

package/DigitInput/index.d.ts

@@ -1,6 +1,4 @@
-import { TextFieldProps } from "@mui/material/TextField";
 import { DigitInputProps } from "./types";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-declare function DigitInput(props: DigitInputProps & TextProps): JSX.Element;
+declare function DigitInput(props: DigitInputProps): JSX.Element;
 export default DigitInput;
 export * from "./types";

package/DigitInput/types.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
-export interface DigitInputProps {
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     tooltip?: string;

package/FormSelector/MultipleSelector.d.ts

@@ -1,4 +1,3 @@
-import { FormControlProps } from "@mui/material/FormControl";
 import { MultipleSelectorProps } from "./types";
-declare function MultipleSelector(props: MultipleSelectorProps & FormControlProps): JSX.Element;
+declare function MultipleSelector(props: MultipleSelectorProps): JSX.Element;
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,4 +1,3 @@
-import { FormControlProps } from "@mui/material/FormControl";
 import { SimpleSelectorProps } from "./types";
-declare function SimpleSelector(props: SimpleSelectorProps & FormControlProps): JSX.Element;
+declare function SimpleSelector(props: SimpleSelectorProps): JSX.Element;
 export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
-interface SelectorBaseProps {
+import { FormControlProps } from "@mui/material/FormControl";
+interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
     label?: string;
     tooltip?: ReactNode;
     showHelperText?: boolean;

package/NumberInput/index.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     integerOnly?: boolean;
@@ -11,5 +10,5 @@ export interface NumberInputProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
+declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,12 +1,11 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface ConfirmPasswordProps {
+export interface ConfirmPasswordProps extends Omit<TextFieldProps, "onChange"> {
     password: string;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
 }
-declare function ConfirmPassword(props: ConfirmPasswordProps & TextInputProps): JSX.Element;
+declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
 export default ConfirmPassword;

package/PasswordInput/Password.d.ts

@@ -1,13 +1,12 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
         regex: RegExp;
     };
 }
-export interface PasswordProps {
+export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
     strategies: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
@@ -16,5 +15,5 @@ export interface PasswordProps {
     onChange: (value: string) => void;
     onVerify?: (value: string) => boolean;
 }
-declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+declare function Password(props: PasswordProps): JSX.Element;
 export default Password;

package/PhoneNumberInput/index.d.ts

@@ -1,8 +1,7 @@
 import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface PhoneInputProps {
+export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     value: string;
     endAdornment?: InputProps["endAdornment"];
     primaryColor?: CSSProperties["color"];
@@ -10,5 +9,5 @@ export interface PhoneInputProps {
     onChange: (val: string) => void;
 }
 export declare function phoneFormat(str: string): string;
-declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
+declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/README.md

@@ -16,6 +16,8 @@
   - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
   - [BreadCrumbs](#breadcrumbs)
+  - [CheckBox](#checkbox)
+  - [CheckBoxGroup](#checkboxgroup)
   - [Copyright](#copyright)
   - [DigitInput](#digitinput)
   - [FormRadioGroup](#formradiogroup)
@@ -27,6 +29,7 @@
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
   - [TabGroup](#tabgroup)
+  - [TablePagination](#tablepagination)
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
@@ -211,6 +214,53 @@ import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';
 
 
 
+<h3>CheckBox</h3>
+
+Checkboxes allow the user to select one or more items from a set.
+
+It is extended from `@mui/material/Checkbox`, so it includes all properties of `@mui/material/Checkbox`.
+
+<h5>Import</h5>
+
+```typescript
+import { CheckBox } from '@symply.io/basic-components/';
+// or 
+import { CheckBox } from '@symply.io/basic-components/CheckBox'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type   | Default | Required | Description                                                  |
+| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| label    | string |         | true     | The label of the checkbox.                                   |
+| onChange | func   |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
+
+
+
+
+
+<h3>CheckBoxGroup</h3>
+
+Checkboxes allow the user to select one or more items from a set for a group.
+
+It is extended from `@mui/material/FormGroup`, so it includes all properties of `@mui/material/FormGroup`.
+
+<h5>Import</h5>
+
+```typescript
+import { CheckBoxGroup } from '@symply.io/basic-components/';
+// or 
+import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                   | Default | Required | Description                                                  |
+| ---------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| Checkboxes | Array\<CheckBoxProps\> |         | true     | The array of checkboxes.<br />See the property of [CheckBox](#checkbox) |
+
+
+
 <h3>Copyright</h3>
 
 A common component for rendering the copyright
@@ -279,7 +329,7 @@ import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
 | color     | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' | 'primary' | false    | The main color of the component.                             |
 | disabled  | bool                                                         | false     | false    | If `true`, the component is disabled.                        |
 | formLabel | string                                                       |           | false    | The label of the `Radio` element.                            |
-| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Radio` element. |
+| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string|number|boolean) => void`<br/>*value:* The value of the `Radio` element. |
 | options   | Array\<IRadioOption\>                                        |           | true     | The radio options. See the **Radio Option Props** above.     |
 | value     | string \| number \| bool                                     |           | true     | The value of the `Radio` element.                            |
 | tooltip   | string                                                       |           | false    | A tooltip for the `Radio` element.                           |

package/TextInput/index.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-export interface TextInputProps {
+export interface TextInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     tooltip?: TextFieldProps;
@@ -10,5 +9,5 @@ export interface TextInputProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare const TextInput: (props: TextInputProps & TextProps) => JSX.Element;
+declare const TextInput: (props: TextInputProps) => JSX.Element;
 export default TextInput;

package/VideoPlayerModal/index.d.ts

@@ -1,5 +1,4 @@
-import { ReactPlayerProps } from "react-player";
 import { VideoPlayerModalProps } from "./types";
-declare function VideoPlayerModal(props: VideoPlayerModalProps & ReactPlayerProps): JSX.Element;
+declare function VideoPlayerModal(props: VideoPlayerModalProps): JSX.Element;
 export default VideoPlayerModal;
 export * from "./types";

package/VideoPlayerModal/types.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
-export interface VideoPlayerModalProps {
+import { ReactPlayerProps } from "react-player";
+export interface VideoPlayerModalProps extends ReactPlayerProps {
     title?: string;
     open: boolean;
     pip?: boolean;

package/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
+export * from "./CheckBox";
 export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";

package/index.js

@@ -3,6 +3,7 @@ export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
+export * from "./CheckBox";
 export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";

package/package.json

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