@etsoo/materialui 1.6.4 → 1.6.6

package/__tests__/ComboBox.tsx

@@ -27,10 +27,11 @@ it("Render ComboBox", async () => {
   });
 
   await waitFor(async () => {
-    const button = await screen.findByRole("button");
+    const button = document.querySelector("button");
+    expect(button).toBeTruthy();
 
     // Act, click the list
-    const clicked = fireEvent.click(button);
+    const clicked = fireEvent.click(button!);
     expect(clicked).toBeTruthy();
 
     // Get list item

package/lib/cjs/TagList.js

@@ -20,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    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)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionLabel = (option) => option, 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 }), getOptionLabel(option)] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/cjs/TagListPro.js

@@ -20,11 +20,10 @@ function TagListPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
-    const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct
-    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, 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)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => shared_1.DataTypes.getListItemLabel(option), 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 }), getOptionLabel(option)] }) }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
-        return ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getLabel(option), ...rest }, key));
+        return ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getOptionLabel(option), ...rest }, key));
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, loadIdValue, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [options, setOptions] = react_1.default.useState([]);
@@ -75,8 +74,9 @@ function TagListPro(props) {
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
-                getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
+                "name" in item &&
+                item["name"] === moreLabel);
+        }, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/mjs/TagList.js

@@ -14,7 +14,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    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)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionLabel = (option) => option, 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 }), getOptionLabel(option)] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;

package/lib/mjs/TagListPro.js

@@ -14,11 +14,10 @@ export function TagListPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
-    const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
-    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, 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)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => DataTypes.getListItemLabel(option), 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 }), getOptionLabel(option)] }) }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
-        return (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...rest }, key));
+        return (_jsx(Chip, { variant: "outlined", label: getOptionLabel(option), ...rest }, key));
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, loadIdValue, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
@@ -69,8 +68,9 @@ export function TagListPro(props) {
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
-                getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
+                "name" in item &&
+                item["name"] === moreLabel);
+        }, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/TagList.tsx

@@ -51,6 +51,7 @@ export function TagList(props: TagListProps) {
 
   // Destruct
   const {
+    getOptionLabel = (option) => option,
     renderOption = ({ key, ...props }, option, { selected }) => (
       <li key={key} {...props}>
         <Checkbox
@@ -59,7 +60,7 @@ export function TagList(props: TagListProps) {
           style={{ marginRight: 8 }}
           checked={selected}
         />
-        {option}
+        {getOptionLabel(option)}
       </li>
     ),
     renderValue = (value: readonly string[], getTagProps) =>

package/src/TagListPro.tsx

@@ -57,12 +57,11 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   const moreLabel = more + "...";
 
-  const getLabel = (item: D) => DataTypes.getListItemLabel(item);
-
   // Destruct
   const {
     getOptionKey = (option) =>
       typeof option === "string" ? option : option.id,
+    getOptionLabel = (option) => DataTypes.getListItemLabel(option),
     renderOption = ({ key, ...props }, option, { selected }) => (
       <li key={key} {...props}>
         <>
@@ -72,7 +71,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
             style={{ marginRight: 8 }}
             checked={selected}
           />
-          {getLabel(option)}
+          {getOptionLabel(option)}
         </>
       </li>
     ),
@@ -83,7 +82,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
           <Chip
             variant="outlined"
             key={key}
-            label={getLabel(option)}
+            label={getOptionLabel(option)}
             {...rest}
           />
         );
@@ -179,11 +178,12 @@ export function TagListPro<D extends ListType2 = ListType2>(
         return (
           typeof item.id === "number" &&
           item.id < 0 &&
-          getLabel(item) === moreLabel
+          "name" in item &&
+          item["name"] === moreLabel
         );
       }}
-      getOptionLabel={(item) => getLabel(item)}
       getOptionKey={getOptionKey}
+      getOptionLabel={getOptionLabel}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}
       loadingText={loadingText}