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

package/PasswordInput/ConfirmPassword.js

@@ -36,6 +36,6 @@ function ConfirmPassword(props) {
     }, [value, password]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.js

@@ -67,10 +67,10 @@ function Password(props) {
         return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
                 var label = strategies[key].label;
                 return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
-            }) }, void 0));
+            }) }));
     }, [helperTextColor, strategies]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default Password;

package/PhoneNumberInput/index.js

@@ -55,8 +55,8 @@ function PhoneInput(props) {
         format: phoneFormat
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
-                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" })) }))),
                 endAdornment: endAdornment
-            }, onChange: rifm.onChange }, rest), void 0) }), void 0));
+            }, onChange: rifm.onChange }, rest)) })));
 }
 export default PhoneInput;

package/README.md

@@ -12,7 +12,11 @@
 - [License](#license)
 - [Components](#components)
   - [AlertDialog](#alertdialog)
+  - [Autocomplete](#autocomplete)
+  - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BreadCrumbs](#breadcrumbs)
+  - [Copyright](#copyright)
   - [DigitInput](#digitinput)
   - [FormRadioGroup](#formradiogroup)
   - [FormSelector](#formselector)
@@ -50,6 +54,17 @@ This project is licensed under the terms of the [MIT license](https://github.com
 
 
 
+<h2>Common Properties</h2>
+
+All components include these 2 properties to customize the theme
+
+| Name           | Type                   | Default | Required | Description                   |
+| -------------- | ---------------------- | ------- | -------- | ----------------------------- |
+| primaryColor   | CSSProperties["color"] |         | false    | Primary color for the theme   |
+| secondaryColor | CSSProperties["color"] |         | false    | Secondary color for the theme |
+
+
+
 <h2>Components</h2>
 
 <h3>AlertDialog</h3>
@@ -77,6 +92,71 @@ import AlertDialog from '@symply.io/basic-components/AlertDialog';
 
 
 
+<h3>Autocomplete</h3>
+
+A normal text input enhanced by a panel of suggested options.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { Autocomplete } from '@symply.io/basic-components/';
+// or 
+import Autocomplete from '@symply.io/basic-components/Autocomplete'; 
+```
+
+<h5>Option Props (IOption)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name     | Type                   | Default | Required | Description                                                  |
+| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| multiple | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options  | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value    | string                 |         | true     | The value of the `Input` element.                            |
+
+
+
+<h3>AutocompleteWithFilter</h3>
+
+A normal text input enhanced by a panel of suggested options and filter.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { AutocompleteWithFilter } from '@symply.io/basic-components/';
+// or 
+import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter'; 
+```
+
+<h5>Option Props (IOption)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name                 | Type                   | Default | Required | Description                                                  |
+| -------------------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| disableCloseOnSelect | bool                   | false   | false    | If `true`, the popup won't close when a value is selected.   |
+| multiple             | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange             | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options              | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value                | string                 |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>BasicModal</h3>
 
 Reusable modal component.
@@ -111,6 +191,40 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BreadCrumbs</h3>
+
+A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
+
+<h5>Import</h5>
+
+```typescript
+import { BreadCrumbs } from '@symply.io/basic-components/';
+// or 
+import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs'; 
+```
+
+<h5>Props</h5>
+
+| Name   | Type                                    | Default | Required | Description               |
+| ------ | --------------------------------------- | ------- | -------- | ------------------------- |
+| routes | Array<{ href?: string; label: string }> |         | true     | All routes of "ancestors" |
+
+
+
+<h3>Copyright</h3>
+
+A common component for rendering the copyright
+
+<h5>Import</h5>
+
+```typescript
+import { Copyright } from '@symply.io/basic-components/';
+// or 
+import Copyright from '@symply.io/basic-components/Copyright'; 
+```
+
+
+
 <h3>DigitInput</h3>
 
 Input component for digits. 
@@ -415,6 +529,32 @@ import TabGroup from '@symply.io/basic-components/TabGroup';
 
 
 
+<h3>TablePagination</h3>
+
+Reusable pagination component for the material table
+
+<h5>Import</h5>
+
+```typescript
+import { TablePagination } from '@symply.io/basic-components/';
+// or 
+import TablePagination from '@symply.io/basic-components/TablePagination'; 
+```
+
+<h5>Props</h5>
+
+| Name                | Type            | Default | Required | Description                                                  |
+| ------------------- | --------------- | ------- | -------- | ------------------------------------------------------------ |
+| colSpan             | number          |         | true     | The number of columns a cell should span.                    |
+| count               | number          |         | true     | The total count of all data.                                 |
+| onPageChange        | func            |         | true     | Callback fired when the `page` value is changed.<br />**Signature:**<br/>`function(event: MouseEvent<HTMLButtonElement> ) => void,value: number`<br/>*value:* The value of the `page` . |
+| onRowsPerPageChange | func            |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(event: ChangeEvent<HTMLInputElement ` |
+| page                | number          |         | true     | The current page index.                                      |
+| rowsPerPage         | number          |         | true     | How many rows per page.                                      |
+| rowsPerPageOptions  | Array\<number\> |         | true     | The options for setting how many rows per page.              |
+
+
+
 <h3>TextInput</h3>
 
 Regular Input component. 

package/TabGroup/index.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, forwardRef, useImperativeHandle } from "react";
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
@@ -18,30 +18,35 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 var TabGroup = forwardRef(function (props, ref) {
-    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, _c = props.currentTabIndex, outerTabIndex = _c === void 0 ? 0 : _c;
+    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, outerTabIndex = props.currentTabIndex;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
-    var _d = useState(outerTabIndex), currentTabIndex = _d[0], setCurrentTabIndex = _d[1];
+    var _c = useState(outerTabIndex || 0), currentTabIndex = _c[0], setCurrentTabIndex = _c[1];
     var onClick = function (index) {
         setCurrentTabIndex(index);
     };
     useImperativeHandle(ref, function () { return ({
         tabIndex: currentTabIndex
     }); });
+    useEffect(function () {
+        if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
+            setCurrentTabIndex(outerTabIndex);
+        }
+    }, [outerTabIndex, currentTabIndex]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
                 onClick(val);
                 onTabChange(val);
             } }, { children: tabs.map(function (tab, index) {
                 var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
                 var active = currentTabIndex === index;
-                return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ variant: "body2" }, { children: text }), void 0), disabled: disabled, sx: {
+                return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ variant: "body2" }, { children: text })), disabled: disabled, sx: {
                         cursor: disabled ? "not-allowed" : "pointer",
                         margin: theme.spacing(0.75, 0.25),
                         background: active ? "#fff" : undefined,
                         borderRadius: active ? theme.spacing(0.5) : undefined,
                         boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
                     } }, index));
-            }) }), void 0) }), void 0));
+            }) })) })));
 });
 export default TabGroup;
 export * from "./types";

package/TablePagination/Actions.d.ts

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

package/TablePagination/Actions.js

@@ -0,0 +1,27 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function TablePaginationActions(props) {
+    var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
+    var theme = useCustomTheme();
+    var _a = useInteractions({ count: count, page: page, rowsPerPage: rowsPerPage, onPageChange: onPageChange }), onBackButtonClick = _a.onBackButtonClick, onNextButtonClick = _a.onNextButtonClick, onLastPageButtonClick = _a.onLastPageButtonClick, onFirstPageButtonClick = _a.onFirstPageButtonClick;
+    return (_jsxs(Box, __assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [_jsx(IconButton, __assign({ onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) })), _jsx(IconButton, __assign({ onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) })), _jsx(IconButton, __assign({ onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) })), _jsx(IconButton, __assign({ onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) }))] })));
+}
+export default TablePaginationActions;

package/TablePagination/index.d.ts

@@ -0,0 +1,4 @@
+import { TablePaginationProps } from "./types";
+declare function Pagination(props: TablePaginationProps): JSX.Element;
+export default Pagination;
+export * from "./types";

package/TablePagination/index.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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableRow from "@mui/material/TableRow";
+import TableFooter from "@mui/material/TableFooter";
+import TablePagination from "@mui/material/TablePagination";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import TablePaginationActions from "./Actions";
+import useCustomTheme from "../useCustomTheme";
+function Pagination(props) {
+    var colSpan = props.colSpan, count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, _a = props.rowsPerPageOptions, rowsPerPageOptions = _a === void 0 ? [5, 10, 20, 30] : _a, onPageChange = props.onPageChange, onRowsPerPageChange = props.onRowsPerPageChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count && (_jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TablePagination, { colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: {
+                        inputProps: {
+                            "aria-label": "rows per page",
+                        },
+                        native: true,
+                    }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions }) }) })) })));
+}
+export default Pagination;
+export * from "./types";

package/TablePagination/types.d.ts

@@ -0,0 +1,14 @@
+import { MouseEvent, ChangeEvent, CSSProperties } from "react";
+export interface TablePaginationActionsProps {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    onPageChange: (event: MouseEvent<HTMLButtonElement> | null, newPage: number) => void;
+}
+export interface TablePaginationProps extends TablePaginationActionsProps {
+    colSpan: number;
+    rowsPerPageOptions?: Array<number>;
+    onRowsPerPageChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/TablePagination/types.js

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

package/TablePagination/useInteractions.d.ts

@@ -0,0 +1,14 @@
+import { MouseEvent } from "react";
+interface InteractionProps {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    onPageChange: (event: MouseEvent<HTMLButtonElement> | null, newPage: number) => void;
+}
+declare function useInteractions(props: InteractionProps): {
+    onBackButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onNextButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onLastPageButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onFirstPageButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+export default useInteractions;

package/TablePagination/useInteractions.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+function useInteractions(props) {
+    var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
+    var onFirstPageButtonClick = useCallback(function (event) {
+        onPageChange(event, 0);
+    }, [onPageChange]);
+    var onBackButtonClick = useCallback(function (event) {
+        onPageChange(event, page - 1);
+    }, [onPageChange, page]);
+    var onNextButtonClick = useCallback(function (event) {
+        onPageChange(event, page + 1);
+    }, [onPageChange, page]);
+    var onLastPageButtonClick = useCallback(function (event) {
+        onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    }, [count, onPageChange, rowsPerPage]);
+    return {
+        onBackButtonClick: onBackButtonClick,
+        onNextButtonClick: onNextButtonClick,
+        onLastPageButtonClick: onLastPageButtonClick,
+        onFirstPageButtonClick: onFirstPageButtonClick,
+    };
+}
+export default useInteractions;

package/TextInput/index.js

@@ -27,12 +27,22 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 var TextInput = function (props) {
-    var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor"]);
+    var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onFocus: function (event) {
+                    onOpenTooltip();
+                    if (onFocus) {
+                        onFocus(event);
+                    }
+                }, onBlur: function (event) {
+                    onCloseTooltip();
+                    if (onBlur) {
+                        onBlur(event);
+                    }
+                }, onChange: function (event) {
                     event.preventDefault();
                     onChange(event.target.value);
-                }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest), void 0) }), void 0) }), void 0));
+                }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest)) })) })));
 };
 export default TextInput;

package/ToastPrompt/Presentation.js

@@ -34,7 +34,7 @@ import { green, amber, red, blue } from "@mui/material/colors";
 import useCustomTheme from "../useCustomTheme";
 var ToastPrompt = function (props) {
     var _a;
-    var _b = props.open, open = _b === void 0 ? false : _b, _c = props.vertical, vertical = _c === void 0 ? "top" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "center" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "down" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}, void 0) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
+    var _b = props.open, open = _b === void 0 ? false : _b, _c = props.vertical, vertical = _c === void 0 ? "top" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "center" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "down" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
     var theme = useCustomTheme();
     var styles = {
         success: {
@@ -51,7 +51,7 @@ var ToastPrompt = function (props) {
         }
     };
     var Transition = function (args) {
-        return _jsx(Slide, __assign({}, args, { direction: transitionDirection }), void 0);
+        return _jsx(Slide, __assign({}, args, { direction: transitionDirection }));
     };
     var VariantIcon = {
         success: SuccessIcon,
@@ -76,6 +76,6 @@ var ToastPrompt = function (props) {
                                 fontSize: 20,
                                 opacity: 0.9,
                                 marginRight: theme.spacing(1)
-                            } }, void 0)) : (_jsx(_Fragment, { children: icon }, void 0)), message] }), void 0) }, other), void 0) }), "".concat(Date.now() * Math.round(Math.random()))) }), void 0));
+                            } })) : (_jsx(_Fragment, { children: icon })), message] })) }, other)) }), "".concat(Date.now() * Math.round(Math.random()))) })));
 };
 export default ToastPrompt;

package/ToastPrompt/index.js

@@ -22,7 +22,7 @@ export var PromptProvider = function (props) {
         var _a = ((toastRef === null || toastRef === void 0 ? void 0 : toastRef.current) || {}).show, show = _a === void 0 ? function () { } : _a;
         show(type, message, timeout);
     }
-    return (_jsx(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: _jsxs(_Fragment, { children: [children, _jsx(Logics, __assign({ ref: toastRef }, { children: _jsx(ToastPrompt, {}, void 0) }), void 0)] }, void 0) }), void 0));
+    return (_jsx(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: _jsxs(_Fragment, { children: [children, _jsx(Logics, __assign({ ref: toastRef }, { children: _jsx(ToastPrompt, {}) }))] }) })));
 };
 export function usePrompt() {
     return useContext(PromptContext);

package/VideoPlayerModal/index.d.ts

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

package/VideoPlayerModal/index.js

@@ -35,9 +35,9 @@ function VideoPlayerModal(props) {
     var url = props.url, _a = props.pip, pip = _a === void 0 ? false : _a, _b = props.open, open = _b === void 0 ? false : _b, title = props.title, onClose = props.onClose, _c = props.extraButtons, extraButtons = _c === void 0 ? [] : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme();
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }, void 0), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
                             file: { attributes: { disablePictureInPicture: !pip } }
-                        } }, playerProps), void 0) }, void 0), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps), void 0) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }), void 0) }), void 0));
+                        } }, playerProps)) }), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps)) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }))] })] })) })));
 }
 export default VideoPlayerModal;
 export * from "./types";

package/index.d.ts

@@ -1,5 +1,9 @@
 export * from "./AlertDialog";
+export * from "./Autocomplete";
+export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BreadCrumbs";
+export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FormRadioGroup";
@@ -11,11 +15,16 @@ export * from "./NumberInput";
 export * from "./PasswordInput";
 export * from "./PhoneNumberInput";
 export * from "./TabGroup";
+export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
 export { default as AlertDialog } from "./AlertDialog";
+export { default as Autocomplete } from "./Autocomplete";
+export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
+export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FormRadioGroup } from "./FormRadioGroup";
@@ -25,5 +34,6 @@ export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as TabGroup } from "./TabGroup";
+export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";

package/index.js

@@ -1,5 +1,9 @@
 export * from "./AlertDialog";
+export * from "./Autocomplete";
+export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BreadCrumbs";
+export * from "./Copyright";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FormRadioGroup";
@@ -11,11 +15,16 @@ export * from "./NumberInput";
 export * from "./PasswordInput";
 export * from "./PhoneNumberInput";
 export * from "./TabGroup";
+export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
 export { default as AlertDialog } from "./AlertDialog";
+export { default as Autocomplete } from "./Autocomplete";
+export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
+export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FormRadioGroup } from "./FormRadioGroup";
@@ -25,5 +34,6 @@ export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as TabGroup } from "./TabGroup";
+export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.16",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -44,10 +44,11 @@
   ],
   "devDependencies": {
     "@types/body-parser": "^1.19.2",
+    "@types/reach__router": "^1.3.10",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
     "babel-loader": "^8.2.2",
-    "typescript": "^4.5.5"
+    "typescript": "~4.6.3"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
@@ -55,10 +56,15 @@
     "@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-player": "^2.9.0",
     "rifm": "^0.12.1"
   },
+  "resolutions": {
+    "@types/react": "17.0.27",
+    "@types/react-dom": "17.0.9"
+  },
   "scripts": {
     "build": "./node_modules/.bin/tsc"
   },