@symply.io/basic-components 1.7.2-alpha.2 → 1.7.3-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/DateInput/FullDateInput/index.js +2 -2
  2. package/DateInput/FullDateInput/types.d.ts +2 -2
  3. package/DateInput/MonthDayInput/index.js +2 -2
  4. package/DateInput/MonthDayInput/types.d.ts +2 -2
  5. package/DateInput/MonthYearInput/index.js +2 -2
  6. package/DateInput/MonthYearInput/types.d.ts +2 -2
  7. package/DigitInput/types.d.ts +2 -2
  8. package/FormRadioGroup/types.d.ts +2 -2
  9. package/MenuButtonGroup/index.js +1 -4
  10. package/NumberInput/types.d.ts +2 -2
  11. package/README.md +26 -26
  12. package/TextInput/index.d.ts +2 -2
  13. package/TextInput/index.js +2 -2
  14. package/package.json +1 -1
package/DateInput/FullDateInput/index.js CHANGED
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { useRifm } from "rifm";
25
25
  import Tooltip from "@mui/material/Tooltip";
26
26
  import TextField from "@mui/material/TextField";
@@ -68,7 +68,7 @@ function FullDateInput(props) {
68
68
  replace: addMask,
69
69
  format: MonthDayYearFormat,
70
70
  });
