@workday/canvas-kit-preview-react 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0075-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.
Files changed (106) hide show
  1. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  2. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  3. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  4. package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
  5. package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
  6. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
  7. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
  8. package/dist/commonjs/divider/lib/Divider.js +1 -1
  9. package/dist/commonjs/index.d.ts +0 -1
  10. package/dist/commonjs/index.d.ts.map +1 -1
  11. package/dist/commonjs/index.js +0 -1
  12. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
  13. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
  14. package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +1 -1
  15. package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
  16. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  17. package/dist/commonjs/radio/lib/RadioText.js +4 -4
  18. package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
  19. package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
  20. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  21. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +15 -15
  22. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  23. package/dist/commonjs/version/lib/version.js +1 -1
  24. package/dist/es6/avatar/lib/Avatar.js +13 -13
  25. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  26. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  27. package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
  28. package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
  29. package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
  30. package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
  31. package/dist/es6/divider/lib/Divider.js +1 -1
  32. package/dist/es6/index.d.ts +0 -1
  33. package/dist/es6/index.d.ts.map +1 -1
  34. package/dist/es6/index.js +0 -1
  35. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
  36. package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
  37. package/dist/es6/multi-select/lib/MultiSelectedItem.js +1 -1
  38. package/dist/es6/radio/lib/RadioGroup.js +3 -3
  39. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  40. package/dist/es6/radio/lib/RadioText.js +4 -4
  41. package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
  42. package/dist/es6/side-panel/lib/SidePanel.js +7 -7
  43. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  44. package/dist/es6/status-indicator/lib/StatusIndicator.js +15 -15
  45. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  46. package/dist/es6/version/lib/version.js +1 -1
  47. package/index.ts +0 -1
  48. package/multi-select/lib/MultiSelectedItem.tsx +1 -1
  49. package/package.json +4 -4
  50. package/dist/commonjs/pill/index.d.ts +0 -8
  51. package/dist/commonjs/pill/index.d.ts.map +0 -1
  52. package/dist/commonjs/pill/index.js +0 -23
  53. package/dist/commonjs/pill/lib/Pill.d.ts +0 -265
  54. package/dist/commonjs/pill/lib/Pill.d.ts.map +0 -1
  55. package/dist/commonjs/pill/lib/Pill.js +0 -147
  56. package/dist/commonjs/pill/lib/PillAvatar.d.ts +0 -526
  57. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +0 -1
  58. package/dist/commonjs/pill/lib/PillAvatar.js +0 -22
  59. package/dist/commonjs/pill/lib/PillCount.d.ts +0 -12
  60. package/dist/commonjs/pill/lib/PillCount.d.ts.map +0 -1
  61. package/dist/commonjs/pill/lib/PillCount.js +0 -21
  62. package/dist/commonjs/pill/lib/PillIcon.d.ts +0 -54
  63. package/dist/commonjs/pill/lib/PillIcon.d.ts.map +0 -1
  64. package/dist/commonjs/pill/lib/PillIcon.js +0 -20
  65. package/dist/commonjs/pill/lib/PillIconButton.d.ts +0 -148
  66. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +0 -1
  67. package/dist/commonjs/pill/lib/PillIconButton.js +0 -21
  68. package/dist/commonjs/pill/lib/PillLabel.d.ts +0 -14
  69. package/dist/commonjs/pill/lib/PillLabel.d.ts.map +0 -1
  70. package/dist/commonjs/pill/lib/PillLabel.js +0 -17
  71. package/dist/commonjs/pill/lib/usePillModel.d.ts +0 -46
  72. package/dist/commonjs/pill/lib/usePillModel.d.ts.map +0 -1
  73. package/dist/commonjs/pill/lib/usePillModel.js +0 -24
  74. package/dist/es6/pill/index.d.ts +0 -8
  75. package/dist/es6/pill/index.d.ts.map +0 -1
  76. package/dist/es6/pill/index.js +0 -7
  77. package/dist/es6/pill/lib/Pill.d.ts +0 -265
  78. package/dist/es6/pill/lib/Pill.d.ts.map +0 -1
  79. package/dist/es6/pill/lib/Pill.js +0 -144
  80. package/dist/es6/pill/lib/PillAvatar.d.ts +0 -526
  81. package/dist/es6/pill/lib/PillAvatar.d.ts.map +0 -1
  82. package/dist/es6/pill/lib/PillAvatar.js +0 -19
  83. package/dist/es6/pill/lib/PillCount.d.ts +0 -12
  84. package/dist/es6/pill/lib/PillCount.d.ts.map +0 -1
  85. package/dist/es6/pill/lib/PillCount.js +0 -18
  86. package/dist/es6/pill/lib/PillIcon.d.ts +0 -54
  87. package/dist/es6/pill/lib/PillIcon.d.ts.map +0 -1
  88. package/dist/es6/pill/lib/PillIcon.js +0 -17
  89. package/dist/es6/pill/lib/PillIconButton.d.ts +0 -148
  90. package/dist/es6/pill/lib/PillIconButton.d.ts.map +0 -1
  91. package/dist/es6/pill/lib/PillIconButton.js +0 -18
  92. package/dist/es6/pill/lib/PillLabel.d.ts +0 -14
  93. package/dist/es6/pill/lib/PillLabel.d.ts.map +0 -1
  94. package/dist/es6/pill/lib/PillLabel.js +0 -14
  95. package/dist/es6/pill/lib/usePillModel.d.ts +0 -46
  96. package/dist/es6/pill/lib/usePillModel.d.ts.map +0 -1
  97. package/dist/es6/pill/lib/usePillModel.js +0 -21
  98. package/pill/index.ts +0 -7
  99. package/pill/lib/Pill.tsx +0 -285
  100. package/pill/lib/PillAvatar.tsx +0 -35
  101. package/pill/lib/PillCount.tsx +0 -44
  102. package/pill/lib/PillIcon.tsx +0 -32
  103. package/pill/lib/PillIconButton.tsx +0 -86
  104. package/pill/lib/PillLabel.tsx +0 -32
  105. package/pill/lib/usePillModel.tsx +0 -23
  106. package/pill/package.json +0 -6
