jamespot-react-components 1.0.151 → 1.0.152

package/build/src/components/Form/Input/JRCSelect/JRCInputSelectHierarchicalTree.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { JRCInputSelectProps } from './JRCInputSelect.types';
-import { JRCModalProps } from 'components/JRCModal/JRCModal';
+import { JRCModalLayoutProps } from 'components/JRCModal/JRCModalLayout';
 import { AutoCompleteConcept, PagingResults } from 'jamespot-user-api';
-export type JRCInputSelectHierarchicalTreeProps = Omit<JRCInputSelectProps, 'asyncPromise'> & JRCModalProps & {
+export type JRCInputSelectHierarchicalTreeProps = Omit<JRCInputSelectProps, 'asyncPromise'> & JRCModalLayoutProps & {
     asyncPromise?: (inputValue: string, page?: number) => Promise<PagingResults<any>>;
     hierarchicalTaxonomyPromise: (uriConcept: string) => Promise<PagingResults<AutoCompleteConcept>>;
     displayModal?: boolean;
@@ -11,7 +11,7 @@ export type JRCInputSelectHierarchicalTreeProps = Omit<JRCInputSelectProps, 'asy
         value: any;
     }>;
 };
-export declare const JRCInputSelectHierarchicalTree: React.ForwardRefExoticComponent<Omit<JRCInputSelectProps<import("react-hook-form").FieldValues>, "asyncPromise"> & JRCModalProps & {
+export declare const JRCInputSelectHierarchicalTree: React.ForwardRefExoticComponent<Omit<JRCInputSelectProps<import("react-hook-form").FieldValues>, "asyncPromise"> & JRCModalLayoutProps & {
     asyncPromise?: ((inputValue: string, page?: number) => Promise<PagingResults<any>>) | undefined;
     hierarchicalTaxonomyPromise: (uriConcept: string) => Promise<PagingResults<AutoCompleteConcept>>;
     displayModal?: boolean | undefined;

package/build/src/components/Form/Input/JRCSelect/JRCInputSelectList.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { JRCInputSelectProps } from './JRCInputSelect.types';
-import { JRCModalProps } from 'components/JRCModal/JRCModal';
 import { BaseAutocomplete, PagingResults } from 'jamespot-user-api';
-export type JRCInputSelectListProps = Omit<JRCInputSelectProps, 'asyncPromise'> & JRCModalProps & {
+import { FieldValues } from 'react-hook-form';
+import { JRCModalProps } from '../../../JRCModal/templates/JRCModal.types';
+export type JRCInputSelectListProps<T extends FieldValues = FieldValues> = Omit<JRCInputSelectProps<T>, 'asyncPromise'> & Pick<JRCModalProps, 'inPlace'> & {
     asyncPromise?: (inputValue: string, page?: number) => Promise<PagingResults<any>>;
     displayModal?: boolean;
-    setValues: (name: string, values: BaseAutocomplete[]) => void;
+    onChange: (values: BaseAutocomplete[]) => void;
 };
-export declare const JRCInputSelectList: ({ asyncPromise, displayModal, inPlace, width, placeholder, setValues, control, name, ...props }: JRCInputSelectListProps) => React.JSX.Element;
+export declare const JRCInputSelectList: <T extends FieldValues = FieldValues>({ asyncPromise, displayModal, inPlace, width, placeholder, onChange, control, name, ...props }: JRCInputSelectListProps<T>) => React.JSX.Element;

package/build/src/components/JRCCropImage/JRCCropImage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Area as _Area, Point as _Point, Size as _Size } from 'react-easy-crop/types';
-import { JRCModalProps } from '../JRCModal/JRCModal';
+import { JRCModalProps } from '../JRCModal/templates/JRCModal.types';
 export type Size = _Size;
 export type Point = _Point;
 export type Area = _Area;

package/build/src/components/JRCModal/JRCModal.styles.d.ts

@@ -1,28 +1,30 @@
+import { ModalVariant } from './JRCModalLayout';
 export type ModalBorderRadius = 'medium' | 'small';
 export declare const JRCModalBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isFullHeight?: boolean | undefined;
+    overflow?: "hidden" | "visible" | undefined;
 }, never>;
 export declare const JRCModalContainerFull: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isFullScreen?: boolean | undefined;
     maxHeight?: string | undefined;
 }, never>;
 export declare const JRCModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    isFullHeight?: boolean | undefined;
-    overflow?: "hidden" | "visible" | "scroll" | undefined;
+    variant?: ModalVariant | undefined;
+    overflow?: "hidden" | "visible" | undefined;
     radius?: ModalBorderRadius | undefined;
     maxHeight?: string | undefined;
 }, never>;
 export declare const JRCModalTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const JRCModalOptions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const JRCModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    overflow?: "hidden" | "visible" | "scroll" | undefined;
+export declare const JRCModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    modalOverflow?: "hidden" | "visible" | "scroll" | undefined;
 }, never>;
 export declare const JRCModalContentFull: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const JRCModalContentScrollbox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const JRCModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    overflow?: "hidden" | "visible" | "scroll" | undefined;
