@workday/canvas-kit-preview-react 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0076-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 (125) hide show
  1. package/dist/commonjs/index.d.ts +0 -2
  2. package/dist/commonjs/index.d.ts.map +1 -1
  3. package/dist/commonjs/index.js +0 -2
  4. package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +1 -1
  5. package/dist/es6/index.d.ts +0 -2
  6. package/dist/es6/index.d.ts.map +1 -1
  7. package/dist/es6/index.js +0 -2
  8. package/dist/es6/multi-select/lib/MultiSelectedItem.js +1 -1
  9. package/index.ts +0 -2
  10. package/multi-select/lib/MultiSelectedItem.tsx +1 -1
  11. package/package.json +4 -4
  12. package/dist/commonjs/pill/index.d.ts +0 -8
  13. package/dist/commonjs/pill/index.d.ts.map +0 -1
  14. package/dist/commonjs/pill/index.js +0 -23
  15. package/dist/commonjs/pill/lib/Pill.d.ts +0 -265
  16. package/dist/commonjs/pill/lib/Pill.d.ts.map +0 -1
  17. package/dist/commonjs/pill/lib/Pill.js +0 -147
  18. package/dist/commonjs/pill/lib/PillAvatar.d.ts +0 -526
  19. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +0 -1
  20. package/dist/commonjs/pill/lib/PillAvatar.js +0 -22
  21. package/dist/commonjs/pill/lib/PillCount.d.ts +0 -12
  22. package/dist/commonjs/pill/lib/PillCount.d.ts.map +0 -1
  23. package/dist/commonjs/pill/lib/PillCount.js +0 -21
  24. package/dist/commonjs/pill/lib/PillIcon.d.ts +0 -54
  25. package/dist/commonjs/pill/lib/PillIcon.d.ts.map +0 -1
  26. package/dist/commonjs/pill/lib/PillIcon.js +0 -20
  27. package/dist/commonjs/pill/lib/PillIconButton.d.ts +0 -148
  28. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +0 -1
  29. package/dist/commonjs/pill/lib/PillIconButton.js +0 -21
  30. package/dist/commonjs/pill/lib/PillLabel.d.ts +0 -14
  31. package/dist/commonjs/pill/lib/PillLabel.d.ts.map +0 -1
  32. package/dist/commonjs/pill/lib/PillLabel.js +0 -17
  33. package/dist/commonjs/pill/lib/usePillModel.d.ts +0 -46
  34. package/dist/commonjs/pill/lib/usePillModel.d.ts.map +0 -1
  35. package/dist/commonjs/pill/lib/usePillModel.js +0 -24
  36. package/dist/commonjs/select/index.d.ts +0 -3
  37. package/dist/commonjs/select/index.d.ts.map +0 -1
  38. package/dist/commonjs/select/index.js +0 -17
  39. package/dist/commonjs/select/lib/Select.d.ts +0 -31
  40. package/dist/commonjs/select/lib/Select.d.ts.map +0 -1
  41. package/dist/commonjs/select/lib/Select.js +0 -486
  42. package/dist/commonjs/select/lib/SelectBase.d.ts +0 -165
  43. package/dist/commonjs/select/lib/SelectBase.d.ts.map +0 -1
  44. package/dist/commonjs/select/lib/SelectBase.js +0 -235
  45. package/dist/commonjs/select/lib/SelectMenu.d.ts +0 -45
  46. package/dist/commonjs/select/lib/SelectMenu.d.ts.map +0 -1
  47. package/dist/commonjs/select/lib/SelectMenu.js +0 -195
  48. package/dist/commonjs/select/lib/SelectOption.d.ts +0 -38
  49. package/dist/commonjs/select/lib/SelectOption.d.ts.map +0 -1
  50. package/dist/commonjs/select/lib/SelectOption.js +0 -73
  51. package/dist/commonjs/select/lib/scrolling.d.ts +0 -5
  52. package/dist/commonjs/select/lib/scrolling.d.ts.map +0 -1
  53. package/dist/commonjs/select/lib/scrolling.js +0 -36
  54. package/dist/commonjs/select/lib/types.d.ts +0 -37
  55. package/dist/commonjs/select/lib/types.d.ts.map +0 -1
  56. package/dist/commonjs/select/lib/types.js +0 -2
  57. package/dist/commonjs/select/lib/utils.d.ts +0 -10
  58. package/dist/commonjs/select/lib/utils.d.ts.map +0 -1
  59. package/dist/commonjs/select/lib/utils.js +0 -27
  60. package/dist/es6/pill/index.d.ts +0 -8
  61. package/dist/es6/pill/index.d.ts.map +0 -1
  62. package/dist/es6/pill/index.js +0 -7
  63. package/dist/es6/pill/lib/Pill.d.ts +0 -265
  64. package/dist/es6/pill/lib/Pill.d.ts.map +0 -1
  65. package/dist/es6/pill/lib/Pill.js +0 -144
  66. package/dist/es6/pill/lib/PillAvatar.d.ts +0 -526
  67. package/dist/es6/pill/lib/PillAvatar.d.ts.map +0 -1
  68. package/dist/es6/pill/lib/PillAvatar.js +0 -19
  69. package/dist/es6/pill/lib/PillCount.d.ts +0 -12
  70. package/dist/es6/pill/lib/PillCount.d.ts.map +0 -1
  71. package/dist/es6/pill/lib/PillCount.js +0 -18
  72. package/dist/es6/pill/lib/PillIcon.d.ts +0 -54
  73. package/dist/es6/pill/lib/PillIcon.d.ts.map +0 -1
  74. package/dist/es6/pill/lib/PillIcon.js +0 -17
  75. package/dist/es6/pill/lib/PillIconButton.d.ts +0 -148
  76. package/dist/es6/pill/lib/PillIconButton.d.ts.map +0 -1
  77. package/dist/es6/pill/lib/PillIconButton.js +0 -18
  78. package/dist/es6/pill/lib/PillLabel.d.ts +0 -14
  79. package/dist/es6/pill/lib/PillLabel.d.ts.map +0 -1
  80. package/dist/es6/pill/lib/PillLabel.js +0 -14
  81. package/dist/es6/pill/lib/usePillModel.d.ts +0 -46
  82. package/dist/es6/pill/lib/usePillModel.d.ts.map +0 -1
  83. package/dist/es6/pill/lib/usePillModel.js +0 -21
  84. package/dist/es6/select/index.d.ts +0 -3
  85. package/dist/es6/select/index.d.ts.map +0 -1
  86. package/dist/es6/select/index.js +0 -1
  87. package/dist/es6/select/lib/Select.d.ts +0 -31
  88. package/dist/es6/select/lib/Select.d.ts.map +0 -1
  89. package/dist/es6/select/lib/Select.js +0 -460
  90. package/dist/es6/select/lib/SelectBase.d.ts +0 -165
  91. package/dist/es6/select/lib/SelectBase.d.ts.map +0 -1
  92. package/dist/es6/select/lib/SelectBase.js +0 -208
  93. package/dist/es6/select/lib/SelectMenu.d.ts +0 -45
  94. package/dist/es6/select/lib/SelectMenu.d.ts.map +0 -1
  95. package/dist/es6/select/lib/SelectMenu.js +0 -191
  96. package/dist/es6/select/lib/SelectOption.d.ts +0 -38
  97. package/dist/es6/select/lib/SelectOption.d.ts.map +0 -1
  98. package/dist/es6/select/lib/SelectOption.js +0 -69
  99. package/dist/es6/select/lib/scrolling.d.ts +0 -5
  100. package/dist/es6/select/lib/scrolling.d.ts.map +0 -1
  101. package/dist/es6/select/lib/scrolling.js +0 -32
  102. package/dist/es6/select/lib/types.d.ts +0 -37
  103. package/dist/es6/select/lib/types.d.ts.map +0 -1
  104. package/dist/es6/select/lib/types.js +0 -1
  105. package/dist/es6/select/lib/utils.d.ts +0 -10
  106. package/dist/es6/select/lib/utils.d.ts.map +0 -1
  107. package/dist/es6/select/lib/utils.js +0 -22
  108. package/pill/index.ts +0 -7
  109. package/pill/lib/Pill.tsx +0 -285
  110. package/pill/lib/PillAvatar.tsx +0 -35
  111. package/pill/lib/PillCount.tsx +0 -44
  112. package/pill/lib/PillIcon.tsx +0 -32
  113. package/pill/lib/PillIconButton.tsx +0 -86
  114. package/pill/lib/PillLabel.tsx +0 -32
  115. package/pill/lib/usePillModel.tsx +0 -23
  116. package/pill/package.json +0 -6
  117. package/select/index.ts +0 -8
  118. package/select/lib/Select.tsx +0 -595
  119. package/select/lib/SelectBase.tsx +0 -493
  120. package/select/lib/SelectMenu.tsx +0 -304
  121. package/select/lib/SelectOption.tsx +0 -133
  122. package/select/lib/scrolling.ts +0 -42
  123. package/select/lib/types.ts +0 -37
  124. package/select/lib/utils.ts +0 -30
  125. package/select/package.json +0 -6
