@symply.io/basic-components 1.0.0-beta.11 → 1.0.0-beta.13

package/AlertDialog/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AlertDialogProps } from "./types";
 declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
 export default AlertDialog;

package/Autocomplete/index.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 import { AutocompleteProps } from "./types";
-declare function CustomAutocomplete<T, multiple extends boolean | undefined>(props: AutocompleteProps<T, multiple>): JSX.Element;
+declare function CustomAutocomplete<T, multiple extends boolean | undefined = false>(props: AutocompleteProps<T, multiple>): JSX.Element;
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/index.js

@@ -30,9 +30,9 @@ function CustomAutocomplete(props) {
     var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     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 })); } }) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, val) {
+                onChange(val);
+            }, isOptionEqualToValue: function (opt, val) { return opt.label === val.label; }, value: value, 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,12 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-export declare type AutocompleteOptionType<T> = T & {
+export declare type AutocompleteOptionType<T = {
+    [name: string]: unknown;
+}> = T & {
     label: string;
 };
-export declare type AutocompleteValueType<T, multiple> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
-export interface AutocompleteProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
+export declare type AutocompleteValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>>;
+export interface AutocompleteProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
     multiple?: multiple;
     options: Array<AutocompleteOptionType<T>>;
     value: AutocompleteValueType<T, multiple>;

package/AutocompleteWithFilter/index.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 import { AutocompleteWithFilterProps } from "./types";
-declare function AutocompleteWithFilter<T, multiple extends boolean | undefined>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
+declare function AutocompleteWithFilter<T, multiple extends boolean | undefined = false>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
 export default AutocompleteWithFilter;
 export * from "./types";

package/AutocompleteWithFilter/index.js

@@ -39,9 +39,9 @@ function AutocompleteWithFilter(props) {
         stringify: function (option) { return option.label; }
     });
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
-                onChange(value);
-            }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, val) {
+                onChange(val);
+            }, value: value, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
                 return option.label || "";
             }, renderOption: function (props, option, _a) {
                 var selected = _a.selected;

package/AutocompleteWithFilter/types.d.ts

@@ -3,13 +3,13 @@ import { TextFieldProps } from "@mui/material/TextField";
 export declare type AutocompleteWithFilterOptionType<T> = T & {
     label: string;
 };
-export declare type AutocompleteWithFilterValueType<T, multiple> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
-export interface AutocompleteWithFilterProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
-    value: AutocompleteWithFilterValueType<T, multiple>;
+export declare type AutocompleteWithFilterlValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
+export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange"> {
+    value: AutocompleteWithFilterlValueType<T, multiple>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
     multiple?: multiple;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
+    onChange: (value: AutocompleteWithFilterlValueType<T, multiple>) => void;
 }

package/BasicModal/Content.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicModalContentProps } from "./types";
 declare function Content(props: BasicModalContentProps): JSX.Element;
 export default Content;

package/BasicModal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicModalProps } from "./types";
 declare function BasicModal(props: BasicModalProps): JSX.Element;
 export default BasicModal;

package/BasicTable/TableBodyRow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicTableBodyRowProps } from "./types";
 declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
 export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicTableFooterProps } from "./types";
 declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
 export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicTableHeaderProps } from "./types";
 declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
 export default BasicTableHeader;

package/BasicTable/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BasicTableProps } from "./types";
 declare function BasicTable(props: BasicTableProps): JSX.Element;
 export default BasicTable;

package/BreadCrumbs/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BreadCrumbsProps } from "./types";
 declare function Crumbs(props: BreadCrumbsProps): JSX.Element;
 export default Crumbs;

package/CheckBox/CheckBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckBoxProps } from "./types";
 export declare function CheckBox(props: CheckBoxProps): JSX.Element;
 export default CheckBox;

package/CheckBox/CheckBoxGroup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckBoxGroupProps } from "./types";
 export declare function CheckBoxGroup(props: CheckBoxGroupProps): JSX.Element;
 export default CheckBoxGroup;

package/CheckBox/types.d.ts

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

package/Copyright/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CopyrightProps } from "./types";
 declare function Copyright(props: CopyrightProps): JSX.Element;
 export default Copyright;

package/DateInput/FullDateInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateInputprops } from "./types";
 export declare function MonthDayYearFormat(str: string): string;
 export declare function onValidateDate(dateString: string): boolean;

