@workday/canvas-kit-react 6.0.0-beta.0-next.11 → 6.0.0-beta.0-next.16
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.
- package/button/README.md +19 -2
- package/button/lib/IconButton.tsx +7 -1
- package/button/lib/PrimaryButton.tsx +18 -2
- package/button/lib/SecondaryButton.tsx +18 -2
- package/button/lib/TertiaryButton.tsx +18 -2
- package/button/lib/ToolbarDropdownButton.tsx +11 -2
- package/button/lib/ToolbarIconButton.tsx +2 -1
- package/button/lib/parts/ButtonLabelIcon.tsx +13 -2
- package/dist/commonjs/button/lib/IconButton.d.ts +5 -0
- package/dist/commonjs/button/lib/IconButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/IconButton.js +2 -2
- package/dist/commonjs/button/lib/PrimaryButton.d.ts +5 -0
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +3 -3
- package/dist/commonjs/button/lib/SecondaryButton.d.ts +5 -0
- package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/SecondaryButton.js +3 -3
- package/dist/commonjs/button/lib/TertiaryButton.d.ts +5 -0
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +3 -3
- package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +3 -3
- package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +2 -2
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +2 -2
- package/dist/commonjs/icon/lib/AccentIcon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
- package/dist/commonjs/icon/lib/AppletIcon.d.ts +1 -1
- package/dist/commonjs/icon/lib/AppletIcon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/AppletIcon.js +2 -2
- package/dist/commonjs/icon/lib/Graphic.d.ts +1 -1
- package/dist/commonjs/icon/lib/Graphic.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/Graphic.js +2 -2
- package/dist/commonjs/icon/lib/Icon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/Icon.js +2 -2
- package/dist/commonjs/icon/lib/Svg.d.ts +5 -0
- package/dist/commonjs/icon/lib/Svg.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/Svg.js +2 -1
- package/dist/commonjs/icon/lib/SystemIcon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/SystemIcon.js +2 -2
- package/dist/commonjs/icon/lib/SystemIconCircle.d.ts +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.js +2 -2
- package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.js +11 -9
- package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/TooltipContainer.js +18 -1
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts +4 -4
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/es6/button/lib/IconButton.d.ts +5 -0
- package/dist/es6/button/lib/IconButton.d.ts.map +1 -1
- package/dist/es6/button/lib/IconButton.js +2 -2
- package/dist/es6/button/lib/PrimaryButton.d.ts +5 -0
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +3 -3
- package/dist/es6/button/lib/SecondaryButton.d.ts +5 -0
- package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/SecondaryButton.js +3 -3
- package/dist/es6/button/lib/TertiaryButton.d.ts +5 -0
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +3 -3
- package/dist/es6/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarDropdownButton.js +3 -3
- package/dist/es6/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +2 -2
- package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
- package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
- package/dist/es6/button/lib/parts/ButtonLabelIcon.js +2 -2
- package/dist/es6/icon/lib/AccentIcon.d.ts.map +1 -1
- package/dist/es6/icon/lib/AccentIcon.js +2 -2
- package/dist/es6/icon/lib/AppletIcon.d.ts +1 -1
- package/dist/es6/icon/lib/AppletIcon.d.ts.map +1 -1
- package/dist/es6/icon/lib/AppletIcon.js +2 -2
- package/dist/es6/icon/lib/Graphic.d.ts +1 -1
- package/dist/es6/icon/lib/Graphic.d.ts.map +1 -1
- package/dist/es6/icon/lib/Graphic.js +2 -2
- package/dist/es6/icon/lib/Icon.d.ts.map +1 -1
- package/dist/es6/icon/lib/Icon.js +2 -2
- package/dist/es6/icon/lib/Svg.d.ts +5 -0
- package/dist/es6/icon/lib/Svg.d.ts.map +1 -1
- package/dist/es6/icon/lib/Svg.js +2 -1
- package/dist/es6/icon/lib/SystemIcon.d.ts.map +1 -1
- package/dist/es6/icon/lib/SystemIcon.js +2 -2
- package/dist/es6/icon/lib/SystemIconCircle.d.ts +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.d.ts.map +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.js +2 -2
- package/dist/es6/pagination/lib/Pagination/Pagination.d.ts +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.js +11 -6
- package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/TooltipContainer.js +18 -1
- package/dist/es6/tooltip/lib/useTooltip.d.ts +4 -4
- package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/icon/README.md +60 -0
- package/icon/lib/AccentIcon.tsx +10 -1
- package/icon/lib/AppletIcon.tsx +5 -2
- package/icon/lib/Graphic.tsx +3 -2
- package/icon/lib/Icon.tsx +11 -2
- package/icon/lib/Svg.tsx +7 -1
- package/icon/lib/SystemIcon.tsx +2 -0
- package/icon/lib/SystemIconCircle.tsx +3 -1
- package/package.json +5 -5
- package/tooltip/lib/OverflowTooltip.tsx +20 -15
- package/tooltip/lib/TooltipContainer.tsx +23 -0
- package/tooltip/lib/useTooltip.tsx +5 -5
- package/ts3.5/dist/commonjs/button/lib/IconButton.d.ts +5 -0
- package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts +5 -0
- package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts +5 -0
- package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts +5 -0
- package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
- package/ts3.5/dist/commonjs/icon/lib/AppletIcon.d.ts +1 -1
- package/ts3.5/dist/commonjs/icon/lib/Graphic.d.ts +1 -1
- package/ts3.5/dist/commonjs/icon/lib/Svg.d.ts +5 -0
- package/ts3.5/dist/commonjs/icon/lib/SystemIconCircle.d.ts +1 -1
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +1 -1
- package/ts3.5/dist/commonjs/tooltip/lib/useTooltip.d.ts +4 -4
- package/ts3.5/dist/es6/button/lib/IconButton.d.ts +5 -0
- package/ts3.5/dist/es6/button/lib/PrimaryButton.d.ts +5 -0
- package/ts3.5/dist/es6/button/lib/SecondaryButton.d.ts +5 -0
- package/ts3.5/dist/es6/button/lib/TertiaryButton.d.ts +5 -0
- package/ts3.5/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
- package/ts3.5/dist/es6/icon/lib/AppletIcon.d.ts +1 -1
- package/ts3.5/dist/es6/icon/lib/Graphic.d.ts +1 -1
- package/ts3.5/dist/es6/icon/lib/Svg.d.ts +5 -0
- package/ts3.5/dist/es6/icon/lib/SystemIconCircle.d.ts +1 -1
- package/ts3.5/dist/es6/pagination/lib/Pagination/Pagination.d.ts +1 -1
- package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;IAC/E,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IACnD,MAAM;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;IAC/E,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IACnD,MAAM;CAuBd"}
|
|
@@ -53,7 +53,7 @@ var Icon = /** @class */ (function (_super) {
|
|
|
53
53
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
54
54
|
}
|
|
55
55
|
Icon.prototype.render = function () {
|
|
56
|
-
var _a = this.props, src = _a.src, size = _a.size, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, elemProps = __rest(_a, ["src", "size", "styles", "type", "iconRef"]);
|
|
56
|
+
var _a = this.props, src = _a.src, size = _a.size, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["src", "size", "styles", "type", "iconRef", "shouldMirror"]);
|
|
57
57
|
var iconStyles = __assign({}, styles);
|
|
58
58
|
if (size) {
|
|
59
59
|
iconStyles['& svg'] = {
|
|
@@ -61,7 +61,7 @@ var Icon = /** @class */ (function (_super) {
|
|
|
61
61
|
height: size,
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
|
-
return React.createElement(Svg_1.default, __assign({ src: src, type: type }, elemProps, { styles: iconStyles, iconRef: iconRef }));
|
|
64
|
+
return (React.createElement(Svg_1.default, __assign({ src: src, type: type, shouldMirror: shouldMirror }, elemProps, { styles: iconStyles, iconRef: iconRef })));
|
|
65
65
|
};
|
|
66
66
|
return Icon;
|
|
67
67
|
}(React.Component));
|
|
@@ -7,6 +7,11 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
7
7
|
styles?: CSSObject;
|
|
8
8
|
type: CanvasIconTypes;
|
|
9
9
|
iconRef?: React.Ref<HTMLSpanElement>;
|
|
10
|
+
/**
|
|
11
|
+
* If set to `true`, transform the SVG's x-axis to mirror the graphic
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
shouldMirror?: boolean;
|
|
10
15
|
}
|
|
11
16
|
export default class Svg extends React.Component<SvgProps> {
|
|
12
17
|
render(): JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAC,SAAS,EAAkB,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrE,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAC,SAAS,EAAkB,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrE,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjD,MAAM;CAiCd"}
|
|
@@ -52,7 +52,7 @@ var Svg = /** @class */ (function (_super) {
|
|
|
52
52
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
53
53
|
}
|
|
54
54
|
Svg.prototype.render = function () {
|
|
55
|
-
var _a = this.props, src = _a.src, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, elemProps = __rest(_a, ["src", "styles", "type", "iconRef"]);
|
|
55
|
+
var _a = this.props, src = _a.src, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["src", "styles", "type", "iconRef", "shouldMirror"]);
|
|
56
56
|
// Validation for JS
|
|
57
57
|
try {
|
|
58
58
|
utils_1.validateIconType(src, type);
|
|
@@ -69,6 +69,7 @@ var Svg = /** @class */ (function (_super) {
|
|
|
69
69
|
className: cx(css(styles, {
|
|
70
70
|
display: 'inline-block',
|
|
71
71
|
'& svg': { display: 'block' },
|
|
72
|
+
transform: shouldMirror ? 'scaleX(-1)' : undefined,
|
|
72
73
|
}), elemProps.className), ref: iconRef })));
|
|
73
74
|
}));
|
|
74
75
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AACxC,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4HA4B3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;
|
|
1
|
+
{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AACxC,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4HA4B3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAwCP"}
|
|
@@ -78,7 +78,7 @@ var SystemIcon = /** @class */ (function (_super) {
|
|
|
78
78
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
79
79
|
}
|
|
80
80
|
SystemIcon.prototype.render = function () {
|
|
81
|
-
var _a = this.props, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, icon = _a.icon, iconRef = _a.iconRef, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "iconRef", "accent", "accentHover", "fill", "fillHover", "size"]);
|
|
81
|
+
var _a = this.props, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, icon = _a.icon, iconRef = _a.iconRef, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "iconRef", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
|
|
82
82
|
var style = exports.systemIconStyles({
|
|
83
83
|
accent: accent,
|
|
84
84
|
accentHover: accentHover,
|
|
@@ -89,7 +89,7 @@ var SystemIcon = /** @class */ (function (_super) {
|
|
|
89
89
|
fill: fill,
|
|
90
90
|
fillHover: fillHover,
|
|
91
91
|
});
|
|
92
|
-
return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef }, elemProps)));
|
|
92
|
+
return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
|
|
93
93
|
};
|
|
94
94
|
return SystemIcon;
|
|
95
95
|
}(React.Component));
|
|
@@ -9,7 +9,7 @@ export declare enum SystemIconCircleSize {
|
|
|
9
9
|
xl = 64,
|
|
10
10
|
xxl = 120
|
|
11
11
|
}
|
|
12
|
-
export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef'> {
|
|
12
|
+
export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
|
|
13
13
|
/**
|
|
14
14
|
* The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
|
|
15
15
|
* @default colors.soap300
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,cAAc,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAClF,MAAM,CAAC,IAAI,8BAAwB;IAEnC,MAAM;CA0BP"}
|
|
@@ -93,11 +93,11 @@ var SystemIconCircle = /** @class */ (function (_super) {
|
|
|
93
93
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
94
94
|
}
|
|
95
95
|
SystemIconCircle.prototype.render = function () {
|
|
96
|
-
var _a = this.props, _b = _a.background, background = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, iconRef = _a.iconRef, elemProps = __rest(_a, ["background", "size", "icon", "iconRef"]);
|
|
96
|
+
var _a = this.props, _b = _a.background, background = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "iconRef", "shouldMirror"]);
|
|
97
97
|
var iconColor = common_1.pickForegroundColor(background, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
|
|
98
98
|
var iconSize = size * 0.625;
|
|
99
99
|
return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
|
|
100
|
-
React.createElement(SystemIcon_1.default, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef })));
|
|
100
|
+
React.createElement(SystemIcon_1.default, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef, shouldMirror: shouldMirror })));
|
|
101
101
|
};
|
|
102
102
|
SystemIconCircle.Size = SystemIconCircleSize;
|
|
103
103
|
return SystemIconCircle;
|
|
@@ -36,7 +36,7 @@ export declare const Pagination: {
|
|
|
36
36
|
JumpToLastButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
|
|
37
37
|
PageList(props: Pick<PageListProps, "m" | "p" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "flex" | "margin" | "overflow" | "padding" | "start" | "wrap" | "type" | "grow" | "marginX" | "marginY" | "paddingX" | "paddingY" | "basis" | "mx" | "my" | "marginT" | "mt" | "marginR" | "mr" | "marginB" | "mb" | "marginL" | "ml" | "px" | "py" | "paddingT" | "pt" | "paddingR" | "pr" | "paddingB" | "pb" | "paddingL" | "pl" | "shrink" | "reversed">): JSX.Element;
|
|
38
38
|
PageListItem(props: Pick<import("./common/Flex").FlexProps, "m" | "p" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "flex" | "margin" | "overflow" | "padding" | "wrap" | "grow" | "marginX" | "marginY" | "paddingX" | "paddingY" | "basis" | "mx" | "my" | "marginT" | "mt" | "marginR" | "mr" | "marginB" | "mb" | "marginL" | "ml" | "px" | "py" | "paddingT" | "pt" | "paddingR" | "pr" | "paddingB" | "pb" | "paddingL" | "pl" | "shrink">): JSX.Element;
|
|
39
|
-
PageButton({ "aria-label": ariaLabel, ...elemProps }: Pick<PageButtonProps, "name" | "form" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "icon" | "disabled" | "theme" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "onToggleChange" | "toggled" | "pageNumber">): JSX.Element;
|
|
39
|
+
PageButton({ "aria-label": ariaLabel, ...elemProps }: Pick<PageButtonProps, "name" | "form" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "icon" | "disabled" | "theme" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "shouldMirrorIcon" | "onToggleChange" | "toggled" | "pageNumber">): JSX.Element;
|
|
40
40
|
AdditionalDetails(props: Pick<AdditionalDetailsProps, "m" | "p" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "flex" | "margin" | "overflow" | "padding" | "wrap" | "as" | "grow" | "marginX" | "marginY" | "paddingX" | "paddingY" | "basis" | "mx" | "my" | "marginT" | "mt" | "marginR" | "mr" | "marginB" | "mb" | "marginL" | "ml" | "px" | "py" | "paddingT" | "pt" | "paddingR" | "pr" | "paddingB" | "pb" | "paddingL" | "pl" | "shrink" | "shouldAnnounceToScreenReader" | "shouldHideDetails">): JSX.Element;
|
|
41
41
|
GoToForm({ children }: GoToFormProps): JSX.Element;
|
|
42
42
|
GoToTextInput(props: GoToTextInputProps): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AA+D7F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
|
|
@@ -28,12 +28,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
28
28
|
result["default"] = mod;
|
|
29
29
|
return result;
|
|
30
30
|
};
|
|
31
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
32
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
33
|
-
};
|
|
34
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
32
|
var React = __importStar(require("react"));
|
|
36
|
-
var react_innertext_1 = __importDefault(require("react-innertext"));
|
|
37
33
|
var popup_1 = require("@workday/canvas-kit-react/popup");
|
|
38
34
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
39
35
|
var TooltipContainer_1 = require("./TooltipContainer");
|
|
@@ -50,7 +46,8 @@ var findOverflowElement = function (element) {
|
|
|
50
46
|
style.overflow === 'hidden') {
|
|
51
47
|
return element;
|
|
52
48
|
}
|
|
53
|
-
else {
|
|
49
|
+
else if (element.children) {
|
|
50
|
+
// `children` is not defined for SVGElement in IE11
|
|
54
51
|
for (var i = 0; i < element.children.length; i++) {
|
|
55
52
|
var overflowElement = findOverflowElement(element.children[i]);
|
|
56
53
|
if (overflowElement) {
|
|
@@ -59,6 +56,7 @@ var findOverflowElement = function (element) {
|
|
|
59
56
|
}
|
|
60
57
|
return null;
|
|
61
58
|
}
|
|
59
|
+
return null;
|
|
62
60
|
};
|
|
63
61
|
/**
|
|
64
62
|
* Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
|
|
@@ -101,15 +99,19 @@ function mergeCallbacks(elemProps, componentProps, keys) {
|
|
|
101
99
|
}
|
|
102
100
|
exports.OverflowTooltip = function (_a) {
|
|
103
101
|
var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
|
|
104
|
-
var
|
|
105
|
-
var
|
|
102
|
+
var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
|
|
103
|
+
var _d = useTooltip_1.useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
|
|
106
104
|
var onMouseEnter = function (event) {
|
|
107
|
-
|
|
105
|
+
var target = event.currentTarget;
|
|
106
|
+
setTitleText(target instanceof HTMLElement ? target.innerText : '');
|
|
107
|
+
if (isOverflowed(target)) {
|
|
108
108
|
targetProps.onMouseEnter(event);
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
var onFocus = function (event) {
|
|
112
|
-
|
|
112
|
+
var target = event.currentTarget;
|
|
113
|
+
setTitleText(target instanceof HTMLElement ? target.innerText : '');
|
|
114
|
+
if (isOverflowed(target)) {
|
|
113
115
|
targetProps.onFocus(event);
|
|
114
116
|
}
|
|
115
117
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB,8JA4D5B,CAAC"}
|
|
@@ -30,7 +30,7 @@ var defaultTransformOrigin = {
|
|
|
30
30
|
vertical: 'bottom',
|
|
31
31
|
horizontal: 'center',
|
|
32
32
|
};
|
|
33
|
-
exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs, color: tokens_1.colors.frenchVanilla100, a: {
|
|
33
|
+
exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs, color: tokens_1.colors.frenchVanilla100, a: {
|
|
34
34
|
color: tokens_1.colors.frenchVanilla100,
|
|
35
35
|
textDecoration: 'underline',
|
|
36
36
|
},
|
|
@@ -46,6 +46,23 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
|
|
|
46
46
|
left: 0,
|
|
47
47
|
right: 0,
|
|
48
48
|
bottom: 0,
|
|
49
|
+
},
|
|
50
|
+
// offset tooltips by 2 pixels when a keyboard focus ring is detected
|
|
51
|
+
'[data-whatinput=keyboard] &': {
|
|
52
|
+
padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs + 2,
|
|
53
|
+
':before': {
|
|
54
|
+
margin: tokens_1.spaceNumbers.xxxs + 2,
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
// Fix offsets based on placement
|
|
58
|
+
'[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
|
|
59
|
+
left: -tokens_1.spaceNumbers.xxxs,
|
|
60
|
+
}, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
|
|
61
|
+
right: -tokens_1.spaceNumbers.xxxs,
|
|
62
|
+
}, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
|
|
63
|
+
top: -tokens_1.spaceNumbers.xxxs,
|
|
64
|
+
}, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
|
|
65
|
+
bottom: -tokens_1.spaceNumbers.xxxs,
|
|
49
66
|
} }), function (_a) {
|
|
50
67
|
var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
|
|
51
68
|
if (transformOrigin === null) {
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
* Convenience hook for creating components with tooltips. It will return an object of properties to mix
|
|
4
4
|
* into a target, popper and tooltip
|
|
5
5
|
*/
|
|
6
|
-
export declare function useTooltip<T extends
|
|
6
|
+
export declare function useTooltip<T extends Element = Element>({ type, titleText, }?: {
|
|
7
7
|
/**
|
|
8
8
|
* Determines the tooltip type for accessibility.
|
|
9
9
|
*
|
|
@@ -30,10 +30,10 @@ export declare function useTooltip<T extends HTMLElement = HTMLElement>({ type,
|
|
|
30
30
|
targetProps: {
|
|
31
31
|
'aria-describedby': string | undefined;
|
|
32
32
|
'aria-label': string | undefined;
|
|
33
|
-
onMouseEnter: (event: React.SyntheticEvent<
|
|
33
|
+
onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
|
|
34
34
|
onMouseLeave: () => void;
|
|
35
|
-
onMouseDown: (event: React.MouseEvent<
|
|
36
|
-
onFocus: (event: React.FocusEvent<
|
|
35
|
+
onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
|
|
36
|
+
onFocus: (event: React.FocusEvent<Element>) => void;
|
|
37
37
|
onBlur: () => void;
|
|
38
38
|
};
|
|
39
39
|
/** Mix these properties into the `Popper` component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,GACf,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAuCF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
|
|
@@ -25,6 +25,11 @@ export interface IconButtonProps extends Themeable {
|
|
|
25
25
|
* The icon of the IconButton.
|
|
26
26
|
*/
|
|
27
27
|
icon?: CanvasSystemIcon;
|
|
28
|
+
/**
|
|
29
|
+
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
shouldMirrorIcon?: boolean;
|
|
28
33
|
/**
|
|
29
34
|
* The function called when the IconButton toggled state changes.
|
|
30
35
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EACJ,QAAQ,GACR,cAAc,GACd,OAAO,GACP,QAAQ,GACR,cAAc,GACd,SAAS,GACT,eAAe,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EACJ,QAAQ,GACR,cAAc,GACd,OAAO,GACP,QAAQ,GACR,cAAc,GACd,SAAS,GACT,eAAe,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,oEA8DrB,CAAC"}
|
|
@@ -35,7 +35,7 @@ export var IconButton = createComponent('button')({
|
|
|
35
35
|
_c = _a.theme,
|
|
36
36
|
// TODO: Fix useTheme and make it a real hook
|
|
37
37
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
|
-
theme = _c === void 0 ? useTheme() : _c, _d = _a.variant, variant = _d === void 0 ? 'circle' : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, onToggleChange = _a.onToggleChange, icon = _a.icon, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "variant", "size", "onToggleChange", "icon", "toggled", "children"]);
|
|
38
|
+
theme = _c === void 0 ? useTheme() : _c, _d = _a.variant, variant = _d === void 0 ? 'circle' : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, onToggleChange = _a.onToggleChange, icon = _a.icon, _f = _a.shouldMirrorIcon, shouldMirrorIcon = _f === void 0 ? false : _f, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "variant", "size", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
|
|
39
39
|
var isInitialMount = React.useRef(true);
|
|
40
40
|
// Only call onToggleChange on update - not on first mount
|
|
41
41
|
React.useEffect(function () {
|
|
@@ -54,7 +54,7 @@ export var IconButton = createComponent('button')({
|
|
|
54
54
|
width: size === 'small' ? '20px' : undefined,
|
|
55
55
|
height: size === 'small' ? '20px' : undefined,
|
|
56
56
|
}, _b));
|
|
57
|
-
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getIconButtonColors(variant, theme, toggled), size: size, fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon }) : children));
|
|
57
|
+
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getIconButtonColors(variant, theme, toggled), size: size, fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon, shouldMirror: shouldMirrorIcon }) : children));
|
|
58
58
|
},
|
|
59
59
|
});
|
|
60
60
|
var getIconButtonBorderRadius = function (variant) {
|
|
@@ -23,6 +23,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
|
|
|
23
23
|
* @default 'left'
|
|
24
24
|
*/
|
|
25
25
|
iconPosition?: 'left' | 'right';
|
|
26
|
+
/**
|
|
27
|
+
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
shouldMirrorIcon?: boolean;
|
|
26
31
|
children?: React.ReactNode;
|
|
27
32
|
}
|
|
28
33
|
export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEA6CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}
|
|
@@ -32,12 +32,12 @@ export var PrimaryButton = createComponent('button')({
|
|
|
32
32
|
_b = _a.theme,
|
|
33
33
|
// TODO: Fix useTheme and make it a real hook
|
|
34
34
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
35
|
-
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "children"]);
|
|
35
|
+
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
|
|
36
36
|
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getPrimaryButtonColors(theme), size: size }, elemProps),
|
|
37
|
-
icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
|
|
37
|
+
icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
38
38
|
React.createElement(ButtonLabel, null, children),
|
|
39
39
|
dataLabel && size !== 'small' && React.createElement(ButtonLabelData, null, dataLabel),
|
|
40
|
-
icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
|
|
40
|
+
icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
41
41
|
},
|
|
42
42
|
});
|
|
43
43
|
export var getPrimaryButtonColors = function (_a) {
|
|
@@ -28,6 +28,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
|
|
|
28
28
|
* @default 'left'
|
|
29
29
|
*/
|
|
30
30
|
iconPosition?: 'left' | 'right';
|
|
31
|
+
/**
|
|
32
|
+
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
shouldMirrorIcon?: boolean;
|
|
31
36
|
children?: React.ReactNode;
|
|
32
37
|
}
|
|
33
38
|
export declare const SecondaryButton: import("../../common").ElementComponent<"button", SecondaryButtonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA8C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}
|
|
@@ -33,12 +33,12 @@ export var SecondaryButton = createComponent('button')({
|
|
|
33
33
|
_b = _a.theme,
|
|
34
34
|
// TODO: Fix useTheme and make it a real hook
|
|
35
35
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
36
|
-
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "children"]);
|
|
36
|
+
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
|
|
37
37
|
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getSecondaryButtonColors(variant, theme), size: size }, elemProps),
|
|
38
|
-
icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
|
|
38
|
+
icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
39
39
|
React.createElement(ButtonLabel, null, children),
|
|
40
40
|
dataLabel && size !== 'small' && React.createElement(ButtonLabelData, null, dataLabel),
|
|
41
|
-
icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
|
|
41
|
+
icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
42
42
|
},
|
|
43
43
|
});
|
|
44
44
|
export var getSecondaryButtonColors = function (variant, theme) {
|
|
@@ -24,6 +24,11 @@ export interface TertiaryButtonProps extends Themeable {
|
|
|
24
24
|
/**
|
|
25
25
|
* The capitalization of the text in the button.
|
|
26
26
|
*/
|
|
27
|
+
/**
|
|
28
|
+
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
shouldMirrorIcon?: boolean;
|
|
27
32
|
allCaps?: boolean;
|
|
28
33
|
children?: React.ReactNode;
|
|
29
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEA8DzB,CAAC"}
|
|
@@ -113,13 +113,13 @@ export var TertiaryButton = createComponent('button')({
|
|
|
113
113
|
_b = _a.theme,
|
|
114
114
|
// TODO: Fix useTheme and make it a real hook
|
|
115
115
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
116
|
-
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, children = _a.children, icon = _a.icon, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "allCaps"]);
|
|
116
|
+
theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
|
|
117
117
|
// Note: We don't use ButtonLabel because the label styles differ from other button types
|
|
118
118
|
var allContainerStyles = allCaps
|
|
119
119
|
? __assign(__assign({}, containerStyles), { textTransform: 'uppercase', fontWeight: type.properties.fontWeights.bold, fontSize: size === 'medium' ? type.properties.fontSizes[16] : undefined, letterSpacing: '.5px' }) : __assign(__assign({}, containerStyles), { fontSize: size === 'medium' ? type.properties.fontSizes[14] : undefined });
|
|
120
120
|
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
|
|
121
|
-
icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
|
|
121
|
+
icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
122
122
|
React.createElement(ButtonLabel, { className: "wdc-text-button-label" }, children),
|
|
123
|
-
icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
|
|
123
|
+
icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
124
124
|
},
|
|
125
125
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+
|
|
1
|
+
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+EAwChC,CAAC"}
|
|
@@ -57,10 +57,10 @@ export var ToolbarDropdownButton = createComponent('button')({
|
|
|
57
57
|
_b = _a.theme,
|
|
58
58
|
// TODO: Fix useTheme and make it a real hook
|
|
59
59
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
60
|
-
theme = _b === void 0 ? useTheme() : _b, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "children"]);
|
|
60
|
+
theme = _b === void 0 ? useTheme() : _b, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "shouldMirrorIcon", "children"]);
|
|
61
61
|
return (jsx(ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), extraStyles: containerStyles }, elemProps),
|
|
62
|
-
icon ? (jsx(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon })) : (children),
|
|
63
|
-
jsx(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon })));
|
|
62
|
+
icon ? (jsx(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirror: shouldMirrorIcon })) : (children),
|
|
63
|
+
jsx(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon, shouldMirror: shouldMirrorIcon })));
|
|
64
64
|
},
|
|
65
65
|
});
|
|
66
66
|
var getToolbarDropdownButtonColors = function (theme) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,SAAS;CAAG;AAgBhB,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,SAAS;CAAG;AAgBhB,eAAO,MAAM,iBAAiB,2EA6C5B,CAAC"}
|
|
@@ -49,7 +49,7 @@ export var ToolbarIconButton = createComponent('button')({
|
|
|
49
49
|
_b = _a.theme,
|
|
50
50
|
// TODO: Fix useTheme and make it a real hook
|
|
51
51
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
52
|
-
theme = _b === void 0 ? useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "toggled", "children"]);
|
|
52
|
+
theme = _b === void 0 ? useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
|
|
53
53
|
var isInitialMount = React.useRef(true);
|
|
54
54
|
// Only call onToggleChange on update - not on first mount
|
|
55
55
|
React.useEffect(function () {
|
|
@@ -62,7 +62,7 @@ export var ToolbarIconButton = createComponent('button')({
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
}, [toggled, onToggleChange]);
|
|
65
|
-
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon }) : children));
|
|
65
|
+
return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon, shouldMirror: shouldMirrorIcon }) : children));
|
|
66
66
|
},
|
|
67
67
|
});
|
|
68
68
|
var getToolbarIconButtonColors = function (theme, toggled) {
|
|
@@ -15,6 +15,11 @@ export interface ButtonLabelIconProps {
|
|
|
15
15
|
* @default 'left'
|
|
16
16
|
*/
|
|
17
17
|
iconPosition?: 'left' | 'right';
|
|
18
|
+
/**
|
|
19
|
+
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
shouldMirrorIcon?: boolean;
|
|
18
23
|
}
|
|
19
|
-
export declare const ButtonLabelIcon: ({ icon, size, iconPosition, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
|
|
24
|
+
export declare const ButtonLabelIcon: ({ icon, size, iconPosition, shouldMirrorIcon, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
|
|
20
25
|
//# sourceMappingURL=ButtonLabelIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAqBD,eAAO,MAAM,eAAe,4GAmB3B,CAAC"}
|