@symply.io/basic-components 1.1.0 → 1.1.1-beta.2

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.
package/README.md CHANGED
@@ -26,7 +26,6 @@
26
26
  - [MonthYearInput](#monthyearinput)
27
27
  - [DigitInput](#digitinput)
28
28
  - [FeinInput](#feininput)
29
- - [FileUploader](#fileuploader)
30
29
  - [FormRadioGroup](#formradiogroup)
31
30
  - [FormSelector](#formselector)
32
31
  - [HelpCaption](#helpcaption)
@@ -86,7 +85,7 @@ Diglog component for alerts or confirmations.
86
85
  <h5>Import</h5>
87
86
 
88
87
  ```typescript
89
- import { AlertDialog } from '@symply.io/basic-components';
88
+ import { AlertDialog } from '@symply.io/basic-components/';
90
89
  // or
91
90
  import AlertDialog from '@symply.io/basic-components/AlertDialog';
92
91
  ```
@@ -113,7 +112,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
113
112
  <h5>Import</h5>
114
113
 
115
114
  ```typescript
116
- import { Autocomplete } from '@symply.io/basic-components';
115
+ import { Autocomplete } from '@symply.io/basic-components/';
117
116
  // or
118
117
  import Autocomplete from '@symply.io/basic-components/Autocomplete';
119
118
  ```
@@ -145,7 +144,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
145
144
  <h5>Import</h5>
146
145
 
147
146
  ```typescript
148
- import { AutocompleteWithFilter } from '@symply.io/basic-components';
147
+ import { AutocompleteWithFilter } from '@symply.io/basic-components/';
149
148
  // or
150
149
  import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter';
151
150
  ```
@@ -176,7 +175,7 @@ Reusable modal component.
176
175
  <h5>Import</h5>
177
176
 
178
177
  ```typescript
179
- import { BasicModal } from '@symply.io/basic-components';
178
+ import { BasicModal } from '@symply.io/basic-components/';
180
179
  // or
181
180
  import BasicModal from '@symply.io/basic-components/BasicModal';
182
181
  ```
@@ -215,7 +214,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
215
214
  import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
216
215
  ```
217
216
 
218
- <h5>Column Props (ColumnBaseProps)</h5>
217
+ <h5>Column Props (IColumn)</h5>
219
218
 
220
219
  | Name | Type | Default | Required | Description |
221
220
  | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -234,7 +233,7 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
234
233
 
235
234
  | Name | Type | Default | Required | Description |
236
235
  | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
237
- | columns | Array\<ColumnBaseProps\> | | true | table columns |
236
+ | columns | Array\<IColumn\> | | true | table columns |
238
237
  | data | Array<{ [name]: unknown }> | | true | table data/rows |
239
238
  | disableSortBy | bool | | false | If true, the whole table can't be sortable. |
240
239
  | initialState | { sortBy?: SortByProps } | | false | Set the initial states |
@@ -244,22 +243,20 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
244
243
 
245
244
  | Name | Type | Description |
246
245
  | ------- | -------------------- | ------------------------- |
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. |
246
+ | headers | Array\<IHeader\> | The cells for the header. |
247
+ | columns | Array\<IBodyColumn\> | The cells for the body. |
248
+ | footers | Array\<IFooter> | The cells for the footer. |
249
+ | rows | Array<IRow\> | The rows for the table. |
251
250
 
252
251
  <h5>Component Props</h5>
253
252
 
254
253
  | Name | Type | Default | Required | Description |
255
254
  | ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
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. |
255
+ | headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
256
+ | columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
257
+ | footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
260
258
  | noDataText | string | 'No Data!' | false | The text when no data rendered. |
261
- | rowHeight | string \| number | 60 | false | The height of each row. |
262
- | rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
259
+ | rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
263
260
 
264
261
 
265
262
 
@@ -270,7 +267,7 @@ A list of links that help a user visualize a page's location within the hierarch
270
267
  <h5>Import</h5>
271
268
 
272
269
  ```typescript
273
- import { BreadCrumbs } from '@symply.io/basic-components';
270
+ import { BreadCrumbs } from '@symply.io/basic-components/';
274
271
  // or
275
272
  import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';
276
273
  ```
@@ -292,7 +289,7 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
292
289
  <h5>Import</h5>
293
290
 
294
291
  ```typescript
295
- import { CheckBox } from '@symply.io/basic-components';
292
+ import { CheckBox } from '@symply.io/basic-components/';
296
293
  // or
297
294
  import { CheckBox } from '@symply.io/basic-components/CheckBox';
298
295
  // or
@@ -317,7 +314,7 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
317
314
  <h5>Import</h5>
318
315
 
319
316
  ```typescript
320
- import { CheckBoxGroup } from '@symply.io/basic-components';
317
+ import { CheckBoxGroup } from '@symply.io/basic-components/';
321
318
  // or
322
319
  import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox';
323
320
  // or
@@ -339,7 +336,7 @@ A common component for rendering the copyright
339
336
  <h5>Import</h5>
340
337
 
341
338
  ```typescript
342
- import { Copyright } from '@symply.io/basic-components';
339
+ import { Copyright } from '@symply.io/basic-components/';
343
340
  // or
344
341
  import Copyright from '@symply.io/basic-components/Copyright';
345
342
  ```
@@ -355,7 +352,7 @@ Input component for full date (MM/DD/YYYY)
355
352
  <h5>Import</h5>
356
353
 
357
354
  ```typescript
358
- import { FullDateInput } from '@symply.io/basic-components';
355
+ import { FullDateInput } from '@symply.io/basic-components/';
359
356
  // or
360
357
  import { FullDateInput } from '@symply.io/basic-components/DateInput';
361
358
  // or
@@ -383,7 +380,7 @@ Input component for month day (MM/DD)
383
380
  <h5>Import</h5>
384
381
 
385
382
  ```typescript
386
- import { MonthDayInput } from '@symply.io/basic-components';
383
+ import { MonthDayInput } from '@symply.io/basic-components/';
387
384
  // or
388
385
  import { MonthDayInput } from '@symply.io/basic-components/DateInput';
389
386
  // or
@@ -411,7 +408,7 @@ Input component for month year (MM/YYYY)
411
408
  <h5>Import</h5>
412
409
 
413
410
  ```typescript
414
- import { MonthYearInput } from '@symply.io/basic-components';
411
+ import { MonthYearInput } from '@symply.io/basic-components/';
415
412
  // or
416
413
  import { MonthYearInput } from '@symply.io/basic-components/DateInput';
417
414
  // or
@@ -443,7 +440,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
443
440
  <h5>Import</h5>
444
441
 
445
442
  ```typescript
446
- import { DigitInput } from '@symply.io/basic-components';
443
+ import { DigitInput } from '@symply.io/basic-components/';
447
444
  // or
448
445
  import DigitInput from '@symply.io/basic-components/DigitInput';
449
446
  ```
@@ -470,7 +467,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
470
467
  <h5>Import</h5>
471
468
 
472
469
  ```typescript
473
- import { FeinInput } from '@symply.io/basic-components';
470
+ import { FeinInput } from '@symply.io/basic-components/';
474
471
  // or
475
472
  import FeinInput from '@symply.io/basic-components/FeinInput';
476
473
  ```
@@ -485,38 +482,6 @@ import FeinInput from '@symply.io/basic-components/FeinInput';
485
482
 
486
483
 
487
484
 
488
- <h3>FileUploader</h3>
489
-
490
- An uploader component for uploading file.
491
-
492
- <h5>Import</h5>
493
-
494
- ```typescript
495
- import { FileUploader } from '@symply.io/basic-components';
496
- // or
497
- import FileUploader from '@symply.io/basic-components/FileUploader';
498
- ```
499
-
500
- <h5>Props</h5>
501
-
502
- | Name | Type | Default | Required | Description |
503
- | -------------------------------- | -------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
504
- | accept | {string[]} | | false | An object with a common [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) as keys and an array of file extensions as values. E.g. :`{ 'image/png': ['.png'] }`. |
505
- | chooseFileText | string | "Choose a File" | false | Customized text for the choose file button. |
506
- | disabled | boolean | false | false | If `true` then the component would be disabled. |
507
- | dropFileText | string | "Drop files here" | false | Customized text for the drop file button. |
508
- | height | number\|string | '150px' | false | The height of the uploader box. |
509
- | loading | boolean | false | false | If `true` then the circular progress would be shown. |
510
- | maxFiles | number | 0 | false | Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted. |
511
- | maxSize | number | 5,242,880 (in bytes, i.e. 5MB) | false | The maximum file size (in bytes) that can be uploaded. |
512
- | maxWidth | number\|string | '430px' | false | The max width of the uploader box. |
513
- | multiple | boolean | false | false | If `true` then allow select multiple files. |
514
- | onUpload | | | | |
515
- | sizeExceededErrorText | string | "Your file exceed the max size of [x] MB." | false | Customized text for the alert message when size exceeded. |
516
- | wrongFileTypeErrorText?: string; | string | "The type of the file you uploaded is not accepted, please reupload!" | false | Customized text for the alert message when unacceptable files uploaded. |
517
-
518
-
519
-
520
485
  <h3>FormRadioGroup</h3>
521
486
 
522
487
  Radio Group allow the user to select one option from a set.
@@ -524,7 +489,7 @@ Radio Group allow the user to select one option from a set.
524
489
  <h5>Import</h5>
525
490
 
526
491
  ```typescript
527
- import { FormRadioGroup } from '@symply.io/basic-components';
492
+ import { FormRadioGroup } from '@symply.io/basic-components/';
528
493
  // or
529
494
  import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
530
495
  ```
@@ -608,7 +573,7 @@ You can use it to add a hint/help paragraph.
608
573
  <h5>Import</h5>
609
574
 
610
575
  ```typescript
611
- import { HelpCaption } from '@symply.io/basic-components';
576
+ import { HelpCaption } from '@symply.io/basic-components/';
612
577
  // or
613
578
  import HelpCaption from '@symply.io/basic-components/HelpCaption';
614
579
  ```
@@ -632,7 +597,7 @@ A modal for loading.
632
597
  <h5>Import</h5>
633
598
 
634
599
  ```typescript
635
- import { LoadingModal } from '@symply.io/basic-components';
600
+ import { LoadingModal } from '@symply.io/basic-components/';
636
601
  // or
637
602
  import LoadingModal from '@symply.io/basic-components/LoadingModal';
638
603
  ```
@@ -656,7 +621,7 @@ A button with menu options.
656
621
  <h5>Import</h5>
657
622
 
658
623
  ```typescript
659
- import { MenuButtonGroup } from '@symply.io/basic-components';
624
+ import { MenuButtonGroup } from '@symply.io/basic-components/';
660
625
  // or
661
626
  import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
662
627
  ```
@@ -693,7 +658,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
693
658
  <h5>Import</h5>
694
659
 
695
660
  ```typescript
696
- import { NumberInput } from '@symply.io/basic-components';
661
+ import { NumberInput } from '@symply.io/basic-components/';
697
662
  // or
698
663
  import NumberInput from '@symply.io/basic-components/NumberInput';
699
664
  ```
@@ -755,7 +720,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
755
720
  <h5>Import</h5>
756
721
 
757
722
  ```typescript
758
- import { PhoneNumberInput } from '@symply.io/basic-components';
723
+ import { PhoneNumberInput } from '@symply.io/basic-components/';
759
724
  // or
760
725
  import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
761
726
  ```
@@ -778,7 +743,7 @@ Sidebars for navigation.
778
743
  <h5>Import</h5>
779
744
 
780
745
  ```typescript
781
- import { Sidebar } from '@symply.io/basic-components';
746
+ import { Sidebar } from '@symply.io/basic-components/';
782
747
  // or
783
748
  import Sidebar from '@symply.io/basic-components/Sidebar';
784
749
  ```
@@ -791,7 +756,6 @@ import Sidebar from '@symply.io/basic-components/Sidebar';
791
756
  | betaTagColor | CSSProperties["color"] | \#00A2A9 | false | The value of the `Input` element. |
792
757
  | children | Array\<SidebarItemProps\> | | false | If not undefined the sub sidebar items would be rendered. |
793
758
  | icon | Element | | true | The icon adornment. |
794
- | id | string | | false | The element id of the item. |
795
759
  | lock | boolean | | false | If `true` the lock icon will be rendered, and the sidebar item would be disabled. |
796
760
  | name | string | | true | The sidebar item label. |
797
761
  | path | string | | true | The link path of the sidebar item. |
@@ -799,9 +763,10 @@ import Sidebar from '@symply.io/basic-components/Sidebar';
799
763
 
800
764
  <h5>Props</h5>
801
765
 
802
- | Name | Type | Default | Required | Description |
803
- | ----- | ------------------------- | ------- | -------- | -------------- |
804
- | items | Array\<SidebarItemProps\> | | true | Sidebar items. |
766
+ | Name | Type | Default | Required | Description |
767
+ | ------------ | ------------------------- | ------- | -------- | ------------------------------------------ |
768
+ | items | Array\<SidebarItemProps\> | | true | Sidebar items. |
769
+ | showIconOnly | boolean | false | false | If `true` it will show the main icon only. |
805
770
 
806
771
 
807
772
 
@@ -814,7 +779,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
814
779
  <h5>Import</h5>
815
780
 
816
781
  ```typescript
817
- import { SocialInput } from '@symply.io/basic-components';
782
+ import { SocialInput } from '@symply.io/basic-components/';
818
783
  // or
819
784
  import SocialInput from '@symply.io/basic-components/SocialInput';
820
785
  ```
@@ -836,7 +801,7 @@ Tabs group.
836
801
  <h5>Import</h5>
837
802
 
838
803
  ```typescript
839
- import { TabGroup } from '@symply.io/basic-components';
804
+ import { TabGroup } from '@symply.io/basic-components/';
840
805
  // or
841
806
  import TabGroup from '@symply.io/basic-components/TabGroup';
842
807
  ```
@@ -860,7 +825,7 @@ Reusable pagination component for the material table
860
825
  <h5>Import</h5>
861
826
 
862
827
  ```typescript
863
- import { TablePagination } from '@symply.io/basic-components';
828
+ import { TablePagination } from '@symply.io/basic-components/';
864
829
  // or
865
830
  import TablePagination from '@symply.io/basic-components/TablePagination';
866
831
  ```
@@ -888,7 +853,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
888
853
  <h5>Import</h5>
889
854
 
890
855
  ```typescript
891
- import { TextInput } from '@symply.io/basic-components';
856
+ import { TextInput } from '@symply.io/basic-components/';
892
857
  // or
893
858
  import TextInput from '@symply.io/basic-components/TextInput';
894
859
  ```
@@ -937,7 +902,7 @@ A modal for playing videos.
937
902
  <h5>Import</h5>
938
903
 
939
904
  ```typescript
940
- import { VideoPlayerModal } from '@symply.io/basic-components';
905
+ import { VideoPlayerModal } from '@symply.io/basic-components/';
941
906
  // or
942
907
  import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
943
908
  ```
@@ -9,7 +9,7 @@ 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 colorAlpha from "color-alpha";
14
14
  import Chip from "@mui/material/Chip";
15
15
  import ListItem from "@mui/material/ListItem";
@@ -20,7 +20,7 @@ import useTheme from "@mui/material/styles/useTheme";
20
20
  import ChevronRightIcon from "@mui/icons-material/ChevronRight";
21
21
  import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
22
22
  function SidebarItem(props) {
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;
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, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
24
24
  var theme = useTheme();
25
25
  return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
26
26
  paddingLeft: isSub ? theme.spacing(4) : undefined,
@@ -37,25 +37,23 @@ function SidebarItem(props) {
37
37
  borderRadius: active ? "5px" : undefined,
38
38
  opacity: active ? "1" : undefined,
39
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",
46
- borderRadius: active ? "5px" : undefined,
47
- opacity: active ? "1" : undefined,
48
- fontWeight: active ? 600 : undefined
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, {}))] })));
40
+ } }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
41
+ color: active ? theme.palette.primary.main : "textPrimary",
42
+ sx: {
43
+ overflow: "hidden",
44
+ textOverflow: "ellipsis",
45
+ whiteSpace: "nowrap",
46
+ borderRadius: active ? "5px" : undefined,
47
+ opacity: active ? "1" : undefined,
48
+ fontWeight: active ? 600 : undefined
49
+ }
50
+ }, primary: name }), lock ? (_jsx(LockIcon, { fontSize: "small", color: "error", sx: { fontSize: "1rem" } })) : (_jsx(_Fragment, {})), beta ? (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
51
+ borderRadius: theme.spacing(0.5),
52
+ backgroundColor: betaTagColor,
53
+ color: "white",
54
+ height: theme.spacing(2.5),
55
+ fontSize: theme.spacing(1.25),
56
+ padding: theme.spacing(0, 0.75)
57
+ } })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
60
58
  }
