@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/AutoComplete/AutoComplete.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as AutoCompleteStories from './AutoComplete.stories';
+import * as AutoCompleteStories from "./AutoComplete.stories";
 
 <Meta of={AutoCompleteStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { AutoComplete } from "@webiny/admin-ui";
 
 const TimezoneSelector = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleValueChange = (newValue: string) => {
         setValue(newValue);
@@ -47,63 +47,64 @@ const TimezoneSelector = () => {
             validation={validation}
         />
     );
+
 };
 
 export default TimezoneSelector;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={AutoCompleteStories.Documentation}/>
+<Controls of={AutoCompleteStories.Documentation} />
 
 ```tsx
 import React, { useState } from "react";
 import { AutoComplete } from "@webiny/admin-ui";
 
 const TimezoneSelector = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValueChange = (newValue: string) => {
-        setValue(newValue);
-
-        if (!newValue) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    const timezones = [
-        "Eastern Standard Time (EST)",
-        "Central Standard Time (CST)",
-        "Pacific Standard Time (PST)",
-        "Greenwich Mean Time (GMT)"
-    ];
-
-    return (
-        <AutoComplete
-            label="Time Zone"
-            required={true}
-            description="Select your timezone from the list"
-            placeholder="Select timezone..."
-            options={timezones}
-            value={value}
-            onValueChange={handleValueChange}
-            validation={validation}
-        />
-    );
+  const [value, setValue] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+
+    if (!newValue) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  const timezones = [
+    "Eastern Standard Time (EST)",
+    "Central Standard Time (CST)",
+    "Pacific Standard Time (PST)",
+    "Greenwich Mean Time (GMT)"
+  ];
+
+  return (
+    <AutoComplete
+      label="Time Zone"
+      required={true}
+      description="Select your timezone from the list"
+      placeholder="Select timezone..."
+      options={timezones}
+      value={value}
+      onValueChange={handleValueChange}
+      validation={validation}
+    />
+  );
 };
 
 export default TimezoneSelector;
@@ -112,24 +113,31 @@ export default TimezoneSelector;
 ## Anatomy
 
 ### Input Anatomy
-<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy"/>
+
+<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy" />
 
 ### Style
-<img src="/images/storybook/autocomplete/style.png" alt="Style"/>
+
+<img src="/images/storybook/autocomplete/style.png" alt="Style" />
 
 ### Option
-<img src="/images/storybook/autocomplete/option.png" alt="Option"/>
+
+<img src="/images/storybook/autocomplete/option.png" alt="Option" />
 
 ### States and Styles
-<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles"/>
+
+<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles" />
 
 ### Label Anatomy
-<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy"/>
+
+<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy" />
 
 ### Label Properties
-<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties"/>
+
+<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties" />
 
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>
+
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms" />

package/AutoComplete/AutoComplete.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AutoComplete } from "./AutoComplete";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { AutoComplete } from "./AutoComplete.js";
 declare const meta: Meta<typeof AutoComplete>;
 export default meta;
 type Story = StoryObj<typeof AutoComplete>;

package/AutoComplete/AutoComplete.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { AutoComplete } from "./AutoComplete";
+import { AutoComplete } from "./AutoComplete.js";
 const meta = {
   title: "Components/Form/AutoComplete",
   component: AutoComplete,
@@ -173,8 +173,7 @@ export const Documentation = {
       description: "Object containing validation state and message"
     },
     onValueChange: {
-      description: "Function called when the selected value changes",
-      control: "none"
+      description: "Function called when the selected value changes"
     }
   }
 };

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\";\nimport { AutoComplete } from \"./AutoComplete\";\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            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"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":[]}

package/AutoComplete/domains/AutoCompleteOption.d.ts

@@ -1,2 +1,2 @@
-import type { AutoCompleteOptionDto } from "./AutoCompleteOptionDto";
+import type { AutoCompleteOptionDto } from "./AutoCompleteOptionDto.js";
 export type AutoCompleteOption = AutoCompleteOptionDto | string;

package/AutoComplete/domains/AutoCompleteOption.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["AutoCompleteOption.ts"],"sourcesContent":["import type { AutoCompleteOptionDto } from \"./AutoCompleteOptionDto\";\n\nexport type AutoCompleteOption = AutoCompleteOptionDto | string;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["AutoCompleteOption.ts"],"sourcesContent":["import type { AutoCompleteOptionDto } from \"./AutoCompleteOptionDto.js\";\n\nexport type AutoCompleteOption = AutoCompleteOptionDto | string;\n"],"mappings":"","ignoreList":[]}

package/AutoComplete/domains/AutoCompleteOptionDto.d.ts

@@ -1,2 +1,2 @@
-import type { CommandOptionDto } from "../../Command";
+import type { CommandOptionDto } from "../../Command/index.js";
 export type AutoCompleteOptionDto = CommandOptionDto;

package/AutoComplete/domains/AutoCompleteOptionDto.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["AutoCompleteOptionDto.ts"],"sourcesContent":["import type { CommandOptionDto } from \"~/Command\";\n\nexport type AutoCompleteOptionDto = CommandOptionDto;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["AutoCompleteOptionDto.ts"],"sourcesContent":["import type { CommandOptionDto } from \"~/Command/index.js\";\n\nexport type AutoCompleteOptionDto = CommandOptionDto;\n"],"mappings":"","ignoreList":[]}

package/AutoComplete/domains/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./AutoCompleteOption";
-export * from "./AutoCompleteOptionDto";
-export * from "./ListCache";
+export type * from "./AutoCompleteOption.js";
+export type * from "./AutoCompleteOptionDto.js";
+export * from "./ListCache.js";

package/AutoComplete/domains/index.js

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

package/AutoComplete/domains/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./AutoCompleteOption\";\nexport * from \"./AutoCompleteOptionDto\";\nexport * from \"./ListCache\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export type * from \"./AutoCompleteOption.js\";\nexport type * from \"./AutoCompleteOptionDto.js\";\nexport * from \"./ListCache.js\";\n"],"mappings":"AAEA","ignoreList":[]}

package/AutoComplete/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./AutoComplete";
-export * from "./primitives";
+export * from "./AutoComplete.js";
+export * from "./primitives/index.js";

package/AutoComplete/index.js

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

package/AutoComplete/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./AutoComplete\";\nexport * from \"./primitives\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./AutoComplete.js\";\nexport * from \"./primitives/index.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/AutoComplete/primitives/AutoCompletePrimitive.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import type { InputPrimitiveProps } from "../../Input";
-import type { AutoCompleteOption } from "../domains";
-import type { Icon } from "../../Icon";
+import type { InputPrimitiveProps } from "../../Input/index.js";
+import type { AutoCompleteOption } from "../domains/index.js";
+import type { Icon } from "../../Icon/index.js";
 interface AutoCompletePrimitiveProps {
     /**
      * Indicates if the reset action should be displayed.
@@ -101,7 +101,7 @@ declare const AutoCompletePrimitive: ((props: AutoCompletePrimitiveProps) => Rea
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: AutoCompletePrimitiveProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AutoCompletePrimitiveProps) => React.JSX.Element) & {
         original: (props: AutoCompletePrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/AutoComplete/primitives/AutoCompletePrimitive.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { Command } from "../../Command";
-import { PopoverPrimitive } from "../../Popover";
-import { useAutoComplete } from "./useAutoComplete";
-import { AutoCompleteInputIcons, AutoCompleteList } from "./components";
-import { makeDecoratable } from "../../utils";
+import { Command } from "../../Command/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { useAutoComplete } from "./useAutoComplete.js";
+import { AutoCompleteInputIcons, AutoCompleteList } from "./components/index.js";
+import { makeDecoratable } from "../../utils.js";
 const DecoratableAutoCompletePrimitive = props => {
   const {
     vm,
@@ -62,7 +62,7 @@ const DecoratableAutoCompletePrimitive = props => {
     onFocus: () => setListOpenState(true)
   }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
     style: {
-      width: "var(--radix-popover-trigger-width)"
+      minWidth: "var(--radix-popover-trigger-width)"
     },
     onOpenAutoFocus: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement(AutoCompleteList, {

package/AutoComplete/primitives/AutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","PopoverPrimitive","useAutoComplete","AutoCompleteInputIcons","AutoCompleteList","makeDecoratable","DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","handleKeyDown","useCallback","event","disabled","key","toLowerCase","handleSelectOption","value","handleOnBlur","createElement","open","optionsListVm","onOpenChange","label","String","onKeyDown","Trigger","asChild","Input","inputRef","inputVm","onValueChange","placeholder","size","variant","invalid","startIcon","endIcon","inputSize","inputVariant","displayResetAction","loading","onResetValue","onBlur","onFocus","Content","style","width","onOpenAutoFocus","e","preventDefault","options","onOptionSelect","empty","loadingMessage","emptyMessage","optionRenderer","AutoCompletePrimitive"],"sources":["AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport type { InputPrimitiveProps } from \"~/Input\";\nimport { useAutoComplete } from \"./useAutoComplete\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components\";\nimport type { AutoCompleteOption } from \"../domains\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { Icon } from \"~/Icon\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Command","PopoverPrimitive","useAutoComplete","AutoCompleteInputIcons","AutoCompleteList","makeDecoratable","DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","handleKeyDown","useCallback","event","disabled","key","toLowerCase","handleSelectOption","value","handleOnBlur","createElement","open","optionsListVm","onOpenChange","label","String","onKeyDown","Trigger","asChild","Input","inputRef","inputVm","onValueChange","placeholder","size","variant","invalid","startIcon","endIcon","inputSize","inputVariant","displayResetAction","loading","onResetValue","onBlur","onFocus","Content","style","minWidth","onOpenAutoFocus","e","preventDefault","options","onOptionSelect","empty","loadingMessage","emptyMessage","optionRenderer","AutoCompletePrimitive"],"sources":["AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { useAutoComplete } from \"./useAutoComplete.js\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components/index.js\";\nimport type { AutoCompleteOption } from \"../domains/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ minWidth: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/AutoComplete/primitives/AutoCompletePrimitive.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AutoCompletePrimitive } from "./AutoCompletePrimitive";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { AutoCompletePrimitive } from "./AutoCompletePrimitive.js";
 declare const meta: Meta<typeof AutoCompletePrimitive>;
 export default meta;
 type Story = StoryObj<typeof AutoCompletePrimitive>;

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
-import { AutoCompletePrimitive } from "./AutoCompletePrimitive";
-import { Button } from "../../Button";
-import { Icon } from "../../Icon";
+import { AutoCompletePrimitive } from "./AutoCompletePrimitive.js";
+import { Button } from "../../Button/index.js";
+import { Icon } from "../../Icon/index.js";
 const meta = {
   title: "Components/Form Primitives/Autocomplete",
   component: AutoCompletePrimitive,
@@ -20,12 +20,12 @@ const meta = {
   render: args => {
     const [value, setValue] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, args, {
       value: value,
       onValueChange: setValue
     })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
   }
 };
@@ -137,7 +137,7 @@ export const GhostNegativeVariant = {
     placeholder: "Custom placeholder"
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantDisabled = {
@@ -146,7 +146,7 @@ export const GhostNegativeVariantDisabled = {
     disabled: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantInvalid = {
@@ -155,7 +155,7 @@ export const GhostNegativeVariantInvalid = {
     invalid: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+    className: "bg-neutral-dark text-neutral-light p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithPredefinedValue = {
@@ -360,11 +360,11 @@ export const WithCustomOptionRenderer = {
     }],
     optionRenderer: item => {
       return /*#__PURE__*/React.createElement("div", {
-        className: "wby-w-full wby-flex wby-justify-between wby-align-middle"
+        className: "w-full flex justify-between align-middle"
       }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-        className: "wby-mr-sm"
+        className: "mr-sm"
       }, item.flag), item.name), /*#__PURE__*/React.createElement("div", {
-        className: "wby-text-sm"
+        className: "text-sm"
       }, item.time_difference));
     }
   }
@@ -530,17 +530,17 @@ export const WithExternalValueControl = {
   render: args => {
     const [value, setValue] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, args, {
       value: value,
       onValueChange: value => setValue(value)
     }))), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, /*#__PURE__*/React.createElement(Button, {
       text: "Reset",
       onClick: () => setValue("")
     })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
   }
 };