@symply.io/basic-components 1.4.6 → 1.4.7

package/BasicModal/index.d.ts

@@ -1,4 +1,5 @@
-import type { BasicModalProps } from "./types";
-declare function BasicModal(props: BasicModalProps): JSX.Element;
-export default BasicModal;
-export type { BasicModalProps };
+/// <reference types="react" />
+import type { BasicModalProps, BasicModalRefProps } from "./types";
+declare const BasicModalWithRefForward: import("react").ForwardRefExoticComponent<Pick<BasicModalProps, "maxWidth" | "classes" | "slot" | "style" | "title" | "desc" | "className" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open" | "sx" | "transitionDuration" | "components" | "componentsProps" | "key" | "nonce" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "primaryColor" | "secondaryColor" | "disabled" | "fullWidth" | "fullScreen" | "TransitionComponent" | "loading" | "buttons" | "noForm" | "submitText" | "cancelText" | "hideBottomButtons" | "showTopRightCloseButton" | "PaperComponent" | "PaperProps" | "scroll" | "TransitionProps"> & import("react").RefAttributes<BasicModalRefProps>>;
+export default BasicModalWithRefForward;
+export type { BasicModalProps, BasicModalRefProps };

package/BasicModal/index.js

@@ -57,7 +57,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, forwardRef, cloneElement, useRef } from "react";
+import { useRef, forwardRef, useCallback, cloneElement, useImperativeHandle } from "react";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -74,9 +74,12 @@ import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
-function BasicModal(props) {
+function BasicModal(props, ref) {
     var _this = this;
     var desc = props.desc, title = props.title, loading = props.loading, buttons = props.buttons, _a = props.open, open = _a === void 0 ? false : _a, _b = props.noForm, noForm = _b === void 0 ? false : _b, children = props.children, disabled = props.disabled, _c = props.maxWidth, maxWidth = _c === void 0 ? "sm" : _c, _d = props.color, color = _d === void 0 ? "primary" : _d, _e = props.submitText, submitText = _e === void 0 ? "Save" : _e, _f = props.cancelText, cancelText = _f === void 0 ? "Cancel" : _f, _g = props.hideBottomButtons, hideBottomButtons = _g === void 0 ? false : _g, _h = props.showTopRightCloseButton, showTopRightCloseButton = _h === void 0 ? false : _h, onClose = props.onClose, onSubmit = props.onSubmit, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["desc", "title", "loading", "buttons", "open", "noForm", "children", "disabled", "maxWidth", "color", "submitText", "cancelText", "hideBottomButtons", "showTopRightCloseButton", "onClose", "onSubmit", "primaryColor", "secondaryColor"]);
+    if (!noForm && !buttons && !onSubmit) {
+        throw new Error("Error from @symply.io/basic-components/BasicModal: `onSubmit` is required when there are no custom buttons and `noForm` is true.");
+    }
     var formRef = useRef(null);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -90,7 +93,9 @@ function BasicModal(props) {
                     if (!!allValid) return [3, 1];
                     formRef.current.reportValidity();
                     return [3, 3];
-                case 1: return [4, onSubmit()];
+                case 1:
+                    if (!onSubmit) return [3, 3];
+                    return [4, onSubmit()];
                 case 2:
                     _a.sent();
                     _a.label = 3;
@@ -98,6 +103,7 @@ function BasicModal(props) {
             }
         });
     }); }, [onSubmit]);
+    useImperativeHandle(ref, function () { return ({ onSubmit: noForm ? onSubmit : onFormSubmit }); }, [noForm, onSubmit, onFormSubmit]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ disableEnforceFocus: true, open: open, onClose: function (_, reason) {
                 if (reason !== "backdropClick") {
                     onClose();
@@ -113,4 +119,6 @@ function BasicModal(props) {
                                 color: theme.palette.grey[500]
                             } }, { children: _jsx(CloseIcon, {}) }))) : (_jsx(_Fragment, {}))] })), _jsx(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: _jsxs(Grid, __assign({ component: noForm ? "div" : "form", ref: noForm ? undefined : formRef }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })) })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : onFormSubmit, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] })) })));
 }
-export default BasicModal;
+var BasicModalWithRefForward = forwardRef(BasicModal);
+BasicModalWithRefForward.displayName = "BasicModal";
+export default BasicModalWithRefForward;

package/BasicModal/types.d.ts

@@ -13,8 +13,11 @@ export interface BasicModalProps extends DialogProps {
     hideBottomButtons?: boolean;
     noForm?: boolean;
     onClose: () => unknown | Promise<unknown>;
-    onSubmit: () => unknown | Promise<unknown>;
+    onSubmit?: () => unknown | Promise<unknown>;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     showTopRightCloseButton?: boolean;
 }
+export declare type BasicModalRefProps = {
+    onSubmit?: () => unknown | Promise<unknown>;
+};

package/README.md

@@ -202,6 +202,7 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 | onClose                 | func                                                         |           | true     | Callback fired when the cancel button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
 | onSubmit                | func                                                         |           | true     | Callback fired when the submit button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
 | open                    | bool                                                         | false     | true     | If `true`, the component is shown.                           |
+| ref                     | ref                                                          |           | false    | You can get the form "onSubmit" function from the ref.       |
 | scroll                  | 'body' \| 'paper'                                            | 'paper'   | false    | Determine the container for scrolling the dialog.            |
 | showTopRightCloseButton | bool                                                         | false     | false    | If `true`, show a close icon button at the top right of the modal. |
 | submitText              | string                                                       | ‘Save’    | false    | The text of the submit button.                               |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",