@primer/components 0.0.0-202183020732 → 0.0.0-2021830223623

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 (54) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/dist/browser.esm.js +771 -716
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +410 -355
  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/Dialog/ConfirmationDialog.js +3 -3
  12. package/lib/Dialog/Dialog.d.ts +5 -0
  13. package/lib/Dialog/Dialog.js +16 -4
  14. package/lib/Token/Token.d.ts +14 -0
  15. package/lib/Token/Token.js +76 -0
  16. package/lib/Token/TokenBase.d.ts +16 -0
  17. package/lib/Token/TokenBase.js +90 -0
  18. package/lib/Token/TokenLabel.d.ts +14 -0
  19. package/lib/Token/TokenLabel.js +141 -0
  20. package/lib/Token/TokenProfile.d.ts +7 -0
  21. package/lib/Token/TokenProfile.js +50 -0
  22. package/lib/Token/_RemoveTokenButton.d.ts +3 -0
  23. package/lib/Token/_RemoveTokenButton.js +44 -0
  24. package/lib/Token/_tokenButtonUtils.d.ts +10 -0
  25. package/lib/Token/_tokenButtonUtils.js +42 -0
  26. package/lib/Token/index.d.ts +3 -0
  27. package/lib/Token/index.js +31 -0
  28. package/lib/index.d.ts +1 -0
  29. package/lib/index.js +20 -0
  30. package/lib-esm/ActionList/Item.d.ts +16 -4
  31. package/lib-esm/ActionList/Item.js +8 -5
  32. package/lib-esm/ActionList/List.d.ts +11 -7
  33. package/lib-esm/ActionList/List.js +2 -2
  34. package/lib-esm/ActionList/index.d.ts +1 -2
  35. package/lib-esm/Dialog/ConfirmationDialog.js +3 -3
  36. package/lib-esm/Dialog/Dialog.d.ts +5 -0
  37. package/lib-esm/Dialog/Dialog.js +17 -5
  38. package/lib-esm/Token/Token.d.ts +14 -0
  39. package/lib-esm/Token/Token.js +57 -0
  40. package/lib-esm/Token/TokenBase.d.ts +16 -0
  41. package/lib-esm/Token/TokenBase.js +70 -0
  42. package/lib-esm/Token/TokenLabel.d.ts +14 -0
  43. package/lib-esm/Token/TokenLabel.js +121 -0
  44. package/lib-esm/Token/TokenProfile.d.ts +7 -0
  45. package/lib-esm/Token/TokenProfile.js +29 -0
  46. package/lib-esm/Token/_RemoveTokenButton.d.ts +3 -0
  47. package/lib-esm/Token/_RemoveTokenButton.js +29 -0
  48. package/lib-esm/Token/_tokenButtonUtils.d.ts +10 -0
  49. package/lib-esm/Token/_tokenButtonUtils.js +26 -0
  50. package/lib-esm/Token/index.d.ts +3 -0
  51. package/lib-esm/Token/index.js +3 -0
  52. package/lib-esm/index.d.ts +1 -0
  53. package/lib-esm/index.js +1 -0
  54. package/package.json +8 -5
