@elliemae/ds-grid 3.50.1-next.9 → 3.51.0-beta.2
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/typescript-testing/typescript-grid-valid.js +1 -1
- package/dist/cjs/typescript-testing/typescript-grid-valid.js.map +2 -2
- package/dist/cjs/utils/manageCols.js.map +1 -1
- package/dist/cjs/utils/manageRows.js.map +1 -1
- package/dist/esm/typescript-testing/typescript-grid-valid.js +1 -1
- package/dist/esm/typescript-testing/typescript-grid-valid.js.map +2 -2
- package/dist/esm/utils/manageCols.js.map +1 -1
- package/dist/esm/utils/manageRows.js.map +1 -1
- package/dist/types/utils/manageCols.d.ts +1 -1
- package/dist/types/utils/manageRows.d.ts +1 -1
- package/package.json +10 -38
|
@@ -30,7 +30,7 @@ const testOptionalProps = {
|
|
|
30
30
|
width: 0,
|
|
31
31
|
justifyContent: "flex-start",
|
|
32
32
|
alignItems: "flex-start",
|
|
33
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
33
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "hey" }),
|
|
34
34
|
withMaxWidthBreakpoints: false,
|
|
35
35
|
rowGap: "xs",
|
|
36
36
|
gutter: "xs"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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:
|
|
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,
|
|
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: <div>hey</div>,\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,4CAAC,SAAI,iBAAG;AAAA,EAClB,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,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/manageCols.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type {
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst colsIsBreakpointDefinition = (cols: unknown): cols is DSGridT.RowColBreakpoints =>\n typeof cols === 'object' && !Array.isArray(cols);\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateColsCssStringForArray = (colsVal: DSGridT.RowOrColsSyntaxSugar[]): string => {\n // mtg and mtgs are used to support mapping different ways of defining the cols\n // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n // only one of them will be effectively applied by the browser\n const mtg = (mapTemplateGrid(colsVal as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colsVal as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .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};\nconst generateColsCssStringForBootstrapLikeishScenario = (colsVal: string | number): string => `\n -ms-grid-columns: repeat(${colsVal}, 1fr);\n grid-template-columns: repeat(${colsVal}, 1fr);\n `;\nconst generateColsWithMediaQueries = (\n cols: DSGridT.RowColBreakpoints,\n theme: Theme,\n isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because grid cols definitions supports partial definitions\n // meaning that you can define cols only for small and medium and not for large\n // in such case we want to avoid generating media queries for large\n // we also need to make sure that the largest definition is used as the default one\n if (cols.large) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.large)) {\n cssString = generateColsCssStringForArray(cols.large);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);\n }\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n if (cols.medium) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.medium)) {\n cssString = generateColsCssStringForArray(cols.medium);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);\n }\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n if (cols.small) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.small)) {\n cssString = generateColsCssStringForArray(cols.small);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);\n }\n finalMediaDeclaration.push(theme.media.small`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n return finalMediaDeclaration;\n};\n\nexport const manageColsV2 = ({ cols, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // we want to be extremely explicit with how we handle the different use-cases\n // the component is quite old and has been tailored to fit the needs of the different use-cases\n // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of cols definitions, etc)\n // support for\n // cols:{small: 1, medium: 2, large: 3}\n // AND\n // cols: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n if (colsIsBreakpointDefinition(cols)) {\n // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n // any change in the theme will break the co-relation and we would need to update the component\n // for such reason we are optimizing for maintainability and not scalability\n return generateColsWithMediaQueries(cols, theme, isSpanParent);\n }\n\n // support for cols: ['1fr', '1fr', '1fr'] && cols: [1, 1, 1]\n if (Array.isArray(cols)) {\n const cssString = generateColsCssStringForArray(cols);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // support for parent is span and is like cols: 3\n if (isSpanParent) {\n const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // fallback is not doing anything\n return [css``];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;AAKrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAoD;AAIzF,QAAM,UAAO,kCAAgB,OAAuC,EAAe,KAAK,GAAG;AAC3F,QAAM,WAAQ,kCAAgB,OAAuC,EAClE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,SAAO;AAAA,0BACiB,OAAO,kBAAkB;AAAA,+BACpB,OAAO,MAAM;AAAA,0BAClB,QAAQ,kBAAkB;AAAA,+BACrB,QAAQ,MAAM;AAAA;AAE7C;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,iCAC9D,OAAO;AAAA,sCACF,OAAO;AAAA;AAE7C,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,0BAAsB,KAAK,MAAM,MAAM,SAAS,SAAS,EAAE;AAC3D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,SAAO,CAAC,sBAAK;AACf;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/manageRows.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type {
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst rowsIsBreakpointDefinition = (rows: unknown): rows is DSGridT.RowColBreakpoints =>\n typeof rows === 'object' && !Array.isArray(rows);\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateRowsCssStringForArray = (rowsVal: DSGridT.RowOrColsSyntaxSugar[]): string => {\n // mtg and mtgs are used to support mapping different ways of defining the rows\n // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n // only one of them will be effectively applied by the browser\n const mtg = (mapTemplateGrid(rowsVal as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowsVal as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .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};\nconst generateRowsCssStringForBootstrapLikeishScenario = (rowsVal: string | number): string => `\n -ms-grid-rows: repeat(${rowsVal}, 1fr);\n grid-template-rows: repeat(${rowsVal}, 1fr);\n `;\nconst generateRowsWithMediaQueries = (\n rows: DSGridT.RowColBreakpoints,\n theme: Theme,\n isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because grid rows definitions supports partial definitions\n // meaning that you can define rows only for small and medium and not for large\n // in such case we want to avoid generating media queries for large\n // we also need to make sure that the largest definition is used as the default one\n if (rows.large) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.large)) {\n cssString = generateRowsCssStringForArray(rows.large);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n }\n if (rows.medium) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.medium)) {\n cssString = generateRowsCssStringForArray(rows.medium);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n }\n if (rows.small) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.small)) {\n cssString = generateRowsCssStringForArray(rows.small);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.small`${cssString}`);\n }\n return finalMediaDeclaration;\n};\n\nexport const manageRowsV2 = ({ rows, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // we want to be extremely explicit with how we handle the different use-cases\n // the component is quite old and has been tailored to fit the needs of the different use-cases\n // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of rows definitions, etc)\n // support for\n // rows:{small: 1, medium: 2, large: 3}\n // AND\n // rows: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n if (rowsIsBreakpointDefinition(rows)) {\n // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n // any change in the theme will break the co-relation and we would need to update the component\n // for such reason we are optimizing for maintainability and not scalability\n return generateRowsWithMediaQueries(rows, theme, isSpanParent);\n }\n\n // support for rows: ['1fr', '1fr', '1fr'] && rows: [1, 1, 1]\n if (Array.isArray(rows)) {\n const cssString = generateRowsCssStringForArray(rows);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // support for parent is span and is like rows: 3\n if (isSpanParent) {\n const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // fallback is not doing anything\n return [css``];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;AAKrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAoD;AAIzF,QAAM,UAAO,kCAAgB,OAAuC,EAAe,KAAK,GAAG;AAC3F,QAAM,WAAQ,kCAAgB,OAAuC,EAClE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,SAAO;AAAA,uBACc,OAAO,kBAAkB;AAAA,4BACpB,OAAO,MAAM;AAAA,uBAClB,QAAQ,kBAAkB;AAAA,4BACrB,QAAQ,MAAM;AAAA;AAE1C;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,8BACjE,OAAO;AAAA,mCACF,OAAO;AAAA;AAE1C,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,SAAS,SAAS,EAAE;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,SAAO,CAAC,sBAAK;AACf;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ const testOptionalProps = {
|
|
|
7
7
|
width: 0,
|
|
8
8
|
justifyContent: "flex-start",
|
|
9
9
|
alignItems: "flex-start",
|
|
10
|
-
children: /* @__PURE__ */ jsx(
|
|
10
|
+
children: /* @__PURE__ */ jsx("div", { children: "hey" }),
|
|
11
11
|
withMaxWidthBreakpoints: false,
|
|
12
12
|
rowGap: "xs",
|
|
13
13
|
gutter: "xs"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiBX,
|
|
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: <div>hey</div>,\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,SAsEV,UAtEU,KAsEV,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,oBAAC,SAAI,iBAAG;AAAA,EAClB,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,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
|
|
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/utils/manageCols.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type {
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst colsIsBreakpointDefinition = (cols: unknown): cols is DSGridT.RowColBreakpoints =>\n typeof cols === 'object' && !Array.isArray(cols);\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateColsCssStringForArray = (colsVal: DSGridT.RowOrColsSyntaxSugar[]): string => {\n // mtg and mtgs are used to support mapping different ways of defining the cols\n // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n // only one of them will be effectively applied by the browser\n const mtg = (mapTemplateGrid(colsVal as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colsVal as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .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};\nconst generateColsCssStringForBootstrapLikeishScenario = (colsVal: string | number): string => `\n -ms-grid-columns: repeat(${colsVal}, 1fr);\n grid-template-columns: repeat(${colsVal}, 1fr);\n `;\nconst generateColsWithMediaQueries = (\n cols: DSGridT.RowColBreakpoints,\n theme: Theme,\n isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because grid cols definitions supports partial definitions\n // meaning that you can define cols only for small and medium and not for large\n // in such case we want to avoid generating media queries for large\n // we also need to make sure that the largest definition is used as the default one\n if (cols.large) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.large)) {\n cssString = generateColsCssStringForArray(cols.large);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);\n }\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n if (cols.medium) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.medium)) {\n cssString = generateColsCssStringForArray(cols.medium);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);\n }\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n if (cols.small) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(cols.small)) {\n cssString = generateColsCssStringForArray(cols.small);\n } else if (isSpanParent) {\n cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);\n }\n finalMediaDeclaration.push(theme.media.small`${cssString}`);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n }\n return finalMediaDeclaration;\n};\n\nexport const manageColsV2 = ({ cols, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // we want to be extremely explicit with how we handle the different use-cases\n // the component is quite old and has been tailored to fit the needs of the different use-cases\n // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of cols definitions, etc)\n // support for\n // cols:{small: 1, medium: 2, large: 3}\n // AND\n // cols: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n if (colsIsBreakpointDefinition(cols)) {\n // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n // any change in the theme will break the co-relation and we would need to update the component\n // for such reason we are optimizing for maintainability and not scalability\n return generateColsWithMediaQueries(cols, theme, isSpanParent);\n }\n\n // support for cols: ['1fr', '1fr', '1fr'] && cols: [1, 1, 1]\n if (Array.isArray(cols)) {\n const cssString = generateColsCssStringForArray(cols);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // support for parent is span and is like cols: 3\n if (isSpanParent) {\n const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // fallback is not doing anything\n return [css``];\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,KAAK,uBAAuB;AAKrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAoD;AAIzF,QAAM,MAAO,gBAAgB,OAAuC,EAAe,KAAK,GAAG;AAC3F,QAAM,OAAQ,gBAAgB,OAAuC,EAClE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,SAAO;AAAA,0BACiB,OAAO,kBAAkB;AAAA,+BACpB,OAAO,MAAM;AAAA,0BAClB,QAAQ,kBAAkB;AAAA,+BACrB,QAAQ,MAAM;AAAA;AAE7C;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,iCAC9D,OAAO;AAAA,sCACF,OAAO;AAAA;AAE7C,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,0BAAsB,KAAK,MAAM,MAAM,SAAS,SAAS,EAAE;AAC3D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,SAAO,CAAC,KAAK;AACf;",
|
|
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/utils/manageRows.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type {
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst rowsIsBreakpointDefinition = (rows: unknown): rows is DSGridT.RowColBreakpoints =>\n typeof rows === 'object' && !Array.isArray(rows);\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateRowsCssStringForArray = (rowsVal: DSGridT.RowOrColsSyntaxSugar[]): string => {\n // mtg and mtgs are used to support mapping different ways of defining the rows\n // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n // only one of them will be effectively applied by the browser\n const mtg = (mapTemplateGrid(rowsVal as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowsVal as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .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};\nconst generateRowsCssStringForBootstrapLikeishScenario = (rowsVal: string | number): string => `\n -ms-grid-rows: repeat(${rowsVal}, 1fr);\n grid-template-rows: repeat(${rowsVal}, 1fr);\n `;\nconst generateRowsWithMediaQueries = (\n rows: DSGridT.RowColBreakpoints,\n theme: Theme,\n isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because grid rows definitions supports partial definitions\n // meaning that you can define rows only for small and medium and not for large\n // in such case we want to avoid generating media queries for large\n // we also need to make sure that the largest definition is used as the default one\n if (rows.large) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.large)) {\n cssString = generateRowsCssStringForArray(rows.large);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n }\n if (rows.medium) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.medium)) {\n cssString = generateRowsCssStringForArray(rows.medium);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n }\n if (rows.small) {\n // we apply different styles for defintions that are arrays and definitions that are not\n // specifically when the definition are NOT arrays we check if the parent is a span tag\n // if it is we try to copy bootstrap's behavior and use repeat css grid function\n let cssString = '';\n if (Array.isArray(rows.small)) {\n cssString = generateRowsCssStringForArray(rows.small);\n } else if (isSpanParent) {\n cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);\n }\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.small`${cssString}`);\n }\n return finalMediaDeclaration;\n};\n\nexport const manageRowsV2 = ({ rows, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // we want to be extremely explicit with how we handle the different use-cases\n // the component is quite old and has been tailored to fit the needs of the different use-cases\n // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of rows definitions, etc)\n // support for\n // rows:{small: 1, medium: 2, large: 3}\n // AND\n // rows: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n if (rowsIsBreakpointDefinition(rows)) {\n // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n // any change in the theme will break the co-relation and we would need to update the component\n // for such reason we are optimizing for maintainability and not scalability\n return generateRowsWithMediaQueries(rows, theme, isSpanParent);\n }\n\n // support for rows: ['1fr', '1fr', '1fr'] && rows: [1, 1, 1]\n if (Array.isArray(rows)) {\n const cssString = generateRowsCssStringForArray(rows);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // support for parent is span and is like rows: 3\n if (isSpanParent) {\n const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);\n return [\n css`\n ${cssString}\n `,\n ];\n }\n // fallback is not doing anything\n return [css``];\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,KAAK,uBAAuB;AAKrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAoD;AAIzF,QAAM,MAAO,gBAAgB,OAAuC,EAAe,KAAK,GAAG;AAC3F,QAAM,OAAQ,gBAAgB,OAAuC,EAClE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,SAAO;AAAA,uBACc,OAAO,kBAAkB;AAAA,4BACpB,OAAO,MAAM;AAAA,uBAClB,QAAQ,kBAAkB;AAAA,4BACrB,QAAQ,MAAM;AAAA;AAE1C;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,8BACjE,OAAO;AAAA,mCACF,OAAO;AAAA;AAE1C,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,SAAS,SAAS,EAAE;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI,SAAS;AAAA;AAAA,IAEf;AAAA,EACF;AAEA,SAAO,CAAC,KAAK;AACf;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@elliemae/ds-system';
|
|
2
|
-
import type { DSGridT } from '../react-desc-prop-types.js';
|
|
3
2
|
import type { Theme } from '@elliemae/pui-theme';
|
|
3
|
+
import type { DSGridT } from '../react-desc-prop-types.js';
|
|
4
4
|
type InterpolatedFunctionProps = {
|
|
5
5
|
theme: Theme;
|
|
6
6
|
} & DSGridT.ItemProps;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@elliemae/ds-system';
|
|
2
|
-
import type { DSGridT } from '../react-desc-prop-types.js';
|
|
3
2
|
import type { Theme } from '@elliemae/pui-theme';
|
|
3
|
+
import type { DSGridT } from '../react-desc-prop-types.js';
|
|
4
4
|
type InterpolatedFunctionProps = {
|
|
5
5
|
theme: Theme;
|
|
6
6
|
} & DSGridT.ItemProps;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-grid",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Grid",
|
|
6
6
|
"files": [
|
|
@@ -14,34 +14,6 @@
|
|
|
14
14
|
"types": "./dist/types/index.d.ts",
|
|
15
15
|
"import": "./dist/esm/index.js",
|
|
16
16
|
"require": "./dist/cjs/index.js"
|
|
17
|
-
},
|
|
18
|
-
"./utils/styles": {
|
|
19
|
-
"import": "./dist/esm/utils/styles.js",
|
|
20
|
-
"require": "./dist/cjs/utils/styles.js"
|
|
21
|
-
},
|
|
22
|
-
"./utils/constants": {
|
|
23
|
-
"import": "./dist/esm/utils/constants.js",
|
|
24
|
-
"require": "./dist/cjs/utils/constants.js"
|
|
25
|
-
},
|
|
26
|
-
"./types": {
|
|
27
|
-
"import": "./dist/esm/types.js",
|
|
28
|
-
"require": "./dist/cjs/types.js"
|
|
29
|
-
},
|
|
30
|
-
"./propTypes": {
|
|
31
|
-
"import": "./dist/esm/propTypes.js",
|
|
32
|
-
"require": "./dist/cjs/propTypes.js"
|
|
33
|
-
},
|
|
34
|
-
"./GridItem": {
|
|
35
|
-
"import": "./dist/esm/GridItem.js",
|
|
36
|
-
"require": "./dist/cjs/GridItem.js"
|
|
37
|
-
},
|
|
38
|
-
"./Grid": {
|
|
39
|
-
"import": "./dist/esm/Grid.js",
|
|
40
|
-
"require": "./dist/cjs/Grid.js"
|
|
41
|
-
},
|
|
42
|
-
"./defaultProps": {
|
|
43
|
-
"import": "./dist/esm/defaultProps.js",
|
|
44
|
-
"require": "./dist/cjs/defaultProps.js"
|
|
45
17
|
}
|
|
46
18
|
},
|
|
47
19
|
"sideEffects": [
|
|
@@ -53,8 +25,8 @@
|
|
|
53
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
54
26
|
},
|
|
55
27
|
"engines": {
|
|
56
|
-
"pnpm": ">=
|
|
57
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
58
30
|
},
|
|
59
31
|
"author": "ICE MT",
|
|
60
32
|
"jestSonar": {
|
|
@@ -65,22 +37,22 @@
|
|
|
65
37
|
},
|
|
66
38
|
"dependencies": {
|
|
67
39
|
"@xstyled/system": "~3.7.3",
|
|
68
|
-
"@elliemae/ds-props-helpers": "3.
|
|
69
|
-
"@elliemae/ds-system": "3.
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.51.0-beta.2",
|
|
41
|
+
"@elliemae/ds-system": "3.51.0-beta.2"
|
|
70
42
|
},
|
|
71
43
|
"devDependencies": {
|
|
72
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
44
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
73
45
|
"@elliemae/pui-theme": "~2.10.0",
|
|
74
46
|
"jest": "~29.7.0",
|
|
75
|
-
"react-test-renderer": "^
|
|
47
|
+
"react-test-renderer": "^18.3.1",
|
|
76
48
|
"styled-components": "~5.3.9",
|
|
77
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.2"
|
|
78
50
|
},
|
|
79
51
|
"peerDependencies": {
|
|
80
52
|
"@elliemae/pui-theme": "~2.10.0",
|
|
81
53
|
"lodash": "^4.17.21",
|
|
82
|
-
"react": "^
|
|
83
|
-
"react-dom": "^
|
|
54
|
+
"react": "^18.3.1",
|
|
55
|
+
"react-dom": "^18.3.1",
|
|
84
56
|
"styled-components": "~5.3.9",
|
|
85
57
|
"styled-system": "^5.1.5"
|
|
86
58
|
},
|