@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/components/Card/CardContext.js

@@ -1,11 +1,12 @@
-import { createContext, useContext } from "react";
-const CardContext = /* @__PURE__ */ createContext(null), useCardContext = () => {
-  const context = useContext(CardContext);
-  if (!context)
+import { createContext as e, useContext as o } from "react";
+const n = /* @__PURE__ */ e(null), C = () => {
+  const t = o(n);
+  if (!t)
     throw new Error("Cannot be rendered outside the Card component");
-  return context;
+  return t;
 };
 export {
-  CardContext,
-  useCardContext
+  n as CardContext,
+  C as useCardContext
 };
+//# sourceMappingURL=CardContext.js.map

package/dist/components/Card/CardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContext.js","sources":["../../../src/components/Card/CardContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { IWebApp } from '@edifice.io/ts-client';\n\nimport { CardProps } from './Card';\n\nexport interface CardContextProps\n  extends Omit<CardProps, 'children' | 'className'> {\n  app?: IWebApp | undefined;\n  appCode: string | undefined;\n  isSelectable?: boolean;\n  isClickable?: boolean;\n  onClick?: () => void;\n  onSelect?: () => void;\n}\n\nexport const CardContext = createContext<CardContextProps | null>(null!);\n\nCardContext.displayName = 'CardContext';\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext);\n  if (!context) {\n    throw new Error(`Cannot be rendered outside the Card component`);\n  }\n  return context;\n};\n"],"names":["CardContext","useCardContext","context","useContext","Error"],"mappings":";AAgBaA,MAAAA,sBAAqD,IAAK,GAI1DC,IAAiBA,MAAM;AAC5BC,QAAAA,IAAUC,EAAWH,CAAW;AACtC,MAAI,CAACE;AACG,UAAA,IAAIE,MAAM,+CAA+C;AAE1DF,SAAAA;AACT;"}

package/dist/components/Card/CardFooter.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-const CardFooter = ({
-  children
-}) => /* @__PURE__ */ jsx("div", { className: "card-footer gap-16", children });
+import { jsx as o } from "react/jsx-runtime";
+const t = ({
+  children: r
+}) => /* @__PURE__ */ o("div", { className: "card-footer gap-16", children: r });
 export {
-  CardFooter as default
+  t as default
 };
+//# sourceMappingURL=CardFooter.js.map

package/dist/components/Card/CardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.js","sources":["../../../src/components/Card/CardFooter.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nconst CardFooter = ({ children }: { children: ReactNode }) => {\n  return <div className=\"card-footer gap-16\">{children}</div>;\n};\n\nCardFooter.displayName = 'Card.Footer';\n\nexport default CardFooter;\n"],"names":["CardFooter","children","jsx"],"mappings":";AAEA,MAAMA,IAAaA,CAAC;AAAA,EAAEC,UAAAA;AAAkC,MAC9C,gBAAAC,EAAA,OAAA,EAAI,WAAU,sBAAsBD,UAAAA,EAAS,CAAA;"}

package/dist/components/Card/CardHeader.js

