@symply.io/basic-components 1.7.1-beta.1 → 1.7.1-beta.2

package/DateInput/FullDateInput/index.js

@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRifm } from "rifm";
+import Tooltip from "@mui/material/Tooltip";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
@@ -57,23 +58,23 @@ export function onValidateDate(dateString) {
     return false;
 }
 function FullDateInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: MonthDayYearFormat
+        format: MonthDayYearFormat,
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
-                (valLength > 0 &&
-                    (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (onValidate ? !onValidate(value) : !onValidateDate(value))
-                ? helperText
-                : "", InputLabelProps: {
-                shrink: true
-            } }, rest)) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
+                    (valLength > 0 &&
+                        (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateDate(value))
+                    ? helperText
+                    : "", InputLabelProps: {
+                    shrink: true,
+                } }, rest)) })) })));
 }
 export default FullDateInput;

package/DateInput/FullDateInput/types.d.ts

@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value?: string) => boolean;
     value: string;
+    tooltip?: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }

package/DateInput/FullDateInput/useInteractions.d.ts

@@ -3,6 +3,9 @@ interface InteractionProps {
 }
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
+    tooltipOpen: boolean;
     addMask: (str: string) => string;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
 };
 export default useInteractions;

package/DateInput/FullDateInput/useInteractions.js

@@ -1,6 +1,13 @@
-import { useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var month = digits.slice(0, 2).padEnd(2, "_");
@@ -15,6 +22,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask };
+    return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
 }
 export default useInteractions;

package/DateInput/MonthDayInput/index.js

@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRifm } from "rifm";
+import Tooltip from "@mui/material/Tooltip";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
@@ -43,23 +44,23 @@ export function onValidateMonthDay(monthDayString) {
     return reg.test(monthDayString);
 }
 function MonthDayInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: MonthDayFormat
+        format: MonthDayFormat,
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
-                (valLength > 0 &&
-                    (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
-                ? helperText
-                : "", InputLabelProps: {
-                shrink: true
-            } }, rest)) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
+                    (valLength > 0 &&
+                        (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
+                    ? helperText
+                    : "", InputLabelProps: {
+                    shrink: true,
+                } }, rest)) })) })));
 }
 export default MonthDayInput;

package/DateInput/MonthDayInput/types.d.ts

@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value?: string) => boolean;
     value: string;
+    tooltip?: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }

package/DateInput/MonthDayInput/useInteractions.d.ts

@@ -3,6 +3,9 @@ interface InteractionProps {
 }
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
+    tooltipOpen: boolean;
     addMask: (str: string) => string;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
 };
 export default useInteractions;

package/DateInput/MonthDayInput/useInteractions.js

@@ -1,6 +1,13 @@
-import { useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var month = digits.slice(0, 2).padEnd(2, "_");
@@ -14,6 +21,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask };
+    return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
 }
 export default useInteractions;

package/DateInput/MonthYearInput/index.js

@@ -20,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRifm } from "rifm";
+import Tooltip from "@mui/material/Tooltip";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
@@ -44,23 +45,23 @@ export function onValidateMonthYear(monthYearString) {
     return reg.test(monthYearString);
 }
 function MonthYearInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, tooltip = props.tooltip, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "tooltip", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, tooltipOpen = _c.tooltipOpen, addMask = _c.addMask, onOpenTooltip = _c.onOpenTooltip, onCloseTooltip = _c.onCloseTooltip;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: MonthYearFormat
+        format: MonthYearFormat,
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
-                (valLength > 0 &&
-                    (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
-                ? helperText
-                : "", InputLabelProps: {
-                shrink: true
-            } }, rest)) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: _jsx(_Fragment, { children: tooltip !== null && tooltip !== void 0 ? tooltip : "" }), open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
+                    (valLength > 0 &&
+                        (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
+                    ? helperText
+                    : "", InputLabelProps: {
+                    shrink: true,
+                } }, rest)) })) })));
 }
 export default MonthYearInput;

package/DateInput/MonthYearInput/types.d.ts

@@ -4,6 +4,7 @@ export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value?: string) => boolean;
     value: string;
+    tooltip?: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }

package/DateInput/MonthYearInput/useInteractions.d.ts

@@ -3,6 +3,9 @@ interface InteractionProps {
 }
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
+    tooltipOpen: boolean;
     addMask: (str: string) => string;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
 };
 export default useInteractions;

package/DateInput/MonthYearInput/useInteractions.js

@@ -1,6 +1,13 @@
-import { useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var month = digits.slice(0, 2).padEnd(2, "_");
@@ -14,6 +21,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask };
+    return { valLength: valLength, tooltipOpen: tooltipOpen, addMask: addMask, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
 }
 export default useInteractions;

package/package.json

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