@@ -0,0 +1,7 @@
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;
@@ -0,0 +1,50 @@
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 _primitives = _interopRequireDefault(require("@primer/primitives"));
15
+
16
+ var _TokenBase = require("./TokenBase");
17
+
18
+ var _Token = _interopRequireDefault(require("./Token"));
19
+
20
+ var _ = require("..");
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ 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); }
29
+
30
+ const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
31
+ displayName: "TokenProfile__StyledToken",
32
+ componentId: "sc-1vf9jhf-0"
33
+ })(["padding-left:", ";"], (0, _constants.get)('space.1'));
34
+ const TokenProfile = /*#__PURE__*/(0, _react.forwardRef)(({
35
+ avatarSrc,
36
+ id,
37
+ ref,
38
+ variant,
39
+ ...rest
40
+ }, forwardedRef) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
41
+ leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
42
+ src: avatarSrc,
43
+ size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
44
+ }),
45
+ variant: variant,
46
+ id: id === null || id === void 0 ? void 0 : id.toString(),
47
+ ref: forwardedRef
48
+ }, rest)));
49
+ var _default = TokenProfile;
50
+ exports.default = _default;
@@ -0,0 +1,3 @@
1
+ import { TokenButtonProps } from './_tokenButtonUtils';
2
+ declare const RemoveTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
3
+ export default RemoveTokenButton;
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _octiconsReact = require("@primer/octicons-react");
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _TokenBase = require("./TokenBase");
13
+
14
+ var _tokenButtonUtils = require("./_tokenButtonUtils");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ const RemoveTokenButton = _styledComponents.default.span.attrs(({
19
+ borderOffset,
20
+ parentTokenTag,
21
+ variant,
22
+ parentTokenIsInteractive,
23
+ ...rest
24
+ }) => {
25
+ delete rest.children;
26
+ return {
27
+ borderOffset,
28
+ as: parentTokenIsInteractive ? 'span' : 'button',
29
+ tabIndex: parentTokenIsInteractive ? -1 : undefined,
30
+ 'aria-label': !parentTokenIsInteractive ? 'Remove token' : undefined,
31
+ children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
32
+ size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
33
+ })
34
+ };
35
+ }).withConfig({
36
+ displayName: "_RemoveTokenButton__RemoveTokenButton",
37
+ componentId: "sc-14lvcw1-0"
38
+ })(["", " ", " transform:", ";"], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
39
+
40
+ RemoveTokenButton.defaultProps = {
41
+ variant: _TokenBase.defaultTokenSize
42
+ };
43
+ var _default = RemoveTokenButton;
44
+ exports.default = _default;
@@ -0,0 +1,10 @@
1
+ import { TokenSizeKeys } from "./TokenBase";
2
+ export interface TokenButtonProps {
3
+ borderOffset?: number;
4
+ parentTokenTag: 'span' | 'button' | 'a';
5
+ variant?: TokenSizeKeys;
6
+ parentTokenIsInteractive?: boolean;
7
+ }
8
+ export declare const variants: (...args: any[]) => any;
9
+ export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
10
+ export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
7
+
8
+ var _styledComponents = require("styled-components");
9
+
10
+ var _styledSystem = require("styled-system");
11
+
12
+ var _constants = require("../constants");
13
+
14
+ var _TokenBase = require("./TokenBase");
15
+
16
+ const variants = (0, _styledSystem.variant)({
17
+ variants: {
18
+ sm: {
19
+ height: `${_TokenBase.tokenSizes.sm}px`,
20
+ width: `${_TokenBase.tokenSizes.sm}px`
21
+ },
22
+ md: {
23
+ height: `${_TokenBase.tokenSizes.md}px`,
24
+ width: `${_TokenBase.tokenSizes.md}px`
25
+ },
26
+ lg: {
27
+ height: `${_TokenBase.tokenSizes.lg}px`,
28
+ width: `${_TokenBase.tokenSizes.lg}px`
29
+ },
30
+ xl: {
31
+ height: `${_TokenBase.tokenSizes.xl}px`,
32
+ width: `${_TokenBase.tokenSizes.xl}px`
33
+ }
34
+ }
35
+ });
36
+ exports.variants = variants;
37
+ const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
38
+ exports.tokenButtonStyles = tokenButtonStyles;
39
+
40
+ const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
41
+
42
+ exports.getTokenButtonIconSize = getTokenButtonIconSize;
@@ -0,0 +1,3 @@
1
+ export { default } from './Token';
2
+ export { default as TokenLabel } from './TokenLabel';
3
+ export { default as TokenProfile } from './TokenProfile';
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "default", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _Token.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "TokenLabel", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _TokenLabel.default;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "TokenProfile", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _TokenProfile.default;
22
+ }
23
+ });
24
+
25
+ var _Token = _interopRequireDefault(require("./Token"));
26
+
27
+ var _TokenLabel = _interopRequireDefault(require("./TokenLabel"));
28
+
29
+ var _TokenProfile = _interopRequireDefault(require("./TokenProfile"));
30
+
31
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/lib/index.d.ts CHANGED
@@ -102,6 +102,7 @@ export { default as Text } from './Text';
102
102
  export type { TextProps } from './Text';
103
103
  export { default as Timeline } from './Timeline';
104
104
  export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
105
+ export { default as Token, TokenLabel, TokenProfile } from './Token';
105
106
  export { default as Tooltip } from './Tooltip';
106
107
  export type { TooltipProps } from './Tooltip';
107
108
  export { default as Truncate } from './Truncate';
package/lib/index.js CHANGED
@@ -441,6 +441,24 @@ Object.defineProperty(exports, "Timeline", {
441
441
  return _Timeline.default;
442
442
  }
443
443
  });
