@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 {};
|