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

package/DigitInput/index.js

@@ -30,7 +30,7 @@ function DigitInput(props) {
     var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "maxLength", "minLength", "endAdornment", "primaryColor", "secondaryColor"]);
     var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.onCloseTooltip;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    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: 1299 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
+    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: "text", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
                     endAdornment: endAdornment
                 }, onChange: handleChange }, rest)) })) })));
 }

package/FormRadioGroup/index.js

@@ -33,7 +33,7 @@ import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
     var formLabel = props.formLabel, value = props.value, name = props.name, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, radioLabelPlacement = props.radioLabelPlacement, onChange = props.onChange, rest = __rest(props, ["formLabel", "value", "name", "options", "disabled", "tooltip", "primaryColor", "secondaryColor", "radioLabelPlacement", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true, PopperProps: { sx: { zIndex: 1299 } } }, { children: _jsx(FormLabel, { children: formLabel }) }))) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true, PopperProps: { sx: { zIndex: theme.zIndex.modal + 1 } } }, { children: _jsx(FormLabel, { children: formLabel }) }))) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
                         onChange(event.target.value);
                     } }, { children: options.map(function (opt) {
                         var _a;

package/FormSelector/MultipleSelector.js

@@ -36,7 +36,7 @@ function MultipleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _g = props.showCheckmarks, showCheckmarks = _g === void 0 ? false : _g, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "showCheckmarks", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _h = useInteractions(), tooltipOpen = _h.tooltipOpen, onOpenTooltip = _h.onOpenTooltip, onCloseTooltip = _h.onCloseTooltip;
-    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: 1299 } } }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, name: name, onChange: function (event) {
+    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: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, name: name, onChange: function (event) {
                             var _a;
                             event.preventDefault();
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);

package/FormSelector/SimpleSelector.js

@@ -34,7 +34,7 @@ function SimpleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, name = props.name, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "name", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
-    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: 1299 } } }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, name: name, required: required, disabled: disabled, onChange: function (event) {
+    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: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, name: name, required: required, disabled: disabled, onChange: function (event) {
                             var _a;
                             event.preventDefault();
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);

package/NumberInput/index.js

@@ -42,6 +42,6 @@ function NumberInput(props) {
         onChange: onChange
     }), typing = _f.typing, exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, roundedValue = _f.roundedValue, handleBlur = _f.handleBlur, handleFocus = _f.handleFocus, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
     var valueDisplay = useMemo(function () { return (typing ? value : roundedValue); }, [typing, value, roundedValue]);
-    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: 1299 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
+    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: "text", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
 }
 export default NumberInput;

package/README.md

@@ -42,6 +42,7 @@
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
+  - [VirtualDataTable](#virtualdatatable)
 - [Changelog](#changelog)
 
 
@@ -975,7 +976,7 @@ Reusable data table component with virtualizer
 <h5>Import</h5>
 
 ```tsx
-import { VirtualDataTablev } from '@symply.io/basic-components';
+import { VirtualDataTable } from '@symply.io/basic-components';
 // or 
 import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable'; 
 ```

package/TextInput/index.js

@@ -30,7 +30,7 @@ function TextInput(props) {
     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"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
-    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: 1299 } } }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
+    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) {
                     if (onFocus) {
                         onFocus(event);
                     }

package/package.json

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