@toptal/picasso-container 3.1.3-alpha-HG-917-fix-overlapping-sidebar-295fb9c4b.9 → 3.1.3-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22
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.
|
@@ -10,7 +10,11 @@ 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
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Whether container should act as inline element `display: inline-block`
|
|
15
|
+
*
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
14
18
|
inline?: boolean;
|
|
15
19
|
/** Use flexbox */
|
|
16
20
|
flex?: boolean;
|
|
@@ -24,11 +28,19 @@ export interface Props<V extends VariantType = VariantType> extends StandardProp
|
|
|
24
28
|
wrap?: WrapType;
|
|
25
29
|
/** Whether (`white`, `transparent`) container has border or not */
|
|
26
30
|
bordered?: V extends BorderableType ? boolean : never;
|
|
27
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Whether container has 8px border-radius applied or not
|
|
33
|
+
*
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
28
36
|
rounded?: boolean;
|
|
29
37
|
/** Style variant of Notification */
|
|
30
38
|
variant?: V;
|
|
31
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Component used for the root node
|
|
41
|
+
*
|
|
42
|
+
* @default div
|
|
43
|
+
*/
|
|
32
44
|
as?: ContainerType;
|
|
33
45
|
/** Text align of the inner text */
|
|
34
46
|
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;IACpB;;;;OAIG;IACH,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;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAA;IACX;;;;OAIG;IACH,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,cA0FvB,CAAA;AAID,eAAe,SAAS,CAAA;AACxB,YAAY,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -17,11 +17,13 @@ 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
|
-
|
|
20
|
+
export const Container = documentable(forwardRef((_a, ref) => {
|
|
21
|
+
var { as = 'div', inline = false, rounded = false } = _a, props = __rest(_a, ["as", "inline", "rounded"]);
|
|
22
|
+
const { children, className, flex, direction, alignItems, justifyContent, bordered = false, wrap, style, variant, align, top, bottom, left, right, padded, gap,
|
|
22
23
|
// Avoid passing external classes inside the rest props
|
|
23
24
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
24
|
-
classes: externalClasses } = props, rest = __rest(props, ["children", "className", "
|
|
25
|
+
classes: externalClasses } = props, rest = __rest(props, ["children", "className", "flex", "direction", "alignItems", "justifyContent", "bordered", "wrap", "style", "variant", "align", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
|
|
26
|
+
const Component = as;
|
|
25
27
|
const spacingProps = { gap, padded, top, bottom, right, left };
|
|
26
28
|
const isBorderedVariant = !variant || variant === 'white' || variant === 'transparent';
|
|
27
29
|
const getDisplayValue = (isInline, isFlex) => {
|
|
@@ -40,9 +42,5 @@ export const Container = documentable(forwardRef((props, ref) => {
|
|
|
40
42
|
alignmentClasses.direction[direction], className), style: Object.assign(Object.assign({}, getSpacingStyles(spacingProps)), style) }), children));
|
|
41
43
|
}));
|
|
42
44
|
Container.displayName = 'Container';
|
|
43
|
-
Container.defaultProps = {
|
|
44
|
-
as: 'div',
|
|
45
|
-
inline: false,
|
|
46
|
-
};
|
|
47
45
|
export default Container;
|
|
48
46
|
//# 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;AAuE7D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,YAAY,CACnD,UAAU,CACR,CACE,EAAmE,EACnE,GAA+B,EAC/B,EAAE;QAFF,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,OAAsB,EAAjB,KAAK,cAAvD,2BAAyD,CAAF;IAGvD,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,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,EAtBH,6LAsBL,CAAQ,CAAA;IAET,MAAM,SAAS,GAAG,EAAE,CAAA;IAEpB,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,eAAe,SAAS,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-container",
|
|
3
|
-
"version": "3.1.3-alpha-
|
|
3
|
+
"version": "3.1.3-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22+e1cd7f6d1",
|
|
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-
|
|
29
|
+
"@toptal/picasso-utils": "3.1.1-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22+e1cd7f6d1"
|
|
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-
|
|
39
|
-
"@toptal/picasso-test-utils": "1.1.2-alpha-
|
|
38
|
+
"@toptal/picasso-provider": "5.0.1-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.289+e1cd7f6d1",
|
|
39
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.368+e1cd7f6d1"
|
|
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": "e1cd7f6d145874c583419c992840043ba6ac330b"
|
|
50
50
|
}
|
|
@@ -24,8 +24,11 @@ export interface Props<V extends VariantType = VariantType>
|
|
|
24
24
|
HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
|
|
25
25
|
/** Content of Container */
|
|
26
26
|
children?: ReactNode
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Whether container should act as inline element `display: inline-block`
|
|
29
|
+
*
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
29
32
|
inline?: boolean
|
|
30
33
|
/** Use flexbox */
|
|
31
34
|
flex?: boolean
|
|
@@ -39,11 +42,19 @@ export interface Props<V extends VariantType = VariantType>
|
|
|
39
42
|
wrap?: WrapType
|
|
40
43
|
/** Whether (`white`, `transparent`) container has border or not */
|
|
41
44
|
bordered?: V extends BorderableType ? boolean : never
|
|
42
|
-
/**
|
|
45
|
+
/**
|
|
46
|
+
* Whether container has 8px border-radius applied or not
|
|
47
|
+
*
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
43
50
|
rounded?: boolean
|
|
44
51
|
/** Style variant of Notification */
|
|
45
52
|
variant?: V
|
|
46
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* Component used for the root node
|
|
55
|
+
*
|
|
56
|
+
* @default div
|
|
57
|
+
*/
|
|
47
58
|
as?: ContainerType
|
|
48
59
|
/** Text align of the inner text */
|
|
49
60
|
align?: PropTypes.Alignment
|
|
@@ -75,24 +86,21 @@ type ContainerProps = {
|
|
|
75
86
|
export const Container: ContainerProps = documentable(
|
|
76
87
|
forwardRef<Props, HTMLDivElement>(
|
|
77
88
|
<V extends VariantType>(
|
|
78
|
-
props: Props<V>,
|
|
89
|
+
{ as = 'div', inline = false, rounded = false, ...props }: Props<V>,
|
|
79
90
|
ref: Ref<HTMLDivElement> | null
|
|
80
91
|
) => {
|
|
81
92
|
const {
|
|
82
93
|
children,
|
|
83
94
|
className,
|
|
84
|
-
inline,
|
|
85
95
|
flex,
|
|
86
96
|
direction,
|
|
87
97
|
alignItems,
|
|
88
98
|
justifyContent,
|
|
99
|
+
bordered = false,
|
|
89
100
|
wrap,
|
|
90
101
|
style,
|
|
91
|
-
bordered = false,
|
|
92
|
-
rounded = false,
|
|
93
102
|
variant,
|
|
94
103
|
align,
|
|
95
|
-
as: Component = inline ? 'span' : 'div',
|
|
96
104
|
top,
|
|
97
105
|
bottom,
|
|
98
106
|
left,
|
|
@@ -105,6 +113,8 @@ export const Container: ContainerProps = documentable(
|
|
|
105
113
|
...rest
|
|
106
114
|
} = props
|
|
107
115
|
|
|
116
|
+
const Component = as
|
|
117
|
+
|
|
108
118
|
const spacingProps = { gap, padded, top, bottom, right, left }
|
|
109
119
|
const isBorderedVariant =
|
|
110
120
|
!variant || variant === 'white' || variant === 'transparent'
|
|
@@ -167,10 +177,5 @@ export const Container: ContainerProps = documentable(
|
|
|
167
177
|
|
|
168
178
|
Container.displayName = 'Container'
|
|
169
179
|
|
|
170
|
-
Container.defaultProps = {
|
|
171
|
-
as: 'div',
|
|
172
|
-
inline: false,
|
|
173
|
-
}
|
|
174
|
-
|
|
175
180
|
export default Container
|
|
176
181
|
export type { VariantType }
|