@workday/canvas-kit-preview-react 8.0.0-alpha.116-next.1 → 8.0.0-alpha.123-next.3

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 (136) hide show
  1. package/breadcrumbs/index.ts +0 -4
  2. package/color-picker/README.md +1 -1
  3. package/color-picker/index.ts +1 -1
  4. package/color-picker/lib/ColorPicker.tsx +2 -3
  5. package/dist/commonjs/breadcrumbs/index.d.ts +0 -3
  6. package/dist/commonjs/breadcrumbs/index.d.ts.map +1 -1
  7. package/dist/commonjs/breadcrumbs/index.js +0 -4
  8. package/dist/commonjs/color-picker/index.d.ts +1 -1
  9. package/dist/commonjs/color-picker/index.d.ts.map +1 -1
  10. package/dist/commonjs/color-picker/index.js +2 -6
  11. package/dist/commonjs/color-picker/lib/ColorPicker.d.ts +1 -2
  12. package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map +1 -1
  13. package/dist/commonjs/color-picker/lib/ColorPicker.js +5 -4
  14. package/dist/commonjs/menu/index.d.ts +1 -4
  15. package/dist/commonjs/menu/index.d.ts.map +1 -1
  16. package/dist/commonjs/menu/index.js +1 -9
  17. package/dist/commonjs/menu/lib/Menu.d.ts +1 -1
  18. package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
  19. package/dist/commonjs/menu/lib/Menu.js +2 -1
  20. package/dist/commonjs/menu/lib/MenuItem.d.ts +1 -2
  21. package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
  22. package/dist/commonjs/menu/lib/MenuItem.js +2 -1
  23. package/dist/commonjs/pill/lib/Pill.d.ts +7 -0
  24. package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
  25. package/dist/commonjs/pill/lib/Pill.js +11 -4
  26. package/dist/commonjs/pill/lib/PillAvatar.d.ts +1 -0
  27. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -1
  28. package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
  29. package/dist/commonjs/pill/lib/PillIcon.d.ts +1 -0
  30. package/dist/commonjs/pill/lib/PillIcon.d.ts.map +1 -1
  31. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  32. package/dist/commonjs/pill/lib/PillIconButton.d.ts +6 -0
  33. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
  34. package/dist/commonjs/pill/lib/PillIconButton.js +17 -24
  35. package/dist/commonjs/pill/lib/PillLabel.d.ts +1 -0
  36. package/dist/commonjs/pill/lib/PillLabel.d.ts.map +1 -1
  37. package/dist/commonjs/pill/lib/PillLabel.js +1 -1
  38. package/dist/commonjs/pill/lib/usePillModel.d.ts +13 -0
  39. package/dist/commonjs/pill/lib/usePillModel.d.ts.map +1 -1
  40. package/dist/commonjs/pill/lib/usePillModel.js +7 -1
  41. package/dist/commonjs/select/index.d.ts +0 -3
  42. package/dist/commonjs/select/index.d.ts.map +1 -1
  43. package/dist/commonjs/select/index.js +0 -7
  44. package/dist/commonjs/select/lib/Select.d.ts +0 -1
  45. package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
  46. package/dist/commonjs/select/lib/Select.js +2 -6
  47. package/dist/commonjs/select/lib/SelectBase.d.ts +2 -2
  48. package/dist/commonjs/select/lib/SelectBase.d.ts.map +1 -1
  49. package/dist/commonjs/select/lib/SelectBase.js +6 -9
  50. package/dist/commonjs/select/lib/SelectMenu.d.ts +2 -2
  51. package/dist/commonjs/select/lib/SelectMenu.d.ts.map +1 -1
  52. package/dist/commonjs/select/lib/SelectMenu.js +2 -2
  53. package/dist/commonjs/select/lib/SelectOption.d.ts +1 -2
  54. package/dist/commonjs/select/lib/SelectOption.d.ts.map +1 -1
  55. package/dist/commonjs/select/lib/SelectOption.js +2 -1
  56. package/dist/commonjs/side-panel/index.d.ts +0 -3
  57. package/dist/commonjs/side-panel/index.d.ts.map +1 -1
  58. package/dist/commonjs/side-panel/index.js +0 -7
  59. package/dist/commonjs/side-panel/lib/SidePanel.d.ts +1 -2
  60. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  61. package/dist/commonjs/side-panel/lib/SidePanel.js +3 -3
  62. package/dist/es6/breadcrumbs/index.d.ts +0 -3
  63. package/dist/es6/breadcrumbs/index.d.ts.map +1 -1
  64. package/dist/es6/breadcrumbs/index.js +0 -3
  65. package/dist/es6/color-picker/index.d.ts +1 -1
  66. package/dist/es6/color-picker/index.d.ts.map +1 -1
  67. package/dist/es6/color-picker/index.js +1 -1
  68. package/dist/es6/color-picker/lib/ColorPicker.d.ts +1 -2
  69. package/dist/es6/color-picker/lib/ColorPicker.d.ts.map +1 -1
  70. package/dist/es6/color-picker/lib/ColorPicker.js +2 -3
  71. package/dist/es6/menu/index.d.ts +1 -4
  72. package/dist/es6/menu/index.d.ts.map +1 -1
  73. package/dist/es6/menu/index.js +1 -4
  74. package/dist/es6/menu/lib/Menu.d.ts +1 -1
  75. package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
  76. package/dist/es6/menu/lib/Menu.js +1 -1
  77. package/dist/es6/menu/lib/MenuItem.d.ts +1 -2
  78. package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
  79. package/dist/es6/menu/lib/MenuItem.js +1 -1
  80. package/dist/es6/pill/lib/Pill.d.ts +7 -0
  81. package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
  82. package/dist/es6/pill/lib/Pill.js +11 -4
  83. package/dist/es6/pill/lib/PillAvatar.d.ts +1 -0
  84. package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -1
  85. package/dist/es6/pill/lib/PillAvatar.js +1 -1
  86. package/dist/es6/pill/lib/PillIcon.d.ts +1 -0
  87. package/dist/es6/pill/lib/PillIcon.d.ts.map +1 -1
  88. package/dist/es6/pill/lib/PillIcon.js +1 -1
  89. package/dist/es6/pill/lib/PillIconButton.d.ts +6 -0
  90. package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
  91. package/dist/es6/pill/lib/PillIconButton.js +18 -25
  92. package/dist/es6/pill/lib/PillLabel.d.ts +1 -0
  93. package/dist/es6/pill/lib/PillLabel.d.ts.map +1 -1
  94. package/dist/es6/pill/lib/PillLabel.js +1 -1
  95. package/dist/es6/pill/lib/usePillModel.d.ts +13 -0
  96. package/dist/es6/pill/lib/usePillModel.d.ts.map +1 -1
  97. package/dist/es6/pill/lib/usePillModel.js +8 -2
  98. package/dist/es6/select/index.d.ts +0 -3
  99. package/dist/es6/select/index.d.ts.map +1 -1
  100. package/dist/es6/select/index.js +0 -3
  101. package/dist/es6/select/lib/Select.d.ts +0 -1
  102. package/dist/es6/select/lib/Select.d.ts.map +1 -1
  103. package/dist/es6/select/lib/Select.js +1 -2
  104. package/dist/es6/select/lib/SelectBase.d.ts +2 -2
  105. package/dist/es6/select/lib/SelectBase.d.ts.map +1 -1
  106. package/dist/es6/select/lib/SelectBase.js +3 -4
  107. package/dist/es6/select/lib/SelectMenu.d.ts +2 -2
  108. package/dist/es6/select/lib/SelectMenu.d.ts.map +1 -1
  109. package/dist/es6/select/lib/SelectMenu.js +1 -2
  110. package/dist/es6/select/lib/SelectOption.d.ts +1 -2
  111. package/dist/es6/select/lib/SelectOption.d.ts.map +1 -1
  112. package/dist/es6/select/lib/SelectOption.js +1 -2
  113. package/dist/es6/side-panel/index.d.ts +0 -3
  114. package/dist/es6/side-panel/index.d.ts.map +1 -1
  115. package/dist/es6/side-panel/index.js +0 -3
  116. package/dist/es6/side-panel/lib/SidePanel.d.ts +1 -2
  117. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  118. package/dist/es6/side-panel/lib/SidePanel.js +1 -2
  119. package/menu/index.ts +1 -6
  120. package/menu/lib/Menu.tsx +1 -1
  121. package/menu/lib/MenuItem.tsx +1 -3
  122. package/package.json +7 -6
  123. package/pill/lib/Pill.tsx +10 -2
  124. package/pill/lib/PillAvatar.tsx +1 -0
  125. package/pill/lib/PillIcon.tsx +2 -0
  126. package/pill/lib/PillIconButton.tsx +36 -32
  127. package/pill/lib/PillLabel.tsx +1 -0
  128. package/pill/lib/usePillModel.tsx +8 -1
  129. package/select/README.md +7 -7
  130. package/select/index.ts +0 -3
  131. package/select/lib/Select.tsx +1 -3
  132. package/select/lib/SelectBase.tsx +3 -5
  133. package/select/lib/SelectMenu.tsx +1 -3
  134. package/select/lib/SelectOption.tsx +1 -3
  135. package/side-panel/index.ts +0 -4
  136. package/side-panel/lib/SidePanel.tsx +1 -2
