@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/AutoComplete/AutoComplete.stories.js

@@ -1,181 +1,202 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { AutoComplete } from "./AutoComplete.js";
 const meta = {
-  title: "Components/Form/AutoComplete",
-  component: AutoComplete,
-  argTypes: {
-    onValueChange: {
-      action: "onValueChange"
+    title: "Components/Form/AutoComplete",
+    component: AutoComplete,
+    argTypes: {
+        onValueChange: {
+            action: "onValueChange"
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(AutoComplete, {
+            ...args,
+            value: value,
+            onValueChange: setValue
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, args, {
-      value: value,
-      onValueChange: setValue
-    }));
-  }
 };
-export default meta;
-export const Default = {
-  args: {
-    options: ["Eastern Standard Time (EST)", "Central Standard Time (CST)", "Pacific Standard Time (PST)", "Greenwich Mean Time (GMT)", "Central European Time (CET)", "Central Africa Time (CAT)", "India Standard Time (IST)", "China Standard Time (CST)", "Japan Standard Time (JST)", "Australian Western Standard Time (AWST)", "New Zealand Standard Time (NZST)", "Fiji Time (FJT)", "Argentina Time (ART)", "Bolivia Time (BOT)", "Brasilia Time (BRT)"]
-  }
+const AutoComplete_stories = meta;
+const Default = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
 };
-export const WithLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label"
-  }
+const WithLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
 };
-export const WithRequiredLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithRequiredLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const OnValueChange = {
-  args: {
-    options: ["Eastern Standard Time (EST)", "Central Standard Time (CST)", "Pacific Standard Time (PST)", "Greenwich Mean Time (GMT)"],
-    label: "Time Zone",
-    onValueChange: value => {
-      console.log("User selected Time zone:", value);
+const OnValueChange = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        label: "Time Zone",
+        onValueChange: (value)=>{
+            console.log("User selected Time zone:", value);
+        }
     }
-  }
 };
-export const Documentation = {
-  render: args => {
-    const [value, setValue] = useState(args.value || "");
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update value when args.value changes
-    useEffect(() => {
-      setValue(args.value || "");
-    }, [args.value]);
-    const handleValueChange = newValue => {
-      setValue(newValue);
-
-      // Simple required validation
-      if (!newValue && args.required) {
-        setValidation({
-          isValid: false,
-          message: "This field is required"
-        });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      }
-    };
-
-    // Validate on required change
-    useEffect(() => {
-      if (args.required && !value) {
-        setValidation({
-          isValid: false,
-          message: "This field is required"
+        useEffect(()=>{
+            setValue(args.value || "");
+        }, [
+            args.value
+        ]);
+        const handleValueChange = (newValue)=>{
+            setValue(newValue);
+            !newValue && args.required ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        useEffect(()=>{
+            args.required && !value ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            value
+        ]);
+        return /*#__PURE__*/ react.createElement(AutoComplete, {
+            ...args,
+            value: value,
+            onValueChange: handleValueChange,
+            validation: validation
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
-        });
-      }
-    }, [args.required, value]);
-    return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, args, {
-      value: value,
-      onValueChange: handleValueChange,
-      validation: validation
-    }));
-  },
-  args: {
-    options: ["Eastern Standard Time (EST)", "Central Standard Time (CST)", "Pacific Standard Time (PST)", "Greenwich Mean Time (GMT)"],
-    label: "Time Zone",
-    required: true,
-    description: "Select your timezone from the list",
-    placeholder: "Select timezone...",
-    validation: {
-      isValid: false,
-      message: "This field is required."
-    },
-    onValueChange: undefined
-  },
-  argTypes: {
-    options: {
-      description: "AutoComplete Options - Please refer to the example code for details on usage."
-    },
-    label: {
-      description: "Label text for the autocomplete field",
-      control: "text"
-    },
-    required: {
-      description: "Makes the field required when set to true",
-      control: "boolean"
-    },
-    description: {
-      description: "Additional description text below the field",
-      control: "text"
-    },
-    placeholder: {
-      description: "Placeholder text shown when no value is selected",
-      control: "text"
     },
-    validation: {
-      description: "Object containing validation state and message"
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        label: "Time Zone",
+        required: true,
+        description: "Select your timezone from the list",
+        placeholder: "Select timezone...",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        },
+        onValueChange: void 0
     },
-    onValueChange: {
-      description: "Function called when the selected value changes"
+    argTypes: {
+        options: {
+            description: "AutoComplete Options - Please refer to the example code for details on usage."
+        },
+        label: {
+            description: "Label text for the autocomplete field",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text shown when no value is selected",
+            control: "text"
+        },
+        validation: {
+            description: "Object containing validation state and message"
+        },
+        onValueChange: {
+            description: "Function called when the selected value changes"
+        }
     }
-  }
 };
+export default AutoComplete_stories;
+export { Default, Disabled, Documentation, FullExample, OnValueChange, WithDescription, WithErrors, WithLabel, WithNotes, WithRequiredLabel };
 
 //# sourceMappingURL=AutoComplete.stories.js.map

package/AutoComplete/AutoComplete.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","AutoComplete","meta","title","component","argTypes","onValueChange","action","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","options","WithLabel","label","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","disabled","FullExample","OnValueChange","console","log","Documentation","setValidation","handleValueChange","newValue","placeholder","undefined","control"],"sources":["AutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { AutoComplete } from \"./AutoComplete.js\";\n\nconst meta: Meta<typeof AutoComplete> = {\n    title: \"Components/Form/AutoComplete\",\n    component: AutoComplete,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <AutoComplete {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const OnValueChange: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        onValueChange: value => {\n            console.log(\"User selected Time zone:\", value);\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleValueChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (!newValue && args.required) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <AutoComplete\n                {...args}\n                value={value}\n                onValueChange={handleValueChange}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        required: true,\n        description: \"Select your timezone from the list\",\n        placeholder: \"Select timezone...\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        },\n        onValueChange: undefined\n    },\n    argTypes: {\n        options: {\n            description:\n                \"AutoComplete Options - Please refer to the example code for details on usage.\"\n        },\n        label: {\n            description: \"Label text for the autocomplete field\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no value is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\"\n        },\n        onValueChange: {\n            description: \"Function called when the selected value changes\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AutoComplete/AutoComplete.stories.js","sources":["../../src/AutoComplete/AutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { AutoComplete } from \"./AutoComplete.js\";\n\nconst meta: Meta<typeof AutoComplete> = {\n    title: \"Components/Form/AutoComplete\",\n    component: AutoComplete,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <AutoComplete {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const OnValueChange: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        onValueChange: value => {\n            console.log(\"User selected Time zone:\", value);\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleValueChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (!newValue && args.required) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <AutoComplete\n                {...args}\n                value={value}\n                onValueChange={handleValueChange}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        required: true,\n        description: \"Select your timezone from the list\",\n        placeholder: \"Select timezone...\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        },\n        onValueChange: undefined\n    },\n    argTypes: {\n        options: {\n            description:\n                \"AutoComplete Options - Please refer to the example code for details on usage.\"\n        },\n        label: {\n            description: \"Label text for the autocomplete field\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no value is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\"\n        },\n        onValueChange: {\n            description: \"Function called when the selected value changes\"\n        }\n    }\n};\n"],"names":["meta","AutoComplete","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","OnValueChange","console","Documentation","validation","setValidation","useEffect","handleValueChange","newValue","undefined"],"mappings":"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"}

package/AutoComplete/domains/AutoCompleteOption.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=AutoCompleteOption.js.map

package/AutoComplete/domains/AutoCompleteOptionDto.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=AutoCompleteOptionDto.js.map

package/AutoComplete/domains/ListCache.js

@@ -1,45 +1,53 @@
 import { makeAutoObservable, runInAction, toJS } from "mobx";
-export class ListCache {
-  constructor() {
-    this.state = [];
-    makeAutoObservable(this);
-  }
-  count() {
-    return this.state.length;
-  }
-  clear() {
-    runInAction(() => {
-      this.state = [];
-    });
-  }
-  hasItems() {
-    return this.state.length > 0;
-  }
-  getItems(predicate) {
-    if (predicate) {
-      return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
-    }
-    return [...this.state.map(item => toJS(item))];
-  }
-  getItem(predicate) {
-    const item = this.state.find(item => predicate(item));
-    return item ? toJS(item) : undefined;
-  }
-  addItems(items) {
-    runInAction(() => {
-      this.state = [...this.state, ...items];
-    });
-  }
-  updateItems(updater) {
-    runInAction(() => {
-      this.state = [...this.state.map(item => updater(item))];
-    });
-  }
-  removeItems(predicate) {
-    runInAction(() => {
-      this.state = this.state.filter(item => !predicate(item));
-    });
-  }
+class ListCache {
+    constructor(){
+        this.state = [];
+        makeAutoObservable(this);
+    }
+    count() {
+        return this.state.length;
+    }
+    clear() {
+        runInAction(()=>{
+            this.state = [];
+        });
+    }
+    hasItems() {
+        return this.state.length > 0;
+    }
+    getItems(predicate) {
+        if (predicate) return [
+            ...this.state.filter((item)=>predicate(item)).map((item)=>toJS(item))
+        ];
+        return [
+            ...this.state.map((item)=>toJS(item))
+        ];
+    }
+    getItem(predicate) {
+        const item = this.state.find((item)=>predicate(item));
+        return item ? toJS(item) : void 0;
+    }
+    addItems(items) {
+        runInAction(()=>{
+            this.state = [
+                ...this.state,
+                ...items
+            ];
+        });
+    }
+    updateItems(updater) {
+        runInAction(()=>{
+            this.state = [
+                ...this.state.map((item)=>updater(item))
+            ];
+        });
+    }
+    removeItems(predicate) {
+        runInAction(()=>{
+            this.state = this.state.filter((item)=>!predicate(item));
+        });
+    }
 }
+export { ListCache };
 
 //# sourceMappingURL=ListCache.js.map

package/AutoComplete/domains/ListCache.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","runInAction","toJS","ListCache","constructor","state","count","length","clear","hasItems","getItems","predicate","filter","item","map","getItem","find","undefined","addItems","items","updateItems","updater","removeItems"],"sources":["ListCache.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, toJS } from \"mobx\";\n\nexport type Constructor<T> = new (...args: any[]) => T;\n\nexport interface IListCachePredicate<T> {\n    (item: T): boolean;\n}\n\nexport interface IListCacheItemUpdater<T> {\n    (item: T): T;\n}\n\nexport interface IListCache<T> {\n    count(): number;\n    clear(): void;\n    hasItems(): boolean;\n    getItems(predicate?: IListCachePredicate<T>): T[];\n    getItem(predicate: IListCachePredicate<T>): T | undefined;\n    addItems(items: T[]): void;\n    updateItems(updater: IListCacheItemUpdater<T>): void;\n    removeItems(predicate: IListCachePredicate<T>): void;\n}\n\nexport class ListCache<T> implements IListCache<T> {\n    private state: T[];\n\n    constructor() {\n        this.state = [];\n\n        makeAutoObservable(this);\n    }\n\n    count() {\n        return this.state.length;\n    }\n\n    clear() {\n        runInAction(() => {\n            this.state = [];\n        });\n    }\n\n    hasItems() {\n        return this.state.length > 0;\n    }\n\n    getItems(predicate?: IListCachePredicate<T>): T[] {\n        if (predicate) {\n            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];\n        }\n\n        return [...this.state.map(item => toJS(item))];\n    }\n\n    getItem(predicate: IListCachePredicate<T>): T | undefined {\n        const item = this.state.find(item => predicate(item));\n\n        return item ? toJS(item) : undefined;\n    }\n\n    addItems(items: T[]) {\n        runInAction(() => {\n            this.state = [...this.state, ...items];\n        });\n    }\n\n    updateItems(updater: IListCacheItemUpdater<T>) {\n        runInAction(() => {\n            this.state = [...this.state.map(item => updater(item))];\n        });\n    }\n\n    removeItems(predicate: IListCachePredicate<T>) {\n        runInAction(() => {\n            this.state = this.state.filter(item => !predicate(item));\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,WAAW,EAAEC,IAAI,QAAQ,MAAM;AAuB5D,OAAO,MAAMC,SAAS,CAA6B;EAG/CC,WAAWA,CAAA,EAAG;IACV,IAAI,CAACC,KAAK,GAAG,EAAE;IAEfL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,KAAKA,CAAA,EAAG;IACJ,OAAO,IAAI,CAACD,KAAK,CAACE,MAAM;EAC5B;EAEAC,KAAKA,CAAA,EAAG;IACJP,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,EAAE;IACnB,CAAC,CAAC;EACN;EAEAI,QAAQA,CAAA,EAAG;IACP,OAAO,IAAI,CAACJ,KAAK,CAACE,MAAM,GAAG,CAAC;EAChC;EAEAG,QAAQA,CAACC,SAAkC,EAAO;IAC9C,IAAIA,SAAS,EAAE;MACX,OAAO,CAAC,GAAG,IAAI,CAACN,KAAK,CAACO,MAAM,CAACC,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC,CAACC,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;IAClF;IAEA,OAAO,CAAC,GAAG,IAAI,CAACR,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;EAClD;EAEAE,OAAOA,CAACJ,SAAiC,EAAiB;IACtD,MAAME,IAAI,GAAG,IAAI,CAACR,KAAK,CAACW,IAAI,CAACH,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC;IAErD,OAAOA,IAAI,GAAGX,IAAI,CAACW,IAAI,CAAC,GAAGI,SAAS;EACxC;EAEAC,QAAQA,CAACC,KAAU,EAAE;IACjBlB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAE,GAAGc,KAAK,CAAC;IAC1C,CAAC,CAAC;EACN;EAEAC,WAAWA,CAACC,OAAiC,EAAE;IAC3CpB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIQ,OAAO,CAACR,IAAI,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC;EACN;EAEAS,WAAWA,CAACX,SAAiC,EAAE;IAC3CV,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACF,SAAS,CAACE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;EACN;AACJ","ignoreList":[]}
+{"version":3,"file":"AutoComplete/domains/ListCache.js","sources":["../../../src/AutoComplete/domains/ListCache.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, toJS } from \"mobx\";\n\nexport type Constructor<T> = new (...args: any[]) => T;\n\nexport interface IListCachePredicate<T> {\n    (item: T): boolean;\n}\n\nexport interface IListCacheItemUpdater<T> {\n    (item: T): T;\n}\n\nexport interface IListCache<T> {\n    count(): number;\n    clear(): void;\n    hasItems(): boolean;\n    getItems(predicate?: IListCachePredicate<T>): T[];\n    getItem(predicate: IListCachePredicate<T>): T | undefined;\n    addItems(items: T[]): void;\n    updateItems(updater: IListCacheItemUpdater<T>): void;\n    removeItems(predicate: IListCachePredicate<T>): void;\n}\n\nexport class ListCache<T> implements IListCache<T> {\n    private state: T[];\n\n    constructor() {\n        this.state = [];\n\n        makeAutoObservable(this);\n    }\n\n    count() {\n        return this.state.length;\n    }\n\n    clear() {\n        runInAction(() => {\n            this.state = [];\n        });\n    }\n\n    hasItems() {\n        return this.state.length > 0;\n    }\n\n    getItems(predicate?: IListCachePredicate<T>): T[] {\n        if (predicate) {\n            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];\n        }\n\n        return [...this.state.map(item => toJS(item))];\n    }\n\n    getItem(predicate: IListCachePredicate<T>): T | undefined {\n        const item = this.state.find(item => predicate(item));\n\n        return item ? toJS(item) : undefined;\n    }\n\n    addItems(items: T[]) {\n        runInAction(() => {\n            this.state = [...this.state, ...items];\n        });\n    }\n\n    updateItems(updater: IListCacheItemUpdater<T>) {\n        runInAction(() => {\n            this.state = [...this.state.map(item => updater(item))];\n        });\n    }\n\n    removeItems(predicate: IListCachePredicate<T>) {\n        runInAction(() => {\n            this.state = this.state.filter(item => !predicate(item));\n        });\n    }\n}\n"],"names":["ListCache","makeAutoObservable","runInAction","predicate","item","toJS","undefined","items","updater"],"mappings":";AAuBO,MAAMA;IAGT,aAAc;QACV,IAAI,CAAC,KAAK,GAAG,EAAE;QAEfC,mBAAmB,IAAI;IAC3B;IAEA,QAAQ;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM;IAC5B;IAEA,QAAQ;QACJC,YAAY;YACR,IAAI,CAAC,KAAK,GAAG,EAAE;QACnB;IACJ;IAEA,WAAW;QACP,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG;IAC/B;IAEA,SAASC,SAAkC,EAAO;QAC9C,IAAIA,WACA,OAAO;eAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OAAQD,UAAUC,OAAO,GAAG,CAACA,CAAAA,OAAQC,KAAKD;SAAO;QAGlF,OAAO;eAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAQC,KAAKD;SAAO;IAClD;IAEA,QAAQD,SAAiC,EAAiB;QACtD,MAAMC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAACA,CAAAA,OAAQD,UAAUC;QAE/C,OAAOA,OAAOC,KAAKD,QAAQE;IAC/B;IAEA,SAASC,KAAU,EAAE;QACjBL,YAAY;YACR,IAAI,CAAC,KAAK,GAAG;mBAAI,IAAI,CAAC,KAAK;mBAAKK;aAAM;QAC1C;IACJ;IAEA,YAAYC,OAAiC,EAAE;QAC3CN,YAAY;YACR,IAAI,CAAC,KAAK,GAAG;mBAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAACE,CAAAA,OAAQI,QAAQJ;aAAO;QAC3D;IACJ;IAEA,YAAYD,SAAiC,EAAE;QAC3CD,YAAY;YACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAACE,CAAAA,OAAQ,CAACD,UAAUC;QACtD;IACJ;AACJ"}

package/AutoComplete/domains/index.js

@@ -1,3 +1 @@
 export * from "./ListCache.js";
-
-//# sourceMappingURL=index.js.map

package/AutoComplete/index.js

@@ -1,4 +1,2 @@
 export * from "./AutoComplete.js";
 export * from "./primitives/index.js";
-
-//# sourceMappingURL=index.js.map