@spark-web/row 1.2.0 → 2.0.0-rc.0
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 +14 -0
- package/dist/spark-web-row.cjs.d.ts +2 -1
- package/dist/spark-web-row.cjs.js +15 -6
- package/package.json +7 -7
- package/dist/declarations/src/alignment.d.ts +0 -26
- package/dist/declarations/src/index.d.ts +0 -2
- package/dist/declarations/src/row.d.ts +0 -30
- package/dist/spark-web-row.cjs.dev.js +0 -72
- package/dist/spark-web-row.cjs.prod.js +0 -72
- package/dist/spark-web-row.esm.js +0 -68
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @spark-web/row
|
|
2
2
|
|
|
3
|
+
## 2.0.0-rc.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- rc versio
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies []:
|
|
12
|
+
- @spark-web/divider@2.0.0-rc.0
|
|
13
|
+
- @spark-web/theme@4.0.0-rc.0
|
|
14
|
+
- @spark-web/box@2.0.0-rc.0
|
|
15
|
+
- @spark-web/utils@2.0.0-rc.0
|
|
16
|
+
|
|
3
17
|
## 1.2.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "
|
|
1
|
+
export * from "../src/index";
|
|
2
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXJvdy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
// this file might look strange and you might be wondering what it's for
|
|
3
|
+
// it's lets you import your source files by importing this entrypoint
|
|
4
|
+
// as you would import it if it was built with preconstruct build
|
|
5
|
+
// this file is slightly different to some others though
|
|
6
|
+
// it has a require hook which compiles your code with Babel
|
|
7
|
+
// this means that you don't have to set up @babel/register or anything like that
|
|
8
|
+
// but you can still require this module and it'll be compiled
|
|
2
9
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
// this bit of code imports the require hook and registers it
|
|
11
|
+
let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
|
|
12
|
+
|
|
13
|
+
// this re-exports the source file
|
|
14
|
+
module.exports = require("../src/index.ts");
|
|
15
|
+
|
|
16
|
+
unregister();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/row",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-rc.0",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
"README.md"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@babel/runtime": "^7.
|
|
19
|
-
"@emotion/
|
|
20
|
-
"@spark-web/box": "^
|
|
21
|
-
"@spark-web/divider": "^
|
|
22
|
-
"@spark-web/theme": "^
|
|
23
|
-
"@spark-web/utils": "^
|
|
18
|
+
"@babel/runtime": "^7.25.0",
|
|
19
|
+
"@emotion/react": "^11.13.5",
|
|
20
|
+
"@spark-web/box": "^2.0.0-rc.0",
|
|
21
|
+
"@spark-web/divider": "^2.0.0-rc.0",
|
|
22
|
+
"@spark-web/theme": "^4.0.0-rc.0",
|
|
23
|
+
"@spark-web/utils": "^2.0.0-rc.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.2.0",
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
declare const alignLookup: {
|
|
2
|
-
readonly left: "start";
|
|
3
|
-
readonly center: "center";
|
|
4
|
-
readonly right: "end";
|
|
5
|
-
};
|
|
6
|
-
declare const alignYLookup: {
|
|
7
|
-
readonly top: "start";
|
|
8
|
-
readonly center: "center";
|
|
9
|
-
readonly bottom: "end";
|
|
10
|
-
readonly stretch: "stretch";
|
|
11
|
-
};
|
|
12
|
-
export declare type Align = keyof typeof alignLookup;
|
|
13
|
-
export declare type AlignY = keyof typeof alignYLookup;
|
|
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
|
-
} | undefined;
|
|
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
|
-
} | undefined;
|
|
26
|
-
export {};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { BoxProps } from '@spark-web/box';
|
|
2
|
-
import type { ResponsiveProp } from '@spark-web/theme';
|
|
3
|
-
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
4
|
-
import type { ReactElement } from 'react';
|
|
5
|
-
import type { Align, AlignY } from './alignment';
|
|
6
|
-
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
|
|
7
|
-
export declare type RowProps = {
|
|
8
|
-
/** Horizontally align items within the container. */
|
|
9
|
-
align?: ResponsiveProp<Align>;
|
|
10
|
-
/** Vertically align items within the container. */
|
|
11
|
-
alignY?: ResponsiveProp<AlignY>;
|
|
12
|
-
/** Sets data attributes for the element. */
|
|
13
|
-
data?: DataAttributeMap;
|
|
14
|
-
/** Place a divider between each element. */
|
|
15
|
-
dividers?: boolean;
|
|
16
|
-
} & ValidBoxProps;
|
|
17
|
-
export declare const Row: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
18
|
-
as?: Comp | undefined;
|
|
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
|
-
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
21
|
-
/** Horizontally align items within the container. */
|
|
22
|
-
align?: ResponsiveProp<"left" | "right" | "center"> | undefined;
|
|
23
|
-
/** Vertically align items within the container. */
|
|
24
|
-
alignY?: ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined;
|
|
25
|
-
/** Sets data attributes for the element. */
|
|
26
|
-
data?: DataAttributeMap | undefined;
|
|
27
|
-
/** Place a divider between each element. */
|
|
28
|
-
dividers?: boolean | undefined;
|
|
29
|
-
} & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
30
|
-
export {};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
-
var box = require('@spark-web/box');
|
|
8
|
-
var divider = require('@spark-web/divider');
|
|
9
|
-
var ts = require('@spark-web/utils/ts');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
var theme = require('@spark-web/theme');
|
|
12
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
-
|
|
14
|
-
var alignLookup = {
|
|
15
|
-
left: 'start',
|
|
16
|
-
center: 'center',
|
|
17
|
-
right: 'end'
|
|
18
|
-
};
|
|
19
|
-
var alignYLookup = {
|
|
20
|
-
top: 'start',
|
|
21
|
-
center: 'center',
|
|
22
|
-
bottom: 'end',
|
|
23
|
-
stretch: 'stretch'
|
|
24
|
-
};
|
|
25
|
-
var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
|
|
26
|
-
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
27
|
-
|
|
28
|
-
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
29
|
-
var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
30
|
-
var _ref$align = _ref.align,
|
|
31
|
-
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
32
|
-
_ref$alignY = _ref.alignY,
|
|
33
|
-
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
34
|
-
children = _ref.children,
|
|
35
|
-
data = _ref.data,
|
|
36
|
-
dividers = _ref.dividers,
|
|
37
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
var justifyContent = alignToJustifyContent(align);
|
|
39
|
-
var alignItems = alignYToAlignItems(alignY);
|
|
40
|
-
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
41
|
-
ref: forwardedRef,
|
|
42
|
-
display: 'flex',
|
|
43
|
-
alignItems: alignItems,
|
|
44
|
-
justifyContent: justifyContent
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
// bail early w/o dividers to avoid unnecessary map
|
|
48
|
-
if (!dividers) {
|
|
49
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
50
|
-
data: data
|
|
51
|
-
}, rootProps), {}, {
|
|
52
|
-
children: children
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// map over children to insert dividers
|
|
57
|
-
// remove falsy values before mapping, keeps the index in sync
|
|
58
|
-
var childArray = react.Children.toArray(children);
|
|
59
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
60
|
-
data: data
|
|
61
|
-
}, rootProps), {}, {
|
|
62
|
-
children: childArray.map(function (child, idx) {
|
|
63
|
-
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
64
|
-
children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
|
|
65
|
-
vertical: true
|
|
66
|
-
}) : null, child]
|
|
67
|
-
}, child.key || idx);
|
|
68
|
-
})
|
|
69
|
-
}));
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
exports.Row = Row;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
-
var box = require('@spark-web/box');
|
|
8
|
-
var divider = require('@spark-web/divider');
|
|
9
|
-
var ts = require('@spark-web/utils/ts');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
var theme = require('@spark-web/theme');
|
|
12
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
-
|
|
14
|
-
var alignLookup = {
|
|
15
|
-
left: 'start',
|
|
16
|
-
center: 'center',
|
|
17
|
-
right: 'end'
|
|
18
|
-
};
|
|
19
|
-
var alignYLookup = {
|
|
20
|
-
top: 'start',
|
|
21
|
-
center: 'center',
|
|
22
|
-
bottom: 'end',
|
|
23
|
-
stretch: 'stretch'
|
|
24
|
-
};
|
|
25
|
-
var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
|
|
26
|
-
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
27
|
-
|
|
28
|
-
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
29
|
-
var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
30
|
-
var _ref$align = _ref.align,
|
|
31
|
-
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
32
|
-
_ref$alignY = _ref.alignY,
|
|
33
|
-
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
34
|
-
children = _ref.children,
|
|
35
|
-
data = _ref.data,
|
|
36
|
-
dividers = _ref.dividers,
|
|
37
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
var justifyContent = alignToJustifyContent(align);
|
|
39
|
-
var alignItems = alignYToAlignItems(alignY);
|
|
40
|
-
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
41
|
-
ref: forwardedRef,
|
|
42
|
-
display: 'flex',
|
|
43
|
-
alignItems: alignItems,
|
|
44
|
-
justifyContent: justifyContent
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
// bail early w/o dividers to avoid unnecessary map
|
|
48
|
-
if (!dividers) {
|
|
49
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
50
|
-
data: data
|
|
51
|
-
}, rootProps), {}, {
|
|
52
|
-
children: children
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// map over children to insert dividers
|
|
57
|
-
// remove falsy values before mapping, keeps the index in sync
|
|
58
|
-
var childArray = react.Children.toArray(children);
|
|
59
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
60
|
-
data: data
|
|
61
|
-
}, rootProps), {}, {
|
|
62
|
-
children: childArray.map(function (child, idx) {
|
|
63
|
-
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
64
|
-
children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
|
|
65
|
-
vertical: true
|
|
66
|
-
}) : null, child]
|
|
67
|
-
}, child.key || idx);
|
|
68
|
-
})
|
|
69
|
-
}));
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
exports.Row = Row;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
-
import { Box } from '@spark-web/box';
|
|
4
|
-
import { Divider } from '@spark-web/divider';
|
|
5
|
-
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
6
|
-
import { Children, Fragment } from 'react';
|
|
7
|
-
import { createResponsiveMapFn } from '@spark-web/theme';
|
|
8
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
|
-
|
|
10
|
-
var alignLookup = {
|
|
11
|
-
left: 'start',
|
|
12
|
-
center: 'center',
|
|
13
|
-
right: 'end'
|
|
14
|
-
};
|
|
15
|
-
var alignYLookup = {
|
|
16
|
-
top: 'start',
|
|
17
|
-
center: 'center',
|
|
18
|
-
bottom: 'end',
|
|
19
|
-
stretch: 'stretch'
|
|
20
|
-
};
|
|
21
|
-
var alignToJustifyContent = createResponsiveMapFn(alignLookup);
|
|
22
|
-
var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|
|
23
|
-
|
|
24
|
-
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
25
|
-
var Row = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
26
|
-
var _ref$align = _ref.align,
|
|
27
|
-
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
28
|
-
_ref$alignY = _ref.alignY,
|
|
29
|
-
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
30
|
-
children = _ref.children,
|
|
31
|
-
data = _ref.data,
|
|
32
|
-
dividers = _ref.dividers,
|
|
33
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
34
|
-
var justifyContent = alignToJustifyContent(align);
|
|
35
|
-
var alignItems = alignYToAlignItems(alignY);
|
|
36
|
-
var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
37
|
-
ref: forwardedRef,
|
|
38
|
-
display: 'flex',
|
|
39
|
-
alignItems: alignItems,
|
|
40
|
-
justifyContent: justifyContent
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// bail early w/o dividers to avoid unnecessary map
|
|
44
|
-
if (!dividers) {
|
|
45
|
-
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
46
|
-
data: data
|
|
47
|
-
}, rootProps), {}, {
|
|
48
|
-
children: children
|
|
49
|
-
}));
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// map over children to insert dividers
|
|
53
|
-
// remove falsy values before mapping, keeps the index in sync
|
|
54
|
-
var childArray = Children.toArray(children);
|
|
55
|
-
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
56
|
-
data: data
|
|
57
|
-
}, rootProps), {}, {
|
|
58
|
-
children: childArray.map(function (child, idx) {
|
|
59
|
-
return /*#__PURE__*/jsxs(Fragment, {
|
|
60
|
-
children: [dividers && idx ? /*#__PURE__*/jsx(Divider, {
|
|
61
|
-
vertical: true
|
|
62
|
-
}) : null, child]
|
|
63
|
-
}, child.key || idx);
|
|
64
|
-
})
|
|
65
|
-
}));
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
export { Row };
|