@m4l/components 9.19.0 → 9.20.0

package/components/ImageSelector/ImageSelector.js

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

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

@@ -1,6 +1,6 @@
 import { UseImageSelectorProps, UseImageSelectorResult } from '../types';
 /**
- * Resolve the async options and interactive state used by ImageSelector.
+ * Resolve the static or 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

@@ -1 +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"}
+{"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,CAuhB3B"}