@auth0/quantum-product 1.10.2 → 1.11.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 (16) hide show
  1. package/esm/icon-button/icon-button.js +14 -5
  2. package/esm/label/label.js +21 -3
  3. package/esm/spinner/spinner.js +17 -8
  4. package/icon-button/icon-button.d.ts +0 -1
  5. package/icon-button/icon-button.js +15 -6
  6. package/label/label.d.ts +1 -0
  7. package/label/label.js +21 -3
  8. package/package.json +1 -1
  9. package/spinner/spinner.d.ts +3 -1
  10. package/spinner/spinner.js +17 -8
  11. package/esm/pagination/pager/pager.test.js +0 -47
  12. package/esm/test-utils.js +0 -68
  13. package/pagination/pager/pager.test.d.ts +0 -1
  14. package/pagination/pager/pager.test.js +0 -72
  15. package/test-utils.d.ts +0 -14
  16. package/test-utils.js +0 -100
package/esm/icon-button/icon-button.js CHANGED
@@ -26,13 +26,12 @@ import { styled } from '../styled';
26
26
  import { useIconButtonContext } from './icon-button-context';
27
27
  import { Tooltip } from '../tooltip';
28
28
  export var IconButtonComponentName = 'QuantumIconButton';
29
- export var IconButtonTooltipComponentName = 'QuantumIconTooltip';
30
29
  export { iconButtonClasses };
31
- var Root = styled(Tooltip, { name: IconButtonTooltipComponentName, slot: 'Root' })({});
30
+ var Root = styled(Tooltip, { name: IconButtonComponentName, slot: 'Tooltip' })({});
32
31
  // using any here to work arround TS perf issues with OverrideableComponent and styled
33
32
  var StyledIconButton = styled(MuiIconButton, {
34
33
  name: IconButtonComponentName,
35
- slot: 'IconButton',
34
+ slot: 'Root',
36
35
  })(function (_a) {
37
36
  var _b;
38
37
  var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
@@ -50,10 +49,20 @@ var StyledIconButton = styled(MuiIconButton, {
50
49
  borderRadius: '50%',
51
50
  })));
52
51
  });
52
+ var DisabledWrapper = styled('span', {
53
+ name: IconButtonComponentName,
54
+ slot: 'DisabledWrapper',
55
+ // doing this prevents the label from being applied to the span. Instead it is applied to the IconButton
56
+ shouldForwardProp: function (prop) { return prop !== 'aria-label' && prop !== 'title'; },
57
+ })({
58
+ display: 'inline-flex',
59
+ flex: 0,
60
+ width: 'max-content',
61
+ });
53
62
  export var IconButton = React.forwardRef(function (props, ref) {
54
63
  var iconButtonContext = useIconButtonContext();
55
64
  var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
56
65
  var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
57
- return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
58
- React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children)));
66
+ var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": label }, iconButtonProps), children));
67
+ return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
59
68
  });
package/esm/label/label.js CHANGED
@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
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
+ };
12
23
  import * as React from 'react';
13
24
  import { rootShouldForwardProp, styled } from '../styled';
14
25
  export var labelComponentName = 'QuantumLabel';
@@ -46,7 +57,7 @@ var StyledLabel = styled('span', {
46
57
  slot: 'Root',
47
58
  shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'color' && prop !== 'variant'; },
48
59
  })(function (_a) {
49
- var theme = _a.theme, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
60
+ var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
50
61
  return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
51
62
  background: theme.tokens.color_bg_state_neutral_subtle,
52
63
  color: theme.tokens.color_fg_on_state_neutral_subtle,
@@ -98,6 +109,13 @@ var StyledLabel = styled('span', {
98
109
  })))));
99
110
  });
100
111
  export var Label = React.forwardRef(function (props, ref) {
101
- var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a;
102
- return (React.createElement(StyledLabel, __assign({ ref: ref }, getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr), props)));
112
+ var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
113
+ var ownerState = productReleaseStage
114
+ ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
115
+ : {
116
+ color: color,
117
+ variant: variant,
118
+ children: children,
119
+ };
120
+ return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
103
121
  });
