@m4l/components 9.2.52 → 9.2.54-beta.1

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -1,14 +1,15 @@
-import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { M as MenuItem } from "../../MenuItem/MenuItem.js";
-function renderOption(optionProps, option) {
+const MemoizedMenuItem = memo(MenuItem);
+const renderOption = (optionProps, option) => {
   const { className, ...otherOptionProps } = optionProps;
-  return /* @__PURE__ */ createElement(
-    MenuItem,
+  return /* @__PURE__ */ jsx(
+    MemoizedMenuItem,
     {
       ...otherOptionProps,
       selected: option.selected,
       color: "default",
-      key: option.id || option.label,
       label: option.label,
       disabled: option.disabled,
       startIcon: option.startAdornment,
@@ -16,7 +17,7 @@ function renderOption(optionProps, option) {
       size: option.size
     }
   );
-}
+};
 export {
   renderOption as r
 };

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.js

@@ -44,7 +44,7 @@ styled(Typography, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.typography
 })(autocompleteSyles?.typography);
-const ImageStyled = styled(Image, {
+styled(Image, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.image
 })(autocompleteSyles?.image);
@@ -65,13 +65,12 @@ const AdormentsStyled = styled("div", {
   slot: AutocompleteSlots.adorments
 })(autocompleteSyles?.adorments);
 export {
-  AdormentsStyled as A,
-  ChipStyled as C,
-  ImageStyled as I,
+  AutocompleteRootStyled as A,
+  CircularProgressStyled as C,
+  IconButtonStyled as I,
   PopperComponentStyled as P,
   RenderInputStyled as R,
   SkeletonAutocompleteStyled as S,
-  CircularProgressStyled as a,
-  IconButtonStyled as b,
-  AutocompleteRootStyled as c
+  AdormentsStyled as a,
+  ChipStyled as b
 };

package/components/mui_extended/Autocomplete/types.d.ts

@@ -32,11 +32,13 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
     getOptionUrlImage?: (option: T) => string;
     onChange: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
+    htmlFor?: string;
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.
  */
 export interface AutocompleteOwnerState extends Pick<BaseAutocompleteProps, 'size' | 'variant'> {
+    error?: boolean;
     disabled?: boolean;
     multiple?: boolean;
 }

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -27,7 +27,7 @@ const useDynamicFilterAndSort = (props) => {
     setCookie,
     getCookie,
     filterSortAutomatic = true,
-    visibleRefresh,
+    visibleRefresh = false,
     withExternalRefresh
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -91,16 +91,19 @@ const useDynamicFilterAndSort = (props) => {
     }
   }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, isValidFilters]);
   const onRefresh = useCallback(() => {
-    if (fireOnChangeFilterRef.current) {
-      fireOnChangeFilterRef.current.fireOnChangeFilter();
-    }
-    if (fireOnChangeSortRef.current) {
-      fireOnChangeSortRef.current.fireOnChangeSort();
-    }
-    if (isValidFilters()) {
-      onChangeFilterSort(eventRefs.current);
+    if (!filterSortAutomatic) {
+      if (fireOnChangeFilterRef.current) {
+        fireOnChangeFilterRef.current.fireOnChangeFilter();
+      }
+      if (fireOnChangeSortRef.current) {
+        fireOnChangeSortRef.current.fireOnChangeSort();
+      }
+    } else {
+      if (isValidFilters()) {
+        onChangeFilterSort(eventRefs.current);
+      }
     }
-  }, [onChangeFilterSort, fireOnChangeFilterRef, isValidFilters]);
+  }, [filterSortAutomatic, isValidFilters, onChangeFilterSort]);
   const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ownerState: {}, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.filter, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }) }),
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.sort, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") }) })

package/index.js

