@m4l/components 9.9.0 → 9.9.1-beta-feature-m4l-components-rhf-image-selector.1

package/@types/types.d.ts

@@ -366,6 +366,7 @@ import {
   VariableSizeListOwnerState,
   VariableSizeListSlotsType,
 } from '../components/extended/React-Window/VariableSizeList/types';
+import { ImageSelectorOwnerState, ImageSelectorSlotsType } from 'src/components/ImageSelector/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -476,6 +477,7 @@ declare module '@mui/material/styles' {
     M4LReactJsonViewer: ReactJsonViewerSlotsType;
     M4LResizable: ResizableSlotsType;
     M4LResizableBox: ResizableBoxSlotsType;
+    M4LImageSelector: ImageSelectorSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -585,6 +587,7 @@ declare module '@mui/material/styles' {
     M4LReactJsonViewer: Partial<ReactJsonViewerOwnerState>;
     M4LResizable: Partial<ReactResizableOwnerState>;
     M4LResizableBox: Partial<ResizableBoxOwnerState>;
+    M4LImageSelector: Partial<ImageSelectorOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -1121,5 +1124,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LResizableBox'];
       variants?: ComponentsVariants['M4LResizableBox'];
     };
+    M4LImageSelector?: {
+      defaultProps?: ComponentsPropsList['M4LImageSelector'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageSelector'];
+      variants?: ComponentsVariants['M4LImageSelector'];
+    };
   }
 }

package/components/ImageSelector/ImageSelector.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'react';
+import { ImageSelectorProps } from './types';
+export declare const ImageSelector: <T = unknown>(props: ImageSelectorProps<T> & {
+    ref?: Ref<HTMLButtonElement>;
+}) => JSX.Element;
+//# sourceMappingURL=ImageSelector.d.ts.map

package/components/ImageSelector/ImageSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSelector.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageSelector/ImageSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,GAAG,EACJ,MAAM,OAAO,CAAC;AAWf,OAAO,EAEL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAgPjB,eAAO,MAAM,aAAa,EAAyC,CACjE,CAAC,GAAG,OAAO,EAEX,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B,KACE,GAAG,CAAC,OAAO,CAAC"}

package/components/ImageSelector/ImageSelector.js

