@symply.io/basic-components 1.6.10-alpha.1 → 1.6.10-alpha.3

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 (5) hide show
  1. package/FormSelector/MultipleSelector.js +2 -2
  2. package/FormSelector/SimpleSelector.js +2 -2
  3. package/FormSelector/types.d.ts +1 -0
  4. package/MenuButtonGroup/index.js +5 -6
  5. package/package.json +1 -1
package/FormSelector/MultipleSelector.js CHANGED
@@ -33,7 +33,7 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
33
33
  import useInteractions from "./useInteractions";
34
34
  import useCustomTheme from "../useCustomTheme";
35
35
  function MultipleSelector(props) {
36
- 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"]);
36
+ 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, placeholder = props.placeholder, _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", "placeholder", "options", "primaryColor", "secondaryColor", "showCheckmarks", "onChange"]);
37
37
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
38
38
  var _h = useInteractions(), tooltipOpen = _h.tooltipOpen, onOpenTooltip = _h.onOpenTooltip, onCloseTooltip = _h.onCloseTooltip;
39
39
  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) {
@@ -43,7 +43,7 @@ function MultipleSelector(props) {
43
43
  }, inputProps: {
44
44
  onFocus: onOpenTooltip,
45
45
  onBlur: onCloseTooltip,
46
- }, label: label, renderValue: multiple
46
+ }, slotProps: { input: { placeholder: placeholder } }, label: label, renderValue: multiple
47
47
  ? function (selectedValues) {
48
48
  return options
49
49
  .filter(function (opt) {
package/FormSelector/SimpleSelector.js CHANGED
@@ -31,7 +31,7 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
31
31
  import useInteractions from "./useInteractions";
32
32
  import useCustomTheme from "../useCustomTheme";
33
33
  function SimpleSelector(props) {
34
- 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"]);
34
+ 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, placeholder = props.placeholder, _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", "placeholder", "options", "primaryColor", "secondaryColor", "onChange"]);
35
35
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
36
36
  var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
37
37
  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) {
@@ -41,7 +41,7 @@ function SimpleSelector(props) {
41
41
  }, inputProps: {
42
42
  onFocus: onOpenTooltip,
43
43
  onBlur: onCloseTooltip,
44
- }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
44
+ }, slotProps: { input: { placeholder: placeholder } }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
45
45
  var label = option.label, v = option.value, disabled = option.disabled;
46
46
  return (_jsx(MenuItem, __assign({ value: v, disabled: disabled }, { children: label }), v));
47
47
  })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
package/FormSelector/types.d.ts CHANGED
@@ -7,6 +7,7 @@ interface SelectorBaseProps<T extends string | number> extends Omit<FormControlP
7
7
  tooltip?: ReactNode;
8
8
  showHelperText?: boolean;
9
9
  helperText?: string;
10
+ placeholder?: SelectProps["placeholder"];
10
11
  multiple?: SelectProps["multiple"];
11
12
  primaryColor?: CSSProperties["color"];
12
13
  secondaryColor?: CSSProperties["color"];
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 } 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";
@@ -69,13 +69,12 @@ function MenuButtonGroup(props) {
69
69
  var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
70
70
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
71
71
  var _d = useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
72
- function onClick(event) {
73
- event.stopPropagation();
72
+ var onClick = useCallback(function (event) {
74
73
  setAnchorEl(event.currentTarget);
75
- }
76
- var onClose = function () {
74
+ }, []);
75
+ var onClose = useCallback(function () {
77
76
  setAnchorEl(null);
78
- };
77
+ }, []);
79
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: {
80
79
  vertical: "bottom",
81
80
  horizontal: "center",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.6.10-alpha.1",
3
+ "version": "1.6.10-alpha.3",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",