@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.
- package/breadcrumbs/index.ts +0 -4
- package/color-picker/README.md +1 -1
- package/color-picker/index.ts +1 -1
- package/color-picker/lib/ColorPicker.tsx +2 -3
- package/dist/commonjs/breadcrumbs/index.d.ts +0 -3
- package/dist/commonjs/breadcrumbs/index.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/index.js +0 -4
- package/dist/commonjs/color-picker/index.d.ts +1 -1
- package/dist/commonjs/color-picker/index.d.ts.map +1 -1
- package/dist/commonjs/color-picker/index.js +2 -6
- package/dist/commonjs/color-picker/lib/ColorPicker.d.ts +1 -2
- package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map +1 -1
- package/dist/commonjs/color-picker/lib/ColorPicker.js +5 -4
- package/dist/commonjs/menu/index.d.ts +1 -4
- package/dist/commonjs/menu/index.d.ts.map +1 -1
- package/dist/commonjs/menu/index.js +1 -9
- package/dist/commonjs/menu/lib/Menu.d.ts +1 -1
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +2 -1
- package/dist/commonjs/menu/lib/MenuItem.d.ts +1 -2
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +2 -1
- package/dist/commonjs/pill/lib/Pill.d.ts +7 -0
- package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/Pill.js +11 -4
- package/dist/commonjs/pill/lib/PillAvatar.d.ts +1 -0
- package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
- package/dist/commonjs/pill/lib/PillIcon.d.ts +1 -0
- package/dist/commonjs/pill/lib/PillIcon.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillIcon.js +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.d.ts +6 -0
- package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +17 -24
- package/dist/commonjs/pill/lib/PillLabel.d.ts +1 -0
- package/dist/commonjs/pill/lib/PillLabel.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillLabel.js +1 -1
- package/dist/commonjs/pill/lib/usePillModel.d.ts +13 -0
- package/dist/commonjs/pill/lib/usePillModel.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/usePillModel.js +7 -1
- package/dist/commonjs/select/index.d.ts +0 -3
- package/dist/commonjs/select/index.d.ts.map +1 -1
- package/dist/commonjs/select/index.js +0 -7
- package/dist/commonjs/select/lib/Select.d.ts +0 -1
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +2 -6
- package/dist/commonjs/select/lib/SelectBase.d.ts +2 -2
- package/dist/commonjs/select/lib/SelectBase.d.ts.map +1 -1
- package/dist/commonjs/select/lib/SelectBase.js +6 -9
- package/dist/commonjs/select/lib/SelectMenu.d.ts +2 -2
- package/dist/commonjs/select/lib/SelectMenu.d.ts.map +1 -1
- package/dist/commonjs/select/lib/SelectMenu.js +2 -2
- package/dist/commonjs/select/lib/SelectOption.d.ts +1 -2
- package/dist/commonjs/select/lib/SelectOption.d.ts.map +1 -1
- package/dist/commonjs/select/lib/SelectOption.js +2 -1
- package/dist/commonjs/side-panel/index.d.ts +0 -3
- package/dist/commonjs/side-panel/index.d.ts.map +1 -1
- package/dist/commonjs/side-panel/index.js +0 -7
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +1 -2
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +3 -3
- package/dist/es6/breadcrumbs/index.d.ts +0 -3
- package/dist/es6/breadcrumbs/index.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/index.js +0 -3
- package/dist/es6/color-picker/index.d.ts +1 -1
- package/dist/es6/color-picker/index.d.ts.map +1 -1
- package/dist/es6/color-picker/index.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.d.ts +1 -2
- package/dist/es6/color-picker/lib/ColorPicker.d.ts.map +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +2 -3
- package/dist/es6/menu/index.d.ts +1 -4
- package/dist/es6/menu/index.d.ts.map +1 -1
- package/dist/es6/menu/index.js +1 -4
- package/dist/es6/menu/lib/Menu.d.ts +1 -1
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +1 -1
- package/dist/es6/menu/lib/MenuItem.d.ts +1 -2
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/pill/lib/Pill.d.ts +7 -0
- package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
- package/dist/es6/pill/lib/Pill.js +11 -4
- package/dist/es6/pill/lib/PillAvatar.d.ts +1 -0
- package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillAvatar.js +1 -1
- package/dist/es6/pill/lib/PillIcon.d.ts +1 -0
- package/dist/es6/pill/lib/PillIcon.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillIcon.js +1 -1
- package/dist/es6/pill/lib/PillIconButton.d.ts +6 -0
- package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +18 -25
- package/dist/es6/pill/lib/PillLabel.d.ts +1 -0
- package/dist/es6/pill/lib/PillLabel.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillLabel.js +1 -1
- package/dist/es6/pill/lib/usePillModel.d.ts +13 -0
- package/dist/es6/pill/lib/usePillModel.d.ts.map +1 -1
- package/dist/es6/pill/lib/usePillModel.js +8 -2
- package/dist/es6/select/index.d.ts +0 -3
- package/dist/es6/select/index.d.ts.map +1 -1
- package/dist/es6/select/index.js +0 -3
- package/dist/es6/select/lib/Select.d.ts +0 -1
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +1 -2
- package/dist/es6/select/lib/SelectBase.d.ts +2 -2
- package/dist/es6/select/lib/SelectBase.d.ts.map +1 -1
- package/dist/es6/select/lib/SelectBase.js +3 -4
- package/dist/es6/select/lib/SelectMenu.d.ts +2 -2
- package/dist/es6/select/lib/SelectMenu.d.ts.map +1 -1
- package/dist/es6/select/lib/SelectMenu.js +1 -2
- package/dist/es6/select/lib/SelectOption.d.ts +1 -2
- package/dist/es6/select/lib/SelectOption.d.ts.map +1 -1
- package/dist/es6/select/lib/SelectOption.js +1 -2
- package/dist/es6/side-panel/index.d.ts +0 -3
- package/dist/es6/side-panel/index.d.ts.map +1 -1
- package/dist/es6/side-panel/index.js +0 -3
- package/dist/es6/side-panel/lib/SidePanel.d.ts +1 -2
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +1 -2
- package/menu/index.ts +1 -6
- package/menu/lib/Menu.tsx +1 -1
- package/menu/lib/MenuItem.tsx +1 -3
- package/package.json +7 -6
- package/pill/lib/Pill.tsx +10 -2
- package/pill/lib/PillAvatar.tsx +1 -0
- package/pill/lib/PillIcon.tsx +2 -0
- package/pill/lib/PillIconButton.tsx +36 -32
- package/pill/lib/PillLabel.tsx +1 -0
- package/pill/lib/usePillModel.tsx +8 -1
- package/select/README.md +7 -7
- package/select/index.ts +0 -3
- package/select/lib/Select.tsx +1 -3
- package/select/lib/SelectBase.tsx +3 -5
- package/select/lib/SelectMenu.tsx +1 -3
- package/select/lib/SelectOption.tsx +1 -3
- package/side-panel/index.ts +0 -4
- package/side-panel/lib/SidePanel.tsx +1 -2
package/breadcrumbs/index.ts
CHANGED
package/color-picker/README.md
CHANGED
|
@@ -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';
|
package/color-picker/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,
|
|
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 {
|
|
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,
|
|
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 =
|
|
3
|
+
exports.ColorPicker = void 0;
|
|
7
4
|
var ColorPicker_1 = require("./lib/ColorPicker");
|
|
8
|
-
Object.defineProperty(exports, "
|
|
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,
|
|
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 =
|
|
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.
|
|
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
|
|
167
|
-
exports.
|
|
167
|
+
exports.ColorPicker = ColorPicker;
|
|
168
|
+
exports.ColorPicker.defaultColorSet = defaultColorSet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,
|
|
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
|
-
|
|
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
|
|
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,
|
|
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.
|
|
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,
|
|
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;
|
|
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
|
-
})),
|
|
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);
|
|
@@ -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
|
|
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
|
|
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;
|
|
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: '-
|
|
78
|
-
|
|
79
|
-
|
|
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:
|
|
86
|
-
react_1.default.createElement(
|
|
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
|
});
|
|
@@ -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
|
|
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
|
|
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
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"
|
|
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,
|
|
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"}
|