@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.
Files changed (130) hide show
  1. package/button/README.md +19 -2
  2. package/button/lib/IconButton.tsx +7 -1
  3. package/button/lib/PrimaryButton.tsx +18 -2
  4. package/button/lib/SecondaryButton.tsx +18 -2
  5. package/button/lib/TertiaryButton.tsx +18 -2
  6. package/button/lib/ToolbarDropdownButton.tsx +11 -2
  7. package/button/lib/ToolbarIconButton.tsx +2 -1
  8. package/button/lib/parts/ButtonLabelIcon.tsx +13 -2
  9. package/dist/commonjs/button/lib/IconButton.d.ts +5 -0
  10. package/dist/commonjs/button/lib/IconButton.d.ts.map +1 -1
  11. package/dist/commonjs/button/lib/IconButton.js +2 -2
  12. package/dist/commonjs/button/lib/PrimaryButton.d.ts +5 -0
  13. package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
  14. package/dist/commonjs/button/lib/PrimaryButton.js +3 -3
  15. package/dist/commonjs/button/lib/SecondaryButton.d.ts +5 -0
  16. package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
  17. package/dist/commonjs/button/lib/SecondaryButton.js +3 -3
  18. package/dist/commonjs/button/lib/TertiaryButton.d.ts +5 -0
  19. package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
  20. package/dist/commonjs/button/lib/TertiaryButton.js +3 -3
  21. package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
  22. package/dist/commonjs/button/lib/ToolbarDropdownButton.js +3 -3
  23. package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map +1 -1
  24. package/dist/commonjs/button/lib/ToolbarIconButton.js +2 -2
  25. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
  26. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  27. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +2 -2
  28. package/dist/commonjs/icon/lib/AccentIcon.d.ts.map +1 -1
  29. package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
  30. package/dist/commonjs/icon/lib/AppletIcon.d.ts +1 -1
  31. package/dist/commonjs/icon/lib/AppletIcon.d.ts.map +1 -1
  32. package/dist/commonjs/icon/lib/AppletIcon.js +2 -2
  33. package/dist/commonjs/icon/lib/Graphic.d.ts +1 -1
  34. package/dist/commonjs/icon/lib/Graphic.d.ts.map +1 -1
  35. package/dist/commonjs/icon/lib/Graphic.js +2 -2
  36. package/dist/commonjs/icon/lib/Icon.d.ts.map +1 -1
  37. package/dist/commonjs/icon/lib/Icon.js +2 -2
  38. package/dist/commonjs/icon/lib/Svg.d.ts +5 -0
  39. package/dist/commonjs/icon/lib/Svg.d.ts.map +1 -1
  40. package/dist/commonjs/icon/lib/Svg.js +2 -1
  41. package/dist/commonjs/icon/lib/SystemIcon.d.ts.map +1 -1
  42. package/dist/commonjs/icon/lib/SystemIcon.js +2 -2
  43. package/dist/commonjs/icon/lib/SystemIconCircle.d.ts +1 -1
  44. package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map +1 -1
  45. package/dist/commonjs/icon/lib/SystemIconCircle.js +2 -2
  46. package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +1 -1
  47. package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
  48. package/dist/commonjs/tooltip/lib/OverflowTooltip.js +11 -9
  49. package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts.map +1 -1
  50. package/dist/commonjs/tooltip/lib/TooltipContainer.js +18 -1
  51. package/dist/commonjs/tooltip/lib/useTooltip.d.ts +4 -4
  52. package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
  53. package/dist/es6/button/lib/IconButton.d.ts +5 -0
  54. package/dist/es6/button/lib/IconButton.d.ts.map +1 -1
  55. package/dist/es6/button/lib/IconButton.js +2 -2
  56. package/dist/es6/button/lib/PrimaryButton.d.ts +5 -0
  57. package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
  58. package/dist/es6/button/lib/PrimaryButton.js +3 -3
  59. package/dist/es6/button/lib/SecondaryButton.d.ts +5 -0
  60. package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
  61. package/dist/es6/button/lib/SecondaryButton.js +3 -3
  62. package/dist/es6/button/lib/TertiaryButton.d.ts +5 -0
  63. package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
  64. package/dist/es6/button/lib/TertiaryButton.js +3 -3
  65. package/dist/es6/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
  66. package/dist/es6/button/lib/ToolbarDropdownButton.js +3 -3
  67. package/dist/es6/button/lib/ToolbarIconButton.d.ts.map +1 -1
  68. package/dist/es6/button/lib/ToolbarIconButton.js +2 -2
  69. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
  70. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  71. package/dist/es6/button/lib/parts/ButtonLabelIcon.js +2 -2
  72. package/dist/es6/icon/lib/AccentIcon.d.ts.map +1 -1
  73. package/dist/es6/icon/lib/AccentIcon.js +2 -2
  74. package/dist/es6/icon/lib/AppletIcon.d.ts +1 -1
  75. package/dist/es6/icon/lib/AppletIcon.d.ts.map +1 -1
  76. package/dist/es6/icon/lib/AppletIcon.js +2 -2
  77. package/dist/es6/icon/lib/Graphic.d.ts +1 -1
  78. package/dist/es6/icon/lib/Graphic.d.ts.map +1 -1
  79. package/dist/es6/icon/lib/Graphic.js +2 -2
  80. package/dist/es6/icon/lib/Icon.d.ts.map +1 -1
  81. package/dist/es6/icon/lib/Icon.js +2 -2
  82. package/dist/es6/icon/lib/Svg.d.ts +5 -0
  83. package/dist/es6/icon/lib/Svg.d.ts.map +1 -1
  84. package/dist/es6/icon/lib/Svg.js +2 -1
  85. package/dist/es6/icon/lib/SystemIcon.d.ts.map +1 -1
  86. package/dist/es6/icon/lib/SystemIcon.js +2 -2
  87. package/dist/es6/icon/lib/SystemIconCircle.d.ts +1 -1
  88. package/dist/es6/icon/lib/SystemIconCircle.d.ts.map +1 -1
  89. package/dist/es6/icon/lib/SystemIconCircle.js +2 -2
  90. package/dist/es6/pagination/lib/Pagination/Pagination.d.ts +1 -1
  91. package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
  92. package/dist/es6/tooltip/lib/OverflowTooltip.js +11 -6
  93. package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map +1 -1
  94. package/dist/es6/tooltip/lib/TooltipContainer.js +18 -1
  95. package/dist/es6/tooltip/lib/useTooltip.d.ts +4 -4
  96. package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
  97. package/icon/README.md +60 -0
  98. package/icon/lib/AccentIcon.tsx +10 -1
  99. package/icon/lib/AppletIcon.tsx +5 -2
  100. package/icon/lib/Graphic.tsx +3 -2
  101. package/icon/lib/Icon.tsx +11 -2
  102. package/icon/lib/Svg.tsx +7 -1
  103. package/icon/lib/SystemIcon.tsx +2 -0
  104. package/icon/lib/SystemIconCircle.tsx +3 -1
  105. package/package.json +5 -5
  106. package/tooltip/lib/OverflowTooltip.tsx +20 -15
  107. package/tooltip/lib/TooltipContainer.tsx +23 -0
  108. package/tooltip/lib/useTooltip.tsx +5 -5
  109. package/ts3.5/dist/commonjs/button/lib/IconButton.d.ts +5 -0
  110. package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts +5 -0
  111. package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts +5 -0
  112. package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts +5 -0
  113. package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
  114. package/ts3.5/dist/commonjs/icon/lib/AppletIcon.d.ts +1 -1
  115. package/ts3.5/dist/commonjs/icon/lib/Graphic.d.ts +1 -1
  116. package/ts3.5/dist/commonjs/icon/lib/Svg.d.ts +5 -0
  117. package/ts3.5/dist/commonjs/icon/lib/SystemIconCircle.d.ts +1 -1
  118. package/ts3.5/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +1 -1
  119. package/ts3.5/dist/commonjs/tooltip/lib/useTooltip.d.ts +4 -4
  120. package/ts3.5/dist/es6/button/lib/IconButton.d.ts +5 -0
  121. package/ts3.5/dist/es6/button/lib/PrimaryButton.d.ts +5 -0
  122. package/ts3.5/dist/es6/button/lib/SecondaryButton.d.ts +5 -0
  123. package/ts3.5/dist/es6/button/lib/TertiaryButton.d.ts +5 -0
  124. package/ts3.5/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +6 -1
  125. package/ts3.5/dist/es6/icon/lib/AppletIcon.d.ts +1 -1
  126. package/ts3.5/dist/es6/icon/lib/Graphic.d.ts +1 -1
  127. package/ts3.5/dist/es6/icon/lib/Svg.d.ts +5 -0
  128. package/ts3.5/dist/es6/icon/lib/SystemIconCircle.d.ts +1 -1
  129. package/ts3.5/dist/es6/pagination/lib/Pagination/Pagination.d.ts +1 -1
  130. 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;CAcd"}
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;CACtC;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjD,MAAM;CAgCd"}
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;CAsCP"}
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;IAC7E;;;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;CAwBP"}
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;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AA6D7F,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,8EAwC3B,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 titleText = react_innertext_1.default(children);
105
- var _c = useTooltip_1.useTooltip({ type: 'label', titleText: titleText }), targetProps = _c.targetProps, popperProps = _c.popperProps, tooltipProps = _c.tooltipProps;
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
- if (isOverflowed(event.currentTarget)) {
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
- if (isOverflowed(event.currentTarget)) {
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,8JAqC5B,CAAC"}
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 HTMLElement = HTMLElement>({ type, titleText, }?: {
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<HTMLElement, Event>) => void;
33
+ onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
34
34
  onMouseLeave: () => void;
35
- onMouseDown: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
36
- onFocus: (event: React.FocusEvent<HTMLElement>) => void;
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,WAAW,GAAG,WAAW,EAAE,EAC9D,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"}
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,oEA6DrB,CAAC"}
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,uEAkCxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}
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,yEAmC1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}
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,wEAmDzB,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,+EA+BhC,CAAC"}
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,2EA4C5B,CAAC"}
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;CACjC;AAqBD,eAAO,MAAM,eAAe,0FAa3B,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"}