@@ -1,208 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React, { useLayoutEffect } from 'react';
3
- import { errorRing, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
4
- import { colors, borderRadius, inputColors, type, space } from '@workday/canvas-kit-react/tokens';
5
- import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
6
- import { SystemIcon } from '@workday/canvas-kit-react/icon';
7
- import { SelectMenu } from './SelectMenu';
8
- import { SelectOption } from './SelectOption';
9
- import { scrollIntoViewIfNeeded } from './scrolling';
10
- import { getCorrectedIndexByValue } from './utils';
11
- export const buttonBorderWidth = 1;
12
- const menuIconSize = space.m;
13
- const SelectButton = styled('button')({
14
- ...type.levels.subtext.large,
15
- border: `${buttonBorderWidth}px solid ${inputColors.border}`,
16
- cursor: 'default',
17
- display: 'block',
18
- backgroundColor: inputColors.background,
19
- borderRadius: borderRadius.m,
20
- boxSizing: 'border-box',
21
- height: space.xl,
22
- outline: 'none',
23
- overflow: 'hidden',
24
- padding: `calc(${space.xxs} - ${buttonBorderWidth}px)`,
25
- paddingRight: `calc(${space.xxs} + ${space.m} + (${space.xxs} + ${buttonBorderWidth}px))`,
26
- textAlign: 'left',
27
- textOverflow: 'ellipsis',
28
- transition: '0.2s box-shadow, 0.2s border-color',
29
- whiteSpace: 'nowrap',
30
- // width is required (instead of minWidth) in order for the button to
31
- // be sized properly for lengthy options
32
- width: `calc((${space.xxxl} * 7) / 2)`,
33
- '&::placeholder': {
34
- color: inputColors.placeholder,
35
- },
36
- '&:disabled': {
37
- backgroundColor: inputColors.disabled.background,
38
- borderColor: inputColors.disabled.border,
39
- color: inputColors.disabled.text,
40
- '&::placeholder': {
41
- color: inputColors.disabled.text,
42
- },
43
- },
44
- }, ({ error, menuVisibility, theme }) => {
45
- const themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
46
- const buttonFocusStyles = {
47
- borderColor: themedFocusOutlineColor,
48
- boxShadow: `inset 0 0 0 1px ${themedFocusOutlineColor}`,
49
- };
50
- if (error === undefined) {
51
- // If there isn't an error, apply focus and hover styles if the menu is
52
- // closed or in the process of closing (otherwise, the menu is opened
53
- // or in the process of opening: style the button as if it had focus)
54
- return menuVisibility === 'closed' || menuVisibility === 'closing'
55
- ? {
56
- '&:focus:not([disabled])': {
57
- ...buttonFocusStyles,
58
- },
59
- '&:hover:not([disabled]):not(:focus)': {
60
- borderColor: inputColors.hoverBorder,
61
- },
62
- }
63
- : { ...buttonFocusStyles };
64
- }
65
- return {
66
- ...errorRing(error, theme),
67
- };
68
- }, ({ grow }) => grow && {
69
- width: '100%',
70
- });
71
- const SelectMenuIcon = styled(SystemIcon)({
72
- position: 'absolute',
73
- top: space.xxxs,
74
- right: space.xxxs,
75
- padding: space.xxxs,
76
- pointerEvents: 'none',
77
- '& path': {
78
- transition: '100ms fill',
79
- },
80
- });
81
- const SelectInput = styled('input')({
82
- display: 'none',
83
- });
84
- const SelectWrapper = styled('div')({
85
- position: 'relative',
86
- }, ({ grow }) => ({
87
- display: grow ? 'block' : 'inline-block',
88
- }), ({ disabled }) => ({
89
- '&:hover .menu-icon path': {
90
- fill: disabled ? undefined : colors.licorice500,
91
- },
92
- }));
93
- const defaultRenderOption = option => {
94
- return _jsx("div", { children: defaultRenderSelected(option) });
95
- };
96
- const defaultRenderSelected = option => {
97
- return option.label;
98
- };
99
- /**
100
- * @deprecated ⚠️ `SelectBase` 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.
101
- */
102
- export const SelectBase = ({ 'aria-labelledby': ariaLabelledBy, 'aria-required': ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex = 0, grow, inputRef, menuPlacement = 'bottom', menuRef, menuVisibility = 'closed', onChange, onKeyDown, onBlur, onClose, onOptionSelection, options, renderOption = defaultRenderOption, renderSelected = defaultRenderSelected, required, shouldMenuAutoFlip = true, shouldMenuAutoFocus = true, value, ...elemProps }) => {
103
- const focusedOptionRef = React.useRef(null);
104
- const menuId = useUniqueId();
105
- const renderOptions = (renderOption) => {
106
- const selectedOptionIndex = getCorrectedIndexByValue(options, value);
107
- return options.map((option, index) => {
108
- const optionProps = {
109
- 'aria-disabled': option.disabled ? true : undefined,
110
- 'aria-selected': selectedOptionIndex === index ? true : undefined,
111
- error,
112
- focused: focusedOptionIndex === index,
113
- id: option.id,
114
- interactive: menuVisibility === 'opening' || menuVisibility === 'opened',
115
- key: option.id,
116
- optionRef: focusedOptionIndex === index ? focusedOptionRef : undefined,
117
- value: option.value,
118
- ...(onOptionSelection
119
- ? {
120
- onClick: (event) => {
121
- // TODO: Figure out why this preventDefault call exists.
122
- // Removing it doesn't have any obvious consequences,
123
- // but need to do more careful testing.
124
- event.preventDefault();
125
- onOptionSelection(index);
126
- },
127
- }
128
- : {}),
129
- };
130
- // Pass in additional information about the option state: focused, selected
131
- const normalizedOption = {
132
- ...option,
133
- focused: optionProps.focused,
134
- selected: !!optionProps['aria-selected'],
135
- };
136
- return _jsx(SelectOption, { ...optionProps, children: renderOption(normalizedOption) });
137
- });
138
- };
139
- // If the focused option changed, scroll the newly focused option into view (if
140
- // necessary) but do NOT center it
141
- useLayoutEffect(() => {
142
- const focusedOption = focusedOptionRef.current;
143
- if (focusedOption) {
144
- // TODO: Figure out if rAF is the best approach here. I initially added
145
- // rAF to get the Select States Menu On story to render correctly in IE.
146
- // Without rAF, the menu is scrolled slightly further down than it should
147
- // be (only in IE, and only in the Menu On visual testing stories), which
148
- // triggers a visual regression. We're inside useLayoutEffect here so I
149
- // didn't expect to need rAF in order to make proper measurements, but it
150
- // seems to be necessary in IE.
151
- //
152
- // This rAF call also has the additional benefit of fixing a jarring menu
153
- // placement issue in IE (https://github.com/Workday/canvas-kit/issues/791),
154
- // so I'm leaving it in for now.
155
- const animateId = requestAnimationFrame(() => {
156
- // We cannot use the native Element.scrollIntoView() here because it
157
- // doesn't work properly with the portalled menu: when using the keyboard
158
- // to advance focus through the options, using scrollIntoView to keep the
159
- // newly focused option in view also scrolls the ENTIRE page. Instead, we
160
- // call our own scrollIntoViewIfNeeded function.
161
- scrollIntoViewIfNeeded(focusedOption, false);
162
- });
163
- return () => {
164
- cancelAnimationFrame(animateId);
165
- };
166
- }
167
- return undefined;
168
- }, [focusedOptionIndex]);
169
- // If the menu was just opened, scroll the focused option into view (if
170
- // necessary) and center it
171
- useLayoutEffect(() => {
172
- const focusedOption = focusedOptionRef.current;
173
- // We need to scroll if the menu is either opening or opened in case we decide to
174
- // bypass the opening state and jump straight to opened (like in visual testing,
175
- // for instance)
176
- if (focusedOption && (menuVisibility === 'opening' || menuVisibility === 'opened')) {
177
- // TODO: This rAF call is also necessary for the Menu On visual testing
178
- // stories to render properly in IE (see above, both rAF calls need to be
179
- // present). It has no bearing on the menu placement issue.
180
- const animateId = requestAnimationFrame(() => {
181
- scrollIntoViewIfNeeded(focusedOption, true);
182
- });
183
- return () => {
184
- cancelAnimationFrame(animateId);
185
- };
186
- }
187
- return undefined;
188
- }, [menuVisibility]);
189
- // Do a bit of error-checking in case options weren't provided
190
- const hasOptions = options.length > 0;
191
- const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
192
- const selectedOptionValue = selectedOption ? selectedOption.value : '';
193
- return (_jsxs(SelectWrapper, { grow: grow, disabled: disabled, children: [_jsx(SelectButton, { "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, onBlur: event => {
194
- if (menuVisibility === 'closed') {
195
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
196
- }
197
- else {
198
- event.preventDefault();
199
- event.stopPropagation();
200
- }
201
- },
202
- // Prevent Firefox from triggering click handler on spacebar during
203
- // type-ahead when the menu is closed (and, thus, incorrectly displaying
204
- // the menu)
205
- onKeyUp: e => {
206
- e.preventDefault();
207
- }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue, ...elemProps, children: !!selectedOption && renderSelected(selectedOption) }), _jsx(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }), hasOptions && menuVisibility !== 'closed' && (_jsx(SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility, children: renderOptions(renderOption) })), _jsx(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: `${menuIconSize}rem` })] }));
208
- };
@@ -1,45 +0,0 @@
1
- import React from 'react';
2
- import { Themeable } from '@workday/canvas-kit-react/common';
3
- import { SelectProps } from './Select';
4
- import { MenuPlacement, MenuVisibility } from './types';
5
- interface SelectMenuProps extends Themeable, React.HTMLAttributes<HTMLUListElement>, Pick<SelectProps, 'error'> {
6
- /**
7
- * The ref to the anchor button element. Required to anchor the menu.
8
- */
9
- buttonRef?: React.RefObject<HTMLButtonElement>;
10
- /**
11
- * The ref to the underlying menu/listbox element. Use this to imperatively manipulate the menu.
12
- */
13
- menuRef?: React.RefObject<HTMLUListElement>;
14
- /**
15
- * The function called when the menu is closed.
16
- */
17
- onClose?: () => void;
18
- /**
19
- * The placement of the SelectMenu relative to its corresponding button.
20
- * @default 'bottom'
21
- */
22
- placement?: MenuPlacement;
23
- /**
24
- * If true, automatically flip the SelectMenu to keep it visible if necessary (e.g., if the the SelectMenu would otherwise display below the visible area of the viewport).
25
- * @default true
26
- */
27
- shouldAutoFlip?: boolean;
28
- /**
29
- * If true, focus the SelectMenu when it's shown. Set to false if you don't want to focus the SelectMenu automatically (for visual testing purposes, for example).
30
- * @default true
31
- */
32
- shouldAutoFocus?: boolean;
33
- /**
34
- * The visibility state of the SelectMenu.
35
- * @default 'closed'
36
- */
37
- visibility?: MenuVisibility;
38
- }
39
- export declare const menuAnimationDuration = 200;
40
- /**
41
- * @deprecated ⚠️ `SelectMenu` 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.
42
- */
43
- export declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
44
- export {};
45
- //# sourceMappingURL=SelectMenu.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AA8KzC;;GAEG;AACH,eAAO,MAAM,UAAU,2HAWpB,eAAe,4CA2DjB,CAAC"}
@@ -1,191 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
3
- import { ErrorType, styled } from '@workday/canvas-kit-react/common';
4
- import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, useTransferOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
5
- import { colors, borderRadius, inputColors } from '@workday/canvas-kit-react/tokens';
6
- export const menuAnimationDuration = 200;
7
- const menuBorderStyles = (theme, error) => {
8
- let borderColor = theme.canvas.palette.common.focusOutline;
9
- let dividerBorderColor = borderColor;
10
- let dividerBorderWidth = 1;
11
- if (error === ErrorType.Error) {
12
- borderColor = theme.canvas.palette.error.main;
13
- dividerBorderColor = borderColor;
14
- }
15
- else if (error === ErrorType.Caution) {
16
- borderColor = theme.canvas.palette.alert.darkest;
17
- dividerBorderColor = theme.canvas.palette.alert.main;
18
- dividerBorderWidth = 2;
19
- }
20
- const dividerBorder = `${dividerBorderWidth}px solid ${dividerBorderColor}`;
21
- return {
22
- borderColor: borderColor,
23
- // Render the divider using a pseudo-element
24
- '&:before': {
25
- backgroundColor: colors.soap400,
26
- borderLeft: dividerBorder,
27
- borderRight: dividerBorder,
28
- boxSizing: 'border-box',
29
- content: '""',
30
- display: 'block',
31
- height: 1,
32
- position: 'absolute',
33
- width: '100%',
34
- '[data-popper-placement="bottom"] &': {
35
- top: 0,
36
- },
37
- '[data-popper-placement="top"] &': {
38
- bottom: 0,
39
- },
40
- },
41
- };
42
- };
43
- const menuListBorderStyles = (theme, error) => {
44
- let borderColor = theme.canvas.palette.common.focusOutline;
45
- let borderWidth = 1;
46
- if (error === ErrorType.Error) {
47
- borderColor = theme.canvas.palette.error.main;
48
- }
49
- else if (error === ErrorType.Caution) {
50
- borderColor = theme.canvas.palette.alert.main;
51
- borderWidth = 2;
52
- }
53
- const border = `${borderWidth}px solid ${borderColor}`;
54
- return {
55
- borderLeft: border,
56
- borderRight: border,
57
- '[data-popper-placement="bottom"] &': {
58
- borderBottom: border,
59
- },
60
- '[data-popper-placement="top"] &': {
61
- borderTop: border,
62
- },
63
- };
64
- };
65
- const Menu = styled('div')({
66
- backgroundColor: colors.frenchVanilla100,
67
- border: `1px solid ${inputColors.border}`,
68
- boxSizing: 'border-box',
69
- position: 'relative',
70
- transition: `opacity ${menuAnimationDuration}ms`,
71
- '[data-popper-placement="bottom"] &': {
72
- borderRadius: `0 0 ${borderRadius.m} ${borderRadius.m}`,
73
- borderTop: 0,
74
- },
75
- '[data-popper-placement="top"] &': {
76
- borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
77
- borderBottom: 0,
78
- },
79
- }, ({ error, theme }) => ({
80
- ...menuBorderStyles(theme, error),
81
- }), ({ visibility }) => ({
82
- opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
83
- }), ({ width }) => ({
84
- width: width,
85
- }));
86
- const MenuList = styled('ul')({
87
- listStyle: 'none',
88
- margin: 0,
89
- maxHeight: 200,
90
- outline: 'none',
91
- overflowY: 'auto',
92
- padding: 0,
93
- }, ({ error, theme }) => ({
94
- ...menuListBorderStyles(theme, error),
95
- }));
96
- const generatePopperOptions = (props) => {
97
- const { menuRef, placement, shouldAutoFlip, shouldAutoFocus } = props;
98
- let fallbackPlacements = [];
99
- if (shouldAutoFlip) {
100
- fallbackPlacements = placement === 'top' ? ['bottom'] : ['top'];
101
- }
102
- const modifiers = [
103
- {
104
- name: 'flip',
105
- options: {
106
- fallbackPlacements,
107
- },
108
- },
109
- {
110
- name: 'offset',
111
- options: {
112
- offset: () => {
113
- const skidding = 0;
114
- // Displace menu towards the button to obscure the bottom
115
- // edge of the button and to create a smooth visual
116
- // connection between the button and the menu
117
- const distance = -parseInt(borderRadius.m, 10);
118
- return [skidding, distance];
119
- },
120
- },
121
- },
122
- {
123
- name: 'preventOverflow',
124
- options: {
125
- // Ensure the menu stays aligned with its reference (button),
126
- // even if that means the menu is pushed out of view
127
- mainAxis: false,
128
- },
129
- },
130
- {
131
- // Disable the fallbackModifier as SelectMenu is properly handled by the
132
- // flip modifier through shouldAutoFlip prop
133
- name: 'fallbackModifier',
134
- enabled: false,
135
- },
136
- ];
137
- return {
138
- modifiers,
139
- // TODO: Consider using a more general-purpose focus function here rather
140
- // than relying on Popper's onFirstUpdate for better control over how
141
- // focus is managed
142
- onFirstUpdate: () => {
143
- if (shouldAutoFocus && menuRef && menuRef.current) {
144
- menuRef.current.focus();
145
- }
146
- },
147
- };
148
- };
149
- /**
150
- * @deprecated ⚠️ `SelectMenu` 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.
151
- */
152
- export const SelectMenu = ({ buttonRef, children, error, menuRef, onClose, placement = 'bottom', shouldAutoFlip = true, shouldAutoFocus = true, visibility = 'closed', ...elemProps }) => {
153
- const model = usePopupModel({
154
- initialVisibility: 'visible',
155
- returnFocusRef: buttonRef,
156
- onHide: onClose,
157
- });
158
- const [width, setWidth] = useState(0);
159
- const handleWidthChange = useCallback(() => {
160
- if (buttonRef && buttonRef.current && visibility !== 'closed') {
161
- const newMenuWidth = buttonRef.current.clientWidth + 2;
162
- setWidth(newMenuWidth);
163
- }
164
- }, [buttonRef, visibility]);
165
- useLayoutEffect(() => {
166
- handleWidthChange();
167
- }, [handleWidthChange]);
168
- // TODO: Figure out a better way to handle width changes in the reference button.
169
- // Seems like we should resize the menu when the reference button width changes, not
170
- // necessarily when the window resizes. Resizing the menu on window resize addresses
171
- // the case when `grow = true` and the user resizes the browser window while the
172
- // menu is opened, but doesn't address cases where the reference button size changes
173
- // through other means.
174
- useEffect(() => {
175
- // Update menu width state on resize to ensure menu resizes as window resizes
176
- window.addEventListener('resize', handleWidthChange);
177
- return () => {
178
- window.removeEventListener('resize', handleWidthChange);
179
- };
180
- }, [handleWidthChange]);
181
- useCloseOnEscape(model);
182
- useCloseOnOutsideClick(model);
183
- useReturnFocus(model);
184
- useTransferOnFullscreenExit(model);
185
- return (_jsx(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
186
- menuRef,
187
- placement,
188
- shouldAutoFlip,
189
- shouldAutoFocus,
190
- }), ref: model.state.stackRef, children: _jsx(Menu, { error: error, visibility: visibility, width: width, children: _jsx(MenuList, { error: error, ref: menuRef, role: "listbox", tabIndex: -1, ...elemProps, children: children }) }) }));
191
- };
@@ -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,69 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { ErrorType, pickForegroundColor, styled, } from '@workday/canvas-kit-react/common';
3
- import { colors, commonColors, type } from '@workday/canvas-kit-react/tokens';
4
- const optionPadding = 6;
5
- const activeStyles = (theme) => {
6
- const activeBgColor = theme.canvas.palette.primary.main;
7
- return {
8
- backgroundColor: activeBgColor,
9
- color: pickForegroundColor(activeBgColor),
10
- };
11
- };
12
- const Option = styled('li')({
13
- ...type.levels.subtext.large,
14
- cursor: 'default',
15
- // Apply listStyle at the list item style to ensure it's styled properly
16
- // in Visual Testing States
17
- listStyle: 'none',
18
- // In case the content of the option is empty/undefined for some reason
19
- minHeight: type.levels.subtext.large.lineHeight,
20
- textAlign: 'left',
21
- }, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
22
- if (disabled) {
23
- // If the option is disabled, return disabled styles...
24
- return {
25
- color: colors.licorice100,
26
- };
27
- }
28
- else if (focused) {
29
- // ...else if the option is focused, return focused styles...
30
- return {
31
- ...activeStyles(theme),
32
- };
33
- }
34
- else {
35
- // ...else return hover and selected (via aria-selected) styles
36
- const selectedBgColor = theme.canvas.palette.primary.lightest;
37
- const selectedStyles = {
38
- '&[aria-selected="true"]': {
39
- backgroundColor: selectedBgColor,
40
- color: pickForegroundColor(selectedBgColor),
41
- },
42
- };
43
- // Only display interactive (hover/active) styles if the option is interactive
44
- const interactiveStyles = interactive
45
- ? {
46
- '&:hover': {
47
- backgroundColor: commonColors.hoverBackground,
48
- },
49
- '&:active, &:active[aria-selected="true"]': {
50
- ...activeStyles(theme),
51
- },
52
- }
53
- : {};
54
- return {
55
- // Place selected styles after interactive styles to have selected styles
56
- // override interactive styles (subject to CSS specificity rules)
57
- ...interactiveStyles,
58
- ...selectedStyles,
59
- };
60
- }
61
- }, ({ error }) => ({
62
- padding: `${optionPadding}px ${error === ErrorType.Caution ? optionPadding - 1 : optionPadding}px`,
63
- }));
64
- /**
65
- * @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.
66
- */
67
- export const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
68
- return (_jsx(Option, { "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option", ...elemProps, children: children }));
69
- };
@@ -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,32 +0,0 @@
1
- // Modified from https://gist.github.com/hsablonniere/2581101
2
- /**
3
- * @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.
4
- */
5
- export const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
6
- const parent = elem.parentElement;
7
- if (elem && parent) {
8
- const parentComputedStyle = window.getComputedStyle(parent, null);
9
- const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
10
- // Check if elem is out of view at the top edge of the parent's viewport
11
- const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
12
- // Check if elem is out of view at the bottom edge of the parent's viewport
13
- const overBottom = elem.offsetTop + elem.offsetHeight >
14
- parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
15
- if ((overTop || overBottom) && centerIfNeeded) {
16
- parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);
17
- }
18
- if ((overTop || overBottom) && !centerIfNeeded) {
19
- if (overBottom) {
20
- // elem is out of view at the bottom edge of the parent's viewport;
21
- // scroll down just far enough for elem to be visible
22
- parent.scrollTop =
23
- elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
24
- }
25
- else {
26
- // elem is out of view at the top edge of the parent's viewport;
27
- // scroll up just far enough for elem to be visible
28
- parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
29
- }
30
- }
31
- }
32
- };
@@ -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 +0,0 @@
1
- export {};
@@ -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