@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Loader/OverlayLoader.stories.js

@@ -1,71 +1,84 @@
-import React from "react";
+import react from "react";
 import { OverlayLoader } from "./OverlayLoader.js";
 const meta = {
-  title: "Components/Overlay Loader",
-  component: OverlayLoader,
-  parameters: {
-    layout: "padded"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Story, null), "The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.")]
-};
-export default meta;
-export const Documentation = {
-  args: {
-    size: "lg",
-    variant: "accent",
-    indeterminate: true,
-    value: 66,
-    min: 0,
-    max: 100,
-    text: "Loading...",
-    className: undefined
-  },
-  argTypes: {
-    size: {
-      description: "Size of the loader",
-      control: "select",
-      options: ["xs", "sm", "md", "lg"]
-    },
-    variant: {
-      description: "Visual style variant of the loader",
-      control: "select",
-      options: ["accent", "subtle", "negative"]
+    title: "Components/Overlay Loader",
+    component: OverlayLoader,
+    parameters: {
+        layout: "padded"
     },
-    indeterminate: {
-      description: "Whether the loader should show indeterminate progress",
-      control: "boolean"
-    },
-    value: {
-      description: "Current progress value (when not indeterminate)",
-      control: {
-        type: "number",
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Story, null), "The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.")
+    ]
+};
+const OverlayLoader_stories = meta;
+const Documentation = {
+    args: {
+        size: "lg",
+        variant: "accent",
+        indeterminate: true,
+        value: 66,
         min: 0,
-        max: 100
-      }
+        max: 100,
+        text: "Loading...",
+        className: void 0
     },
-    min: {
-      description: "Minimum value for progress calculation",
-      control: "number"
-    },
-    max: {
-      description: "Maximum value for progress calculation",
-      control: "number"
-    },
-    text: {
-      description: "Optional text to display below the loader",
-      control: "text"
-    },
-    className: {
-      description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces."
+    argTypes: {
+        size: {
+            description: "Size of the loader",
+            control: "select",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg"
+            ]
+        },
+        variant: {
+            description: "Visual style variant of the loader",
+            control: "select",
+            options: [
+                "accent",
+                "subtle",
+                "negative"
+            ]
+        },
+        indeterminate: {
+            description: "Whether the loader should show indeterminate progress",
+            control: "boolean"
+        },
+        value: {
+            description: "Current progress value (when not indeterminate)",
+            control: {
+                type: "number",
+                min: 0,
+                max: 100
+            }
+        },
+        min: {
+            description: "Minimum value for progress calculation",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for progress calculation",
+            control: "number"
+        },
+        text: {
+            description: "Optional text to display below the loader",
+            control: "text"
+        },
+        className: {
+            description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces."
+        }
     }
-  }
 };