package/esm/spinner/spinner.js CHANGED
@@ -32,14 +32,21 @@ var Root = styled('div', {
32
32
  })(function (_a) {
33
33
  var theme = _a.theme, ownerState = _a.ownerState;
34
34
  var sizeValue = {
35
- small: theme.typography.pxToRem(14),
35
+ small: theme.typography.pxToRem(16),
36
36
  medium: theme.typography.pxToRem(40),
37
37
  large: theme.typography.pxToRem(60),
38
38
  }[ownerState.size || 'medium'];
39
+ var fontSize = {
40
+ small: theme.typography.pxToRem(7),
41
+ medium: theme.typography.pxToRem(19),
42
+ large: theme.typography.pxToRem(30),
43
+ }[ownerState.size || 'medium'];
39
44
  return {
40
45
  height: sizeValue,
41
46
  width: sizeValue,
42
47
  position: 'relative',
48
+ fontSize: fontSize,
49
+ color: theme.tokens.color_fg_default,
43
50
  };
44
51
  });
45
52
  var StyledSpinner = styled('span', {
@@ -48,12 +55,13 @@ var StyledSpinner = styled('span', {
48
55
  })(function (_a) {
49
56
  var theme = _a.theme, ownerState = _a.ownerState;
50
57
  var sizeValue = {
51
- small: theme.typography.pxToRem(14),
58
+ small: theme.typography.pxToRem(16),
52
59
  medium: theme.typography.pxToRem(40),
53
60
  large: theme.typography.pxToRem(60),
54
61
  }[ownerState.size || 'medium'];
55
62
  return {
56
63
  height: sizeValue,
64
+ position: 'absolute',
57
65
  width: sizeValue,
58
66
  '@keyframes rotate': {
59
67
  '0%': { transform: 'rotate(0deg)' },
@@ -68,11 +76,14 @@ var StyledSpinner = styled('span', {
68
76
  animation: 'rotate 0.8s infinite linear',
69
77
  };
70
78
  });
71
- var StyledLogo = styled(Logo, { name: spinnerComponentName, slot: 'Logo' })({
79
+ var IconContainer = styled('span', { name: spinnerComponentName, slot: 'Logo' })({
72
80
  position: 'absolute',
73
81
  top: '50%',
74
82
  left: '50%',
75
83
  transform: 'translate(-48%, -50%)',
84
+ display: 'flex',
85
+ alignItems: 'center',
86
+ justifyContent: 'center',
76
87
  });
77
88
  var useUtilityClasses = function (_a) {
78
89
  var classes = _a.classes;
@@ -84,16 +95,14 @@ var useUtilityClasses = function (_a) {
84
95
  return composeClasses(slots, getSpinnerUtilityClass, classes);
85
96
  };
86
97
  export var Spinner = React.forwardRef(function (props, ref) {
98
+ var _a = props.size, size = _a === void 0 ? 'small' : _a, icon = props.icon, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, propClasses = props.classes, className = props.className, rootProps = __rest(props, ["size", "icon", "inverse", "LogoProps", "classes", "className"]);
87
99
  var classes = useUtilityClasses(props);
88
- var _a = props.size, size = _a === void 0 ? 'small' : _a, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, className = props.className, rootProps = __rest(props, ["size", "inverse", "LogoProps", "className"]);
89
100
  var ownerState = {
90
101
  size: size,
91
102
  inverse: inverse,
92
103
  };
93
- if (size === 'small') {
94
- return (React.createElement(StyledSpinner, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.spinner, className) }, rootProps)));
95
- }
96
104
  return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, className) }, rootProps),
97
105
  React.createElement(StyledSpinner, { ownerState: ownerState, className: classes.spinner }),
98
- React.createElement(StyledLogo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps))));
106
+ React.createElement(IconContainer, null, icon ||
107
+ (size !== 'small' && (React.createElement(Logo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps)))))));
99
108
  });
package/icon-button/icon-button.d.ts CHANGED
@@ -3,7 +3,6 @@ import { iconButtonClasses, IconButtonTypeMap } from '@mui/material/IconButton';
3
3
  import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../overridable-component';
4
4
  import { ITooltipProps } from '../tooltip';
5
5
  export declare const IconButtonComponentName: "QuantumIconButton";
6
- export declare const IconButtonTooltipComponentName: "QuantumIconTooltip";
7
6
  export { iconButtonClasses };