@@ -1,19 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCardContext } from "./CardContext.js";
-import { IconButton } from "../Button/IconButton.js";
-import { Icon } from "../Icon/Icon.js";
-const CardHeader = () => {
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { useCardContext as i } from "./CardContext.js";
+import { IconButton as s } from "../Button/IconButton.js";
+import { Icon as l } from "../Icon/Icon.js";
+const b = () => {
   const {
-    isSelectable,
-    isClickable,
-    onClick,
-    onSelect
-  } = useCardContext();
-  return isSelectable || isClickable ? /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
-    isSelectable ? /* @__PURE__ */ jsx(IconButton, { "aria-label": "Open Action Bar", className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ jsx(Icon, { name: "options" }), onClick: onSelect, variant: "ghost" }) : null,
-    isClickable ? /* @__PURE__ */ jsx("button", { onClick, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": "Open resource" }) : null
+    isSelectable: t,
+    isClickable: e,
+    onClick: a,
+    onSelect: n
+  } = i();
+  return t || e ? /* @__PURE__ */ r("div", { className: "card-header", children: [
+    t ? /* @__PURE__ */ o(s, { "aria-label": "Open Action Bar", className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ o(l, { name: "options" }), onClick: n, variant: "ghost" }) : null,
+    e ? /* @__PURE__ */ o("button", { onClick: a, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": "Open resource" }) : null
   ] }) : null;
 };
 export {
-  CardHeader as default
+  b as default
 };
+//# sourceMappingURL=CardHeader.js.map

package/dist/components/Card/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sources":["../../../src/components/Card/CardHeader.tsx"],"sourcesContent":["import { Icon } from '..';\nimport { IconButton } from '../Button';\nimport { useCardContext } from './CardContext';\n\nconst CardHeader = () => {\n  const { isSelectable, isClickable, onClick, onSelect } = useCardContext();\n  const isActive = isSelectable || isClickable;\n  return isActive ? (\n    <div className=\"card-header\">\n      {isSelectable ? (\n        <IconButton\n          aria-label=\"Open Action Bar\"\n          className=\"z-3 bg-white\"\n          color=\"secondary\"\n          icon={<Icon name=\"options\" />}\n          onClick={onSelect}\n          variant=\"ghost\"\n        />\n      ) : null}\n      {isClickable ? (\n        <button\n          onClick={onClick}\n          className=\"position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100\"\n          aria-label=\"Open resource\"\n        />\n      ) : null}\n    </div>\n  ) : null;\n};\n\nCardHeader.displayName = 'Card.Header';\n\nexport default CardHeader;\n"],"names":["CardHeader","isSelectable","isClickable","onClick","onSelect","useCardContext","jsxs","IconButton","jsx","Icon"],"mappings":";;;;AAIA,MAAMA,IAAaA,MAAM;AACjB,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,aAAAA;AAAAA,IAAaC,SAAAA;AAAAA,IAASC,UAAAA;AAAAA,MAAaC,EAAe;AAExE,SADiBJ,KAAgBC,IAE/B,gBAAAI,EAAC,OAAI,EAAA,WAAU,eACZL,UAAAA;AAAAA,IAAAA,sBACEM,GACC,EAAA,cAAW,mBACX,WAAU,gBACV,OAAM,aACN,MAAO,gBAAAC,EAAAC,GAAA,EAAK,MAAK,WAAS,GAC1B,SAASL,GACT,SAAQ,QAAO,CAAA,IAEf;AAAA,IACHF,sBACE,UACC,EAAA,SAAAC,GACA,WAAU,sEACV,cAAW,gBACX,CAAA,IACA;AAAA,EAAA,EACN,CAAA,IACE;AACN;"}

package/dist/components/Card/CardImage.js

@@ -1,21 +1,22 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useCardContext } from "./CardContext.js";
-import { Image } from "../Image/Image.js";
-import { AppIcon } from "../AppIcon/AppIcon.js";
-const CardImage = ({
-  imageSrc,
-  className,
-  variant = "medium"
+import { jsx as o } from "react/jsx-runtime";
+import e from "clsx";
+import { useCardContext as s } from "./CardContext.js";
+import { Image as c } from "../Image/Image.js";
+import { AppIcon as l } from "../AppIcon/AppIcon.js";
+const h = ({
+  imageSrc: t,
+  className: a,
+  variant: r = "medium"
 }) => {
   const {
-    app
-  } = useCardContext(), style = variant === "landscape" ? {
+    app: m
+  } = s(), i = r === "landscape" ? {
     width: "100%",
     height: "auto"
   } : null;
-  return /* @__PURE__ */ jsx("div", { className: clsx("card-image", variant), children: imageSrc ? /* @__PURE__ */ jsx(Image, { alt: "", src: imageSrc, objectFit: "cover", className: clsx("h-full w-100", className) }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "80", variant: "rounded", ...style }) });
+  return /* @__PURE__ */ o("div", { className: e("card-image", r), children: t ? /* @__PURE__ */ o(c, { alt: "", src: t, objectFit: "cover", className: e("h-full w-100", a) }) : /* @__PURE__ */ o(l, { app: m, iconFit: "ratio", size: "80", variant: "rounded", ...i }) });
 };
 export {
-  CardImage as default
+  h as default
 };
+//# sourceMappingURL=CardImage.js.map

package/dist/components/Card/CardImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardImage.js","sources":["../../../src/components/Card/CardImage.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { useCardContext } from './CardContext';\nimport { AppIcon } from '../AppIcon';\nimport { Image } from '../Image';\n\nconst CardImage = ({\n  imageSrc,\n  className,\n  variant = 'medium',\n}: {\n  imageSrc?: string | undefined;\n  className?: string;\n  variant?: 'small' | 'medium' | 'landscape';\n}) => {\n  const { app } = useCardContext();\n\n  const style =\n    variant === 'landscape'\n      ? {\n          width: '100%',\n          height: 'auto',\n        }\n      : null;\n\n  return (\n    <div className={clsx('card-image', variant)}>\n      {imageSrc ? (\n        <Image\n          alt=\"\"\n          src={imageSrc}\n          objectFit=\"cover\"\n          className={clsx('h-full w-100', className)}\n        />\n      ) : (\n        <AppIcon\n          app={app}\n          iconFit=\"ratio\"\n          size=\"80\"\n          variant=\"rounded\"\n          {...style}\n        />\n      )}\n    </div>\n  );\n};\n\nCardImage.displayName = 'Card.Image';\n\nexport default CardImage;\n"],"names":["CardImage","imageSrc","className","variant","app","useCardContext","style","width","height","jsx","clsx","Image","AppIcon"],"mappings":";;;;;AAMA,MAAMA,IAAYA,CAAC;AAAA,EACjBC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAKZ,MAAM;AACE,QAAA;AAAA,IAAEC,KAAAA;AAAAA,MAAQC,EAAe,GAEzBC,IACJH,MAAY,cACR;AAAA,IACEI,OAAO;AAAA,IACPC,QAAQ;AAAA,EAEV,IAAA;AAEN,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAK,cAAcP,CAAO,GACvCF,UACCA,IAAA,gBAAAQ,EAACE,GACC,EAAA,KAAI,IACJ,KAAKV,GACL,WAAU,SACV,WAAWS,EAAK,gBAAgBR,CAAS,EAAE,CAAA,sBAG5CU,GACC,EAAA,KAAAR,GACA,SAAQ,SACR,MAAK,MACL,SAAQ,WACR,GAAIE,GAEP,EACH,CAAA;AAEJ;"}

package/dist/components/Card/CardText.js

@@ -1,12 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-const CardText = ({
-  children,
-  className
+import { jsx as a } from "react/jsx-runtime";
+import x from "clsx";
+const o = ({
+  children: t,
+  className: e
 }) => {
-  const text = clsx("card-text small text-break text-truncate text-truncate-1", className);
-  return /* @__PURE__ */ jsx("p", { className: text, children });
+  const r = x("card-text small text-break text-truncate text-truncate-1", e);
+  return /* @__PURE__ */ a("p", { className: r, children: t });
 };
 export {
-  CardText as default
+  o as default
 };
+//# sourceMappingURL=CardText.js.map

package/dist/components/Card/CardText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardText.js","sources":["../../../src/components/Card/CardText.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nconst CardText = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  const text = clsx(\n    'card-text small text-break text-truncate text-truncate-1',\n    className,\n  );\n  return <p className={text}>{children}</p>;\n};\n\nCardText.displayName = 'Card.Text';\n\nexport default CardText;\n"],"names":["CardText","children","className","text","clsx","jsx"],"mappings":";;AAIA,MAAMA,IAAWA,CAAC;AAAA,EAChBC,UAAAA;AAAAA,EACAC,WAAAA;AAIF,MAAM;AACEC,QAAAA,IAAOC,EACX,4DACAF,CACF;AACA,SAAQ,gBAAAG,EAAA,KAAA,EAAE,WAAWF,GAAOF,UAAAA,EAAS,CAAA;AACvC;"}

package/dist/components/Card/CardTitle.js

@@ -1,12 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-const CardTitle = ({
-  children,
-  className
+import { jsx as t } from "react/jsx-runtime";
+import o from "clsx";
+const l = ({
+  children: e,
+  className: r
 }) => {
-  const title = clsx("card-title body text-break text-truncate text-truncate-2", className);
-  return /* @__PURE__ */ jsx("h3", { className: title, children: /* @__PURE__ */ jsx("strong", { children }) });
+  const a = o("card-title body text-break text-truncate text-truncate-2", r);
+  return /* @__PURE__ */ t("h3", { className: a, children: /* @__PURE__ */ t("strong", { children: e }) });
 };
 export {
-  CardTitle as default
+  l as default
 };
+//# sourceMappingURL=CardTitle.js.map

package/dist/components/Card/CardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTitle.js","sources":["../../../src/components/Card/CardTitle.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nconst CardTitle = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  const title = clsx(\n    'card-title body text-break text-truncate text-truncate-2',\n    className,\n  );\n  return (\n    <h3 className={title}>\n      <strong>{children}</strong>\n    </h3>\n  );\n};\n\nCardTitle.displayName = 'Card.Title';\n\nexport default CardTitle;\n"],"names":["CardTitle","children","className","title","clsx","jsx"],"mappings":";;AAIA,MAAMA,IAAYA,CAAC;AAAA,EACjBC,UAAAA;AAAAA,EACAC,WAAAA;AAIF,MAAM;AACEC,QAAAA,IAAQC,EACZ,4DACAF,CACF;AACA,2BACG,MAAG,EAAA,WAAWC,GACb,UAAC,gBAAAE,EAAA,UAAA,EAAQJ,UAAAA,EAAS,CAAA,EACpB,CAAA;AAEJ;"}

package/dist/components/Card/CardUser.js

@@ -1,10 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import { Avatar } from "../Avatar/Avatar.js";
-import { Icon } from "../Icon/Icon.js";
-const CardUser = ({
-  userSrc,
-  creatorName
-}) => userSrc ? /* @__PURE__ */ jsx(Avatar, { alt: creatorName || "", size: "xs", src: userSrc, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ jsx(Icon, { name: "nav/one-profile" });
+import { jsx as t } from "react/jsx-runtime";
+import { Avatar as a } from "../Avatar/Avatar.js";
+import { Icon as e } from "../Icon/Icon.js";
+const s = ({
+  userSrc: r,
+  creatorName: o
+}) => r ? /* @__PURE__ */ t(a, { alt: o || "", size: "xs", src: r, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ t(e, { name: "nav/one-profile" });
 export {
-  CardUser as default
+  s as default
 };
+//# sourceMappingURL=CardUser.js.map

package/dist/components/Card/CardUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardUser.js","sources":["../../../src/components/Card/CardUser.tsx"],"sourcesContent":["import { Icon } from '..';\nimport { Avatar } from '../Avatar';\n\nconst CardUser = ({\n  userSrc,\n  creatorName,\n}: {\n  userSrc: string;\n  creatorName: string;\n}) => {\n  return userSrc ? (\n    <Avatar\n      alt={creatorName || ''}\n      size=\"xs\"\n      src={userSrc}\n      variant=\"circle\"\n      width=\"24\"\n      height=\"24\"\n    />\n  ) : (\n    <Icon name=\"nav/one-profile\" />\n  );\n};\n\nCardUser.displayName = 'Card.User';\n\nexport default CardUser;\n"],"names":["CardUser","userSrc","creatorName","Avatar","jsx","Icon"],"mappings":";;;AAGA,MAAMA,IAAWA,CAAC;AAAA,EAChBC,SAAAA;AAAAA,EACAC,aAAAA;AAIF,MACSD,sBACJE,GACC,EAAA,KAAKD,KAAe,IACpB,MAAK,MACL,KAAKD,GACL,SAAQ,UACR,OAAM,MACN,QAAO,KAAI,CAAA,IAGZ,gBAAAG,EAAAC,GAAA,EAAK,MAAK,kBACZ,CAAA;"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,36 +1,37 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useImperativeHandle, useEffect, useId } from "react";
-import clsx from "clsx";
-const Checkbox = /* @__PURE__ */ forwardRef(({
-  label,
-  disabled = !1,
-  checked = !1,
-  indeterminate = !1,
-  ...restProps
-}, ref) => {
-  const refCheckbox = useRef(null);
-  useImperativeHandle(ref, () => ({
-    ...refCheckbox.current
-  })), useEffect(() => {
-    refCheckbox.current.indeterminate = indeterminate;
-  }, [refCheckbox, indeterminate]);
-  const id = useId(), checkboxProps = {
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as p, useRef as u, useImperativeHandle as d, useEffect as h, useId as x } from "react";
+import k from "clsx";
+const j = /* @__PURE__ */ p(({
+  label: c,
+  disabled: a = !1,
+  checked: l = !1,
+  indeterminate: r = !1,
+  ...s
+}, f) => {
+  const e = u(null);
+  d(f, () => ({
+    ...e.current
+  })), h(() => {
+    e.current.indeterminate = r;
+  }, [e, r]);
+  const n = x(), m = {
     type: "checkbox",
-    checked,
-    disabled,
-    ref: refCheckbox,
-    className: clsx(restProps.className, "form-check-input c-pointer"),
-    id
-  }, inputProps = {
-    ...restProps,
-    ...checkboxProps
+    checked: l,
+    disabled: a,
+    ref: e,
+    className: k(s.className, "form-check-input c-pointer"),
+    id: n
+  }, o = {
+    ...s,
+    ...m
   };
-  return /* @__PURE__ */ jsxs("div", { className: "form-check d-flex align-items-center gap-8", children: [
-    /* @__PURE__ */ jsx("input", { ...inputProps }),
-    label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputProps.id, children: label })
+  return /* @__PURE__ */ i("div", { className: "form-check d-flex align-items-center gap-8", children: [
+    /* @__PURE__ */ t("input", { ...o }),
+    c && /* @__PURE__ */ t("label", { className: "form-check-label", htmlFor: o.id, children: c })
   ] });
 });
 export {
-  Checkbox,
-  Checkbox as default
+  j as Checkbox,
+  j as default
 };
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Ref,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport clsx from 'clsx';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Add a label\n   */\n  label?: string;\n  /**\n   * If disable\n   */\n  disabled?: boolean;\n  /**\n   * If checked\n   */\n  checked?: boolean;\n  /**\n   * If indeterminate\n   */\n  indeterminate?: boolean;\n}\n\nexport const Checkbox = forwardRef(\n  (\n    {\n      label,\n      disabled = false,\n      checked = false,\n      indeterminate = false,\n      ...restProps\n    }: CheckboxProps,\n    ref: Ref<HTMLInputElement>,\n  ) => {\n    // Local ref will be merged with forwardRef in useImperativeHandle below\n    const refCheckbox = useRef<HTMLInputElement>(null);\n\n    // We add two methods to control the alert from parent component\n    useImperativeHandle(ref, () => ({\n      ...(refCheckbox.current as HTMLInputElement),\n    }));\n\n    useEffect(() => {\n      refCheckbox.current!.indeterminate = indeterminate;\n    }, [refCheckbox, indeterminate]);\n\n    const id = useId();\n\n    const checkboxProps = {\n      type: 'checkbox',\n      checked,\n      disabled,\n      ref: refCheckbox,\n      className: clsx(restProps.className, 'form-check-input c-pointer'),\n      id,\n    };\n\n    const inputProps = {\n      ...restProps,\n      ...checkboxProps,\n    };\n\n    return (\n      <div className=\"form-check d-flex align-items-center gap-8\">\n        <input {...inputProps} />\n        {label && (\n          <label className=\"form-check-label\" htmlFor={inputProps.id}>\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","label","disabled","checked","indeterminate","restProps","ref","refCheckbox","useRef","useImperativeHandle","current","useEffect","id","useId","checkboxProps","type","className","clsx","inputProps","jsxs","jsx"],"mappings":";;;AA+BaA,MAAAA,sBACX,CACE;AAAA,EACEC,OAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,eAAAA,IAAgB;AAAA,EAChB,GAAGC;AACU,GACfC,MACG;AAEGC,QAAAA,IAAcC,EAAyB,IAAI;AAGjDC,EAAAA,EAAoBH,GAAK,OAAO;AAAA,IAC9B,GAAIC,EAAYG;AAAAA,EAChB,EAAA,GAEFC,EAAU,MAAM;AACdJ,IAAAA,EAAYG,QAASN,gBAAgBA;AAAAA,EAAAA,GACpC,CAACG,GAAaH,CAAa,CAAC;AAE/B,QAAMQ,IAAKC,KAELC,IAAgB;AAAA,IACpBC,MAAM;AAAA,IACNZ,SAAAA;AAAAA,IACAD,UAAAA;AAAAA,IACAI,KAAKC;AAAAA,IACLS,WAAWC,EAAKZ,EAAUW,WAAW,4BAA4B;AAAA,IACjEJ,IAAAA;AAAAA,EAAAA,GAGIM,IAAa;AAAA,IACjB,GAAGb;AAAAA,IACH,GAAGS;AAAAA,EAAAA;AAIH,SAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,SAAA,EAAM,GAAIF,GAAW;AAAA,IACrBjB,uBACE,SAAM,EAAA,WAAU,oBAAmB,SAASiB,EAAWN,IACrDX,UACHA,EAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}

package/dist/components/ColorPicker/ColorPalette.js

@@ -1,4 +1,4 @@
-const DefaultPalette = {
+const e = {
   className: "fw-bold",
   label: "defaultPalette",
   colors: [
@@ -136,7 +136,7 @@ const DefaultPalette = {
       hue: "light"
     }]
   ]
-}, AccessiblePalette = {
+}, l = {
   label: "accessiblePalette",
   tooltip: {
     message: "Veni, vidi, vici"
@@ -166,6 +166,7 @@ const DefaultPalette = {
   className: "mt-16"
 };
 export {
-  AccessiblePalette,
-  DefaultPalette
+  l as AccessiblePalette,
+  e as DefaultPalette
 };
+//# sourceMappingURL=ColorPalette.js.map

package/dist/components/ColorPicker/ColorPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette.js","sources":["../../../src/components/ColorPicker/ColorPalette.tsx"],"sourcesContent":["import { TooltipProps } from '../Tooltip';\n\nexport interface ColorPaletteItem {\n  /**\n   * CSS Color Value, in the form #AABBCC\n   */\n  value: string;\n  /**\n   * i18n key describing the color.\n   */\n  description: string;\n  /**\n   * Is it a dark or light color ?\n   * When undefined, will be considered Dark.\n   */\n  hue?: 'dark' | 'light';\n  /**\n   * Is it intended to be a reset color ?\n   */\n  isReset?: boolean;\n}\n\n/** Variations of one color. */\nexport type ColorPaletteHues = Array<ColorPaletteItem>;\n\nexport interface ColorPalette {\n  /**\n   * Description of the color palette.\n   */\n  label: string;\n  /**\n   * [Optional] informative tooltip.\n   */\n  tooltip?: Partial<TooltipProps>;\n  /**\n   * Array of colors * variations.\n   */\n  colors: ColorPaletteHues[];\n  /**\n   * Reset option\n   */\n  reset?: ColorPaletteItem;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport const DefaultPalette: ColorPalette = {\n  className: 'fw-bold',\n  label: 'defaultPalette',\n  colors: [\n    /* Paint It Black */\n    [\n      { value: '#4A4A4A', description: 'color.gray.darkest' },\n      { value: '#909090', description: 'color.gray.dark' },\n      { value: '#C7C7C7', description: 'color.gray.medium' },\n      { value: '#F2F2F2', description: 'color.gray.light', hue: 'light' },\n      { value: '#FFFFFF', description: 'color.white', hue: 'light' },\n    ],\n    /* Blue Sunday */\n    [\n      { value: '#005A8A', description: 'color.blue.darkest' },\n      { value: '#2F7EA7', description: 'color.blue.dark' },\n      { value: '#46AFE6', description: 'color.blue.medium' },\n      { value: '#B9E3F8', description: 'color.blue.light', hue: 'light' },\n      { value: '#E5F5FF', description: 'color.blue.lightest', hue: 'light' },\n    ],\n    /* Purple haze */\n    [\n      { value: '#550070', description: 'color.purple.darkest' },\n      { value: '#7C2C96', description: 'color.purple.dark' },\n      { value: '#A348C0', description: 'color.purple.medium' },\n      { value: '#D7B5E2', description: 'color.purple.light', hue: 'light' },\n      { value: '#F6ECF9', description: 'color.purple.lightest', hue: 'light' },\n    ],\n    /* Red House */\n    [\n      { value: '#9E0016', description: 'color.red.darkest' },\n      { value: '#C6253B', description: 'color.red.dark' },\n      { value: '#FF3A55', description: 'color.red.medium' },\n      { value: '#FFB6C0', description: 'color.red.light', hue: 'light' },\n      { value: '#FFECEE', description: 'color.red.lightest', hue: 'light' },\n    ],\n    /* The Brown Album */\n    [\n      { value: '#9E4800', description: 'color.brown.darkest' },\n      { value: '#DA6A0B', description: 'color.brown.dark' },\n      { value: '#FF8D2E', description: 'color.brown.medium' },\n      { value: '#FFCBA0', description: 'color.brown.light', hue: 'light' },\n      { value: '#FFEFE3', description: 'color.brown.lightest', hue: 'light' },\n    ],\n    /* Yellow Submarine */\n    [\n      { value: '#A89400', description: 'color.yellow.darkest' },\n      { value: '#D1AF00', description: 'color.yellow.dark' },\n      { value: '#F1CA00', description: 'color.yellow.medium' },\n      { value: '#FAEA9C', description: 'color.yellow.light', hue: 'light' },\n      { value: '#FBF4D5', description: 'color.yellow.lightest', hue: 'light' },\n    ],\n    /* Green Naugahyde */\n    [\n      { value: '#2E6105', description: 'color.green.darkest' },\n      { value: '#4E9019', description: 'color.green.dark' },\n      { value: '#5AC235', description: 'color.green.medium' },\n      { value: '#C8E4AF', description: 'color.green.light', hue: 'light' },\n      { value: '#EAF7E4', description: 'color.green.lightest', hue: 'light' },\n    ],\n  ],\n};\n\nexport const AccessiblePalette: ColorPalette = {\n  label: 'accessiblePalette',\n  tooltip: { message: 'Veni, vidi, vici' },\n  colors: [\n    [{ value: '#4A4A4A', description: 'color.gray' }],\n    [{ value: '#648FFF', description: 'color.blue' }],\n    [{ value: '#785EF0', description: 'color.purple' }],\n    [{ value: '#DC267F', description: 'color.red' }],\n    [{ value: '#FE6100', description: 'color.brown' }],\n    [{ value: '#FFB000', description: 'color.orange' }],\n    [{ value: '#F3EA14', description: 'color.yellow' }],\n  ],\n  className: 'mt-16',\n};\n"],"names":["DefaultPalette","className","label","colors","value","description","hue","AccessiblePalette","tooltip","message"],"mappings":"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"}

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,38 +1,39 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { DefaultPalette, AccessiblePalette } from "./ColorPalette.js";
-import { ColorPickerItem } from "./ColorPickerItem.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
-import { Icon } from "../Icon/Icon.js";
-const ColorPicker = /* @__PURE__ */ forwardRef(({
-  palettes = [DefaultPalette, AccessiblePalette],
-  model = "#4A4A4A",
-  onSuccess,
-  ...restProps
-}, ref) => {
+import { jsx as l, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import u from "clsx";
+import { useTranslation as x } from "react-i18next";
+import { DefaultPalette as b, AccessiblePalette as v } from "./ColorPalette.js";
+import { ColorPickerItem as N } from "./ColorPickerItem.js";
+import { Tooltip as C } from "../Tooltip/Tooltip.js";
+import { Icon as m } from "../Icon/Icon.js";
+const T = /* @__PURE__ */ k(({
+  palettes: t = [b, v],
+  model: s = "#4A4A4A",
+  onSuccess: r,
+  ...a
+}, n) => {
   const {
-    t
-  } = useTranslation(), handleClick = (item) => {
-    item && (onSuccess == null || onSuccess(item));
+    t: d
+  } = x(), c = (e) => {
+    e && (r == null || r(e));
   };
-  return /* @__PURE__ */ jsx("div", { ref, ...restProps, children: palettes.map((palette, paletteIdx) => /* @__PURE__ */ jsxs("div", { className: clsx("color-picker mx-8", palette.className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "color-picker-label small mt-4 mb-8", children: [
-      t(palette.label),
-      palette.tooltip && /* @__PURE__ */ jsx(Tooltip, { message: "", placement: "auto", ...palette.tooltip, children: /* @__PURE__ */ jsx(Icon, { name: "info-circle", size: "18", className: "mx-4 position-relative", style: {
+  return /* @__PURE__ */ l("div", { ref: n, ...a, children: t.map((e, p) => /* @__PURE__ */ i("div", { className: u("color-picker mx-8", e.className), children: [
+    /* @__PURE__ */ i("div", { className: "color-picker-label small mt-4 mb-8", children: [
+      d(e.label),
+      e.tooltip && /* @__PURE__ */ l(C, { message: "", placement: "auto", ...e.tooltip, children: /* @__PURE__ */ l(m, { name: "info-circle", size: "18", className: "mx-4 position-relative", style: {
         top: "4px"
       } }) })
     ] }),
     // Show/hide the reset option
-    palette.reset && /* @__PURE__ */ jsxs("button", { className: "color-picker-reset small my-8 gap-4", onClick: () => handleClick(palette.reset), children: [
-      /* @__PURE__ */ jsx(Icon, { name: "delete-color", size: "20" }),
-      palette.reset.description
+    e.reset && /* @__PURE__ */ i("button", { className: "color-picker-reset small my-8 gap-4", onClick: () => c(e.reset), children: [
+      /* @__PURE__ */ l(m, { name: "delete-color", size: "20" }),
+      e.reset.description
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "color-picker-palette d-flex gap-2 justify-content-between", children: palette.colors.map((hues, hueIndex) => /* @__PURE__ */ jsx("div", { className: "color-picker-hue d-flex gap-2 justify-content-between flex-column ", children: hues.map((color) => /* @__PURE__ */ jsx("button", { "aria-label": color.description, className: "color-picker-hue-color", onClick: () => handleClick(color), children: /* @__PURE__ */ jsx(ColorPickerItem, { ...restProps, model: color, selected: model === color.value }) }, color.value)) }, hueIndex)) })
-  ] }, paletteIdx)) });
+    /* @__PURE__ */ l("div", { className: "color-picker-palette d-flex gap-2 justify-content-between", children: e.colors.map((f, h) => /* @__PURE__ */ l("div", { className: "color-picker-hue d-flex gap-2 justify-content-between flex-column ", children: f.map((o) => /* @__PURE__ */ l("button", { "aria-label": o.description, className: "color-picker-hue-color", onClick: () => c(o), children: /* @__PURE__ */ l(N, { ...a, model: o, selected: s === o.value }) }, o.value)) }, h)) })
+  ] }, p)) });
 });
 export {
-  ColorPicker,
-  ColorPicker as default
+  T as ColorPicker,
+  T as default
 };
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { ComponentPropsWithRef, Ref, forwardRef } from 'react';\n\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\n\nimport { Icon } from '..';\nimport { Tooltip } from '../Tooltip';\nimport {\n  AccessiblePalette,\n  ColorPalette,\n  ColorPaletteHues,\n  ColorPaletteItem,\n  DefaultPalette,\n} from './ColorPalette';\nimport ColorPickerItem from './ColorPickerItem';\n\nexport interface ColorPickerProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Palettes of pickable colors\n   */\n  palettes?: ColorPalette[];\n\n  /**\n   * Current picked color\n   */\n  model?: string;\n\n  /**\n   * Triggered when a color is picked\n   */\n  onSuccess?: (item: ColorPaletteItem) => void;\n}\n\nexport const ColorPicker = forwardRef(\n  (\n    {\n      palettes = [DefaultPalette, AccessiblePalette],\n      model = '#4A4A4A',\n      onSuccess,\n      ...restProps\n    }: ColorPickerProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const { t } = useTranslation();\n    const handleClick = (item?: ColorPaletteItem) => {\n      item && onSuccess?.(item);\n    };\n\n    return (\n      <div ref={ref} {...restProps}>\n        {palettes.map((palette: ColorPalette, paletteIdx) => (\n          <div\n            key={paletteIdx}\n            className={clsx('color-picker mx-8', palette.className)}\n          >\n            <div className=\"color-picker-label small mt-4 mb-8\">\n              {t(palette.label)}\n              {palette.tooltip && (\n                <Tooltip message=\"\" placement=\"auto\" {...palette.tooltip}>\n                  <Icon\n                    name=\"info-circle\"\n                    size=\"18\"\n                    className=\"mx-4 position-relative\"\n                    style={{ top: '4px' }}\n                  />\n                </Tooltip>\n              )}\n            </div>\n\n            {\n              // Show/hide the reset option\n              palette.reset && (\n                <button\n                  className=\"color-picker-reset small my-8 gap-4\"\n                  onClick={() => handleClick(palette.reset)}\n                >\n                  <Icon name=\"delete-color\" size=\"20\" />\n                  {palette.reset.description}\n                </button>\n              )\n            }\n\n            <div className=\"color-picker-palette d-flex gap-2 justify-content-between\">\n              {palette.colors.map((hues: ColorPaletteHues, hueIndex) => (\n                <div\n                  key={hueIndex}\n                  className=\"color-picker-hue d-flex gap-2 justify-content-between flex-column \"\n                >\n                  {hues.map((color) => (\n                    <button\n                      key={color.value}\n                      aria-label={color.description}\n                      className=\"color-picker-hue-color\"\n                      onClick={() => handleClick(color)}\n                    >\n                      <ColorPickerItem\n                        {...restProps}\n                        model={color}\n                        selected={model === color.value}\n                      />\n                    </button>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"names":["ColorPicker","palettes","DefaultPalette","AccessiblePalette","model","onSuccess","restProps","ref","t","useTranslation","handleClick","item","map","palette","paletteIdx","clsx","className","jsxs","label","tooltip","jsx","Tooltip","Icon","top","reset","description","colors","hues","hueIndex","color","ColorPickerItem","value"],"mappings":";;;;;;;;AAiCaA,MAAAA,sBACX,CACE;AAAA,EACEC,UAAAA,IAAW,CAACC,GAAgBC,CAAiB;AAAA,EAC7CC,OAAAA,IAAQ;AAAA,EACRC,WAAAA;AAAAA,EACA,GAAGC;AACa,GAClBC,MACG;AACG,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvBC,IAAcA,CAACC,MAA4B;AAC/CA,IAAAA,MAAQN,KAAAA,QAAAA,EAAYM;AAAAA,EAAI;AAG1B,2BACG,OAAI,EAAA,KAAAJ,GAAcD,GAAAA,GAChBL,YAASW,IAAI,CAACC,GAAuBC,wBACnC,OAEC,EAAA,WAAWC,EAAK,qBAAqBF,EAAQG,SAAS,GAEtD,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,sCACZT,UAAAA;AAAAA,MAAAA,EAAEK,EAAQK,KAAK;AAAA,MACfL,EAAQM,WACP,gBAAAC,EAACC,KAAQ,SAAQ,IAAG,WAAU,WAAWR,EAAQM,SAC/C,UAAA,gBAAAC,EAACE,KACC,MAAK,eACL,MAAK,MACL,WAAU,0BACV,OAAO;AAAA,QAAEC,KAAK;AAAA,SAAQ,EAE1B,CAAA;AAAA,IAAA,GAEJ;AAAA;AAAA,IAIEV,EAAQW,SACN,gBAAAP,EAAC,UACC,EAAA,WAAU,uCACV,SAAS,MAAMP,EAAYG,EAAQW,KAAK,GAExC,UAAA;AAAA,MAAA,gBAAAJ,EAACE,GAAK,EAAA,MAAK,gBAAe,MAAK,MAAI;AAAA,MAClCT,EAAQW,MAAMC;AAAAA,IAAAA,GACjB;AAAA,IAIJ,gBAAAL,EAAC,SAAI,WAAU,6DACZP,YAAQa,OAAOd,IAAI,CAACe,GAAwBC,wBAC1C,OAEC,EAAA,WAAU,sEAETD,UAAKf,EAAAA,IAAKiB,OACR,gBAAAT,EAAA,UAAA,EAEC,cAAYS,EAAMJ,aAClB,WAAU,0BACV,SAAS,MAAMf,EAAYmB,CAAK,GAEhC,4BAACC,GACC,EAAA,GAAIxB,GACJ,OAAOuB,GACP,UAAUzB,MAAUyB,EAAME,MAAM,CAAA,EAR7BF,GAAAA,EAAME,KAUb,CACD,EAAA,GAhBIH,CAiBP,CACD,EACH,CAAA;AAAA,EAAA,KApDKd,CAqDP,CACD,EACH,CAAA;AAEJ,CACF;"}

package/dist/components/ColorPicker/ColorPickerItem.js

@@ -1,14 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { Icon } from "../Icon/Icon.js";
-const ColorPickerItem = ({
-  model,
-  selected,
-  className
-}) => model.isReset ? /* @__PURE__ */ jsx(Icon, { name: "delete-color" }) : /* @__PURE__ */ jsx("div", { "aria-label": model.description, className: clsx("color-picker-hue-color-item rounded-1", className, model.hue === "light" ? "light" : "dark", selected && "selected"), style: {
-  backgroundColor: model.value
+import { jsx as o } from "react/jsx-runtime";
+import i from "clsx";
+import { Icon as l } from "../Icon/Icon.js";
+const m = ({
+  model: e,
+  selected: r,
+  className: t
+}) => e.isReset ? /* @__PURE__ */ o(l, { name: "delete-color" }) : /* @__PURE__ */ o("div", { "aria-label": e.description, className: i("color-picker-hue-color-item rounded-1", t, e.hue === "light" ? "light" : "dark", r && "selected"), style: {
+  backgroundColor: e.value
 } });
 export {
-  ColorPickerItem,
-  ColorPickerItem as default
+  m as ColorPickerItem,
+  m as default
 };
+//# sourceMappingURL=ColorPickerItem.js.map

package/dist/components/ColorPicker/ColorPickerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerItem.js","sources":["../../../src/components/ColorPicker/ColorPickerItem.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { Icon } from '..';\nimport { ColorPaletteItem } from './ColorPalette';\n\nexport interface ColorPickerItemProps {\n  /**\n   * Color item to display\n   */\n  model: ColorPaletteItem;\n  /**\n   * Render as selected\n   */\n  selected?: boolean;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport const ColorPickerItem = ({\n  model,\n  selected,\n  className,\n}: ColorPickerItemProps) =>\n  model.isReset ? (\n    <Icon name=\"delete-color\" />\n  ) : (\n    <div\n      aria-label={model.description}\n      className={clsx(\n        'color-picker-hue-color-item rounded-1',\n        className,\n        model.hue === 'light' ? 'light' : 'dark',\n        selected && 'selected',\n      )}\n      style={{ backgroundColor: model.value }}\n    ></div>\n  );\n\nColorPickerItem.displayName = 'ColorPickerItem';\n\nexport default ColorPickerItem;\n"],"names":["ColorPickerItem","model","selected","className","isReset","jsx","Icon","description","clsx","hue","backgroundColor","value"],"mappings":";;;AAoBO,MAAMA,IAAkBA,CAAC;AAAA,EAC9BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AACoB,MACpBF,EAAMG,UACJ,gBAAAC,EAACC,GAAK,EAAA,MAAK,gBAAiB,IAE5B,gBAAAD,EAAC,OACC,EAAA,cAAYJ,EAAMM,aAClB,WAAWC,EACT,yCACAL,GACAF,EAAMQ,QAAQ,UAAU,UAAU,QAClCP,KAAY,UACd,GACA,OAAO;AAAA,EAAEQ,iBAAiBT,EAAMU;AAAM,EACvC,CAAA;"}

package/dist/components/Combobox/Combobox.js

@@ -1,41 +1,42 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import ComboboxTrigger from "./ComboboxTrigger.js";
-import { Dropdown } from "../Dropdown/Dropdown.js";
-import { Loading } from "../Loading/Loading.js";
-const Combobox = ({
-  onSearchResultsChange,
-  onSearchInputChange,
-  options,
-  value,
-  isLoading,
-  noResult,
-  searchMinLength,
-  placeholder
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as C, useEffect as T, Fragment as k } from "react";
+import { useTranslation as v } from "react-i18next";
+import N from "./ComboboxTrigger.js";
+import { Dropdown as n } from "../Dropdown/Dropdown.js";
+import { Loading as S } from "../Loading/Loading.js";
+const s = ({
+  onSearchResultsChange: m,
+  onSearchInputChange: p,
+  options: o,
+  value: d,
+  isLoading: l,
+  noResult: u,
+  searchMinLength: h,
+  placeholder: f
 }) => {
   const {
-    t
-  } = useTranslation(), [localValue, setLocalValue] = useState([]);
-  useEffect(() => {
-    onSearchResultsChange(localValue);
-  }, [localValue]);
-  const handleOptionClick = (value2) => {
-    setLocalValue([value2]);
-  }, renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
-    /* @__PURE__ */ jsx(Loading, { isLoading }),
-    /* @__PURE__ */ jsx("span", { className: "ps-4", children: t("explorer.search.pending") })
-  ] }) : noResult ? /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), children: option.label }),
-    index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
-  ] }, index));
-  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, children: [
-    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value }),
-    /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
+    t: a
+  } = v(), [c, g] = C([]);
+  T(() => {
+    m(c);
+  }, [c]);
+  const b = (r) => {
+    g([r]);
+  }, x = () => l ? /* @__PURE__ */ t("div", { className: "d-flex align-items-center p-4", children: [
+    /* @__PURE__ */ e(S, { isLoading: l }),
+    /* @__PURE__ */ e("span", { className: "ps-4", children: a("explorer.search.pending") })
+  ] }) : u ? /* @__PURE__ */ e("div", { className: "p-4", children: a("portal.no.result") }) : o.map((r, i) => /* @__PURE__ */ t(k, { children: [
+    /* @__PURE__ */ e(n.Item, { type: "select", icon: r.icon, onClick: () => b(r.value), children: r.label }),
+    i < o.length - 1 && /* @__PURE__ */ e(n.Separator, {})
+  ] }, i));
+  return /* @__PURE__ */ t(n, { block: !0, children: [
+    /* @__PURE__ */ e(s.Trigger, { placeholder: f, searchMinLength: h, handleSearchInputChange: p, value: d }),
+    /* @__PURE__ */ e(n.Menu, { children: x() })
   ] });
 };
-Combobox.Trigger = ComboboxTrigger;
+s.Trigger = N;
 export {
-  Combobox,
-  Combobox as default
+  s as Combobox,
+  s as default
 };
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { ChangeEvent, Fragment, useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport { Dropdown } from '../Dropdown';\nimport { Loading } from '../Loading';\nimport ComboboxTrigger from './ComboboxTrigger';\n\nexport interface ComboboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  onSearchResultsChange: (model: (string | number)[]) => void;\n  onSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  options: OptionListItemType[];\n  value: string;\n  isLoading: boolean;\n  noResult: boolean;\n  searchMinLength?: number;\n  placeholder?: string;\n}\n\nexport interface OptionListItemType {\n  /**\n   * Value\n   */\n  value: string | number;\n  /**\n   * Label\n   */\n  label: string;\n  /**\n   * Add an icon\n   */\n  icon?: any;\n}\n\nexport const Combobox = ({\n  onSearchResultsChange,\n  onSearchInputChange,\n  options,\n  value,\n  isLoading,\n  noResult,\n  searchMinLength,\n  placeholder,\n}: ComboboxProps) => {\n  const { t } = useTranslation();\n\n  const [localValue, setLocalValue] = useState<(string | number)[]>([]);\n\n  useEffect(() => {\n    onSearchResultsChange(localValue);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [localValue]);\n\n  const handleOptionClick = (value: string | number) => {\n    setLocalValue([value]);\n  };\n\n  const renderContent = () => {\n    if (isLoading) {\n      return (\n        <div className=\"d-flex align-items-center p-4\">\n          <Loading isLoading={isLoading} />\n          <span className=\"ps-4\">{t('explorer.search.pending')}</span>\n        </div>\n      );\n    }\n\n    if (noResult) {\n      return <div className=\"p-4\">{t('portal.no.result')}</div>;\n    }\n\n    return options.map((option, index) => (\n      <Fragment key={index}>\n        <Dropdown.Item\n          type=\"select\"\n          icon={option.icon}\n          onClick={() => handleOptionClick(option.value)}\n        >\n          {option.label}\n        </Dropdown.Item>\n\n        {index < options.length - 1 && <Dropdown.Separator />}\n      </Fragment>\n    ));\n  };\n\n  return (\n    <Dropdown block>\n      <Combobox.Trigger\n        placeholder={placeholder}\n        searchMinLength={searchMinLength}\n        handleSearchInputChange={onSearchInputChange}\n        value={value}\n      />\n      <Dropdown.Menu>{renderContent()}</Dropdown.Menu>\n    </Dropdown>\n  );\n};\n\nCombobox.Trigger = ComboboxTrigger;\nCombobox.displayName = 'Combobox';\n\nexport default Combobox;\n"],"names":["Combobox","onSearchResultsChange","onSearchInputChange","options","value","isLoading","noResult","searchMinLength","placeholder","t","useTranslation","localValue","setLocalValue","useState","useEffect","handleOptionClick","renderContent","jsxs","jsx","Loading","map","option","index","Fragment","Dropdown","icon","label","length","Trigger","ComboboxTrigger"],"mappings":";;;;;;AAmCO,MAAMA,IAAWA,CAAC;AAAA,EACvBC,uBAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,aAAAA;AACa,MAAM;AACb,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GAEvB,CAACC,GAAYC,CAAa,IAAIC,EAA8B,CAAE,CAAA;AAEpEC,EAAAA,EAAU,MAAM;AACdb,IAAAA,EAAsBU,CAAU;AAAA,EAAA,GAE/B,CAACA,CAAU,CAAC;AAETI,QAAAA,IAAoBA,CAACX,MAA2B;AACtC,IAAAQ,EAAA,CAACR,CAAK,CAAC;AAAA,EAAA,GAGjBY,IAAgBA,MAChBX,IAEA,gBAAAY,EAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAQ,WAAAd,GAAqB;AAAA,sBAC7B,QAAK,EAAA,WAAU,QAAQI,UAAAA,EAAE,yBAAyB,GAAE;AAAA,EACvD,EAAA,CAAA,IAIAH,sBACM,OAAI,EAAA,WAAU,OAAOG,UAAAA,EAAE,kBAAkB,EAAE,CAAA,IAG9CN,EAAQiB,IAAI,CAACC,GAAQC,wBACzBC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAL,EAACM,EAAS,MAAT,EACC,MAAK,UACL,MAAMH,EAAOI,MACb,SAAS,MAAMV,EAAkBM,EAAOjB,KAAK,GAE5CiB,YAAOK,OACV;AAAA,IAECJ,IAAQnB,EAAQwB,SAAS,KAAM,gBAAAT,EAAAM,EAAS,WAAT,EAAqB;AAAA,EAAA,EAAA,GATxCF,CAUf,CACD;AAID,SAAA,gBAAAL,EAACO,GAAS,EAAA,OAAK,IACb,UAAA;AAAA,IAAA,gBAAAN,EAAClB,EAAS,SAAT,EACC,aAAAQ,GACA,iBAAAD,GACA,yBAAyBL,GACzB,OAAAE,GAAa;AAAA,IAEd,gBAAAc,EAAAM,EAAS,MAAT,EAAeR,YAAgB,EAAA,CAAA;AAAA,EAClC,EAAA,CAAA;AAEJ;AAEAhB,EAAS4B,UAAUC;"}

package/dist/components/Combobox/ComboboxTrigger.js

@@ -1,30 +1,31 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useDropdownContext } from "../Dropdown/DropdownContext.js";
-import { Input } from "../Input/Input.js";
-import { FormControl } from "../Form/FormControl.js";
-const ComboboxTrigger = ({
-  placeholder,
-  value = "",
-  searchMinLength = 3,
-  handleSearchInputChange
+import { jsx as t } from "react/jsx-runtime";
+import { useEffect as c } from "react";
+import { useDropdownContext as l } from "../Dropdown/DropdownContext.js";
+import { Input as f } from "../Input/Input.js";
+import { FormControl as a } from "../Form/FormControl.js";
+const C = ({
+  placeholder: n,
+  value: o = "",
+  searchMinLength: r = 3,
+  handleSearchInputChange: m
 }) => {
   const {
-    triggerProps,
-    itemProps,
-    setVisible
-  } = useDropdownContext(), inputProps = {
-    ...triggerProps,
+    triggerProps: i,
+    itemProps: s,
+    setVisible: e
+  } = l(), p = {
+    ...i,
     role: "combobox",
     onClick: () => {
-      value.length >= searchMinLength && setVisible(!0);
+      o.length >= r && e(!0);
     },
-    onChange: handleSearchInputChange
+    onChange: m
   };
-  return useEffect(() => {
-    setVisible(value.length >= searchMinLength);
-  }, [setVisible, value, searchMinLength]), /* @__PURE__ */ jsx(FormControl, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ jsx(Input, { ...inputProps, className: "max-w-512", noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown }) });
+  return c(() => {
+    e(o.length >= r);
+  }, [e, o, r]), /* @__PURE__ */ t(a, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ t(f, { ...p, className: "max-w-512", noValidationIcon: !0, placeholder: n, size: "md", type: "search", onKeyDown: s.onMenuItemKeyDown }) });
 };
 export {
-  ComboboxTrigger as default
+  C as default
 };
+//# sourceMappingURL=ComboboxTrigger.js.map