@etsoo/materialui 1.5.4 → 1.5.6

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.
Files changed (7) hide show
  1. package/lib/cjs/TagList.js +4 -1
  2. package/lib/cjs/TagListPro.js +4 -1
  3. package/lib/mjs/TagList.js +4 -1
  4. package/lib/mjs/TagListPro.js +4 -1
  5. package/package.json +1 -1
  6. package/src/TagList.tsx +6 -5
  7. package/src/TagListPro.tsx +13 -9
package/lib/cjs/TagList.js CHANGED
@@ -20,7 +20,10 @@ function TagList(props) {
20
20
  const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
21
21
  const moreLabel = more + "...";
22
22
  // Destruct
23
- const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
23
+ const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
24
+ const { key, ...rest } = getTagProps({ index });
25
+ return (0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...rest }, key);
26
+ }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
24
27
  const [open, setOpen] = react_1.default.useState(false);
25
28
  const [options, setOptions] = react_1.default.useState([]);
26
29
  const [loading, setLoading] = react_1.default.useState(false);
package/lib/cjs/TagListPro.js CHANGED
@@ -22,7 +22,10 @@ function TagListPro(props) {
22
22
  const moreLabel = more + "...";
23
23
  const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
24
24
  // Destruct
25
- const { renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
25
+ const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
26
+ const { key, ...rest } = getTagProps({ index });
27
+ return ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getLabel(option), ...rest }, key));
28
+ }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
26
29
  const [open, setOpen] = react_1.default.useState(false);
27
30
  const [options, setOptions] = react_1.default.useState([]);
28
31
  const [loading, setLoading] = react_1.default.useState(false);
package/lib/mjs/TagList.js CHANGED
@@ -14,7 +14,10 @@ export function TagList(props) {
14
14
  const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
15
15
  const moreLabel = more + "...";
16
16
  // Destruct
17
- const { renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] })), renderTags = (value, getTagProps) => value.map((option, index) => (_jsx(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
17
+ const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
18
+ const { key, ...rest } = getTagProps({ index });
19
+ return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
20
+ }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
18
21
  const [open, setOpen] = React.useState(false);
19
22
  const [options, setOptions] = React.useState([]);
20
23
  const [loading, setLoading] = React.useState(false);
package/lib/mjs/TagListPro.js CHANGED
@@ -16,7 +16,10 @@ export function TagListPro(props) {
16
16
  const moreLabel = more + "...";
17
17
  const getLabel = (item) => DataTypes.getListItemLabel(item);
18
18
  // Destruct
19
- const { renderOption = (props, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) })), renderTags = (value, getTagProps) => value.map((option, index) => (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
19
+ const { renderOption = ({ key, ...props }, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
20
+ const { key, ...rest } = getTagProps({ index });
21
+ return (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...rest }, key));
22
+ }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
20
23
  const [open, setOpen] = React.useState(false);
21
24
  const [options, setOptions] = React.useState([]);
22
25
  const [loading, setLoading] = React.useState(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.4",
3
+ "version": "1.5.6",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
package/src/TagList.tsx CHANGED
@@ -51,8 +51,8 @@ export function TagList(props: TagListProps) {
51
51
 
52
52
  // Destruct
53
53
  const {
54
- renderOption = (props, option, { selected }) => (
55
- <li {...props}>
54
+ renderOption = ({ key, ...props }, option, { selected }) => (
55
+ <li key={key} {...props}>
56
56
  <Checkbox
57
57
  icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
58
58
  checkedIcon={<CheckBoxIcon fontSize="small" />}
@@ -63,9 +63,10 @@ export function TagList(props: TagListProps) {
63
63
  </li>
64
64
  ),
65
65
  renderTags = (value: readonly string[], getTagProps) =>
66
- value.map((option, index) => (
67
- <Chip variant="outlined" label={option} {...getTagProps({ index })} />
68
- )),
66
+ value.map((option, index) => {
67
+ const { key, ...rest } = getTagProps({ index });
68
+ return <Chip variant="outlined" key={key} label={option} {...rest} />;
69
+ }),
69
70
  noOptionsText = noOptions,
70
71
  loadingText = loadingLabel,
71
72
  openText = openDefault,
package/src/TagListPro.tsx CHANGED
@@ -56,8 +56,8 @@ export function TagListPro<D extends ListType2 = ListType2>(
56
56
 
57
57
  // Destruct
58
58
  const {
59
- renderOption = (props, option, { selected }) => (
60
- <li {...props}>
59
+ renderOption = ({ key, ...props }, option, { selected }) => (
60
+ <li key={key} {...props}>
61
61
  <>
62
62
  <Checkbox
63
63
  icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
@@ -70,13 +70,17 @@ export function TagListPro<D extends ListType2 = ListType2>(
70
70
  </li>
71
71
  ),
72
72
  renderTags = (value: readonly D[], getTagProps) =>
73
- value.map((option, index) => (
74
- <Chip
75
- variant="outlined"
76
- label={getLabel(option)}
77
- {...getTagProps({ index })}
78
- />
79
- )),
73
+ value.map((option, index) => {
74
+ const { key, ...rest } = getTagProps({ index });
75
+ return (
76
+ <Chip
77
+ variant="outlined"
78
+ key={key}
79
+ label={getLabel(option)}
80
+ {...rest}
81
+ />
82
+ );
83
+ }),
80
84
  noOptionsText = noOptions,
81
85
  loadingText = loadingLabel,
82
86
  openText = openDefault,