@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
@@ -45,12 +45,12 @@ var ButtonLabelIconStyled = styled('span', {
45
45
  });
46
46
  });
47
47
  export var ButtonLabelIcon = function (_a) {
48
- var icon = _a.icon, size = _a.size, iconPosition = _a.iconPosition, elemProps = __rest(_a, ["icon", "size", "iconPosition"]);
48
+ var icon = _a.icon, size = _a.size, iconPosition = _a.iconPosition, _b = _a.shouldMirrorIcon, shouldMirrorIcon = _b === void 0 ? false : _b, elemProps = __rest(_a, ["icon", "size", "iconPosition", "shouldMirrorIcon"]);
49
49
  /* istanbul ignore next line for coverage */
50
50
  if (icon === undefined) {
51
51
  return null;
52
52
  }
53
53
  var iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
54
54
  return (React.createElement(ButtonLabelIconStyled, __assign({ iconPosition: iconPosition, size: size }, elemProps),
55
- React.createElement(SystemIcon, { size: iconSize, icon: icon })));
55
+ React.createElement(SystemIcon, { size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon })));
56
56
  };
@@ -1 +1 @@
1
- {"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.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;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,0DAU3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAcP"}
1
+ {"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.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;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,0DAU3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAuBP"}
@@ -54,8 +54,8 @@ var AccentIcon = /** @class */ (function (_super) {
54
54
  return _super !== null && _super.apply(this, arguments) || this;
55
55
  }
56
56
  AccentIcon.prototype.render = function () {
57
- var _a = this.props, _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "iconRef"]);
58
- return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Accent, styles: accentIconStyles({ color: color, transparent: transparent }), size: size, iconRef: iconRef }, elemProps)));
57
+ var _a = this.props, _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "iconRef", "shouldMirror"]);
58
+ return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Accent, styles: accentIconStyles({ color: color, transparent: transparent }), size: size, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
59
59
  };
60
60
  return AccentIcon;
61
61
  }(React.Component));
@@ -11,7 +11,7 @@ export interface AppletIconStyles {
11
11
  color?: BrandingColor;
12
12
  }
13
13
  export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
14
- export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef'> {
14
+ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef' | 'shouldMirror'> {
15
15
  /**
16
16
  * The icon to display from `@workday/canvas-applet-icons-web`.
17
17
  */
@@ -1 +1 @@
1
- {"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,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;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,6CAwC5B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IACnF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,OAAc,MAAM,uBAAiB;IAE9B,MAAM;CAcd"}
1
+ {"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,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;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,6CAwC5B,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,OAAc,MAAM,uBAAiB;IAE9B,MAAM;CAed"}
@@ -79,8 +79,8 @@ var AppletIcon = /** @class */ (function (_super) {
79
79
  return _super !== null && _super.apply(this, arguments) || this;
80
80
  }
81
81
  AppletIcon.prototype.render = function () {
82
- var _a = this.props, _b = _a.size, size = _b === void 0 ? 92 : _b, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, elemProps = __rest(_a, ["size", "icon", "color", "iconRef"]);
83
- return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Applet, styles: appletIconStyles({ color: color }), size: size, iconRef: iconRef }, elemProps)));
82
+ var _a = this.props, _b = _a.size, size = _b === void 0 ? 92 : _b, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["size", "icon", "color", "iconRef", "shouldMirror"]);
83
+ return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Applet, styles: appletIconStyles({ color: color }), size: size, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
84
84
  };
85
85
  AppletIcon.Colors = BrandingColor;
86
86
  return AppletIcon;
@@ -19,7 +19,7 @@ export interface GraphicStyles {
19
19
  */
20
20
  grow?: boolean;
21
21
  }
22
- export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef'> {
22
+ export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
23
23
  /**
24
24
  * The graphic to display from `@workday/canvas-graphics-web`.
25
25
  */