package/DateInput/MonthDayInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateInputprops } from "./types";
 export declare function MonthDayFormat(str: string): string;
 export declare function onValidateMonthDay(monthDayString: string): boolean;

package/DateInput/MonthYearInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateInputprops } from "./types";
 export declare function MonthYearFormat(str: string): string;
 export declare function onValidateMonthYear(monthYearString: string): boolean;

package/DigitInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DigitInputProps } from "./types";
 declare function DigitInput(props: DigitInputProps): JSX.Element;
 export default DigitInput;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeaderButtonProps } from "./types";
 export interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;

package/FeinInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FeinInputProps } from "./types";
 export declare function FeinInputFormat(str: string): string;
 export declare function onValidateFein(feinString: string): boolean;

package/FormRadioGroup/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormRadioGroupProps } from "./types";
 declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
 export default FormRadioGroup;

package/FormRadioGroup/index.js

@@ -26,7 +26,7 @@ function FormRadioGroup(props) {
                         onChange(event.target.value);
                     }, sx: {
                         my: 1,
-                        "& label span:first-child span:first-child": {
+                        "& label span:first-of-type span:first-of-type": {
                             margin: "-5px 0 -5px 0"
                         }
                     } }, { children: options.map(function (opt) {

package/FormSelector/MultipleSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultipleSelectorProps } from "./types";
 declare function MultipleSelector(props: MultipleSelectorProps): JSX.Element;
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SimpleSelectorProps } from "./types";
 declare function SimpleSelector(props: SimpleSelectorProps): JSX.Element;
 export default SimpleSelector;

package/LoadingModal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LoadingModalProps } from "./types";
 declare function LoadingModal(props: LoadingModalProps): JSX.Element;
 export default LoadingModal;

package/MenuButtonGroup/MenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuItemProps } from "@mui/material/MenuItem";
 import { ListItemIconProps } from "@mui/material/ListItemIcon";
 export interface ButtonItemProps {

package/README.md

@@ -298,10 +298,10 @@ import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox';
 
 <h5>Props</h5>
 
-| Name     | Type                | Default | Required | Description                                                  |
-| -------- | ------------------- | ------- | -------- | ------------------------------------------------------------ |
-| label    | string \| ReactNode |         | 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. |
+| Name     | Type                   | Default | Required | Description                                                  |
+| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| label    | string \| ReactElement |         | 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. |
 
 
 

package/Sidebar/SidebarItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SidebarItemProps } from "./types";
 declare function SidebarItem(props: SidebarItemProps): JSX.Element;
 export default SidebarItem;

package/Sidebar/SidebarLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SidebarLinkProps } from "./types";
 declare function SidebarLink(props: SidebarLinkProps): JSX.Element;
 export default SidebarLink;

package/Sidebar/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import SidebarItem from "./SidebarItem";
 import SidebarItemsGroup from "./SidebarItemsGroup";
 import { SidebarProps } from "./types";

package/SocialInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SocialInputProps } from "./types";
 export declare function SocialInputFormat(str: string): string;
 export declare function onValidateSocial(socialString: string): boolean;

package/TablePagination/Actions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TablePaginationActionsProps } from "./types";
 declare function TablePaginationActions(props: TablePaginationActionsProps): JSX.Element;
 export default TablePaginationActions;

package/TablePagination/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TablePaginationProps } from "./types";
 declare function Pagination(props: TablePaginationProps): JSX.Element;
 export default Pagination;

package/VideoPlayerModal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VideoPlayerModalProps } from "./types";
 declare function VideoPlayerModal(props: VideoPlayerModalProps): JSX.Element;
 export default VideoPlayerModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -45,19 +45,21 @@
   "devDependencies": {
     "@types/body-parser": "^1.19.2",
     "@types/reach__router": "^1.3.10",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "17.0.27",
+    "@types/react-dom": "17.0.9",
     "babel-loader": "^8.2.2",
     "typescript": "~4.6.3"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.2",
-    "@mui/system": "^5.4.2",
+    "@mui/icons-material": "~5.4.2",
+    "@mui/material": "~5.4.2",
+    "@mui/system": "~5.4.2",
     "@reach/router": "^1.3.4",
     "color-alpha": "^1.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-player": "^2.9.0",
     "rifm": "^0.12.1"
   },