@primer/components 0.0.0-2021830164741 → 0.0.0-202183017829

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 (106) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/browser.esm.js +250 -290
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +318 -358
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  7. package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
  8. package/lib/Dialog/ConfirmationDialog.js +3 -3
  9. package/lib/Dialog/Dialog.d.ts +5 -0
  10. package/lib/Dialog/Dialog.js +16 -4
  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/index.d.ts +0 -2
  20. package/lib/index.js +0 -16
  21. package/lib/utils/types.d.ts +0 -3
  22. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  23. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  24. package/lib-esm/Dialog/ConfirmationDialog.js +3 -3
  25. package/lib-esm/Dialog/Dialog.d.ts +5 -0
  26. package/lib-esm/Dialog/Dialog.js +17 -5
  27. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  28. package/lib-esm/Overlay.d.ts +1 -2
  29. package/lib-esm/Overlay.js +5 -8
  30. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
  31. package/lib-esm/TextInput.d.ts +3 -6
  32. package/lib-esm/TextInput.js +9 -8
  33. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  34. package/lib-esm/hooks/useOverlay.js +6 -11
  35. package/lib-esm/index.d.ts +0 -2
  36. package/lib-esm/index.js +0 -2
  37. package/lib-esm/utils/types.d.ts +0 -3
  38. package/package.json +6 -9
  39. package/lib/Autocomplete/Autocomplete.d.ts +0 -31
  40. package/lib/Autocomplete/Autocomplete.js +0 -60
  41. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -14
  42. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  43. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  44. package/lib/Autocomplete/AutocompleteInput.js +0 -148
  45. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -78
  46. package/lib/Autocomplete/AutocompleteMenu.js +0 -257
  47. package/lib/Autocomplete/index.d.ts +0 -2
  48. package/lib/Autocomplete/index.js +0 -15
  49. package/lib/Badge/Badge.d.ts +0 -8
  50. package/lib/Badge/Badge.js +0 -59
  51. package/lib/Badge/BadgeState.d.ts +0 -13
  52. package/lib/Badge/BadgeState.js +0 -51
  53. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  54. package/lib/Badge/_badgeStyleUtils.js +0 -39
  55. package/lib/TextInputTokens.d.ts +0 -43
  56. package/lib/TextInputTokens.js +0 -237
  57. package/lib/Token/Token.d.ts +0 -14
  58. package/lib/Token/Token.js +0 -76
  59. package/lib/Token/TokenBase.d.ts +0 -16
  60. package/lib/Token/TokenBase.js +0 -90
  61. package/lib/Token/TokenLabel.d.ts +0 -14
  62. package/lib/Token/TokenLabel.js +0 -141
  63. package/lib/Token/TokenProfile.d.ts +0 -7
  64. package/lib/Token/TokenProfile.js +0 -50
  65. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  66. package/lib/Token/_RemoveTokenButton.js +0 -45
  67. package/lib/Token/_tokenButtonUtils.d.ts +0 -10
  68. package/lib/Token/_tokenButtonUtils.js +0 -42
  69. package/lib/_UnstyledTextInput.d.ts +0 -2
  70. package/lib/_UnstyledTextInput.js +0 -20
  71. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  72. package/lib/utils/scrollIntoViewingArea.js +0 -39
  73. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -31
  74. package/lib-esm/Autocomplete/Autocomplete.js +0 -40
  75. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -14
  76. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  77. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  78. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -129
  79. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -78
  80. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -231
  81. package/lib-esm/Autocomplete/index.d.ts +0 -2
  82. package/lib-esm/Autocomplete/index.js +0 -1
  83. package/lib-esm/Badge/Badge.d.ts +0 -8
  84. package/lib-esm/Badge/Badge.js +0 -44
  85. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  86. package/lib-esm/Badge/BadgeState.js +0 -40
  87. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  88. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  89. package/lib-esm/TextInputTokens.d.ts +0 -43
  90. package/lib-esm/TextInputTokens.js +0 -210
  91. package/lib-esm/Token/Token.d.ts +0 -14
  92. package/lib-esm/Token/Token.js +0 -57
  93. package/lib-esm/Token/TokenBase.d.ts +0 -16
  94. package/lib-esm/Token/TokenBase.js +0 -70
  95. package/lib-esm/Token/TokenLabel.d.ts +0 -14
  96. package/lib-esm/Token/TokenLabel.js +0 -121
  97. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  98. package/lib-esm/Token/TokenProfile.js +0 -29
  99. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  100. package/lib-esm/Token/_RemoveTokenButton.js +0 -30
  101. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -10
  102. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  103. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  104. package/lib-esm/_UnstyledTextInput.js +0 -7
  105. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  106. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
