@primer/components 0.0.0-202183020732 → 0.0.0-2021830223623
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/dist/browser.esm.js +771 -716
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +410 -355
- 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/Dialog/ConfirmationDialog.js +3 -3
- package/lib/Dialog/Dialog.d.ts +5 -0
- package/lib/Dialog/Dialog.js +16 -4
- package/lib/Token/Token.d.ts +14 -0
- package/lib/Token/Token.js +76 -0
- package/lib/Token/TokenBase.d.ts +16 -0
- package/lib/Token/TokenBase.js +90 -0
- package/lib/Token/TokenLabel.d.ts +14 -0
- package/lib/Token/TokenLabel.js +141 -0
- package/lib/Token/TokenProfile.d.ts +7 -0
- package/lib/Token/TokenProfile.js +50 -0
- package/lib/Token/_RemoveTokenButton.d.ts +3 -0
- package/lib/Token/_RemoveTokenButton.js +44 -0
- package/lib/Token/_tokenButtonUtils.d.ts +10 -0
- package/lib/Token/_tokenButtonUtils.js +42 -0
- package/lib/Token/index.d.ts +3 -0
- package/lib/Token/index.js +31 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +20 -0
- 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/Dialog/ConfirmationDialog.js +3 -3
- package/lib-esm/Dialog/Dialog.d.ts +5 -0
- package/lib-esm/Dialog/Dialog.js +17 -5
- package/lib-esm/Token/Token.d.ts +14 -0
- package/lib-esm/Token/Token.js +57 -0
- package/lib-esm/Token/TokenBase.d.ts +16 -0
- package/lib-esm/Token/TokenBase.js +70 -0
- package/lib-esm/Token/TokenLabel.d.ts +14 -0
- package/lib-esm/Token/TokenLabel.js +121 -0
- package/lib-esm/Token/TokenProfile.d.ts +7 -0
- package/lib-esm/Token/TokenProfile.js +29 -0
- package/lib-esm/Token/_RemoveTokenButton.d.ts +3 -0
- package/lib-esm/Token/_RemoveTokenButton.js +29 -0
- package/lib-esm/Token/_tokenButtonUtils.d.ts +10 -0
- package/lib-esm/Token/_tokenButtonUtils.js +26 -0
- package/lib-esm/Token/index.d.ts +3 -0
- package/lib-esm/Token/index.js +3 -0
- package/lib-esm/index.d.ts +1 -0
- package/lib-esm/index.js +1 -0
- package/package.json +8 -5
@@ -0,0 +1,7 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TokenBaseProps } from './TokenBase';
|
3
|
+
export interface TokenProfileProps extends TokenBaseProps {
|
4
|
+
avatarSrc: string;
|
5
|
+
}
|
6
|
+
declare const TokenProfile: React.ForwardRefExoticComponent<Pick<TokenProfileProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "handleRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
|
7
|
+
export default TokenProfile;
|
@@ -0,0 +1,50 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
11
|
+
|
12
|
+
var _constants = require("../constants");
|
13
|
+
|
14
|
+
var _primitives = _interopRequireDefault(require("@primer/primitives"));
|
15
|
+
|
16
|
+
var _TokenBase = require("./TokenBase");
|
17
|
+
|
18
|
+
var _Token = _interopRequireDefault(require("./Token"));
|
19
|
+
|
20
|
+
var _ = require("..");
|
21
|
+
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
23
|
+
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
25
|
+
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
27
|
+
|
28
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
29
|
+
|
30
|
+
const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
|
31
|
+
displayName: "TokenProfile__StyledToken",
|
32
|
+
componentId: "sc-1vf9jhf-0"
|
33
|
+
})(["padding-left:", ";"], (0, _constants.get)('space.1'));
|
34
|
+
const TokenProfile = /*#__PURE__*/(0, _react.forwardRef)(({
|
35
|
+
avatarSrc,
|
36
|
+
id,
|
37
|
+
ref,
|
38
|
+
variant,
|
39
|
+
...rest
|
40
|
+
}, forwardedRef) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
|
41
|
+
leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
|
42
|
+
src: avatarSrc,
|
43
|
+
size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
|
44
|
+
}),
|
45
|
+
variant: variant,
|
46
|
+
id: id === null || id === void 0 ? void 0 : id.toString(),
|
47
|
+
ref: forwardedRef
|
48
|
+
}, rest)));
|
49
|
+
var _default = TokenProfile;
|
50
|
+
exports.default = _default;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _octiconsReact = require("@primer/octicons-react");
|
9
|
+
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
11
|
+
|
12
|
+
var _TokenBase = require("./TokenBase");
|
13
|
+
|
14
|
+
var _tokenButtonUtils = require("./_tokenButtonUtils");
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
+
|
18
|
+
const RemoveTokenButton = _styledComponents.default.span.attrs(({
|
19
|
+
borderOffset,
|
20
|
+
parentTokenTag,
|
21
|
+
variant,
|
22
|
+
parentTokenIsInteractive,
|
23
|
+
...rest
|
24
|
+
}) => {
|
25
|
+
delete rest.children;
|
26
|
+
return {
|
27
|
+
borderOffset,
|
28
|
+
as: parentTokenIsInteractive ? 'span' : 'button',
|
29
|
+
tabIndex: parentTokenIsInteractive ? -1 : undefined,
|
30
|
+
'aria-label': !parentTokenIsInteractive ? 'Remove token' : undefined,
|
31
|
+
children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
|
32
|
+
size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
|
33
|
+
})
|
34
|
+
};
|
35
|
+
}).withConfig({
|
36
|
+
displayName: "_RemoveTokenButton__RemoveTokenButton",
|
37
|
+
componentId: "sc-14lvcw1-0"
|
38
|
+
})(["", " ", " transform:", ";"], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
|
39
|
+
|
40
|
+
RemoveTokenButton.defaultProps = {
|
41
|
+
variant: _TokenBase.defaultTokenSize
|
42
|
+
};
|
43
|
+
var _default = RemoveTokenButton;
|
44
|
+
exports.default = _default;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { TokenSizeKeys } from "./TokenBase";
|
2
|
+
export interface TokenButtonProps {
|
3
|
+
borderOffset?: number;
|
4
|
+
parentTokenTag: 'span' | 'button' | 'a';
|
5
|
+
variant?: TokenSizeKeys;
|
6
|
+
parentTokenIsInteractive?: boolean;
|
7
|
+
}
|
8
|
+
export declare const variants: (...args: any[]) => any;
|
9
|
+
export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
10
|
+
export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;
|
@@ -0,0 +1,42 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = require("styled-components");
|
9
|
+
|
10
|
+
var _styledSystem = require("styled-system");
|
11
|
+
|
12
|
+
var _constants = require("../constants");
|
13
|
+
|
14
|
+
var _TokenBase = require("./TokenBase");
|
15
|
+
|
16
|
+
const variants = (0, _styledSystem.variant)({
|
17
|
+
variants: {
|
18
|
+
sm: {
|
19
|
+
height: `${_TokenBase.tokenSizes.sm}px`,
|
20
|
+
width: `${_TokenBase.tokenSizes.sm}px`
|
21
|
+
},
|
22
|
+
md: {
|
23
|
+
height: `${_TokenBase.tokenSizes.md}px`,
|
24
|
+
width: `${_TokenBase.tokenSizes.md}px`
|
25
|
+
},
|
26
|
+
lg: {
|
27
|
+
height: `${_TokenBase.tokenSizes.lg}px`,
|
28
|
+
width: `${_TokenBase.tokenSizes.lg}px`
|
29
|
+
},
|
30
|
+
xl: {
|
31
|
+
height: `${_TokenBase.tokenSizes.xl}px`,
|
32
|
+
width: `${_TokenBase.tokenSizes.xl}px`
|
33
|
+
}
|
34
|
+
}
|
35
|
+
});
|
36
|
+
exports.variants = variants;
|
37
|
+
const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
|
38
|
+
exports.tokenButtonStyles = tokenButtonStyles;
|
39
|
+
|
40
|
+
const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
|
41
|
+
|
42
|
+
exports.getTokenButtonIconSize = getTokenButtonIconSize;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "default", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function () {
|
9
|
+
return _Token.default;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "TokenLabel", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function () {
|
15
|
+
return _TokenLabel.default;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "TokenProfile", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function () {
|
21
|
+
return _TokenProfile.default;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
|
25
|
+
var _Token = _interopRequireDefault(require("./Token"));
|
26
|
+
|
27
|
+
var _TokenLabel = _interopRequireDefault(require("./TokenLabel"));
|
28
|
+
|
29
|
+
var _TokenProfile = _interopRequireDefault(require("./TokenProfile"));
|
30
|
+
|
31
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/lib/index.d.ts
CHANGED
@@ -102,6 +102,7 @@ export { default as Text } from './Text';
|
|
102
102
|
export type { TextProps } from './Text';
|
103
103
|
export { default as Timeline } from './Timeline';
|
104
104
|
export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
|
105
|
+
export { default as Token, TokenLabel, TokenProfile } from './Token';
|
105
106
|
export { default as Tooltip } from './Tooltip';
|
106
107
|
export type { TooltipProps } from './Tooltip';
|
107
108
|
export { default as Truncate } from './Truncate';
|
package/lib/index.js
CHANGED
@@ -441,6 +441,24 @@ Object.defineProperty(exports, "Timeline", {
|
|
441
441
|
return _Timeline.default;
|
442
442
|
}
|
443
443
|
});
|
444
|
+
Object.defineProperty(exports, "Token", {
|
445
|
+
enumerable: true,
|
446
|
+
get: function () {
|
447
|
+
return _Token.default;
|
448
|
+
}
|
449
|
+
});
|
450
|
+
Object.defineProperty(exports, "TokenLabel", {
|
451
|
+
enumerable: true,
|
452
|
+
get: function () {
|
453
|
+
return _Token.TokenLabel;
|
454
|
+
}
|
455
|
+
});
|
456
|
+
Object.defineProperty(exports, "TokenProfile", {
|
457
|
+
enumerable: true,
|
458
|
+
get: function () {
|
459
|
+
return _Token.TokenProfile;
|
460
|
+
}
|
461
|
+
});
|
444
462
|
Object.defineProperty(exports, "Tooltip", {
|
445
463
|
enumerable: true,
|
446
464
|
get: function () {
|
@@ -586,6 +604,8 @@ var _Text = _interopRequireDefault(require("./Text"));
|
|
586
604
|
|
587
605
|
var _Timeline = _interopRequireDefault(require("./Timeline"));
|
588
606
|
|
607
|
+
var _Token = _interopRequireWildcard(require("./Token"));
|
608
|
+
|
589
609
|
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
590
610
|
|
591
611
|
var _Truncate = _interopRequireDefault(require("./Truncate"));
|
@@ -2,10 +2,12 @@ import { IconProps } from '@primer/octicons-react';
|
|
2
2
|
import React from 'react';
|
3
3
|
import { SxProp } from '../sx';
|
4
4
|
import { ItemInput } from './List';
|
5
|
+
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
6
|
+
import { AriaRole } from '../utils/types';
|
5
7
|
/**
|
6
8
|
* Contract for props passed to the `Item` component.
|
7
9
|
*/
|
8
|
-
export interface ItemProps extends
|
10
|
+
export interface ItemProps extends SxProp {
|
9
11
|
/**
|
10
12
|
* Primary text which names an `Item`.
|
11
13
|
*/
|
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
|
|
68
70
|
* An id associated with this item. Should be unique between items
|
69
71
|
*/
|
70
72
|
id?: number | string;
|
73
|
+
/**
|
74
|
+
* Node to be included inside the item before the text.
|
75
|
+
*/
|
76
|
+
children?: React.ReactNode;
|
77
|
+
/**
|
78
|
+
* The ARIA role describing the function of `List` component. `option` is a common value.
|
79
|
+
*/
|
80
|
+
role?: AriaRole;
|
81
|
+
/**
|
82
|
+
* An item to pass back in the `onAction` callback, meant as
|
83
|
+
*/
|
84
|
+
item?: ItemInput;
|
71
85
|
}
|
72
86
|
export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
|
73
87
|
dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
|
@@ -75,6 +89,4 @@ export declare const TextContainer: import("styled-components").StyledComponent<
|
|
75
89
|
/**
|
76
90
|
* An actionable or selectable `Item` with an optional icon and description.
|
77
91
|
*/
|
78
|
-
export declare
|
79
|
-
item?: ItemInput;
|
80
|
-
}): JSX.Element;
|
92
|
+
export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
|
@@ -11,10 +11,10 @@ import { StyledDivider } from './Divider';
|
|
11
11
|
import { useColorSchemeVar, useTheme } from '../ThemeProvider';
|
12
12
|
import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
|
13
13
|
import { useSSRSafeId } from '@react-aria/ssr';
|
14
|
+
|
14
15
|
/**
|
15
16
|
* These colors are not yet in our default theme. Need to remove this once they are added.
|
16
17
|
*/
|
17
|
-
|
18
18
|
const customItemThemes = {
|
19
19
|
default: {
|
20
20
|
hover: {
|
@@ -85,7 +85,7 @@ const MainContent = styled.div.withConfig({
|
|
85
85
|
const StyledItem = styled.div.withConfig({
|
86
86
|
displayName: "Item__StyledItem",
|
87
87
|
componentId: "jqpvy8-2"
|
88
|
-
})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
|
88
|
+
})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
|
89
89
|
variant,
|
90
90
|
item
|
91
91
|
}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
|
@@ -144,8 +144,9 @@ const MultiSelectInput = styled.input.withConfig({
|
|
144
144
|
* An actionable or selectable `Item` with an optional icon and description.
|
145
145
|
*/
|
146
146
|
|
147
|
-
export
|
147
|
+
export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
|
148
148
|
const {
|
149
|
+
as: Component,
|
149
150
|
text,
|
150
151
|
description,
|
151
152
|
descriptionVariant = 'inline',
|
@@ -201,6 +202,8 @@ export function Item(itemProps) {
|
|
201
202
|
theme
|
202
203
|
} = useTheme();
|
203
204
|
return /*#__PURE__*/React.createElement(StyledItem, _extends({
|
205
|
+
ref: ref,
|
206
|
+
as: Component,
|
204
207
|
tabIndex: disabled ? undefined : -1,
|
205
208
|
variant: variant,
|
206
209
|
showDivider: showDivider,
|
@@ -246,5 +249,5 @@ export function Item(itemProps) {
|
|
246
249
|
variant: variant,
|
247
250
|
disabled: disabled
|
248
251
|
}, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
|
249
|
-
}
|
250
|
-
Item.displayName =
|
252
|
+
});
|
253
|
+
Item.displayName = 'ActionList.Item';
|
@@ -1,9 +1,12 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { Key } from 'react';
|
2
2
|
import type { AriaRole } from '../utils/types';
|
3
3
|
import { Group, GroupProps } from './Group';
|
4
|
-
import {
|
5
|
-
|
6
|
-
|
4
|
+
import { ItemProps } from './Item';
|
5
|
+
declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
|
6
|
+
export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
|
7
|
+
renderItem: RenderItemFn;
|
8
|
+
}) & {
|
9
|
+
key?: Key;
|
7
10
|
});
|
8
11
|
/**
|
9
12
|
* Contract for props passed to the `List` component.
|
@@ -26,7 +29,7 @@ export interface ListPropsBase {
|
|
26
29
|
* without a `Group`-level or `Item`-level custom `Item` renderer will be
|
27
30
|
* rendered using this function component.
|
28
31
|
*/
|
29
|
-
renderItem?:
|
32
|
+
renderItem?: RenderItemFn;
|
30
33
|
/**
|
31
34
|
* A `List`-level custom `Group` renderer. Every `Group` within this `List`
|
32
35
|
* without a `Group`-level custom `Item` renderer will be rendered using
|
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
|
|
58
61
|
* and `Group`-level custom `Item` or `Group` renderers.
|
59
62
|
*/
|
60
63
|
groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
|
61
|
-
renderItem?:
|
64
|
+
renderItem?: RenderItemFn;
|
62
65
|
renderGroup?: typeof Group;
|
63
66
|
}, 'items'>) & {
|
64
67
|
groupId: string;
|
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
|
|
68
71
|
* and `Item`-level custom `Item` renderers.
|
69
72
|
*/
|
70
73
|
items: ((ItemProps | (Partial<ItemProps> & {
|
71
|
-
renderItem:
|
74
|
+
renderItem: RenderItemFn;
|
72
75
|
})) & {
|
73
76
|
groupId: string;
|
74
77
|
})[];
|
@@ -81,3 +84,4 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
|
|
81
84
|
* Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
|
82
85
|
*/
|
83
86
|
export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
|
87
|
+
export {};
|
@@ -90,11 +90,11 @@ export const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
90
90
|
|
91
91
|
|
92
92
|
const renderItem = (itemProps, item, itemIndex) => {
|
93
|
-
var _ref2,
|
93
|
+
var _ref2, _ref3, _itemProps$id;
|
94
94
|
|
95
95
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
96
96
|
const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
|
97
|
-
const key = (_ref2 = (
|
97
|
+
const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
|
98
98
|
return /*#__PURE__*/React.createElement(ItemComponent, _extends({
|
99
99
|
showDivider: props.showItemDividers,
|
100
100
|
selectionVariant: props.selectionVariant
|
@@ -1,6 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { Group } from './Group';
|
3
|
-
import { Item } from './Item';
|
4
3
|
import { Divider } from './Divider';
|
5
4
|
export type { ListProps as ActionListProps } from './List';
|
6
5
|
export type { GroupProps } from './Group';
|
@@ -12,7 +11,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
|
|
12
11
|
/** Collects related `Items` in an `ActionList`. */
|
13
12
|
Group: typeof Group;
|
14
13
|
/** An actionable or selectable `Item` with an optional icon and description. */
|
15
|
-
Item:
|
14
|
+
Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
|
16
15
|
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
17
16
|
Divider: typeof Divider;
|
18
17
|
};
|
@@ -97,13 +97,13 @@ export const ConfirmationDialog = props => {
|
|
97
97
|
}, [onClose]);
|
98
98
|
const cancelButton = {
|
99
99
|
content: cancelButtonContent,
|
100
|
-
onClick: onCancelButtonClick
|
101
|
-
autoFocus: true
|
100
|
+
onClick: onCancelButtonClick
|
102
101
|
};
|
103
102
|
const confirmButton = {
|
104
103
|
content: confirmButtonContent,
|
105
104
|
buttonType: confirmButtonType,
|
106
|
-
onClick: onConfirmButtonClick
|
105
|
+
onClick: onConfirmButtonClick,
|
106
|
+
autoFocus: true
|
107
107
|
};
|
108
108
|
const footerButtons = [cancelButton, confirmButton];
|
109
109
|
return /*#__PURE__*/React.createElement(Dialog, {
|
@@ -19,6 +19,11 @@ export declare type DialogButtonProps = ButtonProps & {
|
|
19
19
|
* focus this button automatically when the dialog appears.
|
20
20
|
*/
|
21
21
|
autoFocus?: boolean;
|
22
|
+
/**
|
23
|
+
* A reference to the rendered Button’s DOM node, used together with
|
24
|
+
* `autoFocus` for `focusTrap`’s `initialFocus`.
|
25
|
+
*/
|
26
|
+
ref?: React.RefObject<HTMLButtonElement>;
|
22
27
|
};
|
23
28
|
/**
|
24
29
|
* Props to customize the rendering of the Dialog.
|
package/lib-esm/Dialog/Dialog.js
CHANGED
@@ -5,7 +5,7 @@ import styled from 'styled-components';
|
|
5
5
|
import Button, { ButtonPrimary, ButtonDanger } from '../Button';
|
6
6
|
import Box from '../Box';
|
7
7
|
import { get, COMMON, POSITION } from '../constants';
|
8
|
-
import { useOnEscapePress } from '../hooks';
|
8
|
+
import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
|
9
9
|
import { useFocusTrap } from '../hooks/useFocusTrap';
|
10
10
|
import sx from '../sx';
|
11
11
|
import StyledOcticon from '../StyledOcticon';
|
@@ -112,10 +112,19 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
112
112
|
onClose,
|
113
113
|
role = 'dialog',
|
114
114
|
width = 'xlarge',
|
115
|
-
height = 'auto'
|
115
|
+
height = 'auto',
|
116
|
+
footerButtons = []
|
116
117
|
} = props;
|
117
118
|
const dialogLabelId = useSSRSafeId();
|
118
119
|
const dialogDescriptionId = useSSRSafeId();
|
120
|
+
const autoFocusedFooterButtonRef = useRef(null);
|
121
|
+
|
122
|
+
for (const footerButton of footerButtons) {
|
123
|
+
if (footerButton.autoFocus) {
|
124
|
+
footerButton.ref = autoFocusedFooterButtonRef;
|
125
|
+
}
|
126
|
+
}
|
127
|
+
|
119
128
|
const defaultedProps = { ...props,
|
120
129
|
title,
|
121
130
|
subtitle,
|
@@ -128,7 +137,8 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
128
137
|
const backdropRef = useRef(null);
|
129
138
|
useFocusTrap({
|
130
139
|
containerRef: dialogRef,
|
131
|
-
restoreFocusOnCleanUp: true
|
140
|
+
restoreFocusOnCleanUp: true,
|
141
|
+
initialFocusRef: autoFocusedFooterButtonRef
|
132
142
|
});
|
133
143
|
useOnEscapePress(event => {
|
134
144
|
onClose('escape');
|
@@ -183,7 +193,9 @@ const buttonTypes = {
|
|
183
193
|
const Buttons = ({
|
184
194
|
buttons
|
185
195
|
}) => {
|
186
|
-
|
196
|
+
var _buttons$find;
|
197
|
+
|
198
|
+
const autoFocusRef = useProvidedRefOrCreate((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
|
187
199
|
let autoFocusCount = 0;
|
188
200
|
const [hasRendered, setHasRendered] = useState(0);
|
189
201
|
useEffect(() => {
|
@@ -195,7 +207,7 @@ const Buttons = ({
|
|
195
207
|
} else {
|
196
208
|
setHasRendered(hasRendered + 1);
|
197
209
|
}
|
198
|
-
}, [hasRendered]);
|
210
|
+
}, [autoFocusRef, hasRendered]);
|
199
211
|
return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
|
200
212
|
const {
|
201
213
|
content,
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TokenBaseProps } from './TokenBase';
|
3
|
+
export interface TokenProps extends TokenBaseProps {
|
4
|
+
/**
|
5
|
+
* A function that renders a component before the token text
|
6
|
+
*/
|
7
|
+
leadingVisual?: React.FunctionComponent<any>;
|
8
|
+
/**
|
9
|
+
* Whether the remove button should be rendered in the token
|
10
|
+
*/
|
11
|
+
hideRemoveButton?: boolean;
|
12
|
+
}
|
13
|
+
declare const Token: React.ForwardRefExoticComponent<Pick<TokenProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "leadingVisual" | "handleRemove" | "isSelected" | "hideRemoveButton"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
|
14
|
+
export default Token;
|
@@ -0,0 +1,57 @@
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
|
+
|
3
|
+
import React, { forwardRef } from 'react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
import { get } from '../constants';
|
6
|
+
import TokenBase, { isTokenInteractive } from './TokenBase';
|
7
|
+
import RemoveTokenButton from './_RemoveTokenButton';
|
8
|
+
const tokenBorderWidthPx = 1;
|
9
|
+
const DefaultTokenStyled = styled(TokenBase).withConfig({
|
10
|
+
displayName: "Token__DefaultTokenStyled",
|
11
|
+
componentId: "sc-1dg52pw-0"
|
12
|
+
})(["background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";max-width:100%;padding-right:", ";&:hover{background-color:", ";box-shadow:", ";color:", ";}"], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, props => isTokenInteractive(props) ? get('colors.neutral.muted') : undefined, props => isTokenInteractive(props) ? get('colors.shadow.medium') : undefined, props => isTokenInteractive(props) ? get('colors.fg.default') : undefined);
|
13
|
+
const TokenTextContainer = styled('span').withConfig({
|
14
|
+
displayName: "Token__TokenTextContainer",
|
15
|
+
componentId: "sc-1dg52pw-1"
|
16
|
+
})(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
17
|
+
const LeadingVisualContainer = styled('span').withConfig({
|
18
|
+
displayName: "Token__LeadingVisualContainer",
|
19
|
+
componentId: "sc-1dg52pw-2"
|
20
|
+
})(["flex-shrink:0;line-height:0;"]);
|
21
|
+
const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
22
|
+
const {
|
23
|
+
as,
|
24
|
+
handleRemove,
|
25
|
+
id,
|
26
|
+
leadingVisual: LeadingVisual,
|
27
|
+
ref,
|
28
|
+
text,
|
29
|
+
variant,
|
30
|
+
hideRemoveButton,
|
31
|
+
...rest
|
32
|
+
} = props;
|
33
|
+
const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(handleRemove) && !hideRemoveButton;
|
34
|
+
|
35
|
+
const handleRemoveClick = e => {
|
36
|
+
e.stopPropagation();
|
37
|
+
handleRemove && handleRemove();
|
38
|
+
};
|
39
|
+
|
40
|
+
return /*#__PURE__*/React.createElement(DefaultTokenStyled, _extends({
|
41
|
+
as: as,
|
42
|
+
handleRemove: handleRemove,
|
43
|
+
hideRemoveButton: hideRemoveButton || !handleRemove,
|
44
|
+
id: id === null || id === void 0 ? void 0 : id.toString(),
|
45
|
+
text: text,
|
46
|
+
ref: forwardedRef,
|
47
|
+
variant: variant
|
48
|
+
}, rest), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
|
49
|
+
borderOffset: tokenBorderWidthPx,
|
50
|
+
parentTokenTag: as || 'span',
|
51
|
+
onClick: handleRemoveClick,
|
52
|
+
variant: variant,
|
53
|
+
parentTokenIsInteractive: isTokenInteractive(props),
|
54
|
+
"aria-hidden": hasMultipleActionTargets ? "true" : "false"
|
55
|
+
}) : null);
|
56
|
+
});
|
57
|
+
export default Token;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare type TokenSizeKeys = 'sm' | 'md' | 'lg' | 'xl';
|
3
|
+
export declare const tokenSizes: Record<TokenSizeKeys, number>;
|
4
|
+
export declare const defaultTokenSize = "md";
|
5
|
+
export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
|
6
|
+
as?: 'button' | 'a' | 'span';
|
7
|
+
handleRemove?: () => void;
|
8
|
+
isSelected?: boolean;
|
9
|
+
tabIndex?: number;
|
10
|
+
text: string;
|
11
|
+
id?: number | string;
|
12
|
+
variant?: TokenSizeKeys;
|
13
|
+
}
|
14
|
+
export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
|
15
|
+
declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps, never>;
|
16
|
+
export default TokenBase;
|