@@ -1,148 +0,0 @@
1
- import { SystemIconProps } from '@workday/canvas-kit-react/icon';
2
- export interface PillIconButtonProps extends Partial<SystemIconProps> {
3
- /**
4
- * The aria label for the removable icon. You must provide a valid string to represent the action.
5
- */
6
- 'aria-label'?: string;
7
- }
8
- export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
9
- size: {
10
- large: {
11
- fontWeight: "--cnvs-sys-font-weight-bold";
12
- height: "var(--cnvs-sys-size-xl, 3rem)";
13
- paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
14
- minWidth: "--cnvs-base-size-1400";
15
- fontFamily: "--cnvs-sys-font-family-default";
16
- lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
17
- fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
18
- letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
19
- };
20
- medium: {
21
- fontWeight: "--cnvs-sys-font-weight-bold";
22
- minWidth: "--cnvs-base-size-1200";
23
- paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
24
- height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
25
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
26
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
27
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
28
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
29
- };
30
- small: {
31
- fontWeight: "--cnvs-sys-font-weight-bold";
32
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
33
- minWidth: "--cnvs-base-size-1000";
34
- paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
35
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
36
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
37
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
38
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
39
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
40
- };
41
- extraSmall: {
42
- fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
44
- minWidth: string;
45
- paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
46
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
47
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
48
- lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
49
- fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
50
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
51
- };
52
- };
53
- grow: {
54
- true: {
55
- width: string;
56
- maxWidth: string;
57
- };
58
- };
59
- iconPosition: {
60
- only: {
61
- padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
62
- };
63
- start: {};
64
- end: {};
65
- };
66
- }, {}, {
67
- background: string;
68
- border: string;
69
- boxShadowInner: string;
70
- boxShadowOuter: string;
71
- label: string;
72
- opacity: string;
73
- borderRadius: string;
74
- }, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
75
- size: {
76
- large: {
77
- fontWeight: "--cnvs-sys-font-weight-bold";
78
- height: "var(--cnvs-sys-size-xl, 3rem)";
79
- paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
80
- minWidth: "--cnvs-base-size-1400";
81
- fontFamily: "--cnvs-sys-font-family-default";
82
- lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
83
- fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
84
- letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
85
- };
86
- medium: {
87
- fontWeight: "--cnvs-sys-font-weight-bold";
88
- minWidth: "--cnvs-base-size-1200";
89
- paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
90
- height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
91
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
92
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
93
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
94
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
95
- };
96
- small: {
97
- fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
99
- minWidth: "--cnvs-base-size-1000";
100
- paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
101
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
102
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
103
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
104
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
105
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
106
- };
107
- extraSmall: {
108
- fontWeight: "--cnvs-sys-font-weight-bold";
109
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
110
- minWidth: string;
111
- paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
112
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
113
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
114
- lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
115
- fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
116
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
117
- };
118
- };
119
- grow: {
120
- true: {
121
- width: string;
122
- maxWidth: string;
123
- };
124
- };
125
- iconPosition: {
126
- only: {
127
- padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
128
- };
129
- start: {};
130
- end: {};
131
- };
132
- }, {}, {
133
- background: string;
134
- border: string;
135
- boxShadowInner: string;
136
- boxShadowOuter: string;
137
- label: string;
138
- opacity: string;
139
- borderRadius: string;
140
- }, never, never>, never>;
141
- export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
142
- state: {
143
- id: string;
144
- disabled: boolean;
145
- };
146
- events: {};
147
- }>;
148
- //# sourceMappingURL=PillIconButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PillIconButton = exports.pillIconButtonStencil = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const common_1 = require("@workday/canvas-kit-react/common");
6
- const icon_1 = require("@workday/canvas-kit-react/icon");
7
- const usePillModel_1 = require("./usePillModel");
8
- const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
9
- const button_1 = require("@workday/canvas-kit-react/button");
10
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
- const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
- const layout_1 = require("@workday/canvas-kit-react/layout");
13
- exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
14
- extends: button_1.buttonStencil,
15
- base: { name: "ipvb2", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
16
- }, "pill-icon-button-10e7a0");
17
- exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
18
- modelHook: usePillModel_1.usePillModel,
19
- })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
20
- return ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillIconButtonStencil)()), children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || canvas_system_icons_web_1.xSmallIcon, "aria-hidden": true, role: "img" }) }));
21
- });
@@ -1,14 +0,0 @@
1
- import { BoxProps } from '@workday/canvas-kit-react/layout';
2
- import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
3
- export interface PillLabelProps extends BoxProps {
4
- tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
5
- }
6
- export declare const pillLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
7
- export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
8
- state: {
9
- id: string;
10
- disabled: boolean;
11
- };
12
- events: {};
13
- }>;
14
- //# sourceMappingURL=PillLabel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,iJAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;EAUpB,CAAC"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PillLabel = exports.pillLabelStencil = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const common_1 = require("@workday/canvas-kit-react/common");
6
- const layout_1 = require("@workday/canvas-kit-react/layout");
7
- const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
8
- const usePillModel_1 = require("./usePillModel");
9
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
10
- exports.pillLabelStencil = (0, canvas_kit_styling_1.createStencil)({
11
- base: { name: "42fgoh", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
12
- }, "pill-label-412177");
13
- exports.PillLabel = (0, common_1.createSubcomponent)('span')({
14
- modelHook: usePillModel_1.usePillModel,
15
- })(({ tooltipProps, children, ...elemProps }, Element, model) => {
16
- return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(Element, { id: `label-${model.state.id}`, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillLabelStencil)()), children: children }) }));
17
- });
@@ -1,46 +0,0 @@
1
- export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
2
- /**
3
- * Used to disable a pill and apply the correct styles.
4
- */
5
- disabled: boolean;
6
- /**
7
- * ID used to add accessibility labels to pill elements.
8
- * @default `useUniqueId()`
9
- */
10
- id: string;
11
- }> & {} & {}) | undefined) => {
12
- state: {
13
- id: string;
14
- /**
15
- * Used to disable a pill and apply the correct styles.
16
- */
17
- disabled: boolean;
18
- };
19
- events: {};
20
- }) & import("@workday/canvas-kit-react/common").ModelExtras<{
21
- /**
22
- * Used to disable a pill and apply the correct styles.
23
- */
24
- disabled: boolean;
25
- /**
26
- * ID used to add accessibility labels to pill elements.
27
- * @default `useUniqueId()`
28
- */
29
- id: string;
30
- }, {}, {
31
- id: string;
32
- /**
33
- * Used to disable a pill and apply the correct styles.
34
- */
35
- disabled: boolean;
36
- }, {}, {
37
- state: {
38
- id: string;
39
- /**
40
- * Used to disable a pill and apply the correct styles.
41
- */
42
- disabled: boolean;
43
- };
44
- events: {};
45
- }>;
46
- //# sourceMappingURL=usePillModel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;OAEG;;IAEH;;;OAGG;;;;;QAPH;;WAEG;;;;;IAFH;;OAEG;;IAEH;;;OAGG;;;;IAPH;;OAEG;;;;;QAFH;;WAEG;;;;EAgBL,CAAC"}
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.usePillModel = void 0;
4
- const common_1 = require("@workday/canvas-kit-react/common");
5
- exports.usePillModel = (0, common_1.createModelHook)({
6
- defaultConfig: {
7
- /**
8
- * Used to disable a pill and apply the correct styles.
9
- */
10
- disabled: false,
11
- /**
12
- * ID used to add accessibility labels to pill elements.
13
- * @default `useUniqueId()`
14
- */
15
- id: '',
16
- },
17
- })(config => {
18
- const id = (0, common_1.useUniqueId)(config.id);
19
- const state = {
20
- ...config,
21
- id,
22
- };
23
- return { state, events: {} };
24
- });
@@ -1,8 +0,0 @@
1
- export * from './lib/Pill';
2
- export * from './lib/usePillModel';
3
- export * from './lib/PillCount';
4
- export * from './lib/PillIconButton';
5
- export * from './lib/PillIcon';
6
- export * from './lib/PillLabel';
7
- export * from './lib/Pill';
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}
@@ -1,7 +0,0 @@
1
- export * from './lib/Pill';
2
- export * from './lib/usePillModel';
3
- export * from './lib/PillCount';
4
- export * from './lib/PillIconButton';
5
- export * from './lib/PillIcon';
6
- export * from './lib/PillLabel';
7
- export * from './lib/Pill';
@@ -1,265 +0,0 @@
1
- import { BoxProps } from '@workday/canvas-kit-react/layout';
2
- export interface PillProps extends BoxProps {
3
- /**
4
- * Defines what kind of pill to render stylistically and its interaction states
5
- * @default 'default'
6
- */
7
- variant?: 'readOnly' | 'removable';
8
- /**
9
- * Determines the max width of the pill. If the pill text is longer than the max width,
10
- * text will be truncated and a tooltip will show the rest of the content when hovered over
11
- */
12
- maxWidth?: string | number;
13
- }
14
- export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
15
- variant: {
16
- readOnly: {
17
- [x: string]: string | {
18
- [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
19
- borderColor: "--cnvs-sys-color-border-container";
20
- } | {
21
- [x: string]: "--cnvs-sys-color-bg-default";
22
- borderColor?: undefined;
23
- };
24
- border: string;
25
- cursor: string;
26
- '&:hover, &.hover': {
27
- [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
28
- borderColor: "--cnvs-sys-color-border-container";
29
- };
30
- '&:focus-visible, &.focus': {
31
- [x: string]: "--cnvs-sys-color-bg-default";
32
- };
33
- '&:active, &.active': {
34
- [x: string]: "--cnvs-sys-color-bg-default";
35
- };
36
- '&:disabled, &.disabled': {
37
- [x: string]: "--cnvs-sys-color-bg-default";
38
- };
39
- };
40
- removable: {
41
- '&:focus-visible, &.focus': {
42
- [x: string]: string;
43
- boxShadow: string;
44
- };
45
- '&:hover, &.hover': {
46
- [x: string]: "--cnvs-sys-color-bg-alt-strong";
47
- };
48
- '&:active, &.active': {
49
- [x: string]: "--cnvs-sys-color-bg-alt-stronger";
50
- };
51
- '&:disabled, &.disabled': {
52
- [x: string]: string;
53
- };
54
- cursor: string;
55
- overflow: string;
56
- position: string;
57
- };
58
- };
59
- }, {}, {
60
- maxWidth: string;
61
- }, import("@workday/canvas-kit-styling").Stencil<{
62
- size: {
63
- large: {
64
- fontWeight: "--cnvs-sys-font-weight-bold";
65
- height: "var(--cnvs-sys-size-xl, 3rem)";
66
- paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
67
- minWidth: "--cnvs-base-size-1400";
68
- fontFamily: "--cnvs-sys-font-family-default";
69
- lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
70
- fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
71
- letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
72
- };
73
- medium: {
74
- fontWeight: "--cnvs-sys-font-weight-bold";
75
- minWidth: "--cnvs-base-size-1200";
76
- paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
77
- height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
78
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
79
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
80
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
81
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
82
- };
83
- small: {
84
- fontWeight: "--cnvs-sys-font-weight-bold";
85
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
86
- minWidth: "--cnvs-base-size-1000";
87
- paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
88
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
89
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
90
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
91
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
92
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
93
- };
94
- extraSmall: {
95
- fontWeight: "--cnvs-sys-font-weight-bold";
96
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
97
- minWidth: string;
98
- paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
99
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
100
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
101
- lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
102
- fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
103
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
104
- };
105
- };
106
- grow: {
107
- true: {
108
- width: string;
109
- maxWidth: string;
110
- };
111
- };
112
- iconPosition: {
113
- only: {
114
- padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
115
- };
116
- start: {};
117
- end: {};
118
- };
119
- }, {}, {
120
- background: string;
121
- border: string;
122
- boxShadowInner: string;
123
- boxShadowOuter: string;
124
- label: string;
125
- opacity: string;
126
- borderRadius: string;
127
- }, never, never>, never>;
128
- /**
129
- * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
130
- * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
131
- * (icons or avatars) are intended to be descriptive, helping support the label. They should not
132
- * receive focus.
133
- *
134
- * `Pill` is the container component. It also provides a React context model for its subcomponents.
135
- * Based on the `variant` prop this component will render different styled `Pill`s.
136
- *
137
- * Example of read only:
138
- *
139
- * ```tsx
140
- * <Pill variant="readOnly">This is a read only</Pill>
141
- * ```
142
- *
143
- * Example of interactive:
144
- *
145
- * ```tsx
146
- * <Pill onClick={() => console.log('clicked')}>
147
- * <Pill.Avatar /> Regina Skeltor
148
- * </Pill>
149
- * ```
150
- *
151
- * Example of removable:
152
- *
153
- * ```tsx
154
- * <Pill variant="removable">
155
- * <Pill.Avatar /> Regina Skeltor
156
- * <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
157
- * </Pill>
158
- * ```
159
- *
160
- * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
161
- * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
162
- * intentional click target that prevents users from accidentally deleting an item.
163
- *
164
- * ```tsx
165
- * <Pill variant="removable">
166
- * Shoes
167
- * <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
168
- * </Pill>
169
- * ```
170
- */
171
- export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
172
- disabled: boolean;
173
- id: string;
174
- }> & {} & {}, {
175
- state: {
176
- id: string;
177
- disabled: boolean;
178
- };
179
- events: {};
180
- }> & {
181
- /**
182
- * This component renders an avatar. It supports all props of the `Avatar` component.
183
- *
184
- * ```tsx
185
- * <Pill variant="removable">
186
- * <Pill.Avatar url={avatarUrl} />
187
- * <Pill.Label>Regina Skeltor</Pill.Label>
188
- * <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
189
- * </Pill>
190
- * ```
191
- */
192
- Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
193
- state: {
194
- id: string;
195
- disabled: boolean;
196
- };
197
- events: {};
198
- }>;
199
- /**
200
- * This component renders its `children` as the count.
201
- *
202
- * ```tsx
203
- * <Pill onClick={() => console.warn('clicked')}>
204
- * <Pill.Label>Shoes</Pill.Label>
205
- * <Pill.Count>30</Pill.Count>
206
- * </Pill>
207
- * ```
208
- */
209
- Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
210
- /**
211
- * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
212
- * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
213
- *
214
- * ```tsx
215
- * <Pill onClick={() => console.warn('clicked')}>
216
- * <Pill.Icon aria-label='Add user' />
217
- * <Pill.Label>Regina Skeltor</Pill.Label>
218
- * </Pill>
219
- * ```
220
- */
221
- Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
222
- state: {
223
- id: string;
224
- disabled: boolean;
225
- };
226
- events: {};
227
- }>;
228
- /**
229
- * This component renders a custom icon button. It is only intended to be used with the
230
- * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
231
- * an icon to the `icon` prop.
232
- *
233
- * ```tsx
234
- * <Pill variant="removable">
235
- * <Pill.Label>Pink Shirts</Pill.Label>
236
- * <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
237
- * </Pill>
238
- * ```
239
- */
240
- IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
241
- state: {
242
- id: string;
243
- disabled: boolean;
244
- };
245
- events: {};
246
- }>;
247
- /**
248
- * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
249
- * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
250
- *
251
- * ```tsx
252
- * <Pill variant="readOnly">
253
- * <Pill.Label>Read-only</Pill.Label>
254
- * </Pill>
255
- * ```
256
- */
257
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
258
- state: {
259
- id: string;
260
- disabled: boolean;
261
- };
262
- events: {};
263
- }>;
264
- };
265
- //# sourceMappingURL=Pill.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwHtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}