@auth0/quantum-product 2.4.1 → 2.4.2

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 (10) hide show
  1. package/card/card.js +7 -1
  2. package/color-text-field/color-text-field.js +1 -1
  3. package/esm/card/card.js +7 -1
  4. package/esm/color-text-field/color-text-field.js +1 -1
  5. package/esm/form/form-field/form-field.js +2 -2
  6. package/esm/input/input.js +4 -2
  7. package/form/form-field/form-field.d.ts +3 -1
  8. package/form/form-field/form-field.js +2 -2
  9. package/input/input.js +4 -2
  10. package/package.json +1 -1
package/card/card.js CHANGED
@@ -84,7 +84,12 @@ var Root = (0, styled_1.styled)(Card_1.default, {
84
84
  boxShadow: 'none',
85
85
  },
86
86
  };
87
- return __assign(__assign(__assign(__assign(__assign({}, (ownerState.button && __assign({
87
+ var defaultBorderStyle = {
88
+ '&:hover': theme.palette.mode === 'dark' && {
89
+ borderColor: theme.tokens.color_border_bold,
90
+ },
91
+ };
92
+ return __assign(__assign(__assign(__assign(__assign(__assign({}, defaultBorderStyle), (ownerState.button && __assign({
88
93
  borderColor: theme.tokens.color_border_default,
89
94
  cursor: 'pointer',
90
95
  transition: theme.transitions.create(['box-shadow', 'border-color'], {
@@ -97,6 +102,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
97
102
  : {
98
103
  backgroundColor: (0, color_manipulator_1.fade)(theme.palette.action.hoverBackground, 0.1),
99
104
  boxShadow: theme.shadows[1],
105
+ borderColor: theme.tokens.color_border_bold,
100
106
  },
101
107
  '&:focus': __assign({ outlineOffset: 2 }, theme.mixins.focusRing()),
102
108
  }))), (ownerState.selectableButton && {
package/color-text-field/color-text-field.js CHANGED
@@ -112,7 +112,7 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
112
112
  }, [value, defaultValue, placeholder]);
113
113
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
114
114
  startAdornment: (React.createElement(input_1.InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
115
- React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: color, onChange: handleColorChange }))),
115
+ React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
116
116
  value: value,
117
117
  placeholder: placeholder,
118
118
  } })));
package/esm/card/card.js CHANGED
@@ -55,7 +55,12 @@ var Root = styled(MuiCard, {
55
55
  boxShadow: 'none',
56
56
  },
57
57
  };
58
- return __assign(__assign(__assign(__assign(__assign({}, (ownerState.button && __assign({
58
+ var defaultBorderStyle = {
59
+ '&:hover': theme.palette.mode === 'dark' && {
60
+ borderColor: theme.tokens.color_border_bold,
61
+ },
62
+ };
63
+ return __assign(__assign(__assign(__assign(__assign(__assign({}, defaultBorderStyle), (ownerState.button && __assign({
59
64
  borderColor: theme.tokens.color_border_default,
60
65
  cursor: 'pointer',
61
66
  transition: theme.transitions.create(['box-shadow', 'border-color'], {
@@ -68,6 +73,7 @@ var Root = styled(MuiCard, {
68
73
  : {
69
74
  backgroundColor: fade(theme.palette.action.hoverBackground, 0.1),
70
75
  boxShadow: theme.shadows[1],
76
+ borderColor: theme.tokens.color_border_bold,
71
77
  },
72
78
  '&:focus': __assign({ outlineOffset: 2 }, theme.mixins.focusRing()),
73
79
  }))), (ownerState.selectableButton && {
package/esm/color-text-field/color-text-field.js CHANGED
@@ -86,7 +86,7 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
86
86
  }, [value, defaultValue, placeholder]);
87
87
  return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
88
88
  startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
89
- React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled || props.readOnly, value: color, onChange: handleColorChange }))),
89
+ React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
90
90
  value: value,
91
91
  placeholder: placeholder,
92
92
  } })));
package/esm/form/form-field/form-field.js CHANGED
@@ -38,7 +38,7 @@ export var FormField = React.forwardRef(function (props, ref) {
38
38
  var controlId = "".concat(id, "-control");
39
39
  var helperTextId = helperText ? "".concat(id, "-helperText") : undefined;
40
40
  var errorTextId = error ? "".concat(id, "-feedback") : undefined;
41
- return (React.createElement(FormControl, __assign({ className: clsx(classes.root, className), disabled: readOnly || disabled, error: !!error }, rootProps, { sx: sx, ref: ref }),
41
+ return (React.createElement(FormControl, __assign({ className: clsx(classes.root, className), disabled: disabled, error: !!error }, rootProps, { sx: sx, ref: ref }),
42
42
  label && !hiddenLabel && (React.createElement(InputLabel, __assign({ className: classes.label, htmlFor: controlId }, InputLabelProps), label)),
43
43
  isFormControlRenderer(children)
44
44
  ? children({ controlId: controlId, helperTextId: helperTextId, errorTextId: errorTextId })
@@ -51,7 +51,7 @@ export var FormField = React.forwardRef(function (props, ref) {
51
51
  }
52
52
  return React.cloneElement(child, {
53
53
  id: controlId,
54
- readOnly: readOnly || disabled,
54
+ readOnly: readOnly,
55
55
  'aria-label': hiddenLabel ? label : '',
56
56
  'aria-describedby': clsx(helperTextId, errorTextId),
57
57
  });
package/esm/input/input.js CHANGED
@@ -38,7 +38,9 @@ export var getMaskedInputProps = function (masked, inputProps) {
38
38
  };
39
39
  var Root = styled(MuiOutlinedInput, { slot: 'Root', name: 'QuantumInput' })(function (_a) {
40
40
  var theme = _a.theme, multiline = _a.multiline, ownerState = _a.ownerState;
41
- return __assign({}, (ownerState.code && __assign(__assign({}, theme.typography.code1), { lineHeight: !multiline ? theme.typography.input.lineHeight : undefined })));
41
+ return __assign(__assign({}, (ownerState.code && __assign(__assign({}, theme.typography.code1), { lineHeight: !multiline ? theme.typography.input.lineHeight : undefined }))), (ownerState.readOnly && {
42
+ backgroundColor: theme.tokens.color_bg_disabled,
43
+ }));
42
44
  });
43
45
  export var Input = React.forwardRef(function (props, ref) {
44
46
  var actions = props.actions, icon = props.icon, code = props.code, masked = props.masked, multiline = props.multiline, _a = props.inputProps, inputPropsProp = _a === void 0 ? {} : _a, min = props.min, max = props.max, readOnly = props.readOnly, disabled = props.disabled, size = props.size, margin = props.margin, suffix = props.suffix, endAdornmentProp = props.endAdornment, startAdornmentProp = props.startAdornment,
@@ -50,5 +52,5 @@ export var Input = React.forwardRef(function (props, ref) {
50
52
  var startAdornment = startAdornmentProp || (icon && React.createElement(InputAdornment, { position: "start" }, icon));
51
53
  var maskedProps = getMaskedInputProps(masked, rootProps);
52
54
  var inputProps = __assign({ min: min, max: max, readOnly: readOnly }, inputPropsProp);
53
- return (React.createElement(Root, __assign({ ownerState: { code: code }, size: size, disabled: disabled || readOnly, multiline: multiline, endAdornment: endAdornment, startAdornment: startAdornment, inputProps: inputProps }, rootProps, maskedProps, { ref: ref })));
55
+ return (React.createElement(Root, __assign({ ownerState: { code: code, readOnly: readOnly }, size: size, disabled: disabled, multiline: multiline, endAdornment: endAdornment, startAdornment: startAdornment, inputProps: inputProps }, rootProps, maskedProps, { ref: ref })));
54
56
  });
package/form/form-field/form-field.d.ts CHANGED
@@ -23,8 +23,10 @@ export interface IFormFieldProps extends Omit<IFormControlProps, 'onChange' | 'd
23
23
  label?: React.ReactNode;
24
24
  /** error message content */
25
25
  error?: React.ReactNode;
26
- /** currently an alternative to disabled. This may be styled different in the future. Mainly used for RBAC right now. */
26
+ /** readOnly applied to formfields to make them read only */
27
27
  readOnly?: boolean;
28
+ /** disabled applied to formControl to make the form disabled */
29
+ disabled?: boolean;
28
30
  /** the control. Supports a render function for non-standard controls. */
29
31
  children?: React.ReactNode | FormControlRenderer;
30
32
  classes?: Partial<FormFieldClasses>;
package/form/form-field/form-field.js CHANGED
@@ -67,7 +67,7 @@ exports.FormField = React.forwardRef(function (props, ref) {
67
67
  var controlId = "".concat(id, "-control");
68
68
  var helperTextId = helperText ? "".concat(id, "-helperText") : undefined;
69
69
  var errorTextId = error ? "".concat(id, "-feedback") : undefined;
70
- return (React.createElement(form_control_1.FormControl, __assign({ className: (0, clsx_1.default)(classes.root, className), disabled: readOnly || disabled, error: !!error }, rootProps, { sx: sx, ref: ref }),
70
+ return (React.createElement(form_control_1.FormControl, __assign({ className: (0, clsx_1.default)(classes.root, className), disabled: disabled, error: !!error }, rootProps, { sx: sx, ref: ref }),
71
71
  label && !hiddenLabel && (React.createElement(input_1.InputLabel, __assign({ className: classes.label, htmlFor: controlId }, InputLabelProps), label)),
72
72
  isFormControlRenderer(children)
73
73
  ? children({ controlId: controlId, helperTextId: helperTextId, errorTextId: errorTextId })
@@ -80,7 +80,7 @@ exports.FormField = React.forwardRef(function (props, ref) {
80
80
  }
81
81
  return React.cloneElement(child, {
82
82
  id: controlId,
83
- readOnly: readOnly || disabled,
83
+ readOnly: readOnly,
84
84
  'aria-label': hiddenLabel ? label : '',
85
85
  'aria-describedby': (0, clsx_1.default)(helperTextId, errorTextId),
86
86
  });
package/input/input.js CHANGED
@@ -68,7 +68,9 @@ var getMaskedInputProps = function (masked, inputProps) {
68
68
  exports.getMaskedInputProps = getMaskedInputProps;
69
69
  var Root = (0, styled_1.styled)(OutlinedInput_1.default, { slot: 'Root', name: 'QuantumInput' })(function (_a) {
70
70
  var theme = _a.theme, multiline = _a.multiline, ownerState = _a.ownerState;
71
- return __assign({}, (ownerState.code && __assign(__assign({}, theme.typography.code1), { lineHeight: !multiline ? theme.typography.input.lineHeight : undefined })));
71
+ return __assign(__assign({}, (ownerState.code && __assign(__assign({}, theme.typography.code1), { lineHeight: !multiline ? theme.typography.input.lineHeight : undefined }))), (ownerState.readOnly && {
72
+ backgroundColor: theme.tokens.color_bg_disabled,
73
+ }));
72
74
  });
73
75
  exports.Input = React.forwardRef(function (props, ref) {
74
76
  var actions = props.actions, icon = props.icon, code = props.code, masked = props.masked, multiline = props.multiline, _a = props.inputProps, inputPropsProp = _a === void 0 ? {} : _a, min = props.min, max = props.max, readOnly = props.readOnly, disabled = props.disabled, size = props.size, margin = props.margin, suffix = props.suffix, endAdornmentProp = props.endAdornment, startAdornmentProp = props.startAdornment,
@@ -80,5 +82,5 @@ exports.Input = React.forwardRef(function (props, ref) {
80
82
  var startAdornment = startAdornmentProp || (icon && React.createElement(input_adornment_1.InputAdornment, { position: "start" }, icon));
81
83
  var maskedProps = (0, exports.getMaskedInputProps)(masked, rootProps);
82
84
  var inputProps = __assign({ min: min, max: max, readOnly: readOnly }, inputPropsProp);
83
- return (React.createElement(Root, __assign({ ownerState: { code: code }, size: size, disabled: disabled || readOnly, multiline: multiline, endAdornment: endAdornment, startAdornment: startAdornment, inputProps: inputProps }, rootProps, maskedProps, { ref: ref })));
85
+ return (React.createElement(Root, __assign({ ownerState: { code: code, readOnly: readOnly }, size: size, disabled: disabled, multiline: multiline, endAdornment: endAdornment, startAdornment: startAdornment, inputProps: inputProps }, rootProps, maskedProps, { ref: ref })));
84
86
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.1",
3
+ "version": "2.4.2",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {