@primer/components 0.0.0-20211030172251 → 0.0.0-2021103018051
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 +9 -3
- package/dist/browser.esm.js +104 -108
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +104 -108
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/Divider.d.ts +2 -3
- package/lib/ActionList2/Divider.js +5 -10
- package/lib/ActionList2/Item.js +5 -21
- package/lib/ActionList2/List.js +1 -11
- package/lib/ActionList2/Selection.js +0 -11
- package/lib/ActionList2/index.d.ts +2 -1
- package/lib/Avatar.d.ts +1 -2
- package/lib/Avatar.js +1 -1
- package/lib/BranchName.d.ts +1 -2
- package/lib/BranchName.js +1 -1
- package/lib/Details.d.ts +1 -2
- package/lib/Details.js +1 -3
- package/lib/Dropdown.d.ts +2 -66
- package/lib/Heading.d.ts +1 -2
- package/lib/Heading.js +1 -6
- package/lib/ProgressBar.d.ts +16 -11
- package/lib/ProgressBar.js +6 -10
- package/lib/Spinner.d.ts +1 -2
- package/lib/Spinner.js +1 -3
- package/lib/drafts.d.ts +0 -1
- package/lib/drafts.js +0 -13
- package/lib-esm/ActionList2/Divider.d.ts +2 -3
- package/lib-esm/ActionList2/Divider.js +5 -8
- package/lib-esm/ActionList2/Item.js +5 -19
- package/lib-esm/ActionList2/List.js +1 -9
- package/lib-esm/ActionList2/Selection.js +0 -9
- package/lib-esm/ActionList2/index.d.ts +2 -1
- package/lib-esm/Avatar.d.ts +1 -2
- package/lib-esm/Avatar.js +2 -2
- package/lib-esm/BranchName.d.ts +1 -2
- package/lib-esm/BranchName.js +2 -2
- package/lib-esm/Details.d.ts +1 -2
- package/lib-esm/Details.js +1 -2
- package/lib-esm/Dropdown.d.ts +2 -66
- package/lib-esm/Heading.d.ts +1 -2
- package/lib-esm/Heading.js +2 -6
- package/lib-esm/ProgressBar.d.ts +16 -11
- package/lib-esm/ProgressBar.js +7 -11
- package/lib-esm/Spinner.d.ts +1 -2
- package/lib-esm/Spinner.js +1 -2
- package/lib-esm/drafts.d.ts +0 -1
- package/lib-esm/drafts.js +1 -2
- package/package.json +1 -1
- package/lib/ActionList2/MenuContext.d.ts +0 -10
- package/lib/ActionList2/MenuContext.js +0 -15
- package/lib/ActionMenu2.d.ts +0 -310
- package/lib/ActionMenu2.js +0 -91
- package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
- package/lib-esm/ActionList2/MenuContext.js +0 -3
- package/lib-esm/ActionMenu2.d.ts +0 -310
- package/lib-esm/ActionMenu2.js +0 -67
@@ -8,7 +8,6 @@ import Box from '../Box';
|
|
8
8
|
import sx, { merge } from '../sx';
|
9
9
|
import createSlots from '../utils/create-slots';
|
10
10
|
import { ListContext } from './List';
|
11
|
-
import { MenuContext } from './MenuContext';
|
12
11
|
import { Selection } from './Selection';
|
13
12
|
export const getVariantStyles = (variant, disabled) => {
|
14
13
|
if (disabled) {
|
@@ -55,7 +54,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
55
54
|
onSelect,
|
56
55
|
sx: sxProp = {},
|
57
56
|
id,
|
58
|
-
role,
|
59
57
|
_PrivateItemWrapper,
|
60
58
|
...props
|
61
59
|
}, forwardedRef) => {
|
@@ -63,10 +61,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
63
61
|
variant: listVariant,
|
64
62
|
showDividers
|
65
63
|
} = React.useContext(ListContext);
|
66
|
-
const {
|
67
|
-
itemRole,
|
68
|
-
afterSelect
|
69
|
-
} = React.useContext(MenuContext);
|
70
64
|
const {
|
71
65
|
theme
|
72
66
|
} = useTheme();
|
@@ -141,23 +135,16 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
141
135
|
const clickHandler = React.useCallback(event => {
|
142
136
|
if (typeof onSelect !== 'function') return;
|
143
137
|
if (disabled) return;
|
144
|
-
|
145
|
-
|
146
|
-
onSelect(event); // if this Item is inside a Menu, close the Menu
|
147
|
-
|
148
|
-
if (typeof afterSelect === 'function') afterSelect();
|
149
|
-
}
|
150
|
-
}, [onSelect, disabled, afterSelect]);
|
138
|
+
if (!event.defaultPrevented) onSelect(event);
|
139
|
+
}, [onSelect, disabled]);
|
151
140
|
const keyPressHandler = React.useCallback(event => {
|
152
141
|
if (typeof onSelect !== 'function') return;
|
153
142
|
if (disabled) return;
|
154
143
|
|
155
144
|
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
156
|
-
onSelect(event);
|
157
|
-
|
158
|
-
if (typeof afterSelect === 'function') afterSelect();
|
145
|
+
onSelect(event);
|
159
146
|
}
|
160
|
-
}, [onSelect, disabled
|
147
|
+
}, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
|
161
148
|
|
162
149
|
const labelId = useSSRSafeId(id);
|
163
150
|
const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
|
@@ -179,8 +166,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
|
|
179
166
|
"aria-disabled": disabled ? true : undefined,
|
180
167
|
tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
|
181
168
|
"aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
|
182
|
-
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
183
|
-
role: role || itemRole
|
169
|
+
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
184
170
|
}, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
|
185
171
|
selected: selected
|
186
172
|
}), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
|
@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
3
3
|
import React from 'react';
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import sx, { merge } from '../sx';
|
6
|
-
import { MenuContext } from './MenuContext';
|
7
6
|
export const ListContext = /*#__PURE__*/React.createContext({});
|
8
7
|
const ListBox = styled.ul.withConfig({
|
9
8
|
displayName: "List__ListBox",
|
@@ -13,7 +12,6 @@ export const List = /*#__PURE__*/React.forwardRef(({
|
|
13
12
|
variant = 'inset',
|
14
13
|
selectionVariant,
|
15
14
|
showDividers = false,
|
16
|
-
role,
|
17
15
|
sx: sxProp = {},
|
18
16
|
...props
|
19
17
|
}, forwardedRef) => {
|
@@ -23,14 +21,8 @@ export const List = /*#__PURE__*/React.forwardRef(({
|
|
23
21
|
// reset ul styles
|
24
22
|
paddingY: variant === 'inset' ? 2 : 0
|
25
23
|
};
|
26
|
-
/** if list is inside a Menu, it will get a role from the Menu */
|
27
|
-
|
28
|
-
const {
|
29
|
-
listRole
|
30
|
-
} = React.useContext(MenuContext);
|
31
24
|
return /*#__PURE__*/React.createElement(ListBox, _extends({
|
32
|
-
sx: merge(styles, sxProp)
|
33
|
-
role: role || listRole
|
25
|
+
sx: merge(styles, sxProp)
|
34
26
|
}, props, {
|
35
27
|
ref: forwardedRef
|
36
28
|
}), /*#__PURE__*/React.createElement(ListContext.Provider, {
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
2
2
|
import { CheckIcon } from '@primer/octicons-react';
|
3
3
|
import { ListContext } from './List';
|
4
4
|
import { GroupContext } from './Group';
|
5
|
-
import { MenuContext } from './MenuContext';
|
6
5
|
import { LeadingVisualContainer } from './Visuals';
|
7
6
|
export const Selection = ({
|
8
7
|
selected
|
@@ -13,9 +12,6 @@ export const Selection = ({
|
|
13
12
|
const {
|
14
13
|
selectionVariant: groupSelectionVariant
|
15
14
|
} = React.useContext(GroupContext);
|
16
|
-
const {
|
17
|
-
parent
|
18
|
-
} = React.useContext(MenuContext);
|
19
15
|
/** selectionVariant in Group can override the selectionVariant in List root */
|
20
16
|
|
21
17
|
const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
|
@@ -26,11 +22,6 @@ export const Selection = ({
|
|
26
22
|
return null;
|
27
23
|
}
|
28
24
|
|
29
|
-
if (parent === 'ActionMenu') {
|
30
|
-
throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
|
31
|
-
return null;
|
32
|
-
}
|
33
|
-
|
34
25
|
if (selectionVariant === 'single') {
|
35
26
|
return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
|
36
27
|
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import { Divider } from './Divider';
|
2
3
|
export type { ListProps as ActionListProps } from './List';
|
3
4
|
export type { GroupProps } from './Group';
|
4
5
|
export type { ItemProps } from './Item';
|
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
|
|
25
26
|
referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
|
26
27
|
}>;
|
27
28
|
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
28
|
-
Divider:
|
29
|
+
Divider: typeof Divider;
|
29
30
|
/** Secondary text which provides additional information about an `Item`. */
|
30
31
|
Description: import("react").FC<import("./Description").DescriptionProps>;
|
31
32
|
/** Icon (or similar) positioned before `Item` text. */
|
package/lib-esm/Avatar.d.ts
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
import { SystemCommonProps } from './constants';
|
2
1
|
import { SxProp } from './sx';
|
3
2
|
import { ComponentProps } from './utils/types';
|
4
3
|
declare const Avatar: import("styled-components").StyledComponent<"img", any, {
|
@@ -10,6 +9,6 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
|
|
10
9
|
src: string;
|
11
10
|
/** Provide alt text when the Avatar is used without the user's name next to it. */
|
12
11
|
alt?: string | undefined;
|
13
|
-
} &
|
12
|
+
} & SxProp, never>;
|
14
13
|
export declare type AvatarProps = ComponentProps<typeof Avatar>;
|
15
14
|
export default Avatar;
|
package/lib-esm/Avatar.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
2
|
+
import { get } from './constants';
|
3
3
|
import sx from './sx';
|
4
4
|
|
5
5
|
function getBorderRadius({
|
@@ -19,7 +19,7 @@ const Avatar = styled.img.attrs(props => ({
|
|
19
19
|
})).withConfig({
|
20
20
|
displayName: "Avatar",
|
21
21
|
componentId: "sc-1waaaky-0"
|
22
|
-
})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", "
|
22
|
+
})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), sx);
|
23
23
|
Avatar.defaultProps = {
|
24
24
|
size: 20,
|
25
25
|
alt: '',
|
package/lib-esm/BranchName.d.ts
CHANGED
@@ -1,6 +1,5 @@
|
|
1
|
-
import { SystemCommonProps } from './constants';
|
2
1
|
import { SxProp } from './sx';
|
3
2
|
import { ComponentProps } from './utils/types';
|
4
|
-
declare const BranchName: import("styled-components").StyledComponent<"a", any,
|
3
|
+
declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
|
5
4
|
export declare type BranchNameProps = ComponentProps<typeof BranchName>;
|
6
5
|
export default BranchName;
|
package/lib-esm/BranchName.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
2
|
+
import { get } from './constants';
|
3
3
|
import sx from './sx';
|
4
4
|
const BranchName = styled.a.withConfig({
|
5
5
|
displayName: "BranchName",
|
6
6
|
componentId: "sc-167ouzm-0"
|
7
|
-
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"
|
7
|
+
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), sx);
|
8
8
|
export default BranchName;
|
package/lib-esm/Details.d.ts
CHANGED
@@ -1,6 +1,5 @@
|
|
1
|
-
import { SystemCommonProps } from './constants';
|
2
1
|
import { SxProp } from './sx';
|
3
2
|
import { ComponentProps } from './utils/types';
|
4
|
-
declare const Details: import("styled-components").StyledComponent<"details", any,
|
3
|
+
declare const Details: import("styled-components").StyledComponent<"details", any, SxProp, never>;
|
5
4
|
export declare type DetailsProps = ComponentProps<typeof Details>;
|
6
5
|
export default Details;
|
package/lib-esm/Details.js
CHANGED
@@ -1,9 +1,8 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import { COMMON } from './constants';
|
3
2
|
import sx from './sx';
|
4
3
|
const Details = styled.details.withConfig({
|
5
4
|
displayName: "Details",
|
6
5
|
componentId: "ssy9qz-0"
|
7
|
-
})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", "
|
6
|
+
})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
|
8
7
|
Details.displayName = 'Details';
|
9
8
|
export default Details;
|
package/lib-esm/Dropdown.d.ts
CHANGED
@@ -15,46 +15,14 @@ export declare type DropdownMenuProps = ComponentProps<typeof DropdownMenu>;
|
|
15
15
|
export declare type DropdownItemProps = ComponentProps<typeof DropdownItem>;
|
16
16
|
declare const _default: {
|
17
17
|
({ children, className, ...rest }: {
|
18
|
-
|
19
|
-
color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
|
20
|
-
display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
21
|
-
marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
22
|
-
marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
23
|
-
marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
24
|
-
marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
25
|
-
opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
26
|
-
paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
27
|
-
paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
28
|
-
paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
29
|
-
paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
18
|
+
color?: string | undefined;
|
30
19
|
translate?: "yes" | "no" | undefined;
|
31
|
-
margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
32
|
-
padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
33
20
|
hidden?: boolean | undefined;
|
34
21
|
children?: React.ReactNode;
|
35
22
|
ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
|
36
|
-
p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
37
23
|
slot?: string | undefined;
|
38
24
|
style?: React.CSSProperties | undefined;
|
39
25
|
title?: string | undefined;
|
40
|
-
bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
41
|
-
m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
42
|
-
mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
43
|
-
mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
44
|
-
mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
45
|
-
ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
46
|
-
mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
47
|
-
marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
48
|
-
my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
49
|
-
marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
50
|
-
pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
51
|
-
pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
52
|
-
pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
53
|
-
pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
54
|
-
px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
55
|
-
paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
56
|
-
py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
57
|
-
paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
58
26
|
open?: boolean | undefined;
|
59
27
|
role?: React.AriaRole | undefined;
|
60
28
|
sx?: import("./sx").BetterSystemStyleObject | undefined;
|
@@ -313,46 +281,14 @@ declare const _default: {
|
|
313
281
|
theme?: any;
|
314
282
|
}): JSX.Element;
|
315
283
|
defaultProps: Partial<{
|
316
|
-
|
317
|
-
color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
|
318
|
-
display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
319
|
-
marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
320
|
-
marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
321
|
-
marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
322
|
-
marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
323
|
-
opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
324
|
-
paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
325
|
-
paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
326
|
-
paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
327
|
-
paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
284
|
+
color?: string | undefined;
|
328
285
|
translate?: "yes" | "no" | undefined;
|
329
|
-
margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
330
|
-
padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
331
286
|
hidden?: boolean | undefined;
|
332
287
|
children?: React.ReactNode;
|
333
288
|
ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
|
334
|
-
p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
335
289
|
slot?: string | undefined;
|
336
290
|
style?: React.CSSProperties | undefined;
|
337
291
|
title?: string | undefined;
|
338
|
-
bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
339
|
-
m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
340
|
-
mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
341
|
-
mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
342
|
-
mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
343
|
-
ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
344
|
-
mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
345
|
-
marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
346
|
-
my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
347
|
-
marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
348
|
-
pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
349
|
-
pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
350
|
-
pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
351
|
-
pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
352
|
-
px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
353
|
-
paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
354
|
-
py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
355
|
-
paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
356
292
|
open?: boolean | undefined;
|
357
293
|
role?: React.AriaRole | undefined;
|
358
294
|
sx?: import("./sx").BetterSystemStyleObject | undefined;
|
package/lib-esm/Heading.d.ts
CHANGED
@@ -1,6 +1,5 @@
|
|
1
|
-
import { SystemCommonProps, SystemTypographyProps } from './constants';
|
2
1
|
import { SxProp } from './sx';
|
3
2
|
import { ComponentProps } from './utils/types';
|
4
|
-
declare const Heading: import("styled-components").StyledComponent<"h2", any,
|
3
|
+
declare const Heading: import("styled-components").StyledComponent<"h2", any, SxProp, never>;
|
5
4
|
export declare type HeadingProps = ComponentProps<typeof Heading>;
|
6
5
|
export default Heading;
|
package/lib-esm/Heading.js
CHANGED
@@ -1,12 +1,8 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
2
|
+
import { get } from './constants';
|
3
3
|
import sx from './sx';
|
4
|
-
import theme from './theme';
|
5
4
|
const Heading = styled.h2.withConfig({
|
6
5
|
displayName: "Heading",
|
7
6
|
componentId: "sc-1cjoo9h-0"
|
8
|
-
})(["font-weight:", ";font-size:", ";margin:0;", ";"
|
9
|
-
Heading.defaultProps = {
|
10
|
-
theme
|
11
|
-
};
|
7
|
+
})(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx);
|
12
8
|
export default Heading;
|
package/lib-esm/ProgressBar.d.ts
CHANGED
@@ -1,17 +1,22 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { WidthProps } from 'styled-system';
|
3
|
-
import { SystemCommonProps } from './constants';
|
4
3
|
import { SxProp } from './sx';
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
}
|
13
|
-
|
14
|
-
|
4
|
+
declare type ProgressProp = {
|
5
|
+
progress?: string | number;
|
6
|
+
};
|
7
|
+
declare const sizeMap: {
|
8
|
+
small: string;
|
9
|
+
large: string;
|
10
|
+
default: string;
|
11
|
+
};
|
12
|
+
declare type StyledProgressContainerProps = {
|
13
|
+
inline?: boolean;
|
14
|
+
barSize?: keyof typeof sizeMap;
|
15
|
+
} & WidthProps & SxProp;
|
16
|
+
export declare type ProgressBarProps = {
|
17
|
+
bg: string;
|
18
|
+
} & StyledProgressContainerProps & ProgressProp;
|
19
|
+
declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
|
15
20
|
declare namespace ProgressBar {
|
16
21
|
var defaultProps: {
|
17
22
|
bg: string;
|
package/lib-esm/ProgressBar.js
CHANGED
@@ -1,14 +1,12 @@
|
|
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
1
|
import React from 'react';
|
4
2
|
import styled from 'styled-components';
|
5
3
|
import { width } from 'styled-system';
|
6
|
-
import {
|
4
|
+
import { get } from './constants';
|
7
5
|
import sx from './sx';
|
8
6
|
const Bar = styled.span.withConfig({
|
9
7
|
displayName: "ProgressBar__Bar",
|
10
8
|
componentId: "sc-1tiva13-0"
|
11
|
-
})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0,
|
9
|
+
})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
|
12
10
|
const sizeMap = {
|
13
11
|
small: '5px',
|
14
12
|
large: '10px',
|
@@ -17,20 +15,18 @@ const sizeMap = {
|
|
17
15
|
const ProgressContainer = styled.span.withConfig({
|
18
16
|
displayName: "ProgressBar__ProgressContainer",
|
19
17
|
componentId: "sc-1tiva13-1"
|
20
|
-
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", "
|
18
|
+
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], width, sx);
|
21
19
|
|
22
20
|
function ProgressBar({
|
23
21
|
progress,
|
24
22
|
bg,
|
25
|
-
theme,
|
26
23
|
...rest
|
27
24
|
}) {
|
28
|
-
return /*#__PURE__*/React.createElement(ProgressContainer,
|
29
|
-
theme: theme
|
30
|
-
}, rest), /*#__PURE__*/React.createElement(Bar, {
|
25
|
+
return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
|
31
26
|
progress: progress,
|
32
|
-
|
33
|
-
|
27
|
+
sx: {
|
28
|
+
bg
|
29
|
+
}
|
34
30
|
}));
|
35
31
|
}
|
36
32
|
|
package/lib-esm/Spinner.d.ts
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { SystemCommonProps } from './constants';
|
3
2
|
import { SxProp } from './sx';
|
4
3
|
import { ComponentProps } from './utils/types';
|
5
4
|
declare const sizeMap: {
|
@@ -12,6 +11,6 @@ export interface SpinnerInternalProps {
|
|
12
11
|
size?: keyof typeof sizeMap;
|
13
12
|
}
|
14
13
|
declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
|
15
|
-
declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any,
|
14
|
+
declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
|
16
15
|
export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
|
17
16
|
export default StyledSpinner;
|
package/lib-esm/Spinner.js
CHANGED
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from 'react';
|
4
4
|
import styled from 'styled-components';
|
5
|
-
import { COMMON } from './constants';
|
6
5
|
import sx from './sx';
|
7
6
|
const sizeMap = {
|
8
7
|
small: '16px',
|
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
|
|
41
40
|
const StyledSpinner = styled(Spinner).withConfig({
|
42
41
|
displayName: "Spinner__StyledSpinner",
|
43
42
|
componentId: "sc-14tspit-0"
|
44
|
-
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", "
|
43
|
+
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
|
45
44
|
StyledSpinner.displayName = 'Spinner';
|
46
45
|
export default StyledSpinner;
|
package/lib-esm/drafts.d.ts
CHANGED
package/lib-esm/drafts.js
CHANGED
package/package.json
CHANGED
@@ -1,10 +0,0 @@
|
|
1
|
-
/** This context can be used by components that compose ActionList inside a Menu */
|
2
|
-
import React from 'react';
|
3
|
-
declare type ContextProps = {
|
4
|
-
parent?: string;
|
5
|
-
listRole?: string;
|
6
|
-
itemRole?: string;
|
7
|
-
afterSelect?: () => void;
|
8
|
-
};
|
9
|
-
export declare const MenuContext: React.Context<ContextProps>;
|
10
|
-
export {};
|
@@ -1,15 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.MenuContext = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
-
|
12
|
-
/** This context can be used by components that compose ActionList inside a Menu */
|
13
|
-
const MenuContext = /*#__PURE__*/_react.default.createContext({});
|
14
|
-
|
15
|
-
exports.MenuContext = MenuContext;
|