@spark-web/row 1.0.4 → 1.1.1
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.
|
@@ -3,7 +3,7 @@ import type { ResponsiveProp } from '@spark-web/theme';
|
|
|
3
3
|
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
4
4
|
import type { ReactElement } from 'react';
|
|
5
5
|
import type { Align, AlignY } from './alignment';
|
|
6
|
-
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
|
|
6
|
+
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
|
|
7
7
|
export declare type RowProps = {
|
|
8
8
|
/** Horizontally align items within the container. */
|
|
9
9
|
align?: ResponsiveProp<Align>;
|
|
@@ -16,12 +16,12 @@ export declare type RowProps = {
|
|
|
16
16
|
} & ValidBoxProps;
|
|
17
17
|
export declare const Row: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
18
18
|
as?: Comp | undefined;
|
|
19
|
-
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "
|
|
19
|
+
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
20
20
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
21
21
|
/** Horizontally align items within the container. */
|
|
22
22
|
align?: ResponsiveProp<"left" | "right" | "center"> | undefined;
|
|
23
23
|
/** Vertically align items within the container. */
|
|
24
|
-
alignY?: ResponsiveProp<"bottom" | "top" | "
|
|
24
|
+
alignY?: ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined;
|
|
25
25
|
/** Allows setting of data attributes on the underlying element. */
|
|
26
26
|
data?: DataAttributeMap | undefined;
|
|
27
27
|
/** Place a divider between each element. */
|
|
@@ -11,16 +11,16 @@ declare const alignYLookup: {
|
|
|
11
11
|
};
|
|
12
12
|
export declare type Align = keyof typeof alignLookup;
|
|
13
13
|
export declare type AlignY = keyof typeof alignYLookup;
|
|
14
|
-
export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"left" | "right" | "center"> | undefined) => "center" | "
|
|
15
|
-
mobile: "center" | "
|
|
16
|
-
tablet: "center" | "
|
|
17
|
-
desktop: "center" | "
|
|
18
|
-
wide: "center" | "
|
|
14
|
+
export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"left" | "right" | "center"> | undefined) => "center" | "start" | "end" | {
|
|
15
|
+
mobile: "center" | "start" | "end" | undefined;
|
|
16
|
+
tablet: "center" | "start" | "end" | undefined;
|
|
17
|
+
desktop: "center" | "start" | "end" | undefined;
|
|
18
|
+
wide: "center" | "start" | "end" | undefined;
|
|
19
19
|
} | undefined;
|
|
20
|
-
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "
|
|
21
|
-
mobile: "
|
|
22
|
-
tablet: "
|
|
23
|
-
desktop: "
|
|
24
|
-
wide: "
|
|
20
|
+
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
|
|
21
|
+
mobile: "center" | "stretch" | "start" | "end" | undefined;
|
|
22
|
+
tablet: "center" | "stretch" | "start" | "end" | undefined;
|
|
23
|
+
desktop: "center" | "stretch" | "start" | "end" | undefined;
|
|
24
|
+
wide: "center" | "stretch" | "start" | "end" | undefined;
|
|
25
25
|
} | undefined;
|
|
26
26
|
export {};
|
|
@@ -34,17 +34,17 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
34
34
|
children = _ref.children,
|
|
35
35
|
data = _ref.data,
|
|
36
36
|
dividers = _ref.dividers,
|
|
37
|
-
|
|
37
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
38
|
|
|
39
39
|
var justifyContent = alignToJustifyContent(align);
|
|
40
40
|
var alignItems = alignYToAlignItems(alignY);
|
|
41
41
|
|
|
42
|
-
var rootProps = _objectSpread({
|
|
42
|
+
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
43
43
|
ref: forwardedRef,
|
|
44
44
|
display: 'flex',
|
|
45
45
|
alignItems: alignItems,
|
|
46
46
|
justifyContent: justifyContent
|
|
47
|
-
}
|
|
47
|
+
}); // bail early w/o dividers to avoid unnecessary map
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
if (!dividers) {
|
|
@@ -34,17 +34,17 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
34
34
|
children = _ref.children,
|
|
35
35
|
data = _ref.data,
|
|
36
36
|
dividers = _ref.dividers,
|
|
37
|
-
|
|
37
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
38
|
|
|
39
39
|
var justifyContent = alignToJustifyContent(align);
|
|
40
40
|
var alignItems = alignYToAlignItems(alignY);
|
|
41
41
|
|
|
42
|
-
var rootProps = _objectSpread({
|
|
42
|
+
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
43
43
|
ref: forwardedRef,
|
|
44
44
|
display: 'flex',
|
|
45
45
|
alignItems: alignItems,
|
|
46
46
|
justifyContent: justifyContent
|
|
47
|
-
}
|
|
47
|
+
}); // bail early w/o dividers to avoid unnecessary map
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
if (!dividers) {
|
|
@@ -30,17 +30,17 @@ var Row = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
30
30
|
children = _ref.children,
|
|
31
31
|
data = _ref.data,
|
|
32
32
|
dividers = _ref.dividers,
|
|
33
|
-
|
|
33
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
34
34
|
|
|
35
35
|
var justifyContent = alignToJustifyContent(align);
|
|
36
36
|
var alignItems = alignYToAlignItems(alignY);
|
|
37
37
|
|
|
38
|
-
var rootProps = _objectSpread({
|
|
38
|
+
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
39
39
|
ref: forwardedRef,
|
|
40
40
|
display: 'flex',
|
|
41
41
|
alignItems: alignItems,
|
|
42
42
|
justifyContent: justifyContent
|
|
43
|
-
}
|
|
43
|
+
}); // bail early w/o dividers to avoid unnecessary map
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
if (!dividers) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/row",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/spark-web-row.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-row.esm.js",
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@babel/runtime": "^7.
|
|
12
|
-
"@emotion/css": "^11.
|
|
13
|
-
"@spark-web/box": "^1.0.
|
|
14
|
-
"@spark-web/divider": "^1.0.
|
|
15
|
-
"@spark-web/theme": "^3.0.
|
|
16
|
-
"@spark-web/utils": "^1.1.
|
|
11
|
+
"@babel/runtime": "^7.18.3",
|
|
12
|
+
"@emotion/css": "^11.9.0",
|
|
13
|
+
"@spark-web/box": "^1.0.6",
|
|
14
|
+
"@spark-web/divider": "^1.0.6",
|
|
15
|
+
"@spark-web/theme": "^3.0.2",
|
|
16
|
+
"@spark-web/utils": "^1.1.5"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@types/react": "^17.0.12",
|