@auth0/quantum-product 2.4.0 → 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 (14) hide show
  1. package/card/card.js +7 -1
  2. package/color-text-field/color-text-field.js +1 -1
  3. package/copy-button/copy-button.js +25 -3
  4. package/data-table/data-table-row.js +1 -1
  5. package/esm/card/card.js +7 -1
  6. package/esm/color-text-field/color-text-field.js +1 -1
  7. package/esm/copy-button/copy-button.js +25 -3
  8. package/esm/data-table/data-table-row.js +1 -1
  9. package/esm/form/form-field/form-field.js +2 -2
  10. package/esm/input/input.js +4 -2
  11. package/form/form-field/form-field.d.ts +3 -1
  12. package/form/form-field/form-field.js +2 -2
  13. package/input/input.js +4 -2
  14. 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/copy-button/copy-button.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
33
  __setModuleDefault(result, mod);
23
34
  return result;
24
35
  };
36
+ var __rest = (this && this.__rest) || function (s, e) {
37
+ var t = {};
38
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
39
+ t[p] = s[p];
40
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
41
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
42
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
43
+ t[p[i]] = s[p[i]];
44
+ }
45
+ return t;
46
+ };
25
47
  var __read = (this && this.__read) || function (o, n) {
26
48
  var m = typeof Symbol === "function" && o[Symbol.iterator];
27
49
  if (!m) return o;
@@ -44,7 +66,7 @@ var React = __importStar(require("react"));
44
66
  var icon_1 = require("../icon");
45
67
  var icon_button_1 = require("../icon-button");
46
68
  exports.CopyButton = React.forwardRef(function (_a, ref) {
47
- var onClick = _a.onClick;
69
+ var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
48
70
  var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
49
71
  React.useEffect(function () {
50
72
  if (!pressed) {
@@ -63,7 +85,7 @@ exports.CopyButton = React.forwardRef(function (_a, ref) {
63
85
  };
64
86
  var handleClose = function () { return setPressed(false); };
65
87
  // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
66
- var title = pressed ? 'Copied!' : 'Copy';
67
- return (React.createElement(icon_button_1.IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
88
+ var title = pressed ? 'Copied!' : label;
89
+ return (React.createElement(icon_button_1.IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
68
90
  React.createElement(icon_1.CopyIcon, null)));
69
91
  });
package/data-table/data-table-row.js CHANGED
@@ -106,7 +106,7 @@ function DataTableRow(props) {
106
106
  }
107
107
  return hideHeader ? (React.createElement(table_1.TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(table_1.TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
108
108
  }),
109
- !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
109
+ !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
110
110
  !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
111
111
  React.createElement(table_1.TableCell, { padding: "none", colSpan: columns.length + 1 },
112
112
  React.createElement(collapse_1.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },
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/copy-button/copy-button.js CHANGED
@@ -1,3 +1,25 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
1
23
  var __read = (this && this.__read) || function (o, n) {
2
24
  var m = typeof Symbol === "function" && o[Symbol.iterator];
3
25
  if (!m) return o;
@@ -18,7 +40,7 @@ import * as React from 'react';
18
40
  import { CopyIcon } from '../icon';
19
41
  import { IconButton } from '../icon-button';
20
42
  export var CopyButton = React.forwardRef(function (_a, ref) {
21
- var onClick = _a.onClick;
43
+ var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
22
44
  var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
23
45
  React.useEffect(function () {
24
46
  if (!pressed) {
@@ -37,7 +59,7 @@ export var CopyButton = React.forwardRef(function (_a, ref) {
37
59
  };
38
60
  var handleClose = function () { return setPressed(false); };
39
61
  // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
40
- var title = pressed ? 'Copied!' : 'Copy';
41
- return (React.createElement(IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
62
+ var title = pressed ? 'Copied!' : label;
63
+ return (React.createElement(IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
42
64
  React.createElement(CopyIcon, null)));
43
65
  });
package/esm/data-table/data-table-row.js CHANGED
@@ -79,7 +79,7 @@ export function DataTableRow(props) {
79
79
  }
80
80
  return hideHeader ? (React.createElement(TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
81
81
  }),
82
- !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
82
+ !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
83
83
  !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
84
84
  React.createElement(TableCell, { padding: "none", colSpan: columns.length + 1 },
85
85
  React.createElement(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },
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.0",
3
+ "version": "2.4.2",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {