@primer/components 0.0.0-2021829163659 → 0.0.0-20218292130

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 (102) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/dist/browser.esm.js +9 -10
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +24 -25
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +16 -4
  7. package/lib/ActionList/Item.js +9 -6
  8. package/lib/ActionList/List.d.ts +11 -7
  9. package/lib/ActionList/List.js +2 -2
  10. package/lib/ActionList/index.d.ts +1 -2
  11. package/lib/FilteredActionList/FilteredActionList.js +31 -5
  12. package/lib/Overlay.d.ts +1 -2
  13. package/lib/Overlay.js +5 -10
  14. package/lib/SelectMenu/SelectMenu.d.ts +2 -8
  15. package/lib/TextInput.d.ts +3 -6
  16. package/lib/TextInput.js +10 -9
  17. package/lib/hooks/useOverlay.d.ts +1 -2
  18. package/lib/hooks/useOverlay.js +6 -11
  19. package/lib/utils/types.d.ts +0 -3
  20. package/lib-esm/ActionList/Item.d.ts +16 -4
  21. package/lib-esm/ActionList/Item.js +8 -5
  22. package/lib-esm/ActionList/List.d.ts +11 -7
  23. package/lib-esm/ActionList/List.js +2 -2
  24. package/lib-esm/ActionList/index.d.ts +1 -2
  25. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  26. package/lib-esm/Overlay.d.ts +1 -2
  27. package/lib-esm/Overlay.js +5 -8
  28. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
  29. package/lib-esm/TextInput.d.ts +3 -6
  30. package/lib-esm/TextInput.js +9 -8
  31. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  32. package/lib-esm/hooks/useOverlay.js +6 -11
  33. package/lib-esm/utils/types.d.ts +0 -3
  34. package/package.json +3 -5
  35. package/lib/Autocomplete/Autocomplete.d.ts +0 -31
  36. package/lib/Autocomplete/Autocomplete.js +0 -60
  37. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -14
  38. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  39. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  40. package/lib/Autocomplete/AutocompleteInput.js +0 -148
  41. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -70
  42. package/lib/Autocomplete/AutocompleteMenu.js +0 -250
  43. package/lib/Autocomplete/index.d.ts +0 -2
  44. package/lib/Autocomplete/index.js +0 -15
  45. package/lib/Badge/Badge.d.ts +0 -8
  46. package/lib/Badge/Badge.js +0 -59
  47. package/lib/Badge/BadgeState.d.ts +0 -13
  48. package/lib/Badge/BadgeState.js +0 -51
  49. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  50. package/lib/Badge/_badgeStyleUtils.js +0 -39
  51. package/lib/TextInputTokens.d.ts +0 -43
  52. package/lib/TextInputTokens.js +0 -237
  53. package/lib/Token/Token.d.ts +0 -14
  54. package/lib/Token/Token.js +0 -75
  55. package/lib/Token/TokenBase.d.ts +0 -16
  56. package/lib/Token/TokenBase.js +0 -90
  57. package/lib/Token/TokenLabel.d.ts +0 -14
  58. package/lib/Token/TokenLabel.js +0 -135
  59. package/lib/Token/TokenProfile.d.ts +0 -7
  60. package/lib/Token/TokenProfile.js +0 -50
  61. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  62. package/lib/Token/_RemoveTokenButton.js +0 -45
  63. package/lib/Token/_tokenButtonUtils.d.ts +0 -10
  64. package/lib/Token/_tokenButtonUtils.js +0 -42
  65. package/lib/_UnstyledTextInput.d.ts +0 -2
  66. package/lib/_UnstyledTextInput.js +0 -20
  67. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  68. package/lib/utils/scrollIntoViewingArea.js +0 -39
  69. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -31
  70. package/lib-esm/Autocomplete/Autocomplete.js +0 -40
  71. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -14
  72. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  73. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  74. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -129
  75. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -70
  76. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -224
  77. package/lib-esm/Autocomplete/index.d.ts +0 -2
  78. package/lib-esm/Autocomplete/index.js +0 -1
  79. package/lib-esm/Badge/Badge.d.ts +0 -8
  80. package/lib-esm/Badge/Badge.js +0 -44
  81. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  82. package/lib-esm/Badge/BadgeState.js +0 -40
  83. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  84. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  85. package/lib-esm/TextInputTokens.d.ts +0 -43
  86. package/lib-esm/TextInputTokens.js +0 -210
  87. package/lib-esm/Token/Token.d.ts +0 -14
  88. package/lib-esm/Token/Token.js +0 -56
  89. package/lib-esm/Token/TokenBase.d.ts +0 -16
  90. package/lib-esm/Token/TokenBase.js +0 -70
  91. package/lib-esm/Token/TokenLabel.d.ts +0 -14
  92. package/lib-esm/Token/TokenLabel.js +0 -115
  93. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  94. package/lib-esm/Token/TokenProfile.js +0 -29
  95. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  96. package/lib-esm/Token/_RemoveTokenButton.js +0 -30
  97. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -10
  98. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  99. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  100. package/lib-esm/_UnstyledTextInput.js +0 -7
  101. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  102. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
