@primer/components 0.0.0-202181521420 → 0.0.0-2021815225952
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 +15 -1
- package/dist/browser.esm.js +305 -259
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +301 -255
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.js +3 -3
- package/lib/AnchoredOverlay/AnchoredOverlay.js +2 -2
- package/lib/Avatar.d.ts +4 -0
- package/lib/Dialog/Dialog.js +4 -4
- package/lib/FilteredActionList/FilteredActionList.js +3 -3
- package/lib/SelectMenu/SelectMenu.d.ts +11 -327
- package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib/TextInput.d.ts +6 -6
- package/lib/TextInput.js +21 -16
- package/lib/Timeline.js +12 -15
- package/lib/index.d.ts +1 -0
- package/lib/index.js +14 -0
- package/lib/utils/ssr.d.ts +1 -0
- package/lib/utils/ssr.js +19 -0
- package/lib/utils/uniqueId.js +1 -0
- package/lib-esm/ActionList/Item.js +4 -4
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
- package/lib-esm/Avatar.d.ts +4 -0
- package/lib-esm/Dialog/Dialog.js +3 -3
- package/lib-esm/FilteredActionList/FilteredActionList.js +3 -3
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -327
- package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib-esm/TextInput.d.ts +6 -6
- package/lib-esm/TextInput.js +22 -16
- package/lib-esm/Timeline.js +8 -13
- package/lib-esm/index.d.ts +1 -0
- package/lib-esm/index.js +2 -1
- package/lib-esm/utils/ssr.d.ts +1 -0
- package/lib-esm/utils/ssr.js +1 -0
- package/lib-esm/utils/uniqueId.js +1 -0
- package/package.json +3 -2
|
@@ -4,6 +4,6 @@ import { ComponentProps } from '../utils/types';
|
|
|
4
4
|
declare type SelectMenuFilterInternalProps = {
|
|
5
5
|
value?: string;
|
|
6
6
|
} & TextInputProps;
|
|
7
|
-
declare const SelectMenuFilter: React.ForwardRefExoticComponent<Pick<SelectMenuFilterInternalProps,
|
|
7
|
+
declare const SelectMenuFilter: React.ForwardRefExoticComponent<Pick<SelectMenuFilterInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
|
8
8
|
export declare type SelectMenuFilterProps = ComponentProps<typeof SelectMenuFilter>;
|
|
9
9
|
export default SelectMenuFilter;
|
package/lib-esm/TextInput.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
|
|
3
|
-
import { SystemCommonProps } from './constants';
|
|
4
3
|
import { SxProp } from './sx';
|
|
5
4
|
import { ComponentProps } from './utils/types';
|
|
6
5
|
declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
@@ -10,13 +9,14 @@ declare const Wrapper: import("styled-components").StyledComponent<"span", any,
|
|
|
10
9
|
block?: boolean | undefined;
|
|
11
10
|
contrast?: boolean | undefined;
|
|
12
11
|
variant?: "large" | "small" | undefined;
|
|
13
|
-
} &
|
|
14
|
-
declare type
|
|
15
|
-
|
|
12
|
+
} & 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>;
|
|
13
|
+
declare type NonPassthroughProps = {
|
|
14
|
+
className?: string;
|
|
16
15
|
icon?: React.ComponentType<{
|
|
17
16
|
className?: string;
|
|
18
17
|
}>;
|
|
19
|
-
} & ComponentProps<typeof Wrapper
|
|
20
|
-
declare
|
|
18
|
+
} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
|
|
19
|
+
declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
|
|
20
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
|
21
21
|
export declare type TextInputProps = ComponentProps<typeof TextInput>;
|
|
22
22
|
export default TextInput;
|
package/lib-esm/TextInput.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
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
2
|
|
|
3
|
-
import { omit, pick } from '@styled-system/props';
|
|
4
3
|
import classnames from 'classnames';
|
|
5
4
|
import React from 'react';
|
|
6
5
|
import styled, { css } from 'styled-components';
|
|
7
6
|
import { maxWidth, minWidth, variant, width } from 'styled-system';
|
|
8
|
-
import {
|
|
7
|
+
import { get } from './constants';
|
|
9
8
|
import sx from './sx';
|
|
10
9
|
const sizeVariants = variant({
|
|
11
10
|
variants: {
|
|
@@ -30,37 +29,44 @@ const Input = styled.input.withConfig({
|
|
|
30
29
|
const Wrapper = styled.span.withConfig({
|
|
31
30
|
displayName: "TextInput__Wrapper",
|
|
32
31
|
componentId: "sc-1apmpmt-1"
|
|
33
|
-
})(["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:", ";}", " ", " ", " ", " ", "
|
|
32
|
+
})(["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 => {
|
|
34
33
|
if (props.hasIcon) {
|
|
35
34
|
return css(["padding:0;"]);
|
|
36
35
|
} else {
|
|
37
36
|
return css(["padding:6px 12px;"]);
|
|
38
37
|
}
|
|
39
|
-
}, 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'),
|
|
38
|
+
}, 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); // Props that are not passed through to Input:
|
|
39
|
+
|
|
40
40
|
// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
|
|
41
41
|
const TextInput = /*#__PURE__*/React.forwardRef(({
|
|
42
42
|
icon: IconComponent,
|
|
43
|
-
contrast,
|
|
44
|
-
className,
|
|
45
43
|
block,
|
|
44
|
+
className,
|
|
45
|
+
contrast,
|
|
46
46
|
disabled,
|
|
47
|
-
theme,
|
|
48
47
|
sx: sxProp,
|
|
49
|
-
|
|
48
|
+
theme,
|
|
49
|
+
width: widthProp,
|
|
50
|
+
minWidth: minWidthProp,
|
|
51
|
+
maxWidth: maxWidthProp,
|
|
52
|
+
variant: variantProp,
|
|
53
|
+
...inputProps
|
|
50
54
|
}, ref) => {
|
|
51
55
|
// this class is necessary to style FilterSearch, plz no touchy!
|
|
52
56
|
const wrapperClasses = classnames(className, 'TextInput-wrapper');
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
57
|
+
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
58
|
+
block: block,
|
|
56
59
|
className: wrapperClasses,
|
|
60
|
+
contrast: contrast,
|
|
61
|
+
disabled: disabled,
|
|
57
62
|
hasIcon: !!IconComponent,
|
|
58
|
-
|
|
63
|
+
sx: sxProp,
|
|
59
64
|
theme: theme,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
65
|
+
width: widthProp,
|
|
66
|
+
minWidth: minWidthProp,
|
|
67
|
+
maxWidth: maxWidthProp,
|
|
68
|
+
variant: variantProp
|
|
69
|
+
}, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
|
|
64
70
|
className: "TextInput-icon"
|
|
65
71
|
}), /*#__PURE__*/React.createElement(Input, _extends({
|
|
66
72
|
ref: ref,
|
package/lib-esm/Timeline.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _styled from "styled-components";
|
|
2
|
-
|
|
3
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); }
|
|
4
2
|
|
|
5
3
|
import classnames from 'classnames';
|
|
@@ -19,19 +17,18 @@ const TimelineItem = styled(Box).attrs(props => ({
|
|
|
19
17
|
componentId: "c4dq2e-1"
|
|
20
18
|
})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), COMMON, sx);
|
|
21
19
|
|
|
22
|
-
var _StyledBox = styled(Box).withConfig({
|
|
23
|
-
displayName: "Timeline___StyledBox",
|
|
24
|
-
componentId: "c4dq2e-2"
|
|
25
|
-
})(["border-radius:50%;border:2px solid ", ";"], p => p._css);
|
|
26
|
-
|
|
27
20
|
const TimelineBadge = props => {
|
|
28
21
|
return /*#__PURE__*/React.createElement(Box, {
|
|
29
22
|
position: "relative",
|
|
30
23
|
zIndex: 1
|
|
31
|
-
}, /*#__PURE__*/React.createElement(
|
|
24
|
+
}, /*#__PURE__*/React.createElement(Box, _extends({
|
|
32
25
|
display: "flex",
|
|
33
26
|
className: classnames(props.className, 'TimelineItem-Badge'),
|
|
34
27
|
flexShrink: 0,
|
|
28
|
+
borderRadius: "50%",
|
|
29
|
+
borderWidth: "2px",
|
|
30
|
+
borderStyle: "solid",
|
|
31
|
+
borderColor: "canvas.default",
|
|
35
32
|
overflow: "hidden",
|
|
36
33
|
color: "fg.muted",
|
|
37
34
|
bg: "timeline.badgeBg",
|
|
@@ -41,19 +38,17 @@ const TimelineBadge = props => {
|
|
|
41
38
|
ml: "-15px",
|
|
42
39
|
alignItems: "center",
|
|
43
40
|
justifyContent: "center"
|
|
44
|
-
}, props,
|
|
45
|
-
_css: get('colors.canvas.default')
|
|
46
|
-
}), props.children));
|
|
41
|
+
}, props), props.children));
|
|
47
42
|
};
|
|
48
43
|
|
|
49
44
|
TimelineBadge.displayName = "TimelineBadge";
|
|
50
45
|
const TimelineBody = styled(Box).withConfig({
|
|
51
46
|
displayName: "Timeline__TimelineBody",
|
|
52
|
-
componentId: "c4dq2e-
|
|
47
|
+
componentId: "c4dq2e-2"
|
|
53
48
|
})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx);
|
|
54
49
|
const TimelineBreak = styled(Box).withConfig({
|
|
55
50
|
displayName: "Timeline__TimelineBreak",
|
|
56
|
-
componentId: "c4dq2e-
|
|
51
|
+
componentId: "c4dq2e-3"
|
|
57
52
|
})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.canvas.default'), get('space.1'), get('colors.border.default'), sx);
|
|
58
53
|
TimelineItem.displayName = 'Timeline.Item';
|
|
59
54
|
TimelineBadge.displayName = 'Timeline.Badge';
|
package/lib-esm/index.d.ts
CHANGED
|
@@ -108,3 +108,4 @@ export { default as Truncate } from './Truncate';
|
|
|
108
108
|
export type { TruncateProps } from './Truncate';
|
|
109
109
|
export { default as UnderlineNav } from './UnderlineNav';
|
|
110
110
|
export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
|
|
111
|
+
export { SSRProvider, useSSRSafeId } from './utils/ssr';
|
package/lib-esm/index.js
CHANGED
|
@@ -65,4 +65,5 @@ export { default as Text } from './Text';
|
|
|
65
65
|
export { default as Timeline } from './Timeline';
|
|
66
66
|
export { default as Tooltip } from './Tooltip';
|
|
67
67
|
export { default as Truncate } from './Truncate';
|
|
68
|
-
export { default as UnderlineNav } from './UnderlineNav';
|
|
68
|
+
export { default as UnderlineNav } from './UnderlineNav';
|
|
69
|
+
export { SSRProvider, useSSRSafeId } from './utils/ssr';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SSRProvider, useSSRSafeId } from '@react-aria/ssr';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SSRProvider, useSSRSafeId } from '@react-aria/ssr';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/components",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-2021815225952",
|
|
4
4
|
"description": "Primer react components",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@primer/octicons-react": "^13.0.0",
|
|
47
47
|
"@primer/primitives": "4.7.1",
|
|
48
|
+
"@react-aria/ssr": "3.1.0",
|
|
48
49
|
"@styled-system/css": "5.1.5",
|
|
49
50
|
"@styled-system/props": "5.1.5",
|
|
50
51
|
"@styled-system/theme-get": "5.1.2",
|
|
@@ -122,7 +123,7 @@
|
|
|
122
123
|
"react": "17.0.2",
|
|
123
124
|
"react-dom": "17.0.2",
|
|
124
125
|
"react-test-renderer": "17.0.2",
|
|
125
|
-
"rollup": "2.
|
|
126
|
+
"rollup": "2.56.3",
|
|
126
127
|
"rollup-plugin-babel": "4.4.0",
|
|
127
128
|
"rollup-plugin-terser": "7.0.2",
|
|
128
129
|
"rollup-plugin-visualizer": "5.5.0",
|