@symply.io/basic-components 1.0.6 → 1.0.8-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,35 +28,36 @@ import Typography from "@mui/material/Typography";
28
28
  import useMediaQuery from "@mui/material/useMediaQuery";
29
29
  import CircularProgress from "@mui/material/CircularProgress";
30
30
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
31
+ import AlertDialog from "../AlertDialog";
31
32
  import useInteractions from "./useInteractions";
32
33
  import useCustomTheme from "../useCustomTheme";
33
34
  function FileUploader(props) {
34
- var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, loading = props.loading, disabled = props.disabled, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
35
+ var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
35
36
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
36
37
  var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
37
- var _c = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _c.alertArgs, rootProps = _c.rootProps, onCloseAlert = _c.onCloseAlert, onSelectFile = _c.onSelectFile, getRootProps = _c.getRootProps, getInputProps = _c.getInputProps;
38
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
39
- fontFamily: "Roboto, Helvetica, Arial, sans-serif",
40
- cursor: disabled ? "not-allowed" : "pointer"
41
- } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
42
- border: "1px dashed #0099a7",
43
- borderRadius: "5px",
44
- outline: "none",
45
- backgroundColor: "#F2F2F2",
46
- maxWidth: maxWidth,
47
- height: height,
48
- width: "100%"
49
- } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
50
- fontSize: ".875rem",
51
- textAlign: "center"
52
- } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
53
- backgroundColor: "white !important",
54
- color: disabled
55
- ? theme.palette.grey[400]
56
- : theme.palette.primary.main,
38
+ var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
39
+ return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
57
40
  fontFamily: "Roboto, Helvetica, Arial, sans-serif",
58
41
  cursor: disabled ? "not-allowed" : "pointer"
59
- }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))) })));
42
+ } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
43
+ border: "1px dashed #0099a7",
44
+ borderRadius: "5px",
45
+ outline: "none",
46
+ backgroundColor: "#F2F2F2",
47
+ maxWidth: maxWidth,
48
+ height: height,
49
+ width: "100%"
50
+ } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
51
+ fontSize: ".875rem",
52
+ textAlign: "center"
53
+ } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
54
+ backgroundColor: "white !important",
55
+ color: disabled
56
+ ? theme.palette.grey[400]
57
+ : theme.palette.primary.main,
58
+ fontFamily: "Roboto, Helvetica, Arial, sans-serif",
59
+ cursor: disabled ? "not-allowed" : "pointer"
60
+ }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
60
61
  }
61
62
  export default FileUploader;
62
63
  export * from "./types";
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { useState, useCallback, useMemo } from "react";
13
13
  import { useDropzone } from "react-dropzone";
14
14
  function useInteractions(props) {
15
- var multiple = props.multiple, disabled = props.disabled, maxFiles = props.maxFiles, _a = props.maxSize, maxSize = _a === void 0 ? 1024 * 1024 * 5 : _a, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
15
+ var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
16
16
  var ERROR_TYPE_MSG = useMemo(function () {
17
17
  return wrongFileTypeErrorText ||
18
18
  "The type of the file you uploaded is not accepted, please reupload!";
@@ -21,7 +21,7 @@ function useInteractions(props) {
21
21
  return sizeExceededErrorText ||
22
22
  "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
23
23
  }, [sizeExceededErrorText, maxSize]);
24
- var _b = useState({ open: false, message: "" }), alertArgs = _b[0], setAlertArgs = _b[1];
24
+ var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
25
25
  var onOpenAlert = useCallback(function (message) {
26
26
  setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
27
27
  }, []);
@@ -51,14 +51,14 @@ function useInteractions(props) {
51
51
  onUpload(acceptedFiles);
52
52
  }
53
53
  }, [accept, onUpload]);
