@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Alert/AlertIcon.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { cva } from "../utils.js";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as WarningIcon } from "@webiny/icons/warning_amber.svg";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle.svg";
+import { useAlertProps } from "./AlertPropsProvider.js";
+import { Icon } from "../Icon/Icon.js";
+const VARIANT_ICON_MAP = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: InfoIcon,
+  danger: WarningIcon
+};
+const alertIconVariants = cva("size-md", {
+  variants: {
+    type: {
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    variant: {
+      strong: "",
+      subtle: ""
+    }
+  },
+  defaultVariants: {
+    type: "info",
+    variant: "subtle"
+  },
+  compoundVariants: [{
+    type: "info",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "info",
+    variant: "subtle",
+    className: "fill-neutral-xstrong"
+  }, {
+    type: "success",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "success",
+    variant: "subtle",
+    className: "fill-success"
+  }, {
+    type: "warning",
+    variant: "strong",
+    className: "fill-neutral-xstrong"
+  }, {
+    type: "warning",
+    variant: "subtle",
+    className: "fill-warning"
+  }, {
+    type: "danger",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "danger",
+    variant: "subtle",
+    className: "fill-destructive"
+  }]
+});
+export const AlertIcon = () => {
+  const {
+    icon,
+    type,
+    variant
+  } = useAlertProps();
+  if (icon === null) {
+    return null;
+  }
+  let iconElement = icon;
+  if (!iconElement) {
+    const IconComponent = VARIANT_ICON_MAP[type || "info"];
+    iconElement = /*#__PURE__*/React.createElement(IconComponent, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "py-xs"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: "Alert icon",
+    icon: iconElement,
+    className: alertIconVariants({
+      type,
+      variant
+    })
+  }));
+};
+
+//# sourceMappingURL=AlertIcon.js.map

package/Alert/AlertIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cva","ReactComponent","InfoIcon","WarningIcon","SuccessIcon","useAlertProps","Icon","VARIANT_ICON_MAP","info","success","warning","danger","alertIconVariants","variants","type","variant","strong","subtle","defaultVariants","compoundVariants","className","AlertIcon","icon","iconElement","IconComponent","createElement","label"],"sources":["AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning_amber.svg\";\nimport { ReactComponent as SuccessIcon } from \"@webiny/icons/check_circle.svg\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst alertIconVariants = cva(\"size-md\", {\n    variants: {\n        type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n        variant: { strong: \"\", subtle: \"\" }\n    },\n    defaultVariants: {\n        type: \"info\",\n        variant: \"subtle\"\n    },\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"fill-destructive\" }\n    ]\n});\n\nexport const AlertIcon = () => {\n    const { icon, type, variant } = useAlertProps();\n    if (icon === null) {\n        return null;\n    }\n\n    let iconElement = icon;\n    if (!iconElement) {\n        const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n        iconElement = <IconComponent />;\n    }\n\n    return (\n        <div className={\"py-xs\"}>\n            <Icon\n                label={\"Alert icon\"}\n                icon={iconElement}\n                className={alertIconVariants({ type, variant })}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG;AACZ,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,WAAW,QAAQ,iCAAiC;AAC/E,SAASF,cAAc,IAAIG,WAAW,QAAQ,gCAAgC;AAC9E,SAASC,aAAa;AACtB,SAASC,IAAI;AAEb,MAAMC,gBAAgB,GAAG;EACrBC,IAAI,EAAEN,QAAQ;EACdO,OAAO,EAAEL,WAAW;EACpBM,OAAO,EAAER,QAAQ;EACjBS,MAAM,EAAER;AACZ,CAAC;AAED,MAAMS,iBAAiB,GAAGZ,GAAG,CAAC,SAAS,EAAE;EACrCa,QAAQ,EAAE;IACNC,IAAI,EAAE;MAAEN,IAAI,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC;IACxDI,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EACtC,CAAC;EACDC,eAAe,EAAE;IACbJ,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb,CAAC;EACDI,gBAAgB,EAAE,CACd;IAAEL,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACnE;IAAEN,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACzE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACrE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAmB,CAAC;AAE5E,CAAC,CAAC;AAEF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC,IAAI;IAAER,IAAI;IAAEC;EAAQ,CAAC,GAAGV,aAAa,CAAC,CAAC;EAC/C,IAAIiB,IAAI,KAAK,IAAI,EAAE;IACf,OAAO,IAAI;EACf;EAEA,IAAIC,WAAW,GAAGD,IAAI;EACtB,IAAI,CAACC,WAAW,EAAE;IACd,MAAMC,aAAa,GAAGjB,gBAAgB,CAACO,IAAI,IAAI,MAAM,CAAC;IACtDS,WAAW,gBAAGxB,KAAA,CAAA0B,aAAA,CAACD,aAAa,MAAE,CAAC;EACnC;EAEA,oBACIzB,KAAA,CAAA0B,aAAA;IAAKL,SAAS,EAAE;EAAQ,gBACpBrB,KAAA,CAAA0B,aAAA,CAACnB,IAAI;IACDoB,KAAK,EAAE,YAAa;IACpBJ,IAAI,EAAEC,WAAY;IAClBH,SAAS,EAAER,iBAAiB,CAAC;MAAEE,IAAI;MAAEC;IAAQ,CAAC;EAAE,CACnD,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/Alert/AlertPropsProvider.d.ts

