@workday/canvas-kit-preview-react 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0077-next.0
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/dist/commonjs/index.d.ts +1 -2
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -2
- package/dist/es6/index.d.ts +1 -2
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -2
- package/index.ts +1 -2
- package/package.json +4 -4
- package/avatar/index.ts +0 -5
- package/avatar/lib/Avatar.tsx +0 -156
- package/avatar/lib/AvatarImage.tsx +0 -20
- package/avatar/lib/AvatarName.tsx +0 -32
- package/avatar/lib/BaseAvatar.tsx +0 -127
- package/avatar/lib/getInitialsFromName.ts +0 -11
- package/avatar/package.json +0 -6
- package/dist/commonjs/avatar/index.d.ts +0 -6
- package/dist/commonjs/avatar/index.d.ts.map +0 -1
- package/dist/commonjs/avatar/index.js +0 -21
- package/dist/commonjs/avatar/lib/Avatar.d.ts +0 -281
- package/dist/commonjs/avatar/lib/Avatar.d.ts.map +0 -1
- package/dist/commonjs/avatar/lib/Avatar.js +0 -53
- package/dist/commonjs/avatar/lib/AvatarImage.d.ts +0 -6
- package/dist/commonjs/avatar/lib/AvatarImage.d.ts.map +0 -1
- package/dist/commonjs/avatar/lib/AvatarImage.js +0 -15
- package/dist/commonjs/avatar/lib/AvatarName.d.ts +0 -14
- package/dist/commonjs/avatar/lib/AvatarName.d.ts.map +0 -1
- package/dist/commonjs/avatar/lib/AvatarName.js +0 -16
- package/dist/commonjs/avatar/lib/BaseAvatar.d.ts +0 -148
- package/dist/commonjs/avatar/lib/BaseAvatar.d.ts.map +0 -1
- package/dist/commonjs/avatar/lib/BaseAvatar.js +0 -47
- package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts +0 -2
- package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts.map +0 -1
- package/dist/commonjs/avatar/lib/getInitialsFromName.js +0 -13
- package/dist/commonjs/select/index.d.ts +0 -3
- package/dist/commonjs/select/index.d.ts.map +0 -1
- package/dist/commonjs/select/index.js +0 -17
- package/dist/commonjs/select/lib/Select.d.ts +0 -31
- package/dist/commonjs/select/lib/Select.d.ts.map +0 -1
- package/dist/commonjs/select/lib/Select.js +0 -486
- package/dist/commonjs/select/lib/SelectBase.d.ts +0 -165
- package/dist/commonjs/select/lib/SelectBase.d.ts.map +0 -1
- package/dist/commonjs/select/lib/SelectBase.js +0 -235
- package/dist/commonjs/select/lib/SelectMenu.d.ts +0 -45
- package/dist/commonjs/select/lib/SelectMenu.d.ts.map +0 -1
- package/dist/commonjs/select/lib/SelectMenu.js +0 -195
- package/dist/commonjs/select/lib/SelectOption.d.ts +0 -38
- package/dist/commonjs/select/lib/SelectOption.d.ts.map +0 -1
- package/dist/commonjs/select/lib/SelectOption.js +0 -73
- package/dist/commonjs/select/lib/scrolling.d.ts +0 -5
- package/dist/commonjs/select/lib/scrolling.d.ts.map +0 -1
- package/dist/commonjs/select/lib/scrolling.js +0 -36
- package/dist/commonjs/select/lib/types.d.ts +0 -37
- package/dist/commonjs/select/lib/types.d.ts.map +0 -1
- package/dist/commonjs/select/lib/types.js +0 -2
- package/dist/commonjs/select/lib/utils.d.ts +0 -10
- package/dist/commonjs/select/lib/utils.d.ts.map +0 -1
- package/dist/commonjs/select/lib/utils.js +0 -27
- package/dist/es6/avatar/index.d.ts +0 -6
- package/dist/es6/avatar/index.d.ts.map +0 -1
- package/dist/es6/avatar/index.js +0 -5
- package/dist/es6/avatar/lib/Avatar.d.ts +0 -281
- package/dist/es6/avatar/lib/Avatar.d.ts.map +0 -1
- package/dist/es6/avatar/lib/Avatar.js +0 -47
- package/dist/es6/avatar/lib/AvatarImage.d.ts +0 -6
- package/dist/es6/avatar/lib/AvatarImage.d.ts.map +0 -1
- package/dist/es6/avatar/lib/AvatarImage.js +0 -12
- package/dist/es6/avatar/lib/AvatarName.d.ts +0 -14
- package/dist/es6/avatar/lib/AvatarName.d.ts.map +0 -1
- package/dist/es6/avatar/lib/AvatarName.js +0 -13
- package/dist/es6/avatar/lib/BaseAvatar.d.ts +0 -148
- package/dist/es6/avatar/lib/BaseAvatar.d.ts.map +0 -1
- package/dist/es6/avatar/lib/BaseAvatar.js +0 -44
- package/dist/es6/avatar/lib/getInitialsFromName.d.ts +0 -2
- package/dist/es6/avatar/lib/getInitialsFromName.d.ts.map +0 -1
- package/dist/es6/avatar/lib/getInitialsFromName.js +0 -9
- package/dist/es6/select/index.d.ts +0 -3
- package/dist/es6/select/index.d.ts.map +0 -1
- package/dist/es6/select/index.js +0 -1
- package/dist/es6/select/lib/Select.d.ts +0 -31
- package/dist/es6/select/lib/Select.d.ts.map +0 -1
- package/dist/es6/select/lib/Select.js +0 -460
- package/dist/es6/select/lib/SelectBase.d.ts +0 -165
- package/dist/es6/select/lib/SelectBase.d.ts.map +0 -1
- package/dist/es6/select/lib/SelectBase.js +0 -208
- package/dist/es6/select/lib/SelectMenu.d.ts +0 -45
- package/dist/es6/select/lib/SelectMenu.d.ts.map +0 -1
- package/dist/es6/select/lib/SelectMenu.js +0 -191
- package/dist/es6/select/lib/SelectOption.d.ts +0 -38
- package/dist/es6/select/lib/SelectOption.d.ts.map +0 -1
- package/dist/es6/select/lib/SelectOption.js +0 -69
- package/dist/es6/select/lib/scrolling.d.ts +0 -5
- package/dist/es6/select/lib/scrolling.d.ts.map +0 -1
- package/dist/es6/select/lib/scrolling.js +0 -32
- package/dist/es6/select/lib/types.d.ts +0 -37
- package/dist/es6/select/lib/types.d.ts.map +0 -1
- package/dist/es6/select/lib/types.js +0 -1
- package/dist/es6/select/lib/utils.d.ts +0 -10
- package/dist/es6/select/lib/utils.d.ts.map +0 -1
- package/dist/es6/select/lib/utils.js +0 -22
- package/select/index.ts +0 -8
- package/select/lib/Select.tsx +0 -595
- package/select/lib/SelectBase.tsx +0 -493
- package/select/lib/SelectMenu.tsx +0 -304
- package/select/lib/SelectOption.tsx +0 -133
- package/select/lib/scrolling.ts +0 -42
- package/select/lib/types.ts +0 -37
- package/select/lib/utils.ts +0 -30
- package/select/package.json +0 -6
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated ⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
5
|
-
*/
|
|
6
|
-
export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTMLLIElement> {
|
|
7
|
-
/**
|
|
8
|
-
* The type of error associated with the SelectOption (if applicable).
|
|
9
|
-
*/
|
|
10
|
-
error?: ErrorType;
|
|
11
|
-
/**
|
|
12
|
-
* If true, set the SelectOption to the focused state.
|
|
13
|
-
* @default false
|
|
14
|
-
*/
|
|
15
|
-
focused?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* The HTML `id` of the SelectOption.
|
|
18
|
-
*/
|
|
19
|
-
id?: string;
|
|
20
|
-
/**
|
|
21
|
-
* If true, set the SelectOption to the interactive state. Non-interactive SelectOptions should not give any visual cues that they are interactive (e.g., remove hover styling).
|
|
22
|
-
* @default true
|
|
23
|
-
*/
|
|
24
|
-
interactive?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* The ref to the list item that the styled component renders. Use this to imperatively manipulate the SelectOption (e.g., to scroll to it if it's out of view in the Select menu).
|
|
27
|
-
*/
|
|
28
|
-
optionRef?: React.Ref<HTMLLIElement>;
|
|
29
|
-
/**
|
|
30
|
-
* The value of the SelectOption.
|
|
31
|
-
*/
|
|
32
|
-
value?: string;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
36
|
-
*/
|
|
37
|
-
export declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
38
|
-
//# sourceMappingURL=SelectOption.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;GAEG;AACH,eAAO,MAAM,YAAY,uEAOtB,iBAAiB,4CAanB,CAAC"}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SelectOption = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
7
|
-
const optionPadding = 6;
|
|
8
|
-
const activeStyles = (theme) => {
|
|
9
|
-
const activeBgColor = theme.canvas.palette.primary.main;
|
|
10
|
-
return {
|
|
11
|
-
backgroundColor: activeBgColor,
|
|
12
|
-
color: (0, common_1.pickForegroundColor)(activeBgColor),
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
const Option = (0, common_1.styled)('li')({
|
|
16
|
-
...tokens_1.type.levels.subtext.large,
|
|
17
|
-
cursor: 'default',
|
|
18
|
-
// Apply listStyle at the list item style to ensure it's styled properly
|
|
19
|
-
// in Visual Testing States
|
|
20
|
-
listStyle: 'none',
|
|
21
|
-
// In case the content of the option is empty/undefined for some reason
|
|
22
|
-
minHeight: tokens_1.type.levels.subtext.large.lineHeight,
|
|
23
|
-
textAlign: 'left',
|
|
24
|
-
}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
|
|
25
|
-
if (disabled) {
|
|
26
|
-
// If the option is disabled, return disabled styles...
|
|
27
|
-
return {
|
|
28
|
-
color: tokens_1.colors.licorice100,
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
else if (focused) {
|
|
32
|
-
// ...else if the option is focused, return focused styles...
|
|
33
|
-
return {
|
|
34
|
-
...activeStyles(theme),
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
// ...else return hover and selected (via aria-selected) styles
|
|
39
|
-
const selectedBgColor = theme.canvas.palette.primary.lightest;
|
|
40
|
-
const selectedStyles = {
|
|
41
|
-
'&[aria-selected="true"]': {
|
|
42
|
-
backgroundColor: selectedBgColor,
|
|
43
|
-
color: (0, common_1.pickForegroundColor)(selectedBgColor),
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
// Only display interactive (hover/active) styles if the option is interactive
|
|
47
|
-
const interactiveStyles = interactive
|
|
48
|
-
? {
|
|
49
|
-
'&:hover': {
|
|
50
|
-
backgroundColor: tokens_1.commonColors.hoverBackground,
|
|
51
|
-
},
|
|
52
|
-
'&:active, &:active[aria-selected="true"]': {
|
|
53
|
-
...activeStyles(theme),
|
|
54
|
-
},
|
|
55
|
-
}
|
|
56
|
-
: {};
|
|
57
|
-
return {
|
|
58
|
-
// Place selected styles after interactive styles to have selected styles
|
|
59
|
-
// override interactive styles (subject to CSS specificity rules)
|
|
60
|
-
...interactiveStyles,
|
|
61
|
-
...selectedStyles,
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
}, ({ error }) => ({
|
|
65
|
-
padding: `${optionPadding}px ${error === common_1.ErrorType.Caution ? optionPadding - 1 : optionPadding}px`,
|
|
66
|
-
}));
|
|
67
|
-
/**
|
|
68
|
-
* @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
69
|
-
*/
|
|
70
|
-
const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
|
|
71
|
-
return ((0, jsx_runtime_1.jsx)(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps, children: children }));
|
|
72
|
-
};
|
|
73
|
-
exports.SelectOption = SelectOption;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
3
|
-
*/
|
|
4
|
-
export declare const scrollIntoViewIfNeeded: (elem: HTMLElement, centerIfNeeded?: boolean) => void;
|
|
5
|
-
//# sourceMappingURL=scrolling.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scrolling.d.ts","sourceRoot":"","sources":["../../../../select/lib/scrolling.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,eAAO,MAAM,sBAAsB,SAAU,WAAW,+BAA0B,IAqCjF,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.scrollIntoViewIfNeeded = void 0;
|
|
4
|
-
// Modified from https://gist.github.com/hsablonniere/2581101
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
7
|
-
*/
|
|
8
|
-
const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
|
|
9
|
-
const parent = elem.parentElement;
|
|
10
|
-
if (elem && parent) {
|
|
11
|
-
const parentComputedStyle = window.getComputedStyle(parent, null);
|
|
12
|
-
const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
|
|
13
|
-
// Check if elem is out of view at the top edge of the parent's viewport
|
|
14
|
-
const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
|
|
15
|
-
// Check if elem is out of view at the bottom edge of the parent's viewport
|
|
16
|
-
const overBottom = elem.offsetTop + elem.offsetHeight >
|
|
17
|
-
parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
|
|
18
|
-
if ((overTop || overBottom) && centerIfNeeded) {
|
|
19
|
-
parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);
|
|
20
|
-
}
|
|
21
|
-
if ((overTop || overBottom) && !centerIfNeeded) {
|
|
22
|
-
if (overBottom) {
|
|
23
|
-
// elem is out of view at the bottom edge of the parent's viewport;
|
|
24
|
-
// scroll down just far enough for elem to be visible
|
|
25
|
-
parent.scrollTop =
|
|
26
|
-
elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
// elem is out of view at the top edge of the parent's viewport;
|
|
30
|
-
// scroll up just far enough for elem to be visible
|
|
31
|
-
parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
exports.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The placement of the menu relative to its corresponding button. This type is a
|
|
3
|
-
* subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
|
|
4
|
-
*
|
|
5
|
-
* We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
|
|
6
|
-
* placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
|
|
7
|
-
* https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
|
|
8
|
-
* This rounding causes problems with browsers that allow subpixel values for elements
|
|
9
|
-
* like Firefox and Edge.
|
|
10
|
-
*
|
|
11
|
-
* @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
12
|
-
*/
|
|
13
|
-
export type MenuPlacement = 'bottom' | 'top';
|
|
14
|
-
/**
|
|
15
|
-
* The visibility state of the menu.
|
|
16
|
-
*
|
|
17
|
-
* `closed`: The menu is completely closed (not present in the DOM).
|
|
18
|
-
* `open`: The menu was previously `closed` and has just been instructed to open.
|
|
19
|
-
* The menu has been added to the DOM, but it's not yet visible. This state is
|
|
20
|
-
* necessary in order to apply an opacity of 0 to the menu before transitioning it
|
|
21
|
-
* to an opacity of 1.0 in the opening state.
|
|
22
|
-
* `opening`: The menu is in the process of opening.
|
|
23
|
-
* `opened`: The menu is completely open.
|
|
24
|
-
* `close`: The menu was previously `open` and has just been instructed to close.
|
|
25
|
-
* `closing`: The menu is in the process of closing.
|
|
26
|
-
*
|
|
27
|
-
* Typically, a menu will transition through states in the following order:
|
|
28
|
-
* `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
|
|
29
|
-
*
|
|
30
|
-
* However, it's possible for a user to open a menu while it's in the process of
|
|
31
|
-
* closing in which case the menu can transition from `closing` > `opening` (and
|
|
32
|
-
* vice-versa).
|
|
33
|
-
*
|
|
34
|
-
* @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
35
|
-
*/
|
|
36
|
-
export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';
|
|
37
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../select/lib/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { NormalizedOption } from './SelectBase';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
|
|
4
|
-
*/
|
|
5
|
-
export declare const getIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
8
|
-
*/
|
|
9
|
-
export declare const getCorrectedIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
|
|
10
|
-
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../select/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C;;GAEG;AACH,eAAO,MAAM,eAAe,YAAa,gBAAgB,EAAE,SAAS,MAAM,GAAG,SAAS,KAAG,MAYxF,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,wBAAwB,YAC1B,gBAAgB,EAAE,SACpB,MAAM,GAAG,SAAS,KACxB,MAIF,CAAC"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getCorrectedIndexByValue = exports.getIndexByValue = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
|
|
6
|
-
*/
|
|
7
|
-
const getIndexByValue = (options, value) => {
|
|
8
|
-
if (!options || value === undefined) {
|
|
9
|
-
return -1;
|
|
10
|
-
}
|
|
11
|
-
for (let i = 0; i < options.length; i++) {
|
|
12
|
-
if (options[i].value === value) {
|
|
13
|
-
return i;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
return -1;
|
|
17
|
-
};
|
|
18
|
-
exports.getIndexByValue = getIndexByValue;
|
|
19
|
-
// If the value doesn't exist in the options, return index 0
|
|
20
|
-
/**
|
|
21
|
-
* @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
|
|
22
|
-
*/
|
|
23
|
-
const getCorrectedIndexByValue = (options, value) => {
|
|
24
|
-
const indexByValue = (0, exports.getIndexByValue)(options, value);
|
|
25
|
-
return indexByValue === -1 ? 0 : indexByValue;
|
|
26
|
-
};
|
|
27
|
-
exports.getCorrectedIndexByValue = getCorrectedIndexByValue;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}
|
package/dist/es6/avatar/index.js
DELETED
|
@@ -1,281 +0,0 @@
|
|
|
1
|
-
import { Property } from 'csstype';
|
|
2
|
-
import { BaseAvatarProps } from './BaseAvatar';
|
|
3
|
-
import { AvatarNameProps } from './AvatarName';
|
|
4
|
-
export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
|
|
5
|
-
/**
|
|
6
|
-
* The URL of the user's photo. For best fit, use square images.
|
|
7
|
-
*/
|
|
8
|
-
url?: string;
|
|
9
|
-
/**
|
|
10
|
-
* An objectFit property that can customize how to resize your image to fit its container.
|
|
11
|
-
* @default "contain"
|
|
12
|
-
*/
|
|
13
|
-
objectFit?: Property.ObjectFit;
|
|
14
|
-
/**
|
|
15
|
-
* If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
|
|
16
|
-
*/
|
|
17
|
-
isDecorative?: boolean;
|
|
18
|
-
}
|
|
19
|
-
export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
20
|
-
imageLoaded: {
|
|
21
|
-
false: ({ avatarImagePart }: {
|
|
22
|
-
backgroundColor: `--${string}`;
|
|
23
|
-
color: `--${string}`;
|
|
24
|
-
size: `--${string}`;
|
|
25
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
26
|
-
readonly avatarImage: "avatar-image";
|
|
27
|
-
readonly avatarName: "avatar-name";
|
|
28
|
-
}>) => {
|
|
29
|
-
"[data-part=\"avatar-image\"]": {
|
|
30
|
-
display: string;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
true: {
|
|
34
|
-
backgroundColor: "--cnvs-sys-color-bg-default";
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
objectFit: {
|
|
38
|
-
contain: ({ avatarImagePart }: {
|
|
39
|
-
backgroundColor: `--${string}`;
|
|
40
|
-
color: `--${string}`;
|
|
41
|
-
size: `--${string}`;
|
|
42
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
43
|
-
readonly avatarImage: "avatar-image";
|
|
44
|
-
readonly avatarName: "avatar-name";
|
|
45
|
-
}>) => {
|
|
46
|
-
"[data-part=\"avatar-image\"]": {
|
|
47
|
-
objectFit: string;
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
cover: ({ avatarImagePart }: {
|
|
51
|
-
backgroundColor: `--${string}`;
|
|
52
|
-
color: `--${string}`;
|
|
53
|
-
size: `--${string}`;
|
|
54
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
55
|
-
readonly avatarImage: "avatar-image";
|
|
56
|
-
readonly avatarName: "avatar-name";
|
|
57
|
-
}>) => {
|
|
58
|
-
"[data-part=\"avatar-image\"]": {
|
|
59
|
-
objectFit: string;
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
fill: ({ avatarImagePart }: {
|
|
63
|
-
backgroundColor: `--${string}`;
|
|
64
|
-
color: `--${string}`;
|
|
65
|
-
size: `--${string}`;
|
|
66
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
67
|
-
readonly avatarImage: "avatar-image";
|
|
68
|
-
readonly avatarName: "avatar-name";
|
|
69
|
-
}>) => {
|
|
70
|
-
"[data-part=\"avatar-image\"]": {
|
|
71
|
-
objectFit: string;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
none: ({ avatarImagePart }: {
|
|
75
|
-
backgroundColor: `--${string}`;
|
|
76
|
-
color: `--${string}`;
|
|
77
|
-
size: `--${string}`;
|
|
78
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
79
|
-
readonly avatarImage: "avatar-image";
|
|
80
|
-
readonly avatarName: "avatar-name";
|
|
81
|
-
}>) => {
|
|
82
|
-
"[data-part=\"avatar-image\"]": {
|
|
83
|
-
objectFit: string;
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
"scale-down": ({ avatarImagePart }: {
|
|
87
|
-
backgroundColor: `--${string}`;
|
|
88
|
-
color: `--${string}`;
|
|
89
|
-
size: `--${string}`;
|
|
90
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
91
|
-
readonly avatarImage: "avatar-image";
|
|
92
|
-
readonly avatarName: "avatar-name";
|
|
93
|
-
}>) => {
|
|
94
|
-
"[data-part=\"avatar-image\"]": {
|
|
95
|
-
objectFit: string;
|
|
96
|
-
};
|
|
97
|
-
};
|
|
98
|
-
initial: ({ avatarImagePart }: {
|
|
99
|
-
backgroundColor: `--${string}`;
|
|
100
|
-
color: `--${string}`;
|
|
101
|
-
size: `--${string}`;
|
|
102
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
103
|
-
readonly avatarImage: "avatar-image";
|
|
104
|
-
readonly avatarName: "avatar-name";
|
|
105
|
-
}>) => {
|
|
106
|
-
"[data-part=\"avatar-image\"]": {
|
|
107
|
-
objectFit: string;
|
|
108
|
-
};
|
|
109
|
-
};
|
|
110
|
-
inherit: ({ avatarImagePart }: {
|
|
111
|
-
backgroundColor: `--${string}`;
|
|
112
|
-
color: `--${string}`;
|
|
113
|
-
size: `--${string}`;
|
|
114
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
115
|
-
readonly avatarImage: "avatar-image";
|
|
116
|
-
readonly avatarName: "avatar-name";
|
|
117
|
-
}>) => {
|
|
118
|
-
"[data-part=\"avatar-image\"]": {
|
|
119
|
-
objectFit: string;
|
|
120
|
-
};
|
|
121
|
-
};
|
|
122
|
-
unset: ({ avatarImagePart }: {
|
|
123
|
-
backgroundColor: `--${string}`;
|
|
124
|
-
color: `--${string}`;
|
|
125
|
-
size: `--${string}`;
|
|
126
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
127
|
-
readonly avatarImage: "avatar-image";
|
|
128
|
-
readonly avatarName: "avatar-name";
|
|
129
|
-
}>) => {
|
|
130
|
-
"[data-part=\"avatar-image\"]": {
|
|
131
|
-
objectFit: string;
|
|
132
|
-
};
|
|
133
|
-
};
|
|
134
|
-
"-moz-initial": ({ avatarImagePart }: {
|
|
135
|
-
backgroundColor: `--${string}`;
|
|
136
|
-
color: `--${string}`;
|
|
137
|
-
size: `--${string}`;
|
|
138
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
139
|
-
readonly avatarImage: "avatar-image";
|
|
140
|
-
readonly avatarName: "avatar-name";
|
|
141
|
-
}>) => {
|
|
142
|
-
"[data-part=\"avatar-image\"]": {
|
|
143
|
-
objectFit: string;
|
|
144
|
-
};
|
|
145
|
-
};
|
|
146
|
-
revert: ({ avatarImagePart }: {
|
|
147
|
-
backgroundColor: `--${string}`;
|
|
148
|
-
color: `--${string}`;
|
|
149
|
-
size: `--${string}`;
|
|
150
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
151
|
-
readonly avatarImage: "avatar-image";
|
|
152
|
-
readonly avatarName: "avatar-name";
|
|
153
|
-
}>) => {
|
|
154
|
-
"[data-part=\"avatar-image\"]": {
|
|
155
|
-
objectFit: string;
|
|
156
|
-
};
|
|
157
|
-
};
|
|
158
|
-
};
|
|
159
|
-
}, {
|
|
160
|
-
readonly avatarImage: "avatar-image";
|
|
161
|
-
readonly avatarName: "avatar-name";
|
|
162
|
-
}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
163
|
-
variant: {
|
|
164
|
-
blue: ({ backgroundColor, color }: {
|
|
165
|
-
backgroundColor: `--${string}`;
|
|
166
|
-
color: `--${string}`;
|
|
167
|
-
size: `--${string}`;
|
|
168
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
169
|
-
backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
|
|
170
|
-
color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
|
|
171
|
-
};
|
|
172
|
-
amber: ({ backgroundColor, color }: {
|
|
173
|
-
backgroundColor: `--${string}`;
|
|
174
|
-
color: `--${string}`;
|
|
175
|
-
size: `--${string}`;
|
|
176
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
177
|
-
backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
|
|
178
|
-
color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
|
|
179
|
-
};
|
|
180
|
-
teal: ({ backgroundColor, color }: {
|
|
181
|
-
backgroundColor: `--${string}`;
|
|
182
|
-
color: `--${string}`;
|
|
183
|
-
size: `--${string}`;
|
|
184
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
185
|
-
backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
|
|
186
|
-
color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
|
|
187
|
-
};
|
|
188
|
-
purple: ({ backgroundColor, color }: {
|
|
189
|
-
backgroundColor: `--${string}`;
|
|
190
|
-
color: `--${string}`;
|
|
191
|
-
size: `--${string}`;
|
|
192
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
193
|
-
backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
|
|
194
|
-
color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
|
|
195
|
-
};
|
|
196
|
-
};
|
|
197
|
-
size: {
|
|
198
|
-
extraExtraSmall: ({ size }: {
|
|
199
|
-
backgroundColor: `--${string}`;
|
|
200
|
-
color: `--${string}`;
|
|
201
|
-
size: `--${string}`;
|
|
202
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
203
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
204
|
-
fontWeight: "--cnvs-sys-font-weight-normal";
|
|
205
|
-
lineHeight: "--cnvs-sys-line-height-subtext-small";
|
|
206
|
-
fontSize: "--cnvs-sys-font-size-subtext-small";
|
|
207
|
-
letterSpacing: "--cnvs-base-letter-spacing-50";
|
|
208
|
-
};
|
|
209
|
-
extraSmall: ({ size }: {
|
|
210
|
-
backgroundColor: `--${string}`;
|
|
211
|
-
color: `--${string}`;
|
|
212
|
-
size: `--${string}`;
|
|
213
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
214
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
215
|
-
fontWeight: "--cnvs-sys-font-weight-normal";
|
|
216
|
-
lineHeight: "--cnvs-sys-line-height-subtext-medium";
|
|
217
|
-
fontSize: "--cnvs-sys-font-size-subtext-medium";
|
|
218
|
-
letterSpacing: "--cnvs-base-letter-spacing-100";
|
|
219
|
-
};
|
|
220
|
-
small: ({ size }: {
|
|
221
|
-
backgroundColor: `--${string}`;
|
|
222
|
-
color: `--${string}`;
|
|
223
|
-
size: `--${string}`;
|
|
224
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
225
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
226
|
-
fontWeight: "--cnvs-sys-font-weight-normal";
|
|
227
|
-
lineHeight: "--cnvs-sys-line-height-body-small";
|
|
228
|
-
fontSize: "--cnvs-sys-font-size-body-small";
|
|
229
|
-
letterSpacing: "--cnvs-base-letter-spacing-200";
|
|
230
|
-
};
|
|
231
|
-
medium: ({ size }: {
|
|
232
|
-
backgroundColor: `--${string}`;
|
|
233
|
-
color: `--${string}`;
|
|
234
|
-
size: `--${string}`;
|
|
235
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
236
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
237
|
-
fontWeight: "--cnvs-sys-font-weight-normal";
|
|
238
|
-
lineHeight: "--cnvs-sys-line-height-body-medium";
|
|
239
|
-
fontSize: "--cnvs-sys-font-size-body-medium";
|
|
240
|
-
};
|
|
241
|
-
large: ({ size }: {
|
|
242
|
-
backgroundColor: `--${string}`;
|
|
243
|
-
color: `--${string}`;
|
|
244
|
-
size: `--${string}`;
|
|
245
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
246
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
247
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
248
|
-
lineHeight: "--cnvs-sys-line-height-heading-medium";
|
|
249
|
-
fontSize: "--cnvs-sys-font-size-heading-medium";
|
|
250
|
-
};
|
|
251
|
-
extraLarge: ({ size }: {
|
|
252
|
-
backgroundColor: `--${string}`;
|
|
253
|
-
color: `--${string}`;
|
|
254
|
-
size: `--${string}`;
|
|
255
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
256
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
257
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
258
|
-
lineHeight: "--cnvs-sys-line-height-title-small";
|
|
259
|
-
fontSize: "--cnvs-sys-font-size-title-small";
|
|
260
|
-
};
|
|
261
|
-
extraExtraLarge: ({ size }: {
|
|
262
|
-
backgroundColor: `--${string}`;
|
|
263
|
-
color: `--${string}`;
|
|
264
|
-
size: `--${string}`;
|
|
265
|
-
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
266
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
267
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
268
|
-
lineHeight: "--cnvs-sys-line-height-title-medium";
|
|
269
|
-
fontSize: "--cnvs-sys-font-size-title-medium";
|
|
270
|
-
};
|
|
271
|
-
};
|
|
272
|
-
}, {}, {
|
|
273
|
-
backgroundColor: string;
|
|
274
|
-
color: string;
|
|
275
|
-
size: string;
|
|
276
|
-
}, never, never>, never>;
|
|
277
|
-
/**
|
|
278
|
-
* JSDoc for Avatar. Will be part of the Component API docs
|
|
279
|
-
*/
|
|
280
|
-
export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
|
|
281
|
-
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAC,eAAe,EAAgC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
-
import { BaseAvatar, baseAvatarStencil } from './BaseAvatar';
|
|
7
|
-
export const avatarStencil = createStencil({
|
|
8
|
-
extends: baseAvatarStencil,
|
|
9
|
-
parts: {
|
|
10
|
-
avatarImage: 'avatar-image',
|
|
11
|
-
avatarName: 'avatar-name',
|
|
12
|
-
},
|
|
13
|
-
base: { name: "11iq0a", styles: "box-sizing:border-box;" },
|
|
14
|
-
modifiers: {
|
|
15
|
-
imageLoaded: {
|
|
16
|
-
false: { name: "1cr95k", styles: "[data-part=\"avatar-image\"]{display:none;}" },
|
|
17
|
-
true: { name: "21awd2", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
|
|
18
|
-
},
|
|
19
|
-
objectFit: {
|
|
20
|
-
contain: { name: "43qbeo", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
|
|
21
|
-
cover: { name: "omtaa", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
|
|
22
|
-
fill: { name: "1og5lu", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
|
|
23
|
-
none: { name: "38xksi", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
|
|
24
|
-
['scale-down']: { name: "1mjstm", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
|
|
25
|
-
initial: { name: "sfrv", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
|
|
26
|
-
inherit: { name: "1c6pkc", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
|
|
27
|
-
unset: { name: "87qd7", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
|
|
28
|
-
['-moz-initial']: { name: "373nc2", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
|
|
29
|
-
['revert']: { name: "31qeat", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}, "avatar-e93ffc");
|
|
33
|
-
/**
|
|
34
|
-
* JSDoc for Avatar. Will be part of the Component API docs
|
|
35
|
-
*/
|
|
36
|
-
export const Avatar = createComponent('div')({
|
|
37
|
-
displayName: 'Avatar',
|
|
38
|
-
Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
|
|
39
|
-
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
40
|
-
const handleImageLoad = () => {
|
|
41
|
-
if (!imageLoaded) {
|
|
42
|
-
setImageLoaded(true);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
return (_jsxs(BaseAvatar, { as: Element, ref: ref, ...handleCsProp(elemProps, avatarStencil({ variant, size, imageLoaded, objectFit })), children: [url && (_jsx(_Fragment, { children: _jsx(BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && (_jsx(BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...avatarStencil.parts.avatarName }))] }));
|
|
46
|
-
},
|
|
47
|
-
});
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
-
export interface AvatarImageProps extends CSProps {
|
|
3
|
-
}
|
|
4
|
-
export declare const avatarImageStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
|
|
5
|
-
export declare const AvatarImage: import("@workday/canvas-kit-react/common").ElementComponent<"img", AvatarImageProps>;
|
|
6
|
-
//# sourceMappingURL=AvatarImage.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarImage.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAEjF,MAAM,WAAW,gBAAiB,SAAQ,OAAO;CAAG;AAEpD,eAAO,MAAM,kBAAkB,iJAM7B,CAAC;AAEH,eAAO,MAAM,WAAW,sFAKtB,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
|
|
4
|
-
export const avatarImageStencil = createStencil({
|
|
5
|
-
base: { name: "3g853f", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
|
|
6
|
-
}, "avatar-image-e8e8d8");
|
|
7
|
-
export const AvatarImage = createComponent('img')({
|
|
8
|
-
displayName: 'AvatarImage',
|
|
9
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
10
|
-
return _jsx(Element, { ref: ref, ...handleCsProp(elemProps, avatarImageStencil()) });
|
|
11
|
-
},
|
|
12
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
-
export interface AvatarNameProps extends CSProps {
|
|
3
|
-
/**
|
|
4
|
-
* The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
|
|
5
|
-
*/
|
|
6
|
-
name: string;
|
|
7
|
-
/**
|
|
8
|
-
* If you want full control over the initials, use `preferredInitials` instead.
|
|
9
|
-
*/
|
|
10
|
-
preferredInitials?: string;
|
|
11
|
-
}
|
|
12
|
-
export declare const avatarNameStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
|
|
13
|
-
export declare const AvatarName: import("@workday/canvas-kit-react/common").ElementComponent<"span", AvatarNameProps>;
|
|
14
|
-
//# sourceMappingURL=AvatarName.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarName.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,iJAK5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFASrB,CAAC"}
|