@@ -1 +1 @@
1
- {"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AACxC,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC5E;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,uDA4BzB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM;CAaP"}
1
+ {"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AACxC,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7F;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,uDA4BzB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM;CAcP"}
@@ -71,8 +71,8 @@ var Graphic = /** @class */ (function (_super) {
71
71
  return _super !== null && _super.apply(this, arguments) || this;
72
72
  }
73
73
  Graphic.prototype.render = function () {
74
- var _a = this.props, _b = _a.grow, grow = _b === void 0 ? false : _b, src = _a.src, width = _a.width, height = _a.height, iconRef = _a.iconRef, elemProps = __rest(_a, ["grow", "src", "width", "height", "iconRef"]);
75
- return (React.createElement(Svg, __assign({ src: src, styles: graphicStyles({ width: width, height: height, grow: grow }), type: CanvasIconTypes.Graphic, iconRef: iconRef }, elemProps)));
74
+ var _a = this.props, _b = _a.grow, grow = _b === void 0 ? false : _b, src = _a.src, width = _a.width, height = _a.height, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["grow", "src", "width", "height", "iconRef", "shouldMirror"]);
75
+ return (React.createElement(Svg, __assign({ src: src, styles: graphicStyles({ width: width, height: height, grow: grow }), type: CanvasIconTypes.Graphic, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
76
76
  };
77
77
  return Graphic;
78
78
  }(React.Component));
@@ -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"}
@@ -41,7 +41,7 @@ var Icon = /** @class */ (function (_super) {
41
41
  return _super !== null && _super.apply(this, arguments) || this;
42
42
  }
43
43
  Icon.prototype.render = function () {
44
- 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"]);
44
+ 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"]);
45
45
  var iconStyles = __assign({}, styles);
46
46
  if (size) {
47
47
  iconStyles['& svg'] = {
@@ -49,7 +49,7 @@ var Icon = /** @class */ (function (_super) {
49
49
  height: size,
50
50
  };
51
51
  }
52
- return React.createElement(Svg, __assign({ src: src, type: type }, elemProps, { styles: iconStyles, iconRef: iconRef }));
52
+ return (React.createElement(Svg, __assign({ src: src, type: type, shouldMirror: shouldMirror }, elemProps, { styles: iconStyles, iconRef: iconRef })));
53
53
  };
54
54
  return Icon;
55
55
  }(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"}
@@ -43,7 +43,7 @@ var Svg = /** @class */ (function (_super) {
43
43
  return _super !== null && _super.apply(this, arguments) || this;
44
44
  }
45
45
  Svg.prototype.render = function () {
46
- var _a = this.props, src = _a.src, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, elemProps = __rest(_a, ["src", "styles", "type", "iconRef"]);
46
+ 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"]);
47
47
  // Validation for JS
48
48
  try {
49
49
  validateIconType(src, type);
@@ -60,6 +60,7 @@ var Svg = /** @class */ (function (_super) {
60
60
  className: cx(css(styles, {
61
61
  display: 'inline-block',
62
62
  '& svg': { display: 'block' },
63
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
63
64
  }), elemProps.className), ref: iconRef })));
64
65
  }));
65
66
  };
@@ -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"}
@@ -66,7 +66,7 @@ var SystemIcon = /** @class */ (function (_super) {
66
66
  return _super !== null && _super.apply(this, arguments) || this;
67
67
  }
68
68
  SystemIcon.prototype.render = function () {
69
- 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 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? 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"]);
69
+ 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 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? 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"]);
70
70
  var style = systemIconStyles({
71
71
  accent: accent,
72
72
  accentHover: accentHover,
@@ -77,7 +77,7 @@ var SystemIcon = /** @class */ (function (_super) {
77
77
  fill: fill,
78
78
  fillHover: fillHover,
79
79
  });
80
- return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef }, elemProps)));
80
+ return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
81
81
  };
82
82
  return SystemIcon;
83
83
  }(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"}
@@ -81,11 +81,11 @@ var SystemIconCircle = /** @class */ (function (_super) {
81
81
  return _super !== null && _super.apply(this, arguments) || this;
82
82
  }
83
83
  SystemIconCircle.prototype.render = function () {
84
- var _a = this.props, _b = _a.background, background = _b === void 0 ? 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"]);
84
+ var _a = this.props, _b = _a.background, background = _b === void 0 ? 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"]);
85
85
  var iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
86
86
  var iconSize = size * 0.625;
87
87
  return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
88
- React.createElement(SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef })));
88
+ React.createElement(SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, size: iconSize, iconRef: iconRef, shouldMirror: shouldMirror })));
89
89
  };
