@kaizen/components 0.0.0-canary-typescript-transform-paths-3.5.2-20241113035843 → 0.0.0-canary-package-bundler-v2-20241113071536
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/cjs/Filter/FilterBar/FilterBar.cjs +1 -3
- package/dist/cjs/Filter/FilterBar/FilterBar.module.css.cjs +0 -1
- package/dist/cjs/Pagination/Pagination.cjs +1 -1
- package/dist/esm/Filter/FilterBar/FilterBar.mjs +1 -3
- package/dist/esm/Filter/FilterBar/FilterBar.module.css.mjs +0 -1
- package/dist/esm/Pagination/Pagination.mjs +1 -1
- package/dist/styles.css +5 -9
- package/package.json +3 -3
- package/src/Filter/FilterBar/FilterBar.module.css +0 -4
- package/src/Filter/FilterBar/FilterBar.tsx +12 -14
- package/src/Pagination/Pagination.tsx +1 -1
- package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss +1 -1
- package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.css +1 -1
- package/dist/types/Heading-Bq3fifM0.js +0 -114
- package/dist/types/IconButton-AN3AP9ja.js +0 -855
- package/dist/types/RemovableTag-CIqQvZuu.js +0 -674
- package/dist/types/ReversedColors-D9BxpiSS.js +0 -14
- package/dist/types/Tooltip-DNGasNM8.js +0 -286
- package/dist/types/actionsV1.js +0 -11
- package/dist/types/actionsV2.js +0 -10
- package/dist/types/actionsV3.js +0 -74
- package/dist/types/future.js +0 -211
- package/dist/types/index-hKXin_Zl.js +0 -10
- package/dist/types/index-offJCDcb.js +0 -6
- package/dist/types/index.js +0 -1016
- package/dist/types/mergeClassNames-BuzaWRqN.js +0 -25
- package/dist/types/overlaysV1.js +0 -8
- package/dist/types/overlaysV2.js +0 -7
- package/dist/types/overlaysV3.js +0 -104
- package/dist/types/reactAriaComponentsV3.js +0 -1
- package/dist/types/reactAriaV3.js +0 -1
- package/dist/types/styles.css +0 -11923
- package/dist/types/utilitiesV3.js +0 -2
|
@@ -1,286 +0,0 @@
|
|
|
1
|
-
import { __rest, __assign } from 'tslib';
|
|
2
|
-
import React, { useState, useId, useRef, useEffect, cloneElement } from 'react';
|
|
3
|
-
import ReactDOM from 'react-dom';
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
import { usePopper } from 'react-popper';
|
|
6
|
-
import { useDebouncedCallback } from 'use-debounce';
|
|
7
|
-
var ANIM_DURATION_MS = 400;
|
|
8
|
-
var AnimationContext = /*#__PURE__*/React.createContext({
|
|
9
|
-
isVisible: false,
|
|
10
|
-
isAnimIn: false,
|
|
11
|
-
isAnimOut: false
|
|
12
|
-
});
|
|
13
|
-
/**
|
|
14
|
-
* Simply applies a css animation to transition a component in and out.
|
|
15
|
-
* When the component is no longer needed, it will no longer be rendered to the
|
|
16
|
-
* dom.
|
|
17
|
-
*/
|
|
18
|
-
var AnimationProvider = function (_a) {
|
|
19
|
-
var isVisible = _a.isVisible,
|
|
20
|
-
_b = _a.animationDuration,
|
|
21
|
-
animationDuration = _b === void 0 ? ANIM_DURATION_MS : _b,
|
|
22
|
-
otherProps = __rest(_a, ["isVisible", "animationDuration"]);
|
|
23
|
-
var _c = useState(false),
|
|
24
|
-
isAnimIn = _c[0],
|
|
25
|
-
setIsAnimIn = _c[1];
|
|
26
|
-
var _d = useState(false),
|
|
27
|
-
isAnimOut = _d[0],
|
|
28
|
-
setIsAnimOut = _d[1];
|
|
29
|
-
var _e = useState(false),
|
|
30
|
-
prevIsOpen = _e[0],
|
|
31
|
-
setPrevIsOpen = _e[1];
|
|
32
|
-
// Keeps the modal visible while the css animation is completing
|
|
33
|
-
var trackAnimOutCompleted = useDebouncedCallback(function () {
|
|
34
|
-
setIsAnimOut(false);
|
|
35
|
-
}, animationDuration, {
|
|
36
|
-
leading: false
|
|
37
|
-
});
|
|
38
|
-
// Allows us to flash the component in an "invisible" state, for one frame.
|
|
39
|
-
// Then set it to "visible". This allows us to make sure the css transition
|
|
40
|
-
// actually works.
|
|
41
|
-
var trackAnimInCompleted = useDebouncedCallback(function () {
|
|
42
|
-
setIsAnimIn(false);
|
|
43
|
-
}, 0, {
|
|
44
|
-
leading: false
|
|
45
|
-
});
|
|
46
|
-
if (isVisible !== prevIsOpen) {
|
|
47
|
-
setPrevIsOpen(isVisible);
|
|
48
|
-
if (!isVisible) {
|
|
49
|
-
trackAnimInCompleted.cancel();
|
|
50
|
-
setIsAnimOut(true);
|
|
51
|
-
trackAnimOutCompleted();
|
|
52
|
-
} else {
|
|
53
|
-
trackAnimOutCompleted.cancel();
|
|
54
|
-
setIsAnimIn(true);
|
|
55
|
-
trackAnimInCompleted();
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return /*#__PURE__*/React.createElement(AnimationContext.Provider, __assign({
|
|
59
|
-
value: {
|
|
60
|
-
isVisible: isVisible,
|
|
61
|
-
isAnimOut: isAnimOut,
|
|
62
|
-
isAnimIn: isAnimIn
|
|
63
|
-
}
|
|
64
|
-
}, otherProps));
|
|
65
|
-
};
|
|
66
|
-
var useAnimation = function () {
|
|
67
|
-
var context = React.useContext(AnimationContext);
|
|
68
|
-
if (!context) {
|
|
69
|
-
throw new Error("useAnimation must be used within a AnimationProvider");
|
|
70
|
-
}
|
|
71
|
-
return context;
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
// Noting that this is contingent on our displayName for our components - this something we control
|
|
75
|
-
var allowedDisplayNames = ["Button", "IconButton", "FilterButtonBase"];
|
|
76
|
-
function extractDisplayName(type) {
|
|
77
|
-
return type.displayName || type.name || "Unknown";
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
|
|
81
|
-
*/
|
|
82
|
-
var isSemanticElement = function (element) {
|
|
83
|
-
if (! /*#__PURE__*/React.isValidElement(element)) return false;
|
|
84
|
-
var props = element.props,
|
|
85
|
-
type = element.type;
|
|
86
|
-
if ("role" in props) {
|
|
87
|
-
return props.role !== "presentation" && props.role !== "none";
|
|
88
|
-
}
|
|
89
|
-
if (typeof type !== "string") {
|
|
90
|
-
// As we are only checking whether this matches to our allowedDisplayNames
|
|
91
|
-
// type casting should be fine
|
|
92
|
-
var displayName = extractDisplayName(type);
|
|
93
|
-
return allowedDisplayNames.includes(displayName);
|
|
94
|
-
}
|
|
95
|
-
return !(type === "div" || type === "span");
|
|
96
|
-
};
|
|
97
|
-
var styles = {
|
|
98
|
-
"tooltip": "Tooltip-module_tooltip__Qa021",
|
|
99
|
-
"tooltipContent": "Tooltip-module_tooltipContent__B1va8",
|
|
100
|
-
"default": "Tooltip-module_default__oc1MF",
|
|
101
|
-
"informative": "Tooltip-module_informative__2IhL8",
|
|
102
|
-
"positive": "Tooltip-module_positive__0jHXh",
|
|
103
|
-
"cautionary": "Tooltip-module_cautionary__yGXwE",
|
|
104
|
-
"highlight": "Tooltip-module_highlight__RiT9b",
|
|
105
|
-
"arrow": "Tooltip-module_arrow__brVJc",
|
|
106
|
-
"arrowInner": "Tooltip-module_arrowInner__wOJTc",
|
|
107
|
-
"arrowMain": "Tooltip-module_arrowMain__uVNp3",
|
|
108
|
-
"arrowShadow": "Tooltip-module_arrowShadow__HYZRR",
|
|
109
|
-
"displayInline": "Tooltip-module_displayInline__H48ln",
|
|
110
|
-
"displayBlock": "Tooltip-module_displayBlock__se4CN",
|
|
111
|
-
"displayInlineBlock": "Tooltip-module_displayInlineBlock__2k-Z6",
|
|
112
|
-
"displayFlex": "Tooltip-module_displayFlex__PLv5m",
|
|
113
|
-
"displayInlineFlex": "Tooltip-module_displayInlineFlex__bRLEm"
|
|
114
|
-
};
|
|
115
|
-
var positionToPlacement = new Map([["above", "top"], ["below", "bottom"], ["left", "left"], ["right", "right"]]);
|
|
116
|
-
// Sync with Tooltip.scss
|
|
117
|
-
var arrowHeight = 7;
|
|
118
|
-
var arrowWidth = 14;
|
|
119
|
-
var TooltipContent = function (_a) {
|
|
120
|
-
var position = _a.position,
|
|
121
|
-
text = _a.text,
|
|
122
|
-
referenceElement = _a.referenceElement,
|
|
123
|
-
tooltipId = _a.tooltipId,
|
|
124
|
-
_b = _a.mood,
|
|
125
|
-
mood = _b === void 0 ? "default" : _b;
|
|
126
|
-
var _c = useState(null),
|
|
127
|
-
popperElement = _c[0],
|
|
128
|
-
setPopperElement = _c[1];
|
|
129
|
-
var _d = useState(null),
|
|
130
|
-
arrowElement = _d[0],
|
|
131
|
-
setArrowElement = _d[1];
|
|
132
|
-
var _e = usePopper(referenceElement, popperElement, {
|
|
133
|
-
modifiers: [{
|
|
134
|
-
name: "arrow",
|
|
135
|
-
options: {
|
|
136
|
-
element: arrowElement,
|
|
137
|
-
// Ensures that the arrow doesn't go too far to the left or right
|
|
138
|
-
// of the tooltip.
|
|
139
|
-
padding: arrowWidth / 2 + 10
|
|
140
|
-
}
|
|
141
|
-
}, {
|
|
142
|
-
name: "offset",
|
|
143
|
-
options: {
|
|
144
|
-
offset: [0, arrowHeight + 6]
|
|
145
|
-
}
|
|
146
|
-
}, {
|
|
147
|
-
name: "preventOverflow",
|
|
148
|
-
options: {
|
|
149
|
-
// Makes sure that the tooltip isn't flush up against the end of the
|
|
150
|
-
// viewport
|
|
151
|
-
padding: 8,
|
|
152
|
-
altAxis: true,
|
|
153
|
-
altBoundary: true,
|
|
154
|
-
tetherOffset: 50
|
|
155
|
-
}
|
|
156
|
-
}, {
|
|
157
|
-
name: "flip",
|
|
158
|
-
options: {
|
|
159
|
-
padding: 8,
|
|
160
|
-
altBoundary: true,
|
|
161
|
-
fallbackPlacements: ["left", "top", "bottom", "right"]
|
|
162
|
-
}
|
|
163
|
-
}],
|
|
164
|
-
placement: position ? positionToPlacement.get(position) : undefined
|
|
165
|
-
}),
|
|
166
|
-
popperStyles = _e.styles,
|
|
167
|
-
attributes = _e.attributes;
|
|
168
|
-
var _f = useAnimation(),
|
|
169
|
-
isVisible = _f.isVisible,
|
|
170
|
-
isAnimIn = _f.isAnimIn,
|
|
171
|
-
isAnimOut = _f.isAnimOut;
|
|
172
|
-
return isVisible || isAnimOut || isAnimIn ? ( /*#__PURE__*/React.createElement("div", __assign({
|
|
173
|
-
ref: setPopperElement,
|
|
174
|
-
className: styles.tooltip,
|
|
175
|
-
style: popperStyles.popper
|
|
176
|
-
}, attributes.popper, {
|
|
177
|
-
role: "tooltip",
|
|
178
|
-
id: tooltipId
|
|
179
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
180
|
-
className: classnames(styles.tooltipContent, styles[mood])
|
|
181
|
-
}, text), /*#__PURE__*/React.createElement("div", {
|
|
182
|
-
ref: setArrowElement,
|
|
183
|
-
className: styles.arrow,
|
|
184
|
-
style: popperStyles.arrow
|
|
185
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
186
|
-
className: styles.arrowInner
|
|
187
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
188
|
-
className: classnames(styles.arrowMain, styles[mood])
|
|
189
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
190
|
-
className: styles.arrowShadow
|
|
191
|
-
}))))) : null;
|
|
192
|
-
};
|
|
193
|
-
var renderChildren = function (content, tooltipId, hasActiveTooltip) {
|
|
194
|
-
if (isSemanticElement(content)) {
|
|
195
|
-
return /*#__PURE__*/cloneElement(content, {
|
|
196
|
-
"aria-describedby": hasActiveTooltip ? tooltipId : undefined
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
// We don't want to block them from this but just provide context for better a11y guidance
|
|
200
|
-
// eslint-disable-next-line no-console
|
|
201
|
-
console.warn("<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.");
|
|
202
|
-
return content;
|
|
203
|
-
};
|
|
204
|
-
const Tooltip = /*#__PURE__*/function () {
|
|
205
|
-
const Tooltip = function (_a) {
|
|
206
|
-
var children = _a.children,
|
|
207
|
-
text = _a.text,
|
|
208
|
-
_b = _a.display,
|
|
209
|
-
display = _b === void 0 ? "block" : _b,
|
|
210
|
-
_c = _a.position,
|
|
211
|
-
position = _c === void 0 ? "above" : _c,
|
|
212
|
-
classNameOverride = _a.classNameOverride,
|
|
213
|
-
portalSelector = _a.portalSelector,
|
|
214
|
-
animationDuration = _a.animationDuration,
|
|
215
|
-
_d = _a.isInitiallyVisible,
|
|
216
|
-
isInitiallyVisible = _d === void 0 ? false : _d,
|
|
217
|
-
_e = _a.mood,
|
|
218
|
-
mood = _e === void 0 ? "default" : _e;
|
|
219
|
-
var _f = useState(isInitiallyVisible),
|
|
220
|
-
isHover = _f[0],
|
|
221
|
-
setIsHover = _f[1];
|
|
222
|
-
var _g = useState(false),
|
|
223
|
-
isFocus = _g[0],
|
|
224
|
-
setIsFocus = _g[1];
|
|
225
|
-
var _h = useState(null),
|
|
226
|
-
referenceElement = _h[0],
|
|
227
|
-
setReferenceElement = _h[1];
|
|
228
|
-
var tooltipId = useId();
|
|
229
|
-
var hasActiveTooltip = isHover || isFocus;
|
|
230
|
-
var tooltip = /*#__PURE__*/React.createElement(TooltipContent, {
|
|
231
|
-
text: text,
|
|
232
|
-
position: position,
|
|
233
|
-
referenceElement: referenceElement,
|
|
234
|
-
tooltipId: tooltipId,
|
|
235
|
-
mood: mood
|
|
236
|
-
});
|
|
237
|
-
var portalSelectorElementRef = useRef(null);
|
|
238
|
-
useEffect(function () {
|
|
239
|
-
portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
|
|
240
|
-
}, [portalSelector]);
|
|
241
|
-
useEffect(function () {
|
|
242
|
-
if (portalSelector && !portalSelectorElementRef.current) {
|
|
243
|
-
// eslint-disable-next-line no-console
|
|
244
|
-
console.warn("The portal could not be created using the selector: " + portalSelector);
|
|
245
|
-
}
|
|
246
|
-
}, [portalSelectorElementRef, portalSelector]);
|
|
247
|
-
var getDisplayClassName = function () {
|
|
248
|
-
switch (display) {
|
|
249
|
-
case "inline":
|
|
250
|
-
return styles.displayInline;
|
|
251
|
-
case "block":
|
|
252
|
-
return styles.displayBlock;
|
|
253
|
-
case "inline-block":
|
|
254
|
-
return styles.displayInlineBlock;
|
|
255
|
-
case "flex":
|
|
256
|
-
return styles.displayFlex;
|
|
257
|
-
case "inline-flex":
|
|
258
|
-
return styles.displayInlineFlex;
|
|
259
|
-
default:
|
|
260
|
-
return undefined;
|
|
261
|
-
}
|
|
262
|
-
};
|
|
263
|
-
return /*#__PURE__*/React.createElement(AnimationProvider, {
|
|
264
|
-
isVisible: hasActiveTooltip,
|
|
265
|
-
animationDuration: animationDuration
|
|
266
|
-
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
267
|
-
ref: setReferenceElement,
|
|
268
|
-
className: classnames(classNameOverride, getDisplayClassName()),
|
|
269
|
-
onMouseEnter: function () {
|
|
270
|
-
return setIsHover(true);
|
|
271
|
-
},
|
|
272
|
-
onMouseLeave: function () {
|
|
273
|
-
return setIsHover(false);
|
|
274
|
-
},
|
|
275
|
-
onFocusCapture: function () {
|
|
276
|
-
return setIsFocus(true);
|
|
277
|
-
},
|
|
278
|
-
onBlurCapture: function () {
|
|
279
|
-
return setIsFocus(false);
|
|
280
|
-
}
|
|
281
|
-
}, renderChildren(children, tooltipId, hasActiveTooltip)), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(tooltip, portalSelectorElementRef.current) : tooltip));
|
|
282
|
-
};
|
|
283
|
-
Tooltip.displayName = "Tooltip";
|
|
284
|
-
return Tooltip;
|
|
285
|
-
}();
|
|
286
|
-
export { Tooltip as T };
|
package/dist/types/actionsV1.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export { M as Menu, a as MenuHeading, b as MenuItem, c as MenuList, S as StatelessMenu } from './index-hKXin_Zl.js';
|
|
2
|
-
export { B as Button, I as IconButton } from './IconButton-AN3AP9ja.js';
|
|
3
|
-
import 'tslib';
|
|
4
|
-
import 'react';
|
|
5
|
-
import 'react-dom';
|
|
6
|
-
import 'classnames';
|
|
7
|
-
import 'react-focus-on';
|
|
8
|
-
import 'react-popper';
|
|
9
|
-
import './Heading-Bq3fifM0.js';
|
|
10
|
-
import 'react-aria';
|
|
11
|
-
import 'react-aria-components';
|
package/dist/types/actionsV2.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { B as Button, I as IconButton, M as Menu, b as MenuDropdown, d as MenuHeading, c as MenuItem, a as MenuList, S as StatelessMenu } from './IconButton-AN3AP9ja.js';
|
|
2
|
-
import 'tslib';
|
|
3
|
-
import 'react';
|
|
4
|
-
import 'react-dom';
|
|
5
|
-
import 'classnames';
|
|
6
|
-
import 'react-focus-on';
|
|
7
|
-
import 'react-popper';
|
|
8
|
-
import './Heading-Bq3fifM0.js';
|
|
9
|
-
import 'react-aria';
|
|
10
|
-
import 'react-aria-components';
|
package/dist/types/actionsV3.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { __rest, __assign } from 'tslib';
|
|
2
|
-
import React, { forwardRef } from 'react';
|
|
3
|
-
import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger as MenuTrigger$1, Button as Button$1 } from 'react-aria-components';
|
|
4
|
-
import { m as mergeClassNames } from './mergeClassNames-BuzaWRqN.js';
|
|
5
|
-
import { u as useReversedColors } from './ReversedColors-D9BxpiSS.js';
|
|
6
|
-
import 'classnames';
|
|
7
|
-
var styles$2 = {
|
|
8
|
-
"menu": "Menu-module_menu__AowD8"
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* A menu displays a list of actions or options that a user can choose.
|
|
13
|
-
*/
|
|
14
|
-
var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
15
|
-
var className = _a.className,
|
|
16
|
-
props = __rest(_a, ["className"]);
|
|
17
|
-
return /*#__PURE__*/React.createElement(Menu$1, __assign({
|
|
18
|
-
className: mergeClassNames(styles$2.menu, className),
|
|
19
|
-
ref: ref
|
|
20
|
-
}, props));
|
|
21
|
-
});
|
|
22
|
-
var styles$1 = {
|
|
23
|
-
"item": "MenuItem-module_item__uImZI",
|
|
24
|
-
"flexWrapper": "MenuItem-module_flexWrapper__hiXro",
|
|
25
|
-
"iconWrapper": "MenuItem-module_iconWrapper__QoZgd"
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* A MenuItem represents an individual action in a Menu.
|
|
30
|
-
*/
|
|
31
|
-
var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
32
|
-
var className = _a.className,
|
|
33
|
-
icon = _a.icon,
|
|
34
|
-
children = _a.children,
|
|
35
|
-
textValue = _a.textValue,
|
|
36
|
-
props = __rest(_a, ["className", "icon", "children", "textValue"]);
|
|
37
|
-
var determinedTextValue = textValue || (typeof children === "string" ? children : undefined);
|
|
38
|
-
return /*#__PURE__*/React.createElement(MenuItem$1, __assign({
|
|
39
|
-
ref: ref,
|
|
40
|
-
className: mergeClassNames(styles$1.item, className),
|
|
41
|
-
textValue: determinedTextValue
|
|
42
|
-
}, props), /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "string" && icon ? ( /*#__PURE__*/React.createElement("div", {
|
|
43
|
-
className: styles$1.flexWrapper
|
|
44
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
45
|
-
className: styles$1.iconWrapper
|
|
46
|
-
}, icon), children)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, children))));
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* A MenuTrigger adds open/close functionality when wrapping a Button and a Popover (with a Menu inside of the Popover)
|
|
51
|
-
*/
|
|
52
|
-
var MenuTrigger = function (props) {
|
|
53
|
-
return /*#__PURE__*/React.createElement(MenuTrigger$1, __assign({}, props));
|
|
54
|
-
};
|
|
55
|
-
var styles = {
|
|
56
|
-
"button": "Button-module_button__QOSYH",
|
|
57
|
-
"default": "Button-module_default__gSx3e",
|
|
58
|
-
"reversed": "Button-module_reversed__DT-Id",
|
|
59
|
-
"small": "Button-module_small__S-t5B"
|
|
60
|
-
};
|
|
61
|
-
var Button = function (_a) {
|
|
62
|
-
var _b = _a.variant,
|
|
63
|
-
variant = _b === void 0 ? "default" : _b,
|
|
64
|
-
className = _a.className,
|
|
65
|
-
_c = _a.size,
|
|
66
|
-
size = _c === void 0 ? "medium" : _c,
|
|
67
|
-
children = _a.children,
|
|
68
|
-
otherProps = __rest(_a, ["variant", "className", "size", "children"]);
|
|
69
|
-
var isReversed = useReversedColors();
|
|
70
|
-
return /*#__PURE__*/React.createElement(Button$1, __assign({
|
|
71
|
-
className: mergeClassNames(styles.button, styles[variant], styles[size], isReversed && styles.reversed, className)
|
|
72
|
-
}, otherProps), children);
|
|
73
|
-
};
|
|
74
|
-
export { Button, Menu, MenuItem, MenuTrigger };
|
package/dist/types/future.js
DELETED
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import { g as getDisabledKeysFromItems, t as transformSelectItemToCollectionElement, S as SelectToggle, P as Popover, a as SelectProvider, b as SelectPopoverContents, F as FieldMessage, L as ListBoxSection, c as SectionDivider, O as Option, d as ListItem, e as ListBox } from './RemovableTag-CIqQvZuu.js';
|
|
2
|
-
export { I as Icon, R as RemovableTag, T as Tag } from './RemovableTag-CIqQvZuu.js';
|
|
3
|
-
import { __rest, __assign } from 'tslib';
|
|
4
|
-
import React, { useId, useState, useEffect } from 'react';
|
|
5
|
-
import { useButton } from '@react-aria/button';
|
|
6
|
-
import { useSelect, HiddenSelect } from '@react-aria/select';
|
|
7
|
-
import { useSelectState } from '@react-stately/select';
|
|
8
|
-
import classnames from 'classnames';
|
|
9
|
-
import { useFloating } from '@floating-ui/react-dom';
|
|
10
|
-
import { Tabs as Tabs$1, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'react-aria-components';
|
|
11
|
-
import { B as Badge } from './Heading-Bq3fifM0.js';
|
|
12
|
-
import '@react-aria/listbox';
|
|
13
|
-
import 'react-aria';
|
|
14
|
-
import '@react-aria/focus';
|
|
15
|
-
import '@react-aria/overlays';
|
|
16
|
-
import '@react-stately/collections';
|
|
17
|
-
import 'react-dom';
|
|
18
|
-
import 'react-focus-on';
|
|
19
|
-
var styles$2 = {
|
|
20
|
-
"container": "Select-module_container__TaMKg",
|
|
21
|
-
"notFullWidth": "Select-module_notFullWidth__Mr-3G"
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
|
|
26
|
-
* {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
|
|
27
|
-
*/
|
|
28
|
-
const Select = /*#__PURE__*/function () {
|
|
29
|
-
const Select = function (_a) {
|
|
30
|
-
var _b;
|
|
31
|
-
var label = _a.label,
|
|
32
|
-
items = _a.items,
|
|
33
|
-
propsId = _a.id,
|
|
34
|
-
trigger = _a.trigger,
|
|
35
|
-
children = _a.children,
|
|
36
|
-
status = _a.status,
|
|
37
|
-
validationMessage = _a.validationMessage,
|
|
38
|
-
isReversed = _a.isReversed,
|
|
39
|
-
isFullWidth = _a.isFullWidth,
|
|
40
|
-
disabledValues = _a.disabledValues,
|
|
41
|
-
classNameOverride = _a.classNameOverride,
|
|
42
|
-
selectedKey = _a.selectedKey,
|
|
43
|
-
description = _a.description,
|
|
44
|
-
_c = _a.placeholder,
|
|
45
|
-
placeholder = _c === void 0 ? "" : _c,
|
|
46
|
-
isDisabled = _a.isDisabled,
|
|
47
|
-
portalContainerId = _a.portalContainerId,
|
|
48
|
-
restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
|
|
49
|
-
var refs = useFloating().refs;
|
|
50
|
-
var triggerRef = refs.reference;
|
|
51
|
-
var id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
52
|
-
var descriptionId = "".concat(id, "--description");
|
|
53
|
-
var popoverId = "".concat(id, "--popover");
|
|
54
|
-
var disabledKeys = getDisabledKeysFromItems(items);
|
|
55
|
-
var ariaSelectProps = __assign({
|
|
56
|
-
label: label,
|
|
57
|
-
items: items,
|
|
58
|
-
children: transformSelectItemToCollectionElement,
|
|
59
|
-
disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
|
|
60
|
-
selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey,
|
|
61
|
-
description: description,
|
|
62
|
-
placeholder: placeholder,
|
|
63
|
-
isDisabled: isDisabled
|
|
64
|
-
}, restProps);
|
|
65
|
-
var state = useSelectState(ariaSelectProps);
|
|
66
|
-
var _d = useSelect(ariaSelectProps, state, triggerRef),
|
|
67
|
-
labelProps = _d.labelProps,
|
|
68
|
-
reactAriaTriggerProps = _d.triggerProps,
|
|
69
|
-
valueProps = _d.valueProps,
|
|
70
|
-
menuProps = _d.menuProps,
|
|
71
|
-
errorMessageProps = _d.errorMessageProps,
|
|
72
|
-
descriptionProps = _d.descriptionProps;
|
|
73
|
-
// Hack incoming:
|
|
74
|
-
// react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
|
|
75
|
-
// We use role=combobox, meaning screen readers will read the value.
|
|
76
|
-
// So we're modifying the `aria-labelledby` property to remove the value element id.
|
|
77
|
-
// Issue: https://github.com/adobe/react-spectrum/issues/4091
|
|
78
|
-
var reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"];
|
|
79
|
-
var triggerProps = __assign(__assign({}, reactAriaTriggerProps), {
|
|
80
|
-
"aria-labelledby": reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(" ") + 1)
|
|
81
|
-
});
|
|
82
|
-
var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
|
|
83
|
-
var selectToggleProps = __assign(__assign({}, buttonProps), {
|
|
84
|
-
label: label,
|
|
85
|
-
labelProps: labelProps,
|
|
86
|
-
value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
|
|
87
|
-
valueProps: valueProps,
|
|
88
|
-
isOpen: state.isOpen,
|
|
89
|
-
placeholder: placeholder,
|
|
90
|
-
status: status,
|
|
91
|
-
isDisabled: triggerProps.isDisabled,
|
|
92
|
-
isReversed: isReversed,
|
|
93
|
-
ref: refs.setReference
|
|
94
|
-
});
|
|
95
|
-
var _e = useState(),
|
|
96
|
-
portalContainer = _e[0],
|
|
97
|
-
setPortalContainer = _e[1];
|
|
98
|
-
useEffect(function () {
|
|
99
|
-
if (portalContainerId) {
|
|
100
|
-
var portalElement = document.getElementById(portalContainerId);
|
|
101
|
-
portalElement && setPortalContainer(portalElement);
|
|
102
|
-
}
|
|
103
|
-
}, []);
|
|
104
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
105
|
-
className: classnames(!isFullWidth && styles$2.notFullWidth, classNameOverride)
|
|
106
|
-
}, /*#__PURE__*/React.createElement(HiddenSelect, {
|
|
107
|
-
label: label,
|
|
108
|
-
name: id,
|
|
109
|
-
state: state,
|
|
110
|
-
triggerRef: triggerRef
|
|
111
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
112
|
-
className: styles$2.container
|
|
113
|
-
}, trigger === undefined ? ( /*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && ( /*#__PURE__*/React.createElement(Popover, {
|
|
114
|
-
id: popoverId,
|
|
115
|
-
portalContainer: portalContainer,
|
|
116
|
-
refs: refs
|
|
117
|
-
}, /*#__PURE__*/React.createElement(SelectProvider, {
|
|
118
|
-
state: state
|
|
119
|
-
}, /*#__PURE__*/React.createElement(SelectPopoverContents, {
|
|
120
|
-
menuProps: menuProps
|
|
121
|
-
}, children))))), validationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
|
|
122
|
-
message: validationMessage,
|
|
123
|
-
status: status,
|
|
124
|
-
reversed: isReversed
|
|
125
|
-
}))), description && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({}, descriptionProps, {
|
|
126
|
-
id: descriptionId,
|
|
127
|
-
message: description,
|
|
128
|
-
reversed: isReversed
|
|
129
|
-
}))));
|
|
130
|
-
};
|
|
131
|
-
Select.displayName = "Select";
|
|
132
|
-
Select.Section = ListBoxSection;
|
|
133
|
-
Select.SectionDivider = SectionDivider;
|
|
134
|
-
Select.Option = Option;
|
|
135
|
-
Select.ItemDefaultRender = ListItem;
|
|
136
|
-
// @deprecated Legacy exported aliases
|
|
137
|
-
Select.TriggerButton = SelectToggle;
|
|
138
|
-
Select.ListBox = ListBox;
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
|
|
142
|
-
* {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
|
|
143
|
-
*
|
|
144
|
-
* Wrapper around all of the tab subcomponents
|
|
145
|
-
* Holds a TabList and TabPanels
|
|
146
|
-
*/
|
|
147
|
-
return Select;
|
|
148
|
-
}();
|
|
149
|
-
var Tabs = function (props) {
|
|
150
|
-
return /*#__PURE__*/React.createElement(Tabs$1, __assign({}, props));
|
|
151
|
-
};
|
|
152
|
-
var styles$1 = {
|
|
153
|
-
"tab": "Tab-module_tab__-XtyL",
|
|
154
|
-
"badge": "Tab-module_badge__Zfili"
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* A tab button
|
|
159
|
-
*/
|
|
160
|
-
var Tab = function (props) {
|
|
161
|
-
var badge = props.badge,
|
|
162
|
-
children = props.children,
|
|
163
|
-
className = props.className,
|
|
164
|
-
restProps = __rest(props, ["badge", "children", "className"]);
|
|
165
|
-
var tabProps = __assign({
|
|
166
|
-
className: classnames(styles$1.tab, className)
|
|
167
|
-
}, restProps);
|
|
168
|
-
return /*#__PURE__*/React.createElement(Tab$1, __assign({}, tabProps), function (_a) {
|
|
169
|
-
var isSelected = _a.isSelected,
|
|
170
|
-
isFocusVisible = _a.isFocusVisible,
|
|
171
|
-
isHovered = _a.isHovered;
|
|
172
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, children, badge && ( /*#__PURE__*/React.createElement("span", {
|
|
173
|
-
className: styles$1.badge
|
|
174
|
-
}, /*#__PURE__*/React.createElement(Badge, {
|
|
175
|
-
variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
|
|
176
|
-
}, badge))));
|
|
177
|
-
});
|
|
178
|
-
};
|
|
179
|
-
var styles = {
|
|
180
|
-
"tabList": "TabList-module_tabList__e1qAi",
|
|
181
|
-
"noPadding": "TabList-module_noPadding__YM23K"
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
* Wrapper for the tabs themselves
|
|
186
|
-
*/
|
|
187
|
-
var TabList = function (props) {
|
|
188
|
-
var ariaLabel = props["aria-label"],
|
|
189
|
-
_a = props.noPadding,
|
|
190
|
-
noPadding = _a === void 0 ? false : _a,
|
|
191
|
-
children = props.children,
|
|
192
|
-
className = props.className,
|
|
193
|
-
restProps = __rest(props, ["aria-label", "noPadding", "children", "className"]);
|
|
194
|
-
return /*#__PURE__*/React.createElement(TabList$1, __assign({
|
|
195
|
-
"aria-label": ariaLabel,
|
|
196
|
-
className: classnames(styles.tabList, className, noPadding && styles.noPadding)
|
|
197
|
-
}, restProps), children);
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Wrapper for the content that shows when tab is active
|
|
202
|
-
*/
|
|
203
|
-
var TabPanel = function (props) {
|
|
204
|
-
var className = props.className,
|
|
205
|
-
children = props.children,
|
|
206
|
-
restProps = __rest(props, ["className", "children"]);
|
|
207
|
-
return /*#__PURE__*/React.createElement(TabPanel$1, __assign({
|
|
208
|
-
className: className
|
|
209
|
-
}, restProps), children);
|
|
210
|
-
};
|
|
211
|
-
export { Select, Tab, TabList, TabPanel, Tabs };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { M as Menu$1, d as MenuHeading$1, c as MenuItem$1, a as MenuList$1, S as StatelessMenu$1 } from './IconButton-AN3AP9ja.js';
|
|
2
|
-
|
|
3
|
-
// Since we can't add a deprecation flag on a * export
|
|
4
|
-
// Note: deprecate all of these once we have Button v3
|
|
5
|
-
var Menu = Menu$1;
|
|
6
|
-
var MenuHeading = MenuHeading$1;
|
|
7
|
-
var MenuItem = MenuItem$1;
|
|
8
|
-
var MenuList = MenuList$1;
|
|
9
|
-
var StatelessMenu = StatelessMenu$1;
|
|
10
|
-
export { Menu as M, StatelessMenu as S, MenuHeading as a, MenuItem as b, MenuList as c };
|