@@ -1,237 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _props = require("@styled-system/props");
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _focusZone = require("./behaviors/focusZone");
15
-
16
- var _useCombinedRefs = require("./hooks/useCombinedRefs");
17
-
18
- var _useFocusZone = require("./hooks/useFocusZone");
19
-
20
- var _Token = _interopRequireDefault(require("./Token/Token"));
21
-
22
- var _TextInput = _interopRequireDefault(require("./TextInput"));
23
-
24
- var _hooks = require("./hooks");
25
-
26
- var _UnstyledTextInput = _interopRequireDefault(require("./_UnstyledTextInput"));
27
-
28
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
-
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
33
-
34
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
35
-
36
- const InputWrapper = _styledComponents.default.div.withConfig({
37
- displayName: "TextInputTokens__InputWrapper",
38
- componentId: "sc-1k54xiz-0"
39
- })(["order:1;flex-grow:1;"]);
40
-
41
- // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
42
- const TextInputWithTokensComponent = /*#__PURE__*/_react.default.forwardRef(({
43
- icon: IconComponent,
44
- contrast,
45
- className,
46
- block,
47
- disabled,
48
- theme,
49
- sx: sxProp,
50
- tokens,
51
- onTokenRemove,
52
- tokenComponent: TokenComponent,
53
- preventTokenWrapping,
54
- tokenSizeVariant,
55
- hideTokenRemoveButtons,
56
- selectedTokenIdx,
57
- setSelectedTokenIdx,
58
- ...rest
59
- }, externalRef) => {
60
- const ref = (0, _hooks.useProvidedRefOrCreate)(externalRef);
61
- const {
62
- onFocus,
63
- onKeyDown,
64
- ...inputPropsRest
65
- } = (0, _props.omit)(rest);
66
-
67
- const handleTokenFocus = tokenIdx => () => {
68
- setSelectedTokenIdx(tokenIdx);
69
- };
70
-
71
- const handleTokenBlur = () => {
72
- setSelectedTokenIdx(undefined);
73
- };
74
-
75
- const handleTokenKeyUp = e => {
76
- if (e.key === 'Escape') {
77
- var _ref$current;
78
-
79
- ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
80
- }
81
- };
82
-
83
- const handleInputFocus = e => {
84
- onFocus && onFocus(e);
85
- setSelectedTokenIdx(undefined);
86
- };
87
-
88
- const handleInputKeyDown = e => {
89
- var _ref$current2;
90
-
91
- if (onKeyDown) {
92
- onKeyDown(e);
93
- }
94
-
95
- if (ref !== null && ref !== void 0 && (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
96
- return;
97
- }
98
-
99
- const lastToken = tokens[tokens.length - 1];
100
-
101
- if (e.key === 'Backspace' && lastToken) {
102
- onTokenRemove(lastToken.id);
103
-
104
- if (ref !== null && ref !== void 0 && ref.current) {
105
- // TODO: eliminate the first hack by making changes to the Autocomplete component
106
- // COLEHELP
107
- //
108
- // HACKS:
109
- // 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
110
- // highlight behavior doesn't work correctly if we update the value with a setState action in onChange
111
- // 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
112
- ref.current.value = `${lastToken.text} `;
113
- } // HACK: for some reason we need to wait a tick for `.select()` to work
114
-
115
-
116
- setTimeout(() => {
117
- var _ref$current3;
118
-
119
- ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
120
- }, 1);
121
- }
122
- };
123
-
124
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InputWrapper, {
125
- key: "inputWrapper"
126
- }, /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
127
- ref: ref,
128
- disabled: disabled,
129
- onFocus: handleInputFocus,
130
- onKeyDown: handleInputKeyDown,
131
- type: "text",
132
- sx: {
133
- height: '100%'
134
- }
135
- }, inputPropsRest))), tokens !== null && tokens !== void 0 && tokens.length && TokenComponent ? tokens.map(({
136
- id,
137
- ...tokenRest
138
- }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
139
- key: id,
140
- onFocus: handleTokenFocus(i),
141
- onBlur: handleTokenBlur,
142
- onKeyUp: handleTokenKeyUp,
143
- isSelected: selectedTokenIdx === i,
144
- handleRemove: () => {
145
- onTokenRemove(id);
146
- },
147
- hideRemoveButton: hideTokenRemoveButtons,
148
- variant: tokenSizeVariant,
149
- tabIndex: 0
150
- }, tokenRest))) : null);
151
- });
152
-
153
- const TextInputWithTokens = /*#__PURE__*/_react.default.forwardRef(({
154
- tokens,
155
- onTokenRemove,
156
- sx: sxProp,
157
- ...props
158
- }, ref) => {
159
- const localInputRef = (0, _react.useRef)(null);
160
- const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
161
- const [selectedTokenIdx, setSelectedTokenIdx] = (0, _react.useState)();
162
- const {
163
- containerRef
164
- } = (0, _useFocusZone.useFocusZone)({
165
- focusOutBehavior: 'wrap',
166
- bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
167
- focusableElementFilter: element => {
168
- return !element.getAttributeNames().includes('aria-hidden');
169
- },
170
- getNextFocusable: direction => {
171
- var _containerRef$current;
172
-
173
- if (!selectedTokenIdx && selectedTokenIdx !== 0) {
174
- return undefined;
175
- }
176
-
177
- let nextIndex = selectedTokenIdx + 1; // "+ 1" accounts for the first element: the text input
178
-
179
- if (direction === 'next') {
180
- nextIndex += 1;
181
- }
182
-
183
- if (direction === 'previous') {
184
- nextIndex -= 1;
185
- }
186
-
187
- if (nextIndex > tokens.length || nextIndex < 1) {
188
- return combinedInputRef.current || undefined;
189
- }
190
-
191
- return containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
192
- }
193
- }, [selectedTokenIdx]);
194
-
195
- const handleTokenRemove = tokenId => {
196
- onTokenRemove(tokenId);
197
-
198
- if (selectedTokenIdx) {
199
- var _containerRef$current2;
200
-
201
- const nextElementToFocus = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIdx];
202
- nextElementToFocus.focus();
203
- }
204
- };
205
-
206
- return /*#__PURE__*/_react.default.createElement(_TextInput.default, _extends({
207
- ref: combinedInputRef,
208
- wrapperRef: containerRef,
209
- as: TextInputWithTokensComponent,
210
- selectedTokenIdx: selectedTokenIdx,
211
- setSelectedTokenIdx: setSelectedTokenIdx,
212
- tokens: tokens,
213
- onTokenRemove: handleTokenRemove,
214
- sx: {
215
- 'alignItems': props.preventTokenWrapping ? 'center' : undefined,
216
- 'flexWrap': props.preventTokenWrapping ? 'nowrap' : 'wrap',
217
- 'gap': '0.25rem',
218
- '> *': {
219
- 'flexShrink': 0
220
- },
221
- ...(props.block ? {
222
- display: 'flex',
223
- width: '100%'
224
- } : {}),
225
- ...sxProp
226
- }
227
- }, props));
228
- });
229
-
230
- TextInputWithTokens.defaultProps = {
231
- tokenComponent: _Token.default,
232
- tokenSizeVariant: "xl",
233
- hideTokenRemoveButtons: false
234
- };
235
- TextInputWithTokens.displayName = 'TextInputWithTokens';
236
- var _default = TextInputWithTokens;
237
- exports.default = _default;
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { TokenBaseProps } from './TokenBase';
3
- export interface TokenProps extends TokenBaseProps {
4
- /**
5
- * A function that renders a component before the token text
6
- */
7
- leadingVisual?: React.FunctionComponent<any>;
8
- /**
9
- * Whether the remove button should be rendered in the token
10
- */
11
- hideRemoveButton?: boolean;
12
- }
13
- declare const Token: React.ForwardRefExoticComponent<Pick<TokenProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "leadingVisual" | "handleRemove" | "isSelected" | "hideRemoveButton"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
14
- export default Token;
@@ -1,75 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _constants = require("../constants");
13
-
14
- var _TokenBase = _interopRequireWildcard(require("./TokenBase"));
15
-
16
- var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
-
22
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
24
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
25
-
26
- const tokenBorderWidthPx = 1;
27
- const DefaultTokenStyled = (0, _styledComponents.default)(_TokenBase.default).withConfig({
28
- displayName: "Token__DefaultTokenStyled",
29
- componentId: "sc-1dg52pw-0"
30
- })(["background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";max-width:100%;padding-right:", ";&:hover{background-color:", ";box-shadow:", ";color:", ";}"], (0, _constants.get)('colors.neutral.subtle'), props => props.isSelected ? (0, _constants.get)('colors.fg.default') : (0, _constants.get)('colors.border.subtle'), props => props.isSelected ? (0, _constants.get)('colors.fg.default') : (0, _constants.get)('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, props => (0, _TokenBase.isTokenInteractive)(props) ? (0, _constants.get)('colors.neutral.muted') : undefined, props => (0, _TokenBase.isTokenInteractive)(props) ? (0, _constants.get)('colors.shadow.medium') : undefined, props => (0, _TokenBase.isTokenInteractive)(props) ? (0, _constants.get)('colors.fg.default') : undefined);
31
- const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
32
- displayName: "Token__TokenTextContainer",
33
- componentId: "sc-1dg52pw-1"
34
- })(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
35
- const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
36
- displayName: "Token__LeadingVisualContainer",
37
- componentId: "sc-1dg52pw-2"
38
- })(["flex-shrink:0;line-height:0;"]);
39
- const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
40
- const {
41
- as,
42
- handleRemove,
43
- id,
44
- leadingVisual: LeadingVisual,
45
- ref,
46
- text,
47
- variant,
48
- hideRemoveButton,
49
- ...rest
50
- } = props;
51
- const hasMultipleActionTargets = (0, _TokenBase.isTokenInteractive)(props) && Boolean(handleRemove) && !hideRemoveButton;
52
-
53
- const handleRemoveClick = e => {
54
- e.stopPropagation();
55
- handleRemove && handleRemove();
56
- };
57
-
58
- return /*#__PURE__*/_react.default.createElement(DefaultTokenStyled, _extends({
59
- as: as,
60
- hideRemoveButton: hideRemoveButton || !handleRemove,
61
- id: id === null || id === void 0 ? void 0 : id.toString(),
62
- text: text,
63
- ref: forwardedRef,
64
- variant: variant
65
- }, rest), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
66
- borderOffset: tokenBorderWidthPx,
67
- parentTokenTag: as || 'span',
68
- onClick: handleRemoveClick,
69
- variant: variant,
70
- parentTokenIsInteractive: (0, _TokenBase.isTokenInteractive)(props),
71
- "aria-hidden": hasMultipleActionTargets ? "true" : "false"
72
- }) : null);
73
- });
74
- var _default = Token;
75
- exports.default = _default;
@@ -1,16 +0,0 @@
1
- /// <reference types="react" />
2
- export declare type TokenSizeKeys = 'sm' | 'md' | 'lg' | 'xl';
3
- export declare const tokenSizes: Record<TokenSizeKeys, number>;
4
- export declare const defaultTokenSize = "md";
5
- export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
6
- as?: 'button' | 'a' | 'span';
7
- handleRemove?: () => void;
8
- isSelected?: boolean;
9
- tabIndex?: number;
10
- text: string;
11
- id?: number | string;
12
- variant?: TokenSizeKeys;
13
- }
14
- export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
15
- declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps, never>;
16
- export default TokenBase;
@@ -1,90 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.isTokenInteractive = exports.defaultTokenSize = exports.tokenSizes = void 0;
7
-
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
- var _styledSystem = require("styled-system");
11
-
12
- var _constants = require("../constants");
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- const tokenSizes = {
17
- sm: 16,
18
- md: 20,
19
- lg: 24,
20
- xl: 32
21
- };
22
- exports.tokenSizes = tokenSizes;
23
- const defaultTokenSize = 'md';
24
- exports.defaultTokenSize = defaultTokenSize;
25
-
26
- const isTokenInteractive = ({
27
- as = 'span',
28
- onClick,
29
- onFocus,
30
- tabIndex = -1
31
- }) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
32
-
33
- exports.isTokenInteractive = isTokenInteractive;
34
- const variants = (0, _styledSystem.variant)({
35
- variants: {
36
- sm: {
37
- fontSize: 0,
38
- gap: 1,
39
- height: `${tokenSizes.sm}px`,
40
- paddingLeft: 1,
41
- paddingRight: 1
42
- },
43
- md: {
44
- fontSize: 0,
45
- gap: 1,
46
- height: `${tokenSizes.md}px`,
47
- paddingLeft: 2,
48
- paddingRight: 2
49
- },
50
- lg: {
51
- fontSize: 0,
52
- gap: 2,
53
- height: `${tokenSizes.lg}px`,
54
- paddingLeft: 2,
55
- paddingRight: 2
56
- },
57
- xl: {
58
- fontSize: 1,
59
- gap: 2,
60
- height: `${tokenSizes.xl}px`,
61
- paddingLeft: 3,
62
- paddingRight: 3
63
- }
64
- }
65
- });
66
-
67
- const TokenBase = _styledComponents.default.span.attrs(({
68
- text,
69
- handleRemove,
70
- onKeyUp
71
- }) => ({
72
- onKeyUp: e => {
73
- onKeyUp && onKeyUp(e);
74
-
75
- if ((e.key === 'Backspace' || e.key === 'Delete') && handleRemove) {
76
- handleRemove();
77
- }
78
- },
79
- 'aria-label': handleRemove ? `${text}, press backspace or delete to remove` : undefined
80
- })).withConfig({
81
- displayName: "TokenBase",
82
- componentId: "opajvp-0"
83
- })(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', (0, _constants.get)('fontWeights.bold'), variants);
84
-
85
- TokenBase.defaultProps = {
86
- as: 'span',
87
- variant: defaultTokenSize
88
- };
89
- var _default = TokenBase;
90
- exports.default = _default;
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { TokenBaseProps } from './TokenBase';
3
- export interface TokenLabelProps extends TokenBaseProps {
4
- /**
5
- * The color that corresponds to the label
6
- */
7
- fillColor?: string;
8
- /**
9
- * Whether the remove button should be rendered in the token
10
- */
11
- hideRemoveButton?: boolean;
12
- }
13
- declare const TokenLabel: React.ForwardRefExoticComponent<Pick<TokenLabelProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "handleRemove" | "isSelected" | "hideRemoveButton" | "fillColor"> & React.RefAttributes<HTMLElement>>;
14
- export default TokenLabel;
@@ -1,135 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
-
12
- var _TokenBase = _interopRequireWildcard(require("./TokenBase"));
13
-
14
- var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
15
-
16
- var _tinycolor = _interopRequireDefault(require("tinycolor2"));
17
-
18
- var _ThemeProvider = require("../ThemeProvider");
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
-
24
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
-
26
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
-
28
- const colorModeConfigs = {
29
- dark: {
30
- bgOpacity: 0.18,
31
- borderThreshold: 0,
32
- borderOpacity: 0.3,
33
- lightnessThreshold: 0.6
34
- },
35
- light: {
36
- bgOpacity: 1,
37
- borderThreshold: 0.96,
38
- borderOpacity: 1,
39
- lightnessThreshold: 0.453
40
- }
41
- };
42
- const tokenBorderWidthPx = 1;
43
- const StyledTokenLabel = (0, _styledComponents.default)(_TokenBase.default).withConfig({
44
- displayName: "TokenLabel__StyledTokenLabel",
45
- componentId: "sc-1bdmgzv-0"
46
- })(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";color:", ";padding-right:", ";position:relative;", ""], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.textColor, props => !props.hideRemoveButton ? 0 : undefined, props => {
47
- if (props.isSelected) {
48
- return (0, _styledComponents.css)(["&:after{content:'';position:absolute;z-index:1;top:-2px;right:-2px;bottom:-2px;left:-2px;display:block;pointer-events:none;box-shadow:0 0 0 2px ", ";border-radius:999px;}"], props.bgColor);
49
- }
50
- });
51
- const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
52
- displayName: "TokenLabel__TokenTextContainer",
53
- componentId: "sc-1bdmgzv-1"
54
- })(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
55
- const TokenLabel = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
56
- const {
57
- as,
58
- fillColor,
59
- handleRemove,
60
- id,
61
- isSelected,
62
- ref,
63
- text,
64
- variant,
65
- hideRemoveButton,
66
- ...rest
67
- } = props;
68
- const {
69
- colorScheme
70
- } = (0, _ThemeProvider.useTheme)();
71
- const {
72
- bgOpacity,
73
- borderOpacity,
74
- borderThreshold,
75
- lightnessThreshold
76
- } = colorModeConfigs[colorScheme || 'light'];
77
- let bgColor = fillColor;
78
- let borderColor = fillColor;
79
- let textColor = '#FFF';
80
- const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
81
- const isFillColorLight = perceivedLightness >= lightnessThreshold;
82
-
83
- if (colorScheme === 'dark') {
84
- const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
85
- bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
86
- textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 10).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
87
- borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 5).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
88
- } else {
89
- const isFillColorDark = perceivedLightness < 0.1;
90
- borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(30).toString() : 'transparent';
91
-
92
- if (isFillColorLight) {
93
- textColor = '#000';
94
- }
95
-
96
- if (isSelected) {
97
- bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(30).toString() : (0, _tinycolor.default)(fillColor).darken(30).toString();
98
- }
99
- }
100
-
101
- const hasMultipleActionTargets = (0, _TokenBase.isTokenInteractive)(props) && Boolean(handleRemove) && !hideRemoveButton;
102
-
103
- const handleRemoveClick = e => {
104
- e.stopPropagation();
105
- handleRemove && handleRemove();
106
- };
107
-
108
- return /*#__PURE__*/_react.default.createElement(StyledTokenLabel // specific to labels
109
- , _extends({
110
- fillColor: fillColor,
111
- bgColor: bgColor,
112
- borderColor: borderColor,
113
- textColor: textColor // common token props
114
- ,
115
- as: as,
116
- hideRemoveButton: hideRemoveButton || !handleRemove,
117
- id: id === null || id === void 0 ? void 0 : id.toString(),
118
- isSelected: isSelected,
119
- ref: forwardedRef,
120
- text: text,
121
- variant: variant
122
- }, rest), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
123
- borderOffset: tokenBorderWidthPx,
124
- parentTokenTag: as || 'span',
125
- tabIndex: -1,
126
- onClick: handleRemoveClick,
127
- variant: variant,
128
- "aria-hidden": hasMultipleActionTargets ? "true" : "false"
129
- }) : null);
130
- });
131
- TokenLabel.defaultProps = {
132
- fillColor: '#999'
133
- };
134
- var _default = TokenLabel;
135
- exports.default = _default;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { TokenBaseProps } from './TokenBase';
3
- export interface TokenProfileProps extends TokenBaseProps {
4
- avatarSrc: string;
5
- }
6
- declare const TokenProfile: React.ForwardRefExoticComponent<Pick<TokenProfileProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "handleRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
7
- export default TokenProfile;