@toptal/picasso-container 3.1.3-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22 → 3.1.3-alpha-MP-669-first-batch-of-rework-a31f7fc51.27
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/dist-package/src/Container/Container.d.ts +3 -15
- package/dist-package/src/Container/Container.d.ts.map +1 -1
- package/dist-package/src/Container/Container.js +7 -5
- package/dist-package/src/Container/Container.js.map +1 -1
- package/dist-package/src/Container/constants.d.ts +5 -0
- package/dist-package/src/Container/constants.d.ts.map +1 -0
- package/dist-package/src/Container/constants.js +5 -0
- package/dist-package/src/Container/constants.js.map +1 -0
- package/package.json +5 -5
- package/src/Container/Container.tsx +14 -19
- package/src/Container/constants.ts +4 -0
|
@@ -10,11 +10,7 @@ declare type BorderableType = 'transparent' | 'white';
|
|
|
10
10
|
export interface Props<V extends VariantType = VariantType> extends StandardProps, HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
|
|
11
11
|
/** Content of Container */
|
|
12
12
|
children?: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Whether container should act as inline element `display: inline-block`
|
|
15
|
-
*
|
|
16
|
-
* @default false
|
|
17
|
-
*/
|
|
13
|
+
/** Whether container should act as inline element `display: inline-block` */
|
|
18
14
|
inline?: boolean;
|
|
19
15
|
/** Use flexbox */
|
|
20
16
|
flex?: boolean;
|
|
@@ -28,19 +24,11 @@ export interface Props<V extends VariantType = VariantType> extends StandardProp
|
|
|
28
24
|
wrap?: WrapType;
|
|
29
25
|
/** Whether (`white`, `transparent`) container has border or not */
|
|
30
26
|
bordered?: V extends BorderableType ? boolean : never;
|
|
31
|
-
/**
|
|
32
|
-
* Whether container has 8px border-radius applied or not
|
|
33
|
-
*
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
27
|
+
/** Whether container has 8px border-radius applied or not */
|
|
36
28
|
rounded?: boolean;
|
|
37
29
|
/** Style variant of Notification */
|
|
38
30
|
variant?: V;
|
|
39
|
-
/**
|
|
40
|
-
* Component used for the root node
|
|
41
|
-
*
|
|
42
|
-
* @default div
|
|
43
|
-
*/
|
|
31
|
+
/** Component used for the root node */
|
|
44
32
|
as?: ContainerType;
|
|
45
33
|
/** Text align of the inner text */
|
|
46
34
|
align?: PropTypes.Alignment;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI/E,aAAK,aAAa,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnC,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AAExE,aAAK,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAA;AAElD,aAAK,cAAc,GAAG,aAAa,GAAG,OAAO,CAAA;AAE7C,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACxD,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI/E,aAAK,aAAa,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnC,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AAExE,aAAK,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAA;AAElD,aAAK,cAAc,GAAG,aAAa,GAAG,OAAO,CAAA;AAE7C,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACxD,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,iDAAiD;IACjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,SAAS,cAAc,GAAG,OAAO,GAAG,KAAK,CAAA;IACrD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAA;IAC3B,wDAAwD;IACxD,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,CAAA;CAClB;AAED,aAAK,cAAc,GAAG;IACpB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAClC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;KAAE,GACrD,YAAY,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;CAC3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cA2FvB,CAAA;AASD,eAAe,SAAS,CAAA;AACxB,YAAY,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -17,13 +17,11 @@ import { getSpacingClasses, getSpacingStyles } from './utils';
|
|
|
17
17
|
/**
|
|
18
18
|
* Container component used for spacing 2 elements
|
|
19
19
|
*/
|
|
20
|
-
export const Container = documentable(forwardRef((
|
|
21
|
-
|
|
22
|
-
const { children, className, flex, direction, alignItems, justifyContent, bordered = false, wrap, style, variant, align, top, bottom, left, right, padded, gap,
|
|
20
|
+
export const Container = documentable(forwardRef((props, ref) => {
|
|
21
|
+
const { children, className, inline, flex, direction, alignItems, justifyContent, wrap, style, bordered = false, rounded = false, variant, align, as: Component = inline ? 'span' : 'div', top, bottom, left, right, padded, gap,
|
|
23
22
|
// Avoid passing external classes inside the rest props
|
|
24
23
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
25
|
-
classes: externalClasses } = props, rest = __rest(props, ["children", "className", "flex", "direction", "alignItems", "justifyContent", "
|
|
26
|
-
const Component = as;
|
|
24
|
+
classes: externalClasses } = props, rest = __rest(props, ["children", "className", "inline", "flex", "direction", "alignItems", "justifyContent", "wrap", "style", "bordered", "rounded", "variant", "align", "as", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
|
|
27
25
|
const spacingProps = { gap, padded, top, bottom, right, left };
|
|
28
26
|
const isBorderedVariant = !variant || variant === 'white' || variant === 'transparent';
|
|
29
27
|
const getDisplayValue = (isInline, isFlex) => {
|
|
@@ -42,5 +40,9 @@ export const Container = documentable(forwardRef((_a, ref) => {
|
|
|
42
40
|
alignmentClasses.direction[direction], className), style: Object.assign(Object.assign({}, getSpacingStyles(spacingProps)), style) }), children));
|
|
43
41
|
}));
|
|
44
42
|
Container.displayName = 'Container';
|
|
43
|
+
Container.defaultProps = {
|
|
44
|
+
as: 'div',
|
|
45
|
+
inline: false,
|
|
46
|
+
};
|
|
45
47
|
export default Container;
|
|
46
48
|
//# sourceMappingURL=Container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA4D7D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,YAAY,CACnD,UAAU,CACR,CACE,KAAe,EACf,GAA+B,EAC/B,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACvC,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG;IACH,uDAAuD;IACvD,sDAAsD;IACtD,OAAO,EAAE,eAAe,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EAzBH,wNAyBL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,aAAa,CAAA;IAE9D,MAAM,eAAe,GAAG,CACtB,QAA6B,EAC7B,MAA2B,EAC3B,EAAE;QACF,OAAO,MAAM;YACX,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,EAAE,CAAA;IACR,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,OAAO,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAEzC,iBAAiB,CAAC,YAAY,CAAC,EAE/B,OAAO,KAAK,KAAK,QAAQ,IAAI,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,EAE9D,UAAU,IAAI,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,EAErD,cAAc,IAAI,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAEjE,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAEnC,QAAQ;YACN,iBAAiB;YACjB,qCAAqC,EACvC,OAAO,IAAI,YAAY,EAEvB,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,EAE7B,SAAS;YACP,SAAS,KAAK,KAAK;YACnB,gBAAgB,CAAC,SAAS,CAAC,SAAS,CAAC,EAEvC,SAAS,CACV,EACD,KAAK,kCAEA,gBAAgB,CAAC,YAAY,CAAC,GAC9B,KAAK,MAGT,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACgB,CACpB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,KAAK;IACT,MAAM,EAAE,KAAK;CACd,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Container/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,QAAQ,CAAA;AACnC,eAAO,MAAM,UAAU,QAAQ,CAAA;AAC/B,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AACrC,eAAO,MAAM,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/Container/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAA;AACnC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAA;AACrC,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-container",
|
|
3
|
-
"version": "3.1.3-alpha-MP-669-first-batch-of-rework-
|
|
3
|
+
"version": "3.1.3-alpha-MP-669-first-batch-of-rework-a31f7fc51.27+a31f7fc51",
|
|
4
4
|
"description": "Toptal UI components library - Container",
|
|
5
5
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"prepublishOnly": "yarn build:package"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@toptal/picasso-utils": "3.1.1-alpha-MP-669-first-batch-of-rework-
|
|
29
|
+
"@toptal/picasso-utils": "3.1.1-alpha-MP-669-first-batch-of-rework-a31f7fc51.27+a31f7fc51"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@toptal/picasso-provider": "*",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"react": ">=16.12.0 < 19.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@toptal/picasso-provider": "5.0.1-alpha-MP-669-first-batch-of-rework-
|
|
39
|
-
"@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-
|
|
38
|
+
"@toptal/picasso-provider": "5.0.1-alpha-MP-669-first-batch-of-rework-a31f7fc51.294+a31f7fc51",
|
|
39
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-a31f7fc51.373+a31f7fc51"
|
|
40
40
|
},
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
47
47
|
"src"
|
|
48
48
|
],
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "a31f7fc5167f00dd9d08c7a5acbeeb15dc971326"
|
|
50
50
|
}
|
|
@@ -24,11 +24,8 @@ export interface Props<V extends VariantType = VariantType>
|
|
|
24
24
|
HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
|
|
25
25
|
/** Content of Container */
|
|
26
26
|
children?: ReactNode
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
*
|
|
30
|
-
* @default false
|
|
31
|
-
*/
|
|
27
|
+
|
|
28
|
+
/** Whether container should act as inline element `display: inline-block` */
|
|
32
29
|
inline?: boolean
|
|
33
30
|
/** Use flexbox */
|
|
34
31
|
flex?: boolean
|
|
@@ -42,19 +39,11 @@ export interface Props<V extends VariantType = VariantType>
|
|
|
42
39
|
wrap?: WrapType
|
|
43
40
|
/** Whether (`white`, `transparent`) container has border or not */
|
|
44
41
|
bordered?: V extends BorderableType ? boolean : never
|
|
45
|
-
/**
|
|
46
|
-
* Whether container has 8px border-radius applied or not
|
|
47
|
-
*
|
|
48
|
-
* @default false
|
|
49
|
-
*/
|
|
42
|
+
/** Whether container has 8px border-radius applied or not */
|
|
50
43
|
rounded?: boolean
|
|
51
44
|
/** Style variant of Notification */
|
|
52
45
|
variant?: V
|
|
53
|
-
/**
|
|
54
|
-
* Component used for the root node
|
|
55
|
-
*
|
|
56
|
-
* @default div
|
|
57
|
-
*/
|
|
46
|
+
/** Component used for the root node */
|
|
58
47
|
as?: ContainerType
|
|
59
48
|
/** Text align of the inner text */
|
|
60
49
|
align?: PropTypes.Alignment
|
|
@@ -86,21 +75,24 @@ type ContainerProps = {
|
|
|
86
75
|
export const Container: ContainerProps = documentable(
|
|
87
76
|
forwardRef<Props, HTMLDivElement>(
|
|
88
77
|
<V extends VariantType>(
|
|
89
|
-
|
|
78
|
+
props: Props<V>,
|
|
90
79
|
ref: Ref<HTMLDivElement> | null
|
|
91
80
|
) => {
|
|
92
81
|
const {
|
|
93
82
|
children,
|
|
94
83
|
className,
|
|
84
|
+
inline,
|
|
95
85
|
flex,
|
|
96
86
|
direction,
|
|
97
87
|
alignItems,
|
|
98
88
|
justifyContent,
|
|
99
|
-
bordered = false,
|
|
100
89
|
wrap,
|
|
101
90
|
style,
|
|
91
|
+
bordered = false,
|
|
92
|
+
rounded = false,
|
|
102
93
|
variant,
|
|
103
94
|
align,
|
|
95
|
+
as: Component = inline ? 'span' : 'div',
|
|
104
96
|
top,
|
|
105
97
|
bottom,
|
|
106
98
|
left,
|
|
@@ -113,8 +105,6 @@ export const Container: ContainerProps = documentable(
|
|
|
113
105
|
...rest
|
|
114
106
|
} = props
|
|
115
107
|
|
|
116
|
-
const Component = as
|
|
117
|
-
|
|
118
108
|
const spacingProps = { gap, padded, top, bottom, right, left }
|
|
119
109
|
const isBorderedVariant =
|
|
120
110
|
!variant || variant === 'white' || variant === 'transparent'
|
|
@@ -177,5 +167,10 @@ export const Container: ContainerProps = documentable(
|
|
|
177
167
|
|
|
178
168
|
Container.displayName = 'Container'
|
|
179
169
|
|
|
170
|
+
Container.defaultProps = {
|
|
171
|
+
as: 'div',
|
|
172
|
+
inline: false,
|
|
173
|
+
}
|
|
174
|
+
|
|
180
175
|
export default Container
|
|
181
176
|
export type { VariantType }
|