+    modalOverflow?: "hidden" | "visible" | "scroll" | undefined;
 }, never>;
 export declare const JRCModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    overflow?: "hidden" | "visible" | "scroll" | undefined;
+    modalOverflow?: "hidden" | "visible" | "scroll" | undefined;
 }, never>;
 export declare const JRCModalClose: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/src/components/JRCModal/JRCModalContent.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { ButtonColors } from '../JRCButton/JRCButton';
+export type JRCModalContentBase = {
+    title?: ReactNode;
+    children?: ReactNode;
+    options?: ReactNode;
+    overflow?: 'visible' | 'hidden' | 'scroll';
+    onClickIconClose?: () => void;
+};
+export type JRCModalContentProps = JRCModalContentBase & {
+    isFull?: boolean;
+    buttons?: JRCModalButtonType[];
+};
+export interface JRCModalButtonType {
+    children: ReactNode;
+    color?: ButtonColors;
+    variant?: 'contained' | 'outlined';
+    clickHandler?: () => void;
+    dataCy?: string;
+}
+export declare const ModalOptions: ({ children }: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ModalTitle: ({ children }: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const JRCModalContent: ({ title, onClickIconClose, overflow, options, children, buttons, isFull, }: JRCModalContentProps) => React.JSX.Element;

package/build/src/components/JRCModal/JRCModalContentForm.d.ts

@@ -0,0 +1,13 @@
+import React, { FormEvent } from 'react';
+import { JRCModalButtonType, JRCModalContentBase } from './JRCModalContent';
+export type JRCModalContentFormProps = JRCModalContentBase & {
+    buttons?: JRCModalFormButtonType[];
+    onSubmit: (e: FormEvent) => Promise<void>;
+    loading?: boolean;
+};
+export interface JRCModalFormButtonType extends JRCModalButtonType {
+    loading?: boolean;
+    isSubmit?: boolean;
+    disabled?: boolean;
+}
+export declare const JRCModalContentForm: ({ onSubmit, children, loading, title, onClickIconClose, options, buttons, overflow, }: JRCModalContentFormProps) => React.JSX.Element;

package/build/src/components/JRCModal/JRCModalLayout.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { ModalBorderRadius } from './JRCModal.styles';
+export type ModalVariant = 'full-width' | 'full-screen' | 'full-height' | 'fixed-height';
+export interface JRCModalLayoutProps {
+    open: boolean;
+    closeHandler: () => void;
+    children?: ReactNode;
+    enableClickAwayCloseModal?: boolean;
+    radius?: ModalBorderRadius;
+    portalId?: string;
+    inPlace?: boolean;
+    className?: string;
+    maxHeight?: string;
+    variant?: ModalVariant;
+    overflow?: 'visible' | 'hidden';
+}
+export declare const JRCModalLayout: React.ForwardRefExoticComponent<JRCModalLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/build/src/components/JRCModal/templates/JRCModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JRCModalProps } from './JRCModal.types';
+export declare const JRCModal: ({ children, open, closeHandler, buttons, title, options, portalId, inPlace, ref, enableClickAwayCloseModal, }: JRCModalProps) => React.JSX.Element;

package/build/src/components/JRCModal/{JRCModal.stories.d.ts → templates/JRCModal.stories.d.ts}

@@ -1,5 +1,4 @@
-import { JRCModalProps } from './JRCModal';
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Modal: Story<JRCModalProps>;
+export declare const Modal: Story<import("@storybook/react").Args>;

package/build/src/components/JRCModal/templates/JRCModal.types.d.ts

@@ -0,0 +1,24 @@
+import { FormEvent, ForwardedRef, ReactNode } from 'react';
+import { JRCModalButtonType } from '../JRCModalContent';
+import { JRCModalFormButtonType } from '../JRCModalContentForm';
+type JRCModalBaseProps = {
+    title?: ReactNode;
+    children?: ReactNode;
+    options?: ReactNode;
+    open: boolean;
+    closeHandler: () => void;
+    portalId?: string;
+    inPlace?: boolean;
+    ref?: ForwardedRef<HTMLDivElement>;
+    enableClickAwayCloseModal?: boolean;
+};
+export type JRCModalProps = JRCModalBaseProps & {
+    buttons?: JRCModalButtonType[];
+};
+export type JRCModalFormProps = JRCModalBaseProps & {
+    buttons?: JRCModalFormButtonType[];
+    onSubmit: (e: FormEvent) => Promise<void>;
+    loading?: boolean;
+    maxHeight?: string;
+};
+export {};

package/build/src/components/JRCModal/templates/JRCModalForm.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JRCModalFormProps } from './JRCModal.types';
+export declare const JRCModalForm: ({ title, children, options, open, closeHandler, buttons, onSubmit, loading, portalId, inPlace, ref, enableClickAwayCloseModal, maxHeight, }: JRCModalFormProps) => React.JSX.Element;

package/build/src/components/JRCModal/templates/JRCModalForm.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Modal: Story<import("@storybook/react").Args>;

package/build/src/index.d.ts