@@ -34,6 +34,7 @@ import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
+import { c as c2 } from "./components/DataGrid/constants.js";
 import { C as C2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
 import { C as C3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
@@ -120,7 +121,7 @@ import { D as D8 } from "./components/formatters/DistanceToNowFormatter/Distance
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { G } from "./components/GridLayout/GridLayout.js";
 import { R as R3 } from "./components/GridLayout/subcomponents/Responsive/index.js";
-import { c as c2, d as d3, e } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { c as c3, d as d3, e } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
@@ -179,7 +180,7 @@ import { W } from "./components/WindowBase/WindowBase.js";
 import { u as u15 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { a as a9, u as u16 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M6, W as W2, a as a10 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
-import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
+import { c as c4 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { D as D9, a as a11, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a12, g as g27 } from "./components/ModalDialog/dictionary.js";
@@ -203,7 +204,7 @@ import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
 import { u as u30 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { c as c4 } from "./utils/capitalizeFirstLetter.js";
+import { c as c5 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g30 } from "./utils/getComponentUtilityClass.js";
 import { g as g31 } from "./utils/getPaletteColor.js";
@@ -256,6 +257,7 @@ export {
   C10 as ColumnSetCheckFormatter,
   C11 as ColumnUncertaintyFormatter,
   C15 as ConcatenatedFormatter,
+  c2 as DATAGRID_SEMANTIC_WIDTHS,
   D as DICTIONARY,
   D2 as DataGrid,
   D7 as DateFormatter,
@@ -374,11 +376,11 @@ export {
   W3 as WindowConfirm,
   W2 as WindowToolsMFContext,
   a10 as WindowToolsMFProvider,
-  c2 as addLayoutItemToBreakPointIfNoExists,
+  c3 as addLayoutItemToBreakPointIfNoExists,
   d3 as addLayoutItemToBreakPoints,
-  c4 as capitalizeFirstLetter,
+  c5 as capitalizeFirstLetter,
   e as cloneLayouts,
-  c3 as createDynamicMFStore,
+  c4 as createDynamicMFStore,
   c as createToaster,
   d as defaultCommonActionsDictionary,
   d2 as dragResizeWindowRNDClasses,

package/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.5'
+const PACKAGE_VERSION = '2.8.2'
 const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.52",
+  "version": "9.2.54-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^7.0.0",
-    "@m4l/styles": "^7.0.0",
+    "@m4l/graphics": "7.1.2-beta.1",
+    "@m4l/styles": "7.1.29-beta.1",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/storybook/components/extended/mui/Autocomplete/AutoComple.stories.d.ts

@@ -18,3 +18,4 @@ export declare const ImageMultiple: Story;
 export declare const Loading: Story;
 export declare const Refresh: Story;
 export declare const Skeleton: Story;
+export declare const WithError: Story;

package/storybook/hook-form/RHFAutocomplete/RHFAutocomplete.stories.d.ts

@@ -1,15 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { RHFAutocompleteProps } from '../../../src/components/hook-form/RHFAutocomplete/types';
-type OptionType = {
-    id: number;
-    label: string;
-    imageUrl?: string;
-};
+import { OptionType } from './constants';
 declare const meta: Meta<RHFAutocompleteProps<OptionType>>;
 export default meta;
 type Story = StoryObj<RHFAutocompleteProps<OptionType>>;
 export declare const Default: Story;
-export declare const MultipleSelection: Story;
+export declare const InitialNull: Story;
+/**
+ * Preselected Option With not Options
+ */
+export declare const PreselectedOptionNotOptions: Story;
+export declare const Multiple: Story;
+export declare const MultiplePreselected: Story;
 export declare const WithImages: Story;
 export declare const LoadingState: Story;
 export declare const Disabled: Story;

package/storybook/hook-form/RHFAutocomplete/constants.d.ts

@@ -0,0 +1,23 @@
+export declare const FIELD_NAME_INITIAL_NULL = "rhf-autocomplete-initial-null";
+export declare const FIELD_NAME_REQUIRED = "rhf-autocomplete";
+export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-preselected";
+export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-not-in-options";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-preselected-multiple";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-multiple-not-in-options";
+export type OptionType = {
+    id: number;
+    label: string;
+    imageUrl?: string;
+};
+export declare const RHFAUTOCOMPLETE_OPTIONS_MOCK: OptionType[];
+export declare const RHFAUTOCOMPLETE_OPTIONS_WITH_IMAGES_MOCK: OptionType[];
+export declare const VALIDATION_SCHEMA: import('yup/lib/object').OptionalObjectSchema<{
+    "rhf-autocomplete": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
+    "rhf-autocomplete": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>;
+export declare const INITIAL_VALUES: {
+    "rhf-autocomplete-initial-null": null;
+    "rhf-autocomplete-preselected": OptionType;
+    "rhf-autocomplete-preselected-multiple": OptionType[];
+};

package/storybook/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.stories.d.ts

@@ -1,14 +1,21 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { RHFAutocompleteAsyncBaseProps } from '../../../src/components/hook-form/RHFAutocompleteAsync/types';
+import { RHFAutocompleteAsyncProps } from '../../../src/components/hook-form/RHFAutocompleteAsync/types';
 type OptionType = {
     id: number;
     name: string;
 };
-declare const meta: Meta<RHFAutocompleteAsyncBaseProps<OptionType>>;
+declare const meta: Meta<RHFAutocompleteAsyncProps<OptionType>>;
 export default meta;
-type Story = StoryObj<RHFAutocompleteAsyncBaseProps<OptionType>>;
+type Story = StoryObj<RHFAutocompleteAsyncProps<OptionType>>;
 export declare const Default: Story;
-export declare const MultipleSelection: Story;
+export declare const PreselectedOption: Story;
+/**
+ * Preselected Option Not Loaded In Options when combo open
+ */
+export declare const PreselectedOptionNotLoadedInOptions: Story;
+export declare const Multiple: Story;
+export declare const MultiplePreselected: Story;
+export declare const MultiplePreselectedNotLoadedInOptions: Story;
 export declare const WithCustomFiltering: Story;
 export declare const LoadingState: Story;
 export declare const Disabled: Story;

package/storybook/hook-form/RHFAutocompleteAsync/constants.d.ts

@@ -1,5 +1,14 @@
+export declare const FIELD_NAME_REQUIRED = "rhf-autocomplete-async";
+export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-async-preselected";
+export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-async-preselected-not-in-options";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-async-preselected-multiple";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE_NOT_IN_OPTIONS = "rhf-autocomplete-async-preselected-multiple-not-in-options";
 export declare const RHFAUTOCOMPLETEASYNC_MSW_MOCK: {
     id: number;
     name: string;
 }[];
-export declare const MSW_HANDLERS: import('msw').HttpHandler[];
+export declare const VALIDATION_SCHEMA: import('yup/lib/object').OptionalObjectSchema<{
+    "rhf-autocomplete-async": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
+    "rhf-autocomplete-async": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>;

package/storybook/hook-form/RHFAutocompleteAsync/handlers.d.ts

@@ -0,0 +1 @@
+export declare const MSW_HANDLERS: import('msw').HttpHandler[];

package/components/hook-form/RHFAutocomplete/oldTypes.d.ts

@@ -1,43 +0,0 @@
-import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
-import { LabelProps } from '../../Label/types';
-export type GetOptionString<T> = (option: T | null) => string;
-export type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
-export type ImageProps<T> = (RHFAutocompleteTypeImageProps<T> & {
-    imageScale?: boolean;
-    imageRepeat?: never;
-}) | (RHFAutocompleteTypeImageProps<T> & {
-    imageRepeat: boolean;
-    imageScale?: never;
-});
-export interface RHFAutocompleteBaseProps<T> extends Omit<TextFieldProps, 'label' | 'variant' | 'helperText'>, Omit<LabelProps, 'label'> {
-    name: string;
-    options: Array<T>;
-    getOptionLabel: (option: T) => string;
-    isOptionEqualToValue: (option: T, value: T) => boolean;
-    skeletonWidth?: string | number;
-    skeletonHeight?: string | number;
-    loading?: boolean;
-    refresh?: () => void;
-    label?: string;
-    variant?: RHFAutocompleteVariants;
-    helperMessage?: string;
-    onOpen?: (event: React.SyntheticEvent) => void;
-    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
-    onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
-    multiple?: boolean;
-}
-export interface RHFAutocompleteTypeTextProps {
-    type: 'text';
-}
-export interface RHFAutocompleteTypeImageProps<T> {
-    type: 'image';
-    getOptionUrlImage: (option: T) => string;
-}
-export type RHFAutocompleteProps<T> = (RHFAutocompleteBaseProps<T> & ImageProps<T>) | (RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps);
-export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'>, Pick<ImageProps<any>, 'imageScale' | 'imageRepeat'> {
-    isFocus: boolean;
-    isTabSelected: boolean;
-    semantics: RHFAutocompleteVariants | 'error' | null;
-    variant?: 'withImage';
-    multiple: boolean;
-}