@webiny/admin-ui 6.0.0-alpha.0 → 6.0.0-alpha.1

package/List/components/ListItemAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { IconButton, IconButtonProps as IconButtonProps } from \"~/Button\";\nimport { ListItemSeparator } from \"./ListItemSeparator\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n    makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n    {\n        Separator: ListItemSeparator\n    }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport type { IconButtonProps as IconButtonProps } from \"~/Button\";\nimport { IconButton } from \"~/Button\";\nimport { ListItemSeparator } from \"./ListItemSeparator\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n    makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n    {\n        Separator: ListItemSeparator\n    }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}

package/List/components/ListItemHandle.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconProps as IconProps } from "../../Icon";
+import type { IconProps as IconProps } from "../../Icon";
 interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
     label?: string;

package/List/components/ListItemHandle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport { Icon, IconProps as IconProps } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"wby-mx-xxs wby-cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AACxB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconProps } from \"~/Icon\";\nimport { Icon } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"wby-mx-xxs wby-cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}

package/List/components/ListItemIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconProps as IconComponentProps } from "../../Icon";
+import type { IconProps as IconComponentProps } from "../../Icon";
 type ListItemIconProps = IconComponentProps;
 export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Element) & {
     original: (props: ListItemIconProps) => React.JSX.Element;

package/List/components/ListItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { Icon as IconComponent, IconProps as IconComponentProps } from \"~/Icon\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconComponentProps } from \"~/Icon\";\nimport { Icon as IconComponent } from \"~/Icon\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}

package/Loader/OverlayLoader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { LoaderProps } from "./Loader";
+import type { LoaderProps } from "./Loader";
 type OverlayLoaderProps = LoaderProps;
 declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
     original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;

package/Loader/OverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Loader, LoaderProps } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n                className\n            )}\n        >\n            <Loader {...props} size={size} />\n        </div>\n    );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LoaderProps } from \"./Loader\";\nimport { Loader } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n                className\n            )}\n        >\n            <Loader {...props} size={size} />\n        </div>\n    );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}

package/MultiAutoComplete/MultiAutoComplete.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { MultiAutoCompletePrimitiveProps } from "./primitives";
-import { FormComponentProps } from "../FormComponent";
+import type { MultiAutoCompletePrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
 type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
 declare const MultiAutoComplete: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
     original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;

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","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\";\nimport { MultiAutoCompletePrimitive, MultiAutoCompletePrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\n} from \"~/FormComponent\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n    label,\n    description,\n    note,\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);\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={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\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;AACxB,SAASC,0BAA0B;AACnC,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,KAAK;EACLC,WAAW;EACXC,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,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,0BAA0B,EAAA2B,MAAA,CAAAC,MAAA,KACnBhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBZ,KAAK,EAAEA,KAAM;IACbI,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,iBAAiB,GAAG9B,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASwB,iBAAiB","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","MultiAutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableMultiAutoComplete","label","description","note","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\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./primitives\";\nimport { MultiAutoCompletePrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableMultiAutoComplete = ({\n    label,\n    description,\n    note,\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);\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={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\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,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,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,0BAA0B,EAAA2B,MAAA,CAAAC,MAAA,KACnBhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBZ,KAAK,EAAEA,KAAM;IACbI,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,iBAAiB,GAAG9B,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASwB,iBAAiB","ignoreList":[]}

package/MultiAutoComplete/domains/MultiAutoCompleteOption.d.ts