90
90
  SystemIconCircle.Size = SystemIconCircleSize;
91
91
  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, "start" | "hidden" | "color" | "style" | "flex" | "wrap" | "padding" | "p" | "title" | "children" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "margin" | "overflow" | "m" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "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, "hidden" | "color" | "style" | "flex" | "wrap" | "padding" | "p" | "title" | "children" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "margin" | "overflow" | "m" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "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, "hidden" | "color" | "size" | "style" | "icon" | "disabled" | "form" | "title" | "children" | "theme" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "onToggleChange" | "toggled" | "pageNumber">): JSX.Element;
39
+ PageButton({ "aria-label": ariaLabel, ...elemProps }: Pick<PageButtonProps, "hidden" | "color" | "size" | "style" | "icon" | "disabled" | "form" | "title" | "children" | "theme" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "shouldMirrorIcon" | "onToggleChange" | "toggled" | "pageNumber">): JSX.Element;
40
40
  AdditionalDetails(props: Pick<AdditionalDetailsProps, "hidden" | "color" | "style" | "flex" | "wrap" | "padding" | "p" | "title" | "children" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "margin" | "overflow" | "m" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "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"}
@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import * as React from 'react';
24
- import innerText from 'react-innertext';
25
24
  import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
26
25
  import { mergeCallback } from '@workday/canvas-kit-react/common';
27
26
  import { TooltipContainer } from './TooltipContainer';
@@ -38,7 +37,8 @@ var findOverflowElement = function (element) {
38
37
  style.overflow === 'hidden') {
39
38
  return element;
40
39
  }