8
7
  export declare type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType extends React.ElementType = IconButtonTypeMap['defaultComponent']> = IconButtonTypeMap<ExtraPropsType & {
9
8
  /**
package/icon-button/icon-button.js CHANGED
@@ -45,7 +45,7 @@ var __rest = (this && this.__rest) || function (s, e) {
45
45
  return t;
46
46
  };
47
47
  Object.defineProperty(exports, "__esModule", { value: true });
48
- exports.IconButton = exports.iconButtonClasses = exports.IconButtonTooltipComponentName = exports.IconButtonComponentName = void 0;
48
+ exports.IconButton = exports.iconButtonClasses = exports.IconButtonComponentName = void 0;
49
49
  var React = __importStar(require("react"));
50
50
  var IconButton_1 = __importStar(require("@mui/material/IconButton"));
51
51
  Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
@@ -53,12 +53,11 @@ var styled_1 = require("../styled");
53
53
  var icon_button_context_1 = require("./icon-button-context");
54
54
  var tooltip_1 = require("../tooltip");
55
55
  exports.IconButtonComponentName = 'QuantumIconButton';
56
- exports.IconButtonTooltipComponentName = 'QuantumIconTooltip';
57
- var Root = (0, styled_1.styled)(tooltip_1.Tooltip, { name: exports.IconButtonTooltipComponentName, slot: 'Root' })({});
56
+ var Root = (0, styled_1.styled)(tooltip_1.Tooltip, { name: exports.IconButtonComponentName, slot: 'Tooltip' })({});
58
57
  // using any here to work arround TS perf issues with OverrideableComponent and styled
59
58
  var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
60
59
  name: exports.IconButtonComponentName,
61
- slot: 'IconButton',
60
+ slot: 'Root',
62
61
  })(function (_a) {
63
62
  var _b;
64
63
  var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
@@ -76,10 +75,20 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
76
75
  borderRadius: '50%',
77
76
  })));
78
77
  });
78
+ var DisabledWrapper = (0, styled_1.styled)('span', {
79
+ name: exports.IconButtonComponentName,
80
+ slot: 'DisabledWrapper',
81
+ // doing this prevents the label from being applied to the span. Instead it is applied to the IconButton
82
+ shouldForwardProp: function (prop) { return prop !== 'aria-label' && prop !== 'title'; },
83
+ })({
84
+ display: 'inline-flex',
85
+ flex: 0,
86
+ width: 'max-content',
87
+ });
79
88
  exports.IconButton = React.forwardRef(function (props, ref) {
80
89
  var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
81
90
  var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
82
91
  var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
83
- return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
84
- React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children)));
92
+ var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": label }, iconButtonProps), children));
93
+ return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
85
94
  });
package/label/label.d.ts CHANGED
@@ -18,4 +18,5 @@ export declare type ILabelProps = IStyledComponentProps<{
18
18
  props: ILabelComponentProps;
19
19
  defaultComponent: 'span';
20
20
  }>;
21
+ export declare type LabelReleaseStageProps = Pick<ILabelProps, 'color' | 'variant' | 'children'>;
21
22
  export declare const Label: React.ForwardRefExoticComponent<ILabelComponentProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | keyof ILabelComponentProps> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLSpanElement>>;
package/label/label.js CHANGED
@@ -33,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
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
+ };
36
47
  Object.defineProperty(exports, "__esModule", { value: true });
37
48
  exports.Label = exports.labelComponentName = void 0;
38
49
  var React = __importStar(require("react"));
@@ -72,7 +83,7 @@ var StyledLabel = (0, styled_1.styled)('span', {
72
83
  slot: 'Root',
73
84
  shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'color' && prop !== 'variant'; },
74
85
  })(function (_a) {
75
- var theme = _a.theme, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
86
+ var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
76
87
  return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
77
88
  background: theme.tokens.color_bg_state_neutral_subtle,
78
89
  color: theme.tokens.color_fg_on_state_neutral_subtle,
@@ -124,6 +135,13 @@ var StyledLabel = (0, styled_1.styled)('span', {
124
135
  })))));
125
136
  });
126
137
  exports.Label = React.forwardRef(function (props, ref) {
127
- var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a;
128
- return (React.createElement(StyledLabel, __assign({ ref: ref }, getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr), props)));
138
+ var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
139
+ var ownerState = productReleaseStage
140
+ ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
141
+ : {
142
+ color: color,
143
+ variant: variant,
144
+ children: children,
145
+ };
146
+ return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
129
147
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.10.2",
3
+ "version": "1.11.1",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/spinner/spinner.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare type ISpinnerProps = IStyledComponentProps<{
9
9
  size?: 'small' | 'medium' | 'large';
10
10
  LogoProps?: Partial<ILogoProps>;
11
11
  classes?: Partial<SpinnerClasses>;
12
+ icon?: React.ReactNode;
12
13
  };
13
14
  defaultComponent: 'div';
14
15
  }>;
@@ -18,4 +19,5 @@ export declare const Spinner: React.ForwardRefExoticComponent<{
18
19
  size?: "small" | "medium" | "large" | undefined;
19
20
  LogoProps?: Partial<ILogoProps> | undefined;
20
21
  classes?: Partial<Record<"spinner" | "root" | "logo", string>> | undefined;
21
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "classes" | "inverse" | "LogoProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
22
+ icon?: React.ReactNode;
23
+ } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "icon" | "classes" | "inverse" | "LogoProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
package/spinner/spinner.js CHANGED
@@ -61,14 +61,21 @@ var Root = (0, styled_1.styled)('div', {
61
61
  })(function (_a) {
62
62
  var theme = _a.theme, ownerState = _a.ownerState;
63
63
  var sizeValue = {
64
- small: theme.typography.pxToRem(14),
64
+ small: theme.typography.pxToRem(16),
65
65
  medium: theme.typography.pxToRem(40),
66
66
  large: theme.typography.pxToRem(60),
67
67
  }[ownerState.size || 'medium'];
68
+ var fontSize = {
69
+ small: theme.typography.pxToRem(7),
70
+ medium: theme.typography.pxToRem(19),
71
+ large: theme.typography.pxToRem(30),
72
+ }[ownerState.size || 'medium'];
68
73
  return {
69
74
  height: sizeValue,
70
75
  width: sizeValue,
71
76
  position: 'relative',
77
+ fontSize: fontSize,
78
+ color: theme.tokens.color_fg_default,
72
79
  };
73
80
  });
74
81
  var StyledSpinner = (0, styled_1.styled)('span', {
@@ -77,12 +84,13 @@ var StyledSpinner = (0, styled_1.styled)('span', {
77
84
  })(function (_a) {
78
85
  var theme = _a.theme, ownerState = _a.ownerState;
79
86
  var sizeValue = {
80
- small: theme.typography.pxToRem(14),
87
+ small: theme.typography.pxToRem(16),
81
88
  medium: theme.typography.pxToRem(40),
82
89
  large: theme.typography.pxToRem(60),
83
90
  }[ownerState.size || 'medium'];
84
91
  return {
85
92
  height: sizeValue,
93
+ position: 'absolute',
86
94
  width: sizeValue,
87
95
  '@keyframes rotate': {
88
96
  '0%': { transform: 'rotate(0deg)' },
@@ -97,11 +105,14 @@ var StyledSpinner = (0, styled_1.styled)('span', {
97
105
  animation: 'rotate 0.8s infinite linear',
98
106
  };
99
107
  });
100
- var StyledLogo = (0, styled_1.styled)(logo_1.Logo, { name: spinner_classes_1.spinnerComponentName, slot: 'Logo' })({
108
+ var IconContainer = (0, styled_1.styled)('span', { name: spinner_classes_1.spinnerComponentName, slot: 'Logo' })({
101
109
  position: 'absolute',
102
110
  top: '50%',
103
111
  left: '50%',
104
112
  transform: 'translate(-48%, -50%)',
113
+ display: 'flex',
114
+ alignItems: 'center',
115
+ justifyContent: 'center',
105
116
  });
106
117
  var useUtilityClasses = function (_a) {
107
118
  var classes = _a.classes;
@@ -113,16 +124,14 @@ var useUtilityClasses = function (_a) {
113
124
  return (0, classes_1.composeClasses)(slots, spinner_classes_1.getSpinnerUtilityClass, classes);
114
125
  };
115
126
  exports.Spinner = React.forwardRef(function (props, ref) {
127
+ var _a = props.size, size = _a === void 0 ? 'small' : _a, icon = props.icon, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, propClasses = props.classes, className = props.className, rootProps = __rest(props, ["size", "icon", "inverse", "LogoProps", "classes", "className"]);
116
128
  var classes = useUtilityClasses(props);
117
- var _a = props.size, size = _a === void 0 ? 'small' : _a, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, className = props.className, rootProps = __rest(props, ["size", "inverse", "LogoProps", "className"]);
118
129
  var ownerState = {
119
130
  size: size,
120
131
  inverse: inverse,
121
132
  };
122
- if (size === 'small') {
123
- return (React.createElement(StyledSpinner, __assign({ ref: ref, ownerState: ownerState, className: (0, clsx_1.default)(classes.spinner, className) }, rootProps)));
124
- }
125
133
  return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
126
134
  React.createElement(StyledSpinner, { ownerState: ownerState, className: classes.spinner }),
127
- React.createElement(StyledLogo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps))));
135
+ React.createElement(IconContainer, null, icon ||
136
+ (size !== 'small' && (React.createElement(logo_1.Logo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps)))))));
128
137
  });
package/esm/pagination/pager/pager.test.js DELETED
@@ -1,47 +0,0 @@
1
- import * as React from 'react';
2
- import { Pager } from '..';
3
- import { fireEvent, render, runBaseTests } from '../../test-utils';
4
- runBaseTests(Pager, { page: 1 });
5
- test('disables previous and next page if disabled is true', function () {
6
- var getByLabelText = render(React.createElement(Pager, { page: 2, disabled: true })).getByLabelText;
7
- var previousPageButton = getByLabelText('Previous page');
8
- var nextPageButton = getByLabelText('Next page');
9
- expect(previousPageButton.disabled).toBe(true);
10
- expect(nextPageButton.disabled).toBe(true);
11
- });
12
- test('disables previous page on first page', function () {
13
- var getByLabelText = render(React.createElement(Pager, { page: 1 })).getByLabelText;
14
- var previousPageButton = getByLabelText('Previous page');
15
- expect(previousPageButton.disabled).toBe(true);
16
- });
17
- test('disables previous page if previousDisabled is true', function () {
18
- var getByLabelText = render(React.createElement(Pager, { page: 2, previousDisabled: true })).getByLabelText;
19
- var previousPageButton = getByLabelText('Previous page');
20
- expect(previousPageButton.disabled).toBe(true);
21
- });
22
- test('disables next page if nextDisabled is true', function () {
23
- var getByLabelText = render(React.createElement(Pager, { page: 2, nextDisabled: true })).getByLabelText;
24
- var nextPageButton = getByLabelText('Next page');
25
- expect(nextPageButton.disabled).toBe(true);
26
- });
27
- test('disables next page if page is equal to totalPages', function () {
28
- var getByLabelText = render(React.createElement(Pager, { page: 2, totalPages: 2 })).getByLabelText;
29
- var nextPageButton = getByLabelText('Next page');
30
- expect(nextPageButton.disabled).toBe(true);
31
- });
32
- test('goes previous page if previous page is clicked', function () {
33
- var currentPage = 2;
34
- var pageChangeHandler = jest.fn();
35
- var getByLabelText = render(React.createElement(Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
36
- var previousPageButton = getByLabelText('Previous page');
37
- fireEvent.click(previousPageButton);
38
- expect(pageChangeHandler).toBeCalledWith(currentPage - 1);
39
- });
40
- test('goes next page if next page is clicked', function () {
41
- var currentPage = 2;
42
- var pageChangeHandler = jest.fn();
43
- var getByLabelText = render(React.createElement(Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
44
- var nextPageButton = getByLabelText('Next page');
45
- fireEvent.click(nextPageButton);
46
- expect(pageChangeHandler).toBeCalledWith(currentPage + 1);
47
- });
package/esm/test-utils.js DELETED
@@ -1,68 +0,0 @@
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
- import * as React from 'react';
13
- import { faker } from '@faker-js/faker';
14
- import { render } from '@testing-library/react';
15
- import { ThemeProvider } from './theme';
16
- var getClassName = function (componentName, className) { return "".concat(componentName, "-").concat(className); };
17
- export var createDOMId = function (id) {
18
- if (id === void 0) { id = faker.random.alphaNumeric(8); }
19
- // queryselectors do not like ids that begin with numbers. This avoids that.
20
- return "a0-".concat(id);
21
- };
22
- var Providers = function (_a) {
23
- var children = _a.children;
24
- return React.createElement(ThemeProvider, null, children);
25
- };
26
- var customRender = (function (ui, options) { return render(ui, __assign({ wrapper: Providers }, options)); });
27
- function createClassNameGetter(componentName) {
28
- return function (className) { return getClassName(componentName, className); };
29
- }
30
- // eslint-disable-next-line import/export
31
- export * from '@testing-library/react';
32
- // override render method
33
- // eslint-disable-next-line import/export
34
- export { customRender as render, faker, createClassNameGetter };
35
- export function runBaseTests(Component, baseProps, _a) {
36
- if (baseProps === void 0) { baseProps = {}; }
37
- var _b = _a === void 0 ? {} : _a, _c = _b.overridable, overridable = _c === void 0 ? true : _c;
38
- test('spreads additional props to the element', function () {
39
- var testId = faker.random.alphaNumeric();
40
- var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { "data-testid": testId }))).getByTestId;
41
- expect(function () { return getByTestId(testId); }).not.toThrow();
42
- });
43
- // test('className is passed to the root element', () => {
44
- // const testId = faker.random.alphaNumeric();
45
- // const { getByTestId } = customRender(<Component {...baseProps} data-testid={testId} />);
46
- // expect(() => getByTestId(testId)).not.toThrow();
47
- // });
48
- test('ref is passed to the element', function () {
49
- var testId = faker.random.alphaNumeric();
50
- var ref = React.createRef();
51
- var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { ref: ref, "data-testid": testId }))).getByTestId;
52
- var rootElement = getByTestId(testId);
53
- expect(rootElement).toBe(ref.current);
54
- });
55
- if (overridable) {
56
- // TODO: Refactor to suppoert `as` prop
57
- // test.skip('A different html tag can be used', () => {
58
- // const testId = faker.random.alphaNumeric();
59
- // const newTag = 'header';
60
- // const { getByTestId } = customRender(<Component {...baseProps} component={newTag} data-testid={testId} />);
61
- // const rootElement = getByTestId(testId);
62
- // expect(rootElement.tagName).toBe(newTag.toUpperCase());
63
- // });
64
- }
65
- }
66
- export function mock(values) {
67
- return values;
68
- }
package/pagination/pager/pager.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/pagination/pager/pager.test.js DELETED
@@ -1,72 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- var React = __importStar(require("react"));
27
- var __1 = require("..");
28
- var test_utils_1 = require("../../test-utils");
29
- (0, test_utils_1.runBaseTests)(__1.Pager, { page: 1 });
30
- test('disables previous and next page if disabled is true', function () {
31
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, disabled: true })).getByLabelText;
32
- var previousPageButton = getByLabelText('Previous page');
33
- var nextPageButton = getByLabelText('Next page');
34
- expect(previousPageButton.disabled).toBe(true);
35
- expect(nextPageButton.disabled).toBe(true);
36
- });
37
- test('disables previous page on first page', function () {
38
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 1 })).getByLabelText;
39
- var previousPageButton = getByLabelText('Previous page');
40
- expect(previousPageButton.disabled).toBe(true);
41
- });
42
- test('disables previous page if previousDisabled is true', function () {
43
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, previousDisabled: true })).getByLabelText;
44
- var previousPageButton = getByLabelText('Previous page');
45
- expect(previousPageButton.disabled).toBe(true);
46
- });
47
- test('disables next page if nextDisabled is true', function () {
48
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, nextDisabled: true })).getByLabelText;
49
- var nextPageButton = getByLabelText('Next page');
50
- expect(nextPageButton.disabled).toBe(true);
51
- });
52
- test('disables next page if page is equal to totalPages', function () {
53
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: 2, totalPages: 2 })).getByLabelText;
54
- var nextPageButton = getByLabelText('Next page');
55
- expect(nextPageButton.disabled).toBe(true);
56
- });
57
- test('goes previous page if previous page is clicked', function () {
58
- var currentPage = 2;
59
- var pageChangeHandler = jest.fn();
60
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
61
- var previousPageButton = getByLabelText('Previous page');
62
- test_utils_1.fireEvent.click(previousPageButton);
63
- expect(pageChangeHandler).toBeCalledWith(currentPage - 1);
64
- });
65
- test('goes next page if next page is clicked', function () {
66
- var currentPage = 2;
67
- var pageChangeHandler = jest.fn();
68
- var getByLabelText = (0, test_utils_1.render)(React.createElement(__1.Pager, { page: currentPage, onPageChange: pageChangeHandler })).getByLabelText;
69
- var nextPageButton = getByLabelText('Next page');
70
- test_utils_1.fireEvent.click(nextPageButton);
71
- expect(pageChangeHandler).toBeCalledWith(currentPage + 1);
72
- });
package/test-utils.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- import { faker } from '@faker-js/faker';
3
- import { render } from '@testing-library/react';
4
- export declare const createDOMId: (id?: string) => string;
5
- declare const customRender: typeof render;
6
- declare function createClassNameGetter<ClassKey extends string>(componentName: string): (className: ClassKey) => string;
7
- export * from '@testing-library/react';
8
- export { customRender as render, faker, createClassNameGetter };
9
- interface IBaseTestOptions {
10
- /** Disables/Enables base test for overriding the element */
11
- overridable?: boolean;
12
- }
13
- export declare function runBaseTests<PropsType, ElementType extends HTMLElement = HTMLElement>(Component: React.ComponentType<PropsType>, baseProps?: PropsType, { overridable }?: IBaseTestOptions): void;
14
- export declare function mock<Item = any>(values: Partial<Item>): Item;
package/test-utils.js DELETED
@@ -1,100 +0,0 @@
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
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
37
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
38
- };
39
- Object.defineProperty(exports, "__esModule", { value: true });
40
- exports.mock = exports.runBaseTests = exports.createClassNameGetter = exports.faker = exports.render = exports.createDOMId = void 0;
41
- var React = __importStar(require("react"));
42
- var faker_1 = require("@faker-js/faker");
43
- Object.defineProperty(exports, "faker", { enumerable: true, get: function () { return faker_1.faker; } });
44
- var react_1 = require("@testing-library/react");
45
- var theme_1 = require("./theme");
46
- var getClassName = function (componentName, className) { return "".concat(componentName, "-").concat(className); };
47
- var createDOMId = function (id) {
48
- if (id === void 0) { id = faker_1.faker.random.alphaNumeric(8); }
49
- // queryselectors do not like ids that begin with numbers. This avoids that.
50
- return "a0-".concat(id);
51
- };
52
- exports.createDOMId = createDOMId;
53
- var Providers = function (_a) {
54
- var children = _a.children;
55
- return React.createElement(theme_1.ThemeProvider, null, children);
56
- };
57
- var customRender = (function (ui, options) { return (0, react_1.render)(ui, __assign({ wrapper: Providers }, options)); });
58
- exports.render = customRender;
59
- function createClassNameGetter(componentName) {
60
- return function (className) { return getClassName(componentName, className); };
61
- }
62
- exports.createClassNameGetter = createClassNameGetter;
63
- // eslint-disable-next-line import/export
64
- __exportStar(require("@testing-library/react"), exports);
65
- function runBaseTests(Component, baseProps, _a) {
66
- if (baseProps === void 0) { baseProps = {}; }
67
- var _b = _a === void 0 ? {} : _a, _c = _b.overridable, overridable = _c === void 0 ? true : _c;
68
- test('spreads additional props to the element', function () {
69
- var testId = faker_1.faker.random.alphaNumeric();
70
- var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { "data-testid": testId }))).getByTestId;
71
- expect(function () { return getByTestId(testId); }).not.toThrow();
72
- });
73
- // test('className is passed to the root element', () => {
74
- // const testId = faker.random.alphaNumeric();
75
- // const { getByTestId } = customRender(<Component {...baseProps} data-testid={testId} />);
76
- // expect(() => getByTestId(testId)).not.toThrow();
77
- // });
78
- test('ref is passed to the element', function () {
79
- var testId = faker_1.faker.random.alphaNumeric();
80
- var ref = React.createRef();
81
- var getByTestId = customRender(React.createElement(Component, __assign({}, baseProps, { ref: ref, "data-testid": testId }))).getByTestId;
82
- var rootElement = getByTestId(testId);
83
- expect(rootElement).toBe(ref.current);
84
- });
85
- if (overridable) {
86
- // TODO: Refactor to suppoert `as` prop
87
- // test.skip('A different html tag can be used', () => {
88
- // const testId = faker.random.alphaNumeric();
89
- // const newTag = 'header';
90
- // const { getByTestId } = customRender(<Component {...baseProps} component={newTag} data-testid={testId} />);
91
- // const rootElement = getByTestId(testId);
92
- // expect(rootElement.tagName).toBe(newTag.toUpperCase());
93
- // });
94
- }
95
- }
96
- exports.runBaseTests = runBaseTests;
97
- function mock(values) {
98
- return values;
99
- }
100
- exports.mock = mock;