-export const Default = {};
-export const CircularProgressWithText = {
-  name: "With text",
-  args: {
-    text: "Loading..."
-  }
+const Default = {};
+const CircularProgressWithText = {
+    name: "With text",
+    args: {
+        text: "Loading..."
+    }
 };
+export default OverlayLoader_stories;
+export { CircularProgressWithText, Default, Documentation };
 
 //# sourceMappingURL=OverlayLoader.stories.js.map

package/Loader/OverlayLoader.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","OverlayLoader","meta","title","component","parameters","layout","decorators","Story","createElement","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","CircularProgressWithText","name"],"sources":["OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { OverlayLoader } from \"./OverlayLoader.js\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AAEtB,MAAMC,IAAgC,GAAG;EACrCC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAEH,aAAa;EACxBI,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDR,KAAA,CAAAS,aAAA,2BACIT,KAAA,CAAAS,aAAA,CAACD,KAAK,MAAE,CAAC,kMAIR,CACR;AAET,CAAC;AAED,eAAeN,IAAI;AAGnB,OAAO,MAAMQ,aAAoB,GAAG;EAChCC,IAAI,EAAE;IACFC,IAAI,EAAE,IAAI;IACVC,OAAO,EAAE,QAAQ;IACjBC,aAAa,EAAE,IAAI;IACnBC,KAAK,EAAE,EAAE;IACTC,GAAG,EAAE,CAAC;IACNC,GAAG,EAAE,GAAG;IACRC,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAEC;EACf,CAAC;EACDC,QAAQ,EAAE;IACNT,IAAI,EAAE;MACFU,WAAW,EAAE,oBAAoB;MACjCC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACpC,CAAC;IACDX,OAAO,EAAE;MACLS,WAAW,EAAE,oCAAoC;MACjDC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU;IAC5C,CAAC;IACDV,aAAa,EAAE;MACXQ,WAAW,EAAE,uDAAuD;MACpEC,OAAO,EAAE;IACb,CAAC;IACDR,KAAK,EAAE;MACHO,WAAW,EAAE,iDAAiD;MAC9DC,OAAO,EAAE;QAAEE,IAAI,EAAE,QAAQ;QAAET,GAAG,EAAE,CAAC;QAAEC,GAAG,EAAE;MAAI;IAChD,CAAC;IACDD,GAAG,EAAE;MACDM,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDN,GAAG,EAAE;MACDK,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDL,IAAI,EAAE;MACFI,WAAW,EAAE,2CAA2C;MACxDC,OAAO,EAAE;IACb,CAAC;IACDJ,SAAS,EAAE;MACPG,WAAW,EACP;IACR;EACJ;AACJ,CAAC;AAED,OAAO,MAAMI,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,wBAA+B,GAAG;EAC3CC,IAAI,EAAE,WAAW;EACjBjB,IAAI,EAAE;IACFO,IAAI,EAAE;EACV;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Loader/OverlayLoader.stories.js","sources":["../../src/Loader/OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { OverlayLoader } from \"./OverlayLoader.js\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"names":["meta","OverlayLoader","Story","Documentation","undefined","Default","CircularProgressWithText"],"mappings":";;AAIA,MAAMA,OAAmC;IACrC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC,2BACG,oBAACA,OAAAA,OAAQ;KAMpB;AACL;AAEA,8BAAeF;AAGR,MAAMG,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,eAAe;QACf,OAAO;QACP,KAAK;QACL,KAAK;QACL,MAAM;QACN,WAAWC;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;aAAW;QAC7C;QACA,eAAe;YACX,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ;AAEO,MAAMC,UAAiB,CAAC;AAExB,MAAMC,2BAAkC;IAC3C,MAAM;IACN,MAAM;QACF,MAAM;IACV;AACJ"}

package/Loader/index.js

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

package/MultiAutoComplete/MultiAutoComplete.js

@@ -1,56 +1,43 @@
-import React, { useMemo, useState, useEffect, useRef } from "react";
+import react, { useEffect, useMemo, useRef, useState } from "react";
 import { makeDecoratable } from "../utils.js";
 import { MultiAutoCompletePrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableMultiAutoComplete = ({
-  label,
-  description,
-  note,
-  hint,
-  required,
-  disabled,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-
-  // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>
-  const inputRef = useRef(null);
-  const [inputId, setInputId] = useState();
-  useEffect(() => {
-    if (inputRef.current?.id) {
-      setInputId(inputRef.current.id);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    hint: hint,
-    required: required,
-    disabled: disabled,
-    invalid: invalid,
-    htmlFor: inputId
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(MultiAutoCompletePrimitive, Object.assign({}, props, {
-    inputRef: inputRef,
-    label: label,
-    disabled: disabled,
-    invalid: invalid
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableMultiAutoComplete = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    const inputRef = useRef(null);
+    const [inputId, setInputId] = useState();
+    useEffect(()=>{
+        if (inputRef.current?.id) setInputId(inputRef.current.id);
+    }, []);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid,
+        htmlFor: inputId
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(MultiAutoCompletePrimitive, {
+        ...props,
+        inputRef: inputRef,
+        label: label,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const MultiAutoComplete = makeDecoratable("MultiAutoComplete", DecoratableMultiAutoComplete);
 export { MultiAutoComplete };

package/MultiAutoComplete/MultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","MultiAutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableMultiAutoComplete","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","MultiAutoComplete"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { MultiAutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: MultiAutoCompleteProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const [inputId, setInputId] = useState<string>();\n\n    useEffect(() => {\n        if (inputRef.current?.id) {\n            setInputId(inputRef.current.id);\n        }\n    }, []);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <MultiAutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                label={label}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst MultiAutoComplete = makeDecoratable(\"MultiAutoComplete\", DecoratableMultiAutoComplete);\n\nexport { MultiAutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,0BAA0B;AAEnC,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACiB,CAAC,KAAK;EAC1B,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGvB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGrB,MAAM,CAA0B,IAAI,CAAC;EACtD,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGzB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIsB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI7B,KAAA,CAAA8B,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrB/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB;IACfuB,IAAI,EAAEpB,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IAACyB,IAAI,EAAEnB,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEjB,KAAA,CAAA8B,aAAA,CAACxB,0BAA0B,EAAA4B,MAAA,CAAAC,MAAA,KACnBhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBb,KAAK,EAAEA,KAAM;IACbK,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFxB,KAAA,CAAA8B,aAAA,CAACtB,yBAAyB;IACtBwB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFjB,KAAA,CAAA8B,aAAA,CAACpB,iBAAiB;IAACsB,IAAI,EAAElB,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,iBAAiB,GAAG/B,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASyB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"MultiAutoComplete/MultiAutoComplete.js","sources":["../../src/MultiAutoComplete/MultiAutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { MultiAutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: MultiAutoCompleteProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const [inputId, setInputId] = useState<string>();\n\n    useEffect(() => {\n        if (inputRef.current?.id) {\n            setInputId(inputRef.current.id);\n        }\n    }, []);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <MultiAutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                label={label}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst MultiAutoComplete = makeDecoratable(\"MultiAutoComplete\", DecoratableMultiAutoComplete);\n\nexport { MultiAutoComplete };\n"],"names":["DecoratableMultiAutoComplete","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","inputRef","useRef","inputId","setInputId","useState","useEffect","FormComponentLabel","FormComponentDescription","MultiAutoCompletePrimitive","FormComponentErrorMessage","FormComponentNote","MultiAutoComplete","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,+BAA+B,CAAC,EAClCC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACkB;IACrB,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAG9E,MAAMI,WAAWC,OAAgC;IACjD,MAAM,CAACC,SAASC,WAAW,GAAGC;IAE9BC,UAAU;QACN,IAAIL,SAAS,OAAO,EAAE,IAClBG,WAAWH,SAAS,OAAO,CAAC,EAAE;IAEtC,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,oBAAkBA;QACf,MAAMlB;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;QACT,SAASI;sBAEb,oBAACK,0BAAwBA;QAAC,MAAMlB;QAAa,UAAUI;sBACvD,oBAACe,4BAA0BA;QACtB,GAAGb,KAAK;QACT,UAAUK;QACV,OAAOZ;QACP,UAAUK;QACV,SAASK;sBAEb,oBAACW,2BAAyBA;QACtB,MAAMZ;QACN,SAASC;QACT,UAAUL;sBAEd,oBAACiB,mBAAiBA;QAAC,MAAMpB;QAAM,UAAUG;;AAGrD;AAEA,MAAMkB,oBAAoBC,gBAAgB,qBAAqBzB"}

package/MultiAutoComplete/MultiAutoComplete.stories.js

@@ -1,180 +1,202 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { MultiAutoComplete } from "./MultiAutoComplete.js";
 const meta = {
-  title: "Components/Form/Multi AutoComplete",
-  component: MultiAutoComplete,
-  argTypes: {
-    onValuesChange: {
-      action: "onValuesChange"
+    title: "Components/Form/Multi AutoComplete",
+    component: MultiAutoComplete,
+    argTypes: {
+        onValuesChange: {
+            action: "onValuesChange"
+        },
+        onOpenChange: {
+            action: "onOpenChange"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    onOpenChange: {
-      action: "onOpenChange"
+    parameters: {
+        layout: "padded"
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    render: (args)=>{
+        const [values, setValues] = useState(args.values);
+        return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+            ...args,
+            values: values,
+            onValuesChange: setValues
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [values, setValues] = useState(args.values);
-    return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, args, {
-      values: values,
-      onValuesChange: setValues
-    }));
-  }
 };
-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 MultiAutoComplete_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 Documentation = {
-  render: args => {
-    const [values, setValues] = useState(args.values || []);
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update validation when values change
-    useEffect(() => {
-      if (args.required && (!values || values.length === 0)) {
-        setValidation({
-          isValid: false,
-          message: "Please select at least one option"
+const Documentation = {
+    render: (args)=>{
+        const [values, setValues] = useState(args.values || []);
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+        useEffect(()=>{
+            args.required && (!values || 0 === values.length) ? setValidation({
+                isValid: false,
+                message: "Please select at least one option"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            values,
+            args.required
+        ]);
+        return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+            ...args,
+            values: values,
+            onValuesChange: setValues,
+            validation: validation
         });
-      }
-    }, [values, args.required]);
-    return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, args, {
-      values: values,
-      onValuesChange: setValues,
-      validation: validation
-    }));
-  },
-  args: {
-    label: "Time Zones",
-    description: "Select one or more time zones",
-    placeholder: "Search or select time zones",
-    required: true,
-    allowFreeInput: true,
-    note: "You can add custom time zones if needed",
-    options: ["Eastern Standard Time (EST)", "Central Standard Time (CST)", "Pacific Standard Time (PST)", "Greenwich Mean Time (GMT)"],
-    values: [],
-    onValuesChange: undefined,
-    disabled: false,
-    validation: undefined,
-    onOpenChange: undefined
-  },
-  argTypes: {
-    label: {
-      description: "Label text for the component",
-      control: "text"
-    },
-    description: {
-      description: "Additional description text displayed below the label",
-      control: "text"
-    },
-    placeholder: {
-      description: "Placeholder text for the input",
-      control: "text"
-    },
-    required: {
-      description: "Marks the field as required when true",
-      control: "boolean"
-    },
-    disabled: {
-      description: "Disables the component when set to true",
-      control: "boolean"
-    },
-    allowFreeInput: {
-      description: "Allows users to add custom values not in the options list",
-      control: "boolean"
-    },
-    note: {
-      description: "Additional note text displayed below the component",
-      control: "text"
-    },
-    options: {
-      description: "Array of options to display in the dropdown",
-      control: "object"
-    },
-    values: {
-      description: "Array of currently selected values",
-      control: "object"
-    },
-    onValuesChange: {
-      description: "Callback fired when selected values change"
     },
-    validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage."
+    args: {
+        label: "Time Zones",
+        description: "Select one or more time zones",
+        placeholder: "Search or select time zones",
+        required: true,
+        allowFreeInput: true,
+        note: "You can add custom time zones if needed",
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        values: [],
+        onValuesChange: void 0,
+        disabled: false,
+        validation: void 0,
+        onOpenChange: void 0
     },
-    onOpenChange: {
-      description: "Callback triggered when the dropdown opens or closes, allowing you to respond to changes in its open state."
+    argTypes: {
+        label: {
+            description: "Label text for the component",
+            control: "text"
+        },
+        description: {
+            description: "Additional description text displayed below the label",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text for the input",
+            control: "text"
+        },
+        required: {
+            description: "Marks the field as required when true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the component when set to true",
+            control: "boolean"
+        },
+        allowFreeInput: {
+            description: "Allows users to add custom values not in the options list",
+            control: "boolean"
+        },
+        note: {
+            description: "Additional note text displayed below the component",
+            control: "text"
+        },
+        options: {
+            description: "Array of options to display in the dropdown",
+            control: "object"
+        },
+        values: {
+            description: "Array of currently selected values",
+            control: "object"
+        },
+        onValuesChange: {
+            description: "Callback fired when selected values change"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onOpenChange: {
+            description: "Callback triggered when the dropdown opens or closes, allowing you to respond to changes in its open state."
+        }
     }
-  }
 };
+export default MultiAutoComplete_stories;
+export { Default, Disabled, Documentation, FullExample, WithDescription, WithErrors, WithLabel, WithNotes, WithRequiredLabel };
 
 //# sourceMappingURL=MultiAutoComplete.stories.js.map