41
- else {
40
+ else if (element.children) {
41
+ // `children` is not defined for SVGElement in IE11
42
42
  for (var i = 0; i < element.children.length; i++) {
43
43
  var overflowElement = findOverflowElement(element.children[i]);
44
44
  if (overflowElement) {
@@ -47,6 +47,7 @@ var findOverflowElement = function (element) {
47
47
  }
48
48
  return null;
49
49
  }
50
+ return null;
50
51
  };
51
52
  /**
52
53
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
@@ -89,15 +90,19 @@ function mergeCallbacks(elemProps, componentProps, keys) {
89
90
  }
90
91
  export var OverflowTooltip = function (_a) {
91
92
  var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
92
- var titleText = innerText(children);
93
- var _c = useTooltip({ type: 'label', titleText: titleText }), targetProps = _c.targetProps, popperProps = _c.popperProps, tooltipProps = _c.tooltipProps;
93
+ var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
94
+ var _d = useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
94
95
  var onMouseEnter = function (event) {
95
- if (isOverflowed(event.currentTarget)) {
96
+ var target = event.currentTarget;
97
+ setTitleText(target instanceof HTMLElement ? target.innerText : '');
98
+ if (isOverflowed(target)) {
96
99
  targetProps.onMouseEnter(event);
97
100
  }
98
101
  };
99
102
  var onFocus = function (event) {
100
- if (isOverflowed(event.currentTarget)) {
103
+ var target = event.currentTarget;
104
+ setTitleText(target instanceof HTMLElement ? target.innerText : '');
105
+ if (isOverflowed(target)) {
101
106
  targetProps.onFocus(event);
102
107
  }
103
108
  };
@@ -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"}
@@ -25,7 +25,7 @@ var defaultTransformOrigin = {
25
25
  vertical: 'bottom',
26
26
  horizontal: 'center',
27
27
  };
28
- export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', padding: spaceNumbers.xxs + spaceNumbers.xxxs, color: colors.frenchVanilla100, a: {
28
+ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: spaceNumbers.xxs + spaceNumbers.xxxs, color: colors.frenchVanilla100, a: {
29
29
  color: colors.frenchVanilla100,
30
30
  textDecoration: 'underline',
31
31
  },
@@ -41,6 +41,23 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
41
41
  left: 0,
42
42
  right: 0,
43
43
  bottom: 0,
44
+ },
45
+ // offset tooltips by 2 pixels when a keyboard focus ring is detected
46
+ '[data-whatinput=keyboard] &': {
47
+ padding: spaceNumbers.xxs + spaceNumbers.xxxs + 2,
48
+ ':before': {
49
+ margin: spaceNumbers.xxxs + 2,
50
+ },
51
+ },
52
+ // Fix offsets based on placement
53
+ '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
54
+ left: -spaceNumbers.xxxs,
55
+ }, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
56
+ right: -spaceNumbers.xxxs,
57
+ }, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
58
+ top: -spaceNumbers.xxxs,
59
+ }, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
60
+ bottom: -spaceNumbers.xxxs,
44
61
  } }), function (_a) {
45
62
  var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
46
63
  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"}
package/icon/README.md CHANGED
@@ -34,9 +34,14 @@ import { colors } from '@workday/canvas-kit-react/tokens'
34
34
  import { AccentIcon } from '@workday/canvas-kit-react/icon'
35
35
  import { shieldIcon } from '@workday/canvas-accent-icons-web'
36
36
 
37
+ // Default Accent Icon
37
38
  <AccentIcon icon={shieldIcon} />
39
+ // Accent Icon with custom color
38
40
  <AccentIcon icon={shieldIcon} color={colors.pomegranate500} />
41
+ // Accent Icon with set size
39
42
  <AccentIcon icon={shieldIcon} size={80} />
43
+ // Accent Icon with a mirrored x-axis (helpful for bidirectional support, if needed)
44
+ <AccentIcon icon={shieldIcon} shouldMirror={true} />
40
45
  ```
41
46
 
42
47
  ## Static Properties
@@ -83,6 +88,14 @@ Default: `false`
83
88
 
84
89
  ---
85
90
 
91
+ #### `shouldMirror: boolean`
92
+
93
+ > If set to `true`, transform the SVG's x-axis to mirror the graphic
94
+
95
+ Default: `false`
96
+
97
+ ---
98
+
86
99
  # Applet Icons
87
100
 
88
101
  ## Usage
@@ -93,9 +106,14 @@ Use with `@workday/canvas-applet-icons-web`.
93
106
  import { AppletIcon } from '@workday/canvas-kit-react/icon'
94
107
  import { benefitsIcon } from '@workday/canvas-applet-icons-web'
95
108
 
109
+ // Default Applet Icon
96
110
  <AppletIcon icon={benefitsIcon} />
111
+ // Applet Icon with custom color
97
112
  <AppletIcon icon={benefitsIcon} color={AppletIcon.Colors.Pomegranate} />
113
+ // Applet Icon with set size
98
114
  <AppletIcon icon={benefitsIcon} size={60} />
115
+ // Applet Icon with a mirrored x-axis (helpful for bidirectional support, if needed)
116
+ <AppletIcon icon={benefitsIcon} shouldMirror={true} />
99
117
  ```
100
118
 
101
119
  ## Static Properties
@@ -165,6 +183,14 @@ Default: `92`
165
183
 
166
184
  ---
167
185
 
186
+ #### `shouldMirror: boolean`
187
+
188
+ > If set to `true`, transform the SVG's x-axis to mirror the graphic
189
+
190
+ Default: `false`
191
+
192
+ ---
193
+
168
194
  # System Icons
169
195
 
170
196
  ## Usage
@@ -272,6 +298,14 @@ Default: `'transparent'`
272
298
 
273
299
  ---
274
300
 
301
+ #### `shouldMirror: boolean`
302
+
303
+ > If set to `true`, transform the SVG's x-axis to mirror the graphic
304
+
305
+ Default: `false`
306
+
307
+ ---
308
+
275
309
  # System Icon Circle
276
310
 
277
311
  A system icon with a colored circular background. Icon color will be determined based on contrast
@@ -286,8 +320,12 @@ import { colors } from '@workday/canvas-kit-react/tokens'
286
320
  import { SystemIconCircle } from '@workday/canvas-kit-react/icon'
287
321
  import { shieldIcon } from '@workday/canvas-accent-icons-web'
288
322
 
323
+ // Default System Icon Circle
289
324
  <SystemIconCircle icon={shieldIcon} />
325
+ // System Icon Circle with bockground color
290
326
  <SystemIconCircle icon={shieldIcon} background={colors.pomegranate500} />
327
+ // System Icon Circle with a mirrored x-axis (helpful for bidirectional support, if needed)
328
+ <SystemIconCircle icon={shieldIcon} shouldMirror={true} />
291
329
  ```
292
330
 
293
331
  ## Static Properties
@@ -326,6 +364,14 @@ Default: `SystemIconCircleSize.l` (`40`)
326
364
 
327
365
  ---
328
366
 
367
+ #### `shouldMirror: boolean`
368
+
369
+ > If set to `true`, transform the SVG's x-axis to mirror the graphic
370
+
371
+ Default: `false`
372
+
373
+ ---
374
+
329
375
  # Graphics
330
376
 
331
377
  ## Usage
@@ -337,10 +383,16 @@ import { colors } from '@workday/canvas-kit-react/tokens'
337
383
  import { Graphic } from '@workday/canvas-kit-react/icon'
338
384
  import { badgeAchievementGraphic } from '@workday/canvas-graphics-web'
339
385
 
386
+ // Default graphic
340
387
  <Graphic src={badgeAchievementGraphic} />
388
+ // Graphic with a set width of 80px
341
389
  <Graphic src={badgeAchievementGraphic} width={80}/>
390
+ // Graphic with a set height of 80px
342
391
  <Graphic src={badgeAchievementGraphic} height={80}/>
392
+ // Graphic with growth behavior to fit its container
343
393
  <Graphic src={badgeAchievementGraphic} grow={true} />
394
+ // Graphic with a mirrored x-axis (helpful for bidirectional support, if needed)
395
+ <Graphic src={badgeAchievementGraphic} shouldMirror={true} />
344
396
  ```
345
397
 
346
398
  ## Static Properties
@@ -396,3 +448,11 @@ Default: `false`
396
448
  > Returns the ref to the rendered icon.
397
449
 
398
450
  ---
451
+
452
+ #### `shouldMirror: boolean`
453
+
454
+ > If set to `true`, transform the SVG's x-axis to mirror the graphic
455
+
456
+ Default: `false`
457
+
458
+ ---
@@ -43,7 +43,15 @@ export const accentIconStyles = ({
43
43
 
44
44
  export default class AccentIcon extends React.Component<AccentIconProps> {
45
45
  render() {
46
- const {transparent = false, size = 56, icon, color, iconRef, ...elemProps} = this.props;
46
+ const {
47
+ transparent = false,
48
+ size = 56,
49
+ icon,
50
+ color,
51
+ iconRef,
52
+ shouldMirror,
53
+ ...elemProps
54
+ } = this.props;
47
55
 
48
56
  return (
49
57
  <Icon
@@ -52,6 +60,7 @@ export default class AccentIcon extends React.Component<AccentIconProps> {
52
60
  styles={accentIconStyles({color, transparent})}
53
61
  size={size}
54
62
  iconRef={iconRef}
63
+ shouldMirror={shouldMirror}
55
64
  {...elemProps}
56
65
  />
57
66
  );