444
+ Object.defineProperty(exports, "Token", {
445
+ enumerable: true,
446
+ get: function () {
447
+ return _Token.default;
448
+ }
449
+ });
450
+ Object.defineProperty(exports, "TokenLabel", {
451
+ enumerable: true,
452
+ get: function () {
453
+ return _Token.TokenLabel;
454
+ }
455
+ });
456
+ Object.defineProperty(exports, "TokenProfile", {
457
+ enumerable: true,
458
+ get: function () {
459
+ return _Token.TokenProfile;
460
+ }
461
+ });
444
462
  Object.defineProperty(exports, "Tooltip", {
445
463
  enumerable: true,
446
464
  get: function () {
@@ -586,6 +604,8 @@ var _Text = _interopRequireDefault(require("./Text"));
586
604
 
587
605
  var _Timeline = _interopRequireDefault(require("./Timeline"));
588
606
 
607
+ var _Token = _interopRequireWildcard(require("./Token"));
608
+
589
609
  var _Tooltip = _interopRequireDefault(require("./Tooltip"));
590
610
 
591
611
  var _Truncate = _interopRequireDefault(require("./Truncate"));
@@ -2,10 +2,12 @@ import { IconProps } from '@primer/octicons-react';
2
2
  import React from 'react';
3
3
  import { SxProp } from '../sx';
4
4
  import { ItemInput } from './List';
5
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
6
+ import { AriaRole } from '../utils/types';
5
7
  /**
6
8
  * Contract for props passed to the `Item` component.
7
9
  */
8
- export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
10
+ export interface ItemProps extends SxProp {
9
11
  /**
10
12
  * Primary text which names an `Item`.
11
13
  */
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
68
70
  * An id associated with this item. Should be unique between items
69
71
  */
70
72
  id?: number | string;
73
+ /**
74
+ * Node to be included inside the item before the text.
75
+ */
76
+ children?: React.ReactNode;
77
+ /**
78
+ * The ARIA role describing the function of `List` component. `option` is a common value.
79
+ */
80
+ role?: AriaRole;
81
+ /**
82
+ * An item to pass back in the `onAction` callback, meant as
83
+ */
84
+ item?: ItemInput;
71
85
  }
72
86
  export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
73
87
  dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -75,6 +89,4 @@ export declare const TextContainer: import("styled-components").StyledComponent<
75
89
  /**
76
90
  * An actionable or selectable `Item` with an optional icon and description.
77
91
  */
78
- export declare function Item(itemProps: Partial<ItemProps> & {
79
- item?: ItemInput;
80
- }): JSX.Element;
92
+ export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
@@ -11,10 +11,10 @@ import { StyledDivider } from './Divider';
11
11
  import { useColorSchemeVar, useTheme } from '../ThemeProvider';
12
12
  import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
13
13
  import { useSSRSafeId } from '@react-aria/ssr';
14
+
14
15
  /**
15
16
  * These colors are not yet in our default theme. Need to remove this once they are added.
16
17
  */
17
-
18
18
  const customItemThemes = {
19
19
  default: {
20
20
  hover: {
@@ -85,7 +85,7 @@ const MainContent = styled.div.withConfig({
85
85
  const StyledItem = styled.div.withConfig({
86
86
  displayName: "Item__StyledItem",
87
87
  componentId: "jqpvy8-2"
88
- })(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
88
+ })(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
89
89
  variant,
90
90
  item
91
91
  }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -144,8 +144,9 @@ const MultiSelectInput = styled.input.withConfig({
144
144
  * An actionable or selectable `Item` with an optional icon and description.
145
145
  */
146
146
 
147
- export function Item(itemProps) {
147
+ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
148
148
  const {
149
+ as: Component,
149
150
  text,
150
151
  description,
151
152
  descriptionVariant = 'inline',
@@ -201,6 +202,8 @@ export function Item(itemProps) {
201
202
  theme
202
203
  } = useTheme();
203
204
  return /*#__PURE__*/React.createElement(StyledItem, _extends({
205
+ ref: ref,
206
+ as: Component,
204
207
  tabIndex: disabled ? undefined : -1,
205
208
  variant: variant,
206
209
  showDivider: showDivider,
@@ -246,5 +249,5 @@ export function Item(itemProps) {
246
249
  variant: variant,
247
250
  disabled: disabled
248
251
  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
249
- }
250
- Item.displayName = "Item";
252
+ });
253
+ Item.displayName = 'ActionList.Item';
@@ -1,9 +1,12 @@
1
- import React from 'react';
1
+ import React, { Key } from 'react';
2
2
  import type { AriaRole } from '../utils/types';
3
3
  import { Group, GroupProps } from './Group';
4
- import { Item, ItemProps } from './Item';
5
- export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
6
- renderItem: typeof Item;
4
+ import { ItemProps } from './Item';
5
+ declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
6
+ export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
7
+ renderItem: RenderItemFn;
8
+ }) & {
9
+ key?: Key;
7
10
  });
8
11
  /**
9
12
  * Contract for props passed to the `List` component.
@@ -26,7 +29,7 @@ export interface ListPropsBase {
26
29
  * without a `Group`-level or `Item`-level custom `Item` renderer will be
27
30
  * rendered using this function component.
28
31
  */
29
- renderItem?: typeof Item;
32
+ renderItem?: RenderItemFn;
30
33
  /**
31
34
  * A `List`-level custom `Group` renderer. Every `Group` within this `List`
32
35
  * without a `Group`-level custom `Item` renderer will be rendered using
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
58
61
  * and `Group`-level custom `Item` or `Group` renderers.
59
62
  */
60
63
  groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
61
- renderItem?: typeof Item;
64
+ renderItem?: RenderItemFn;
62
65
  renderGroup?: typeof Group;
63
66
  }, 'items'>) & {
64
67
  groupId: string;
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
68
71
  * and `Item`-level custom `Item` renderers.
69
72
  */
70
73
  items: ((ItemProps | (Partial<ItemProps> & {
71
- renderItem: typeof Item;
74
+ renderItem: RenderItemFn;
72
75
  })) & {
73
76
  groupId: string;
74
77
  })[];
@@ -81,3 +84,4 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
81
84
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
82
85
  */
83
86
  export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
87
+ export {};
@@ -90,11 +90,11 @@ export const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
90
90
 
91
91
 
92
92
  const renderItem = (itemProps, item, itemIndex) => {
93
- var _ref2, _itemProps$key, _itemProps$id;
93
+ var _ref2, _ref3, _itemProps$id;
94
94
 
95
95
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
96
96
  const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
97
- const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
97
+ const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
98
98
  return /*#__PURE__*/React.createElement(ItemComponent, _extends({
99
99
  showDivider: props.showItemDividers,
100
100
  selectionVariant: props.selectionVariant
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { Group } from './Group';
3
- import { Item } from './Item';
4
3
  import { Divider } from './Divider';
5
4
  export type { ListProps as ActionListProps } from './List';
6
5
  export type { GroupProps } from './Group';
@@ -12,7 +11,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
12
11
  /** Collects related `Items` in an `ActionList`. */
13
12
  Group: typeof Group;
14
13
  /** An actionable or selectable `Item` with an optional icon and description. */
15
- Item: typeof Item;
14
+ Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
16
15
  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
17
16
  Divider: typeof Divider;
18
17
  };
@@ -97,13 +97,13 @@ export const ConfirmationDialog = props => {
97
97
  }, [onClose]);
98
98
  const cancelButton = {
99
99
  content: cancelButtonContent,
100
- onClick: onCancelButtonClick,
101
- autoFocus: true
100
+ onClick: onCancelButtonClick
102
101
  };
103
102
  const confirmButton = {
104
103
  content: confirmButtonContent,
105
104
  buttonType: confirmButtonType,
106
- onClick: onConfirmButtonClick
105
+ onClick: onConfirmButtonClick,
106
+ autoFocus: true
107
107
  };
108
108
  const footerButtons = [cancelButton, confirmButton];
109
109
  return /*#__PURE__*/React.createElement(Dialog, {
@@ -19,6 +19,11 @@ export declare type DialogButtonProps = ButtonProps & {
19
19
  * focus this button automatically when the dialog appears.
20
20
  */
21
21
  autoFocus?: boolean;
22
+ /**
23
+ * A reference to the rendered Button’s DOM node, used together with
24
+ * `autoFocus` for `focusTrap`’s `initialFocus`.
25
+ */
26
+ ref?: React.RefObject<HTMLButtonElement>;
22
27
  };
23
28
  /**
24
29
  * Props to customize the rendering of the Dialog.
@@ -5,7 +5,7 @@ import styled from 'styled-components';
5
5
  import Button, { ButtonPrimary, ButtonDanger } from '../Button';
6
6
  import Box from '../Box';
7
7
  import { get, COMMON, POSITION } from '../constants';
8
- import { useOnEscapePress } from '../hooks';
8
+ import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
9
9
  import { useFocusTrap } from '../hooks/useFocusTrap';
10
10
  import sx from '../sx';
11
11
  import StyledOcticon from '../StyledOcticon';
@@ -112,10 +112,19 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
112
112
  onClose,
113
113
  role = 'dialog',
114
114
  width = 'xlarge',
115
- height = 'auto'
115
+ height = 'auto',
116
+ footerButtons = []
116
117
  } = props;
117
118
  const dialogLabelId = useSSRSafeId();
118
119
  const dialogDescriptionId = useSSRSafeId();
120
+ const autoFocusedFooterButtonRef = useRef(null);
121
+
122
+ for (const footerButton of footerButtons) {
123
+ if (footerButton.autoFocus) {
124
+ footerButton.ref = autoFocusedFooterButtonRef;
125
+ }
126
+ }
127
+
119
128
  const defaultedProps = { ...props,
120
129
  title,
121
130
  subtitle,
@@ -128,7 +137,8 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
128
137
  const backdropRef = useRef(null);
129
138
  useFocusTrap({
130
139
  containerRef: dialogRef,
131
- restoreFocusOnCleanUp: true
140
+ restoreFocusOnCleanUp: true,
141
+ initialFocusRef: autoFocusedFooterButtonRef
132
142
  });
133
143
  useOnEscapePress(event => {
134
144
  onClose('escape');
@@ -183,7 +193,9 @@ const buttonTypes = {
183
193
  const Buttons = ({
184
194
  buttons
185
195
  }) => {
186
- const autoFocusRef = useRef(null);
196
+ var _buttons$find;
197
+
198
+ const autoFocusRef = useProvidedRefOrCreate((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
187
199
  let autoFocusCount = 0;
188
200
  const [hasRendered, setHasRendered] = useState(0);
189
201
  useEffect(() => {
@@ -195,7 +207,7 @@ const Buttons = ({
195
207
  } else {
196
208
  setHasRendered(hasRendered + 1);
197
209
  }
198
- }, [hasRendered]);
210
+ }, [autoFocusRef, hasRendered]);
199
211
  return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
200
212
  const {
201
213
  content,
@@ -0,0 +1,14 @@
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;
@@ -0,0 +1,57 @@
1
+ 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); }
2
+
3
+ import React, { forwardRef } from 'react';
4
+ import styled from 'styled-components';
5
+ import { get } from '../constants';
6
+ import TokenBase, { isTokenInteractive } from './TokenBase';
7
+ import RemoveTokenButton from './_RemoveTokenButton';
8
+ const tokenBorderWidthPx = 1;
9
+ const DefaultTokenStyled = styled(TokenBase).withConfig({
10
+ displayName: "Token__DefaultTokenStyled",
11
+ componentId: "sc-1dg52pw-0"
12
+ })(["background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";max-width:100%;padding-right:", ";&:hover{background-color:", ";box-shadow:", ";color:", ";}"], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, props => isTokenInteractive(props) ? get('colors.neutral.muted') : undefined, props => isTokenInteractive(props) ? get('colors.shadow.medium') : undefined, props => isTokenInteractive(props) ? get('colors.fg.default') : undefined);
13
+ const TokenTextContainer = styled('span').withConfig({
14
+ displayName: "Token__TokenTextContainer",
15
+ componentId: "sc-1dg52pw-1"
16
+ })(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
17
+ const LeadingVisualContainer = styled('span').withConfig({
18
+ displayName: "Token__LeadingVisualContainer",
19
+ componentId: "sc-1dg52pw-2"
20
+ })(["flex-shrink:0;line-height:0;"]);
21
+ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
22
+ const {
23
+ as,
24
+ handleRemove,
25
+ id,
26
+ leadingVisual: LeadingVisual,
27
+ ref,
28
+ text,
29
+ variant,
30
+ hideRemoveButton,
31
+ ...rest
32
+ } = props;
33
+ const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(handleRemove) && !hideRemoveButton;
34
+
35
+ const handleRemoveClick = e => {
36
+ e.stopPropagation();
37
+ handleRemove && handleRemove();
38
+ };
39
+
40
+ return /*#__PURE__*/React.createElement(DefaultTokenStyled, _extends({
41
+ as: as,
42
+ handleRemove: handleRemove,
43
+ hideRemoveButton: hideRemoveButton || !handleRemove,
44
+ id: id === null || id === void 0 ? void 0 : id.toString(),
45
+ text: text,
46
+ ref: forwardedRef,
47
+ variant: variant
48
+ }, rest), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
49
+ borderOffset: tokenBorderWidthPx,
50
+ parentTokenTag: as || 'span',
51
+ onClick: handleRemoveClick,
52
+ variant: variant,
53
+ parentTokenIsInteractive: isTokenInteractive(props),
54
+ "aria-hidden": hasMultipleActionTargets ? "true" : "false"
55
+ }) : null);
56
+ });
57
+ export default Token;
@@ -0,0 +1,16 @@
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;