@primer/components 0.0.0-20219818220 → 0.0.0-202198182351
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 +1 -1
- package/dist/browser.esm.js +313 -297
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +387 -371
- package/dist/browser.umd.js.map +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib/FilteredActionList/FilteredActionList.js +31 -5
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +5 -10
- package/lib/TextInput.d.ts +12 -4
- package/lib/TextInput.js +46 -4
- package/lib/Token/AvatarToken.d.ts +7 -0
- package/lib/Token/{ProfileToken.js → AvatarToken.js} +4 -4
- package/lib/Token/_TokenTextContainer.js +3 -14
- package/lib/Token/index.d.ts +1 -1
- package/lib/Token/index.js +3 -3
- package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +2 -4
- package/lib/index.d.ts +1 -3
- package/lib/index.js +2 -18
- package/lib/utils/types/index.d.ts +0 -1
- package/lib/utils/types/index.js +0 -13
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +5 -8
- package/lib-esm/TextInput.d.ts +12 -4
- package/lib-esm/TextInput.js +37 -4
- package/lib-esm/Token/AvatarToken.d.ts +7 -0
- package/lib-esm/Token/{ProfileToken.js → AvatarToken.js} +4 -4
- package/lib-esm/Token/_TokenTextContainer.js +2 -11
- package/lib-esm/Token/index.d.ts +1 -1
- package/lib-esm/Token/index.js +1 -1
- package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +2 -4
- package/lib-esm/index.d.ts +1 -3
- package/lib-esm/index.js +1 -3
- package/lib-esm/utils/types/index.d.ts +0 -1
- package/lib-esm/utils/types/index.js +1 -2
- package/package.json +1 -1
- package/lib/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib/Autocomplete/Autocomplete.js +0 -68
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteContext.js +0 -11
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -150
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib/Autocomplete/AutocompleteMenu.js +0 -223
- package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteOverlay.js +0 -69
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/TextInputWithTokens.d.ts +0 -323
- package/lib/TextInputWithTokens.js +0 -244
- package/lib/Token/ProfileToken.d.ts +0 -7
- package/lib/_TextInputWrapper.d.ts +0 -10
- package/lib/_TextInputWrapper.js +0 -51
- package/lib/_UnstyledTextInput.d.ts +0 -2
- package/lib/_UnstyledTextInput.js +0 -20
- package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib/utils/scrollIntoViewingArea.js +0 -39
- package/lib/utils/types/MandateProps.d.ts +0 -3
- package/lib/utils/types/MandateProps.js +0 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib-esm/Autocomplete/Autocomplete.js +0 -47
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
- package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -51
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/TextInputWithTokens.d.ts +0 -323
- package/lib-esm/TextInputWithTokens.js +0 -219
- package/lib-esm/Token/ProfileToken.d.ts +0 -7
- package/lib-esm/_TextInputWrapper.d.ts +0 -10
- package/lib-esm/_TextInputWrapper.js +0 -31
- package/lib-esm/_UnstyledTextInput.d.ts +0 -2
- package/lib-esm/_UnstyledTextInput.js +0 -7
- package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
- package/lib-esm/utils/types/MandateProps.d.ts +0 -3
- package/lib-esm/utils/types/MandateProps.js +0 -1
@@ -1,31 +0,0 @@
|
|
1
|
-
import styled, { css } from 'styled-components';
|
2
|
-
import { maxWidth, minWidth, variant, width } from 'styled-system';
|
3
|
-
import { get } from './constants';
|
4
|
-
import sx from './sx';
|
5
|
-
const sizeVariants = variant({
|
6
|
-
variants: {
|
7
|
-
small: {
|
8
|
-
minHeight: '28px',
|
9
|
-
px: 2,
|
10
|
-
py: '3px',
|
11
|
-
fontSize: 0,
|
12
|
-
lineHeight: '20px'
|
13
|
-
},
|
14
|
-
large: {
|
15
|
-
px: 2,
|
16
|
-
py: '10px',
|
17
|
-
fontSize: 3
|
18
|
-
}
|
19
|
-
}
|
20
|
-
});
|
21
|
-
const TextInputWrapper = styled.span.withConfig({
|
22
|
-
displayName: "_TextInputWrapper__TextInputWrapper",
|
23
|
-
componentId: "sc-5vfcis-0"
|
24
|
-
})(["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:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
|
25
|
-
if (props.hasIcon) {
|
26
|
-
return css(["padding:0;"]);
|
27
|
-
} else {
|
28
|
-
return css(["padding:6px 12px;"]);
|
29
|
-
}
|
30
|
-
}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
|
31
|
-
export default TextInputWrapper;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import styled from 'styled-components';
|
2
|
-
import sx from './sx';
|
3
|
-
const UnstyledTextInput = styled.input.withConfig({
|
4
|
-
displayName: "_UnstyledTextInput__UnstyledTextInput",
|
5
|
-
componentId: "sc-1jgl33s-0"
|
6
|
-
})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx);
|
7
|
-
export default UnstyledTextInput;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const scrollIntoViewingArea: (child: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
|
@@ -1,30 +0,0 @@
|
|
1
|
-
export const scrollIntoViewingArea = (child, container, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
|
2
|
-
const startSide = direction === 'vertical' ? 'top' : 'left';
|
3
|
-
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
4
|
-
const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
|
5
|
-
const {
|
6
|
-
[startSide]: childStart,
|
7
|
-
[endSide]: childEnd
|
8
|
-
} = child.getBoundingClientRect();
|
9
|
-
const {
|
10
|
-
[startSide]: containerStart,
|
11
|
-
[endSide]: containerEnd
|
12
|
-
} = container.getBoundingClientRect();
|
13
|
-
const isChildStartAboveViewingArea = childStart < containerStart + endMargin;
|
14
|
-
const isChildBottomBelowViewingArea = childEnd > containerEnd - startMargin;
|
15
|
-
|
16
|
-
if (isChildStartAboveViewingArea) {
|
17
|
-
const scrollHeightToChildStart = childStart - containerStart + container[scrollSide];
|
18
|
-
container.scrollTo({
|
19
|
-
behavior,
|
20
|
-
[startSide]: scrollHeightToChildStart - endMargin
|
21
|
-
});
|
22
|
-
} else if (isChildBottomBelowViewingArea) {
|
23
|
-
const scrollHeightToChildBottom = childEnd - containerEnd + container[scrollSide];
|
24
|
-
container.scrollTo({
|
25
|
-
behavior,
|
26
|
-
[startSide]: scrollHeightToChildBottom + startMargin
|
27
|
-
});
|
28
|
-
} // either completely in view or outside viewing area on both ends, don't scroll
|
29
|
-
|
30
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|