@@ -113,7 +113,11 @@ export { JRCList } from './components/JRCList/JRCList';
 export { JRCLoader } from './components/JRCLoader/JRCLoader';
 export { JRCMainColumn } from './components/Templates/JRCMainColumn';
 export { JRCMenu } from './components/JRCMenu/JRCMenu';
-export { JRCModal } from './components/JRCModal/JRCModal';
+export { JRCModal } from './components/JRCModal/templates/JRCModal';
+export { JRCModalForm } from './components/JRCModal/templates/JRCModalForm';
+export { JRCModalLayout } from './components/JRCModal/JRCModalLayout';
+export { JRCModalContent } from './components/JRCModal/JRCModalContent';
+export { JRCModalContentForm } from './components/JRCModal/JRCModalContentForm';
 export { JRCModalImg } from './components/JRCModalImg/JRCModalImg';
 export { JRCPageNotLogged } from './components/Pages/JRCPageNotLogged';
 export { JRCPagination } from './components/JRCPagination/JRCPagination';

package/build/src/types.d.ts

@@ -61,8 +61,11 @@ export { JRCLinkToProps, JRCStyledHrefProps } from './components/JRCHref/JRCHref
 export { JRCListProps, PaginationPagination } from './components/JRCList/JRCList';
 export { JRCLoaderProps } from './components/JRCLoader/JRCLoader';
 export { JRCMenuProps, JRCMenuItemProps } from './components/JRCMenu/JRCMenu';
-export { JRCModalButtonType, JRCModalProps } from './components/JRCModal/JRCModal';
+export { JRCModalProps, JRCModalFormProps } from './components/JRCModal/templates/JRCModal.types';
+export { JRCModalContentProps, JRCModalButtonType } from './components/JRCModal/JRCModalContent';
+export { JRCModalContentFormProps, JRCModalFormButtonType } from './components/JRCModal/JRCModalContentForm';
 export { JRCModalImgButtonType, JRCModalImgProps } from './components/JRCModalImg/JRCModalImg';
+export { JRCModalLayoutProps } from './components/JRCModal/JRCModalLayout';
 export { JRCPaginationProps } from './components/JRCPagination/JRCPagination';
 export { JRCSkeletonLineProps } from './components/JRCSkeleton/JRCSkeletonLine';
 export { JRCSkeletonSquareProps } from './components/JRCSkeleton/JRCSkeletonSquare';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jamespot-react-components",
-  "version": "1.0.151",
+  "version": "1.0.152",
   "description": "",
   "main": "./build/jamespot-react-components.js",
   "types": "./build/src/index.d.ts",

package/build/src/components/JRCModal/JRCModal.d.ts

@@ -1,56 +0,0 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ButtonColors } from '../JRCButton/JRCButton';
-import { ModalBorderRadius } from './JRCModal.styles';
-/**
- * Interface to provide Modal Buttons
- * @member color button color ButtonColors
- * @member isClosed optional boolean (default false). If true, when click on the button, the modal is closes
- * @member clickHandler optional, callback when the button is click
- * @member children default ReactNode children in the Modal content
- */
-export interface JRCModalButtonType extends ComponentPropsWithoutRef<'button'> {
-    children: ReactNode;
-    color?: ButtonColors;
-    variant?: 'contained' | 'outlined';
-    isClosed?: boolean;
-    clickHandler?: (setLoading: (isLoading: boolean) => void) => Promise<void>;
-    dataCy?: string;
-    preventClose?: boolean;
-}
-/**
- * Interface for JRCModal props
- * @member open boolean that open or close the Modal
- * @member closeHandler callback called when the Modal is closed
- * @member buttons array of JRCModalButton possibly added to the Modal
- * @member title optional string or JSX.Element (header content) if hasHeader= true
- * @member showIconClose boolean to show/hide the close (x) button of the Modal
- * @member enableClickAwayCloseModal boolean to enable the close of the Modal by Click Outside of Modal
- * @member contentFull content without padding
- * @member overflow allow overflow hidden (crop background for radius)
- * @member radius border radius size
- * @member children default ReactNode children in the Modal content
- * @member portalId id attribute for createPortal
- * @member inPlace if true, does not use a portal
- * @member className use for overriding the styled-components styles
- */
-export interface JRCModalProps {
-    open: boolean;
-    closeHandler: () => void;
-    buttons?: JRCModalButtonType[];
-    children?: ReactNode;
-    title?: React.ReactNode;
-    showIconClose?: boolean;
-    enableClickAwayCloseModal?: boolean;
-    contentFull?: boolean;
-    overflow?: 'hidden' | 'scroll' | 'visible';
-    radius?: ModalBorderRadius;
-    isFull?: boolean;
-    isFullHeight?: boolean;
-    isFullScreen?: boolean;
-    modalOptions?: ReactNode;
-    portalId?: string;
-    inPlace?: boolean;
-    className?: string;
-    maxHeight?: string;
-}
-export declare const JRCModal: React.ForwardRefExoticComponent<JRCModalProps & React.RefAttributes<HTMLDivElement>>;