71
- 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 ||
71
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: 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 ||
72
72
  (valLength > 0 &&
73
73
  (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
74
74
  (onValidate ? !onValidate(value) : !onValidateDate(value))
package/DateInput/FullDateInput/types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { CSSProperties } from "react";
1
+ import { ReactNode, CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
4
4
  onChange: (value: string) => void;
5
5
  onValidate?: (value?: string) => boolean;
6
6
  value: string;
7
- tooltip?: string;
7
+ tooltip?: ReactNode;
8
8
  primaryColor?: CSSProperties["color"];
9
9
  secondaryColor?: CSSProperties["color"];
10
10
  }
package/DateInput/MonthDayInput/index.js CHANGED
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { useRifm } from "rifm";
25
25
  import Tooltip from "@mui/material/Tooltip";
26
26
  import TextField from "@mui/material/TextField";
@@ -54,7 +54,7 @@ function MonthDayInput(props) {
54
54
  replace: addMask,
55
55
  format: MonthDayFormat,
56
56
  });
57
- 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 ||
57
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: 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 ||
58
58
  (valLength > 0 &&
59
59
  (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
60
60
  (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
package/DateInput/MonthDayInput/types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { CSSProperties } from "react";
1
+ import { ReactNode, CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
4
4
  onChange: (value: string) => void;
5
5
  onValidate?: (value?: string) => boolean;
6
6
  value: string;
7
- tooltip?: string;
7
+ tooltip?: ReactNode;
8
8
  primaryColor?: CSSProperties["color"];
9
9
  secondaryColor?: CSSProperties["color"];
10
10
  }
package/DateInput/MonthYearInput/index.js CHANGED
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { useRifm } from "rifm";
25
25
  import Tooltip from "@mui/material/Tooltip";
26
26
  import TextField from "@mui/material/TextField";
@@ -55,7 +55,7 @@ function MonthYearInput(props) {
55
55
  replace: addMask,
56
56
  format: MonthYearFormat,
57
57
  });
58
- 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 ||
58
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: 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 ||
59
59
  (valLength > 0 &&
60
60
  (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, helperText: valLength > 0 &&
61
61
  (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
package/DateInput/MonthYearInput/types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { CSSProperties } from "react";
1
+ import { ReactNode, CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
4
4
  onChange: (value: string) => void;
5
5
  onValidate?: (value?: string) => boolean;
6
6
  value: string;
7
- tooltip?: string;
7
+ tooltip?: ReactNode;
8
8
  primaryColor?: CSSProperties["color"];
9
9
  secondaryColor?: CSSProperties["color"];
10
10
  }
package/DigitInput/types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import type { CSSProperties } from "react";
1
+ import type { ReactNode, CSSProperties } from "react";
2
2
  import type { InputProps } from "@mui/material/Input";
3
3
  import type { TextFieldProps } from "@mui/material/TextField";
4
4
  export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
5
5
  onChange: (value: string) => void;
6
6
  value: string;
7
- tooltip?: string;
7
+ tooltip?: ReactNode;
8
8
  maxLength?: number;
9
9
  minLength?: number;
10
10
  endAdornment?: InputProps["endAdornment"];
package/FormRadioGroup/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties } from "react";
1
+ import { ReactNode, CSSProperties } from "react";
2
2
  import { FormControlProps } from "@mui/material/FormControl";
3
3
  import { FormControlLabelProps } from "@mui/material/FormControlLabel";
4
4
  export declare type RadioOption = {
@@ -11,7 +11,7 @@ export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange">
11
11
  options: Array<RadioOption>;
12
12
  value: string | boolean | number;
13
13
  name?: string;
14
- tooltip?: string;
14
+ tooltip?: ReactNode;
15
15
  primaryColor?: CSSProperties["color"];
16
16
  secondaryColor?: CSSProperties["color"];
17
17
  radioLabelPlacement?: FormControlLabelProps["labelPlacement"];
package/MenuButtonGroup/index.js CHANGED
@@ -57,7 +57,7 @@ var __rest = (this && this.__rest) || function (s, e) {
57
57
  return t;
58
58
  };
59
59
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
60
- import { useState, useEffect, useCallback, } from "react";
60
+ import { useState, useCallback } from "react";
61
61
  import Menu from "@mui/material/Menu";
62
62
  import Button from "@mui/material/Button";
63
63
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -75,9 +75,6 @@ function MenuButtonGroup(props) {
75
75
  var onClose = useCallback(function () {
76
76
  setAnchorEl(null);
77
77
  }, []);
78
- useEffect(function () { return function () {
79
- setAnchorEl(null);
80
- }; }, []);
81
78
  return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled }, { children: buttonText })), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, elevation: 2, anchorOrigin: {
82
79
  vertical: "bottom",
83
80
  horizontal: "center",
package/NumberInput/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties, ChangeEvent, FocusEventHandler, KeyboardEventHandler } from "react";
1
+ import { ReactNode, ChangeEvent, CSSProperties, FocusEventHandler, KeyboardEventHandler } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface InteractionStates {
4
4
  typing: boolean;
@@ -22,7 +22,7 @@ export interface InteractionProps {
22
22
  onChange: (value: string) => void;
23
23
  }
24
24
  export interface NumberInputProps extends InteractionProps, Omit<TextFieldProps, "value" | "onChange"> {
25
- tooltip?: string;
25
+ tooltip?: ReactNode;
26
26
  primaryColor?: CSSProperties["color"];
27
27
  secondaryColor?: CSSProperties["color"];
28
28
  }
package/README.md CHANGED
@@ -492,14 +492,14 @@ import DigitInput from '@symply.io/basic-components/DigitInput';
492
492
 
493
493
  <h5>Props</h5>
494
494
 
495
- | Name | Type | Default | Required | Description |
496
- | ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
497
- | endAdornment | node | | false | An end adornment element for the `Input` element. |
498
- | maxLength | number | 999 | false | The max length of the `Input` element you can type in. |
499
- | minLength | number | 0 | false | The min length of the `Input` element you should type in. |
500
- | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
501
- | value | string | | true | The value of the `Input` element. |
502
- | tooltip | string | | false | A tooltip for the `Input` element. |
495
+ | Name | Type | Default | Required | Description |
496
+ | ------------ | --------- | ------- | -------- | ------------------------------------------------------------ |
497
+ | endAdornment | node | | false | An end adornment element for the `Input` element. |
498
+ | maxLength | number | 999 | false | The max length of the `Input` element you can type in. |
499
+ | minLength | number | 0 | false | The min length of the `Input` element you should type in. |
500
+ | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
501
+ | value | string | | true | The value of the `Input` element. |
502
+ | tooltip | ReactNode | | false | A tooltip for the `Input` element. |
503
503
 
504
504
 
505
505
 
@@ -557,7 +557,7 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
557
557
  | onChange | func | | true | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string|number|boolean) => void`<br/>*value:* The value of the `Radio` element. |
558
558
  | options | Array\<IRadioOption\> | | true | The radio options. See the **Radio Option Props** above. |
559
559
  | radioLabelPlacement | 'top' \| 'bottom' \| 'start' \| 'end' | 'end' | false | The placement of the radio labe . |
560
- | tooltip | string | | false | A tooltip for the `Radio` element. |
560
+ | tooltip | ReactNode | | false | A tooltip for the `Radio` element. |
561
561
  | value | string \| number \| bool | | true | The value of the `Radio` element. |
562
562
 
563
563
 
@@ -594,7 +594,7 @@ It is extended from `@mui/material/FormControl`, so it includes all properties o
594
594
  | multiple | bool | false | false | If `true`, you can select more than 1 option. |
595
595
  | options | Array\<IRadioOption\> | | true | The radio options. See the **Selector Option Props** above. |
596
596
  | showHelperText | bool | false | false | If `true`, show the helper text. |
597
- | tooltip | string | | false | A tooltip for the `Select` element. |
597
+ | tooltip | ReactNode | | false | A tooltip for the `Select` element. |
598
598
 
599
599
  <h5>Simple Selector Props</h5> Extended from the Base Props
600
600
 
@@ -712,15 +712,15 @@ import NumberInput from '@symply.io/basic-components/NumberInput';
712
712
 
713
713
  <h5>Props</h5>
714
714
 
715
- | Name | Type | Default | Required | Description |
716
- | ----------- | ------ | ----------- | -------- | ------------------------------------------------------------ |
717
- | decimals | number | 0 | false | The max length of decimals, if `0` then no limit. |
718
- | integerOnly | bool | | false | If `true`, not allow to type a decimal value. |
719
- | maxValue | number | 2^53 − 1 | false | The max value of the `Input` element you can type in. |
720
- | minValue | number | −(2^53 − 1) | false | The min value of the `Input` element you should type in. |
721
- | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
722
- | tooltip | string | | false | A tooltip for the `Input` element. |
723
- | value | string | | true | The value of the `Input` element. |
715
+ | Name | Type | Default | Required | Description |
716
+ | ----------- | --------- | ----------- | -------- | ------------------------------------------------------------ |
717
+ | decimals | number | 0 | false | The max length of decimals, if `0` then no limit. |
718
+ | integerOnly | bool | | false | If `true`, not allow to type a decimal value. |
719
+ | maxValue | number | 2^53 − 1 | false | The max value of the `Input` element you can type in. |
720
+ | minValue | number | −(2^53 − 1) | false | The min value of the `Input` element you should type in. |
721
+ | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
722
+ | tooltip | ReactNode | | false | A tooltip for the `Input` element. |
723
+ | value | string | | true | The value of the `Input` element. |
724
724
 
725
725
 
726
726
 
@@ -910,13 +910,13 @@ import TextInput from '@symply.io/basic-components/TextInput';
910
910
 
911
911
  <h5>Props</h5>
912
912
 
913
- | Name | Type | Default | Required | Description |
914
- | --------- | ------ | ------- | -------- | ------------------------------------------------------------ |
915
- | maxLength | number | 999 | false | The max length of the `Input` element you can type in. |
916
- | minLength | number | 0 | false | The min length of the `Input` element you should type in. |
917
- | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
918
- | tooltip | string | | false | A tooltip for the `Input` element. |
919
- | value | string | | true | The value of the `Input` element. |
913
+ | Name | Type | Default | Required | Description |
914
+ | --------- | --------- | ------- | -------- | ------------------------------------------------------------ |
915
+ | maxLength | number | 999 | false | The max length of the `Input` element you can type in. |
916
+ | minLength | number | 0 | false | The min length of the `Input` element you should type in. |
917
+ | onChange | func | | true | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
918
+ | tooltip | ReactNode | | false | A tooltip for the `Input` element. |
919
+ | value | string | | true | The value of the `Input` element. |
920
920
 
921
921
 
922
922
 
package/TextInput/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { CSSProperties } from "react";
1
+ import { ReactNode, CSSProperties } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface TextInputProps extends Omit<TextFieldProps, "onChange"> {
4
4
  onChange: (value: string) => void;
5
5
  value: string;
6
- tooltip?: string;
6
+ tooltip?: ReactNode;
7
7
  maxLength?: number;
8
8
  minLength?: number;
9
9
  primaryColor?: CSSProperties["color"];
package/TextInput/index.js CHANGED
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import Tooltip from "@mui/material/Tooltip";
25
25
  import Field from "@mui/material/TextField";
26
26
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -30,7 +30,7 @@ function TextInput(props) {
30
30
  var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
31
31
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
32
32
  var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
33
- 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(Field, __assign({ size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
33
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
34
34
  if (onFocus) {
35
35
  onFocus(event);
36
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.7.2-alpha.2",
3
+ "version": "1.7.3-alpha.1",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",