@webiny/admin-ui 6.2.0 → 6.3.0-beta.0

package/List/components/ListItem.d.ts

@@ -5,7 +5,7 @@ declare const listItemVariant: (props?: ({
     activated?: boolean | null | undefined;
     selected?: boolean | null | undefined;
     clickable?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof listItemVariant> {
     title: React.ReactNode;
     actions?: React.ReactNode;

package/List/components/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","Text","ListItemAction","ListItemHandle","ListItemIcon","listItemVariant","variants","disabled","true","activated","selected","clickable","DecoratableListItem","actions","children","className","description","handle","icon","colorMark","sidePadding","onClick","title","props","paddingClasses","createElement","Object","assign","tabIndex","Boolean","style","backgroundColor","size","as","ListItem","Action","Handle","Icon"],"sources":["ListItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { ListItemAction } from \"./ListItemAction.js\";\nimport { ListItemHandle } from \"./ListItemHandle.js\";\nimport { ListItemIcon } from \"./ListItemIcon.js\";\n\nconst listItemVariant = cva(\n    [\n        \"w-full flex items-center\",\n        \"group-[.list-background-base]:bg-neutral-base\",\n        \"group-[.list-background-light]:bg-neutral-light\",\n        \"group-[.list-variant-container]:rounded-lg\",\n        \"group-[.list-variant-underline]:border-b-sm group-[.list-variant-underline]:border-b-neutral-dimmed\",\n        \"hover:bg-neutral-dimmed!\",\n        \"focus-visible:outline-none focus-visible:ring-sm focus-visible:ring-inset focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            disabled: {\n                true: \"pointer-events-none opacity-50\"\n            },\n            activated: {\n                true: \"bg-neutral-light!\"\n            },\n            selected: {\n                true: \"bg-neutral-light!\"\n            },\n            clickable: {\n                true: \"cursor-pointer\"\n            }\n        }\n    }\n);\n\ninterface ListItemProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof listItemVariant> {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n    description?: React.ReactNode;\n    handle?: React.ReactNode;\n    icon?: React.ReactNode;\n    colorMark?: string;\n    sidePadding?: \"md\" | \"lg\";\n}\n\nconst DecoratableListItem = ({\n    actions,\n    children,\n    className,\n    description,\n    activated,\n    disabled,\n    selected,\n    handle,\n    icon,\n    colorMark,\n    sidePadding = \"md\",\n    onClick,\n    title,\n    ...props\n}: ListItemProps) => {\n    const paddingClasses = sidePadding === \"md\" ? \"px-md\" : \"pl-lg pr-md\";\n\n    return (\n        <div\n            {...props}\n            tabIndex={0}\n            className={cn(\n                listItemVariant({ disabled, activated, selected, clickable: Boolean(onClick) }),\n                className\n            )}\n        >\n            {handle}\n            {colorMark && (\n                <div\n                    style={{ backgroundColor: colorMark }}\n                    className={\"block w-[4px] h-[48px] rounded-lg ml-sm flex-shrink-0\"}\n                />\n            )}\n            <div\n                className={cn(\n                    \"w-full flex justify-between items-center py-sm-extra\",\n                    paddingClasses\n                )}\n            >\n                <div className={\"w-full flex items-center gap-md\"} onClick={onClick}>\n                    {icon && <div>{icon}</div>}\n                    <div className={\"flex flex-col gap-xxs grow text-left\"}>\n                        <Text\n                            size={\"md\"}\n                            as={\"div\"}\n                            className={\"font-semibold text-neutral-primary\"}\n                        >\n                            {title}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-strong\"}>\n                            {description}\n                        </Text>\n                    </div>\n                </div>\n                {actions && <div className={\"flex items-center gap-xs-plus\"}>{actions}</div>}\n            </div>\n            {children}\n        </div>\n    );\n};\n\nconst ListItem = withStaticProps(makeDecoratable(\"ListItem\", DecoratableListItem), {\n    Action: ListItemAction,\n    Handle: ListItemHandle,\n    Icon: ListItemIcon\n});\n\nexport { ListItem, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAClD,SAASC,IAAI;AACb,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,YAAY;AAErB,MAAMC,eAAe,GAAGP,GAAG,CACvB,CACI,0BAA0B,EAC1B,+CAA+C,EAC/C,iDAAiD,EACjD,4CAA4C,EAC5C,qGAAqG,EACrG,0BAA0B,EAC1B,6GAA6G,CAChH,EACD;EACIQ,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACPD,IAAI,EAAE;IACV,CAAC;IACDE,QAAQ,EAAE;MACNF,IAAI,EAAE;IACV,CAAC;IACDG,SAAS,EAAE;MACPH,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAcD,MAAMI,mBAAmB,GAAGA,CAAC;EACzBC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXP,SAAS;EACTF,QAAQ;EACRG,QAAQ;EACRO,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,WAAW,GAAG,IAAI;EAClBC,OAAO;EACPC,KAAK;EACL,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,cAAc,GAAGJ,WAAW,KAAK,IAAI,GAAG,OAAO,GAAG,aAAa;EAErE,oBACIxB,KAAA,CAAA6B,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQJ,KAAK;IACTK,QAAQ,EAAE,CAAE;IACZb,SAAS,EAAElB,EAAE,CACTQ,eAAe,CAAC;MAAEE,QAAQ;MAAEE,SAAS;MAAEC,QAAQ;MAAEC,SAAS,EAAEkB,OAAO,CAACR,OAAO;IAAE,CAAC,CAAC,EAC/EN,SACJ;EAAE,IAEDE,MAAM,EACNE,SAAS,iBACNvB,KAAA,CAAA6B,aAAA;IACIK,KAAK,EAAE;MAAEC,eAAe,EAAEZ;IAAU,CAAE;IACtCJ,SAAS,EAAE;EAAwD,CACtE,CACJ,eACDnB,KAAA,CAAA6B,aAAA;IACIV,SAAS,EAAElB,EAAE,CACT,sDAAsD,EACtD2B,cACJ;EAAE,gBAEF5B,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE,iCAAkC;IAACM,OAAO,EAAEA;EAAQ,GAC/DH,IAAI,iBAAItB,KAAA,CAAA6B,aAAA,cAAMP,IAAU,CAAC,eAC1BtB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAuC,gBACnDnB,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IACD+B,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVlB,SAAS,EAAE;EAAqC,GAE/CO,KACC,CAAC,eACP1B,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IAAC+B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAAClB,SAAS,EAAE;EAAsB,GACzDC,WACC,CACL,CACJ,CAAC,EACLH,OAAO,iBAAIjB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAgC,GAAEF,OAAa,CAC1E,CAAC,EACLC,QACA,CAAC;AAEd,CAAC;AAED,MAAMoB,QAAQ,GAAGlC,eAAe,CAACD,eAAe,CAAC,UAAU,EAAEa,mBAAmB,CAAC,EAAE;EAC/EuB,MAAM,EAAEjC,cAAc;EACtBkC,MAAM,EAAEjC,cAAc;EACtBkC,IAAI,EAAEjC;AACV,CAAC,CAAC;AAEF,SAAS8B,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","Text","ListItemAction","ListItemHandle","ListItemIcon","listItemVariant","variants","disabled","true","activated","selected","clickable","DecoratableListItem","actions","children","className","description","handle","icon","colorMark","sidePadding","onClick","title","props","paddingClasses","createElement","Object","assign","tabIndex","Boolean","style","backgroundColor","size","as","ListItem","Action","Handle","Icon"],"sources":["ListItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { ListItemAction } from \"./ListItemAction.js\";\nimport { ListItemHandle } from \"./ListItemHandle.js\";\nimport { ListItemIcon } from \"./ListItemIcon.js\";\n\nconst listItemVariant = cva(\n    [\n        \"w-full flex items-center\",\n        \"group-[.list-background-base]:bg-neutral-base\",\n        \"group-[.list-background-light]:bg-neutral-light\",\n        \"group-[.list-variant-container]:rounded-lg\",\n        \"group-[.list-variant-underline]:border-b-sm group-[.list-variant-underline]:border-b-neutral-dimmed\",\n        \"hover:bg-neutral-dimmed!\",\n        \"focus-visible:outline-none focus-visible:ring-sm focus-visible:ring-inset focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            disabled: {\n                true: \"pointer-events-none opacity-50\"\n            },\n            activated: {\n                true: \"bg-neutral-light!\"\n            },\n            selected: {\n                true: \"bg-neutral-light!\"\n            },\n            clickable: {\n                true: \"cursor-pointer\"\n            }\n        }\n    }\n);\n\ninterface ListItemProps\n    extends\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof listItemVariant> {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n    description?: React.ReactNode;\n    handle?: React.ReactNode;\n    icon?: React.ReactNode;\n    colorMark?: string;\n    sidePadding?: \"md\" | \"lg\";\n}\n\nconst DecoratableListItem = ({\n    actions,\n    children,\n    className,\n    description,\n    activated,\n    disabled,\n    selected,\n    handle,\n    icon,\n    colorMark,\n    sidePadding = \"md\",\n    onClick,\n    title,\n    ...props\n}: ListItemProps) => {\n    const paddingClasses = sidePadding === \"md\" ? \"px-md\" : \"pl-lg pr-md\";\n\n    return (\n        <div\n            {...props}\n            tabIndex={0}\n            className={cn(\n                listItemVariant({\n                    disabled,\n                    activated,\n                    selected,\n                    clickable: Boolean(onClick)\n                }),\n                className\n            )}\n        >\n            {handle}\n            {colorMark && (\n                <div\n                    style={{ backgroundColor: colorMark }}\n                    className={\"block w-[4px] h-[48px] rounded-lg ml-sm flex-shrink-0\"}\n                />\n            )}\n            <div\n                className={cn(\n                    \"w-full flex justify-between items-center py-sm-extra\",\n                    paddingClasses\n                )}\n            >\n                <div className={\"w-full flex items-center gap-md\"} onClick={onClick}>\n                    {icon && <div>{icon}</div>}\n                    <div className={\"flex flex-col gap-xxs grow text-left\"}>\n                        <Text\n                            size={\"md\"}\n                            as={\"div\"}\n                            className={\"font-semibold text-neutral-primary\"}\n                        >\n                            {title}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-strong\"}>\n                            {description}\n                        </Text>\n                    </div>\n                </div>\n                {actions && <div className={\"flex items-center gap-xs-plus\"}>{actions}</div>}\n            </div>\n            {children}\n        </div>\n    );\n};\n\nconst ListItem = withStaticProps(makeDecoratable(\"ListItem\", DecoratableListItem), {\n    Action: ListItemAction,\n    Handle: ListItemHandle,\n    Icon: ListItemIcon\n});\n\nexport { ListItem, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAClD,SAASC,IAAI;AACb,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,YAAY;AAErB,MAAMC,eAAe,GAAGP,GAAG,CACvB,CACI,0BAA0B,EAC1B,+CAA+C,EAC/C,iDAAiD,EACjD,4CAA4C,EAC5C,qGAAqG,EACrG,0BAA0B,EAC1B,6GAA6G,CAChH,EACD;EACIQ,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACPD,IAAI,EAAE;IACV,CAAC;IACDE,QAAQ,EAAE;MACNF,IAAI,EAAE;IACV,CAAC;IACDG,SAAS,EAAE;MACPH,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAeD,MAAMI,mBAAmB,GAAGA,CAAC;EACzBC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXP,SAAS;EACTF,QAAQ;EACRG,QAAQ;EACRO,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,WAAW,GAAG,IAAI;EAClBC,OAAO;EACPC,KAAK;EACL,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,cAAc,GAAGJ,WAAW,KAAK,IAAI,GAAG,OAAO,GAAG,aAAa;EAErE,oBACIxB,KAAA,CAAA6B,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQJ,KAAK;IACTK,QAAQ,EAAE,CAAE;IACZb,SAAS,EAAElB,EAAE,CACTQ,eAAe,CAAC;MACZE,QAAQ;MACRE,SAAS;MACTC,QAAQ;MACRC,SAAS,EAAEkB,OAAO,CAACR,OAAO;IAC9B,CAAC,CAAC,EACFN,SACJ;EAAE,IAEDE,MAAM,EACNE,SAAS,iBACNvB,KAAA,CAAA6B,aAAA;IACIK,KAAK,EAAE;MAAEC,eAAe,EAAEZ;IAAU,CAAE;IACtCJ,SAAS,EAAE;EAAwD,CACtE,CACJ,eACDnB,KAAA,CAAA6B,aAAA;IACIV,SAAS,EAAElB,EAAE,CACT,sDAAsD,EACtD2B,cACJ;EAAE,gBAEF5B,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE,iCAAkC;IAACM,OAAO,EAAEA;EAAQ,GAC/DH,IAAI,iBAAItB,KAAA,CAAA6B,aAAA,cAAMP,IAAU,CAAC,eAC1BtB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAuC,gBACnDnB,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IACD+B,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVlB,SAAS,EAAE;EAAqC,GAE/CO,KACC,CAAC,eACP1B,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IAAC+B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAAClB,SAAS,EAAE;EAAsB,GACzDC,WACC,CACL,CACJ,CAAC,EACLH,OAAO,iBAAIjB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAgC,GAAEF,OAAa,CAC1E,CAAC,EACLC,QACA,CAAC;AAEd,CAAC;AAED,MAAMoB,QAAQ,GAAGlC,eAAe,CAACD,eAAe,CAAC,UAAU,EAAEa,mBAAmB,CAAC,EAAE;EAC/EuB,MAAM,EAAEjC,cAAc;EACtBkC,MAAM,EAAEjC,cAAc;EACtBkC,IAAI,EAAEjC;AACV,CAAC,CAAC;AAEF,SAAS8B,QAAQ","ignoreList":[]}

package/Loader/Loader.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const loaderVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const loaderBaseVariant: (props?: ({
     variant?: "accent" | "subtle" | "negative" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants>, VariantProps<typeof loaderBaseVariant> {
     max?: number;
     value?: number;

package/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","Text","cn","cva","makeDecoratable","loaderVariants","variants","size","xs","sm","md","lg","defaultVariants","loaderBaseVariant","variant","accent","subtle","negative","loaderActiveVariant","DecoratableLoader","max","min","value","indeterminate","className","text","props","circumference","Math","PI","percentPx","currentPercent","round","rotation","setRotation","interval","setInterval","prev","clearInterval","createElement","Object","assign","xmlns","fill","strokeWidth","viewBox","cx","cy","r","strokeDashoffset","style","strokeDasharray","transition","transformOrigin","transitionProperty","transform","as","Loader"],"sources":["Loader.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst loaderVariants = cva(\"relative translate\", {\n    variants: {\n        size: {\n            xs: \"size-md\",\n            sm: \"size-md-plus\",\n            md: \"size-lg\",\n            lg: \"size-[40px]\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nconst loaderBaseVariant = cva(\"stroke \", {\n    variants: {\n        variant: {\n            accent: \"opacity-10 text-neutral-primary\",\n            subtle: \"opacity-10 text-neutral-primary\",\n            negative: \"opacity-20 text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\nconst loaderActiveVariant = cva(\"opacity-100\", {\n    variants: {\n        variant: {\n            accent: \"text-accent-primary\",\n            subtle: \"opacity-50 text-neutral-primary\",\n            negative: \"text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ninterface LoaderProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof loaderVariants>,\n        VariantProps<typeof loaderBaseVariant> {\n    max?: number;\n    value?: number;\n    min?: number;\n    className?: string;\n    indeterminate?: boolean;\n    text?: React.ReactNode;\n}\n\nconst DecoratableLoader = ({\n    max = 100,\n    min = 0,\n    value = 66,\n    indeterminate = true,\n    className,\n    size,\n    variant,\n    text,\n    ...props\n}: LoaderProps) => {\n    const circumference = 2 * Math.PI * 45;\n    const percentPx = circumference / 100;\n    const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n    const [rotation, setRotation] = useState(0);\n    useEffect(() => {\n        let interval: ReturnType<typeof setInterval>;\n        if (indeterminate) {\n            // Rotate the loader by 10 degrees every 30ms when indeterminate\n            interval = setInterval(() => {\n                setRotation(prev => (prev + 10) % 360);\n            }, 30);\n        } else {\n            setRotation(0);\n        }\n        return () => clearInterval(interval);\n    }, [indeterminate]);\n\n    return (\n        <div {...props} className={\"text-center flex flex-col items-center\"}>\n            <div className={cn(loaderVariants({ size }), className)}>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    className=\"size-full stroke-current\"\n                    strokeWidth=\"12\"\n                    viewBox=\"0 0 100 100\"\n                >\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderBaseVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${circumference}px ${circumference}px`,\n                            transition: \"all 1s ease 0s\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderActiveVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                            transition: indeterminate ? \"none\" : \"500ms ease 0s\",\n                            transitionProperty: indeterminate\n                                ? \"transform\"\n                                : \"stroke-dasharray, transform\",\n                            transform: indeterminate\n                                ? `rotate(${rotation}deg)` // Rotate when indeterminate\n                                : \"rotate(-90deg)\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                </svg>\n            </div>\n            {text && (\n                <Text as={\"div\"} className={\"text-neutral-strong w-full pt-sm-plus\"}>\n                    {text}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nconst Loader = makeDecoratable(\"Loader\", DecoratableLoader);\n\nexport { Loader, type LoaderProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","Text","cn","cva","makeDecoratable","loaderVariants","variants","size","xs","sm","md","lg","defaultVariants","loaderBaseVariant","variant","accent","subtle","negative","loaderActiveVariant","DecoratableLoader","max","min","value","indeterminate","className","text","props","circumference","Math","PI","percentPx","currentPercent","round","rotation","setRotation","interval","setInterval","prev","clearInterval","createElement","Object","assign","xmlns","fill","strokeWidth","viewBox","cx","cy","r","strokeDashoffset","style","strokeDasharray","transition","transformOrigin","transitionProperty","transform","as","Loader"],"sources":["Loader.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst loaderVariants = cva(\"relative translate\", {\n    variants: {\n        size: {\n            xs: \"size-md\",\n            sm: \"size-md-plus\",\n            md: \"size-lg\",\n            lg: \"size-[40px]\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nconst loaderBaseVariant = cva(\"stroke \", {\n    variants: {\n        variant: {\n            accent: \"opacity-10 text-neutral-primary\",\n            subtle: \"opacity-10 text-neutral-primary\",\n            negative: \"opacity-20 text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\nconst loaderActiveVariant = cva(\"opacity-100\", {\n    variants: {\n        variant: {\n            accent: \"text-accent-primary\",\n            subtle: \"opacity-50 text-neutral-primary\",\n            negative: \"text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ninterface LoaderProps\n    extends\n        React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof loaderVariants>,\n        VariantProps<typeof loaderBaseVariant> {\n    max?: number;\n    value?: number;\n    min?: number;\n    className?: string;\n    indeterminate?: boolean;\n    text?: React.ReactNode;\n}\n\nconst DecoratableLoader = ({\n    max = 100,\n    min = 0,\n    value = 66,\n    indeterminate = true,\n    className,\n    size,\n    variant,\n    text,\n    ...props\n}: LoaderProps) => {\n    const circumference = 2 * Math.PI * 45;\n    const percentPx = circumference / 100;\n    const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n    const [rotation, setRotation] = useState(0);\n    useEffect(() => {\n        let interval: ReturnType<typeof setInterval>;\n        if (indeterminate) {\n            // Rotate the loader by 10 degrees every 30ms when indeterminate\n            interval = setInterval(() => {\n                setRotation(prev => (prev + 10) % 360);\n            }, 30);\n        } else {\n            setRotation(0);\n        }\n        return () => clearInterval(interval);\n    }, [indeterminate]);\n\n    return (\n        <div {...props} className={\"text-center flex flex-col items-center\"}>\n            <div className={cn(loaderVariants({ size }), className)}>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    className=\"size-full stroke-current\"\n                    strokeWidth=\"12\"\n                    viewBox=\"0 0 100 100\"\n                >\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderBaseVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${circumference}px ${circumference}px`,\n                            transition: \"all 1s ease 0s\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderActiveVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                            transition: indeterminate ? \"none\" : \"500ms ease 0s\",\n                            transitionProperty: indeterminate\n                                ? \"transform\"\n                                : \"stroke-dasharray, transform\",\n                            transform: indeterminate\n                                ? `rotate(${rotation}deg)` // Rotate when indeterminate\n                                : \"rotate(-90deg)\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                </svg>\n            </div>\n            {text && (\n                <Text as={\"div\"} className={\"text-neutral-strong w-full pt-sm-plus\"}>\n                    {text}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nconst Loader = makeDecoratable(\"Loader\", DecoratableLoader);\n\nexport { Loader, type LoaderProps };\n"],"mappings":"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","ignoreList":[]}

package/Loader/Loader.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as LoaderStories from './Loader.stories';
-import * as OverlayLoaderStories from './OverlayLoader.stories';
+import * as LoaderStories from "./Loader.stories";
+import * as OverlayLoaderStories from "./OverlayLoader.stories";
 
 <Meta title="Components/Loader" />
 
@@ -10,8 +10,8 @@ import * as OverlayLoaderStories from './OverlayLoader.stories';
 The Loader components provide visual feedback to users when content is loading or an operation is in progress.
 Webiny offers two loader components:
 
-1. -  **Loader** - A standalone circular progress indicator.
-2. -  **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
+1.  - **Loader** - A standalone circular progress indicator.
+2.  - **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
 
 ## Loader
 
@@ -22,32 +22,27 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
-    return (
-        <div className="flex flex-col items-center gap-4">
-            <Loader
-                size="md"
-                variant="accent"
-                indeterminate={true}
-                text="Loading..."
-            />
-        </div>
-    );
-};
+return (
+
+<div className="flex flex-col items-center gap-4">
+  <Loader size="md" variant="accent" indeterminate={true} text="Loading..." />
+</div>
+); };
 
 export default LoaderExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/Loader.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/Loader/Loader.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={LoaderStories.Documentation} />
@@ -57,16 +52,11 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
-    return (
-        <div className="flex flex-col items-center gap-4">
-            <Loader
-                size="md"
-                variant="accent"
-                indeterminate={true}
-                text="Loading..."
-            />
-        </div>
-    );
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <Loader size="md" variant="accent" indeterminate={true} text="Loading..." />
+    </div>
+  );
 };
 
 export default LoaderExample;
@@ -81,7 +71,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const ExtraSmallLoaderExample = () => (
-    <Loader size="xs" />
+
+<Loader size="xs" />
 );
 
 export default ExtraSmallLoaderExample;
@@ -92,7 +83,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const SmallLoaderExample = () => (
-    <Loader size="sm" />
+
+<Loader size="sm" />
 );
 
 export default SmallLoaderExample;
@@ -103,7 +95,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const MediumLoaderExample = () => (
-    <Loader size="md" />
+
+<Loader size="md" />
 );
 
 export default MediumLoaderExample;
@@ -114,7 +107,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LargeLoaderExample = () => (
-    <Loader size="lg" />
+
+<Loader size="lg" />
 );
 
 export default LargeLoaderExample;
@@ -129,7 +123,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const AccentLoaderExample = () => (
-    <Loader variant="accent" />
+
+<Loader variant="accent" />
 );
 
 export default AccentLoaderExample;
@@ -140,7 +135,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const SubtleLoaderExample = () => (
-    <Loader variant="subtle" />
+
+<Loader variant="subtle" />
 );
 
 export default SubtleLoaderExample;
@@ -151,9 +147,10 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const NegativeLoaderExample = () => (
-    <div className="bg-primary p-md rounded-md">
-        <Loader variant="negative" />
-    </div>
+
+<div className="bg-primary p-md rounded-md">
+  <Loader variant="negative" />
+</div>
 );
 
 export default NegativeLoaderExample;
@@ -168,7 +165,7 @@ import React, { useState, useEffect } from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const ControlledProgressExample = () => {
-    const [value, setValue] = useState(0);
+const [value, setValue] = useState(0);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -190,6 +187,7 @@ const ControlledProgressExample = () => {
             text={"Loading " + value + "%"}
         />
     );
+
 };
 
 export default ControlledProgressExample;
@@ -204,7 +202,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderWithTextExample = () => (
-    <Loader text="Loading..." />
+
+<Loader text="Loading..." />
 );
 
 export default LoaderWithTextExample;
@@ -219,34 +218,30 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const OverlayLoaderExample = () => {
-    return (
-        <div className="relative h-64 w-full bg-neutral-light rounded-md p-4">
-            <OverlayLoader
-                size="lg"
-                variant="accent"
-                text="Loading content..."
-            />
-            <div className="h-full flex items-center justify-center">
-                <p className="text-neutral-strong">Content is loading...</p>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div className="relative h-64 w-full bg-neutral-light rounded-md p-4">
+  <OverlayLoader size="lg" variant="accent" text="Loading content..." />
+  <div className="h-full flex items-center justify-center">
+    <p className="text-neutral-strong">Content is loading...</p>
+  </div>
+</div>
+); };
 
 export default OverlayLoaderExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/OverlayLoader.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/Loader/OverlayLoader.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={OverlayLoaderStories.Documentation} />
@@ -256,10 +251,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const DefaultOverlayLoaderExample = () => (
-    <div>
-        <OverlayLoader />
-        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+  <div>
+    <OverlayLoader />
+    The OverlayLoader component covers its parent container with a semi-transparent overlay,
+    typically used to indicate a loading state while keeping the background content visible but
+    inactive.
+  </div>
 );
 
 export default DefaultOverlayLoaderExample;
@@ -272,10 +269,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const DefaultOverlayLoaderExample = () => (
-    <div>
-        <OverlayLoader />
-        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+
+<div>
+  <OverlayLoader />
+  The OverlayLoader component covers its parent container with a semi-transparent overlay, typically
+  used to indicate a loading state while keeping the background content visible but inactive.
+</div>
 );
 
 export default DefaultOverlayLoaderExample;
@@ -288,10 +287,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const OverlayLoaderWithTextExample = () => (
-    <div>
-        <OverlayLoader text="Loading..." />
-         The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+
+<div>
+  <OverlayLoader text="Loading..." />
+  The OverlayLoader component covers its parent container with a semi-transparent overlay, typically
+  used to indicate a loading state while keeping the background content visible but inactive.
+</div>
 );
 
 export default OverlayLoaderWithTextExample;
@@ -300,10 +301,12 @@ export default OverlayLoaderWithTextExample;
 ## Anatomy
 
 ### Construction
-<img src="/images/storybook/loader/construction.png" alt="Construction"/>
+
+<img src="/images/storybook/loader/construction.png" alt="Construction" />
 
 ### Style
-<img src="/images/storybook/loader/style.png" alt="Style"/>
+
+<img src="/images/storybook/loader/style.png" alt="Style" />
 
 ### Type
 
@@ -311,16 +314,18 @@ A **determinate** circular loader visually represents progress with a circular a
 
 An **indeterminate loader** does not display exact progress but continuously animates, signaling that a process is ongoing without a known completion time.
 
-<img src="/images/storybook/loader/type.png" alt="Type"/>
+<img src="/images/storybook/loader/type.png" alt="Type" />
 
 ### Size
-<img src="/images/storybook/loader/size.png" alt="Size"/>
+
+<img src="/images/storybook/loader/size.png" alt="Size" />
 
 ### Background Overlay
-<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay"/>
+
+<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay" />
 
 ## Usage
 
-<img src="/images/storybook/loader/usage-1.png" alt="Usage"/>
+<img src="/images/storybook/loader/usage-1.png" alt="Usage" />
 
-<img src="/images/storybook/loader/usage-2.png" alt="Usage"/>
+<img src="/images/storybook/loader/usage-2.png" alt="Usage" />

package/MultiAutoComplete/MultiAutoComplete.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as MultiAutoCompleteStories from './MultiAutoComplete.stories';
+import * as MultiAutoCompleteStories from "./MultiAutoComplete.stories";
 
 <Meta of={MultiAutoCompleteStories} />
 
@@ -51,25 +51,26 @@ const [validation, setValidation] = useState({ isValid: true, message: "" });
             />
         </div>
     );
+
 };
 
 export default MultiAutoCompleteExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.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/MultiAutoComplete/MultiAutoComplete.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={MultiAutoCompleteStories.Documentation}/>
