@elliemae/ds-grid 3.0.0-next.4 → 3.0.0-next.40
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/cjs/Grid.js +3 -3
- package/dist/cjs/Grid.js.map +2 -2
- package/dist/cjs/GridItem.js +2 -0
- package/dist/cjs/GridItem.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +26 -23
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/utils/constants.js +2 -0
- package/dist/cjs/utils/constants.js.map +2 -2
- package/dist/cjs/utils/styles.js.map +1 -1
- package/dist/esm/Grid.js +1 -1
- package/dist/esm/Grid.js.map +2 -2
- package/dist/esm/GridItem.js +5 -2
- package/dist/esm/GridItem.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/constants.js +2 -0
- package/dist/esm/utils/constants.js.map +2 -2
- package/dist/esm/utils/styles.js.map +1 -1
- package/package.json +4 -4
package/dist/cjs/Grid.js
CHANGED
|
@@ -62,14 +62,14 @@ __export(Grid_exports, {
|
|
|
62
62
|
});
|
|
63
63
|
var React = __toESM(require("react"));
|
|
64
64
|
var import_react = __toESM(require("react"));
|
|
65
|
-
var
|
|
65
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
66
66
|
var import_lodash = require("lodash");
|
|
67
67
|
var import_ds_system = require("@elliemae/ds-system");
|
|
68
68
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
69
69
|
var import_GridItem = require("./GridItem");
|
|
70
70
|
const Grid = import_react.default.forwardRef((props, ref) => {
|
|
71
71
|
const _a = props, { children } = _a, propsWithoutChildren = __objRest(_a, ["children"]);
|
|
72
|
-
const propsWithDefaults = (0,
|
|
72
|
+
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(propsWithoutChildren, import_react_desc_prop_types.defaultProps);
|
|
73
73
|
const _b = propsWithDefaults, { rows, cols, alignItems, className, justify, gutter, wrap, width, height } = _b, rest = __objRest(_b, ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"]);
|
|
74
74
|
let isSpanParent = true;
|
|
75
75
|
const renderChildren = import_react.default.Children.map(children, (child) => {
|
|
@@ -102,7 +102,7 @@ const Grid = import_react.default.forwardRef((props, ref) => {
|
|
|
102
102
|
});
|
|
103
103
|
Grid.displayName = "Grid";
|
|
104
104
|
Grid.propTypes = import_react_desc_prop_types.DSGridPropTypes;
|
|
105
|
-
const DSGridWithSchema = (0,
|
|
105
|
+
const DSGridWithSchema = (0, import_ds_utilities.describe)(Grid);
|
|
106
106
|
DSGridWithSchema.propTypes = import_react_desc_prop_types.DSGridPropTypes;
|
|
107
107
|
var Grid_default = Grid;
|
|
108
108
|
module.exports = __toCommonJS(Grid_exports);
|
package/dist/cjs/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Grid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { DSGridT, DSGridPropTypes, defaultProps } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const { children, ...propsWithoutChildren } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);\n\n const { rows, cols, alignItems, className, justify, gutter, wrap, width, height, ...rest } = propsWithDefaults;\n\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', 0) as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return (\n <GridItem\n alignItems={alignItems}\n className={className}\n cols={cols}\n gutter={gutter}\n isSpanParent={isSpanParent}\n justify={justify}\n rows={rows}\n wrap={wrap}\n childNumber={React.Children.count(children)}\n ref={ref}\n {...rest}\n w={width}\n h={height}\n >\n {renderChildren}\n </GridItem>\n );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAuD;AACvD,oBAAoB;AACpB,uBAA+B;AAC/B,mCAAuD;AACvD,sBAAyB;AAEzB,MAAM,OAAO,qBAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,sDAA6B,sBAAsB,yCAAY;AAEzF,QAA6F,wBAArF,QAAM,MAAM,YAAY,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAoB,IAAT,iBAAS,IAAT,CAA5E,QAAM,QAAM,cAAY,aAAW,WAAS,UAAQ,QAAM,SAAO;AAEzE,MAAI,eAAe;AAEnB,QAAM,iBAAiB,qBAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,uBAAI,OAAO,iBAAiB,MAAM,UAClC,uBAAI,OAAO,kBAAkB,MAAM,UACnC,SAAS,uBAAI,OAAO,cAAc,CAAC,GAAa,EAAE,IAAI,GACtD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAU,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,qBAAM,aAAa,OAA6B,iCACjD,MAA6B,QADoB;AAAA,QAErD,OAAO,qCAAe,EAAE;AAAA,QACxB,QAAQ,qCAAe,EAAE;AAAA,MAC3B,EAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,qBAAM,SAAS,MAAM,QAAQ;AAAA,IAC1C;AAAA,KACI,OAXL;AAAA,IAYC,GAAG;AAAA,IACH,GAAG;AAAA,MAEF,cACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/GridItem.js
CHANGED
|
@@ -48,6 +48,8 @@ const GridItem = import_styled_components.default.div`
|
|
|
48
48
|
${import_styles.manageCols}
|
|
49
49
|
${import_styles.manageRows}
|
|
50
50
|
${import_styles.manageSpan}
|
|
51
|
+
${import_styled_components2.boxShadow}
|
|
52
|
+
${import_ds_system.backgroundColorSetter}
|
|
51
53
|
`;
|
|
52
54
|
module.exports = __toCommonJS(GridItem_exports);
|
|
53
55
|
//# sourceMappingURL=GridItem.js.map
|
package/dist/cjs/GridItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/GridItem.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n space,\n width,\n height,\n flexboxes,\n grids,\n sizing,\n LayoutProps,\n SpaceProps,\n SizingProps,\n} from '@xstyled/styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n column-gap: ${({ gutter }) => mapGap(gutter)};\n row-gap: ${({ gutter }) => mapGap(gutter)};\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${height}\n ${width}\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,+BAAmB;AACnB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n space,\n width,\n height,\n flexboxes,\n grids,\n sizing,\n LayoutProps,\n SpaceProps,\n SizingProps,\n boxShadow,\n} from '@xstyled/styled-components';\nimport { mapGap, backgroundColorSetter } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n column-gap: ${({ gutter }) => mapGap(gutter)};\n row-gap: ${({ gutter }) => mapGap(gutter)};\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${height}\n ${width}\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n ${boxShadow}\n ${backgroundColorSetter}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,+BAAmB;AACnB,gCAWO;AACP,uBAA8C;AAC9C,oBAAmD;AAG5C,MAAM,WAAW,iCAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,aAAa,6BAAO,MAAM;AAAA,aAChC,CAAC,EAAE,aAAa,6BAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,7 +48,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
48
48
|
defaultProps: () => defaultProps
|
|
49
49
|
});
|
|
50
50
|
var React = __toESM(require("react"));
|
|
51
|
-
var
|
|
51
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
52
52
|
var import_constants = require("./utils/constants");
|
|
53
53
|
const defaultProps = {
|
|
54
54
|
rows: [],
|
|
@@ -59,34 +59,37 @@ const defaultProps = {
|
|
|
59
59
|
wrap: "wrap",
|
|
60
60
|
span: 1
|
|
61
61
|
};
|
|
62
|
-
const rowColBreakpoints =
|
|
63
|
-
small:
|
|
64
|
-
medium:
|
|
65
|
-
large:
|
|
62
|
+
const rowColBreakpoints = import_ds_utilities.PropTypes.shape({
|
|
63
|
+
small: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])),
|
|
64
|
+
medium: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])),
|
|
65
|
+
large: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string]))
|
|
66
66
|
});
|
|
67
|
-
const spanBreakpoints =
|
|
68
|
-
small:
|
|
69
|
-
medium:
|
|
70
|
-
large:
|
|
67
|
+
const spanBreakpoints = import_ds_utilities.PropTypes.shape({
|
|
68
|
+
small: import_ds_utilities.PropTypes.number,
|
|
69
|
+
medium: import_ds_utilities.PropTypes.number,
|
|
70
|
+
large: import_ds_utilities.PropTypes.number
|
|
71
71
|
});
|
|
72
|
-
const DSGridPropTypes = __spreadProps(__spreadValues(__spreadValues({},
|
|
73
|
-
rows:
|
|
74
|
-
|
|
72
|
+
const DSGridPropTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
|
|
73
|
+
rows: import_ds_utilities.PropTypes.oneOfType([
|
|
74
|
+
import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])),
|
|
75
75
|
rowColBreakpoints
|
|
76
76
|
]).description("Row layout cells").defaultValue([]),
|
|
77
|
-
cols:
|
|
78
|
-
|
|
77
|
+
cols: import_ds_utilities.PropTypes.oneOfType([
|
|
78
|
+
import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])),
|
|
79
79
|
rowColBreakpoints
|
|
80
80
|
]).description("Column layout cells").defaultValue([]),
|
|
81
|
-
span:
|
|
82
|
-
alignItems:
|
|
83
|
-
children:
|
|
84
|
-
className:
|
|
85
|
-
justifyContent:
|
|
86
|
-
gutter:
|
|
87
|
-
wrap:
|
|
88
|
-
height:
|
|
89
|
-
width:
|
|
81
|
+
span: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, spanBreakpoints]).description("Expands the grid element within columns."),
|
|
82
|
+
alignItems: import_ds_utilities.PropTypes.oneOf(import_constants.alignItemsPlacement).description("flex-like align items prop"),
|
|
83
|
+
children: import_ds_utilities.PropTypes.node.description("Children node inside grid cell"),
|
|
84
|
+
className: import_ds_utilities.PropTypes.string.description("CSS class").defaultValue(""),
|
|
85
|
+
justifyContent: import_ds_utilities.PropTypes.oneOf(import_constants.justifyPlacement).description("flex-like justify prop").defaultValue(import_constants.justifyPlacement[0]),
|
|
86
|
+
gutter: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string]).description("Space between cells prop").defaultValue(0),
|
|
87
|
+
wrap: import_ds_utilities.PropTypes.oneOf(import_constants.wrap).description("Wrap type").defaultValue(import_constants.wrap[0]),
|
|
88
|
+
height: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string]).description("Grid height."),
|
|
89
|
+
width: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string]).description("Grid width."),
|
|
90
|
+
backgroundColor: import_ds_utilities.PropTypes.string.description("Sets background color."),
|
|
91
|
+
bg: import_ds_utilities.PropTypes.string.description("Sets background color."),
|
|
92
|
+
boxShadow: import_ds_utilities.PropTypes.oneOf(import_constants.boxShadow).description("Sets background color.")
|
|
90
93
|
});
|
|
91
94
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
92
95
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-utilities';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number[];\n medium?: string | number[];\n large?: string | number[];\n }\n\n type Shadow = 'xs' | 's' | 'm' | 'l' | 'xs';\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n interface IProps {\n height?: string;\n width?: string;\n rows?: string[] | string | number[] | RowColBreakpoints;\n cols?: string[] | string | number[] | RowColBreakpoints;\n justifyContent?: typeof justifyPlacement[number];\n alignItems?: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className?: string;\n justify?: typeof justifyPlacement[number];\n gutter?: string | number;\n wrap?: typeof wrap[number];\n span?: number;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems: typeof alignItemsPlacement[number];\n children: React.ReactNode;\n className: string;\n justify: typeof justifyPlacement[number];\n gutter: string | number;\n wrap: typeof wrap[number];\n childNumber: number;\n isSpanParent: boolean;\n span?: number | SpanBreakpoints;\n ref: React.ForwardedRef<HTMLDivElement>;\n boxShadow?: Shadow;\n backgroundColor?: string;\n bg?: string;\n }\n}\n\nexport const defaultProps = {\n rows: [],\n cols: [],\n className: '',\n justify: 'flex-start',\n gutter: 0,\n wrap: 'wrap',\n span: 1,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n small: PropTypes.number,\n medium: PropTypes.number,\n large: PropTypes.number,\n});\n\nexport const DSGridPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n rows: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Row layout cells')\n .defaultValue([]),\n cols: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Column layout cells')\n .defaultValue([]),\n span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description(\n 'Expands the grid element within columns.',\n ),\n alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),\n children: PropTypes.node.description('Children node inside grid cell'),\n className: PropTypes.string.description('CSS class').defaultValue(''),\n justifyContent: PropTypes.oneOf(justifyPlacement)\n .description('flex-like justify prop')\n .defaultValue(justifyPlacement[0]),\n gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Space between cells prop')\n .defaultValue(0),\n wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),\n backgroundColor: PropTypes.string.description('Sets background color.'),\n bg: PropTypes.string.description('Sets background color.'),\n boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAMO;AACP,uBAAuE;AAqDhE,MAAM,eAAe;AAAA,EAC1B,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAKA,MAAM,oBAAoB,8BAAU,MAAM;AAAA,EACxC,OAAO,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,EAClF,QAAQ,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,EACnF,OAAO,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AACpF,CAAC;AAED,MAAM,kBAAkB,8BAAU,MAAM;AAAA,EACtC,OAAO,8BAAU;AAAA,EACjB,QAAQ,8BAAU;AAAA,EAClB,OAAO,8BAAU;AACnB,CAAC;AAEM,MAAM,kBAAkB,gDAC1B,gDACA,uCAF0B;AAAA,EAG7B,MAAM,8BAAU,UAAU;AAAA,IACxB,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,IAC3E;AAAA,EACF,CAAC,EACE,YAAY,kBAAkB,EAC9B,aAAa,CAAC,CAAC;AAAA,EAClB,MAAM,8BAAU,UAAU;AAAA,IACxB,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,IAC3E;AAAA,EACF,CAAC,EACE,YAAY,qBAAqB,EACjC,aAAa,CAAC,CAAC;AAAA,EAClB,MAAM,8BAAU,UAAU,CAAC,8BAAU,QAAQ,eAAe,CAAC,EAAE,YAC7D,0CACF;AAAA,EACA,YAAY,8BAAU,MAAM,oCAAmB,EAAE,YAAY,4BAA4B;AAAA,EACzF,UAAU,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,WAAW,8BAAU,OAAO,YAAY,WAAW,EAAE,aAAa,EAAE;AAAA,EACpE,gBAAgB,8BAAU,MAAM,iCAAgB,EAC7C,YAAY,wBAAwB,EACpC,aAAa,kCAAiB,EAAE;AAAA,EACnC,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAC7D,YAAY,0BAA0B,EACtC,aAAa,CAAC;AAAA,EACjB,MAAM,8BAAU,MAAM,qBAAI,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAK,EAAE;AAAA,EACzE,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,cAAc;AAAA,EAC5F,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,aAAa;AAAA,EAC1F,iBAAiB,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EACtE,IAAI,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EACzD,WAAW,8BAAU,MAAM,0BAAS,EAAE,YAAY,wBAAwB;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
28
28
|
var constants_exports = {};
|
|
29
29
|
__export(constants_exports, {
|
|
30
30
|
alignItemsPlacement: () => alignItemsPlacement,
|
|
31
|
+
boxShadow: () => boxShadow,
|
|
31
32
|
justifyPlacement: () => justifyPlacement,
|
|
32
33
|
wrap: () => wrap
|
|
33
34
|
});
|
|
@@ -35,5 +36,6 @@ var React = __toESM(require("react"));
|
|
|
35
36
|
const justifyPlacement = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
|
|
36
37
|
const alignItemsPlacement = ["flex-start", "center", "flex-end", "stretch", "baseline"];
|
|
37
38
|
const wrap = ["wrap", "nowrap", "wrap-reverse"];
|
|
39
|
+
const boxShadow = ["xs", "s", "m", "l", "xl"];
|
|
38
40
|
module.exports = __toCommonJS(constants_exports);
|
|
39
41
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB;
|
|
4
|
+
"sourcesContent": ["export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n\nexport const boxShadow = ['xs', 's', 'm', 'l', 'xl'];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB,cAAc;AAE7G,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU;AAEtF,MAAM,OAAO,CAAC,QAAQ,UAAU,cAAc;AAE9C,MAAM,YAAY,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n ${({ isSpanParent, span, theme }) => {\n if (!isSpanParent) return '';\n\n if (typeof span === 'number') {\n return `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};`;\n }\n\n if (typeof span !== 'object') return ``;\n\n // Span object\n\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n // Type castings\n const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n const spanValue = span[theKey];\n\n if (!!spanValue && theme.breakpoints[theKey]) {\n if (theKey === 'small') {\n data += `\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n `;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n }`;\n }\n }\n });\n return data;\n }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n ${({ cols, theme, isSpanParent }) => {\n if (typeof cols === 'object' && !Array.isArray(cols)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof cols;\n const colValue = cols[theKey];\n if (!!colValue && Array.isArray(colValue)) {\n const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (theKey === 'small') {\n data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!colValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(cols)) {\n const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n }\n if (isSpanParent) {\n return `\n -ms-grid-columns: repeat(${cols}, 1fr);\n grid-template-columns: repeat(${cols}, 1fr);`;\n }\n return '';\n }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n ${({ rows, theme, isSpanParent }) => {\n if (typeof rows === 'object' && !Array.isArray(rows)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n const rowValue = rows[theKey];\n if (rowValue && Array.isArray(rowValue)) {\n const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (key === 'small') {\n data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!rowValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(rows)) {\n const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n `;\n }\n if (isSpanParent) {\n return `\n -ms-grid-rows: repeat(${rows}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);`;\n }\n return '';\n }}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;AAG9B,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,YAAY;AACnC,MAAI,CAAC;AAAc,WAAO;AAE1B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,uCAC0B;AAAA,mCACJ;AAAA
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Grid.js
CHANGED
|
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import React2 from "react";
|
|
34
|
-
import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-
|
|
34
|
+
import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
|
|
35
35
|
import { get } from "lodash";
|
|
36
36
|
import { fixSpaceGutter } from "@elliemae/ds-system";
|
|
37
37
|
import { DSGridPropTypes, defaultProps } from "./react-desc-prop-types";
|
package/dist/esm/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Grid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,6BAA6B,sBAAsB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { DSGridT, DSGridPropTypes, defaultProps } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const { children, ...propsWithoutChildren } = props;\n const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);\n\n const { rows, cols, alignItems, className, justify, gutter, wrap, width, height, ...rest } = propsWithDefaults;\n\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', 0) as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return (\n <GridItem\n alignItems={alignItems}\n className={className}\n cols={cols}\n gutter={gutter}\n isSpanParent={isSpanParent}\n justify={justify}\n rows={rows}\n wrap={wrap}\n childNumber={React.Children.count(children)}\n ref={ref}\n {...rest}\n w={width}\n h={height}\n >\n {renderChildren}\n </GridItem>\n );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,6BAA6B,sBAAsB,YAAY;AAEzF,QAA6F,wBAArF,QAAM,MAAM,YAAY,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAoB,IAAT,iBAAS,IAAT,CAA5E,QAAM,QAAM,cAAY,aAAW,WAAS,UAAQ,QAAM,SAAO;AAEzE,MAAI,eAAe;AAEnB,QAAM,iBAAiB,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,iBAAiB,MAAM,UAClC,IAAI,OAAO,kBAAkB,MAAM,UACnC,SAAS,IAAI,OAAO,cAAc,CAAC,GAAa,EAAE,IAAI,GACtD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAU,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,OAAM,aAAa,OAA6B,iCACjD,MAA6B,QADoB;AAAA,QAErD,OAAO,eAAe,EAAE;AAAA,QACxB,QAAQ,eAAe,EAAE;AAAA,MAC3B,EAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,OAAM,SAAS,MAAM,QAAQ;AAAA,IAC1C;AAAA,KACI,OAXL;AAAA,IAYC,GAAG;AAAA,IACH,GAAG;AAAA,MAEF,cACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/GridItem.js
CHANGED
|
@@ -6,9 +6,10 @@ import {
|
|
|
6
6
|
height,
|
|
7
7
|
flexboxes,
|
|
8
8
|
grids,
|
|
9
|
-
sizing
|
|
9
|
+
sizing,
|
|
10
|
+
boxShadow
|
|
10
11
|
} from "@xstyled/styled-components";
|
|
11
|
-
import { mapGap } from "@elliemae/ds-system";
|
|
12
|
+
import { mapGap, backgroundColorSetter } from "@elliemae/ds-system";
|
|
12
13
|
import { manageCols, manageRows, manageSpan } from "./utils/styles";
|
|
13
14
|
const GridItem = styled.div`
|
|
14
15
|
display: grid;
|
|
@@ -24,6 +25,8 @@ const GridItem = styled.div`
|
|
|
24
25
|
${manageCols}
|
|
25
26
|
${manageRows}
|
|
26
27
|
${manageSpan}
|
|
28
|
+
${boxShadow}
|
|
29
|
+
${backgroundColorSetter}
|
|
27
30
|
`;
|
|
28
31
|
export {
|
|
29
32
|
GridItem
|
package/dist/esm/GridItem.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GridItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n space,\n width,\n height,\n flexboxes,\n grids,\n sizing,\n LayoutProps,\n SpaceProps,\n SizingProps,\n} from '@xstyled/styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n column-gap: ${({ gutter }) => mapGap(gutter)};\n row-gap: ${({ gutter }) => mapGap(gutter)};\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${height}\n ${width}\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n space,\n width,\n height,\n flexboxes,\n grids,\n sizing,\n LayoutProps,\n SpaceProps,\n SizingProps,\n boxShadow,\n} from '@xstyled/styled-components';\nimport { mapGap, backgroundColorSetter } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n column-gap: ${({ gutter }) => mapGap(gutter)};\n row-gap: ${({ gutter }) => mapGap(gutter)};\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${height}\n ${width}\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n ${boxShadow}\n ${backgroundColorSetter}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AACA;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,aAAa,OAAO,MAAM;AAAA,aAChC,CAAC,EAAE,aAAa,OAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,8 +22,8 @@ import {
|
|
|
22
22
|
PropTypes,
|
|
23
23
|
globalAttributesPropTypes,
|
|
24
24
|
xstyledPropTypes
|
|
25
|
-
} from "@elliemae/ds-
|
|
26
|
-
import { alignItemsPlacement, justifyPlacement, wrap } from "./utils/constants";
|
|
25
|
+
} from "@elliemae/ds-utilities";
|
|
26
|
+
import { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from "./utils/constants";
|
|
27
27
|
const defaultProps = {
|
|
28
28
|
rows: [],
|
|
29
29
|
cols: [],
|
|
@@ -60,7 +60,10 @@ const DSGridPropTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAt
|
|
|
60
60
|
gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Space between cells prop").defaultValue(0),
|
|
61
61
|
wrap: PropTypes.oneOf(wrap).description("Wrap type").defaultValue(wrap[0]),
|
|
62
62
|
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid height."),
|
|
63
|
-
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid width.")
|
|
63
|
+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid width."),
|
|
64
|
+
backgroundColor: PropTypes.string.description("Sets background color."),
|
|
65
|
+
bg: PropTypes.string.description("Sets background color."),
|
|
66
|
+
boxShadow: PropTypes.oneOf(boxShadow).description("Sets background color.")
|
|
64
67
|
});
|
|
65
68
|
export {
|
|
66
69
|
DSGridPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAOA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n GlobalAttributesT,\n XstyledProps,\n} from '@elliemae/ds-utilities';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number[];\n medium?: string | number[];\n large?: string | number[];\n }\n\n type Shadow = 'xs' | 's' | 'm' | 'l' | 'xs';\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n interface IProps {\n height?: string;\n width?: string;\n rows?: string[] | string | number[] | RowColBreakpoints;\n cols?: string[] | string | number[] | RowColBreakpoints;\n justifyContent?: typeof justifyPlacement[number];\n alignItems?: typeof alignItemsPlacement[number];\n children?: React.ReactNode;\n className?: string;\n justify?: typeof justifyPlacement[number];\n gutter?: string | number;\n wrap?: typeof wrap[number];\n span?: number;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems: typeof alignItemsPlacement[number];\n children: React.ReactNode;\n className: string;\n justify: typeof justifyPlacement[number];\n gutter: string | number;\n wrap: typeof wrap[number];\n childNumber: number;\n isSpanParent: boolean;\n span?: number | SpanBreakpoints;\n ref: React.ForwardedRef<HTMLDivElement>;\n boxShadow?: Shadow;\n backgroundColor?: string;\n bg?: string;\n }\n}\n\nexport const defaultProps = {\n rows: [],\n cols: [],\n className: '',\n justify: 'flex-start',\n gutter: 0,\n wrap: 'wrap',\n span: 1,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n small: PropTypes.number,\n medium: PropTypes.number,\n large: PropTypes.number,\n});\n\nexport const DSGridPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n rows: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Row layout cells')\n .defaultValue([]),\n cols: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n rowColBreakpoints,\n ])\n .description('Column layout cells')\n .defaultValue([]),\n span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description(\n 'Expands the grid element within columns.',\n ),\n alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),\n children: PropTypes.node.description('Children node inside grid cell'),\n className: PropTypes.string.description('CSS class').defaultValue(''),\n justifyContent: PropTypes.oneOf(justifyPlacement)\n .description('flex-like justify prop')\n .defaultValue(justifyPlacement[0]),\n gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Space between cells prop')\n .defaultValue(0),\n wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),\n backgroundColor: PropTypes.string.description('Sets background color.'),\n bg: PropTypes.string.description('Sets background color.'),\n boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAOA;AAqDO,MAAM,eAAe;AAAA,EAC1B,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAKA,MAAM,oBAAoB,UAAU,MAAM;AAAA,EACxC,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,EAClF,QAAQ,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,EACnF,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AACpF,CAAC;AAED,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC,OAAO,UAAU;AAAA,EACjB,QAAQ,UAAU;AAAA,EAClB,OAAO,UAAU;AACnB,CAAC;AAEM,MAAM,kBAAkB,gDAC1B,4BACA,mBAF0B;AAAA,EAG7B,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E;AAAA,EACF,CAAC,EACE,YAAY,kBAAkB,EAC9B,aAAa,CAAC,CAAC;AAAA,EAClB,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E;AAAA,EACF,CAAC,EACE,YAAY,qBAAqB,EACjC,aAAa,CAAC,CAAC;AAAA,EAClB,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,eAAe,CAAC,EAAE,YAC7D,0CACF;AAAA,EACA,YAAY,UAAU,MAAM,mBAAmB,EAAE,YAAY,4BAA4B;AAAA,EACzF,UAAU,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,WAAW,UAAU,OAAO,YAAY,WAAW,EAAE,aAAa,EAAE;AAAA,EACpE,gBAAgB,UAAU,MAAM,gBAAgB,EAC7C,YAAY,wBAAwB,EACpC,aAAa,iBAAiB,EAAE;AAAA,EACnC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC7D,YAAY,0BAA0B,EACtC,aAAa,CAAC;AAAA,EACjB,MAAM,UAAU,MAAM,IAAI,EAAE,YAAY,WAAW,EAAE,aAAa,KAAK,EAAE;AAAA,EACzE,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,cAAc;AAAA,EAC5F,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,aAAa;AAAA,EAC1F,iBAAiB,UAAU,OAAO,YAAY,wBAAwB;AAAA,EACtE,IAAI,UAAU,OAAO,YAAY,wBAAwB;AAAA,EACzD,WAAW,UAAU,MAAM,SAAS,EAAE,YAAY,wBAAwB;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
const justifyPlacement = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
|
|
3
3
|
const alignItemsPlacement = ["flex-start", "center", "flex-end", "stretch", "baseline"];
|
|
4
4
|
const wrap = ["wrap", "nowrap", "wrap-reverse"];
|
|
5
|
+
const boxShadow = ["xs", "s", "m", "l", "xl"];
|
|
5
6
|
export {
|
|
6
7
|
alignItemsPlacement,
|
|
8
|
+
boxShadow,
|
|
7
9
|
justifyPlacement,
|
|
8
10
|
wrap
|
|
9
11
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n\nexport const boxShadow = ['xs', 's', 'm', 'l', 'xl'];\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB,cAAc;AAE7G,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU;AAEtF,MAAM,OAAO,CAAC,QAAQ,UAAU,cAAc;AAE9C,MAAM,YAAY,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n ${({ isSpanParent, span, theme }) => {\n if (!isSpanParent) return '';\n\n if (typeof span === 'number') {\n return `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};`;\n }\n\n if (typeof span !== 'object') return ``;\n\n // Span object\n\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n // Type castings\n const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n const spanValue = span[theKey];\n\n if (!!spanValue && theme.breakpoints[theKey]) {\n if (theKey === 'small') {\n data += `\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n `;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n }`;\n }\n }\n });\n return data;\n }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n ${({ cols, theme, isSpanParent }) => {\n if (typeof cols === 'object' && !Array.isArray(cols)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof cols;\n const colValue = cols[theKey];\n if (!!colValue && Array.isArray(colValue)) {\n const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (theKey === 'small') {\n data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!colValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(cols)) {\n const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n }\n if (isSpanParent) {\n return `\n -ms-grid-columns: repeat(${cols}, 1fr);\n grid-template-columns: repeat(${cols}, 1fr);`;\n }\n return '';\n }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n ${({ rows, theme, isSpanParent }) => {\n if (typeof rows === 'object' && !Array.isArray(rows)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n const rowValue = rows[theKey];\n if (rowValue && Array.isArray(rowValue)) {\n const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n if (key === 'small') {\n data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!rowValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(rows)) {\n const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n `;\n }\n if (isSpanParent) {\n return `\n -ms-grid-rows: repeat(${rows}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);`;\n }\n return '';\n }}\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AAGO,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,YAAY;AACnC,MAAI,CAAC;AAAc,WAAO;AAE1B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,uCAC0B;AAAA,mCACJ;AAAA
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-grid",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.40",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Grid",
|
|
6
6
|
"files": [
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-
|
|
67
|
-
"@elliemae/ds-
|
|
66
|
+
"@elliemae/ds-system": "3.0.0-next.29",
|
|
67
|
+
"@elliemae/ds-utilities": "3.0.0-next.40",
|
|
68
68
|
"@xstyled/styled-components": "~3.1.2",
|
|
69
69
|
"react-desc": "~4.1.3"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@testing-library/jest-dom": "~5.
|
|
72
|
+
"@testing-library/jest-dom": "~5.16.2",
|
|
73
73
|
"@testing-library/react": "~12.1.2",
|
|
74
74
|
"@testing-library/user-event": "~13.5.0",
|
|
75
75
|
"styled-components": "~5.3.3",
|