@@ -0,0 +1,6 @@
+import { type AlertProps } from "./Alert.js";
+declare const AlertPropsProvider: import("react").FunctionComponent<{
+    props: AlertProps;
+    children: React.ReactNode;
+}>, useAlertProps: () => AlertProps;
+export { AlertPropsProvider, useAlertProps };

package/Alert/AlertPropsProvider.js

@@ -0,0 +1,5 @@
+import { createComponentPropsProvider } from "../utils.js";
+const [AlertPropsProvider, useAlertProps] = createComponentPropsProvider();
+export { AlertPropsProvider, useAlertProps };
+
+//# sourceMappingURL=AlertPropsProvider.js.map

package/Alert/AlertPropsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createComponentPropsProvider","AlertPropsProvider","useAlertProps"],"sources":["AlertPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type AlertProps } from \"./Alert.js\";\n\nconst [AlertPropsProvider, useAlertProps] = createComponentPropsProvider<AlertProps>();\n\nexport { AlertPropsProvider, useAlertProps };\n"],"mappings":"AAAA,SAASA,4BAA4B;AAGrC,MAAM,CAACC,kBAAkB,EAAEC,aAAa,CAAC,GAAGF,4BAA4B,CAAa,CAAC;AAEtF,SAASC,kBAAkB,EAAEC,aAAa","ignoreList":[]}

package/Alert/AlertSwatchBox.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const AlertSwatchBox: () => React.JSX.Element | null;

package/Alert/AlertSwatchBox.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useAlertProps } from "./AlertPropsProvider.js";
+export const AlertSwatchBox = () => {
+  const {
+    swatchColor,
+    swatchColorIcon
+  } = useAlertProps();
+  if (!swatchColor || swatchColorIcon === false) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "h-lg flex items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "size-md rounded-xs",
+    style: {
+      backgroundColor: swatchColor
+    }
+  }));
+};
+
+//# sourceMappingURL=AlertSwatchBox.js.map

package/Alert/AlertSwatchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useAlertProps","AlertSwatchBox","swatchColor","swatchColorIcon","createElement","className","style","backgroundColor"],"sources":["AlertSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\n\nexport const AlertSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useAlertProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"h-lg flex items-center\"}>\n            <div className={\"size-md rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa;AAEtB,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAGH,aAAa,CAAC,CAAC;EAExD,IAAI,CAACE,WAAW,IAAIC,eAAe,KAAK,KAAK,EAAE;IAC3C,OAAO,IAAI;EACf;EAEA,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAyB,gBACrCN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE,oBAAqB;IAACC,KAAK,EAAE;MAAEC,eAAe,EAAEL;IAAY;EAAE,CAAE,CAC/E,CAAC;AAEd,CAAC","ignoreList":[]}

package/Alert/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_TYPE = "info";
+export declare const DEFAULT_VARIANT = "subtle";
+export declare const defaultVariants: {
+    readonly type: "info";
+    readonly variant: "subtle";
+};

package/Alert/constants.js

@@ -0,0 +1,8 @@
+export const DEFAULT_TYPE = "info";
+export const DEFAULT_VARIANT = "subtle";
+export const defaultVariants = {
+  type: DEFAULT_TYPE,
+  variant: DEFAULT_VARIANT
+};
+
+//# sourceMappingURL=constants.js.map

package/Alert/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_TYPE","DEFAULT_VARIANT","defaultVariants","type","variant"],"sources":["constants.ts"],"sourcesContent":["export const DEFAULT_TYPE = \"info\";\nexport const DEFAULT_VARIANT = \"subtle\";\n\nexport const defaultVariants = {\n    type: DEFAULT_TYPE,\n    variant: DEFAULT_VARIANT\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,MAAM;AAClC,OAAO,MAAMC,eAAe,GAAG,QAAQ;AAEvC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAEH,YAAY;EAClBI,OAAO,EAAEH;AACb,CAAU","ignoreList":[]}