61
59
  export default SidebarItem;
@@ -18,7 +18,7 @@ import useTheme from "@mui/material/styles/useTheme";
18
18
  import SidebarItem from "./SidebarItem";
19
19
  import SidebarLink from "./SidebarLink";
20
20
  function SidebarItemsGroup(props) {
21
- var item = props.item;
21
+ var item = props.item, showIconOnly = props.showIconOnly;
22
22
  var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
23
23
  var pathname = useLocation().pathname;
24
24
  var match = useMemo(function () {
@@ -32,6 +32,6 @@ function SidebarItemsGroup(props) {
32
32
  setExpand(match);
33
33
  }, [match]);
34
34
  var theme = useTheme();
35
- return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, 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, { id: c.id, 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)); }) })) })))] }));
35
+ return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, 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, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
36
36
  }
37
37
  export default memo(SidebarItemsGroup);
package/Sidebar/index.js CHANGED
@@ -18,11 +18,11 @@ 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
21
+ var items = props.items, showIconOnly = props.showIconOnly, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
22
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
24
  var id = i.id, 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, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
25
+ return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
26
26
  }) }) })));
27
27
  }
28
28
  export default Sidebar;
@@ -14,6 +14,7 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
14
14
  }
15
15
  export interface SidebarProps {
16
16
  items: Array<SidebarBaseProps>;
17
+ showIconOnly?: boolean;
17
18
  primaryColor?: CSSProperties["color"];
18
19
  secondaryColor?: CSSProperties["color"];
19
20
  }
@@ -22,6 +23,7 @@ export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
22
23
  expand?: boolean;
23
24
  isSub?: boolean;
24
25
  hasChildren?: boolean;
26
+ showIconOnly?: boolean;
25
27
  onClick?: () => void;
26
28
  }
27
29
  export interface SidebarLinkProps extends SidebarItemProps {
@@ -29,4 +31,5 @@ export interface SidebarLinkProps extends SidebarItemProps {
29
31
  }
30
32
  export interface SidebarItemsGroupProps {
31
33
  item: SidebarBaseProps;
34
+ showIconOnly?: boolean;
32
35
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.1.0",
3
+ "version": "1.1.1-beta.2",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",