@@ -1,2 +1,2 @@
-import { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
+import type { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
 export type MultiAutoCompleteOption = MultiAutoCompleteOptionDto | string;

package/MultiAutoComplete/domains/MultiAutoCompleteOption.js.map

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

package/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.d.ts

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

package/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.js.map

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

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { InputPrimitiveProps } from "../../Input";
-import { MultiAutoCompleteOption } from "../domains";
-import { Icon } from "../../Icon";
+import type { InputPrimitiveProps } from "../../Input";
+import type { MultiAutoCompleteOption } from "../domains";
+import type { Icon } from "../../Icon";
 interface MultiAutoCompletePrimitiveProps {
     /**
      * Allows free input of values not present in the options.

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js

@@ -58,6 +58,7 @@ const DecoratableMultiAutoCompletePrimitive = props => {
     startIcon: props.startIcon,
     endIcon: /*#__PURE__*/React.createElement(MultiAutoCompleteInputIcons, {
       inputSize: props.size,
+      inputVariant: props.variant,
       displayResetAction: !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction,
       disabled: props.disabled,
       loading: props.loading,

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Command","PopoverPrimitive","makeDecoratable","useMultiAutoComplete","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","MultiAutoCompleteList","DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","handleKeyDown","useCallback","event","disabled","optionsListVm","open","key","toLowerCase","handleSelectOption","value","handleCreateOption","createElement","onOpenChange","label","String","onKeyDown","Trigger","asChild","inputRef","inputVm","placeholder","changeValue","closeList","openList","variant","size","invalid","selectedOptionRenderer","selectedOptions","selectedOptionsVm","options","startIcon","endIcon","inputSize","displayResetAction","empty","loading","onResetValue","Content","style","width","onOpenAutoFocus","e","preventDefault","emptyMessage","loadingMessage","onOptionCreate","onOptionSelect","optionRenderer","temporaryOption","temporaryOptionVm","option","MultiAutoCompletePrimitive"],"sources":["MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import React, { KeyboardEvent } from \"react\";\nimport { Command } from \"~/Command\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport { InputPrimitiveProps } from \"~/Input\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components\";\nimport { MultiAutoCompleteOption } from \"../domains\";\nimport { Icon } from \"~/Icon\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\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     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\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     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\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 when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\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     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\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                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Command","PopoverPrimitive","makeDecoratable","useMultiAutoComplete","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","MultiAutoCompleteList","DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","handleKeyDown","useCallback","event","disabled","optionsListVm","open","key","toLowerCase","handleSelectOption","value","handleCreateOption","createElement","onOpenChange","label","String","onKeyDown","Trigger","asChild","inputRef","inputVm","placeholder","changeValue","closeList","openList","variant","size","invalid","selectedOptionRenderer","selectedOptions","selectedOptionsVm","options","startIcon","endIcon","inputSize","inputVariant","displayResetAction","empty","loading","onResetValue","Content","style","width","onOpenAutoFocus","e","preventDefault","emptyMessage","loadingMessage","onOptionCreate","onOptionSelect","optionRenderer","temporaryOption","temporaryOptionVm","option","MultiAutoCompletePrimitive"],"sources":["MultiAutoCompletePrimitive.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 { makeDecoratable } from \"~/utils\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components\";\nimport type { MultiAutoCompleteOption } from \"../domains\";\nimport type { Icon } from \"~/Icon\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\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     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\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     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\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 when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\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     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\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                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.d.ts

@@ -19,6 +19,9 @@ export declare const SecondaryVariantInvalid: Story;
 export declare const GhostVariant: Story;
 export declare const GhostVariantDisabled: Story;
 export declare const GhostVariantInvalid: Story;
+export declare const GhostNegativeVariant: Story;
+export declare const GhostNegativeVariantDisabled: Story;
+export declare const GhostNegativeVariantInvalid: Story;
 export declare const WithPredefinedValue: Story;
 export declare const WithCustomPlaceholder: Story;
 export declare const WithCustomEmptyMessage: Story;

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js

@@ -32,7 +32,7 @@ const meta = {
       onValuesChange: setValues
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };
 export default meta;
@@ -134,10 +134,84 @@ export const GhostVariantInvalid = {
     invalid: true
   }
 };
+export const GhostNegativeVariant = {
+  args: {
+    ...Default.args,
+    variant: "ghost-negative",
+    placeholder: "Custom placeholder"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantDisabled = {
+  args: {
+    ...GhostNegativeVariant.args,
+    disabled: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantInvalid = {
+  args: {
+    ...GhostNegativeVariant.args,
+    invalid: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
 export const WithPredefinedValue = {
   args: {
     ...Default.args,
-    values: ["Eastern Standard Time (EST)"]
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est"
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst"
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst"
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat"
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst"
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt"
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }],
+    values: ["est", "ist", "brt"]
   }
 };
 export const WithCustomPlaceholder = {
@@ -403,7 +477,7 @@ export const WithCustomSelectedOptionRenderer = {
       selectedOptionRenderer: selectedOptionRenderer
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };
 export const WithSeparators = {
@@ -578,7 +652,7 @@ export const WithExternalValueControl = {
       onClick: () => setValues(args.values)
     })), /*#__PURE__*/React.createElement("div", {
       className: "wby-mt-4 wby-text-center"
-    }, "Current selected values: ", values));
+    }, "Current selected values: ", values?.join(",")));
   }
 };
 

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","SearchIcon","MultiAutoCompletePrimitive","Button","Icon","Tag","meta","title","component","parameters","layout","argTypes","onValuesChange","action","onOpenChange","disabled","control","type","render","args","values","setValues","createElement","className","Object","assign","Default","options","MediumSize","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithLoading","loading","WithoutResetAction","displayResetAction","PrimaryVariant","variant","PrimaryVariantDisabled","PrimaryVariantInvalid","invalid","SecondaryVariant","placeholder","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","emptyMessage","WithCustomInitialMessage","initialMessage","WithAllowFreeInput","allowFreeInput","WithUniqueValues","uniqueValues","value","WithFormattedOptions","WithCustomOptionRenderer","item","name","time_difference","flag","optionRenderer","WithCustomSelectedOptionRenderer","selectedOptionRenderer","content","Fragment","onDismiss","filter","WithSeparators","separator","WithDisabledOptions","WithExternalValueControl","text","onClick"],"sources":["MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive\";\nimport { Button } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\nimport { Tag } from \"~/Tag\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"wby-mt-4 wby-text-center\"}>Current selected values: {values}</div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\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 MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        values: [\"Eastern Standard Time (EST)\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"wby-w-full wby-flex wby-justify-between wby-align-middle\"}>\n                    <div>\n                        <span className={\"wby-mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"wby-text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"wby-mt-4 wby-text-center\"}>Current selected values: {values}</div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>Current selected values: {values}</div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","ReactComponent","SearchIcon","MultiAutoCompletePrimitive","Button","Icon","Tag","meta","title","component","parameters","layout","argTypes","onValuesChange","action","onOpenChange","disabled","control","type","render","args","values","setValues","createElement","className","Object","assign","join","Default","options","MediumSize","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithLoading","loading","WithoutResetAction","displayResetAction","PrimaryVariant","variant","PrimaryVariantDisabled","PrimaryVariantInvalid","invalid","SecondaryVariant","placeholder","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","value","WithCustomPlaceholder","WithCustomEmptyMessage","emptyMessage","WithCustomInitialMessage","initialMessage","WithAllowFreeInput","allowFreeInput","WithUniqueValues","uniqueValues","WithFormattedOptions","WithCustomOptionRenderer","item","name","time_difference","flag","optionRenderer","WithCustomSelectedOptionRenderer","selectedOptionRenderer","content","Fragment","onDismiss","filter","WithSeparators","separator","WithDisabledOptions","WithExternalValueControl","text","onClick"],"sources":["MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive\";\nimport { Button } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\nimport { Tag } from \"~/Tag\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\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 MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ],\n        values: [\"est\", \"ist\", \"brt\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"wby-w-full wby-flex wby-justify-between wby-align-middle\"}>\n                    <div>\n                        <span className={\"wby-mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"wby-text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"wby-w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { InputPrimitiveProps } from "../../../Input";
-import { CommandOptionFormatted } from "../../../Command";
+import type { InputPrimitiveProps } from "../../../Input";
+import type { CommandOptionFormatted } from "../../../Command";
 import { type VariantProps } from "../../../utils";
 declare const multiAutoCompleteInputVariants: (props?: ({
     disabled?: boolean | null | undefined;

package/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { getIconPosition, InputIcon, inputVariants } from "../../../Input";
+import { InputIcon, inputVariants } from "../../../Input";
 import { Command } from "../../../Command";
 import { Tag } from "../../../Tag";
 import { cn, cva } from "../../../utils";
@@ -31,7 +31,6 @@ const MultiAutoCompleteInput = ({
 }) => {
   const [focused, setFocused] = React.useState(false);
   const inputRef = React.useMemo(() => parentInputRef && typeof parentInputRef !== "function" ? parentInputRef : /*#__PURE__*/React.createRef(), [parentInputRef]);
-  const iconPosition = getIconPosition(startIcon, endIcon);
   const renderSelectedOptions = React.useCallback(options => {
     return options.map((option, index) => {
       if (selectedOptionRenderer) {
@@ -42,17 +41,16 @@ const MultiAutoCompleteInput = ({
       }
       return /*#__PURE__*/React.createElement(Tag, {
         key: `tag-${option.value}-${index}`,
-        variant: "neutral-light",
+        variant: variant === "ghost-negative" ? "neutral-xstrong" : "neutral-muted",
         content: option.label,
         onDismiss: () => removeSelectedOption(option.value)
       });
     });
-  }, [selectedOptionRenderer, removeSelectedOption]);
+  }, [selectedOptionRenderer, removeSelectedOption, variant]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: cn(inputVariants({
       variant,
       size,
-      iconPosition,
       invalid
     }), multiAutoCompleteInputVariants({
       disabled
@@ -68,14 +66,12 @@ const MultiAutoCompleteInput = ({
     "data-disabled": disabled,
     "data-focused": focused
   }), startIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    disabled: disabled,
     icon: startIcon,
-    inputSize: size,
-    position: "start"
+    inputSize: size
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-relative wby-flex wby-flex-wrap wby-gap-xs"
+    className: "wby-relative wby-flex wby-flex-wrap wby-flex-1 wby-gap-xs"
   }, renderSelectedOptions(selectedOptions), /*#__PURE__*/React.createElement(Command.Input, {
-    className: "wby-flex-1 wby-bg-transparent wby-border-none wby-outline-none",
+    className: "wby-bg-transparent wby-border-none wby-outline-none",
     value: value,
     onValueChange: changeValue,
     placeholder: placeholder,
@@ -96,10 +92,8 @@ const MultiAutoCompleteInput = ({
       }))
     })
   })), endIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    disabled: disabled,
     icon: endIcon,
-    inputSize: size,
-    position: "end"
+    inputSize: size
   }));
 };
 export { MultiAutoCompleteInput };