package/Alert/index.d.ts

@@ -1 +1 @@
-export * from "./Alert";
+export * from "./Alert.js";

package/Alert/index.js

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

package/Alert/index.js.map

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

package/AutoComplete/AutoComplete.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-import type { AutoCompletePrimitiveProps } from "./primitives";
-import type { FormComponentProps } from "../FormComponent";
+import type { AutoCompletePrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
-declare const AutoComplete: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+declare const AutoComplete: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/AutoComplete/AutoComplete.js

@@ -1,11 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from "react";
-import { makeDecoratable } from "../utils";
-import { AutoCompletePrimitive } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { AutoCompletePrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableAutoComplete = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -26,9 +27,10 @@ const DecoratableAutoComplete = ({
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid,

package/AutoComplete/AutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","AutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableAutoComplete","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","AutoComplete"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives\";\nimport { AutoCompletePrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: AutoCompleteProps) => {\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            <AutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                disabled={disabled}\n                label={label}\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 AutoComplete = makeDecoratable(\"AutoComplete\", DecoratableAutoComplete);\n\nexport { AutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,qBAAqB;AAE9B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACY,CAAC,KAAK;EACrB,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,qBAAqB,EAAA2B,MAAA,CAAAC,MAAA,KACdhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAEA,KAAM;IACbW,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,YAAY,GAAG9B,eAAe,CAAC,cAAc,EAAEM,uBAAuB,CAAC;AAE7E,SAASwB,YAAY","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","AutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableAutoComplete","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","AutoComplete"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { AutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: AutoCompleteProps) => {\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={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <AutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                disabled={disabled}\n                label={label}\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 AutoComplete = makeDecoratable(\"AutoComplete\", DecoratableAutoComplete);\n\nexport { AutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,qBAAqB;AAE9B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACY,CAAC,KAAK;EACrB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGvB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGrB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGzB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIsB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI7B,KAAA,CAAA8B,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrB/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB;IACfuB,IAAI,EAAEpB,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IAACyB,IAAI,EAAEnB,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEjB,KAAA,CAAA8B,aAAA,CAACxB,qBAAqB,EAAA4B,MAAA,CAAAC,MAAA,KACdhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBL,KAAK,EAAEA,KAAM;IACbY,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFxB,KAAA,CAAA8B,aAAA,CAACtB,yBAAyB;IACtBwB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFjB,KAAA,CAAA8B,aAAA,CAACpB,iBAAiB;IAACsB,IAAI,EAAElB,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,YAAY,GAAG/B,eAAe,CAAC,cAAc,EAAEM,uBAAuB,CAAC;AAE7E,SAASyB,YAAY","ignoreList":[]}

package/AutoComplete/AutoComplete.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as AutoCompleteStories from './AutoComplete.stories';
 
@@ -132,4 +132,4 @@ export default TimezoneSelector;
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>

package/AutoComplete/AutoComplete.stories.d.ts

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

package/AutoComplete/AutoComplete.stories.js

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

package/AutoComplete/AutoComplete.stories.js.map

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

package/AutoComplete/domains/AutoCompleteOption.d.ts

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

package/AutoComplete/domains/AutoCompleteOption.js.map

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

package/AutoComplete/domains/AutoCompleteOptionDto.d.ts

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

package/AutoComplete/domains/AutoCompleteOptionDto.js.map

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

package/AutoComplete/domains/index.d.ts

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

package/AutoComplete/domains/index.js

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

package/AutoComplete/domains/index.js.map

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

package/AutoComplete/index.d.ts

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

package/AutoComplete/index.js

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

package/AutoComplete/index.js.map

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

package/AutoComplete/primitives/AutoCompletePrimitive.d.ts

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

package/AutoComplete/primitives/AutoCompletePrimitive.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { Command } from "../../Command";
-import { PopoverPrimitive } from "../../Popover";
-import { useAutoComplete } from "./useAutoComplete";
-import { AutoCompleteInputIcons, AutoCompleteList } from "./components";
-import { makeDecoratable } from "../../utils";
+import { Command } from "../../Command/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { useAutoComplete } from "./useAutoComplete.js";
+import { AutoCompleteInputIcons, AutoCompleteList } from "./components/index.js";
+import { makeDecoratable } from "../../utils.js";
 const DecoratableAutoCompletePrimitive = props => {
   const {
     vm,

package/AutoComplete/primitives/AutoCompletePrimitive.js.map

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

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

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