tp-react-elements-dev 1.10.6 → 1.10.7

package/dist/index.js

@@ -12032,175 +12032,6 @@ function generateUtilityClasses(componentName, slots) {
   return result;
 }
 
-function mapEventPropToEvent(eventProp) {
-  return eventProp.substring(2).toLowerCase();
-}
-function clickedRootScrollbar$1(event, doc) {
-  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
-}
-/**
- * Listen for click events that occur somewhere in the document, outside of the element itself.
- * For instance, if you need to hide a menu when people click anywhere else on your page.
- *
- * Demos:
- *
- * - [Click-Away Listener](https://mui.com/base-ui/react-click-away-listener/)
- *
- * API:
- *
- * - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)
- */
-function ClickAwayListener(props) {
-  const {
-    children,
-    disableReactTree = false,
-    mouseEvent = 'onClick',
-    onClickAway,
-    touchEvent = 'onTouchEnd'
-  } = props;
-  const movedRef = React__namespace.useRef(false);
-  const nodeRef = React__namespace.useRef(null);
-  const activatedRef = React__namespace.useRef(false);
-  const syntheticEventRef = React__namespace.useRef(false);
-  React__namespace.useEffect(() => {
-    // Ensure that this component is not "activated" synchronously.
-    // https://github.com/facebook/react/issues/20074
-    setTimeout(() => {
-      activatedRef.current = true;
-    }, 0);
-    return () => {
-      activatedRef.current = false;
-    };
-  }, []);
-  const handleRef = useForkRef(
-  // @ts-expect-error TODO upstream fix
-  children.ref, nodeRef);
-
-  // The handler doesn't take event.defaultPrevented into account:
-  //
-  // event.preventDefault() is meant to stop default behaviors like
-  // clicking a checkbox to check it, hitting a button to submit a form,
-  // and hitting left arrow to move the cursor in a text input etc.
-  // Only special HTML elements have these default behaviors.
-  const handleClickAway = useEventCallback(event => {
-    // Given developers can stop the propagation of the synthetic event,
-    // we can only be confident with a positive value.
-    const insideReactTree = syntheticEventRef.current;
-    syntheticEventRef.current = false;
-    const doc = ownerDocument(nodeRef.current);
-
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
-    // 2. The child might render null.
-    // 3. Behave like a blur listener.
-    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar$1(event, doc)) {
-      return;
-    }
-
-    // Do not act if user performed touchmove
-    if (movedRef.current) {
-      movedRef.current = false;
-      return;
-    }
-    let insideDOM;
-
-    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
-    if (event.composedPath) {
-      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
-    } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
-    }
-    if (!insideDOM && (disableReactTree || !insideReactTree)) {
-      onClickAway(event);
-    }
-  });
-
-  // Keep track of mouse/touch events that bubbled up through the portal.
-  const createHandleSynthetic = handlerName => event => {
-    syntheticEventRef.current = true;
-    const childrenPropsHandler = children.props[handlerName];
-    if (childrenPropsHandler) {
-      childrenPropsHandler(event);
-    }
-  };
-  const childrenProps = {
-    ref: handleRef
-  };
-  if (touchEvent !== false) {
-    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
-  }
-  React__namespace.useEffect(() => {
-    if (touchEvent !== false) {
-      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
-      const doc = ownerDocument(nodeRef.current);
-      const handleTouchMove = () => {
-        movedRef.current = true;
-      };
-      doc.addEventListener(mappedTouchEvent, handleClickAway);
-      doc.addEventListener('touchmove', handleTouchMove);
-      return () => {
-        doc.removeEventListener(mappedTouchEvent, handleClickAway);
-        doc.removeEventListener('touchmove', handleTouchMove);
-      };
-    }
-    return undefined;
-  }, [handleClickAway, touchEvent]);
-  if (mouseEvent !== false) {
-    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
-  }
-  React__namespace.useEffect(() => {
-    if (mouseEvent !== false) {
-      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
-      const doc = ownerDocument(nodeRef.current);
-      doc.addEventListener(mappedMouseEvent, handleClickAway);
-      return () => {
-        doc.removeEventListener(mappedMouseEvent, handleClickAway);
-      };
-    }
-    return undefined;
-  }, [handleClickAway, mouseEvent]);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(React__namespace.Fragment, {
-    children: /*#__PURE__*/React__namespace.cloneElement(children, childrenProps)
-  });
-}
-process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The wrapped element.
-   */
-  children: elementAcceptingRef.isRequired,
-  /**
-   * If `true`, the React tree is ignored and only the DOM tree is considered.
-   * This prop changes how portaled elements are handled.
-   * @default false
-   */
-  disableReactTree: PropTypes.bool,
-  /**
-   * The mouse event to listen to. You can disable the listener by providing `false`.
-   * @default 'onClick'
-   */
-  mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
-  /**
-   * Callback fired when a "click away" event is detected.
-   */
-  onClickAway: PropTypes.func.isRequired,
-  /**
-   * The touch event to listen to. You can disable the listener by providing `false`.
-   * @default 'onTouchEnd'
-   */
-  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
-} : void 0;
-if (process.env.NODE_ENV !== 'production') {
-  // eslint-disable-next-line
-  ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
-}
-
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
 function getTabIndex(node) {
@@ -59391,55 +59222,63 @@ const PasswordField = ({ props, variant }) => {
 
 const Monthpickerrender = ({ props, variant }) => {
     const ref = React$1.useRef(null);
-    const [calenderOpen, setCalenderOpen] = React$1.useState(false);
+    // const [calenderOpen, setCalenderOpen] = useState(false);
+    const [open, setOpen] = React$1.useState(false);
+    const handleToggle = () => {
+        var _a;
+        if (!open) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        setOpen(!open);
+    };
     return (jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
             var _a, _b;
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(ClickAwayListener, Object.assign({ onClickAway: () => setCalenderOpen(false) }, { children: jsxRuntimeExports.jsx(DatePicker, { ref: ref, label: variant !== "standard" && `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
-                                        ? dayjs(formatDateMonthAndYear(field.value || null))
-                                        : null, slotProps: {
-                                        textField: {
-                                            onClick: () => setCalenderOpen(true),
-                                            // onBlur: () => setCalenderOpen(false),
-                                        },
-                                    }, disableOpenPicker: props.item.disable, 
-                                    // onMonthChange={() => setCalenderOpen(false)}
-                                    // onYearChange={() => setCalenderOpen(false)}
-                                    open: calenderOpen, defaultValue: field.value, onChange: (date) => {
-                                        field.onChange(dayjs(date).format("MM/YYYY"));
-                                        props.setValue(dayjs(date).format("MM/YYYY"));
-                                    }, sx: {
-                                        "& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-                                            top: "-10px",
-                                        },
-                                        "& input": {
-                                            paddingRight: "0px !important",
-                                        },
-                                        "& button": {
-                                            paddingLeft: "0px !important",
-                                            paddingRight: "0px !important",
-                                        },
-                                    }, 
-                                    // renderInput={(params:any) => (
-                                    //   <TextField
-                                    //     {...params}
-                                    //     fullWidth
-                                    //     disabled={props.item.disable || false}
-                                    //     InputLabelProps={{
-                                    //       shrink: true,
-                                    //     }}
-                                    //     inputProps={{
-                                    //       min: props.item.minDate,
-                                    //     }}
-                                    //   />
-                                    // )}
-                                    // ToolbarComponent={({ date, decreaseMonth, increaseMonth }:any) => (
-                                    //   <div>
-                                    //     <button onClick={decreaseMonth}>&lt;</button>
-                                    //     <span>{date.getMonth() + 1}</span>
-                                    //     <button onClick={increaseMonth}>&gt;</button>
-                                    //   </div>
-                                    // )}
-                                    minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : null, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : null }) }))] })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(DatePicker, { ref: ref, label: variant !== "standard" && `${props.item.label}${props.item.required ? ' *' : ''}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
+                                    ? dayjs(formatDateMonthAndYear(field.value || null))
+                                    : null, slotProps: {
+                                    textField: {
+                                        onClick: () => handleToggle(),
+                                        inputRef: ref,
+                                    },
+                                }, disableOpenPicker: props.item.disable, 
+                                // onMonthChange={() => setCalenderOpen(false)}
+                                // onYearChange={() => setCalenderOpen(false)}
+                                open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
+                                    field.onChange(dayjs(date).format("MM/YYYY"));
+                                    props.setValue(dayjs(date).format("MM/YYYY"));
+                                }, sx: {
+                                    "& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                        top: "-10px",
+                                    },
+                                    "& input": {
+                                        paddingRight: "0px !important",
+                                    },
+                                    "& button": {
+                                        paddingLeft: "0px !important",
+                                        paddingRight: "0px !important",
+                                    },
+                                }, 
+                                // renderInput={(params:any) => (
+                                //   <TextField
+                                //     {...params}
+                                //     fullWidth
+                                //     disabled={props.item.disable || false}
+                                //     InputLabelProps={{
+                                //       shrink: true,
+                                //     }}
+                                //     inputProps={{
+                                //       min: props.item.minDate,
+                                //     }}
+                                //   />
+                                // )}
+                                // ToolbarComponent={({ date, decreaseMonth, increaseMonth }:any) => (
+                                //   <div>
+                                //     <button onClick={decreaseMonth}>&lt;</button>
+                                //     <span>{date.getMonth() + 1}</span>
+                                //     <button onClick={increaseMonth}>&gt;</button>
+                                //   </div>
+                                // )}
+                                minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : null, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : null })] })), ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.helperText) && (jsxRuntimeExports.jsxs("span", Object.assign({ style: {
                             fontSize: "11px",
                             color: "#3651d3",
                         } }, { children: ["(", (_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.helperText, ")"] }))), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));