@primer/components 0.0.0-202196173426 → 0.0.0-202196184858

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 (64) hide show
  1. package/CHANGELOG.md +4 -14
  2. package/lib/ActionList/List.d.ts +1 -2
  3. package/lib/SelectMenu/SelectMenu.d.ts +10 -10
  4. package/lib/TextInput.d.ts +1 -2
  5. package/lib/Token/IssueLabelToken.d.ts +14 -0
  6. package/lib/Token/IssueLabelToken.js +144 -0
  7. package/lib/Token/ProfileToken.d.ts +7 -0
  8. package/lib/Token/ProfileToken.js +53 -0
  9. package/lib/Token/Token.d.ts +15 -0
  10. package/lib/Token/Token.js +94 -0
  11. package/lib/Token/TokenBase.d.ts +17 -0
  12. package/lib/Token/TokenBase.js +108 -0
  13. package/lib/Token/_RemoveTokenButton.d.ts +12 -0
  14. package/lib/Token/_RemoveTokenButton.js +77 -0
  15. package/lib/Token/_TokenTextContainer.d.ts +3 -0
  16. package/lib/Token/_TokenTextContainer.js +34 -0
  17. package/lib/Token/index.d.ts +3 -0
  18. package/lib/Token/index.js +31 -0
  19. package/lib/index.d.ts +1 -0
  20. package/lib/index.js +20 -0
  21. package/lib/utils/{types/AriaRole.d.ts → types.d.ts} +13 -0
  22. package/lib/utils/{types/AriaRole.js → types.js} +0 -0
  23. package/lib-esm/ActionList/List.d.ts +1 -2
  24. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -10
  25. package/lib-esm/TextInput.d.ts +1 -2
  26. package/lib-esm/Token/IssueLabelToken.d.ts +14 -0
  27. package/lib-esm/Token/IssueLabelToken.js +124 -0
  28. package/lib-esm/Token/ProfileToken.d.ts +7 -0
  29. package/lib-esm/Token/ProfileToken.js +33 -0
  30. package/lib-esm/Token/Token.d.ts +15 -0
  31. package/lib-esm/Token/Token.js +73 -0
  32. package/lib-esm/Token/TokenBase.d.ts +17 -0
  33. package/lib-esm/Token/TokenBase.js +87 -0
  34. package/lib-esm/Token/_RemoveTokenButton.d.ts +12 -0
  35. package/lib-esm/Token/_RemoveTokenButton.js +60 -0
  36. package/lib-esm/Token/_TokenTextContainer.d.ts +3 -0
  37. package/lib-esm/Token/_TokenTextContainer.js +21 -0
  38. package/lib-esm/Token/index.d.ts +3 -0
  39. package/lib-esm/Token/index.js +3 -0
  40. package/lib-esm/index.d.ts +1 -0
  41. package/lib-esm/index.js +1 -0
  42. package/lib-esm/utils/{types/AriaRole.d.ts → types.d.ts} +13 -0
  43. package/lib-esm/utils/{types/AriaRole.js → types.js} +0 -0
  44. package/package.json +2 -1
  45. package/dist/browser.esm.js +0 -2142
  46. package/dist/browser.esm.js.map +0 -1
  47. package/dist/browser.umd.js +0 -2142
  48. package/dist/browser.umd.js.map +0 -1
  49. package/lib/utils/types/ComponentProps.d.ts +0 -9
  50. package/lib/utils/types/ComponentProps.js +0 -1
  51. package/lib/utils/types/Flatten.d.ts +0 -4
  52. package/lib/utils/types/Flatten.js +0 -1
  53. package/lib/utils/types/Merge.d.ts +0 -19
  54. package/lib/utils/types/Merge.js +0 -1
  55. package/lib/utils/types/index.d.ts +0 -4
  56. package/lib/utils/types/index.js +0 -57
  57. package/lib-esm/utils/types/ComponentProps.d.ts +0 -9
  58. package/lib-esm/utils/types/ComponentProps.js +0 -1
  59. package/lib-esm/utils/types/Flatten.d.ts +0 -4
  60. package/lib-esm/utils/types/Flatten.js +0 -1
  61. package/lib-esm/utils/types/Merge.d.ts +0 -19
  62. package/lib-esm/utils/types/Merge.js +0 -1
  63. package/lib-esm/utils/types/index.d.ts +0 -4
  64. package/lib-esm/utils/types/index.js +0 -4
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _octiconsReact = require("@primer/octicons-react");
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _styledSystem = require("styled-system");
15
+
16
+ var _constants = require("../constants");
17
+
18
+ var _sx = _interopRequireDefault(require("../sx"));
19
+
20
+ var _TokenBase = require("./TokenBase");
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 variants = (0, _styledSystem.variant)({
27
+ prop: 'size',
28
+ variants: {
29
+ small: {
30
+ height: _TokenBase.tokenSizes.small,
31
+ width: _TokenBase.tokenSizes.small
32
+ },
33
+ medium: {
34
+ height: _TokenBase.tokenSizes.medium,
35
+ width: _TokenBase.tokenSizes.medium
36
+ },
37
+ large: {
38
+ height: _TokenBase.tokenSizes.large,
39
+ width: _TokenBase.tokenSizes.large
40
+ },
41
+ xlarge: {
42
+ height: _TokenBase.tokenSizes.xlarge,
43
+ width: _TokenBase.tokenSizes.xlarge
44
+ }
45
+ }
46
+ });
47
+
48
+ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _TokenBase.defaultTokenSize], 10) * 0.75;
49
+
50
+ const StyledTokenButton = _styledComponents.default.span.withConfig({
51
+ displayName: "_RemoveTokenButton__StyledTokenButton",
52
+ componentId: "sc-14lvcw1-0"
53
+ })(["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;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'), variants, _sx.default);
54
+
55
+ const RemoveTokenButton = ({
56
+ 'aria-label': ariaLabel,
57
+ isParentInteractive,
58
+ size,
59
+ ...rest
60
+ }) => {
61
+ delete rest.children;
62
+ return /*#__PURE__*/_react.default.createElement(StyledTokenButton, _extends({
63
+ as: isParentInteractive ? 'span' : 'button',
64
+ tabIndex: isParentInteractive ? -1 : undefined,
65
+ "aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
66
+ size: size
67
+ }, rest), /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, {
68
+ size: getTokenButtonIconSize(size)
69
+ }));
70
+ };
71
+
72
+ RemoveTokenButton.displayName = "RemoveTokenButton";
73
+ RemoveTokenButton.defaultProps = {
74
+ size: _TokenBase.defaultTokenSize
75
+ };
76
+ var _default = RemoveTokenButton;
77
+ exports.default = _default;
@@ -0,0 +1,3 @@
1
+ import { TokenBaseProps } from './TokenBase';
2
+ declare const TokenTextContainer: import("styled-components").StyledComponent<"span", any, Partial<TokenBaseProps>, never>;
3
+ export default TokenTextContainer;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+
10
+ 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); }
11
+
12
+ 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; }
13
+
14
+ const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
15
+ displayName: "_TokenTextContainer__TokenTextContainer",
16
+ componentId: "sc-4t2bev-0"
17
+ })(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ""], props => {
18
+ if (props.as === 'a') {
19
+ return (0, _styledComponents.css)(["color:currentColor;text-decoration:none;"]);
20
+ }
21
+
22
+ if (props.as === 'button') {
23
+ // reset button styles, make the cursor a pointer, and add line-height
24
+ return (0, _styledComponents.css)(["background:transparent;border:none;color:inherit;font:inherit;margin:0;overflow:visible;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;line-height:1;"]);
25
+ } // position psuedo-element above text content
26
+ // so it gets the click
27
+
28
+
29
+ if (props.as !== 'span') {
30
+ return (0, _styledComponents.css)(["&:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}"]);
31
+ }
32
+ });
33
+ var _default = TokenTextContainer;
34
+ exports.default = _default;
@@ -0,0 +1,3 @@
1
+ export { default } from './Token';
2
+ export { default as IssueLabelToken } from './IssueLabelToken';
3
+ export { default as ProfileToken } from './ProfileToken';
@@ -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, "IssueLabelToken", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _IssueLabelToken.default;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "ProfileToken", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _ProfileToken.default;
22
+ }
23
+ });
24
+
25
+ var _Token = _interopRequireDefault(require("./Token"));
26
+
27
+ var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
28
+
29
+ var _ProfileToken = _interopRequireDefault(require("./ProfileToken"));
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, IssueLabelToken, ProfileToken } 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, "IssueLabelToken", {
451
+ enumerable: true,
452
+ get: function () {
453
+ return _Token.IssueLabelToken;
454
+ }
455
+ });
456
+ Object.defineProperty(exports, "ProfileToken", {
457
+ enumerable: true,
458
+ get: function () {
459
+ return _Token.ProfileToken;
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"));
@@ -1 +1,14 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Extract a component's props
4
+ *
5
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
6
+ *
7
+ * @example ComponentProps<typeof MyComponent>
8
+ */
9
+ export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;
10
+ /**
11
+ * Contruct a type describing the items in `T`, if `T` is an array.
12
+ */
13
+ export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;
1
14
  export declare type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox ' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
File without changes
@@ -2,9 +2,8 @@ import React, { Key } from 'react';
2
2
  import type { AriaRole } from '../utils/types';
3
3
  import { Group, GroupProps } from './Group';
4
4
  import { ItemProps } from './Item';
5
- import { Merge } from '../utils/types/Merge';
6
5
  declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
7
- export declare type ItemInput = Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps> | ((Partial<ItemProps> & {
6
+ export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
8
7
  renderItem: RenderItemFn;
9
8
  }) & {
10
9
  key?: Key;
@@ -32,15 +32,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
32
32
  Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
33
33
  Filter: React.ForwardRefExoticComponent<Pick<{
34
34
  value?: string | undefined;
35
- } & Pick<Omit<Pick<{
36
- [x: string]: any;
37
- [x: number]: any;
38
- } & {
39
- theme?: any;
40
- } & {
41
- as?: string | React.ComponentType<any> | undefined;
42
- forwardedAs?: string | React.ComponentType<any> | undefined;
43
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
35
+ } & Pick<{
44
36
  className?: string | undefined;
45
37
  icon?: React.ComponentType<{
46
38
  className?: string | undefined;
@@ -315,7 +307,15 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
315
307
  contrast?: boolean | undefined;
316
308
  } & {
317
309
  theme?: any;
318
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
310
+ }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast"> & Omit<Pick<{
311
+ [x: string]: any;
312
+ [x: number]: any;
313
+ } & {
314
+ theme?: any;
315
+ } & {
316
+ as?: string | React.ComponentType<any> | undefined;
317
+ forwardedAs?: string | React.ComponentType<any> | undefined;
318
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
319
319
  Footer: import("styled-components").StyledComponent<"footer", any, SystemCommonProps & SxProp, never>;
320
320
  Item: React.ForwardRefExoticComponent<Pick<{
321
321
  as?: React.ElementType<any> | undefined;
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
3
3
  import { SxProp } from './sx';
4
4
  import { ComponentProps } from './utils/types';
5
- import { Merge } from './utils/types/Merge';
6
5
  declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
7
6
  declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
8
7
  disabled?: boolean | undefined;
@@ -17,7 +16,7 @@ declare type NonPassthroughProps = {
17
16
  className?: string;
18
17
  }>;
19
18
  } & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
20
- declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof Input>, NonPassthroughProps>;
19
+ declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
21
20
  declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
22
21
  export declare type TextInputProps = ComponentProps<typeof TextInput>;
23
22
  export default TextInput;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { TokenBaseProps } from './TokenBase';
3
+ export interface IssueLabelTokenProps 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 IssueLabelToken: React.ForwardRefExoticComponent<Pick<IssueLabelTokenProps, "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" | "size" | "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" | "onRemove" | "isSelected" | "hideRemoveButton" | "fillColor"> & React.RefAttributes<HTMLElement>>;
14
+ export default IssueLabelToken;
@@ -0,0 +1,124 @@
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, useMemo } from 'react';
4
+ import TokenBase, { defaultTokenSize, isTokenInteractive } from './TokenBase';
5
+ import RemoveTokenButton from './_RemoveTokenButton';
6
+ import { parseToHsla, parseToRgba } from 'color2k';
7
+ import { useTheme } from '../ThemeProvider';
8
+ import TokenTextContainer from './_TokenTextContainer';
9
+ const tokenBorderWidthPx = 1;
10
+ const lightModeStyles = {
11
+ '--lightness-threshold': '0.453',
12
+ '--border-threshold': '0.96',
13
+ '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
14
+ background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
15
+ color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
16
+ borderWidth: tokenBorderWidthPx,
17
+ borderStyle: 'solid',
18
+ borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
19
+ };
20
+ const darkModeStyles = {
21
+ '--lightness-threshold': '0.6',
22
+ '--background-alpha': '0.18',
23
+ '--border-alpha': '0.3',
24
+ '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
25
+ borderWidth: tokenBorderWidthPx,
26
+ borderStyle: 'solid',
27
+ background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
28
+ color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
29
+ borderColor: 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
30
+ };
31
+ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
32
+ const {
33
+ as,
34
+ fillColor = '#999',
35
+ onRemove,
36
+ id,
37
+ isSelected,
38
+ text,
39
+ size,
40
+ hideRemoveButton,
41
+ href,
42
+ onClick,
43
+ ...rest
44
+ } = props;
45
+ const interactiveTokenProps = {
46
+ as,
47
+ href,
48
+ onClick
49
+ };
50
+ const {
51
+ colorScheme
52
+ } = useTheme();
53
+ const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
54
+
55
+ const onRemoveClick = e => {
56
+ e.stopPropagation();
57
+ onRemove && onRemove();
58
+ };
59
+
60
+ const labelStyles = useMemo(() => {
61
+ const [r, g, b] = parseToRgba(fillColor);
62
+ const [h, s, l] = parseToHsla(fillColor); // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
63
+ // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
64
+
65
+ return {
66
+ '--label-r': String(r),
67
+ '--label-g': String(g),
68
+ '--label-b': String(b),
69
+ '--label-h': String(Math.round(h)),
70
+ '--label-s': String(Math.round(s * 100)),
71
+ '--label-l': String(Math.round(l * 100)),
72
+ '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
73
+ '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
74
+ paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
75
+ position: 'relative',
76
+ ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
77
+ ...(isSelected ? {
78
+ background: colorScheme === 'light' ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' : darkModeStyles.background,
79
+ ':focus': {
80
+ outline: 'none'
81
+ },
82
+ ':after': {
83
+ content: '""',
84
+ position: 'absolute',
85
+ zIndex: 1,
86
+ top: `-${tokenBorderWidthPx * 2}px`,
87
+ right: `-${tokenBorderWidthPx * 2}px`,
88
+ bottom: `-${tokenBorderWidthPx * 2}px`,
89
+ left: `-${tokenBorderWidthPx * 2}px`,
90
+ display: 'block',
91
+ pointerEvents: 'none',
92
+ boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${colorScheme === 'light' ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'}`,
93
+ borderRadius: '999px'
94
+ }
95
+ } : {})
96
+ };
97
+ }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]);
98
+ return /*#__PURE__*/React.createElement(TokenBase, _extends({
99
+ onRemove: onRemove,
100
+ id: id === null || id === void 0 ? void 0 : id.toString(),
101
+ isSelected: isSelected,
102
+ text: text,
103
+ size: size,
104
+ sx: labelStyles
105
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
106
+ ref: forwardedRef
107
+ }), /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
108
+ borderOffset: tokenBorderWidthPx,
109
+ onClick: onRemoveClick,
110
+ size: size,
111
+ "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
112
+ isParentInteractive: isTokenInteractive(props),
113
+ sx: hasMultipleActionTargets ? {
114
+ position: 'relative',
115
+ zIndex: '1'
116
+ } : {}
117
+ }) : null);
118
+ });
119
+ IssueLabelToken.defaultProps = {
120
+ fillColor: '#999',
121
+ size: defaultTokenSize
122
+ };
123
+ IssueLabelToken.displayName = 'IssueLabelToken';
124
+ export default IssueLabelToken;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { TokenBaseProps } from './TokenBase';
3
+ export interface ProfileTokenProps extends TokenBaseProps {
4
+ avatarSrc: string;
5
+ }
6
+ declare const ProfileToken: React.ForwardRefExoticComponent<Pick<ProfileTokenProps, "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" | "size" | "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" | "onRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
7
+ export default ProfileToken;
@@ -0,0 +1,33 @@
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 primitives from '@primer/primitives';
5
+ import { get } from '../constants';
6
+ import { defaultTokenSize, tokenSizes } from './TokenBase';
7
+ import Token from './Token';
8
+ import { Avatar } from '..';
9
+ const ProfileToken = /*#__PURE__*/forwardRef(({
10
+ avatarSrc,
11
+ id,
12
+ size,
13
+ ...rest
14
+ }, forwardedRef) => {
15
+ return /*#__PURE__*/React.createElement(Token, _extends({
16
+ leadingVisual: () => /*#__PURE__*/React.createElement(Avatar, {
17
+ src: avatarSrc,
18
+ size: parseInt(tokenSizes[size || defaultTokenSize], 10) - parseInt(primitives.spacing.normal.spacer[1], 10) * 2
19
+ }),
20
+ size: size,
21
+ id: id === null || id === void 0 ? void 0 : id.toString(),
22
+ sx: {
23
+ paddingLeft: get('space.1')
24
+ }
25
+ }, rest, {
26
+ ref: forwardedRef
27
+ }));
28
+ });
29
+ ProfileToken.defaultProps = {
30
+ size: defaultTokenSize
31
+ };
32
+ ProfileToken.displayName = 'ProfileToken';
33
+ export default ProfileToken;
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { SxProp } from '../sx';
3
+ import { TokenBaseProps } from './TokenBase';
4
+ export interface TokenProps extends TokenBaseProps {
5
+ /**
6
+ * A function that renders a component before the token text
7
+ */
8
+ leadingVisual?: React.ComponentType<any>;
9
+ /**
10
+ * Whether the remove button should be rendered in the token
11
+ */
12
+ hideRemoveButton?: boolean;
13
+ }
14
+ declare const Token: React.ForwardRefExoticComponent<Pick<TokenProps & SxProp, "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" | "size" | "wrap" | "open" | "sx" | "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" | "leadingVisual" | "onRemove" | "isSelected" | "hideRemoveButton"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
15
+ export default Token;
@@ -0,0 +1,73 @@
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, { css } from 'styled-components';
5
+ import { get } from '../constants';
6
+ import { sx } from '../sx';
7
+ import TokenBase, { defaultTokenSize, isTokenInteractive } from './TokenBase';
8
+ import RemoveTokenButton from './_RemoveTokenButton';
9
+ import TokenTextContainer from './_TokenTextContainer';
10
+ const tokenBorderWidthPx = 1;
11
+ const DefaultTokenStyled = styled(TokenBase).withConfig({
12
+ displayName: "Token__DefaultTokenStyled",
13
+ componentId: "sc-1dg52pw-0"
14
+ })(["background-color:", ";border-color:", ";border-style:solid;border-width:", "px;color:", ";max-width:100%;padding-right:", ";position:relative;", " ", ""], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), tokenBorderWidthPx, props => props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, sx, props => {
15
+ if (props.isTokenInteractive) {
16
+ return css(["&:hover{background-color:", ";box-shadow:", ";color:", ";}"], get('colors.neutral.muted'), get('colors.shadow.medium'), get('colors.fg.default'));
17
+ }
18
+ });
19
+ const LeadingVisualContainer = styled('span').withConfig({
20
+ displayName: "Token__LeadingVisualContainer",
21
+ componentId: "sc-1dg52pw-1"
22
+ })(["flex-shrink:0;line-height:0;"]);
23
+ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
24
+ const {
25
+ as,
26
+ onRemove,
27
+ id,
28
+ leadingVisual: LeadingVisual,
29
+ text,
30
+ size,
31
+ hideRemoveButton,
32
+ href,
33
+ onClick,
34
+ ...rest
35
+ } = props;
36
+ const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
37
+
38
+ const onRemoveClick = e => {
39
+ e.stopPropagation();
40
+ onRemove && onRemove();
41
+ };
42
+
43
+ const interactiveTokenProps = {
44
+ as,
45
+ href,
46
+ onClick
47
+ };
48
+ return /*#__PURE__*/React.createElement(DefaultTokenStyled, _extends({
49
+ onRemove: onRemove,
50
+ hideRemoveButton: hideRemoveButton || !onRemove,
51
+ id: id === null || id === void 0 ? void 0 : id.toString(),
52
+ text: text,
53
+ size: size,
54
+ isTokenInteractive: isTokenInteractive(props)
55
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
56
+ ref: forwardedRef
57
+ }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
58
+ borderOffset: tokenBorderWidthPx,
59
+ onClick: onRemoveClick,
60
+ size: size,
61
+ isParentInteractive: isTokenInteractive(props),
62
+ "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
63
+ sx: hasMultipleActionTargets ? {
64
+ position: 'relative',
65
+ zIndex: '1'
66
+ } : {}
67
+ }) : null);
68
+ });
69
+ Token.displayName = 'Token';
70
+ Token.defaultProps = {
71
+ size: defaultTokenSize
72
+ };
73
+ export default Token;
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { SxProp } from '../sx';
3
+ export declare type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge';
4
+ export declare const tokenSizes: Record<TokenSizeKeys, string>;
5
+ export declare const defaultTokenSize: TokenSizeKeys;
6
+ export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
7
+ as?: 'button' | 'a' | 'span';
8
+ onRemove?: () => void;
9
+ isSelected?: boolean;
10
+ tabIndex?: number;
11
+ text: string;
12
+ id?: number | string;
13
+ size?: TokenSizeKeys;
14
+ }
15
+ export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
16
+ declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps & SxProp, never>;
17
+ export default TokenBase;