@primer/components 0.0.0-2021821193917 → 0.0.0-2021823142332
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 +34 -2
- package/dist/browser.esm.js +665 -619
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +432 -386
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Divider.js +1 -1
- package/lib/ActionList/Header.js +2 -2
- package/lib/ActionList/Item.js +13 -13
- package/lib/ActionList/List.js +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.js +2 -2
- package/lib/Avatar.d.ts +4 -0
- package/lib/AvatarPair.js +1 -1
- package/lib/AvatarStack.js +1 -1
- package/lib/BranchName.js +1 -1
- package/lib/Breadcrumb.js +2 -2
- package/lib/Button/Button.d.ts +0 -1
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.d.ts +1 -2
- package/lib/Button/ButtonClose.js +1 -1
- package/lib/Button/ButtonDanger.d.ts +0 -1
- package/lib/Button/ButtonInvisible.d.ts +0 -1
- package/lib/Button/ButtonInvisible.js +1 -1
- package/lib/Button/ButtonOutline.d.ts +0 -1
- package/lib/Button/ButtonPrimary.d.ts +0 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/CircleBadge.js +1 -1
- package/lib/CircleOcticon.d.ts +0 -1
- package/lib/CircleOcticon.js +1 -1
- package/lib/CounterLabel.js +2 -2
- package/lib/Dialog/ConfirmationDialog.js +1 -1
- package/lib/Dialog/Dialog.js +9 -9
- package/lib/Dialog.d.ts +2 -3
- package/lib/Dialog.js +4 -4
- package/lib/Dropdown.d.ts +0 -4
- package/lib/Dropdown.js +2 -2
- package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
- package/lib/DropdownStyles.js +6 -6
- package/lib/FilterList.d.ts +0 -1
- package/lib/FilterList.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +5 -5
- package/lib/Flash.js +1 -1
- package/lib/Label.js +2 -2
- package/lib/Link.js +1 -1
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +6 -11
- package/lib/Pagehead.js +1 -1
- package/lib/Pagination/Pagination.js +1 -1
- package/lib/Popover.js +1 -1
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.js +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +15 -337
- package/lib/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuList.js +1 -1
- package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.js +2 -2
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SelectPanel/SelectPanel.js +3 -2
- package/lib/SideNav.js +5 -5
- package/lib/StateLabel.js +1 -1
- package/lib/SubNav.js +1 -1
- package/lib/TabNav.js +2 -2
- package/lib/TextInput.d.ts +6 -6
- package/lib/TextInput.js +21 -16
- package/lib/Timeline.d.ts +0 -1
- package/lib/Timeline.js +16 -19
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +6 -11
- package/lib/index.d.ts +1 -0
- package/lib/index.js +14 -0
- package/lib/theme-preval.d.ts +12 -6
- package/lib/theme-preval.js +940 -0
- package/lib/utils/ssr.d.ts +1 -0
- package/lib/utils/ssr.js +19 -0
- package/lib/utils/testing.d.ts +1854 -0
- package/lib/utils/uniqueId.js +1 -0
- package/lib-esm/ActionList/Divider.js +1 -1
- package/lib-esm/ActionList/Header.js +2 -2
- package/lib-esm/ActionList/Item.js +14 -14
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
- package/lib-esm/Avatar.d.ts +4 -0
- package/lib-esm/AvatarPair.js +1 -1
- package/lib-esm/AvatarStack.js +1 -1
- package/lib-esm/BranchName.js +1 -1
- package/lib-esm/Breadcrumb.js +2 -2
- package/lib-esm/Button/Button.d.ts +0 -1
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +1 -2
- package/lib-esm/Button/ButtonClose.js +1 -1
- package/lib-esm/Button/ButtonDanger.d.ts +0 -1
- package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
- package/lib-esm/Button/ButtonInvisible.js +1 -1
- package/lib-esm/Button/ButtonOutline.d.ts +0 -1
- package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
- package/lib-esm/Button/ButtonTableList.js +1 -1
- package/lib-esm/CircleBadge.js +1 -1
- package/lib-esm/CircleOcticon.d.ts +0 -1
- package/lib-esm/CircleOcticon.js +1 -1
- package/lib-esm/CounterLabel.js +2 -2
- package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
- package/lib-esm/Dialog/Dialog.js +8 -8
- package/lib-esm/Dialog.d.ts +2 -3
- package/lib-esm/Dialog.js +4 -4
- package/lib-esm/Dropdown.d.ts +0 -4
- package/lib-esm/Dropdown.js +2 -2
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
- package/lib-esm/DropdownStyles.js +6 -6
- package/lib-esm/FilterList.d.ts +0 -1
- package/lib-esm/FilterList.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +5 -5
- package/lib-esm/Flash.js +1 -1
- package/lib-esm/Label.js +2 -2
- package/lib-esm/Link.js +1 -1
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +6 -9
- package/lib-esm/Pagehead.js +1 -1
- package/lib-esm/Pagination/Pagination.js +1 -1
- package/lib-esm/Popover.js +1 -1
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.js +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +15 -337
- package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SelectPanel/SelectPanel.js +3 -2
- package/lib-esm/SideNav.js +5 -5
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/SubNav.js +1 -1
- package/lib-esm/TabNav.js +2 -2
- package/lib-esm/TextInput.d.ts +6 -6
- package/lib-esm/TextInput.js +22 -16
- package/lib-esm/Timeline.d.ts +0 -1
- package/lib-esm/Timeline.js +12 -17
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +6 -11
- package/lib-esm/index.d.ts +1 -0
- package/lib-esm/index.js +2 -1
- package/lib-esm/theme-preval.d.ts +12 -6
- package/lib-esm/theme-preval.js +940 -0
- package/lib-esm/utils/ssr.d.ts +1 -0
- package/lib-esm/utils/ssr.js +1 -0
- package/lib-esm/utils/testing.d.ts +1854 -0
- package/lib-esm/utils/uniqueId.js +1 -0
- package/package.json +9 -9
- package/lib/Autocomplete/Autocomplete.d.ts +0 -36
- package/lib/Autocomplete/Autocomplete.js +0 -55
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
- package/lib/Autocomplete/AutocompleteContext.js +0 -14
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -128
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -54
- package/lib/Autocomplete/AutocompleteMenu.js +0 -268
- 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 -32
- package/lib/TextInputTokens.js +0 -241
- package/lib/TextInputWithTokens.d.ts +0 -41
- package/lib/TextInputWithTokens.js +0 -396
- package/lib/Token/Token.d.ts +0 -7
- package/lib/Token/Token.js +0 -69
- package/lib/Token/TokenBase.d.ts +0 -16
- package/lib/Token/TokenBase.js +0 -76
- package/lib/Token/TokenLabel.d.ts +0 -10
- package/lib/Token/TokenLabel.js +0 -115
- package/lib/Token/TokenProfile.d.ts +0 -7
- package/lib/Token/TokenProfile.js +0 -45
- package/lib/Token/_AddTokenButton.d.ts +0 -3
- package/lib/Token/_AddTokenButton.js +0 -42
- package/lib/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib/Token/_RemoveTokenButton.js +0 -42
- package/lib/Token/_tokenButtonUtils.d.ts +0 -8
- package/lib/Token/_tokenButtonUtils.js +0 -42
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -36
- package/lib-esm/Autocomplete/Autocomplete.js +0 -36
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -5
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -109
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -54
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -244
- 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 -32
- package/lib-esm/TextInputTokens.js +0 -211
- package/lib-esm/TextInputWithTokens.d.ts +0 -41
- package/lib-esm/TextInputWithTokens.js +0 -361
- package/lib-esm/Token/Token.d.ts +0 -7
- package/lib-esm/Token/Token.js +0 -49
- package/lib-esm/Token/TokenBase.d.ts +0 -16
- package/lib-esm/Token/TokenBase.js +0 -56
- package/lib-esm/Token/TokenLabel.d.ts +0 -10
- package/lib-esm/Token/TokenLabel.js +0 -99
- package/lib-esm/Token/TokenProfile.d.ts +0 -7
- package/lib-esm/Token/TokenProfile.js +0 -28
- package/lib-esm/Token/_AddTokenButton.d.ts +0 -3
- package/lib-esm/Token/_AddTokenButton.js +0 -27
- package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib-esm/Token/_RemoveTokenButton.js +0 -27
- package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -8
- package/lib-esm/Token/_tokenButtonUtils.js +0 -26
package/lib/Token/TokenLabel.js
DELETED
@@ -1,115 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
11
|
-
|
12
|
-
var _TokenBase = _interopRequireDefault(require("./TokenBase"));
|
13
|
-
|
14
|
-
var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
|
15
|
-
|
16
|
-
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
|
17
|
-
|
18
|
-
var _ThemeProvider = require("../ThemeProvider");
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
|
-
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); }
|
23
|
-
|
24
|
-
const colorModeConfig = {
|
25
|
-
dark: {
|
26
|
-
bgOpacity: 0.18,
|
27
|
-
borderThreshold: 0,
|
28
|
-
borderOpacity: 0.3,
|
29
|
-
lightnessThreshold: 0.6
|
30
|
-
},
|
31
|
-
light: {
|
32
|
-
bgOpacity: 1,
|
33
|
-
borderThreshold: 0.96,
|
34
|
-
borderOpacity: 1,
|
35
|
-
lightnessThreshold: 0.453
|
36
|
-
}
|
37
|
-
};
|
38
|
-
const tokenBorderWidthPx = 1; // TODO: do a nicer `isSelected` style
|
39
|
-
|
40
|
-
const StyledTokenLabel = (0, _styledComponents.default)(_TokenBase.default).withConfig({
|
41
|
-
displayName: "TokenLabel__StyledTokenLabel",
|
42
|
-
componentId: "sc-1bdmgzv-0"
|
43
|
-
})(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";box-shadow:", ";color:", ";overflow:hidden;padding-right:", ";position:relative;> ._TokenButton{color:currentColor;transform:translate(", "px,-", "px);}"], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.isSelected ? `0 0 0 2px ${props.bgColor}` : undefined, props => props.textColor, props => props.handleRemove ? 0 : undefined, tokenBorderWidthPx, tokenBorderWidthPx); // TODO: make this text truncate
|
44
|
-
|
45
|
-
const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
|
46
|
-
displayName: "TokenLabel__TokenTextContainer",
|
47
|
-
componentId: "sc-1bdmgzv-1"
|
48
|
-
})(["white-space:nowrap;z-index:1;"]);
|
49
|
-
|
50
|
-
const TokenLabel = ({
|
51
|
-
fillColor,
|
52
|
-
isSelected,
|
53
|
-
...tokenBaseProps
|
54
|
-
}) => {
|
55
|
-
const {
|
56
|
-
handleRemove,
|
57
|
-
text,
|
58
|
-
as,
|
59
|
-
variant
|
60
|
-
} = tokenBaseProps;
|
61
|
-
const {
|
62
|
-
colorScheme
|
63
|
-
} = (0, _ThemeProvider.useTheme)(); // const colorScheme = 'dark';
|
64
|
-
|
65
|
-
const {
|
66
|
-
bgOpacity,
|
67
|
-
borderOpacity,
|
68
|
-
borderThreshold,
|
69
|
-
lightnessThreshold
|
70
|
-
} = colorModeConfig[colorScheme || 'light'];
|
71
|
-
let bgColor = fillColor;
|
72
|
-
let borderColor = fillColor;
|
73
|
-
let textColor = '#FFF';
|
74
|
-
const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
|
75
|
-
const isFillColorLight = perceivedLightness >= lightnessThreshold;
|
76
|
-
|
77
|
-
if (colorScheme === 'dark') {
|
78
|
-
const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
|
79
|
-
bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
|
80
|
-
textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 8).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
|
81
|
-
borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
|
82
|
-
} else {
|
83
|
-
const isFillColorDark = perceivedLightness < 0.1;
|
84
|
-
borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(25).toString() : 'transparent';
|
85
|
-
|
86
|
-
if (isFillColorLight) {
|
87
|
-
textColor = '#000';
|
88
|
-
}
|
89
|
-
|
90
|
-
if (isSelected) {
|
91
|
-
bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : (0, _tinycolor.default)(fillColor).darken(10).toString();
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
return /*#__PURE__*/_react.default.createElement(StyledTokenLabel, _extends({
|
96
|
-
fillColor: fillColor,
|
97
|
-
bgColor: bgColor,
|
98
|
-
borderColor: borderColor,
|
99
|
-
textColor: textColor,
|
100
|
-
isSelected: isSelected
|
101
|
-
}, tokenBaseProps), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
|
102
|
-
parentTokenTag: as || 'span',
|
103
|
-
tabIndex: -1,
|
104
|
-
onClick: handleRemove,
|
105
|
-
variant: variant
|
106
|
-
}) : null);
|
107
|
-
};
|
108
|
-
|
109
|
-
TokenLabel.displayName = "TokenLabel";
|
110
|
-
TokenLabel.defaultProps = {
|
111
|
-
fillColor: '#999' // TODO: pick a real color
|
112
|
-
|
113
|
-
};
|
114
|
-
var _default = TokenLabel;
|
115
|
-
exports.default = _default;
|
@@ -1,45 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
var _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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
25
|
-
|
26
|
-
const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
|
27
|
-
displayName: "TokenProfile__StyledToken",
|
28
|
-
componentId: "sc-1vf9jhf-0"
|
29
|
-
})(["padding-left:", ";"], (0, _constants.get)('space.1')); // ${get('space.1')}
|
30
|
-
|
31
|
-
const TokenProfile = ({
|
32
|
-
avatarSrc,
|
33
|
-
variant,
|
34
|
-
...rest
|
35
|
-
}) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
|
36
|
-
leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
|
37
|
-
src: avatarSrc,
|
38
|
-
size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
|
39
|
-
}),
|
40
|
-
variant: variant
|
41
|
-
}, rest));
|
42
|
-
|
43
|
-
TokenProfile.displayName = "TokenProfile";
|
44
|
-
var _default = TokenProfile;
|
45
|
-
exports.default = _default;
|
@@ -1,42 +0,0 @@
|
|
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 AddTokenButton = _styledComponents.default.span.attrs(({
|
19
|
-
parentTokenTag,
|
20
|
-
variant,
|
21
|
-
...rest
|
22
|
-
}) => {
|
23
|
-
delete rest.children;
|
24
|
-
return {
|
25
|
-
as: parentTokenTag === 'span' ? 'button' : 'span',
|
26
|
-
tabIndex: -1,
|
27
|
-
className: '_TokenButton',
|
28
|
-
children: /*#__PURE__*/React.createElement(_octiconsReact.PlusIcon, {
|
29
|
-
size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
|
30
|
-
}) // TODO: figure out how to set `size` using `fontSizes` from Primitives
|
31
|
-
|
32
|
-
};
|
33
|
-
}).withConfig({
|
34
|
-
displayName: "_AddTokenButton__AddTokenButton",
|
35
|
-
componentId: "elcc0o-0"
|
36
|
-
})(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
|
37
|
-
|
38
|
-
AddTokenButton.defaultProps = {
|
39
|
-
variant: _TokenBase.defaultTokenSize
|
40
|
-
};
|
41
|
-
var _default = AddTokenButton;
|
42
|
-
exports.default = _default;
|
@@ -1,42 +0,0 @@
|
|
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
|
-
parentTokenTag,
|
20
|
-
variant,
|
21
|
-
...rest
|
22
|
-
}) => {
|
23
|
-
delete rest.children;
|
24
|
-
return {
|
25
|
-
as: parentTokenTag === 'span' ? 'button' : 'span',
|
26
|
-
tabIndex: -1,
|
27
|
-
className: '_TokenButton',
|
28
|
-
children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
|
29
|
-
size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
|
30
|
-
}) // TODO: figure out how to set `size` using `fontSizes` from Primitives
|
31
|
-
|
32
|
-
};
|
33
|
-
}).withConfig({
|
34
|
-
displayName: "_RemoveTokenButton__RemoveTokenButton",
|
35
|
-
componentId: "sc-14lvcw1-0"
|
36
|
-
})(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
|
37
|
-
|
38
|
-
RemoveTokenButton.defaultProps = {
|
39
|
-
variant: _TokenBase.defaultTokenSize
|
40
|
-
};
|
41
|
-
var _default = RemoveTokenButton;
|
42
|
-
exports.default = _default;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { TokenSizeKeys } from "./TokenBase";
|
2
|
-
export interface TokenButtonProps {
|
3
|
-
parentTokenTag: 'span' | 'button' | 'a';
|
4
|
-
variant?: TokenSizeKeys;
|
5
|
-
}
|
6
|
-
export declare const variants: (...args: any[]) => any;
|
7
|
-
export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
8
|
-
export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;
|
@@ -1,42 +0,0 @@
|
|
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;cursor:pointer;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;
|
@@ -1,36 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ComponentProps } from '../utils/types';
|
3
|
-
declare const Autocomplete: React.FC;
|
4
|
-
export declare type AutocompleteProps = ComponentProps<typeof Autocomplete>;
|
5
|
-
export type { AutocompleteInputProps } from './AutocompleteInput';
|
6
|
-
export type { AutocompleteMenuProps } from './AutocompleteMenu';
|
7
|
-
declare const _default: React.FC<{}> & {
|
8
|
-
AutocompleteContext: React.Context<{
|
9
|
-
activeDescendantRef?: React.MutableRefObject<HTMLElement | null> | undefined;
|
10
|
-
autocompleteSuggestion?: string | undefined;
|
11
|
-
inputRef?: React.MutableRefObject<HTMLInputElement | null> | undefined;
|
12
|
-
inputValue?: string | undefined;
|
13
|
-
showMenu?: boolean | undefined;
|
14
|
-
setAutocompleteSuggestion?: React.Dispatch<React.SetStateAction<string>> | undefined;
|
15
|
-
setShowMenu?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
16
|
-
setInputValue?: React.Dispatch<React.SetStateAction<string>> | undefined;
|
17
|
-
isMenuDirectlyActivated?: boolean | undefined;
|
18
|
-
setIsMenuDirectlyActivated?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
19
|
-
}>;
|
20
|
-
Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<"input", {
|
21
|
-
as?: React.ComponentType<any> | undefined;
|
22
|
-
}>;
|
23
|
-
Menu: React.ForwardRefExoticComponent<{
|
24
|
-
addNewItem?: Omit<import("../ActionList/List").ItemInput, "onAction"> | undefined;
|
25
|
-
emptyStateText?: React.ReactNode;
|
26
|
-
filterFn?: ((item: import("../ActionList/List").ItemInput, i: number) => boolean) | undefined;
|
27
|
-
items: import("../ActionList/List").ItemInput[];
|
28
|
-
onItemDeselect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
29
|
-
onItemSelect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
30
|
-
loading?: boolean | undefined;
|
31
|
-
selectedItemIds: (string | number)[];
|
32
|
-
selectedSortFn?: ((itemIdA: string | number, itemIdB: string | number) => number) | undefined;
|
33
|
-
selectionVariant?: "multiple" | "single" | undefined;
|
34
|
-
} & Pick<import("..").OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
|
35
|
-
};
|
36
|
-
export default _default;
|
@@ -1,36 +0,0 @@
|
|
1
|
-
import React, { useRef, useState } from 'react';
|
2
|
-
import { AutocompleteContext } from './AutocompleteContext';
|
3
|
-
import AutocompleteInput from './AutocompleteInput';
|
4
|
-
import AutocompleteMenu from './AutocompleteMenu';
|
5
|
-
|
6
|
-
const Autocomplete = ({
|
7
|
-
children
|
8
|
-
}) => {
|
9
|
-
const activeDescendantRef = useRef(null);
|
10
|
-
const inputRef = useRef(null);
|
11
|
-
const [inputValue, setInputValue] = useState('');
|
12
|
-
const [showMenu, setShowMenu] = useState(false);
|
13
|
-
const [autocompleteSuggestion, setAutocompleteSuggestion] = useState('');
|
14
|
-
const [isMenuDirectlyActivated, setIsMenuDirectlyActivated] = useState(false);
|
15
|
-
return /*#__PURE__*/React.createElement(AutocompleteContext.Provider, {
|
16
|
-
value: {
|
17
|
-
activeDescendantRef,
|
18
|
-
autocompleteSuggestion,
|
19
|
-
inputRef,
|
20
|
-
inputValue,
|
21
|
-
isMenuDirectlyActivated,
|
22
|
-
setAutocompleteSuggestion,
|
23
|
-
setInputValue,
|
24
|
-
setIsMenuDirectlyActivated,
|
25
|
-
setShowMenu,
|
26
|
-
showMenu
|
27
|
-
}
|
28
|
-
}, children);
|
29
|
-
};
|
30
|
-
|
31
|
-
Autocomplete.displayName = "Autocomplete";
|
32
|
-
export default Object.assign(Autocomplete, {
|
33
|
-
AutocompleteContext,
|
34
|
-
Input: AutocompleteInput,
|
35
|
-
Menu: AutocompleteMenu
|
36
|
-
});
|
@@ -1,13 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
export declare const AutocompleteContext: import("react").Context<{
|
3
|
-
activeDescendantRef?: import("react").MutableRefObject<HTMLElement | null> | undefined;
|
4
|
-
autocompleteSuggestion?: string | undefined;
|
5
|
-
inputRef?: import("react").MutableRefObject<HTMLInputElement | null> | undefined;
|
6
|
-
inputValue?: string | undefined;
|
7
|
-
showMenu?: boolean | undefined;
|
8
|
-
setAutocompleteSuggestion?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
|
9
|
-
setShowMenu?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
|
10
|
-
setInputValue?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
|
11
|
-
isMenuDirectlyActivated?: boolean | undefined;
|
12
|
-
setIsMenuDirectlyActivated?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
|
13
|
-
}>;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { createContext } from 'react'; // TODO:
|
2
|
-
// - figure out how we can make all of these properties required without having to define them when calling `createContext`
|
3
|
-
// - figure out how we can reduce the number of properties that need to be passed
|
4
|
-
|
5
|
-
export const AutocompleteContext = /*#__PURE__*/createContext({});
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type * as Polymorphic from "@radix-ui/react-polymorphic";
|
3
|
-
import { ComponentProps } from '../utils/types';
|
4
|
-
declare type InternalAutocompleteInputProps = {
|
5
|
-
as?: React.ComponentType<any>;
|
6
|
-
};
|
7
|
-
declare const AutocompleteInput: Polymorphic.ForwardRefComponent<"input", InternalAutocompleteInputProps>;
|
8
|
-
export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
|
9
|
-
export default AutocompleteInput;
|
@@ -1,109 +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, { useCallback, useContext, useEffect, useState } from 'react';
|
4
|
-
import { AutocompleteContext } from './AutocompleteContext';
|
5
|
-
import TextInput from '../TextInput';
|
6
|
-
import { useCombinedRefs } from '../hooks/useCombinedRefs';
|
7
|
-
const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
|
8
|
-
as: Component = TextInput,
|
9
|
-
onFocus,
|
10
|
-
onChange,
|
11
|
-
onKeyDown,
|
12
|
-
onKeyPress,
|
13
|
-
value,
|
14
|
-
...props
|
15
|
-
}, forwardedRef) => {
|
16
|
-
const {
|
17
|
-
activeDescendantRef,
|
18
|
-
autocompleteSuggestion = '',
|
19
|
-
inputRef,
|
20
|
-
inputValue = '',
|
21
|
-
isMenuDirectlyActivated,
|
22
|
-
setInputValue,
|
23
|
-
setShowMenu,
|
24
|
-
showMenu
|
25
|
-
} = useContext(AutocompleteContext);
|
26
|
-
const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
|
27
|
-
const [highlightRemainingText, setHighlightRemainingText] = useState(true);
|
28
|
-
|
29
|
-
const handleInputFocus = () => {
|
30
|
-
if (setShowMenu) {
|
31
|
-
setShowMenu(true);
|
32
|
-
}
|
33
|
-
};
|
34
|
-
|
35
|
-
const handleInputBlur = e => {
|
36
|
-
// HACK: wait a tick and check the focused element before hiding the autocomplete menu
|
37
|
-
// this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
|
38
|
-
// but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
|
39
|
-
setTimeout(() => {
|
40
|
-
if (setShowMenu && document.activeElement !== combinedInputRef.current) {
|
41
|
-
setShowMenu(false);
|
42
|
-
}
|
43
|
-
}, 0);
|
44
|
-
};
|
45
|
-
|
46
|
-
const handleInputChange = e => {
|
47
|
-
if (setInputValue) {
|
48
|
-
setInputValue(e.currentTarget.value);
|
49
|
-
}
|
50
|
-
|
51
|
-
if (setShowMenu && !showMenu) {
|
52
|
-
setShowMenu(true);
|
53
|
-
}
|
54
|
-
};
|
55
|
-
|
56
|
-
const handleInputKeyDown = e => {
|
57
|
-
if (e.key === 'Backspace') {
|
58
|
-
setHighlightRemainingText(false);
|
59
|
-
}
|
60
|
-
};
|
61
|
-
|
62
|
-
const handleInputKeyUp = e => {
|
63
|
-
if (e.key === 'Backspace') {
|
64
|
-
setHighlightRemainingText(true);
|
65
|
-
}
|
66
|
-
};
|
67
|
-
|
68
|
-
const onInputKeyPress = useCallback(event => {
|
69
|
-
if (activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
|
70
|
-
event.preventDefault();
|
71
|
-
event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
|
72
|
-
|
73
|
-
const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
|
74
|
-
activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
|
75
|
-
}
|
76
|
-
}, [activeDescendantRef]);
|
77
|
-
useEffect(() => {
|
78
|
-
if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
|
79
|
-
return;
|
80
|
-
}
|
81
|
-
|
82
|
-
if (!autocompleteSuggestion) {
|
83
|
-
inputRef.current.value = inputValue;
|
84
|
-
}
|
85
|
-
|
86
|
-
if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
|
87
|
-
inputRef.current.value = autocompleteSuggestion;
|
88
|
-
|
89
|
-
if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
|
90
|
-
inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
|
91
|
-
}
|
92
|
-
}
|
93
|
-
}, [autocompleteSuggestion, inputValue]);
|
94
|
-
useEffect(() => {
|
95
|
-
if (value && setInputValue) {
|
96
|
-
setInputValue(value.toString());
|
97
|
-
}
|
98
|
-
}, [value]);
|
99
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
100
|
-
onFocus: handleInputFocus,
|
101
|
-
onBlur: handleInputBlur,
|
102
|
-
onChange: handleInputChange,
|
103
|
-
onKeyDown: handleInputKeyDown,
|
104
|
-
onKeyPress: onInputKeyPress,
|
105
|
-
onKeyUp: handleInputKeyUp,
|
106
|
-
ref: combinedInputRef
|
107
|
-
}, props));
|
108
|
-
});
|
109
|
-
export default AutocompleteInput;
|
@@ -1,54 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ItemProps } from '../ActionList';
|
3
|
-
import { ItemInput } from '../ActionList/List';
|
4
|
-
import { OverlayProps } from '../Overlay';
|
5
|
-
import { ComponentProps } from '../utils/types';
|
6
|
-
declare type AutocompleteMenuInternalProps = {
|
7
|
-
/**
|
8
|
-
* A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
|
9
|
-
* This menu item gets appended to the end of the list of options.
|
10
|
-
*/
|
11
|
-
addNewItem?: Omit<ItemInput, 'onAction'>;
|
12
|
-
/**
|
13
|
-
* The text that appears in the menu when there are no options in the array passed to the `items` prop.
|
14
|
-
*/
|
15
|
-
emptyStateText?: React.ReactNode | false;
|
16
|
-
/**
|
17
|
-
* A custom function used to filter the options in the array passed to the `items` prop.
|
18
|
-
* By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
|
19
|
-
*/
|
20
|
-
filterFn?: (item: ItemInput, i: number) => boolean;
|
21
|
-
/**
|
22
|
-
* The options for field values that are displayed in the dropdown menu.
|
23
|
-
* One or more may be selected depending on the value of the `selectionVariant` prop.
|
24
|
-
*/
|
25
|
-
items: ItemInput[];
|
26
|
-
/**
|
27
|
-
* The function that is called when an item in the list is de-selected
|
28
|
-
*/
|
29
|
-
onItemDeselect?: NonNullable<ItemProps['onAction']>;
|
30
|
-
/**
|
31
|
-
* The function that is called when an item in the list is selected
|
32
|
-
*/
|
33
|
-
onItemSelect?: NonNullable<ItemProps['onAction']>;
|
34
|
-
/**
|
35
|
-
* Whether the data is loaded for the menu items
|
36
|
-
*/
|
37
|
-
loading?: boolean;
|
38
|
-
/**
|
39
|
-
* The IDs of the selected items
|
40
|
-
*/
|
41
|
-
selectedItemIds: Array<string | number>;
|
42
|
-
/**
|
43
|
-
* The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
|
44
|
-
* By default, selected items are sorted to the top after the user closes the menu.
|
45
|
-
*/
|
46
|
-
selectedSortFn?: (itemIdA: string | number, itemIdB: string | number) => number;
|
47
|
-
/**
|
48
|
-
* Whether there can be one item selected from the menu or multiple items selected from the menu
|
49
|
-
*/
|
50
|
-
selectionVariant?: 'single' | 'multiple';
|
51
|
-
};
|
52
|
-
declare const AutocompleteMenu: React.ForwardRefExoticComponent<AutocompleteMenuInternalProps & Pick<OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
|
53
|
-
export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
|
54
|
-
export default AutocompleteMenu;
|