54
- var _c = useDropzone({
54
+ var _e = useDropzone({
55
55
  onDrop: onDrop,
56
56
  accept: accept,
57
57
  multiple: multiple,
58
58
  disabled: disabled,
59
59
  maxSize: maxSize,
60
60
  maxFiles: maxFiles
61
- }), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, onSelectFile = _c.open;
61
+ }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
62
62
  var rootProps = getRootProps({
63
63
  onClick: function (e) { return e.stopPropagation(); },
64
64
  onKeyDown: function (e) {
package/README.md CHANGED
@@ -215,7 +215,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
215
215
  import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
216
216
  ```
217
217
 
218
- <h5>Column Props (IColumn)</h5>
218
+ <h5>Column Props (ColumnBaseProps)</h5>
219
219
 
220
220
  | Name | Type | Default | Required | Description |
221
221
  | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -234,31 +234,31 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
234
234
 
235
235
  | Name | Type | Default | Required | Description |
236
236
  | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
237
- | columns | Array\<IColumn\> | | true | table columns |
237
+ | columns | Array\<ColumnBaseProps\> | | true | table columns |
238
238
  | data | Array<{ [name]: unknown }> | | true | table data/rows |
239
239
  | disableSortBy | bool | | false | If true, the whole table can't be sortable. |
240
240
  | initialState | { sortBy?: SortByProps } | | false | Set the initial states |
241
- | onRowClick | func | | false | The function for row clicking. |
242
241
  | onSort | func | | false | The function for sorting rows. |
243
242
 
244
243
  <h5>Hook Returns</h5>
245
244
 
246
245
  | Name | Type | Description |
247
246
  | ------- | -------------------- | ------------------------- |
248
- | headers | Array\<IHeader\> | The cells for the header. |
249
- | columns | Array\<IBodyColumn\> | The cells for the body. |
250
- | footers | Array\<IFooter> | The cells for the footer. |
251
- | rows | Array<IRow\> | The rows for the table. |
247
+ | headers | Array\<HeaderProps\> | The cells for the header. |
248
+ | columns | Array\<ColumnProps\> | The cells for the body. |
249
+ | footers | Array\<FooterProps> | The cells for the footer. |
250
+ | rows | Array<RowProps\> | The rows for the table. |
252
251
 
253
252
  <h5>Component Props</h5>
254
253
 
255
254
  | Name | Type | Default | Required | Description |
256
255
  | ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
257
- | headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
258
- | columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
259
- | footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
256
+ | headers | Array\<HeaderProps\> | | true | The cells for the header. (from the hook) |
257
+ | columns | Array\<ColumnProps\> | | true | The cells for the body. (from the hook) |
258
+ | footers | Array\<FooterProps> | [] | false | The cells for the footer. (from the hook) |
259
+ | onRowClick | func | | false | The function for row clicking. |
260
260
  | noDataText | string | 'No Data!' | false | The text when no data rendered. |
261
- | rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
261
+ | rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
262
262
 
263
263
 
264
264
 
@@ -18,45 +18,44 @@ import ListItemIcon from "@mui/material/ListItemIcon";
18
18
  import LockIcon from "@mui/icons-material/LockRounded";
19
19
  import ChevronRightIcon from "@mui/icons-material/ChevronRight";
20
20
  import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
21
- import ThemeProvider from "@mui/material/styles/ThemeProvider";
22
21
  import useCustomTheme from "../useCustomTheme";
23
22
  function SidebarItem(props) {
24
- var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onClick = props.onClick;
25
- var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
26
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
27
- paddingLeft: isSub ? theme.spacing(4) : undefined,
28
- display: "flex",
29
- width: "100%",
30
- "&:hover": {
31
- backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
32
- },
33
- backgroundColor: active
34
- ? colorAlpha(theme.palette.primary.main, 0.2)
35
- : undefined
36
- } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
37
- color: active ? theme.palette.primary.main : undefined,
23
+ var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, onClick = props.onClick;
24
+ var theme = useCustomTheme();
25
+ return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
26
+ paddingLeft: isSub ? theme.spacing(4) : undefined,
27
+ display: "flex",
28
+ width: "100%",
29
+ "&:hover": {
30
+ backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
31
+ },
32
+ backgroundColor: active
33
+ ? colorAlpha(theme.palette.primary.main, 0.2)
34
+ : undefined
35
+ } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
36
+ color: active ? theme.palette.primary.main : undefined,
37
+ borderRadius: active ? "5px" : undefined,
38
+ opacity: active ? "1" : undefined,
39
+ fontWeight: active ? 600 : undefined
40
+ } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
41
+ color: active ? theme.palette.primary.main : "textPrimary",
42
+ sx: {
43
+ overflow: "hidden",
44
+ textOverflow: "ellipsis",
45
+ whiteSpace: "nowrap",
38
46
  borderRadius: active ? "5px" : undefined,
39
47
  opacity: active ? "1" : undefined,
40
48
  fontWeight: active ? 600 : undefined
41
- } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
42
- color: active ? theme.palette.primary.main : "textPrimary",
43
- sx: {
44
- overflow: "hidden",
45
- textOverflow: "ellipsis",
46
- whiteSpace: "nowrap",
47
- borderRadius: active ? "5px" : undefined,
48
- opacity: active ? "1" : undefined,
49
- fontWeight: active ? 600 : undefined
50
- }
51
- }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
52
- fontSize: "1rem"
53
- }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
54
- borderRadius: theme.spacing(0.5),
55
- backgroundColor: betaTagColor,
56
- color: "white",
57
- height: theme.spacing(2.5),
58
- fontSize: theme.spacing(1.25),
59
- padding: theme.spacing(0, 0.75)
60
- } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
49
+ }
50
+ }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
51
+ fontSize: "1rem"
52
+ }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
53
+ borderRadius: theme.spacing(0.5),
54
+ backgroundColor: betaTagColor,
55
+ color: "white",
56
+ height: theme.spacing(2.5),
57
+ fontSize: theme.spacing(1.25),
58
+ padding: theme.spacing(0, 0.75)
59
+ } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })));
61
60
  }
62
61
  export default SidebarItem;
@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import { useState, memo, useMemo, useEffect, useCallback } from "react";
14
14
  import { Match, useLocation } from "@reach/router";
15
- import ThemeProvider from "@mui/material/styles/ThemeProvider";
16
15
  import Collapse from "@mui/material/Collapse";
17
16
  import List from "@mui/material/List";
18
17
  import useCustomTheme from "../useCustomTheme";
@@ -20,7 +19,7 @@ import SidebarItem from "./SidebarItem";
20
19
  import SidebarLink from "./SidebarLink";
21
20
  function SidebarItemsGroup(props) {
22
21
  var item = props.item;
23
- var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor, primaryColor = item.primaryColor, secondaryColor = item.secondaryColor;
22
+ var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
24
23
  var pathname = useLocation().pathname;
25
24
  var match = useMemo(function () {
26
25
  return pathname.includes(path);
@@ -32,7 +31,7 @@ function SidebarItemsGroup(props) {
32
31
  useEffect(function () {
33
32
  setExpand(match);
34
33
  }, [match]);
35
- var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
36
- return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, primaryColor: c.primaryColor, secondaryColor: c.secondaryColor, isSub: true })); } }), c.name)); }) })) })))] })));
34
+ var theme = useCustomTheme();
35
+ return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
37
36
  }
38
37
  export default memo(SidebarItemsGroup);
@@ -22,16 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { Link, useLocation } from "@reach/router";
25
- import ThemeProvider from "@mui/material/styles/ThemeProvider";
26
25
  import useCustomTheme from "../useCustomTheme";
27
26
  import SidebarItem from "./SidebarItem";
28
27
  function SidebarLink(props) {
29
28
  var pathname = useLocation().pathname;
30
- var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor", "primaryColor", "secondaryColor"]);
31
- var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
32
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
33
- color: primaryColor || theme.palette.primary.main,
34
- textDecoration: "none"
35
- } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, rest), name) })) })));
29
+ var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
30
+ var theme = useCustomTheme();
31
+ return (_jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
32
+ color: theme.palette.primary.main,
33
+ textDecoration: "none"
34
+ } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
36
35
  }
37
36
  export default SidebarLink;
package/Sidebar/index.js CHANGED
@@ -12,17 +12,17 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { Match } from "@reach/router";
14
14
  import List from "@mui/material/List";
15
- import useTheme from "@mui/material/styles/useTheme";
16
15
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
16
+ import useCustomTheme from "../useCustomTheme";
17
17
  import SidebarItem from "./SidebarItem";
18
18
  import SidebarItemsGroup from "./SidebarItemsGroup";
19
19
  import SidebarLink from "./SidebarLink";
20
20
  function Sidebar(props) {
21
- var items = props.items;
22
- var theme = useTheme();
21
+ var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
22
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
23
23
  return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
24
- var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor, primaryColor = i.primaryColor, secondaryColor = i.secondaryColor;
25
- return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, name)); } }), name));
24
+ var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
25
+ return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
26
26
  }) }) })));
27
27
  }
28
28
  export default Sidebar;
@@ -15,6 +15,8 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
15
15
  }
16
16
  export interface SidebarProps {
17
17
  items: Array<SidebarBaseProps>;
18
+ primaryColor?: CSSProperties["color"];
19
+ secondaryColor?: CSSProperties["color"];
18
20
  }
19
21
  export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
20
22
  active?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.0.6",
3
+ "version": "1.0.8-beta.1",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",