+<Controls of={MultiAutoCompleteStories.Documentation} />
 
 ## Usage
 
@@ -78,43 +79,43 @@ import React, { useState } from "react";
 import { MultiAutoComplete } from "@webiny/admin-ui";
 
 const MultiAutoCompleteExample = () => {
-const [values, setValues] = useState<string[]>([]);
-const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValidation = () => {
-        if (values.length === 0) {
-            setValidation({ isValid: false, message: "Please select at least one option" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    const timeZones = [
-        "Eastern Standard Time (EST)",
-        "Central Standard Time (CST)",
-        "Pacific Standard Time (PST)",
-        "Greenwich Mean Time (GMT)"
-    ];
-
-    return (
-        <div>
-            <MultiAutoComplete
-                label="Time Zones"
-                description="Select one or more time zones"
-                placeholder="Search or select time zones"
-                options={timeZones}
-                values={values}
-                onValuesChange={newValues => {
-                    setValues(newValues);
-                    handleValidation();
-                }}
-                validation={validation}
-                allowFreeInput={true}
-                required={true}
-                note="You can add custom time zones if needed"
-            />
-        </div>
-    );
+  const [values, setValues] = useState<string[]>([]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValidation = () => {
+    if (values.length === 0) {
+      setValidation({ isValid: false, message: "Please select at least one option" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  const timeZones = [
+    "Eastern Standard Time (EST)",
+    "Central Standard Time (CST)",
+    "Pacific Standard Time (PST)",
+    "Greenwich Mean Time (GMT)"
+  ];
+
+  return (
+    <div>
+      <MultiAutoComplete
+        label="Time Zones"
+        description="Select one or more time zones"
+        placeholder="Search or select time zones"
+        options={timeZones}
+        values={values}
+        onValuesChange={newValues => {
+          setValues(newValues);
+          handleValidation();
+        }}
+        validation={validation}
+        allowFreeInput={true}
+        required={true}
+        note="You can add custom time zones if needed"
+      />
+    </div>
+  );
 };
 
 export default MultiAutoCompleteExample;

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

@@ -4,7 +4,7 @@ import type { CommandOptionFormatted } from "../../../Command/index.js";
 import { type VariantProps } from "../../../utils.js";
 declare const multiAutoCompleteInputVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MultiAutoCompleteInputProps = VariantProps<typeof multiAutoCompleteInputVariants> & InputPrimitiveProps & {
     changeValue: (value: string) => void;
     closeList: () => void;

package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","CommandOptionFormatter","ListCache","MultiAutoCompleteListOptionsPresenter","open","loadedOptions","emptyMessage","loadingMessage","initialMessage","options","constructor","init","params","clear","addItems","vm","getItems","map","option","format","empty","hasItems","setListOpenState","setLoadedOptions","loaded","setSelectedOption","value","updateItems","selected","removeSelectedOption","resetSelectedOptions","addOption"],"sources":["MultiAutoCompleteListOptionsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\nimport { ListCache } from \"../../domains/index.js\";\n\nexport interface IMultiAutoCompleteListOptionsPresenterParams {\n    options?: CommandOption[];\n    emptyMessage?: any;\n    loadingMessage?: any;\n    initialMessage?: any;\n}\n\nexport interface IMultiAutoCompleteListOptionsPresenter {\n    vm: {\n        options: CommandOptionFormatted[];\n        emptyMessage: any;\n        loadingMessage: any;\n        open: boolean;\n        empty: boolean;\n    };\n    init: (params: IMultiAutoCompleteListOptionsPresenterParams) => void;\n    setListOpenState: (open: boolean) => void;\n    setLoadedOptions: (loaded: boolean) => void;\n    addOption: (option: CommandOption) => void;\n    setSelectedOption: (value: string) => void;\n    removeSelectedOption: (value: string) => void;\n    resetSelectedOptions: () => void;\n}\n\nexport class MultiAutoCompleteListOptionsPresenter\n    implements IMultiAutoCompleteListOptionsPresenter\n{\n    private open = false;\n    private loadedOptions = false;\n    private emptyMessage = \"No results.\";\n    private loadingMessage = \"Loading...\";\n    private initialMessage = \"Start typing to find an option.\";\n    private options = new ListCache<CommandOption>();\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params: IMultiAutoCompleteListOptionsPresenterParams) {\n        this.options.clear();\n        params.options && this.options.addItems(params.options);\n        this.emptyMessage = params.emptyMessage || this.emptyMessage;\n        this.loadingMessage = params.loadingMessage || this.loadingMessage;\n        this.initialMessage = params.initialMessage || this.initialMessage;\n    }\n\n    get vm() {\n        return {\n            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),\n            emptyMessage: this.loadedOptions ? this.emptyMessage : this.initialMessage,\n            loadingMessage: this.loadingMessage,\n            open: this.open,\n            empty: !this.options.hasItems()\n        };\n    }\n\n    setListOpenState = (open: boolean) => {\n        this.open = open;\n    };\n\n    setLoadedOptions = (loaded: boolean) => {\n        this.loadedOptions = loaded;\n    };\n\n    setSelectedOption = (value: string) => {\n        this.options.updateItems(option => {\n            if (option.value === value) {\n                option.selected = true;\n            }\n\n            return option;\n        });\n    };\n\n    removeSelectedOption = (value: string) => {\n        this.options.updateItems(option => {\n            if (option.value === value) {\n                option.selected = false;\n            }\n\n            return option;\n        });\n    };\n\n    resetSelectedOptions = () => {\n        this.options.updateItems(option => {\n            option.selected = false;\n            return option;\n        });\n    };\n\n    addOption = (option: CommandOption) => {\n        this.options.addItems([option]);\n    };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAGzC,SAASC,sBAAsB;AAC/B,SAASC,SAAS;AA0BlB,OAAO,MAAMC,qCAAqC,CAElD;EACYC,IAAI,GAAG,KAAK;EACZC,aAAa,GAAG,KAAK;EACrBC,YAAY,GAAG,aAAa;EAC5BC,cAAc,GAAG,YAAY;EAC7BC,cAAc,GAAG,iCAAiC;EAClDC,OAAO,GAAG,IAAIP,SAAS,CAAgB,CAAC;EAEhDQ,WAAWA,CAAA,EAAG;IACVV,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAW,IAAIA,CAACC,MAAoD,EAAE;IACvD,IAAI,CAACH,OAAO,CAACI,KAAK,CAAC,CAAC;IACpBD,MAAM,CAACH,OAAO,IAAI,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACF,MAAM,CAACH,OAAO,CAAC;IACvD,IAAI,CAACH,YAAY,GAAGM,MAAM,CAACN,YAAY,IAAI,IAAI,CAACA,YAAY;IAC5D,IAAI,CAACC,cAAc,GAAGK,MAAM,CAACL,cAAc,IAAI,IAAI,CAACA,cAAc;IAClE,IAAI,CAACC,cAAc,GAAGI,MAAM,CAACJ,cAAc,IAAI,IAAI,CAACA,cAAc;EACtE;EAEA,IAAIO,EAAEA,CAAA,EAAG;IACL,OAAO;MACHN,OAAO,EAAE,IAAI,CAACA,OAAO,CAACO,QAAQ,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,IAAIjB,sBAAsB,CAACkB,MAAM,CAACD,MAAM,CAAC,CAAC;MACrFZ,YAAY,EAAE,IAAI,CAACD,aAAa,GAAG,IAAI,CAACC,YAAY,GAAG,IAAI,CAACE,cAAc;MAC1ED,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCH,IAAI,EAAE,IAAI,CAACA,IAAI;MACfgB,KAAK,EAAE,CAAC,IAAI,CAACX,OAAO,CAACY,QAAQ,CAAC;IAClC,CAAC;EACL;EAEAC,gBAAgB,GAAIlB,IAAa,IAAK;IAClC,IAAI,CAACA,IAAI,GAAGA,IAAI;EACpB,CAAC;EAEDmB,gBAAgB,GAAIC,MAAe,IAAK;IACpC,IAAI,CAACnB,aAAa,GAAGmB,MAAM;EAC/B,CAAC;EAEDC,iBAAiB,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACjB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/B,IAAIA,MAAM,CAACQ,KAAK,KAAKA,KAAK,EAAE;QACxBR,MAAM,CAACU,QAAQ,GAAG,IAAI;MAC1B;MAEA,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDW,oBAAoB,GAAIH,KAAa,IAAK;IACtC,IAAI,CAACjB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/B,IAAIA,MAAM,CAACQ,KAAK,KAAKA,KAAK,EAAE;QACxBR,MAAM,CAACU,QAAQ,GAAG,KAAK;MAC3B;MAEA,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDY,oBAAoB,GAAGA,CAAA,KAAM;IACzB,IAAI,CAACrB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/BA,MAAM,CAACU,QAAQ,GAAG,KAAK;MACvB,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDa,SAAS,GAAIb,MAAqB,IAAK;IACnC,IAAI,CAACT,OAAO,CAACK,QAAQ,CAAC,CAACI,MAAM,CAAC,CAAC;EACnC,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","CommandOptionFormatter","ListCache","MultiAutoCompleteListOptionsPresenter","open","loadedOptions","emptyMessage","loadingMessage","initialMessage","options","constructor","init","params","clear","addItems","vm","getItems","map","option","format","empty","hasItems","setListOpenState","setLoadedOptions","loaded","setSelectedOption","value","updateItems","selected","removeSelectedOption","resetSelectedOptions","addOption"],"sources":["MultiAutoCompleteListOptionsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type { CommandOptionFormatted } from \"~/Command/domain/CommandOptionFormatted.js\";\nimport { CommandOptionFormatter } from \"~/Command/domain/CommandOptionFormatter.js\";\nimport { ListCache } from \"../../domains/index.js\";\n\nexport interface IMultiAutoCompleteListOptionsPresenterParams {\n    options?: CommandOption[];\n    emptyMessage?: any;\n    loadingMessage?: any;\n    initialMessage?: any;\n}\n\nexport interface IMultiAutoCompleteListOptionsPresenter {\n    vm: {\n        options: CommandOptionFormatted[];\n        emptyMessage: any;\n        loadingMessage: any;\n        open: boolean;\n        empty: boolean;\n    };\n    init: (params: IMultiAutoCompleteListOptionsPresenterParams) => void;\n    setListOpenState: (open: boolean) => void;\n    setLoadedOptions: (loaded: boolean) => void;\n    addOption: (option: CommandOption) => void;\n    setSelectedOption: (value: string) => void;\n    removeSelectedOption: (value: string) => void;\n    resetSelectedOptions: () => void;\n}\n\nexport class MultiAutoCompleteListOptionsPresenter implements IMultiAutoCompleteListOptionsPresenter {\n    private open = false;\n    private loadedOptions = false;\n    private emptyMessage = \"No results.\";\n    private loadingMessage = \"Loading...\";\n    private initialMessage = \"Start typing to find an option.\";\n    private options = new ListCache<CommandOption>();\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params: IMultiAutoCompleteListOptionsPresenterParams) {\n        this.options.clear();\n        params.options && this.options.addItems(params.options);\n        this.emptyMessage = params.emptyMessage || this.emptyMessage;\n        this.loadingMessage = params.loadingMessage || this.loadingMessage;\n        this.initialMessage = params.initialMessage || this.initialMessage;\n    }\n\n    get vm() {\n        return {\n            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),\n            emptyMessage: this.loadedOptions ? this.emptyMessage : this.initialMessage,\n            loadingMessage: this.loadingMessage,\n            open: this.open,\n            empty: !this.options.hasItems()\n        };\n    }\n\n    setListOpenState = (open: boolean) => {\n        this.open = open;\n    };\n\n    setLoadedOptions = (loaded: boolean) => {\n        this.loadedOptions = loaded;\n    };\n\n    setSelectedOption = (value: string) => {\n        this.options.updateItems(option => {\n            if (option.value === value) {\n                option.selected = true;\n            }\n\n            return option;\n        });\n    };\n\n    removeSelectedOption = (value: string) => {\n        this.options.updateItems(option => {\n            if (option.value === value) {\n                option.selected = false;\n            }\n\n            return option;\n        });\n    };\n\n    resetSelectedOptions = () => {\n        this.options.updateItems(option => {\n            option.selected = false;\n            return option;\n        });\n    };\n\n    addOption = (option: CommandOption) => {\n        this.options.addItems([option]);\n    };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAGzC,SAASC,sBAAsB;AAC/B,SAASC,SAAS;AA0BlB,OAAO,MAAMC,qCAAqC,CAAmD;EACzFC,IAAI,GAAG,KAAK;EACZC,aAAa,GAAG,KAAK;EACrBC,YAAY,GAAG,aAAa;EAC5BC,cAAc,GAAG,YAAY;EAC7BC,cAAc,GAAG,iCAAiC;EAClDC,OAAO,GAAG,IAAIP,SAAS,CAAgB,CAAC;EAEhDQ,WAAWA,CAAA,EAAG;IACVV,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAW,IAAIA,CAACC,MAAoD,EAAE;IACvD,IAAI,CAACH,OAAO,CAACI,KAAK,CAAC,CAAC;IACpBD,MAAM,CAACH,OAAO,IAAI,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACF,MAAM,CAACH,OAAO,CAAC;IACvD,IAAI,CAACH,YAAY,GAAGM,MAAM,CAACN,YAAY,IAAI,IAAI,CAACA,YAAY;IAC5D,IAAI,CAACC,cAAc,GAAGK,MAAM,CAACL,cAAc,IAAI,IAAI,CAACA,cAAc;IAClE,IAAI,CAACC,cAAc,GAAGI,MAAM,CAACJ,cAAc,IAAI,IAAI,CAACA,cAAc;EACtE;EAEA,IAAIO,EAAEA,CAAA,EAAG;IACL,OAAO;MACHN,OAAO,EAAE,IAAI,CAACA,OAAO,CAACO,QAAQ,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,IAAIjB,sBAAsB,CAACkB,MAAM,CAACD,MAAM,CAAC,CAAC;MACrFZ,YAAY,EAAE,IAAI,CAACD,aAAa,GAAG,IAAI,CAACC,YAAY,GAAG,IAAI,CAACE,cAAc;MAC1ED,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCH,IAAI,EAAE,IAAI,CAACA,IAAI;MACfgB,KAAK,EAAE,CAAC,IAAI,CAACX,OAAO,CAACY,QAAQ,CAAC;IAClC,CAAC;EACL;EAEAC,gBAAgB,GAAIlB,IAAa,IAAK;IAClC,IAAI,CAACA,IAAI,GAAGA,IAAI;EACpB,CAAC;EAEDmB,gBAAgB,GAAIC,MAAe,IAAK;IACpC,IAAI,CAACnB,aAAa,GAAGmB,MAAM;EAC/B,CAAC;EAEDC,iBAAiB,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACjB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/B,IAAIA,MAAM,CAACQ,KAAK,KAAKA,KAAK,EAAE;QACxBR,MAAM,CAACU,QAAQ,GAAG,IAAI;MAC1B;MAEA,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDW,oBAAoB,GAAIH,KAAa,IAAK;IACtC,IAAI,CAACjB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/B,IAAIA,MAAM,CAACQ,KAAK,KAAKA,KAAK,EAAE;QACxBR,MAAM,CAACU,QAAQ,GAAG,KAAK;MAC3B;MAEA,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDY,oBAAoB,GAAGA,CAAA,KAAM;IACzB,IAAI,CAACrB,OAAO,CAACkB,WAAW,CAACT,MAAM,IAAI;MAC/BA,MAAM,CAACU,QAAQ,GAAG,KAAK;MACvB,OAAOV,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAEDa,SAAS,GAAIb,MAAqB,IAAK;IACnC,IAAI,CAACT,OAAO,CAACK,QAAQ,CAAC,CAACI,MAAM,CAAC,CAAC;EACnC,CAAC;AACL","ignoreList":[]}

package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["MultiAutoCompleteListOptionsPresenterWithUniqueValues","constructor","decoretee","init","params","options","filter","option","selected","vm","setListOpenState","open","setLoadedOptions","loaded","setSelectedOption","value","removeSelectedOption","resetSelectedOptions","addOption"],"sources":["MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts"],"sourcesContent":["import type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type {\n    IMultiAutoCompleteListOptionsPresenter,\n    IMultiAutoCompleteListOptionsPresenterParams\n} from \"./MultiAutoCompleteListOptionsPresenter.js\";\n\nexport class MultiAutoCompleteListOptionsPresenterWithUniqueValues\n    implements IMultiAutoCompleteListOptionsPresenter\n{\n    private decoretee: IMultiAutoCompleteListOptionsPresenter;\n\n    constructor(decoretee: IMultiAutoCompleteListOptionsPresenter) {\n        this.decoretee = decoretee;\n    }\n\n    init(params: IMultiAutoCompleteListOptionsPresenterParams) {\n        const options = params.options?.filter(option => !option.selected);\n        this.decoretee.init({\n            ...params,\n            options\n        });\n    }\n\n    get vm() {\n        return this.decoretee.vm;\n    }\n\n    setListOpenState = (open: boolean) => {\n        this.decoretee.setListOpenState(open);\n    };\n\n    setLoadedOptions = (loaded: boolean) => {\n        this.decoretee.setLoadedOptions(loaded);\n    };\n\n    setSelectedOption = (value: string) => {\n        this.decoretee.setSelectedOption(value);\n    };\n\n    removeSelectedOption = (value: string) => {\n        this.decoretee.removeSelectedOption(value);\n    };\n\n    resetSelectedOptions = () => {\n        this.decoretee.resetSelectedOptions();\n    };\n\n    addOption = (option: CommandOption) => {\n        this.decoretee.addOption(option);\n    };\n}\n"],"mappings":"AAMA,OAAO,MAAMA,qDAAqD,CAElE;EAGIC,WAAWA,CAACC,SAAiD,EAAE;IAC3D,IAAI,CAACA,SAAS,GAAGA,SAAS;EAC9B;EAEAC,IAAIA,CAACC,MAAoD,EAAE;IACvD,MAAMC,OAAO,GAAGD,MAAM,CAACC,OAAO,EAAEC,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,QAAQ,CAAC;IAClE,IAAI,CAACN,SAAS,CAACC,IAAI,CAAC;MAChB,GAAGC,MAAM;MACTC;IACJ,CAAC,CAAC;EACN;EAEA,IAAII,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACP,SAAS,CAACO,EAAE;EAC5B;EAEAC,gBAAgB,GAAIC,IAAa,IAAK;IAClC,IAAI,CAACT,SAAS,CAACQ,gBAAgB,CAACC,IAAI,CAAC;EACzC,CAAC;EAEDC,gBAAgB,GAAIC,MAAe,IAAK;IACpC,IAAI,CAACX,SAAS,CAACU,gBAAgB,CAACC,MAAM,CAAC;EAC3C,CAAC;EAEDC,iBAAiB,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACb,SAAS,CAACY,iBAAiB,CAACC,KAAK,CAAC;EAC3C,CAAC;EAEDC,oBAAoB,GAAID,KAAa,IAAK;IACtC,IAAI,CAACb,SAAS,CAACc,oBAAoB,CAACD,KAAK,CAAC;EAC9C,CAAC;EAEDE,oBAAoB,GAAGA,CAAA,KAAM;IACzB,IAAI,CAACf,SAAS,CAACe,oBAAoB,CAAC,CAAC;EACzC,CAAC;EAEDC,SAAS,GAAIX,MAAqB,IAAK;IACnC,IAAI,CAACL,SAAS,CAACgB,SAAS,CAACX,MAAM,CAAC;EACpC,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["MultiAutoCompleteListOptionsPresenterWithUniqueValues","constructor","decoretee","init","params","options","filter","option","selected","vm","setListOpenState","open","setLoadedOptions","loaded","setSelectedOption","value","removeSelectedOption","resetSelectedOptions","addOption"],"sources":["MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts"],"sourcesContent":["import type { CommandOption } from \"~/Command/domain/CommandOption.js\";\nimport type {\n    IMultiAutoCompleteListOptionsPresenter,\n    IMultiAutoCompleteListOptionsPresenterParams\n} from \"./MultiAutoCompleteListOptionsPresenter.js\";\n\nexport class MultiAutoCompleteListOptionsPresenterWithUniqueValues implements IMultiAutoCompleteListOptionsPresenter {\n    private decoretee: IMultiAutoCompleteListOptionsPresenter;\n\n    constructor(decoretee: IMultiAutoCompleteListOptionsPresenter) {\n        this.decoretee = decoretee;\n    }\n\n    init(params: IMultiAutoCompleteListOptionsPresenterParams) {\n        const options = params.options?.filter(option => !option.selected);\n        this.decoretee.init({\n            ...params,\n            options\n        });\n    }\n\n    get vm() {\n        return this.decoretee.vm;\n    }\n\n    setListOpenState = (open: boolean) => {\n        this.decoretee.setListOpenState(open);\n    };\n\n    setLoadedOptions = (loaded: boolean) => {\n        this.decoretee.setLoadedOptions(loaded);\n    };\n\n    setSelectedOption = (value: string) => {\n        this.decoretee.setSelectedOption(value);\n    };\n\n    removeSelectedOption = (value: string) => {\n        this.decoretee.removeSelectedOption(value);\n    };\n\n    resetSelectedOptions = () => {\n        this.decoretee.resetSelectedOptions();\n    };\n\n    addOption = (option: CommandOption) => {\n        this.decoretee.addOption(option);\n    };\n}\n"],"mappings":"AAMA,OAAO,MAAMA,qDAAqD,CAAmD;EAGjHC,WAAWA,CAACC,SAAiD,EAAE;IAC3D,IAAI,CAACA,SAAS,GAAGA,SAAS;EAC9B;EAEAC,IAAIA,CAACC,MAAoD,EAAE;IACvD,MAAMC,OAAO,GAAGD,MAAM,CAACC,OAAO,EAAEC,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,QAAQ,CAAC;IAClE,IAAI,CAACN,SAAS,CAACC,IAAI,CAAC;MAChB,GAAGC,MAAM;MACTC;IACJ,CAAC,CAAC;EACN;EAEA,IAAII,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACP,SAAS,CAACO,EAAE;EAC5B;EAEAC,gBAAgB,GAAIC,IAAa,IAAK;IAClC,IAAI,CAACT,SAAS,CAACQ,gBAAgB,CAACC,IAAI,CAAC;EACzC,CAAC;EAEDC,gBAAgB,GAAIC,MAAe,IAAK;IACpC,IAAI,CAACX,SAAS,CAACU,gBAAgB,CAACC,MAAM,CAAC;EAC3C,CAAC;EAEDC,iBAAiB,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACb,SAAS,CAACY,iBAAiB,CAACC,KAAK,CAAC;EAC3C,CAAC;EAEDC,oBAAoB,GAAID,KAAa,IAAK;IACtC,IAAI,CAACb,SAAS,CAACc,oBAAoB,CAACD,KAAK,CAAC;EAC9C,CAAC;EAEDE,oBAAoB,GAAGA,CAAA,KAAM;IACzB,IAAI,CAACf,SAAS,CAACe,oBAAoB,CAAC,CAAC;EACzC,CAAC;EAEDC,SAAS,GAAIX,MAAqB,IAAK;IACnC,IAAI,CAACL,SAAS,CAACgB,SAAS,CAACX,MAAM,CAAC;EACpC,CAAC;AACL","ignoreList":[]}