@primer/components 0.0.0-2021829163659 → 0.0.0-20218292130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -1
- package/dist/browser.esm.js +9 -10
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +24 -25
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.d.ts +16 -4
- package/lib/ActionList/Item.js +9 -6
- package/lib/ActionList/List.d.ts +11 -7
- package/lib/ActionList/List.js +2 -2
- package/lib/ActionList/index.d.ts +1 -2
- package/lib/FilteredActionList/FilteredActionList.js +31 -5
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +5 -10
- package/lib/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib/TextInput.d.ts +3 -6
- package/lib/TextInput.js +10 -9
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +6 -11
- package/lib/utils/types.d.ts +0 -3
- package/lib-esm/ActionList/Item.d.ts +16 -4
- package/lib-esm/ActionList/Item.js +8 -5
- package/lib-esm/ActionList/List.d.ts +11 -7
- package/lib-esm/ActionList/List.js +2 -2
- package/lib-esm/ActionList/index.d.ts +1 -2
- package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +5 -8
- package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib-esm/TextInput.d.ts +3 -6
- package/lib-esm/TextInput.js +9 -8
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +6 -11
- package/lib-esm/utils/types.d.ts +0 -3
- package/package.json +3 -5
- package/lib/Autocomplete/Autocomplete.d.ts +0 -31
- package/lib/Autocomplete/Autocomplete.js +0 -60
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -14
- package/lib/Autocomplete/AutocompleteContext.js +0 -11
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -148
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -70
- package/lib/Autocomplete/AutocompleteMenu.js +0 -250
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/Badge/Badge.d.ts +0 -8
- package/lib/Badge/Badge.js +0 -59
- package/lib/Badge/BadgeState.d.ts +0 -13
- package/lib/Badge/BadgeState.js +0 -51
- package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
- package/lib/Badge/_badgeStyleUtils.js +0 -39
- package/lib/TextInputTokens.d.ts +0 -43
- package/lib/TextInputTokens.js +0 -237
- package/lib/Token/Token.d.ts +0 -14
- package/lib/Token/Token.js +0 -75
- package/lib/Token/TokenBase.d.ts +0 -16
- package/lib/Token/TokenBase.js +0 -90
- package/lib/Token/TokenLabel.d.ts +0 -14
- package/lib/Token/TokenLabel.js +0 -135
- package/lib/Token/TokenProfile.d.ts +0 -7
- package/lib/Token/TokenProfile.js +0 -50
- package/lib/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib/Token/_RemoveTokenButton.js +0 -45
- package/lib/Token/_tokenButtonUtils.d.ts +0 -10
- package/lib/Token/_tokenButtonUtils.js +0 -42
- package/lib/_UnstyledTextInput.d.ts +0 -2
- package/lib/_UnstyledTextInput.js +0 -20
- package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib/utils/scrollIntoViewingArea.js +0 -39
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -31
- package/lib-esm/Autocomplete/Autocomplete.js +0 -40
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -14
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -129
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -70
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -224
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/Badge/Badge.d.ts +0 -8
- package/lib-esm/Badge/Badge.js +0 -44
- package/lib-esm/Badge/BadgeState.d.ts +0 -13
- package/lib-esm/Badge/BadgeState.js +0 -40
- package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
- package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
- package/lib-esm/TextInputTokens.d.ts +0 -43
- package/lib-esm/TextInputTokens.js +0 -210
- package/lib-esm/Token/Token.d.ts +0 -14
- package/lib-esm/Token/Token.js +0 -56
- package/lib-esm/Token/TokenBase.d.ts +0 -16
- package/lib-esm/Token/TokenBase.js +0 -70
- package/lib-esm/Token/TokenLabel.d.ts +0 -14
- package/lib-esm/Token/TokenLabel.js +0 -115
- package/lib-esm/Token/TokenProfile.d.ts +0 -7
- package/lib-esm/Token/TokenProfile.js +0 -29
- package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib-esm/Token/_RemoveTokenButton.js +0 -30
- package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -10
- package/lib-esm/Token/_tokenButtonUtils.js +0 -26
- package/lib-esm/_UnstyledTextInput.d.ts +0 -2
- package/lib-esm/_UnstyledTextInput.js +0 -7
- package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
package/lib-esm/Token/Token.js
DELETED
@@ -1,56 +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
|
-
hideRemoveButton: hideRemoveButton || !handleRemove,
|
43
|
-
id: id === null || id === void 0 ? void 0 : id.toString(),
|
44
|
-
text: text,
|
45
|
-
ref: forwardedRef,
|
46
|
-
variant: variant
|
47
|
-
}, 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, {
|
48
|
-
borderOffset: tokenBorderWidthPx,
|
49
|
-
parentTokenTag: as || 'span',
|
50
|
-
onClick: handleRemoveClick,
|
51
|
-
variant: variant,
|
52
|
-
parentTokenIsInteractive: isTokenInteractive(props),
|
53
|
-
"aria-hidden": hasMultipleActionTargets ? "true" : "false"
|
54
|
-
}) : null);
|
55
|
-
});
|
56
|
-
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,115 +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(30).toString() : 'transparent';
|
72
|
-
|
73
|
-
if (isFillColorLight) {
|
74
|
-
textColor = '#000';
|
75
|
-
}
|
76
|
-
|
77
|
-
if (isSelected) {
|
78
|
-
bgColor = isFillColorDark ? tinycolor(fillColor).lighten(30).toString() : tinycolor(fillColor).darken(30).toString();
|
79
|
-
}
|
80
|
-
}
|
81
|
-
|
82
|
-
const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(handleRemove) && !hideRemoveButton;
|
83
|
-
|
84
|
-
const handleRemoveClick = e => {
|
85
|
-
e.stopPropagation();
|
86
|
-
handleRemove && handleRemove();
|
87
|
-
};
|
88
|
-
|
89
|
-
return /*#__PURE__*/React.createElement(StyledTokenLabel // specific to labels
|
90
|
-
, _extends({
|
91
|
-
fillColor: fillColor,
|
92
|
-
bgColor: bgColor,
|
93
|
-
borderColor: borderColor,
|
94
|
-
textColor: textColor // common token props
|
95
|
-
,
|
96
|
-
as: as,
|
97
|
-
hideRemoveButton: hideRemoveButton || !handleRemove,
|
98
|
-
id: id === null || id === void 0 ? void 0 : id.toString(),
|
99
|
-
isSelected: isSelected,
|
100
|
-
ref: forwardedRef,
|
101
|
-
text: text,
|
102
|
-
variant: variant
|
103
|
-
}, rest), /*#__PURE__*/React.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
|
104
|
-
borderOffset: tokenBorderWidthPx,
|
105
|
-
parentTokenTag: as || 'span',
|
106
|
-
tabIndex: -1,
|
107
|
-
onClick: handleRemoveClick,
|
108
|
-
variant: variant,
|
109
|
-
"aria-hidden": hasMultipleActionTargets ? "true" : "false"
|
110
|
-
}) : null);
|
111
|
-
});
|
112
|
-
TokenLabel.defaultProps = {
|
113
|
-
fillColor: '#999'
|
114
|
-
};
|
115
|
-
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,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,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
|
-
};
|