@primer/components 0.0.0-20219151326 → 0.0.0-202191514518
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 +27 -3
- package/codemods/deprecateUtilityComponents.js +1 -1
- package/dist/browser.esm.js +874 -769
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +877 -772
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.js +1 -1
- package/lib/ActionList/List.d.ts +2 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.js +11 -3
- package/lib/Autocomplete/Autocomplete.d.ts +304 -0
- package/lib/Autocomplete/Autocomplete.js +145 -0
- package/lib/Autocomplete/AutocompleteContext.d.ts +17 -0
- package/lib/Autocomplete/AutocompleteContext.js +11 -0
- package/lib/Autocomplete/AutocompleteInput.d.ts +292 -0
- package/lib/Autocomplete/AutocompleteInput.js +157 -0
- package/lib/Autocomplete/AutocompleteMenu.d.ts +72 -0
- package/lib/Autocomplete/AutocompleteMenu.js +224 -0
- package/lib/Autocomplete/AutocompleteOverlay.d.ts +20 -0
- package/lib/Autocomplete/AutocompleteOverlay.js +80 -0
- package/lib/Autocomplete/index.d.ts +2 -0
- package/lib/Autocomplete/index.js +15 -0
- package/lib/BaseStyles.js +1 -1
- package/lib/BorderBox.js +1 -1
- package/lib/Caret.js +2 -2
- package/lib/Dialog.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.d.ts +3 -2
- package/lib/FilteredActionList/FilteredActionList.js +8 -32
- package/lib/Flash.js +16 -16
- package/lib/Label.js +1 -1
- package/lib/Overlay.d.ts +1 -0
- package/lib/Overlay.js +3 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +10 -10
- package/lib/SelectPanel/SelectPanel.d.ts +1 -1
- package/lib/SelectPanel/SelectPanel.js +9 -11
- package/lib/StateLabel.js +13 -19
- package/lib/TextInput.d.ts +5 -13
- package/lib/TextInput.js +4 -46
- package/lib/TextInputWithTokens.d.ts +323 -0
- package/lib/TextInputWithTokens.js +245 -0
- package/lib/Token/AvatarToken.d.ts +7 -0
- package/lib/Token/AvatarToken.js +64 -0
- package/lib/Token/IssueLabelToken.d.ts +14 -0
- package/lib/Token/IssueLabelToken.js +144 -0
- package/lib/Token/Token.d.ts +15 -0
- package/lib/Token/Token.js +94 -0
- package/lib/Token/TokenBase.d.ts +31 -0
- package/lib/Token/TokenBase.js +108 -0
- package/lib/Token/_RemoveTokenButton.d.ts +12 -0
- package/lib/Token/_RemoveTokenButton.js +77 -0
- package/lib/Token/_TokenTextContainer.d.ts +3 -0
- package/lib/Token/_TokenTextContainer.js +17 -0
- package/lib/Token/index.d.ts +3 -0
- package/lib/Token/index.js +31 -0
- package/lib/_TextInputWrapper.d.ts +10 -0
- package/lib/_TextInputWrapper.js +51 -0
- package/lib/_UnstyledTextInput.d.ts +2 -0
- package/lib/_UnstyledTextInput.js +20 -0
- package/lib/behaviors/scrollIntoViewingArea.d.ts +1 -0
- package/lib/behaviors/scrollIntoViewingArea.js +39 -0
- package/lib/hooks/useOpenAndCloseFocus.d.ts +2 -1
- package/lib/hooks/useOpenAndCloseFocus.js +7 -2
- package/lib/hooks/useOverlay.d.ts +2 -1
- package/lib/hooks/useOverlay.js +4 -2
- package/lib/index.d.ts +5 -0
- package/lib/index.js +36 -0
- package/lib/theme-preval.js +370 -3100
- package/lib/utils/testing.d.ts +50 -493
- package/lib/utils/{types.d.ts → types/AriaRole.d.ts} +0 -13
- package/lib/utils/{types.js → types/AriaRole.js} +0 -0
- package/lib/utils/types/ComponentProps.d.ts +9 -0
- package/lib/utils/types/ComponentProps.js +1 -0
- package/lib/utils/types/Flatten.d.ts +4 -0
- package/lib/utils/types/Flatten.js +1 -0
- package/lib/utils/types/MandateProps.d.ts +3 -0
- package/lib/utils/types/MandateProps.js +1 -0
- package/lib/utils/types/Merge.d.ts +19 -0
- package/lib/utils/types/Merge.js +1 -0
- package/lib/utils/types/index.d.ts +5 -0
- package/lib/utils/types/index.js +70 -0
- package/lib-esm/ActionList/Item.js +1 -1
- package/lib-esm/ActionList/List.d.ts +2 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +11 -3
- package/lib-esm/Autocomplete/Autocomplete.d.ts +304 -0
- package/lib-esm/Autocomplete/Autocomplete.js +123 -0
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +17 -0
- package/lib-esm/Autocomplete/AutocompleteContext.js +2 -0
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +292 -0
- package/lib-esm/Autocomplete/AutocompleteInput.js +138 -0
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +72 -0
- package/lib-esm/Autocomplete/AutocompleteMenu.js +205 -0
- package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +20 -0
- package/lib-esm/Autocomplete/AutocompleteOverlay.js +62 -0
- package/lib-esm/Autocomplete/index.d.ts +2 -0
- package/lib-esm/Autocomplete/index.js +1 -0
- package/lib-esm/BaseStyles.js +1 -1
- package/lib-esm/BorderBox.js +1 -1
- package/lib-esm/Caret.js +2 -2
- package/lib-esm/Dialog.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.d.ts +3 -2
- package/lib-esm/FilteredActionList/FilteredActionList.js +6 -32
- package/lib-esm/Flash.js +16 -16
- package/lib-esm/Label.js +1 -1
- package/lib-esm/Overlay.d.ts +1 -0
- package/lib-esm/Overlay.js +3 -1
- package/lib-esm/ProgressBar.js +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -10
- package/lib-esm/SelectPanel/SelectPanel.d.ts +1 -1
- package/lib-esm/SelectPanel/SelectPanel.js +9 -8
- package/lib-esm/StateLabel.js +13 -19
- package/lib-esm/TextInput.d.ts +5 -13
- package/lib-esm/TextInput.js +4 -37
- package/lib-esm/TextInputWithTokens.d.ts +323 -0
- package/lib-esm/TextInputWithTokens.js +220 -0
- package/lib-esm/Token/AvatarToken.d.ts +7 -0
- package/lib-esm/Token/AvatarToken.js +43 -0
- package/lib-esm/Token/IssueLabelToken.d.ts +14 -0
- package/lib-esm/Token/IssueLabelToken.js +124 -0
- package/lib-esm/Token/Token.d.ts +15 -0
- package/lib-esm/Token/Token.js +73 -0
- package/lib-esm/Token/TokenBase.d.ts +31 -0
- package/lib-esm/Token/TokenBase.js +87 -0
- package/lib-esm/Token/_RemoveTokenButton.d.ts +12 -0
- package/lib-esm/Token/_RemoveTokenButton.js +60 -0
- package/lib-esm/Token/_TokenTextContainer.d.ts +3 -0
- package/lib-esm/Token/_TokenTextContainer.js +6 -0
- package/lib-esm/Token/index.d.ts +3 -0
- package/lib-esm/Token/index.js +3 -0
- package/lib-esm/_TextInputWrapper.d.ts +10 -0
- package/lib-esm/_TextInputWrapper.js +31 -0
- package/lib-esm/_UnstyledTextInput.d.ts +2 -0
- package/lib-esm/_UnstyledTextInput.js +7 -0
- package/lib-esm/behaviors/scrollIntoViewingArea.d.ts +1 -0
- package/lib-esm/behaviors/scrollIntoViewingArea.js +30 -0
- package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +2 -1
- package/lib-esm/hooks/useOpenAndCloseFocus.js +7 -2
- package/lib-esm/hooks/useOverlay.d.ts +2 -1
- package/lib-esm/hooks/useOverlay.js +4 -2
- package/lib-esm/index.d.ts +5 -0
- package/lib-esm/index.js +3 -0
- package/lib-esm/theme-preval.js +370 -3100
- package/lib-esm/utils/testing.d.ts +50 -493
- package/lib-esm/utils/{types.d.ts → types/AriaRole.d.ts} +0 -13
- package/lib-esm/utils/{types.js → types/AriaRole.js} +0 -0
- package/lib-esm/utils/types/ComponentProps.d.ts +9 -0
- package/lib-esm/utils/types/ComponentProps.js +1 -0
- package/lib-esm/utils/types/Flatten.d.ts +4 -0
- package/lib-esm/utils/types/Flatten.js +1 -0
- package/lib-esm/utils/types/MandateProps.d.ts +3 -0
- package/lib-esm/utils/types/MandateProps.js +1 -0
- package/lib-esm/utils/types/Merge.d.ts +19 -0
- package/lib-esm/utils/types/Merge.js +1 -0
- package/lib-esm/utils/types/index.d.ts +5 -0
- package/lib-esm/utils/types/index.js +5 -0
- package/package.json +4 -3
@@ -0,0 +1,31 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { SxProp } from '../sx';
|
3
|
+
export declare type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge';
|
4
|
+
export declare const tokenSizes: Record<TokenSizeKeys, string>;
|
5
|
+
export declare const defaultTokenSize: TokenSizeKeys;
|
6
|
+
export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
|
7
|
+
as?: 'button' | 'a' | 'span';
|
8
|
+
/**
|
9
|
+
* The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
|
10
|
+
*/
|
11
|
+
onRemove?: () => void;
|
12
|
+
/**
|
13
|
+
* Whether the token is selected
|
14
|
+
*/
|
15
|
+
isSelected?: boolean;
|
16
|
+
/**
|
17
|
+
* The text label inside the token
|
18
|
+
*/
|
19
|
+
text: string;
|
20
|
+
/**
|
21
|
+
* A unique identifier that can be associated with the token
|
22
|
+
*/
|
23
|
+
id?: number | string;
|
24
|
+
/**
|
25
|
+
* Which size the token will be rendered at
|
26
|
+
*/
|
27
|
+
size?: TokenSizeKeys;
|
28
|
+
}
|
29
|
+
export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
|
30
|
+
declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps & SxProp, never>;
|
31
|
+
export default TokenBase;
|
@@ -0,0 +1,108 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = exports.isTokenInteractive = exports.defaultTokenSize = exports.tokenSizes = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
9
|
+
|
10
|
+
var _styledSystem = require("styled-system");
|
11
|
+
|
12
|
+
var _constants = require("../constants");
|
13
|
+
|
14
|
+
var _sx = _interopRequireDefault(require("../sx"));
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
+
|
18
|
+
const tokenSizes = {
|
19
|
+
small: '16px',
|
20
|
+
medium: '20px',
|
21
|
+
large: '24px',
|
22
|
+
extralarge: '32px'
|
23
|
+
};
|
24
|
+
exports.tokenSizes = tokenSizes;
|
25
|
+
const defaultTokenSize = 'medium';
|
26
|
+
exports.defaultTokenSize = defaultTokenSize;
|
27
|
+
|
28
|
+
const isTokenInteractive = ({
|
29
|
+
as = 'span',
|
30
|
+
onClick,
|
31
|
+
onFocus,
|
32
|
+
tabIndex = -1
|
33
|
+
}) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
|
34
|
+
|
35
|
+
exports.isTokenInteractive = isTokenInteractive;
|
36
|
+
const variants = (0, _styledSystem.variant)({
|
37
|
+
prop: 'size',
|
38
|
+
variants: {
|
39
|
+
small: {
|
40
|
+
fontSize: 0,
|
41
|
+
gap: 1,
|
42
|
+
height: tokenSizes.small,
|
43
|
+
// without setting lineHeight to match height, the "x" appears vertically mis-aligned
|
44
|
+
lineHeight: tokenSizes.small,
|
45
|
+
paddingLeft: 1,
|
46
|
+
paddingRight: 1,
|
47
|
+
// need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
|
48
|
+
// without setting these, the "x" appears vertically mis-aligned
|
49
|
+
paddingTop: 0,
|
50
|
+
paddingBottom: 0
|
51
|
+
},
|
52
|
+
medium: {
|
53
|
+
fontSize: 0,
|
54
|
+
gap: 1,
|
55
|
+
height: tokenSizes.medium,
|
56
|
+
lineHeight: tokenSizes.medium,
|
57
|
+
paddingLeft: 2,
|
58
|
+
paddingRight: 2,
|
59
|
+
paddingTop: 0,
|
60
|
+
paddingBottom: 0
|
61
|
+
},
|
62
|
+
large: {
|
63
|
+
fontSize: 0,
|
64
|
+
gap: 2,
|
65
|
+
height: tokenSizes.large,
|
66
|
+
lineHeight: tokenSizes.large,
|
67
|
+
paddingLeft: 2,
|
68
|
+
paddingRight: 2,
|
69
|
+
paddingTop: 0,
|
70
|
+
paddingBottom: 0
|
71
|
+
},
|
72
|
+
extralarge: {
|
73
|
+
fontSize: 1,
|
74
|
+
gap: 2,
|
75
|
+
height: tokenSizes.extralarge,
|
76
|
+
lineHeight: tokenSizes.extralarge,
|
77
|
+
paddingLeft: 3,
|
78
|
+
paddingRight: 3,
|
79
|
+
paddingTop: 0,
|
80
|
+
paddingBottom: 0
|
81
|
+
}
|
82
|
+
}
|
83
|
+
});
|
84
|
+
|
85
|
+
const TokenBase = _styledComponents.default.span.attrs(({
|
86
|
+
text,
|
87
|
+
onRemove,
|
88
|
+
onKeyDown
|
89
|
+
}) => ({
|
90
|
+
onKeyDown: event => {
|
91
|
+
onKeyDown && onKeyDown(event);
|
92
|
+
|
93
|
+
if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
|
94
|
+
onRemove();
|
95
|
+
}
|
96
|
+
},
|
97
|
+
'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined
|
98
|
+
})).withConfig({
|
99
|
+
displayName: "TokenBase",
|
100
|
+
componentId: "opajvp-0"
|
101
|
+
})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";font-family:inherit;text-decoration:none;white-space:nowrap;", " ", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', (0, _constants.get)('fontWeights.bold'), variants, _sx.default);
|
102
|
+
|
103
|
+
TokenBase.defaultProps = {
|
104
|
+
as: 'span',
|
105
|
+
size: defaultTokenSize
|
106
|
+
};
|
107
|
+
var _default = TokenBase;
|
108
|
+
exports.default = _default;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { SxProp } from '../sx';
|
3
|
+
import { ComponentProps } from '../utils/types';
|
4
|
+
import { TokenSizeKeys } from './TokenBase';
|
5
|
+
interface TokenButtonProps {
|
6
|
+
borderOffset?: number;
|
7
|
+
size?: TokenSizeKeys;
|
8
|
+
isParentInteractive?: boolean;
|
9
|
+
}
|
10
|
+
declare const StyledTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps & SxProp, never>;
|
11
|
+
declare const RemoveTokenButton: React.FC<ComponentProps<typeof StyledTokenButton>>;
|
12
|
+
export default RemoveTokenButton;
|
@@ -0,0 +1,77 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _octiconsReact = require("@primer/octicons-react");
|
11
|
+
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
13
|
+
|
14
|
+
var _styledSystem = require("styled-system");
|
15
|
+
|
16
|
+
var _constants = require("../constants");
|
17
|
+
|
18
|
+
var _sx = _interopRequireDefault(require("../sx"));
|
19
|
+
|
20
|
+
var _TokenBase = require("./TokenBase");
|
21
|
+
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
23
|
+
|
24
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
25
|
+
|
26
|
+
const variants = (0, _styledSystem.variant)({
|
27
|
+
prop: 'size',
|
28
|
+
variants: {
|
29
|
+
small: {
|
30
|
+
height: _TokenBase.tokenSizes.small,
|
31
|
+
width: _TokenBase.tokenSizes.small
|
32
|
+
},
|
33
|
+
medium: {
|
34
|
+
height: _TokenBase.tokenSizes.medium,
|
35
|
+
width: _TokenBase.tokenSizes.medium
|
36
|
+
},
|
37
|
+
large: {
|
38
|
+
height: _TokenBase.tokenSizes.large,
|
39
|
+
width: _TokenBase.tokenSizes.large
|
40
|
+
},
|
41
|
+
extralarge: {
|
42
|
+
height: _TokenBase.tokenSizes.extralarge,
|
43
|
+
width: _TokenBase.tokenSizes.extralarge
|
44
|
+
}
|
45
|
+
}
|
46
|
+
});
|
47
|
+
|
48
|
+
const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _TokenBase.defaultTokenSize], 10) * 0.75;
|
49
|
+
|
50
|
+
const StyledTokenButton = _styledComponents.default.span.withConfig({
|
51
|
+
displayName: "_RemoveTokenButton__StyledTokenButton",
|
52
|
+
componentId: "sc-14lvcw1-0"
|
53
|
+
})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
|
54
|
+
|
55
|
+
const RemoveTokenButton = ({
|
56
|
+
'aria-label': ariaLabel,
|
57
|
+
isParentInteractive,
|
58
|
+
size,
|
59
|
+
...rest
|
60
|
+
}) => {
|
61
|
+
delete rest.children;
|
62
|
+
return /*#__PURE__*/_react.default.createElement(StyledTokenButton, _extends({
|
63
|
+
as: isParentInteractive ? 'span' : 'button',
|
64
|
+
tabIndex: isParentInteractive ? -1 : undefined,
|
65
|
+
"aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
|
66
|
+
size: size
|
67
|
+
}, rest), /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, {
|
68
|
+
size: getTokenButtonIconSize(size)
|
69
|
+
}));
|
70
|
+
};
|
71
|
+
|
72
|
+
RemoveTokenButton.displayName = "RemoveTokenButton";
|
73
|
+
RemoveTokenButton.defaultProps = {
|
74
|
+
size: _TokenBase.defaultTokenSize
|
75
|
+
};
|
76
|
+
var _default = RemoveTokenButton;
|
77
|
+
exports.default = _default;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
9
|
+
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
+
|
12
|
+
const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
|
13
|
+
displayName: "_TokenTextContainer__TokenTextContainer",
|
14
|
+
componentId: "sc-4t2bev-0"
|
15
|
+
})(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:none;color:inherit;font:inherit;margin:0;overflow:visible;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;line-height:1;color:currentColor;text-decoration:none;&:is(a,button,[tabIndex='0']){cursor:pointer;&:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}}"]);
|
16
|
+
var _default = TokenTextContainer;
|
17
|
+
exports.default = _default;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "default", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function () {
|
9
|
+
return _Token.default;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "IssueLabelToken", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function () {
|
15
|
+
return _IssueLabelToken.default;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "AvatarToken", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function () {
|
21
|
+
return _AvatarToken.default;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
|
25
|
+
var _Token = _interopRequireDefault(require("./Token"));
|
26
|
+
|
27
|
+
var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
|
28
|
+
|
29
|
+
var _AvatarToken = _interopRequireDefault(require("./AvatarToken"));
|
30
|
+
|
31
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
|
2
|
+
import { SxProp } from './sx';
|
3
|
+
declare const TextInputWrapper: import("styled-components").StyledComponent<"span", any, {
|
4
|
+
disabled?: boolean | undefined;
|
5
|
+
hasIcon?: boolean | undefined;
|
6
|
+
block?: boolean | undefined;
|
7
|
+
contrast?: boolean | undefined;
|
8
|
+
variant?: "large" | "small" | undefined;
|
9
|
+
} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
|
10
|
+
export default TextInputWrapper;
|
@@ -0,0 +1,51 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
9
|
+
|
10
|
+
var _styledSystem = require("styled-system");
|
11
|
+
|
12
|
+
var _constants = require("./constants");
|
13
|
+
|
14
|
+
var _sx = _interopRequireDefault(require("./sx"));
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
+
|
18
|
+
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); }
|
19
|
+
|
20
|
+
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; }
|
21
|
+
|
22
|
+
const sizeVariants = (0, _styledSystem.variant)({
|
23
|
+
variants: {
|
24
|
+
small: {
|
25
|
+
minHeight: '28px',
|
26
|
+
px: 2,
|
27
|
+
py: '3px',
|
28
|
+
fontSize: 0,
|
29
|
+
lineHeight: '20px'
|
30
|
+
},
|
31
|
+
large: {
|
32
|
+
px: 2,
|
33
|
+
py: '10px',
|
34
|
+
fontSize: 3
|
35
|
+
}
|
36
|
+
}
|
37
|
+
});
|
38
|
+
|
39
|
+
const TextInputWrapper = _styledComponents.default.span.withConfig({
|
40
|
+
displayName: "_TextInputWrapper__TextInputWrapper",
|
41
|
+
componentId: "sc-5vfcis-0"
|
42
|
+
})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
|
43
|
+
if (props.hasIcon) {
|
44
|
+
return (0, _styledComponents.css)(["padding:0;"]);
|
45
|
+
} else {
|
46
|
+
return (0, _styledComponents.css)(["padding:6px 12px;"]);
|
47
|
+
}
|
48
|
+
}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
|
49
|
+
|
50
|
+
var _default = TextInputWrapper;
|
51
|
+
exports.default = _default;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
9
|
+
|
10
|
+
var _sx = _interopRequireDefault(require("./sx"));
|
11
|
+
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
+
|
14
|
+
const UnstyledTextInput = _styledComponents.default.input.withConfig({
|
15
|
+
displayName: "_UnstyledTextInput__UnstyledTextInput",
|
16
|
+
componentId: "sc-1jgl33s-0"
|
17
|
+
})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
|
18
|
+
|
19
|
+
var _default = UnstyledTextInput;
|
20
|
+
exports.default = _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.scrollIntoViewingArea = void 0;
|
7
|
+
|
8
|
+
const scrollIntoViewingArea = (child, viewingArea, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
|
9
|
+
const startSide = direction === 'vertical' ? 'top' : 'left';
|
10
|
+
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
11
|
+
const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
|
12
|
+
const {
|
13
|
+
[startSide]: childStart,
|
14
|
+
[endSide]: childEnd
|
15
|
+
} = child.getBoundingClientRect();
|
16
|
+
const {
|
17
|
+
[startSide]: viewingAreaStart,
|
18
|
+
[endSide]: viewingAreaEnd
|
19
|
+
} = viewingArea.getBoundingClientRect();
|
20
|
+
const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
|
21
|
+
const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
|
22
|
+
|
23
|
+
if (isChildStartAboveViewingArea) {
|
24
|
+
const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
|
25
|
+
viewingArea.scrollTo({
|
26
|
+
behavior,
|
27
|
+
[startSide]: scrollHeightToChildStart - endMargin
|
28
|
+
});
|
29
|
+
} else if (isChildBottomBelowViewingArea) {
|
30
|
+
const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
|
31
|
+
viewingArea.scrollTo({
|
32
|
+
behavior,
|
33
|
+
[startSide]: scrollHeightToChildBottom + startMargin
|
34
|
+
});
|
35
|
+
} // either completely in view or outside viewing area on both ends, don't scroll
|
36
|
+
|
37
|
+
};
|
38
|
+
|
39
|
+
exports.scrollIntoViewingArea = scrollIntoViewingArea;
|
@@ -3,5 +3,6 @@ export declare type UseOpenAndCloseFocusSettings = {
|
|
3
3
|
initialFocusRef?: React.RefObject<HTMLElement>;
|
4
4
|
containerRef: React.RefObject<HTMLElement>;
|
5
5
|
returnFocusRef: React.RefObject<HTMLElement>;
|
6
|
+
preventFocusOnOpen?: boolean;
|
6
7
|
};
|
7
|
-
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef }: UseOpenAndCloseFocusSettings): void;
|
8
|
+
export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;
|
@@ -12,9 +12,14 @@ var _iterateFocusableElements = require("../utils/iterateFocusableElements");
|
|
12
12
|
function useOpenAndCloseFocus({
|
13
13
|
initialFocusRef,
|
14
14
|
returnFocusRef,
|
15
|
-
containerRef
|
15
|
+
containerRef,
|
16
|
+
preventFocusOnOpen
|
16
17
|
}) {
|
17
18
|
(0, _react.useEffect)(() => {
|
19
|
+
if (preventFocusOnOpen) {
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
|
18
23
|
const returnRef = returnFocusRef.current;
|
19
24
|
|
20
25
|
if (initialFocusRef && initialFocusRef.current) {
|
@@ -27,5 +32,5 @@ function useOpenAndCloseFocus({
|
|
27
32
|
return function () {
|
28
33
|
returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
|
29
34
|
};
|
30
|
-
}, [initialFocusRef, returnFocusRef, containerRef]);
|
35
|
+
}, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
|
31
36
|
}
|
@@ -7,8 +7,9 @@ export declare type UseOverlaySettings = {
|
|
7
7
|
onEscape: (e: KeyboardEvent) => void;
|
8
8
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
9
9
|
overlayRef?: React.RefObject<HTMLDivElement>;
|
10
|
+
preventFocusOnOpen?: boolean;
|
10
11
|
};
|
11
12
|
export declare type OverlayReturnProps = {
|
12
13
|
ref: React.RefObject<HTMLDivElement>;
|
13
14
|
};
|
14
|
-
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
|
15
|
+
export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;
|
package/lib/hooks/useOverlay.js
CHANGED
@@ -19,13 +19,15 @@ const useOverlay = ({
|
|
19
19
|
initialFocusRef,
|
20
20
|
onEscape,
|
21
21
|
ignoreClickRefs,
|
22
|
-
onClickOutside
|
22
|
+
onClickOutside,
|
23
|
+
preventFocusOnOpen
|
23
24
|
}) => {
|
24
25
|
const overlayRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(_overlayRef);
|
25
26
|
(0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
|
26
27
|
containerRef: overlayRef,
|
27
28
|
returnFocusRef,
|
28
|
-
initialFocusRef
|
29
|
+
initialFocusRef,
|
30
|
+
preventFocusOnOpen
|
29
31
|
});
|
30
32
|
(0, _useOnOutsideClick.useOnOutsideClick)({
|
31
33
|
containerRef: overlayRef,
|
package/lib/index.d.ts
CHANGED
@@ -24,6 +24,8 @@ export { useConfirm } from './Dialog/ConfirmationDialog';
|
|
24
24
|
export { ActionList } from './ActionList';
|
25
25
|
export { ActionMenu } from './ActionMenu';
|
26
26
|
export type { ActionMenuProps } from './ActionMenu';
|
27
|
+
export { default as Autocomplete } from './Autocomplete';
|
28
|
+
export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';
|
27
29
|
export { default as Avatar } from './Avatar';
|
28
30
|
export type { AvatarProps } from './Avatar';
|
29
31
|
export { default as AvatarPair } from './AvatarPair';
|
@@ -98,10 +100,13 @@ export { default as TabNav } from './TabNav';
|
|
98
100
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
99
101
|
export { default as TextInput } from './TextInput';
|
100
102
|
export type { TextInputProps } from './TextInput';
|
103
|
+
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
104
|
+
export type { TextInputWithTokensProps } from './TextInputWithTokens';
|
101
105
|
export { default as Text } from './Text';
|
102
106
|
export type { TextProps } from './Text';
|
103
107
|
export { default as Timeline } from './Timeline';
|
104
108
|
export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
|
109
|
+
export { default as Token, IssueLabelToken, AvatarToken } from './Token';
|
105
110
|
export { default as Tooltip } from './Tooltip';
|
106
111
|
export type { TooltipProps } from './Tooltip';
|
107
112
|
export { default as Truncate } from './Truncate';
|
package/lib/index.js
CHANGED
@@ -153,6 +153,12 @@ Object.defineProperty(exports, "ActionMenu", {
|
|
153
153
|
return _ActionMenu.ActionMenu;
|
154
154
|
}
|
155
155
|
});
|
156
|
+
Object.defineProperty(exports, "Autocomplete", {
|
157
|
+
enumerable: true,
|
158
|
+
get: function () {
|
159
|
+
return _Autocomplete.default;
|
160
|
+
}
|
161
|
+
});
|
156
162
|
Object.defineProperty(exports, "Avatar", {
|
157
163
|
enumerable: true,
|
158
164
|
get: function () {
|
@@ -429,6 +435,12 @@ Object.defineProperty(exports, "TextInput", {
|
|
429
435
|
return _TextInput.default;
|
430
436
|
}
|
431
437
|
});
|
438
|
+
Object.defineProperty(exports, "TextInputWithTokens", {
|
439
|
+
enumerable: true,
|
440
|
+
get: function () {
|
441
|
+
return _TextInputWithTokens.default;
|
442
|
+
}
|
443
|
+
});
|
432
444
|
Object.defineProperty(exports, "Text", {
|
433
445
|
enumerable: true,
|
434
446
|
get: function () {
|
@@ -441,6 +453,24 @@ Object.defineProperty(exports, "Timeline", {
|
|
441
453
|
return _Timeline.default;
|
442
454
|
}
|
443
455
|
});
|
456
|
+
Object.defineProperty(exports, "Token", {
|
457
|
+
enumerable: true,
|
458
|
+
get: function () {
|
459
|
+
return _Token.default;
|
460
|
+
}
|
461
|
+
});
|
462
|
+
Object.defineProperty(exports, "IssueLabelToken", {
|
463
|
+
enumerable: true,
|
464
|
+
get: function () {
|
465
|
+
return _Token.IssueLabelToken;
|
466
|
+
}
|
467
|
+
});
|
468
|
+
Object.defineProperty(exports, "AvatarToken", {
|
469
|
+
enumerable: true,
|
470
|
+
get: function () {
|
471
|
+
return _Token.AvatarToken;
|
472
|
+
}
|
473
|
+
});
|
444
474
|
Object.defineProperty(exports, "Tooltip", {
|
445
475
|
enumerable: true,
|
446
476
|
get: function () {
|
@@ -508,6 +538,8 @@ var _ActionList = require("./ActionList");
|
|
508
538
|
|
509
539
|
var _ActionMenu = require("./ActionMenu");
|
510
540
|
|
541
|
+
var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
|
542
|
+
|
511
543
|
var _Avatar = _interopRequireDefault(require("./Avatar"));
|
512
544
|
|
513
545
|
var _AvatarPair = _interopRequireDefault(require("./AvatarPair"));
|
@@ -582,10 +614,14 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
|
|
582
614
|
|
583
615
|
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
584
616
|
|
617
|
+
var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
|
618
|
+
|
585
619
|
var _Text = _interopRequireDefault(require("./Text"));
|
586
620
|
|
587
621
|
var _Timeline = _interopRequireDefault(require("./Timeline"));
|
588
622
|
|
623
|
+
var _Token = _interopRequireWildcard(require("./Token"));
|
624
|
+
|
589
625
|
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
590
626
|
|
591
627
|
var _Truncate = _interopRequireDefault(require("./Truncate"));
|