@gridsuite/commons-ui 0.53.0 → 0.54.0

package/dist/components/react-hook-form/ExpandingTextField.d.ts

@@ -1,6 +1,6 @@
 import { TextInputProps } from '../..';
-import { FunctionComponent } from 'react';
 import { TextFieldProps } from '@mui/material';
+import { FunctionComponent } from 'react';
 
 interface ExpandingTextFieldProps extends TextInputProps {
     name: string;

package/dist/components/react-hook-form/ExpandingTextField.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Typography } from "@mui/material";
-import { useFormContext, useWatch } from "react-hook-form";
+import { useWatch } from "react-hook-form";
 import "../TreeViewFinder/TreeViewFinder.js";
 import "../TopBar/TopBar.js";
 import "../TopBar/GridLogo.js";
@@ -25,6 +25,8 @@ import "autosuggest-highlight/parse";
 import "clsx";
 import "../CardErrorBoundary/card-error-boundary.js";
 import "notistack";
+import { useCustomFormContext } from "./provider/use-custom-form-context.js";
+import "./provider/custom-form-provider.js";
 import "./autocomplete-input.js";
 import TextInput from "./text-input.js";
 import "./radio-input.js";
@@ -50,7 +52,7 @@ const ExpandingTextField = ({
   ...otherTexFieldProps
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  const { control } = useFormContext();
+  const { control } = useCustomFormContext();
   const descriptionWatch = useWatch({
     name,
     control

package/dist/components/react-hook-form/autocomplete-input.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { Autocomplete, TextField } from "@mui/material";
-import { useFormContext, useController } from "react-hook-form";
+import { useController } from "react-hook-form";
 import { isFieldRequired, genHelperPreviousValue, genHelperError, identity } from "./utils/functions.js";
 import FieldLabel from "./utils/field-label.js";
+import { useCustomFormContext } from "./provider/use-custom-form-context.js";
 const AutocompleteInput = ({
   name,
   label,
@@ -20,7 +21,7 @@ const AutocompleteInput = ({
   formProps,
   ...props
 }) => {
-  const { validationSchema, getValues, removeOptional } = useFormContext();
+  const { validationSchema, getValues, removeOptional } = useCustomFormContext();
   const {
     field: { onChange, value, ref },
     fieldState: { error }

package/dist/components/react-hook-form/directory-items-input.js

@@ -5,14 +5,15 @@ import { useSnackMessage } from "../../hooks/useSnackMessage.js";
 import FieldLabel from "./utils/field-label.js";
 import FolderIcon from "@mui/icons-material/Folder";
 import { useMemo, useState, useCallback } from "react";
-import { useFieldArray, useFormContext, useController } from "react-hook-form";
+import { useFieldArray, useController } from "react-hook-form";
 import { useIntl } from "react-intl";
 import ErrorInput from "./error-management/error-input.js";
 import MidFormError from "./error-management/mid-form-error.js";
 import { RawReadOnlyInput } from "./raw-read-only-input.js";
 import { mergeSx } from "../../utils/styles.js";
 import DirectoryItemSelector from "../DirectoryItemSelector/directory-item-selector.js";
-import { isFieldFromContextRequired } from "./utils/functions.js";
+import { useCustomFormContext } from "./provider/use-custom-form-context.js";
+import { isFieldRequired } from "./utils/functions.js";
 const NAME = "name";
 const styles = {
   formDirectoryElements1: {
@@ -72,8 +73,8 @@ const DirectoryItemsInput = ({
   } = useFieldArray({
     name
   });
-  const formContext = useFormContext();
-  const { getValues } = formContext;
+  const formContext = useCustomFormContext();
+  const { getValues, validationSchema } = formContext;
   const {
     fieldState: { error }
   } = useController({
@@ -122,9 +123,9 @@ const DirectoryItemsInput = ({
             FieldLabel,
             {
               label,
-              optional: labelRequiredFromContext && !isFieldFromContextRequired(
+              optional: labelRequiredFromContext && !isFieldRequired(
                 name,
-                formContext,
+                validationSchema,
                 getValues()
               )
             }

package/dist/components/react-hook-form/provider/custom-form-provider.d.ts

@@ -0,0 +1,13 @@
+import { UseFormReturn } from 'react-hook-form';
+import { default as React, PropsWithChildren } from 'react';
+
+import * as yup from 'yup';
+type CustomFormContextProps = {
+    removeOptional?: boolean;
+    validationSchema: yup.AnySchema;
+};
+export type MergedFormContextProps = UseFormReturn<any> & CustomFormContextProps;
+type CustomFormProviderProps = PropsWithChildren<MergedFormContextProps>;
+export declare const CustomFormContext: React.Context<CustomFormContextProps>;
+declare const CustomFormProvider: (props: CustomFormProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomFormProvider;

package/dist/components/react-hook-form/provider/custom-form-provider.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+import { FormProvider } from "react-hook-form";
+import * as yup from "yup";
+const CustomFormContext = createContext({
+  removeOptional: false,
+  validationSchema: yup.object()
+});
+const CustomFormProvider = (props) => {
+  const { validationSchema, removeOptional, children, ...formMethods } = props;
+  return /* @__PURE__ */ jsx(FormProvider, { ...formMethods, children: /* @__PURE__ */ jsx(
+    CustomFormContext.Provider,
+    {
+      value: {
+        validationSchema,
+        removeOptional
+      },
+      children
+    }
+  ) });
+};
+export {
+  CustomFormContext,
+  CustomFormProvider as default
+};

package/dist/components/react-hook-form/provider/use-custom-form-context.d.ts

@@ -0,0 +1,3 @@
+import { MergedFormContextProps } from './custom-form-provider';
+
+export declare const useCustomFormContext: () => MergedFormContextProps;

package/dist/components/react-hook-form/provider/use-custom-form-context.js

@@ -0,0 +1,11 @@
+import { useFormContext } from "react-hook-form";
+import { useContext } from "react";
+import { CustomFormContext } from "./custom-form-provider.js";
+const useCustomFormContext = () => {
+  const formMethods = useFormContext();
+  const customFormMethods = useContext(CustomFormContext);
+  return { ...formMethods, ...customFormMethods };
+};
+export {
+  useCustomFormContext
+};

package/dist/components/react-hook-form/text-input.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { InputAdornment, IconButton, TextField } from "@mui/material";
 import { Clear } from "@mui/icons-material";
-import { useFormContext, useController } from "react-hook-form";
+import { useController } from "react-hook-form";
 import TextFieldWithAdornment from "./utils/text-field-with-adornment.js";
 import FieldLabel from "./utils/field-label.js";
 import { isFieldRequired, genHelperPreviousValue, genHelperError, identity } from "./utils/functions.js";
+import { useCustomFormContext } from "./provider/use-custom-form-context.js";
 const TextInput = ({
   name,
   label,
@@ -24,7 +25,7 @@ const TextInput = ({
   clearable,
   formProps
 }) => {
-  const { validationSchema, getValues, removeOptional } = useFormContext();
+  const { validationSchema, getValues, removeOptional } = useCustomFormContext();
   const {
     field: { onChange, value, ref },
     fieldState: { error }

package/dist/components/react-hook-form/utils/functions.d.ts

@@ -7,5 +7,4 @@ export function genHelperError(...errors: any[]): {
     helperText?: undefined;
 };
 export function identity(x: any): any;
-export function isFieldFromContextRequired(fieldName: any, formContext: any, values: any): boolean;
 export function isFieldRequired(fieldName: any, schema: any, values: any): boolean;

package/dist/components/react-hook-form/utils/functions.js

@@ -22,10 +22,6 @@ function genHelperError(...errors) {
 function identity(x) {
   return x;
 }
-const isFieldFromContextRequired = (fieldName, formContext, values) => {
-  const { validationSchema } = formContext;
-  return isFieldRequired(fieldName, validationSchema, values);
-};
 const isFieldRequired = (fieldName, schema, values) => {
   var _a;
   const { schema: fieldSchema, parent: parentValues } = getIn(schema, fieldName, values) || {};
@@ -35,6 +31,5 @@ export {
   genHelperError,
   genHelperPreviousValue,
   identity,
-  isFieldFromContextRequired,
   isFieldRequired
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps, SwitchProps, CheckboxProps, RadioGroupProps, SxProps, TextFieldProps } from '@mui/material';
+import { ButtonProps, CheckboxProps, RadioGroupProps, SwitchProps, SxProps, TextFieldProps } from '@mui/material';
 import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
 import { FunctionComponent, ReactElement } from 'react';
 
@@ -91,6 +91,8 @@ export { default as directory_items_input_fr } from './components/translations/d
 export { TagRenderer } from './components/ElementSearchDialog';
 export { EquipmentItem } from './components/ElementSearchDialog/equipment-item';
 export { useIntlRef } from './hooks/useIntlRef';
+export { useCustomFormContext } from './components/react-hook-form/provider/use-custom-form-context';
+export { default as CustomFormProvider } from './components/react-hook-form/provider/custom-form-provider';
 export { default as SliderInput } from './components/react-hook-form/slider-input';
 export { default as TextFieldWithAdornment } from './components/react-hook-form/utils/text-field-with-adornment';
 export {

package/dist/index.js

@@ -47,79 +47,82 @@ import { default as default36 } from "./components/CardErrorBoundary/card-error-
 import { useIntlRef } from "./hooks/useIntlRef.js";
 import { useSnackMessage } from "./hooks/useSnackMessage.js";
 import { useDebounce } from "./hooks/useDebounce.js";
-import { default as default37 } from "./components/react-hook-form/autocomplete-input.js";
-import { default as default38 } from "./components/react-hook-form/text-input.js";
-import { default as default39 } from "./components/react-hook-form/ExpandingTextField.js";
-import { default as default40 } from "./components/react-hook-form/radio-input.js";
-import { default as default41 } from "./components/react-hook-form/slider-input.js";
-import { default as default42 } from "./components/react-hook-form/numbers/float-input.js";
-import { default as default43 } from "./components/react-hook-form/numbers/integer-input.js";
-import { default as default44 } from "./components/react-hook-form/select-input.js";
-import { default as default45 } from "./components/react-hook-form/booleans/checkbox-input.js";
-import { default as default46 } from "./components/react-hook-form/booleans/switch-input.js";
-import { default as default47 } from "./components/react-hook-form/error-management/error-input.js";
-import { default as default48 } from "./components/react-hook-form/error-management/field-error-alert.js";
-import { default as default49 } from "./components/react-hook-form/error-management/mid-form-error.js";
-import { default as default50 } from "./components/react-hook-form/utils/text-field-with-adornment.js";
-import { default as default51 } from "./components/react-hook-form/utils/field-label.js";
-import { default as default52 } from "./components/react-hook-form/utils/submit-button.js";
-import { default as default53 } from "./components/react-hook-form/utils/cancel-button.js";
+import { useCustomFormContext } from "./components/react-hook-form/provider/use-custom-form-context.js";
+import { default as default37 } from "./components/react-hook-form/provider/custom-form-provider.js";
+import { default as default38 } from "./components/react-hook-form/autocomplete-input.js";
+import { default as default39 } from "./components/react-hook-form/text-input.js";
+import { default as default40 } from "./components/react-hook-form/ExpandingTextField.js";
+import { default as default41 } from "./components/react-hook-form/radio-input.js";
+import { default as default42 } from "./components/react-hook-form/slider-input.js";
+import { default as default43 } from "./components/react-hook-form/numbers/float-input.js";
+import { default as default44 } from "./components/react-hook-form/numbers/integer-input.js";
+import { default as default45 } from "./components/react-hook-form/select-input.js";
+import { default as default46 } from "./components/react-hook-form/booleans/checkbox-input.js";
+import { default as default47 } from "./components/react-hook-form/booleans/switch-input.js";
+import { default as default48 } from "./components/react-hook-form/error-management/error-input.js";
+import { default as default49 } from "./components/react-hook-form/error-management/field-error-alert.js";
+import { default as default50 } from "./components/react-hook-form/error-management/mid-form-error.js";
+import { default as default51 } from "./components/react-hook-form/utils/text-field-with-adornment.js";
+import { default as default52 } from "./components/react-hook-form/utils/field-label.js";
+import { default as default53 } from "./components/react-hook-form/utils/submit-button.js";
+import { default as default54 } from "./components/react-hook-form/utils/cancel-button.js";
 import { genHelperError, genHelperPreviousValue, identity, isFieldRequired } from "./components/react-hook-form/utils/functions.js";
-import { default as default54 } from "./components/react-hook-form/directory-items-input.js";
-import { default as default55 } from "./components/DirectoryItemSelector/directory-item-selector.js";
+import { default as default55 } from "./components/react-hook-form/directory-items-input.js";
+import { default as default56 } from "./components/DirectoryItemSelector/directory-item-selector.js";
 import { RawReadOnlyInput } from "./components/react-hook-form/raw-read-only-input.js";
 import { UserManagerMock } from "./utils/UserManagerMock.js";
 export {
   default4 as AboutDialog,
   default6 as AuthenticationRouter,
-  default37 as AutocompleteInput,
+  default38 as AutocompleteInput,
   CHANGE_WAYS,
-  default53 as CancelButton,
+  default54 as CancelButton,
   default36 as CardErrorBoundary,
-  default45 as CheckboxInput,
+  default46 as CheckboxInput,
+  default37 as CustomFormProvider,
   DARK_THEME,
   DEFAULT_CELL_PADDING,
   DEFAULT_HEADER_HEIGHT,
   DEFAULT_ROW_HEIGHT,
-  default55 as DirectoryItemSelector,
-  default54 as DirectoryItemsInput,
+  default56 as DirectoryItemSelector,
+  default55 as DirectoryItemsInput,
   EQUIPMENT_TYPE,
   default10 as ElementSearchDialog,
   ElementType,
   EquipmentItem,
   EquipmentType,
-  default47 as ErrorInput,
-  default39 as ExpandingTextField,
-  default48 as FieldErrorAlert,
-  default51 as FieldLabel,
+  default48 as ErrorInput,
+  default40 as ExpandingTextField,
+  default49 as FieldErrorAlert,
+  default52 as FieldLabel,
   FlatParameters,
-  default42 as FloatInput,
-  default43 as IntegerInput,
+  default43 as FloatInput,
+  default44 as IntegerInput,
   KeyedColumnsRowIndexer,
   LANG_ENGLISH,
   LANG_FRENCH,
   LANG_SYSTEM,
   LIGHT_THEME,
   LOGOUT_ERROR,
-  default49 as MidFormError,
+  default50 as MidFormError,
   default7 as MuiVirtualizedTable,
   default11 as MultipleSelectionDialog,
   OverflowableText,
   RESET_AUTHENTICATION_ROUTER_ERROR,
-  default40 as RadioInput,
+  default41 as RadioInput,
   RawReadOnlyInput,
   default8 as ReportViewer,
   default9 as ReportViewerDialog,
   SHOW_AUTH_INFO_LOGIN,
   SIGNIN_CALLBACK_ERROR,
-  default44 as SelectInput,
-  default41 as SliderInput,
+  default45 as SelectInput,
+  default42 as SliderInput,
   default5 as SnackbarProvider,
-  default52 as SubmitButton,
-  default46 as SwitchInput,
+  default53 as SubmitButton,
+  default47 as SwitchInput,
   TagRenderer,
-  default50 as TextFieldWithAdornment,
-  default38 as TextInput,
+  default51 as TextFieldWithAdornment,
+  default39 as TextInput,
   default3 as TopBar,
   default2 as TreeViewFinder,
   UNAUTHORIZED_USER_INFO,
@@ -164,6 +167,7 @@ export {
   default17 as top_bar_fr,
   default20 as treeview_finder_en,
   default21 as treeview_finder_fr,
+  useCustomFormContext,
   useDebounce,
   useIntlRef,
   useSnackMessage

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.53.0",
+    "version": "0.54.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",