@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J18062025.beta.1

package/components/DynamicSort/store/DynamicSortContext.js

@@ -8,77 +8,106 @@ import { f as formatToRowSort } from "../helpers/formatToRowSort.js";
 import { c as createDynamicSortStore } from "./DynamicSortStore.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const DynamicSortContext = createContext(null);
-const DynamicSortProvider = forwardRef((props, ref) => {
-  const {
-    automatic = true,
-    fields,
-    initialAppliedSorts = [],
-    onChangeSorts,
-    dataTestId = "",
-    size = "medium",
-    storeId,
-    storeDevtoolsEnabled,
-    visibleRefresh = true,
-    children
-  } = props;
-  const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const { getLabel } = useModuleDictionary();
-  const dynamicSortStoreRef = useRef();
-  if (!dynamicSortStoreRef.current) {
-    dynamicSortStoreRef.current = createDynamicSortStore({
+const DynamicSortProvider = forwardRef(
+  (props, ref) => {
+    const {
+      automatic = true,
       fields,
-      automatic,
-      getLabel,
-      dataTestId,
-      size,
+      initialAppliedSorts = [],
+      onChangeSorts,
+      dataTestId = "",
+      size = "medium",
       storeId,
-      visibleRefresh,
-      ownerState: {
-        isDirty: false,
-        inEdition: false,
-        isValid: true,
-        isEmpty: true,
-        size
-      }
-    }, storeDevtoolsEnabled);
-    dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
-  }
-  const fireOnChangeSort = useStore(
-    dynamicSortStoreRef.current,
-    (state) => state.actions.fireOnChangeSorts,
-    shallow
-  );
-  useImperativeHandle(ref, () => ({
-    fireOnChangeSort
-  }));
-  const countOnChangeSortsApplyed = useStore(
-    dynamicSortStoreRef.current,
-    (state) => state.countOnChangeSortsApplyed,
-    shallow
-  );
-  useEffect(() => {
-    if (countOnChangeSortsApplyed === 0) {
-      return;
-    }
-    const state = dynamicSortStoreRef.current?.getState();
-    if (state) {
-      onChangeSorts?.(
-        formatToInitialSorts(state.appliedSorts),
-        formatToRowSort(state.appliedSorts)
+      storeDevtoolsEnabled,
+      visibleRefresh = true,
+      children
+    } = props;
+    const { currentSize } = useComponentSize(size);
+    const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+    const { getLabel } = useModuleDictionary();
+    const dynamicSortStoreRef = useRef();
+    if (!dynamicSortStoreRef.current) {
+      dynamicSortStoreRef.current = createDynamicSortStore(
+        {
+          fields,
+          automatic,
+          getLabel,
+          dataTestId,
+          size,
+          storeId,
+          visibleRefresh,
+          ownerState: {
+            isDirty: false,
+            inEdition: false,
+            isValid: true,
+            isEmpty: true,
+            size
+          }
+        },
+        storeDevtoolsEnabled
       );
+      dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
     }
-  }, [countOnChangeSortsApplyed]);
-  useEffect(() => {
-    if (dynamicSortStoreRef.current?.getState().size !== adjustedSize) {
-      dynamicSortStoreRef.current?.getState().actions.setSize(adjustedSize);
-    }
-    if (dynamicSortStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
-      dynamicSortStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
-    }
-  }, [adjustedSize, visibleRefresh]);
-  return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
-});
+    const fireOnChangeSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.fireOnChangeSorts,
+      shallow
+    );
+    const addExternalSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.addExternalSort,
+      shallow
+    );
+    const removeExternalSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.removeExternalSort,
+      shallow
+    );
+    const getNewId = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.getNewId,
+      shallow
+    );
+    const getCurrentSorts = useStore(
+      dynamicSortStoreRef.current,
+      (state) => () => state.appliedSorts,
+      shallow
+    );
+    useImperativeHandle(ref, () => ({
+      fireOnChangeSort,
+      addExternalSort,
+      removeExternalSort,
+      getNewId,
+      getCurrentSorts
+    }));
+    const countOnChangeSortsApplyed = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.countOnChangeSortsApplyed,
+      shallow
+    );
+    useEffect(() => {
+      if (countOnChangeSortsApplyed === 0) {
+        return;
+      }
+      const state = dynamicSortStoreRef.current?.getState();
+      if (state) {
+        onChangeSorts?.(
+          formatToInitialSorts(state.appliedSorts),
+          formatToRowSort(state.appliedSorts)
+        );
+      }
+    }, [countOnChangeSortsApplyed]);
+    useEffect(() => {
+      if (dynamicSortStoreRef.current?.getState().size !== adjustedSize) {
+        dynamicSortStoreRef.current?.getState().actions.setSize(adjustedSize);
+      }
+      if (dynamicSortStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
+        dynamicSortStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
+      }
+    }, [adjustedSize, visibleRefresh]);
+    return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
+  }
+);
 export {
   DynamicSortProvider as D,
   DynamicSortContext as a

package/components/DynamicSort/store/DynamicSortStore.js

@@ -9,7 +9,9 @@ const updateAvailableFields = (state) => {
     let add;
     const field = state.fields[index];
     add = true;
-    const fIndx = state.appliedSorts.findIndex((f) => f.field.name === field.name);
+    const fIndx = state.appliedSorts.findIndex(
+      (f) => f.field.name === field.name
+    );
     if (fIndx > -1) {
       add = false;
     }
@@ -100,7 +102,26 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           removeSort: (id) => {
             set((state) => {
-              const index_to_remove = state.appliedSorts.findIndex((f) => id === f.id && !f.fixed);
+              const index_to_remove = state.appliedSorts.findIndex(
+                (f) => id === f.id && !f.fixed
+              );
+              if (index_to_remove > -1) {
+                state.appliedSorts.splice(index_to_remove, 1);
+                updateAutomatic(state);
+                if (state.appliedSorts.length === 0) {
+                  state.ownerState.isDirty = false;
+                }
+              }
+            });
+          },
+          /**
+           * Elimina un campo sort por el nombre de la columna
+           */
+          removeExternalSort: (columnName) => {
+            set((state) => {
+              const index_to_remove = state.appliedSorts.findIndex(
+                (f) => f.field.name === columnName && !f.fixed
+              );
               if (index_to_remove > -1) {
                 state.appliedSorts.splice(index_to_remove, 1);
                 updateAutomatic(state);
@@ -186,12 +207,37 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
               updateAutomatic(state);
             });
           },
+          /**
+           * Agrega un nuevo campo/atributo por el cual se va aplicar el sort externo
+           */
+          addExternalSort: (newSort) => {
+            set((state) => {
+              const existingIndex = state.appliedSorts.findIndex(
+                (sort) => sort.field.name === newSort.field.name
+              );
+              if (existingIndex > -1) {
+                const existingSort = state.appliedSorts[existingIndex];
+                state.appliedSorts[existingIndex] = {
+                  ...newSort,
+                  id: existingSort.id
+                };
+              } else {
+                if (!state.automatic) {
+                  state.ownerState.isDirty = true;
+                }
+                state.appliedSorts.push(newSort);
+              }
+              updateAutomatic(state);
+            });
+          },
           /**
            * Actualiza un sort existente
            */
           updateSort: (editSort) => {
             set((state) => {
-              const index = state.appliedSorts.findIndex((ap) => ap.id === editSort.id);
+              const index = state.appliedSorts.findIndex(
+                (ap) => ap.id === editSort.id
+              );
               if (index > -1) {
                 state.appliedSorts[index] = editSort;
               }
@@ -251,7 +297,10 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
           }
         }
       })),
-      { name: `${DYNAMIC_SORT_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
+      {
+        name: `${DYNAMIC_SORT_STORE_ID}: ${initProps.storeId}`,
+        enabled: storeDevtoolsEnabled
+      }
     )
   );
 };

package/components/DynamicSort/store/types.d.ts

@@ -98,6 +98,11 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param id //identificador unico de un sort
          */
         removeSort: (id: number) => void;
+        /**
+         * remueve un sort externo por nombre de columna (para uso desde DataGrid)
+         * @param columnName nombre de la columna
+         */
+        removeExternalSort: (columnName: string) => void;
         /**
          *
          * @param anchorEl Elemento de donde va emerger el popup
@@ -136,6 +141,12 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @returns
          */
         addSort: (newSort: SortFieldApplied) => void;
+        /**
+         * Agrega un sort externo a los sorts aplicados (applyedFilters)
+         * @param newSort Sort a agregar
+         * @returns
+         */
+        addExternalSort: (newSort: SortFieldApplied) => void;
         /**
          * Modifica un sort que se encuentra en applyedFilters
          * @param sortToEdit sort a editar

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
 import { S as SORT_ICONS } from "../../../icons.js";
@@ -25,7 +25,7 @@ function StringSort() {
     ],
     [getLabel, host_static_assets, environment_assets]
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     RHFSelect,
     {
       size,

package/components/DynamicSort/subcomponents/InputSort/InputSort.js

@@ -33,8 +33,6 @@ const InputSort = () => {
         value: inputData,
         placeholder: inputPlaceHolder,
         ownerState: { ...ownerState },
-        role: "searchbox",
-        "aria-label": "searchbox",
         ...inputHandlersProps
       }
     ),

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../../../Icon/Icon.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
-import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { e as PopoverStyled, f as PopoverHeaderStyled, g as PopoverHeaderTitleStyled, C as ContentSortStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
-import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
 function PopoverSort() {
@@ -22,7 +22,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
-  const { size } = useDynamicSortBase();
+  const { ownerState, size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -38,30 +38,26 @@ function PopoverSort() {
       anchorEl,
       onKeyDown: handleKeyDownPopper,
       onClose: handleClosePopover,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         RHFormProvider,
         {
           onSubmit,
           values: sortFormValue,
           validationSchema: popupValidationSchema,
           statusLoad,
-          children: /* @__PURE__ */ jsxs(
-            WindowBase,
-            {
-              title: labelField,
-              iconUrl: field.urlIcon,
-              variant: "text",
-              type: "popup",
-              selected: true,
-              children: [
-                /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
-                /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
-                  /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
-                  /* @__PURE__ */ jsx(ActionIntro, { size, "aria-label": "applySort" })
-                ] })
-              ]
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon, size }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, children: labelField })
+            ] }),
+            /* @__PURE__ */ jsxs(ContentSortStyled, { children: [
+              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
+                /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
+                /* @__PURE__ */ jsx(ActionIntro, { size })
+              ] })
+            ] })
+          ]
         }
       )
     }

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useSortActions } from "./useSortActions.js";
-import { h as ActionsStyled, i as ActionsClearButtonStyled, j as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
     sortIconUrl,
@@ -16,7 +16,7 @@ function SortActions() {
   } = useSortActions();
   const { size, visibleRefresh, ownerState: { isDirty } } = useDynamicSortBase();
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh, isValid: ownerState?.isValid, inEdition: ownerState?.inEdition }, children: [
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {

package/components/DynamicSort/subcomponents/SortActions/useSortActions.d.ts

@@ -11,8 +11,6 @@ declare function useSortActions(): {
     sortButtonDictionaryTooltip: string;
     ownerState: {
         isValid: boolean;
-        isDirty: boolean;
-        inEdition: boolean;
     };
 };
 export default useSortActions;

package/components/DynamicSort/subcomponents/SortActions/useSortActions.js

@@ -9,7 +9,6 @@ function useSortActions() {
   const isValid = useDynamicSortStore((state) => state.ownerState?.isValid);
   const isDirty = useDynamicSortStore((state) => state.ownerState?.isDirty);
   const appliedSorts = useDynamicSortStore((state) => state.appliedSorts);
-  const inEdition = useDynamicSortStore((state) => state.ownerState?.inEdition);
   const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
     (state) => state.actions
   );
@@ -32,7 +31,7 @@ function useSortActions() {
     onClickClearSorts,
     onClickSort: fireOnChangeSorts,
     sortButtonDictionaryTooltip,
-    ownerState: { isValid, isDirty, inEdition }
+    ownerState: { isValid }
   };
 }
 export {

package/components/DynamicSort/types.d.ts

@@ -175,4 +175,8 @@ export type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
 export type DynamicSortStyles = M4LOverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme>;
 export interface DynamicSortRef {
     fireOnChangeSort: () => void;
+    addExternalSort: (newSort: SortFieldApplied) => void;
+    removeExternalSort: (columnKey: string) => void;
+    getNewId: () => number;
+    getCurrentSorts: () => SortFieldApplied[];
 }

package/components/LanguagePopover/LanguagePopover.js

@@ -5,16 +5,17 @@ import { useEnvironment, useNetwork } from "@m4l/core";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { I as Image } from "../Image/Image.js";
-import { L as LanguagePopoverRootStyled, P as PaperStyled } from "./slots/LanguagePopoverSlots.js";
+import { L as LanguagePopoverRootStyled, P as PaperStyled, I as ImageStyled } from "./slots/LanguagePopoverSlots.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "./constants.js";
 import { L as LanguagePopoverSlots } from "./slots/LanguagePopoverEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function LanguagePopover(props) {
   const {
     disabled,
-    size
+    size = "medium"
   } = props;
   const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isFirstRender = useFirstRender();
   const { currentLocale, onChangeLocale } = useLocales();
   const { domain_token } = useEnvironment();
@@ -58,7 +59,7 @@ function LanguagePopover(props) {
       return {
         type: "menuItem",
         label: option?.name,
-        startIcon: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Image, { src: option?.urlIcon, enableIntersectionObserver: false }) }),
+        startIcon: /* @__PURE__ */ jsx(Image, { src: option?.urlIcon, enableIntersectionObserver: false }),
         onClick: () => onChangeLocale(option)
       };
     });
@@ -67,14 +68,11 @@ function LanguagePopover(props) {
   return /* @__PURE__ */ jsx(
     LanguagePopoverRootStyled,
     {
-      ownerState: {
-        size: currentSize
-      },
-      size: currentSize,
+      size: adjustedSize,
       className: classRoot,
       ...getPropDataTestId(LANGUAGE_POPOVER_KEY_COMPONENT, LanguagePopoverSlots.root),
       disabled,
-      icon: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Image, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }) }),
+      icon: /* @__PURE__ */ jsx(ImageStyled, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }),
       menuActions: getMenuActionsOptions(),
       onOpen: handleMenuOpenChange,
       slots: {

package/components/LanguagePopover/LanguagePopover.styles.js

@@ -1,29 +1,8 @@
-import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const languagePopoverStyles = {
-  /**
-   * Estilos del root
-   */
-  root: ({ theme, ownerState }) => ({
-    "&": {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "action",
-        (size) => ({
-          width: size,
-          height: size
-        })
-      ),
-      "& .MuiButtonBase-root > div": {
-        position: "absolute",
-        inset: theme.vars.size.baseSpacings.sp1
-      }
-    }
-  }),
-  image: {},
+  root: {},
+  image: {
+    height: "100%"
+  },
   /**
    *  Estilos del paper
    */

package/components/LanguagePopover/slots/LanguagePopoverSlots.d.ts

@@ -1,11 +1,5 @@
-export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {}>;
-export declare const ImageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
 export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {}>;
+}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/LanguagePopover/slots/LanguagePopoverSlots.js

@@ -1,4 +1,5 @@
 import { styled } from "@mui/material/styles";
+import { I as Image } from "../../Image/Image.js";
 import { M as MenuActions } from "../../MenuActions/MenuActions.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "../constants.js";
 import { l as languagePopoverStyles } from "../LanguagePopover.styles.js";
@@ -8,7 +9,7 @@ const LanguagePopoverRootStyled = styled(MenuActions, {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.root
 })(languagePopoverStyles.root);
-styled("div", {
+const ImageStyled = styled(Image, {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.image
 })(languagePopoverStyles.image);
@@ -17,6 +18,7 @@ const PaperStyled = styled(Paper, {
   slot: LanguagePopoverSlots.paper
 })(languagePopoverStyles.paper);
 export {
+  ImageStyled as I,
   LanguagePopoverRootStyled as L,
   PaperStyled as P
 };

package/components/LanguagePopover/types.d.ts

@@ -17,9 +17,4 @@ export interface LanguagePopoverProps {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
-export type LanguagePopoverSlotsType = keyof typeof Slots;
-export interface LanguagePopoverOwnerState {
-    size: LanguagePopoverProps['size'];
-    image?: string;
-}
-export type LanguagePopoverStyles = M4LOverridesStyleRules<LanguagePopoverSlotsType, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;
+export type LanguagePopoverStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;

package/components/PaperForm/styles.js

@@ -13,8 +13,7 @@ const paperFormStyles = {
     borderColor: theme.vars.palette.border.default,
     overflow: "hidden",
     width: "100%",
-    height: "auto",
-    container: "container / inline-size"
+    height: "auto"
   }),
   /**
    * ************************************************************

package/components/PropertyValue/PropertyValue.js

@@ -36,8 +36,7 @@ function PropertyValue(props) {
     disabled: isForm && disabled ? disabled : false,
     isForm: isForm ? true : false,
     semanticWidth,
-    valueHeight,
-    size: currentSize
+    valueHeight
   };
   const renderIcon = () => {
     if (!startAdornment) {