@elliemae/ds-grid 3.27.0-next.2 → 3.27.0-next.3
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 -2
- package/dist/cjs/GridItem.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-grid-valid.js +98 -0
- package/dist/cjs/typescript-testing/typescript-grid-valid.js.map +7 -0
- package/dist/esm/Grid.js +3 -3
- package/dist/esm/Grid.js.map +2 -2
- package/dist/esm/GridItem.js +2 -2
- package/dist/esm/GridItem.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-grid-valid.js +75 -0
- package/dist/esm/typescript-testing/typescript-grid-valid.js.map +7 -0
- package/dist/types/GridItem.d.ts +3 -1
- package/dist/types/react-desc-prop-types.d.ts +6 -8
- package/dist/types/typescript-testing/typescript-grid-valid.d.ts +1 -0
- package/package.json +6 -6
package/dist/cjs/Grid.js
CHANGED
|
@@ -64,6 +64,9 @@ const Grid = import_react.default.forwardRef((props, ref) => {
|
|
|
64
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
65
|
import_GridItem.GridItem,
|
|
66
66
|
{
|
|
67
|
+
...rest,
|
|
68
|
+
...globalProps,
|
|
69
|
+
...xstyledProps,
|
|
67
70
|
alignItems,
|
|
68
71
|
cols,
|
|
69
72
|
gutter,
|
|
@@ -73,9 +76,6 @@ const Grid = import_react.default.forwardRef((props, ref) => {
|
|
|
73
76
|
wrap,
|
|
74
77
|
childNumber: import_react.default.Children.count(children),
|
|
75
78
|
innerRef: ref,
|
|
76
|
-
...rest,
|
|
77
|
-
...globalProps,
|
|
78
|
-
...xstyledProps,
|
|
79
79
|
w: width,
|
|
80
80
|
h: height,
|
|
81
81
|
withMaxWidthBreakpoints,
|
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 } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const {\n propsWithDefaults: {\n withMaxWidthBreakpoints,\n alignItems,\n cols,\n children,\n rows,\n gutter,\n justify,\n wrap,\n width,\n height,\n ...rest\n },\n globalProps,\n xstyledProps,\n isSpanParent,\n renderChildren,\n } = useGrid(props);\n\n return (\n <GridItem\n alignItems={alignItems}\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 innerRef={ref}\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA9BJ,mBAAkB;AAClB,8BAAyB;AAEzB,mCAAgC;AAChC,sBAAyB;AACzB,qBAAwB;AACxB,+BAA2B;AAE3B,MAAM,OAAO,aAAAA,QAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const {\n propsWithDefaults: {\n withMaxWidthBreakpoints,\n alignItems,\n cols,\n children,\n rows,\n gutter,\n justify,\n wrap,\n width,\n height,\n ...rest\n },\n globalProps,\n xstyledProps,\n isSpanParent,\n renderChildren,\n } = useGrid(props);\n\n return (\n <GridItem\n {...rest}\n {...globalProps}\n {...xstyledProps}\n alignItems={alignItems}\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 innerRef={ref}\n w={width}\n h={height}\n withMaxWidthBreakpoints={withMaxWidthBreakpoints}\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 = DSGridName;\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;AAAA;ACAA,YAAuB;AD8BnB;AA9BJ,mBAAkB;AAClB,8BAAyB;AAEzB,mCAAgC;AAChC,sBAAyB;AACzB,qBAAwB;AACxB,+BAA2B;AAE3B,MAAM,OAAO,aAAAA,QAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,aAAAA,QAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,uBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/GridItem.js
CHANGED
|
@@ -50,8 +50,8 @@ const gridV1 = import_ds_system.css`
|
|
|
50
50
|
const GridItem = import_ds_system.styled.div`
|
|
51
51
|
display: grid;
|
|
52
52
|
display: -ms-grid;
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
${({ gutter }) => gutter !== void 0 ? `column-gap: ${(0, import_ds_system.mapGap)(gutter)}` : ""}
|
|
54
|
+
${({ gutter }) => gutter !== void 0 ? `row-gap: ${(0, import_ds_system.mapGap)(gutter)}` : ""}
|
|
55
55
|
${import_ds_system.grids}
|
|
56
56
|
${import_ds_system.flexboxes}
|
|
57
57
|
${import_ds_system.sizing}
|
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 {\n styled,\n css,\n mapGap,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n grids,\n layout,\n type LayoutProps,\n type SpaceProps,\n type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n ${manageColsV2}\n ${manageRowsV2}\n ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAeO;AACP,8BAAiC;AACjC,wBAA6B;AAC7B,wBAA6B;AAE7B,oBAAmD;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n styled,\n css,\n mapGap,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n grids,\n layout,\n type LayoutProps,\n type SpaceProps,\n type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n ${manageColsV2}\n ${manageRowsV2}\n ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n ${({ gutter }) => (gutter !== undefined ? `column-gap: ${mapGap(gutter)}` : '')}\n ${({ gutter }) => (gutter !== undefined ? `row-gap: ${mapGap(gutter)}` : '')}\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${({ withMaxWidthBreakpoints }) => (withMaxWidthBreakpoints ? gridV2 : gridV1)}\n ${boxShadows}\n ${borders}\n ${background}\n ${layout}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAeO;AACP,8BAAiC;AACjC,wBAA6B;AAC7B,wBAA6B;AAE7B,oBAAmD;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA,IAG3B,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,mBAAe,yBAAO,MAAM,MAAM;AAAA,IAC1E,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,gBAAY,yBAAO,MAAM,MAAM;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number | (string | number)[];\n medium?: string | number | (string | number)[];\n large?: string | number | (string | number)[];\n }\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface DefaultProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n className: string;\n justify: JustifyPlacement;\n wrap: Wrap;\n span: number;\n justifyItems: string;\n }\n\n export interface OptionalProps {\n height?: string | number;\n width?: string | number;\n justifyContent?: JustifyPlacement;\n alignItems?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AACvE,uBAAuE;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number | (string | number)[];\n medium?: string | number | (string | number)[];\n large?: string | number | (string | number)[];\n }\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n className: string;\n justify: JustifyPlacement;\n wrap: Wrap;\n span: number | SpanBreakpoints;\n justifyItems: string;\n }\n\n export interface OptionalProps {\n height?: string | number;\n width?: string | number;\n justifyContent?: JustifyPlacement;\n alignItems?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems?: AlignItemsPlacement;\n children: React.ReactNode;\n className?: string;\n justify: JustifyPlacement;\n gutter?: string | number;\n wrap: Wrap;\n childNumber: number;\n isSpanParent: boolean;\n span?: number | SpanBreakpoints;\n withMaxWidthBreakpoints?: boolean;\n }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n rows: [],\n cols: [],\n className: '',\n justify: 'flex-start',\n wrap: 'wrap',\n span: 1,\n justifyItems: 'normal',\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 PropTypes.number,\n rowColBreakpoints,\n ])\n .description('Row layout cells')\n .defaultValue([]),\n cols: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n PropTypes.number,\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 withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\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 border: PropTypes.string.description('Sets border.'),\n borderRadius: PropTypes.string.description('Sets border radius.'),\n borderWidth: PropTypes.string.description('Sets border width.'),\n borderStyle: PropTypes.string.description('Sets border style.'),\n borderColor: PropTypes.string.description('Sets border color.'),\n borderTop: PropTypes.string.description('Sets top border.'),\n borderBottom: PropTypes.string.description('Sets bottom border.'),\n borderLeft: PropTypes.string.description('Sets left border.'),\n borderRight: PropTypes.string.description('Sets right border.'),\n borderTopWidth: PropTypes.string.description('Sets border top width.'),\n borderTopStyle: PropTypes.string.description('Sets border top style.'),\n borderTopColor: PropTypes.string.description('Sets border top color.'),\n borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n borderRightWidth: PropTypes.string.description('Sets border right width.'),\n borderRightStyle: PropTypes.string.description('Sets border right style.'),\n borderRightColor: PropTypes.string.description('Sets border right color.'),\n borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import__ = require("../index.js");
|
|
27
|
+
const testRequiredProps = {};
|
|
28
|
+
const testOptionalProps = {
|
|
29
|
+
height: 0,
|
|
30
|
+
width: 0,
|
|
31
|
+
justifyContent: "flex-start",
|
|
32
|
+
alignItems: "flex-start",
|
|
33
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
|
|
34
|
+
withMaxWidthBreakpoints: false,
|
|
35
|
+
rowGap: "xs",
|
|
36
|
+
gutter: "xs"
|
|
37
|
+
};
|
|
38
|
+
const testPartialDefaults = {
|
|
39
|
+
rows: [],
|
|
40
|
+
cols: [],
|
|
41
|
+
span: 2,
|
|
42
|
+
justifyItems: "flex-start"
|
|
43
|
+
};
|
|
44
|
+
const testProps = {
|
|
45
|
+
...testRequiredProps,
|
|
46
|
+
...testOptionalProps,
|
|
47
|
+
...testPartialDefaults
|
|
48
|
+
};
|
|
49
|
+
const testPropsAsSyntax = {
|
|
50
|
+
...testRequiredProps,
|
|
51
|
+
...testOptionalProps,
|
|
52
|
+
...testPartialDefaults
|
|
53
|
+
};
|
|
54
|
+
const testCompleteDefaults = {
|
|
55
|
+
rows: [],
|
|
56
|
+
cols: [],
|
|
57
|
+
span: 2,
|
|
58
|
+
justifyItems: "flex-start",
|
|
59
|
+
className: "",
|
|
60
|
+
justify: "flex-start",
|
|
61
|
+
wrap: "nowrap"
|
|
62
|
+
};
|
|
63
|
+
const testInternalProps = {
|
|
64
|
+
...testRequiredProps,
|
|
65
|
+
...testOptionalProps,
|
|
66
|
+
...testCompleteDefaults
|
|
67
|
+
};
|
|
68
|
+
const testInternalPropsAsSyntax = {
|
|
69
|
+
...testRequiredProps,
|
|
70
|
+
...testOptionalProps,
|
|
71
|
+
...testCompleteDefaults
|
|
72
|
+
};
|
|
73
|
+
const testExplicitDefinition = {
|
|
74
|
+
cols: { small: ["1fr", "1fr", "1fr"], medium: ["5fr", "1fr", "1fr"], large: ["1fr", "4fr", "1fr"] },
|
|
75
|
+
rows: { small: ["1fr", "1fr", "1fr"], medium: ["5fr", "1fr", "1fr"], large: ["1fr", "4fr", "1fr"] },
|
|
76
|
+
span: { small: 2, medium: 3, large: 1 }
|
|
77
|
+
};
|
|
78
|
+
const testInferedTypeCompatibility = {
|
|
79
|
+
rows: [1, 2, 3],
|
|
80
|
+
justifyContent: "center",
|
|
81
|
+
border: "1px solid black"
|
|
82
|
+
};
|
|
83
|
+
const testDefinitionAsConst = {
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
gutter: "xs",
|
|
86
|
+
bg: "brand-100",
|
|
87
|
+
borderTopColor: "neutral-100-a10",
|
|
88
|
+
borderLeftColor: "#141414",
|
|
89
|
+
borderRightColor: "rgba(0,0,0,0.5)",
|
|
90
|
+
borderBottomColor: "rgb(0,0,0)"
|
|
91
|
+
};
|
|
92
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Grid, { ...testExplicitDefinition }),
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Grid, { ...testInferedTypeCompatibility }),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Grid, { ...testDefinitionAsConst }),
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Grid, { rows: [1, 2, 3], justifyContent: "center", border: "1px solid black" })
|
|
97
|
+
] });
|
|
98
|
+
//# sourceMappingURL=typescript-grid-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-grid-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n height: 0,\n width: 0,\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n children: <></>,\n withMaxWidthBreakpoints: false,\n rowGap: 'xs',\n gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n rows: [],\n cols: [],\n span: 2,\n justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n rows: [],\n cols: [],\n span: 2,\n justifyItems: 'flex-start',\n className: '',\n justify: 'flex-start',\n wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n rows: [1, 2, 3],\n justifyContent: 'center',\n border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n alignItems: 'center',\n gutter: 'xs',\n bg: 'brand-100',\n borderTopColor: 'neutral-100-a10',\n borderLeftColor: '#141414',\n borderRightColor: 'rgba(0,0,0,0.5)',\n borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <Grid {...testExplicitDefinition} />\n <Grid {...testInferedTypeCompatibility} />\n <Grid {...testDefinitionAsConst} />\n {/* works with inline values */}\n <Grid rows={[1, 2, 3]} justifyContent={'center'} border={'1px solid black'} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACiBX;AAhBZ,eAAqB;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,2EAAE;AAAA,EACZ,yBAAyB;AAAA,EACzB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iBAAM,GAAG,wBAAwB;AAAA,EAClC,4CAAC,iBAAM,GAAG,8BAA8B;AAAA,EACxC,4CAAC,iBAAM,GAAG,uBAAuB;AAAA,EAEjC,4CAAC,iBAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAgB,UAAU,QAAQ,mBAAmB;AAAA,GAC9E;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/Grid.js
CHANGED
|
@@ -29,6 +29,9 @@ const Grid = React2.forwardRef((props, ref) => {
|
|
|
29
29
|
return /* @__PURE__ */ jsx(
|
|
30
30
|
GridItem,
|
|
31
31
|
{
|
|
32
|
+
...rest,
|
|
33
|
+
...globalProps,
|
|
34
|
+
...xstyledProps,
|
|
32
35
|
alignItems,
|
|
33
36
|
cols,
|
|
34
37
|
gutter,
|
|
@@ -38,9 +41,6 @@ const Grid = React2.forwardRef((props, ref) => {
|
|
|
38
41
|
wrap,
|
|
39
42
|
childNumber: React2.Children.count(children),
|
|
40
43
|
innerRef: ref,
|
|
41
|
-
...rest,
|
|
42
|
-
...globalProps,
|
|
43
|
-
...xstyledProps,
|
|
44
44
|
w: width,
|
|
45
45
|
h: height,
|
|
46
46
|
withMaxWidthBreakpoints,
|
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 } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const {\n propsWithDefaults: {\n withMaxWidthBreakpoints,\n alignItems,\n cols,\n children,\n rows,\n gutter,\n justify,\n wrap,\n width,\n height,\n ...rest\n },\n globalProps,\n xstyledProps,\n isSpanParent,\n renderChildren,\n } = useGrid(props);\n\n return (\n <GridItem\n alignItems={alignItems}\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 innerRef={ref}\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8BnB;AA9BJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,MAAM,OAAOA,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n const {\n propsWithDefaults: {\n withMaxWidthBreakpoints,\n alignItems,\n cols,\n children,\n rows,\n gutter,\n justify,\n wrap,\n width,\n height,\n ...rest\n },\n globalProps,\n xstyledProps,\n isSpanParent,\n renderChildren,\n } = useGrid(props);\n\n return (\n <GridItem\n {...rest}\n {...globalProps}\n {...xstyledProps}\n alignItems={alignItems}\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 innerRef={ref}\n w={width}\n h={height}\n withMaxWidthBreakpoints={withMaxWidthBreakpoints}\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 = DSGridName;\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BnB;AA9BJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,MAAM,OAAOA,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAaA,OAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/GridItem.js
CHANGED
|
@@ -29,8 +29,8 @@ const gridV1 = css`
|
|
|
29
29
|
const GridItem = styled.div`
|
|
30
30
|
display: grid;
|
|
31
31
|
display: -ms-grid;
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
${({ gutter }) => gutter !== void 0 ? `column-gap: ${mapGap(gutter)}` : ""}
|
|
33
|
+
${({ gutter }) => gutter !== void 0 ? `row-gap: ${mapGap(gutter)}` : ""}
|
|
34
34
|
${grids}
|
|
35
35
|
${flexboxes}
|
|
36
36
|
${sizing}
|
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 {\n styled,\n css,\n mapGap,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n grids,\n layout,\n type LayoutProps,\n type SpaceProps,\n type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n ${manageColsV2}\n ${manageRowsV2}\n ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,YAAY,YAAY,kBAAkB;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n styled,\n css,\n mapGap,\n background,\n borders,\n sizing,\n space,\n boxShadows,\n flexboxes,\n grids,\n layout,\n type LayoutProps,\n type SpaceProps,\n type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n ${manageColsV2}\n ${manageRowsV2}\n ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n ${manageCols}\n ${manageRows}\n ${manageSpan}\n`;\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n display: grid;\n display: -ms-grid;\n ${({ gutter }) => (gutter !== undefined ? `column-gap: ${mapGap(gutter)}` : '')}\n ${({ gutter }) => (gutter !== undefined ? `row-gap: ${mapGap(gutter)}` : '')}\n ${grids}\n ${flexboxes}\n ${sizing}\n ${space}\n ${({ withMaxWidthBreakpoints }) => (withMaxWidthBreakpoints ? gridV2 : gridV1)}\n ${boxShadows}\n ${borders}\n ${background}\n ${layout}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,YAAY,YAAY,kBAAkB;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,IAG3B,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,eAAe,OAAO,MAAM,MAAM;AAAA,IAC1E,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,YAAY,OAAO,MAAM,MAAM;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number | (string | number)[];\n medium?: string | number | (string | number)[];\n large?: string | number | (string | number)[];\n }\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface DefaultProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n className: string;\n justify: JustifyPlacement;\n wrap: Wrap;\n span: number;\n justifyItems: string;\n }\n\n export interface OptionalProps {\n height?: string | number;\n width?: string | number;\n justifyContent?: JustifyPlacement;\n alignItems?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,qBAAqB,kBAAkB,MAAM,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n interface RowColBreakpoints {\n small?: string | number | (string | number)[];\n medium?: string | number | (string | number)[];\n large?: string | number | (string | number)[];\n }\n\n interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n className: string;\n justify: JustifyPlacement;\n wrap: Wrap;\n span: number | SpanBreakpoints;\n justifyItems: string;\n }\n\n export interface OptionalProps {\n height?: string | number;\n width?: string | number;\n justifyContent?: JustifyPlacement;\n alignItems?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface ItemProps {\n rows: string[] | string | number[] | RowColBreakpoints;\n cols: string[] | string | number[] | RowColBreakpoints;\n alignItems?: AlignItemsPlacement;\n children: React.ReactNode;\n className?: string;\n justify: JustifyPlacement;\n gutter?: string | number;\n wrap: Wrap;\n childNumber: number;\n isSpanParent: boolean;\n span?: number | SpanBreakpoints;\n withMaxWidthBreakpoints?: boolean;\n }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n rows: [],\n cols: [],\n className: '',\n justify: 'flex-start',\n wrap: 'wrap',\n span: 1,\n justifyItems: 'normal',\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 PropTypes.number,\n rowColBreakpoints,\n ])\n .description('Row layout cells')\n .defaultValue([]),\n cols: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n PropTypes.number,\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 withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\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 border: PropTypes.string.description('Sets border.'),\n borderRadius: PropTypes.string.description('Sets border radius.'),\n borderWidth: PropTypes.string.description('Sets border width.'),\n borderStyle: PropTypes.string.description('Sets border style.'),\n borderColor: PropTypes.string.description('Sets border color.'),\n borderTop: PropTypes.string.description('Sets top border.'),\n borderBottom: PropTypes.string.description('Sets bottom border.'),\n borderLeft: PropTypes.string.description('Sets left border.'),\n borderRight: PropTypes.string.description('Sets right border.'),\n borderTopWidth: PropTypes.string.description('Sets border top width.'),\n borderTopStyle: PropTypes.string.description('Sets border top style.'),\n borderTopColor: PropTypes.string.description('Sets border top color.'),\n borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n borderRightWidth: PropTypes.string.description('Sets border right width.'),\n borderRightStyle: PropTypes.string.description('Sets border right style.'),\n borderRightColor: PropTypes.string.description('Sets border right color.'),\n borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Grid } from "../index.js";
|
|
4
|
+
const testRequiredProps = {};
|
|
5
|
+
const testOptionalProps = {
|
|
6
|
+
height: 0,
|
|
7
|
+
width: 0,
|
|
8
|
+
justifyContent: "flex-start",
|
|
9
|
+
alignItems: "flex-start",
|
|
10
|
+
children: /* @__PURE__ */ jsx(Fragment, {}),
|
|
11
|
+
withMaxWidthBreakpoints: false,
|
|
12
|
+
rowGap: "xs",
|
|
13
|
+
gutter: "xs"
|
|
14
|
+
};
|
|
15
|
+
const testPartialDefaults = {
|
|
16
|
+
rows: [],
|
|
17
|
+
cols: [],
|
|
18
|
+
span: 2,
|
|
19
|
+
justifyItems: "flex-start"
|
|
20
|
+
};
|
|
21
|
+
const testProps = {
|
|
22
|
+
...testRequiredProps,
|
|
23
|
+
...testOptionalProps,
|
|
24
|
+
...testPartialDefaults
|
|
25
|
+
};
|
|
26
|
+
const testPropsAsSyntax = {
|
|
27
|
+
...testRequiredProps,
|
|
28
|
+
...testOptionalProps,
|
|
29
|
+
...testPartialDefaults
|
|
30
|
+
};
|
|
31
|
+
const testCompleteDefaults = {
|
|
32
|
+
rows: [],
|
|
33
|
+
cols: [],
|
|
34
|
+
span: 2,
|
|
35
|
+
justifyItems: "flex-start",
|
|
36
|
+
className: "",
|
|
37
|
+
justify: "flex-start",
|
|
38
|
+
wrap: "nowrap"
|
|
39
|
+
};
|
|
40
|
+
const testInternalProps = {
|
|
41
|
+
...testRequiredProps,
|
|
42
|
+
...testOptionalProps,
|
|
43
|
+
...testCompleteDefaults
|
|
44
|
+
};
|
|
45
|
+
const testInternalPropsAsSyntax = {
|
|
46
|
+
...testRequiredProps,
|
|
47
|
+
...testOptionalProps,
|
|
48
|
+
...testCompleteDefaults
|
|
49
|
+
};
|
|
50
|
+
const testExplicitDefinition = {
|
|
51
|
+
cols: { small: ["1fr", "1fr", "1fr"], medium: ["5fr", "1fr", "1fr"], large: ["1fr", "4fr", "1fr"] },
|
|
52
|
+
rows: { small: ["1fr", "1fr", "1fr"], medium: ["5fr", "1fr", "1fr"], large: ["1fr", "4fr", "1fr"] },
|
|
53
|
+
span: { small: 2, medium: 3, large: 1 }
|
|
54
|
+
};
|
|
55
|
+
const testInferedTypeCompatibility = {
|
|
56
|
+
rows: [1, 2, 3],
|
|
57
|
+
justifyContent: "center",
|
|
58
|
+
border: "1px solid black"
|
|
59
|
+
};
|
|
60
|
+
const testDefinitionAsConst = {
|
|
61
|
+
alignItems: "center",
|
|
62
|
+
gutter: "xs",
|
|
63
|
+
bg: "brand-100",
|
|
64
|
+
borderTopColor: "neutral-100-a10",
|
|
65
|
+
borderLeftColor: "#141414",
|
|
66
|
+
borderRightColor: "rgba(0,0,0,0.5)",
|
|
67
|
+
borderBottomColor: "rgb(0,0,0)"
|
|
68
|
+
};
|
|
69
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Grid, { ...testExplicitDefinition }),
|
|
71
|
+
/* @__PURE__ */ jsx(Grid, { ...testInferedTypeCompatibility }),
|
|
72
|
+
/* @__PURE__ */ jsx(Grid, { ...testDefinitionAsConst }),
|
|
73
|
+
/* @__PURE__ */ jsx(Grid, { rows: [1, 2, 3], justifyContent: "center", border: "1px solid black" })
|
|
74
|
+
] });
|
|
75
|
+
//# sourceMappingURL=typescript-grid-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-grid-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n height: 0,\n width: 0,\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n children: <></>,\n withMaxWidthBreakpoints: false,\n rowGap: 'xs',\n gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n rows: [],\n cols: [],\n span: 2,\n justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n rows: [],\n cols: [],\n span: 2,\n justifyItems: 'flex-start',\n className: '',\n justify: 'flex-start',\n wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n rows: [1, 2, 3],\n justifyContent: 'center',\n border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n alignItems: 'center',\n gutter: 'xs',\n bg: 'brand-100',\n borderTopColor: 'neutral-100-a10',\n borderLeftColor: '#141414',\n borderRightColor: 'rgba(0,0,0,0.5)',\n borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <Grid {...testExplicitDefinition} />\n <Grid {...testInferedTypeCompatibility} />\n <Grid {...testDefinitionAsConst} />\n {/* works with inline values */}\n <Grid rows={[1, 2, 3]} justifyContent={'center'} border={'1px solid black'} />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiBX,wBAsEV,YAtEU;AAhBZ,SAAS,YAAY;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,gCAAE;AAAA,EACZ,yBAAyB;AAAA,EACzB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,QAAM,GAAG,wBAAwB;AAAA,EAClC,oBAAC,QAAM,GAAG,8BAA8B;AAAA,EACxC,oBAAC,QAAM,GAAG,uBAAuB;AAAA,EAEjC,oBAAC,QAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAgB,UAAU,QAAQ,mBAAmB;AAAA,GAC9E;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/types/GridItem.d.ts
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import { type LayoutProps, type SpaceProps, type SizingProps } from '@elliemae/ds-system';
|
|
2
|
+
import { type DSGridT } from './react-desc-prop-types.js';
|
|
3
|
+
export declare const GridItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, DSGridT.ItemProps & LayoutProps<import("@xstyled/system").Theme> & SpaceProps & SizingProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
@@ -16,13 +16,15 @@ export declare namespace DSGridT {
|
|
|
16
16
|
type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
|
|
17
17
|
type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
|
|
18
18
|
type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
19
|
+
interface RequiredProps {
|
|
20
|
+
}
|
|
19
21
|
interface DefaultProps {
|
|
20
22
|
rows: string[] | string | number[] | RowColBreakpoints;
|
|
21
23
|
cols: string[] | string | number[] | RowColBreakpoints;
|
|
22
24
|
className: string;
|
|
23
25
|
justify: JustifyPlacement;
|
|
24
26
|
wrap: Wrap;
|
|
25
|
-
span: number;
|
|
27
|
+
span: number | SpanBreakpoints;
|
|
26
28
|
justifyItems: string;
|
|
27
29
|
}
|
|
28
30
|
interface OptionalProps {
|
|
@@ -42,19 +44,15 @@ export declare namespace DSGridT {
|
|
|
42
44
|
interface ItemProps {
|
|
43
45
|
rows: string[] | string | number[] | RowColBreakpoints;
|
|
44
46
|
cols: string[] | string | number[] | RowColBreakpoints;
|
|
45
|
-
alignItems
|
|
47
|
+
alignItems?: AlignItemsPlacement;
|
|
46
48
|
children: React.ReactNode;
|
|
47
|
-
className
|
|
49
|
+
className?: string;
|
|
48
50
|
justify: JustifyPlacement;
|
|
49
|
-
gutter
|
|
51
|
+
gutter?: string | number;
|
|
50
52
|
wrap: Wrap;
|
|
51
53
|
childNumber: number;
|
|
52
54
|
isSpanParent: boolean;
|
|
53
55
|
span?: number | SpanBreakpoints;
|
|
54
|
-
ref: React.ForwardedRef<HTMLDivElement>;
|
|
55
|
-
boxShadow?: BoxShadow;
|
|
56
|
-
backgroundColor?: string;
|
|
57
|
-
bg?: string;
|
|
58
56
|
withMaxWidthBreakpoints?: boolean;
|
|
59
57
|
}
|
|
60
58
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-grid",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Grid",
|
|
6
6
|
"files": [
|
|
@@ -64,16 +64,16 @@
|
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@xstyled/system": "~3.7.3",
|
|
67
|
-
"@elliemae/ds-props-helpers": "3.27.0-next.
|
|
68
|
-
"@elliemae/ds-
|
|
69
|
-
"@elliemae/ds-
|
|
67
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.3",
|
|
68
|
+
"@elliemae/ds-utilities": "3.27.0-next.3",
|
|
69
|
+
"@elliemae/ds-system": "3.27.0-next.3"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
73
73
|
"@elliemae/pui-theme": "~2.7.0",
|
|
74
74
|
"react-test-renderer": "~17.0.2",
|
|
75
75
|
"styled-components": "~5.3.9",
|
|
76
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
76
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.3"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
79
|
"@elliemae/pui-theme": "^2.6.0",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
},
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public",
|
|
88
|
-
"typeSafety":
|
|
88
|
+
"typeSafety": true
|
|
89
89
|
},
|
|
90
90
|
"scripts": {
|
|
91
91
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|