@@ -1,5 +1 @@
1
- import {Breadcrumbs} from './lib/Breadcrumbs';
2
-
3
- export default Breadcrumbs;
4
- export {Breadcrumbs};
5
1
  export * from './lib/Breadcrumbs';
@@ -20,7 +20,7 @@ preview-react add @workday/canvas-kit-preview-react
20
20
 
21
21
  ```tsx
22
22
  import * as React from 'react';
23
- import ColorPicker from '@workday/canvas-kit-preview-react/color-picker';
23
+ import {ColorPicker} from '@workday/canvas-kit-preview-react/color-picker';
24
24
  import {colors} from '@workday/canvas-kit-react/tokens';
25
25
  import {SecondaryButton} from '@workday/canvas-kit-react/button';
26
26
  import {Popper, Popup} from '@workday/canvas-kit-react/popup';
@@ -1 +1 @@
1
- export {default, default as ColorPicker, ColorPickerProps} from './lib/ColorPicker';
1
+ export {ColorPicker, ColorPickerProps} from './lib/ColorPicker';
@@ -3,7 +3,7 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
3
3
  import {ColorInput} from '@workday/canvas-kit-react/color-picker';
4
4
  import {SecondaryButton} from '@workday/canvas-kit-react/button';
5
5
  import * as React from 'react';
6
- import FormField from '@workday/canvas-kit-react/form-field';
6
+ import {FormField} from '@workday/canvas-kit-react/form-field';
7
7
  import styled from '@emotion/styled';
8
8
 
9
9
  import {ResetButton} from './parts/ColorReset';
@@ -158,7 +158,7 @@ const isCustomColor = (colors: string[], hexCode?: string) => {
158
158
  return !colors.includes(lowercaseHex);
159
159
  };
160
160
 
161
- const ColorPicker = ({
161
+ export const ColorPicker = ({
162
162
  colorSet = defaultColorSet,
163
163
  customHexInputLabel = 'Custom Hex Color',
164
164
  submitLabel = 'Submit',
@@ -215,4 +215,3 @@ const ColorPicker = ({
215
215
  };
216
216
 
217
217
  ColorPicker.defaultColorSet = defaultColorSet;
218
- export default ColorPicker;
@@ -1,5 +1,2 @@
1
- import { Breadcrumbs } from './lib/Breadcrumbs';
2
- export default Breadcrumbs;
3
- export { Breadcrumbs };
4
1
  export * from './lib/Breadcrumbs';
5
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAC,WAAW,EAAC,CAAC;AACrB,cAAc,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
@@ -10,8 +10,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
10
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
11
  };
12
12
  Object.defineProperty(exports, "__esModule", { value: true });
13
- exports.Breadcrumbs = void 0;
14
- var Breadcrumbs_1 = require("./lib/Breadcrumbs");
15
- Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumbs; } });
16
- exports.default = Breadcrumbs_1.Breadcrumbs;
17
13
  __exportStar(require("./lib/Breadcrumbs"), exports);
@@ -1,2 +1,2 @@
1
- export { default, default as ColorPicker, ColorPickerProps } from './lib/ColorPicker';
1
+ export { ColorPicker, ColorPickerProps } from './lib/ColorPicker';
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}
@@ -1,9 +1,5 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ColorPicker = exports.default = void 0;
3
+ exports.ColorPicker = void 0;
7
4
  var ColorPicker_1 = require("./lib/ColorPicker");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
9
- Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
5
+ Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
@@ -47,9 +47,8 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
47
47
  */
48
48
  resetLabel?: string;
49
49
  }
50
- declare const ColorPicker: {
50
+ export declare const ColorPicker: {
51
51
  ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): JSX.Element;
52
52
  defaultColorSet: string[];
53
53
  };
54
- export default ColorPicker;
55
54
  //# sourceMappingURL=ColorPicker.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,QAAA,MAAM,WAAW;kKAYd,gBAAgB;;CA0ClB,CAAC;AAGF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CA0ClB,CAAC"}
@@ -44,12 +44,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
44
44
  return (mod && mod.__esModule) ? mod : { "default": mod };
45
45
  };
46
46
  Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.ColorPicker = void 0;
47
48
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
48
49
  var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
49
50
  var color_picker_1 = require("@workday/canvas-kit-react/color-picker");
50
51
  var button_1 = require("@workday/canvas-kit-react/button");
51
52
  var React = __importStar(require("react"));
52
- var form_field_1 = __importDefault(require("@workday/canvas-kit-react/form-field"));
53
+ var form_field_1 = require("@workday/canvas-kit-react/form-field");
53
54
  var styled_1 = __importDefault(require("@emotion/styled"));
54
55
  var ColorReset_1 = require("./parts/ColorReset");
55
56
  var SwatchBook_1 = require("./parts/SwatchBook");
@@ -121,7 +122,7 @@ var ColorInputWrapper = styled_1.default('form')({
121
122
  flexDirection: 'row',
122
123
  justifyContent: 'space-between',
123
124
  });
124
- var ColorInputAndLabel = styled_1.default(form_field_1.default)({
125
+ var ColorInputAndLabel = styled_1.default(form_field_1.FormField)({
125
126
  display: 'flex',
126
127
  flexDirection: 'column',
127
128
  margin: 0,
@@ -163,5 +164,5 @@ var ColorPicker = function (_a) {
163
164
  React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
164
165
  React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon })))));
165
166
  };
166
- ColorPicker.defaultColorSet = defaultColorSet;
167
- exports.default = ColorPicker;
167
+ exports.ColorPicker = ColorPicker;
168
+ exports.ColorPicker.defaultColorSet = defaultColorSet;
@@ -1,6 +1,3 @@
1
- import Menu, { MenuProps } from './lib/Menu';
2
- import MenuItem from './lib/MenuItem';
3
- export { Menu, MenuItem, MenuProps };
4
- export default Menu;
1
+ export * from './lib/Menu';
5
2
  export * from './lib/MenuItem';
6
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAC,SAAS,EAAC,MAAM,YAAY,CAAC;AAC3C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}
@@ -9,14 +9,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
9
9
  var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
10
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
11
  };
12
- var __importDefault = (this && this.__importDefault) || function (mod) {
13
- return (mod && mod.__esModule) ? mod : { "default": mod };
14
- };
15
12
  Object.defineProperty(exports, "__esModule", { value: true });
16
- exports.MenuItem = exports.Menu = void 0;
17
- var Menu_1 = __importDefault(require("./lib/Menu"));
18
- exports.Menu = Menu_1.default;
19
- var MenuItem_1 = __importDefault(require("./lib/MenuItem"));
20
- exports.MenuItem = MenuItem_1.default;
21
- exports.default = Menu_1.default;
13
+ __exportStar(require("./lib/Menu"), exports);
22
14
  __exportStar(require("./lib/MenuItem"), exports);
@@ -39,7 +39,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
39
39
  export interface MenuState {
40
40
  selectedItemIndex: number;
41
41
  }
42
- export default class Menu extends React.Component<MenuProps, MenuState> {
42
+ export declare class Menu extends React.Component<MenuProps, MenuState> {
43
43
  private id;
44
44
  private animateId;
45
45
  private menuRef;
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
1
+ {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
@@ -57,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
57
57
  return (mod && mod.__esModule) ? mod : { "default": mod };
58
58
  };
59
59
  Object.defineProperty(exports, "__esModule", { value: true });
60
+ exports.Menu = void 0;
60
61
  var React = __importStar(require("react"));
61
62
  var styled_1 = __importDefault(require("@emotion/styled"));
62
63
  var card_1 = require("@workday/canvas-kit-react/card");
@@ -284,4 +285,4 @@ var Menu = /** @class */ (function (_super) {
284
285
  };
285
286
  return Menu;
286
287
  }(React.Component));
287
- exports.default = Menu;
288
+ exports.Menu = Menu;
@@ -43,11 +43,10 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
43
43
  */
44
44
  shouldClose?: boolean;
45
45
  }
46
- declare class MenuItem extends React.Component<MenuItemProps> {
46
+ export declare class MenuItem extends React.Component<MenuItemProps> {
47
47
  ref: React.RefObject<HTMLLIElement>;
48
48
  componentDidUpdate: (prevProps: MenuItemProps) => void;
49
49
  render(): React.ReactNode;
50
50
  private handleClick;
51
51
  }
52
- export default MenuItem;
53
52
  //# sourceMappingURL=MenuItem.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;IAyCzB,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;IAyCzB,OAAO,CAAC,WAAW,CAOjB;CACH"}
@@ -57,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
57
57
  return (mod && mod.__esModule) ? mod : { "default": mod };
58
58
  };
59
59
  Object.defineProperty(exports, "__esModule", { value: true });
60
+ exports.MenuItem = void 0;
60
61
  var React = __importStar(require("react"));
61
62
  var styled_1 = __importDefault(require("@emotion/styled"));
62
63
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -227,6 +228,7 @@ var MenuItem = /** @class */ (function (_super) {
227
228
  };
228
229
  return MenuItem;
229
230
  }(React.Component));
231
+ exports.MenuItem = MenuItem;
230
232
  /**
231
233
  * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
232
234
  * We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
@@ -238,4 +240,3 @@ MenuItem.defaultProps = {
238
240
  shouldClose: true,
239
241
  role: 'menuitem',
240
242
  };
241
- exports.default = MenuItem;
@@ -10,8 +10,10 @@ export interface PillProps extends BoxProps {
10
10
  export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
11
11
  maxWidth: string | number;
12
12
  disabled: boolean;
13
+ id: string;
13
14
  }> & {} & {}, {
14
15
  state: {
16
+ id: string;
15
17
  maxWidth: string | number;
16
18
  disabled: boolean;
17
19
  };
@@ -19,6 +21,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
19
21
  }> & {
20
22
  Context: React.Context<{
21
23
  state: {
24
+ id: string;
22
25
  maxWidth: string | number;
23
26
  disabled: boolean;
24
27
  };
@@ -27,6 +30,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
27
30
  } & {
28
31
  Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
29
32
  state: {
33
+ id: string;
30
34
  maxWidth: string | number;
31
35
  disabled: boolean;
32
36
  };
@@ -34,6 +38,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
34
38
  }>;
35
39
  Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
36
40
  state: {
41
+ id: string;
37
42
  maxWidth: string | number;
38
43
  disabled: boolean;
39
44
  };
@@ -42,6 +47,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
42
47
  Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
43
48
  Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
44
49
  state: {
50
+ id: string;
45
51
  maxWidth: string | number;
46
52
  disabled: boolean;
47
53
  };
@@ -49,6 +55,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
49
55
  }>;
50
56
  IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
51
57
  state: {
58
+ id: string;
52
59
  maxWidth: string | number;
53
60
  disabled: boolean;
54
61
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAgID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Df,CAAC"}
1
+ {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}
@@ -111,7 +111,6 @@ var getRemovablePillColors = function (disabled) {
111
111
  };
112
112
  var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: tokens_1.borderRadius.m, flexShrink: 0 }, tokens_1.type.levels.subtext.large), { color: tokens_1.colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: tokens_1.type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + tokens_1.space.xxs, height: tokens_1.space.m, position: 'relative' });
113
113
  var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
114
- borderColor: tokens_1.colors.blueberry400,
115
114
  'span[data-count="ck-pill-count"]': {
116
115
  borderTop: "1px solid " + tokens_1.colors.blueberry400,
117
116
  borderBottom: "1px solid " + tokens_1.colors.blueberry400,
@@ -128,10 +127,18 @@ var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(
128
127
  border: 'none',
129
128
  },
130
129
  },
131
- })), layout_1.boxStyleFn);
130
+ })), function (_a) {
131
+ var variant = _a.variant;
132
+ return ({
133
+ '&:focus': {
134
+ borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
135
+ },
136
+ });
137
+ }, layout_1.boxStyleFn);
132
138
  var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
133
139
  cursor: 'default',
134
140
  overflow: 'revert',
141
+ position: 'relative',
135
142
  });
136
143
  exports.Pill = common_1.createContainer('button')({
137
144
  modelHook: usePillModel_1.usePillModel,
@@ -145,7 +152,7 @@ exports.Pill = common_1.createContainer('button')({
145
152
  })(function (_a, Element, model) {
146
153
  var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
147
154
  return (react_1.default.createElement(react_1.default.Fragment, null,
148
- variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200 }, elemProps),
155
+ variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200, id: model.state.id }, elemProps),
149
156
  react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
150
157
  variant === 'default' && (react_1.default.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
151
158
  react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
@@ -154,7 +161,7 @@ exports.Pill = common_1.createContainer('button')({
154
161
  }
155
162
  return (react_1.default.createElement(layout_1.Stack.Item, { key: index, display: "inline-flex" }, child));
156
163
  })))),
157
- variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span' }, elemProps),
164
+ variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
158
165
  react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
159
166
  if (typeof child === 'string') {
160
167
  return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
@@ -3,6 +3,7 @@ export interface PillAvatarProps extends AvatarProps {
3
3
  }
4
4
  export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillAvatarProps, {
5
5
  state: {
6
+ id: string;
6
7
  maxWidth: string | number;
7
8
  disabled: boolean;
8
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
1
+ {"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}
@@ -25,5 +25,5 @@ var usePillModel_1 = require("./usePillModel");
25
25
  exports.PillAvatar = common_1.createSubcomponent('button')({
26
26
  modelHook: usePillModel_1.usePillModel,
27
27
  })(function (elemProps, Element, model) {
28
- return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18 }, elemProps, { disabled: model.state.disabled }), elemProps.children));
28
+ return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
29
29
  });
@@ -9,6 +9,7 @@ export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
9
9
  }
10
10
  export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
11
11
  state: {
12
+ id: string;
12
13
  maxWidth: string | number;
13
14
  disabled: boolean;
14
15
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;EAanB,CAAC"}
1
+ {"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;;EAenB,CAAC"}
@@ -36,5 +36,5 @@ exports.PillIcon = common_1.createSubcomponent('span')({
36
36
  modelHook: usePillModel_1.usePillModel,
37
37
  })(function (_a, Element) {
38
38
  var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
39
- return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
39
+ return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
40
40
  });
@@ -6,9 +6,15 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
6
6
  * @default `xSmallIcon`
7
7
  */
8
8
  icon?: CanvasSystemIcon;
9
+ /**
10
+ * The aria label for the removable icon
11
+ * @default 'remove'
12
+ */
13
+ 'aria-label'?: string;
9
14
  }
10
15
  export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
11
16
  state: {
17
+ id: string;
12
18
  maxWidth: string | number;
13
19
  disabled: boolean;
14
20
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAuDD,eAAO,MAAM,cAAc;;;;;;EAuB1B,CAAC"}
1
+ {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA6CD,eAAO,MAAM,cAAc;;;;;;;EAgC1B,CAAC"}
@@ -47,9 +47,7 @@ var getIconColors = function () {
47
47
  focus: {
48
48
  icon: tokens_1.colors.licorice500,
49
49
  focusRing: common_1.focusRing({
50
- width: 0,
51
50
  innerColor: 'transparent',
52
- outerColor: 'transparent',
53
51
  }),
54
52
  },
55
53
  disabled: {
@@ -58,31 +56,26 @@ var getIconColors = function () {
58
56
  },
59
57
  };
60
58
  };
61
- var StyledFocusTarget = common_1.styled('span')({
62
- height: 20,
63
- position: 'absolute',
64
- right: '5px',
65
- left: tokens_1.space.xxxs,
66
- margin: 0,
67
- borderRadius: tokens_1.borderRadius.m,
68
- '&:focus': __assign({ outline: 'none' }, common_1.focusRing({
69
- outerColor: tokens_1.colors.blueberry400,
70
- innerColor: 'transparent',
71
- separation: 0,
72
- width: 2,
73
- inset: 'inner',
74
- })),
75
- });
76
59
  var StyledIconButton = common_1.styled(button_1.BaseButton)({
77
- marginInlineEnd: '-14px !important',
78
- paddingInlineEnd: tokens_1.space.xxxs,
79
- marginInlineStart: "-" + tokens_1.space.xxs + " !important",
60
+ marginInlineEnd: '-7px',
61
+ marginInlineStart: "-2px",
62
+ overflow: 'visible',
63
+ '::after': {
64
+ content: '""',
65
+ height: tokens_1.space.l,
66
+ width: tokens_1.space.l,
67
+ position: 'absolute',
68
+ left: '-7px',
69
+ bottom: '-7px',
70
+ margin: 0,
71
+ pointerEvents: 'all',
72
+ cursor: 'pointer',
73
+ },
80
74
  });
81
75
  exports.PillIconButton = common_1.createSubcomponent('button')({
82
76
  modelHook: usePillModel_1.usePillModel,
83
77
  })(function (_a, Element, model) {
84
- var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
85
- return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: tokens_1.space.l, width: tokens_1.space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
86
- react_1.default.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
87
- react_1.default.createElement(icon_1.SystemIcon, { icon: icon, size: 24 })));
78
+ var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'remove' : _c, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children", 'aria-label']);
79
+ return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": "removable-" + model.state.id + " label-" + model.state.id, as: Element, position: "relative" }, elemProps),
80
+ react_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
88
81
  });
@@ -5,6 +5,7 @@ export interface PillLabelProps extends BoxProps {
5
5
  }
6
6
  export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
7
7
  state: {
8
+ id: string;
8
9
  maxWidth: string | number;
9
10
  disabled: boolean;
10
11
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;EAepB,CAAC"}
1
+ {"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;;EAgBpB,CAAC"}
@@ -43,5 +43,5 @@ exports.PillLabel = common_1.createSubcomponent('span')({
43
43
  })(function (_a, Element, model) {
44
44
  var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
45
45
  return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
46
- react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element }, elemProps), elemProps.children)));
46
+ react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
47
47
  });
@@ -8,8 +8,14 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
8
8
  * Use to disable a pill.
9
9
  */
10
10
  disabled: boolean;
11
+ /**
12
+ * ID used to add accessibility labels to pill elements.
13
+ * @default `useUniqueId()`
14
+ */
15
+ id: string;
11
16
  }> & {} & {}) | undefined) => {
12
17
  state: {
18
+ id: string;
13
19
  /**
14
20
  * Determines the max width of the pill. If the pill text is longer than the max width,
15
21
  * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -31,7 +37,13 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
31
37
  * Use to disable a pill.
32
38
  */
33
39
  disabled: boolean;
40
+ /**
41
+ * ID used to add accessibility labels to pill elements.
42
+ * @default `useUniqueId()`
43
+ */
44
+ id: string;
34
45
  }, {}, {
46
+ id: string;
35
47
  /**
36
48
  * Determines the max width of the pill. If the pill text is longer than the max width,
37
49
  * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -43,6 +55,7 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
43
55
  disabled: boolean;
44
56
  }, {}, {
45
57
  state: {
58
+ id: string;
46
59
  /**
47
60
  * Determines the max width of the pill. If the pill text is longer than the max width,
48
61
  * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -1 +1 @@
1
- {"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;;IAPH;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EASL,CAAC"}
1
+ {"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;QAZH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;IAZH;;;OAGG;;IAEH;;OAEG;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EAgBL,CAAC"}
@@ -24,8 +24,14 @@ exports.usePillModel = common_1.createModelHook({
24
24
  * Use to disable a pill.
25
25
  */
26
26
  disabled: false,
27
+ /**
28
+ * ID used to add accessibility labels to pill elements.
29
+ * @default `useUniqueId()`
30
+ */
31
+ id: '',
27
32
  },
28
33
  })(function (config) {
29
- var state = __assign({}, config);
34
+ var id = common_1.useUniqueId(config.id);
35
+ var state = __assign(__assign({}, config), { id: id });
30
36
  return { state: state, events: {} };
31
37
  });
@@ -1,6 +1,3 @@
1
- import Select from './lib/Select';
2
- export default Select;
3
- export { Select };
4
1
  export * from './lib/Select';
5
2
  export { Option, RenderableOption, RenderOptionFunction, RenderSelectedFunction, } from './lib/SelectBase';
6
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}
@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
9
9
  var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
10
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
11
  };
12
- var __importDefault = (this && this.__importDefault) || function (mod) {
13
- return (mod && mod.__esModule) ? mod : { "default": mod };
14
- };
15
12
  Object.defineProperty(exports, "__esModule", { value: true });
16
- exports.Select = void 0;
17
- var Select_1 = __importDefault(require("./lib/Select"));
18
- exports.Select = Select_1.default;
19
- exports.default = Select_1.default;
20
13
  __exportStar(require("./lib/Select"), exports);
@@ -21,5 +21,4 @@ export interface SelectProps extends CoreSelectBaseProps {
21
21
  export declare const Select: import("@workday/canvas-kit-react/common").ElementComponent<"button", SelectProps> & {
22
22
  ErrorType: typeof ErrorType;
23
23
  };
24
- export default Select;
25
24
  //# sourceMappingURL=Select.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAoiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAa,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAoiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC"}