@@ -1,57 +0,0 @@
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;
@@ -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,70 +0,0 @@
1
- import styled from 'styled-components';
2
- import { variant } from 'styled-system';
3
- import { get } from '../constants';
4
- export const tokenSizes = {
5
- sm: 16,
6
- md: 20,
7
- lg: 24,
8
- xl: 32
9
- };
10
- export const defaultTokenSize = 'md';
11
- export const isTokenInteractive = ({
12
- as = 'span',
13
- onClick,
14
- onFocus,
15
- tabIndex = -1
16
- }) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
17
- const variants = variant({
18
- variants: {
19
- sm: {
20
- fontSize: 0,
21
- gap: 1,
22
- height: `${tokenSizes.sm}px`,
23
- paddingLeft: 1,
24
- paddingRight: 1
25
- },
26
- md: {
27
- fontSize: 0,
28
- gap: 1,
29
- height: `${tokenSizes.md}px`,
30
- paddingLeft: 2,
31
- paddingRight: 2
32
- },
33
- lg: {
34
- fontSize: 0,
35
- gap: 2,
36
- height: `${tokenSizes.lg}px`,
37
- paddingLeft: 2,
38
- paddingRight: 2
39
- },
40
- xl: {
41
- fontSize: 1,
42
- gap: 2,
43
- height: `${tokenSizes.xl}px`,
44
- paddingLeft: 3,
45
- paddingRight: 3
46
- }
47
- }
48
- });
49
- const TokenBase = styled.span.attrs(({
50
- text,
51
- handleRemove,
52
- onKeyUp
53
- }) => ({
54
- onKeyUp: e => {
55
- onKeyUp && onKeyUp(e);
56
-
57
- if ((e.key === 'Backspace' || e.key === 'Delete') && handleRemove) {
58
- handleRemove();
59
- }
60
- },
61
- 'aria-label': handleRemove ? `${text}, press backspace or delete to remove` : undefined
62
- })).withConfig({
63
- displayName: "TokenBase",
64
- componentId: "opajvp-0"
65
- })(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', get('fontWeights.bold'), variants);
66
- TokenBase.defaultProps = {
67
- as: 'span',
68
- variant: defaultTokenSize
69
- };
70
- export default TokenBase;
@@ -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,121 +0,0 @@
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 TokenBase, { isTokenInteractive } from './TokenBase';
6
- import RemoveTokenButton from './_RemoveTokenButton';
7
- import tinycolor from 'tinycolor2';
8
- import { useTheme } from '../ThemeProvider';
9
- const colorModeConfigs = {
10
- dark: {
11
- bgOpacity: 0.18,
12
- borderThreshold: 0,
13
- borderOpacity: 0.3,
14
- lightnessThreshold: 0.6
15
- },
16
- light: {
17
- bgOpacity: 1,
18
- borderThreshold: 0.96,
19
- borderOpacity: 1,
20
- lightnessThreshold: 0.453
21
- }
22
- };
23
- const tokenBorderWidthPx = 1;
24
- const StyledTokenLabel = styled(TokenBase).withConfig({
25
- displayName: "TokenLabel__StyledTokenLabel",
26
- componentId: "sc-1bdmgzv-0"
27
- })(["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 => {
28
- if (props.isSelected) {
29
- return 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);
30
- }
31
- });
32
- const TokenTextContainer = styled('span').withConfig({
33
- displayName: "TokenLabel__TokenTextContainer",
34
- componentId: "sc-1bdmgzv-1"
35
- })(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
36
- const TokenLabel = /*#__PURE__*/forwardRef((props, forwardedRef) => {
37
- const {
38
- as,
39
- fillColor,
40
- handleRemove,
41
- id,
42
- isSelected,
43
- ref,
44
- text,
45
- variant,
46
- hideRemoveButton,
47
- ...rest
48
- } = props;
49
- const {
50
- colorScheme
51
- } = useTheme();
52
- const {
53
- bgOpacity,
54
- borderOpacity,
55
- borderThreshold,
56
- lightnessThreshold
57
- } = colorModeConfigs[colorScheme || 'light'];
58
- let bgColor = fillColor;
59
- let borderColor = fillColor;
60
- let textColor = '#FFF';
61
- const perceivedLightness = tinycolor(fillColor).getLuminance();
62
- const isFillColorLight = perceivedLightness >= lightnessThreshold;
63
-
64
- if (colorScheme === 'dark') {
65
- const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
66
- bgColor = isSelected ? tinycolor(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : tinycolor(fillColor).setAlpha(bgOpacity).toRgbString();
67
- textColor = isSelected ? tinycolor(fillColor).lighten(lightenBy + 10).toString() : tinycolor(fillColor).lighten(lightenBy).toString();
68
- borderColor = isSelected ? tinycolor(fillColor).lighten(lightenBy + 5).toRgbString() : tinycolor(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
69
- } else {
70
- const isFillColorDark = perceivedLightness < 0.1;
71
- borderColor = perceivedLightness >= borderThreshold ? tinycolor(fillColor).darken(25).toString() : 'transparent';
72
-
73
- if (isFillColorLight) {
74
- textColor = '#000';
75
- }
76
-
77
- if (isSelected) {
78
- bgColor = isFillColorDark ? tinycolor(fillColor).lighten(10).toString() // TODO: darken more than 10 if the fillColor is really bright and doesn't darken well
79
- // Examples of colors that don't darken well:
80
- // - #a2eeef
81
- // - #ffd78e
82
- // - #a4f287
83
- : tinycolor(fillColor).darken(10).toString();
84
- }
85
- }
86
-
87
- const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(handleRemove) && !hideRemoveButton;
88
-
89
- const handleRemoveClick = e => {
90
- e.stopPropagation();
91
- handleRemove && handleRemove();
92
- };
93
-
94
- return /*#__PURE__*/React.createElement(StyledTokenLabel // specific to labels
95
- , _extends({
96
- fillColor: fillColor,
97
- bgColor: bgColor,
98
- borderColor: borderColor,
99
- textColor: textColor // common token props
100
- ,
101
- as: as,
102
- hideRemoveButton: hideRemoveButton || !handleRemove,
103
- handleRemove: handleRemove,
104
- id: id === null || id === void 0 ? void 0 : id.toString(),
105
- isSelected: isSelected,
106
- ref: forwardedRef,
107
- text: text,
108
- variant: variant
109
- }, rest), /*#__PURE__*/React.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
110
- borderOffset: tokenBorderWidthPx,
111
- parentTokenTag: as || 'span',
112
- tabIndex: -1,
113
- onClick: handleRemoveClick,
114
- variant: variant,
115
- "aria-hidden": hasMultipleActionTargets ? "true" : "false"
116
- }) : null);
117
- });
118
- TokenLabel.defaultProps = {
119
- fillColor: '#999'
120
- };
121
- export default TokenLabel;
@@ -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;
@@ -1,29 +0,0 @@
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 primitives from '@primer/primitives';
7
- import { defaultTokenSize, tokenSizes } from './TokenBase';
8
- import Token from './Token';
9
- import { Avatar } from '..';
10
- const StyledToken = styled(Token).withConfig({
11
- displayName: "TokenProfile__StyledToken",
12
- componentId: "sc-1vf9jhf-0"
13
- })(["padding-left:", ";"], get('space.1'));
14
- const TokenProfile = /*#__PURE__*/forwardRef(({
15
- avatarSrc,
16
- id,
17
- ref,
18
- variant,
19
- ...rest
20
- }, forwardedRef) => /*#__PURE__*/React.createElement(StyledToken, _extends({
21
- leadingVisual: () => /*#__PURE__*/React.createElement(Avatar, {
22
- src: avatarSrc,
23
- size: tokenSizes[variant || defaultTokenSize] - parseInt(primitives.spacing.normal.spacer[1], 10) * 2
24
- }),
25
- variant: variant,
26
- id: id === null || id === void 0 ? void 0 : id.toString(),
27
- ref: forwardedRef
28
- }, rest)));
29
- export default TokenProfile;
@@ -1,3 +0,0 @@
1
- import { TokenButtonProps } from './_tokenButtonUtils';
2
- declare const RemoveTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
3
- export default RemoveTokenButton;
@@ -1,30 +0,0 @@
1
- import { XIcon } from '@primer/octicons-react';
2
- import styled from 'styled-components';
3
- import { defaultTokenSize } from "./TokenBase";
4
- import { tokenButtonStyles, variants, getTokenButtonIconSize } from './_tokenButtonUtils';
5
- const RemoveTokenButton = styled.span.attrs(({
6
- borderOffset,
7
- parentTokenTag,
8
- variant,
9
- parentTokenIsInteractive,
10
- ...rest
11
- }) => {
12
- delete rest.children;
13
- return {
14
- borderOffset,
15
- as: parentTokenIsInteractive ? 'span' : 'button',
16
- tabIndex: parentTokenIsInteractive ? -1 : undefined,
17
- 'aria-label': !parentTokenIsInteractive ? 'Remove token' : undefined,
18
- children: /*#__PURE__*/React.createElement(XIcon, {
19
- size: getTokenButtonIconSize(variant)
20
- }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
21
-
22
- };
23
- }).withConfig({
24
- displayName: "_RemoveTokenButton__RemoveTokenButton",
25
- componentId: "sc-14lvcw1-0"
26
- })(["", " ", " transform:", ";"], tokenButtonStyles, variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
27
- RemoveTokenButton.defaultProps = {
28
- variant: defaultTokenSize
29
- };
30
- export default RemoveTokenButton;
@@ -1,10 +0,0 @@
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;
@@ -1,26 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { variant } from 'styled-system';
3
- import { get } from '../constants';
4
- import { tokenSizes, defaultTokenSize } from "./TokenBase";
5
- export const variants = variant({
6
- variants: {
7
- sm: {
8
- height: `${tokenSizes.sm}px`,
9
- width: `${tokenSizes.sm}px`
10
- },
11
- md: {
12
- height: `${tokenSizes.md}px`,
13
- width: `${tokenSizes.md}px`
14
- },
15
- lg: {
16
- height: `${tokenSizes.lg}px`,
17
- width: `${tokenSizes.lg}px`
18
- },
19
- xl: {
20
- height: `${tokenSizes.xl}px`,
21
- width: `${tokenSizes.xl}px`
22
- }
23
- }
24
- });
25
- export const tokenButtonStyles = 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:", ";}"], get('colors.fade.fg10'), get('colors.fade.fg15'));
26
- export const getTokenButtonIconSize = variant => tokenSizes[variant || defaultTokenSize] * 0.75;
@@ -1,2 +0,0 @@
1
- declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
2
- export default UnstyledTextInput;
@@ -1,7 +0,0 @@
1
- import styled from "styled-components";
2
- import sx from './sx';
3
- const UnstyledTextInput = styled.input.withConfig({
4
- displayName: "_UnstyledTextInput__UnstyledTextInput",
5
- componentId: "sc-1jgl33s-0"
6
- })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx);
7
- export default UnstyledTextInput;
@@ -1 +0,0 @@
1
- export declare const scrollIntoViewingArea: (child: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
@@ -1,30 +0,0 @@
1
- export const scrollIntoViewingArea = (child, container, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
2
- const startSide = direction === 'vertical' ? 'top' : 'left';
3
- const endSide = direction === 'vertical' ? 'bottom' : 'right';
4
- const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
5
- const {
6
- [startSide]: childStart,
7
- [endSide]: childEnd
8
- } = child.getBoundingClientRect();
9
- const {
10
- [startSide]: containerStart,
11
- [endSide]: containerEnd
12
- } = container.getBoundingClientRect();
13
- const isChildStartAboveViewingArea = childStart < containerStart + endMargin;
14
- const isChildBottomBelowViewingArea = childEnd > containerEnd - startMargin;
15
-
16
- if (isChildStartAboveViewingArea) {
17
- const scrollHeightToChildStart = childStart - containerStart + container[scrollSide];
18
- container.scrollTo({
19
- behavior,
20
- [startSide]: scrollHeightToChildStart - endMargin
21
- });
22
- } else if (isChildBottomBelowViewingArea) {
23
- const scrollHeightToChildBottom = childEnd - containerEnd + container[scrollSide];
24
- container.scrollTo({
25
- behavior,
26
- [startSide]: scrollHeightToChildBottom + startMargin
27
- });
28
- } // either completely in view or outside viewing area on both ends, don't scroll
29
-
30
- };