@@ -0,0 +1,226 @@
+import { jsx as e, jsxs as b, Fragment as ie } from "@emotion/react/jsx-runtime";
+import se from "clsx";
+import { forwardRef as de } from "react";
+import { Icon as ce } from "@m4l/base";
+import { useModuleDictionary as me } from "@m4l/core";
+import { getPropDataTestId as pe } from "../../test/getNameDataTestId.js";
+import { DEFAULT_PRESENTATION_TYPE as Se, IMAGE_SELECTOR_CLASSES as t, IMAGE_SELECTOR_KEY_COMPONENT as ge } from "./constants.js";
+import { DICTIONARY as he } from "./dictionary.js";
+import { useImageSelector as ue } from "./hooks/useImageSelector.js";
+import { LoadingStateStyled as fe, CircularProgressStyled as we, OptionsGridStyled as Oe, OptionButtonStyled as Ie, OptionImageStyled as ye, EmptyStateStyled as be, RootStyled as ve, TriggerStyled as Ee, PreviewFrameStyled as Ce, PreviewImageStyled as Te, OverlayStyled as Le, PopoverStyled as Ne } from "./slots/ImageSelectorSlots.js";
+import { ImageSelectorSlots as Re } from "./slots/ImageSelectorEnum.js";
+function Ae(c, v) {
+  const {
+    value: E,
+    onChange: C,
+    endpoint: T,
+    refetchOnOpen: L = !1,
+    getOptionLabel: m,
+    getOptionImage: p,
+    isOptionEqualToValue: N,
+    presentationType: S = Se,
+    imageSize: g,
+    maxColumns: R,
+    maxRows: A,
+    size: l = "medium",
+    disabled: r = !1,
+    error: h = !1,
+    className: F,
+    dataTestId: P,
+    id: _,
+    name: x,
+    timeout: D,
+    parms: B,
+    resultField: K,
+    isExternalUrl: M,
+    isRemote: z,
+    responseToCamelCase: G
+  } = c, Y = c.onBlur, { getLabel: $ } = me(), {
+    getOptionId: j,
+    gridOwnerState: i,
+    handleBlur: k,
+    handleFocus: H,
+    handleKeyDown: U,
+    handleOptionFocus: V,
+    handleOptionKeyDown: q,
+    handleOptionRef: W,
+    handlePopoverClose: J,
+    handleSelect: Q,
+    handleToggle: X,
+    handleTriggerRef: Z,
+    isOptionSelected: ee,
+    loading: te,
+    open: u,
+    options: f,
+    optionsListId: w,
+    overlayIconSrc: oe,
+    previewLabel: O,
+    previewOwnerState: re,
+    previewSource: ae,
+    rootOwnerState: a,
+    triggerElement: ne
+  } = ue({
+    blurHandler: Y,
+    disabled: r,
+    endpoint: T,
+    error: h,
+    forwardedRef: v,
+    getOptionImage: p,
+    getOptionLabel: m,
+    isExternalUrl: M,
+    isOptionEqualToValue: N,
+    isRemote: z,
+    imageSize: g,
+    maxColumns: R,
+    maxRows: A,
+    onChange: C,
+    presentationType: S,
+    parms: B,
+    refetchOnOpen: L,
+    responseToCamelCase: G,
+    resultField: K,
+    size: l,
+    timeout: D,
+    value: E
+  }), I = te ? /* @__PURE__ */ e(fe, { ownerState: i, children: /* @__PURE__ */ e(we, { size: l }) }) : f.length > 0 ? /* @__PURE__ */ e(
+    Oe,
+    {
+      id: w,
+      role: "listbox",
+      "aria-label": "Image options",
+      ownerState: i,
+      children: f.map((n, o) => {
+        const y = ee(n), s = m(n), le = {
+          disabled: r,
+          imageSize: g,
+          selected: y,
+          size: l
+        };
+        return /* @__PURE__ */ e(
+          Ie,
+          {
+            id: j(o),
+            ref: (d) => W(o, d),
+            role: "option",
+            "aria-selected": y,
+            "aria-label": s,
+            ownerState: le,
+            disabled: r,
+            onFocus: () => V(o),
+            onKeyDown: (d) => q(o, d),
+            onClick: () => Q(n),
+            children: /* @__PURE__ */ e(
+              ye,
+              {
+                className: t.optionImage,
+                src: p(n),
+                alt: s,
+                width: "100%",
+                height: "100%",
+                enableIntersectionObserver: !1
+              }
+            )
+          },
+          `${s}-${o}`
+        );
+      })
+    }
+  ) : /* @__PURE__ */ e(
+    be,
+    {
+      ownerState: i,
+      variant: "bodyStandard",
+      children: $(he.LABEL_NO_IMAGES_AVAILABLE)
+    }
+  );
+  return /* @__PURE__ */ e(
+    ve,
+    {
+      ownerState: a,
+      className: se(F, t.root),
+      ...pe(ge, Re.root, P),
+      children: S === "standard" ? /* @__PURE__ */ b(ie, { children: [
+        /* @__PURE__ */ e(
+          Ee,
+          {
+            ref: Z,
+            type: "button",
+            id: _,
+            name: x,
+            ownerState: a,
+            className: t.trigger,
+            disabled: r,
+            "aria-haspopup": "listbox",
+            "aria-expanded": u,
+            "aria-controls": w,
+            "aria-invalid": h || void 0,
+            "aria-label": `Image selector: ${O}`,
+            onClick: X,
+            onFocus: H,
+            onBlur: k,
+            onKeyDown: U,
+            disableRipple: !0,
+            children: /* @__PURE__ */ b(
+              Ce,
+              {
+                ownerState: a,
+                className: t.previewFrame,
+                children: [
+                  /* @__PURE__ */ e(
+                    Te,
+                    {
+                      ownerState: re,
+                      className: t.previewImage,
+                      src: ae,
+                      alt: O,
+                      width: "100%",
+                      height: "100%",
+                      enableIntersectionObserver: !1
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    Le,
+                    {
+                      ownerState: a,
+                      className: t.overlay,
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ e(ce, { src: oe })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          Ne,
+          {
+            open: u,
+            anchorEl: ne,
+            onClose: J,
+            disableRestoreFocus: !0,
+            disableEnforceFocus: !0,
+            disableAutoFocus: !0,
+            anchorOrigin: { vertical: "bottom", horizontal: "left" },
+            transformOrigin: { vertical: "top", horizontal: "left" },
+            slotProps: {
+              paper: {
+                "aria-label": "Image selector options paper",
+                sx: {
+                  p: 2,
+                  overflow: "hidden",
+                  maxWidth: "calc(100vw - 32px)"
+                }
+              }
+            },
+            children: I
+          }
+        )
+      ] }) : I
+    }
+  );
+}
+const $e = de(Ae);
+export {
+  $e as ImageSelector
+};

package/components/ImageSelector/ImageSelector.styles.d.ts

@@ -0,0 +1,3 @@
+import { ImageSelectorStyles } from './types';
+export declare const imageSelectorStyles: ImageSelectorStyles;
+//# sourceMappingURL=ImageSelector.styles.d.ts.map

package/components/ImageSelector/ImageSelector.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSelector.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageSelector/ImageSelector.styles.ts"],"names":[],"mappings":"AASA,OAAO,EAEL,mBAAmB,EACpB,MAAM,SAAS,CAAC;AA0BjB,eAAO,MAAM,mBAAmB,EAAE,mBAqSjC,CAAC"}

package/components/ImageSelector/ImageSelector.styles.js

@@ -0,0 +1,246 @@
+import { OPTION_DIMENSION as d, DEFAULT_MAX_COLUMNS as b, GRID_GAP as i, DEFAULT_MAX_ROWS as y, SCROLLBAR_TRACK_SIZE as w, TRIGGER_DIMENSION as f, IMAGE_SELECTOR_CLASSES as s } from "./constants.js";
+const R = /^(-?\d+(?:\.\d+)?)px$/;
+function u(o) {
+  return o?.presentationType === "grid" && o.error;
+}
+function h(o, e) {
+  const r = R.exec(e.trim());
+  return r ? `${o + Number.parseFloat(r[1]) * 2}px` : `calc(${o}px + (${e} * 2))`;
+}
+const $ = {
+  /**
+   * Base styles for the root element of the ImageSelector component.
+   */
+  root: (o) => {
+    const { ownerState: e } = o;
+    return {
+      display: e?.presentationType === "grid" ? "flex" : "inline-flex",
+      flexDirection: "column",
+      position: "relative",
+      width: e?.presentationType === "grid" ? "100%" : "fit-content",
+      maxWidth: "100%"
+    };
+  },
+  /**
+   * Interactive trigger styles.
+   */
+  trigger: (o) => {
+    const { theme: e, ownerState: r = {} } = o, t = r.imageSize ?? f;
+    return {
+      width: `${t}px`,
+      height: `${t}px`,
+      aspectRatio: "1 / 1",
+      borderRadius: e.vars.size.borderRadius.r2,
+      border: e.vars.size.borderStroke.container,
+      borderColor: r.error ? e.vars.palette.error.main : "transparent",
+      backgroundColor: e.vars.palette.background.default,
+      overflow: "hidden",
+      padding: 0,
+      transition: "border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease",
+      [`& .${s.overlay}`]: {
+        opacity: 0
+      },
+      [`&:hover .${s.previewImage}`]: {
+        filter: r.disabled || r.isOpen ? "none" : "blur(1px)"
+      },
+      [`&:hover .${s.overlay}`]: {
+        opacity: r.disabled || r.isOpen ? 0 : 1
+      },
+      [`&:active .${s.previewImage}`]: {
+        filter: r.disabled || r.isOpen ? "none" : "blur(1px)"
+      },
+      [`&:active .${s.overlay}`]: {
+        opacity: r.disabled || r.isOpen ? 0 : 1
+      },
+      "&:focus-visible": {
+        outline: "none",
+        borderColor: e.vars.palette.primary.focus,
+        boxShadow: `0 0 0 1px ${e.vars.palette.primary.focus}`
+      },
+      "&.Mui-disabled": {
+        opacity: 0.64,
+        cursor: "not-allowed"
+      }
+    };
+  },
+  /**
+   * Preview frame styles.
+   */
+  previewFrame: (o) => {
+    const { theme: e } = o;
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: e.vars.palette.background.default
+    };
+  },
+  /**
+   * Preview image styles.
+   */
+  previewImage: (o) => {
+    const { theme: e, ownerState: r } = o;
+    return {
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
+      transition: "filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease",
+      opacity: r?.isPlaceholder ? 0.82 : 1,
+      transform: r?.disabled ? "scale(0.98)" : "scale(1)",
+      borderRadius: e.vars.size.borderRadius.r2
+    };
+  },
+  /**
+   * Overlay container styles.
+   */
+  overlay: (o) => {
+    const { theme: e } = o;
+    return {
+      position: "absolute",
+      inset: 0,
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: 0,
+      pointerEvents: "none",
+      borderRadius: e.vars.size.borderRadius.r2,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        backgroundColor: e.vars.palette.background.surface,
+        opacity: 0.5
+      },
+      transition: "opacity 0.2s ease"
+    };
+  },
+  /**
+   * Refresh icon styles rendered above the blur layer.
+   */
+  overlayIcon: (o) => {
+    const { theme: e } = o;
+    return {
+      position: "relative",
+      zIndex: 1,
+      fontSize: 18,
+      color: e.vars.palette.primary.contrastText
+    };
+  },
+  popover: {},
+  /**
+   * Options grid layout styles.
+   */
+  optionsGrid: (o) => {
+    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b, l = r?.maxRows ?? y, p = a > 0, g = l > 0, n = r?.presentationType === "grid" ? e.vars.size.baseSpacings.sp1 : void 0, x = r?.hasVerticalScroll ? w : 0, m = a * t + (a - 1) * i + x, v = l * t + (l - 1) * i, S = p ? n ? h(m, n) : `${m}px` : void 0, c = g ? n ? h(v, n) : `${v}px` : void 0;
+    return {
+      boxSizing: r?.presentationType === "grid" ? "border-box" : void 0,
+      ...p ? {
+        display: "grid",
+        gridTemplateColumns: `repeat(${a}, ${t}px)`,
+        width: S
+      } : {
+        display: "flex",
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      gap: `${i}px`,
+      alignContent: "flex-start",
+      minWidth: `${t}px`,
+      maxWidth: "100%",
+      padding: r?.presentationType === "grid" ? e.vars.size.baseSpacings.sp1 : void 0,
+      borderRadius: e.vars.size.borderRadius.r2,
+      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none",
+      ...r?.hasVerticalScroll && {
+        scrollbarGutter: "stable"
+      },
+      overflowX: p ? "auto" : "hidden",
+      overflowY: c ? "auto" : "visible",
+      ...c && {
+        maxHeight: c
+      }
+    };
+  },
+  /**
+   * Selectable option tile styles.
+   */
+  option: (o) => {
+    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d;
+    return {
+      width: `${t}px`,
+      height: `${t}px`,
+      aspectRatio: "1 / 1",
+      padding: r?.size === "small" ? e.vars.size.baseSpacings["sp0-5"] : e.vars.size.baseSpacings.sp1,
+      borderRadius: e.vars.size.borderRadius.r2,
+      border: e.vars.size.borderStroke.container,
+      borderColor: r?.selected ? e.vars.palette.primary.focus : "transparent",
+      backgroundColor: r?.selected ? e.vars.palette.primary.opacity : e.vars.palette.background.default,
+      boxShadow: r?.selected ? e.vars.customShadows.z4 : "none",
+      transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
+      "&:hover": {
+        borderColor: r?.selected ? e.vars.palette.primary.focus : e.vars.palette.border.secondary,
+        backgroundColor: e.vars.palette.background.base
+      },
+      "&:focus-visible": {
+        outline: "none",
+        borderColor: e.vars.palette.primary.focus
+      },
+      "&.Mui-disabled": {
+        opacity: 0.64
+      }
+    };
+  },
+  /**
+   * Option image sizing styles.
+   */
+  optionImage: () => ({
+    width: "100%",
+    height: "100%",
+    objectFit: "contain"
+  }),
+  /**
+   * Loading state container styles.
+   */
+  loadingState: (o) => {
+    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b;
+    return {
+      width: `${a * t + (a - 1) * i}px`,
+      maxWidth: "100%",
+      minHeight: `${t * 1.45}px`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: e.vars.size.borderRadius.r2,
+      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none"
+    };
+  },
+  /**
+   * Empty state message layout styles.
+   */
+  emptyState: (o) => {
+    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b;
+    return {
+      boxSizing: "border-box",
+      width: `${a * t + (a - 1) * i}px`,
+      maxWidth: "100%",
+      minHeight: `${t * 1.45}px`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: e.vars.size.borderRadius.r2,
+      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none",
+      textAlign: "center",
+      whiteSpace: "normal",
+      overflowWrap: "anywhere",
+      wordBreak: "break-word",
+      color: e.vars.palette.text.secondary,
+      padding: e.vars.size.baseSpacings.sp3
+    };
+  }
+};
+export {
+  $ as imageSelectorStyles
+};

package/components/ImageSelector/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const IMAGE_SELECTOR_KEY_COMPONENT = "M4LImageSelector";
+export declare const IMAGE_SELECTOR_DICTIONARY_KEY = "image_selector";
+export declare const IMAGE_SELECTOR_CLASSES: Record<"overlay" | "option" | "popover" | "root" | "trigger" | "previewFrame" | "previewImage" | "overlayIcon" | "optionsGrid" | "optionImage" | "loadingState" | "emptyState", string>;
+export declare const DEFAULT_PRESENTATION_TYPE = "standard";
+export declare const DEFAULT_TIMEOUT = 5000;
+export declare const DEFAULT_RESULT_FIELD = "data";
+export declare const DEFAULT_PLACEHOLDER_ALT = "No image selected";
+export declare const DEFAULT_MAX_COLUMNS = 4;
+export declare const DEFAULT_MAX_ROWS = 2;
+export declare const TRIGGER_DIMENSION = 42;
+export declare const OPTION_DIMENSION = 48;
+export declare const GRID_GAP = 8;
+export declare const SCROLLBAR_TRACK_SIZE = 12;
+export declare const DEFAULT_PLACEHOLDER_IMAGE_SRC = "frontend/components/ImageSelector/assets/icons/no_image.png";
+export declare const OVERLAY_ICON = "frontend/components/ImageSelector/assets/icons/arrow_reload_horizontal.svg";
+//# sourceMappingURL=constants.d.ts.map

package/components/ImageSelector/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageSelector/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAC/D,eAAO,MAAM,6BAA6B,mBAAmB,CAAC;AAE9D,eAAO,MAAM,sBAAsB,yLAGlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAAa,CAAC;AACpD,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,oBAAoB,SAAS,CAAC;AAC3C,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAC3D,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,eAAO,MAAM,6BAA6B,gEAAgE,CAAC;AAC3G,eAAO,MAAM,YAAY,+EAA+E,CAAC"}

package/components/ImageSelector/constants.js

@@ -0,0 +1,23 @@
+import { getComponentClasses as o } from "../../utils/getComponentSlotRoot.js";
+import { ImageSelectorSlots as t } from "./slots/ImageSelectorEnum.js";
+const E = "M4LImageSelector", _ = "image_selector", n = o(
+  E,
+  t
+), c = "standard", A = 5e3, L = "data", I = "No image selected", T = 4, S = 2, O = 42, a = 48, r = 8, R = 12, C = "frontend/components/ImageSelector/assets/icons/no_image.png", m = "frontend/components/ImageSelector/assets/icons/arrow_reload_horizontal.svg";
+export {
+  T as DEFAULT_MAX_COLUMNS,
+  S as DEFAULT_MAX_ROWS,
+  I as DEFAULT_PLACEHOLDER_ALT,
+  C as DEFAULT_PLACEHOLDER_IMAGE_SRC,
+  c as DEFAULT_PRESENTATION_TYPE,
+  L as DEFAULT_RESULT_FIELD,
+  A as DEFAULT_TIMEOUT,
+  r as GRID_GAP,
+  n as IMAGE_SELECTOR_CLASSES,
+  _ as IMAGE_SELECTOR_DICTIONARY_KEY,
+  E as IMAGE_SELECTOR_KEY_COMPONENT,
+  a as OPTION_DIMENSION,
+  m as OVERLAY_ICON,
+  R as SCROLLBAR_TRACK_SIZE,
+  O as TRIGGER_DIMENSION
+};

package/components/ImageSelector/dictionary.d.ts

@@ -0,0 +1,8 @@
+export declare const DICTIONARY: {
+    readonly LABEL_NO_IMAGES_AVAILABLE: "image_selector.label_no_images_available";
+};
+/**
+ * Return the dictionary namespaces required by ImageSelector.
+ */
+export declare function getImageSelectorComponentsDictionary(): string[];
+//# sourceMappingURL=dictionary.d.ts.map

package/components/ImageSelector/dictionary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageSelector/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;CAEb,CAAC;AAEX;;GAEG;AACH,wBAAgB,oCAAoC,aAEnD"}

package/components/ImageSelector/dictionary.js

@@ -0,0 +1,11 @@
+import { IMAGE_SELECTOR_DICTIONARY_KEY as e } from "./constants.js";
+const t = {
+  LABEL_NO_IMAGES_AVAILABLE: `${e}.label_no_images_available`
+};
+function _() {
+  return [e];
+}
+export {
+  t as DICTIONARY,
+  _ as getImageSelectorComponentsDictionary
+};

package/components/ImageSelector/hooks/useImageSelector.d.ts

@@ -0,0 +1,6 @@
+import { UseImageSelectorProps, UseImageSelectorResult } from '../types';
+/**
+ * Resolve the async options and interactive state used by ImageSelector.
+ */
+export declare function useImageSelector<T>(props: UseImageSelectorProps<T>): UseImageSelectorResult<T>;
+//# sourceMappingURL=useImageSelector.d.ts.map

package/components/ImageSelector/hooks/useImageSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageSelector.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/ImageSelector/hooks/useImageSelector.ts"],"names":[],"mappings":"AAwBA,OAAO,EAEL,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAalB;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,sBAAsB,CAAC,CAAC,CAAC,CAwgB3B"}