@elliemae/ds-grid 3.35.0 → 3.36.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/GridItem.js.map +1 -1
- package/dist/cjs/config/useRenderChildren.js +1 -2
- package/dist/cjs/config/useRenderChildren.js.map +1 -1
- package/dist/cjs/index.js +0 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +1 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/utils/manageCols.js.map +1 -1
- package/dist/cjs/utils/manageRows.js.map +1 -1
- package/dist/cjs/utils/manageSpanParent.js +2 -4
- package/dist/cjs/utils/manageSpanParent.js.map +1 -1
- package/dist/cjs/utils/styles.js +2 -4
- package/dist/cjs/utils/styles.js.map +1 -1
- package/dist/esm/GridItem.js.map +1 -1
- package/dist/esm/config/useRenderChildren.js +1 -2
- package/dist/esm/config/useRenderChildren.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/utils/manageCols.js.map +1 -1
- package/dist/esm/utils/manageRows.js.map +1 -1
- package/dist/esm/utils/manageSpanParent.js +2 -4
- package/dist/esm/utils/manageSpanParent.js.map +1 -1
- package/dist/esm/utils/styles.js +2 -4
- package/dist/esm/utils/styles.js.map +1 -1
- package/dist/types/config/useGrid.d.ts +23 -23
- package/package.json +5 -5
package/dist/cjs/GridItem.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/GridItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAeO;AACP,8BAAiC;AACjC,wBAA6B;AAC7B,wBAA6B;AAE7B,oBAAmD;AAEnD,MAAM,SAAS;AAAA,IACX,8BAAY;AAAA,IACZ,8BAAY;AAAA,IACZ,wCAAgB;AAAA;AAGpB,MAAM,SAAS;AAAA,IACX,wBAAU;AAAA,IACV,wBAAU;AAAA,IACV,wBAAU;AAAA;AAGP,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA,IAG3B,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,mBAAe,yBAAO,MAAM,CAAC,MAAM,EAAG;AAAA,IAC9E,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,gBAAY,yBAAO,MAAM,CAAC,MAAM,EAAG;AAAA,IAC3E,sBAAK;AAAA,IACL,0BAAS;AAAA,IACT,uBAAM;AAAA,IACN,sBAAK;AAAA,IACL,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS,MAAO;AAAA,IAC5E,2BAAU;AAAA,IACV,wBAAO;AAAA,IACP,2BAAU;AAAA,IACV,uBAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,8 +41,7 @@ const useRenderChildren = (props) => {
|
|
|
41
41
|
const renderChildren = import_react.default.Children.map(children, (child) => {
|
|
42
42
|
if ((0, import_lodash.get)(child, "child.type.name") === "Grid" || (0, import_lodash.get)(child, "type.displayName") === "Grid" || parseInt((0, import_lodash.get)(child, "props.span", "0"), 10) > 0) {
|
|
43
43
|
const { width: wc, height: hc, span } = child.props;
|
|
44
|
-
if (!span)
|
|
45
|
-
isSpanParent = false;
|
|
44
|
+
if (!span) isSpanParent = false;
|
|
46
45
|
return import_react.default.cloneElement(child, {
|
|
47
46
|
...child.props,
|
|
48
47
|
width: (0, import_ds_system.fixSpaceGutter)(wc),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useRenderChildren.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n const { children } = props;\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', '0') as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return { isSpanParent, renderChildren };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAoB;AACpB,uBAA+B;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiB,aAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,YACE,mBAAI,OAAO,iBAAiB,MAAM,cAClC,mBAAI,OAAO,kBAAkB,MAAM,UACnC,aAAS,mBAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAoB;AACpB,uBAA+B;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiB,aAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,YACE,mBAAI,OAAO,iBAAiB,MAAM,cAClC,mBAAI,OAAO,kBAAkB,MAAM,UACnC,aAAS,mBAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC,KAAM,gBAAe;AAE1B,aAAO,aAAAA,QAAM,aAAa,OAA6B;AAAA,QACrD,GAAI,MAA6B;AAAA,QACjC,WAAO,iCAAe,EAAE;AAAA,QACxB,YAAQ,iCAAe,EAAE;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,cAAc,eAAe;AACxC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -41,7 +41,6 @@ __export(src_exports, {
|
|
|
41
41
|
module.exports = __toCommonJS(src_exports);
|
|
42
42
|
var React = __toESM(require("react"));
|
|
43
43
|
var import_Grid = __toESM(require("./Grid.js"));
|
|
44
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
45
44
|
var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
|
|
46
45
|
var src_default = import_Grid.default;
|
|
47
46
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\nexport { type DSGridT } from './react-desc-prop-types.js';\nexport { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from './react-desc-prop-types.js';\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;AAEvC,IAAAC,gCAAyF;AACzF,IAAO,cAAQ,YAAAC;",
|
|
6
6
|
"names": ["Grid", "import_react_desc_prop_types", "Grid"]
|
|
7
7
|
}
|
|
@@ -113,8 +113,7 @@ const DSGridPropTypes = {
|
|
|
113
113
|
};
|
|
114
114
|
const DSCardHeaderPropTypesSchema = DSGridPropTypes;
|
|
115
115
|
const getGridProps = (props) => {
|
|
116
|
-
if (typeof props !== "object" || props === null)
|
|
117
|
-
return {};
|
|
116
|
+
if (typeof props !== "object" || props === null) return {};
|
|
118
117
|
const innerProps = props;
|
|
119
118
|
const innerGridPropTypes = props;
|
|
120
119
|
const filteredProps = {};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n export interface RowColBreakpoints {\n small?: RowOrColsSyntaxSugar[];\n medium?: RowOrColsSyntaxSugar[];\n large?: RowOrColsSyntaxSugar[];\n }\n\n export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n export interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n export type JustifyPlacement =\n | 'flex-start'\n | 'center'\n | 'flex-end'\n | 'space-between'\n | 'space-around'\n | 'space-evenly';\n export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n rows: RowOrColsValidValues;\n cols: RowOrColsValidValues;\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 alignContent?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\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: RowOrColsValidValues;\n cols: RowOrColsValidValues;\n alignItems?: AlignItemsPlacement;\n alignContent?: 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: DSPropTypesSchema<DSGridT.Props> = {\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 justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n if (typeof props !== 'object' || props === null) return {};\n const innerProps = props as Record<string, unknown>;\n const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n const filteredProps: Partial<DSGridT.Props> = {};\n\n Object.keys(innerProps).forEach((key) => {\n const innerKey = key as keyof DSGridT.Props;\n if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n filteredProps[innerKey] = innerProps[innerKey];\n }\n });\n return filteredProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/manageCols.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\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
|
-
"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,
|
|
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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/manageRows.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\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
|
-
"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,
|
|
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
|
}
|
|
@@ -42,8 +42,7 @@ const manageSpanParent = ({
|
|
|
42
42
|
span,
|
|
43
43
|
theme
|
|
44
44
|
}) => {
|
|
45
|
-
if (!isSpanParent)
|
|
46
|
-
return [import_ds_system.css``];
|
|
45
|
+
if (!isSpanParent) return [import_ds_system.css``];
|
|
47
46
|
if (typeof span === "number") {
|
|
48
47
|
return [
|
|
49
48
|
import_ds_system.css`
|
|
@@ -52,8 +51,7 @@ const manageSpanParent = ({
|
|
|
52
51
|
`
|
|
53
52
|
];
|
|
54
53
|
}
|
|
55
|
-
if (typeof span !== "object")
|
|
56
|
-
return [import_ds_system.css``];
|
|
54
|
+
if (typeof span !== "object") return [import_ds_system.css``];
|
|
57
55
|
const finalMediaDeclaration = [];
|
|
58
56
|
if (span.large) {
|
|
59
57
|
const cssString = generateCssStringForSpan(span.large);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/manageSpanParent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateCssStringForSpan = (span: number): string => `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};\n`;\n// This is used to support bootrap like-ish way of using the grid component\nexport const manageSpanParent = ({\n isSpanParent,\n span,\n theme,\n}: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // If it's not a span parent, we don't need to do anything\n if (!isSpanParent) return [css``];\n\n // if span is a number we don't add media queries\n if (typeof span === 'number') {\n return [\n css`\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};\n `,\n ];\n }\n // the only remaining valid definition for our supported types is an object, if it's not an object we fallback to doing nothing\n if (typeof span !== 'object') return [css``];\n\n // Span object\n\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because span definitions supports partial definitions\n // meaning that you can define spans 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 (span.large) {\n const cssString = generateCssStringForSpan(span.large);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n }\n if (span.medium) {\n const cssString = generateCssStringForSpan(span.medium);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n }\n if (span.small) {\n const cssString = generateCssStringForSpan(span.small);\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAoB;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAoB;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B,IAAI;AAAA,6BACR,IAAI;AAAA;AAG1B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AAEzD,MAAI,CAAC,aAAc,QAAO,CAAC,sBAAK;AAGhC,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,MACL;AAAA,uCACiC,IAAI;AAAA,mCACR,IAAI;AAAA;AAAA,IAEnC;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,SAAU,QAAO,CAAC,sBAAK;AAI3C,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,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;AACf,UAAM,YAAY,yBAAyB,KAAK,MAAM;AACtD,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;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils/styles.js
CHANGED
|
@@ -37,15 +37,13 @@ var React = __toESM(require("react"));
|
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
const manageSpan = import_ds_system.css`
|
|
39
39
|
${({ isSpanParent, span, theme }) => {
|
|
40
|
-
if (!isSpanParent)
|
|
41
|
-
return "";
|
|
40
|
+
if (!isSpanParent) return "";
|
|
42
41
|
if (typeof span === "number") {
|
|
43
42
|
return `
|
|
44
43
|
-ms-grid-column: auto / span ${span};
|
|
45
44
|
grid-column: auto / span ${span};`;
|
|
46
45
|
}
|
|
47
|
-
if (typeof span !== "object")
|
|
48
|
-
return ``;
|
|
46
|
+
if (typeof span !== "object") return ``;
|
|
49
47
|
let data = "";
|
|
50
48
|
Object.keys(theme.media).forEach((key) => {
|
|
51
49
|
const theKey = key;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n ${({ isSpanParent, span, theme }) => {\n if (!isSpanParent) return '';\n\n if (typeof span === 'number') {\n return `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};`;\n }\n\n if (typeof span !== 'object') return ``;\n\n // Span object\n\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n // Type castings\n const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n const spanValue = span[theKey];\n\n if (!!spanValue && theme.breakpoints[theKey]) {\n if (theKey === 'small') {\n data += `\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n `;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n }`;\n }\n }\n });\n return data;\n }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n ${({ cols, theme, isSpanParent }) => {\n if (typeof cols === 'object' && !Array.isArray(cols)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof cols;\n const colValue = cols[theKey];\n if (!!colValue && Array.isArray(colValue)) {\n const mtg = (mapTemplateGrid(colValue as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colValue as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .join(' ');\n if (theKey === 'small') {\n data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!colValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(cols)) {\n const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n }\n if (isSpanParent) {\n return `\n -ms-grid-columns: repeat(${cols}, 1fr);\n grid-template-columns: repeat(${cols}, 1fr);`;\n }\n return '';\n }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n ${({ rows, theme, isSpanParent }) => {\n if (typeof rows === 'object' && !Array.isArray(rows)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n const rowValue = rows[theKey];\n if (rowValue && Array.isArray(rowValue)) {\n const mtg = (mapTemplateGrid(rowValue as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowValue as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .join(' ');\n if (key === 'small') {\n data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!rowValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(rows)) {\n const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n `;\n }\n if (isSpanParent) {\n return `\n -ms-grid-rows: repeat(${rows}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);`;\n }\n return '';\n }}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAqC;AAG9B,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,MAAM,MAAM;AACnC,MAAI,CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAqC;AAG9B,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,MAAM,MAAM;AACnC,MAAI,CAAC,aAAc,QAAO;AAE1B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,uCAC0B,IAAI;AAAA,mCACR,IAAI;AAAA,EACnC;AAEA,MAAI,OAAO,SAAS,SAAU,QAAO;AAIrC,MAAI,OAAO;AACX,SAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAExC,UAAM,SAAS;AACf,UAAM,YAAY,KAAK,MAAM;AAE7B,QAAI,CAAC,CAAC,aAAa,MAAM,YAAY,MAAM,GAAG;AAC5C,UAAI,WAAW,SAAS;AACtB,gBAAQ;AAAA,2CACyB,SAAS;AAAA,uCACb,SAAS;AAAA;AAAA,MAExC,OAAO;AACL,gBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,mDACd,SAAS;AAAA,+CACb,SAAS;AAAA;AAAA,MAEhD;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,aAAa,MAAM;AACnC,MAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,GAAG;AACpD,QAAI,OAAO;AACX,WAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AACxC,YAAM,SAAS;AACf,YAAM,WAAW,KAAK,MAAM;AAC5B,UAAI,CAAC,CAAC,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACzC,cAAM,UAAO,kCAAgB,QAAwC,EAAe,KAAK,GAAG;AAC5F,cAAM,WAAQ,kCAAgB,QAAwC,EACnE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,YAAI,WAAW,SAAS;AACtB,kBAAQ,qBAAqB,OAAO,kBAAkB;AAAA,+CACnB,OAAO,MAAM;AAAA,0CAClB,QAAQ,kBAAkB;AAAA,+CACrB,QAAQ,MAAM;AAAA,QACnD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,0CACzB,OAAO,kBAAkB;AAAA,+CACpB,OAAO,MAAM;AAAA,0CAClB,QAAQ,kBAAkB;AAAA,+CACrB,QAAQ,MAAM;AAAA;AAAA,QAEnD;AAAA,MACF,WAAW,CAAC,CAAC,YAAY,cAAc;AACrC,YAAI,WAAW,SAAS;AACtB,kBAAQ,4BAA4B,QAAQ;AAAA,qDACH,QAAQ;AAAA,QACnD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,iDAClB,QAAQ;AAAA,sDACH,QAAQ;AAAA;AAAA,QAEpD;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,UAAO,kCAAgB,IAAI,EAAe,KAAK,GAAG;AACxD,UAAM,WAAQ,kCAAgB,IAAI,EAAe,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG;AACvF,WAAO;AAAA,4BACe,OAAO,kBAAkB;AAAA,iCACpB,OAAO,MAAM;AAAA,4BAClB,QAAQ,kBAAkB;AAAA,iCACrB,QAAQ,MAAM;AAAA,EAC3C;AACA,MAAI,cAAc;AAChB,WAAO;AAAA,mCACsB,IAAI;AAAA,wCACC,IAAI;AAAA,EACxC;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,aAAa,MAAM;AACnC,MAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,GAAG;AACpD,QAAI,OAAO;AACX,WAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AACxC,YAAM,SAAS;AACf,YAAM,WAAW,KAAK,MAAM;AAC5B,UAAI,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACvC,cAAM,UAAO,kCAAgB,QAAwC,EAAe,KAAK,GAAG;AAC5F,cAAM,WAAQ,kCAAgB,QAAwC,EACnE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,YAAI,QAAQ,SAAS;AACnB,kBAAQ,kBAAkB,OAAO,kBAAkB;AAAA,4CACnB,OAAO,MAAM;AAAA,uCAClB,QAAQ,kBAAkB;AAAA,4CACrB,QAAQ,MAAM;AAAA,QAChD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,uCAC5B,OAAO,kBAAkB;AAAA,4CACpB,OAAO,MAAM;AAAA,uCAClB,QAAQ,kBAAkB;AAAA,4CACrB,QAAQ,MAAM;AAAA;AAAA,QAEhD;AAAA,MACF,WAAW,CAAC,CAAC,YAAY,cAAc;AACrC,YAAI,WAAW,SAAS;AACtB,kBAAQ,yBAAyB,QAAQ;AAAA,kDACH,QAAQ;AAAA,QAChD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,8CACrB,QAAQ;AAAA,mDACH,QAAQ;AAAA;AAAA,QAEjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,UAAO,kCAAgB,IAAI,EAAe,KAAK,GAAG;AACxD,UAAM,WAAQ,kCAAgB,IAAI,EAAe,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG;AACvF,WAAO;AAAA,yBACY,OAAO,kBAAkB;AAAA,8BACpB,OAAO,MAAM;AAAA,yBAClB,QAAQ,kBAAkB;AAAA,8BACrB,QAAQ,MAAM;AAAA;AAAA,EAExC;AACA,MAAI,cAAc;AAChB,WAAO;AAAA,gCACmB,IAAI;AAAA,qCACC,IAAI;AAAA,EACrC;AACA,SAAO;AACT,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/GridItem.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/GridItem.tsx"],
|
|
4
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,
|
|
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,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAGpB,MAAM,SAAS;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA;AAGP,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,IAG3B,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,eAAe,OAAO,MAAM,CAAC,MAAM,EAAG;AAAA,IAC9E,CAAC,EAAE,OAAO,MAAO,WAAW,SAAY,YAAY,OAAO,MAAM,CAAC,MAAM,EAAG;AAAA,IAC3E,KAAK;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS,MAAO;AAAA,IAC5E,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,8 +8,7 @@ const useRenderChildren = (props) => {
|
|
|
8
8
|
const renderChildren = React2.Children.map(children, (child) => {
|
|
9
9
|
if (get(child, "child.type.name") === "Grid" || get(child, "type.displayName") === "Grid" || parseInt(get(child, "props.span", "0"), 10) > 0) {
|
|
10
10
|
const { width: wc, height: hc, span } = child.props;
|
|
11
|
-
if (!span)
|
|
12
|
-
isSpanParent = false;
|
|
11
|
+
if (!span) isSpanParent = false;
|
|
13
12
|
return React2.cloneElement(child, {
|
|
14
13
|
...child.props,
|
|
15
14
|
width: fixSpaceGutter(wc),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useRenderChildren.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n const { children } = props;\n let isSpanParent = true;\n\n const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n if (\n get(child, 'child.type.name') === 'Grid' ||\n get(child, 'type.displayName') === 'Grid' ||\n parseInt(get(child, 'props.span', '0') as string, 10) > 0\n ) {\n const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n if (!span) isSpanParent = false;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(child as React.ReactElement, {\n ...(child as React.ReactElement).props,\n width: fixSpaceGutter(wc),\n height: fixSpaceGutter(hc),\n });\n }\n return child;\n });\n\n return { isSpanParent, renderChildren };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiBA,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,iBAAiB,MAAM,UAClC,IAAI,OAAO,kBAAkB,MAAM,UACnC,SAAS,IAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiBA,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,iBAAiB,MAAM,UAClC,IAAI,OAAO,kBAAkB,MAAM,UACnC,SAAS,IAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC,KAAM,gBAAe;AAE1B,aAAOA,OAAM,aAAa,OAA6B;AAAA,QACrD,GAAI,MAA6B;AAAA,QACjC,OAAO,eAAe,EAAE;AAAA,QACxB,QAAQ,eAAe,EAAE;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,cAAc,eAAe;AACxC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import Grid, { DSGridWithSchema } from "./Grid.js";
|
|
3
|
-
import {} from "./react-desc-prop-types.js";
|
|
4
3
|
import { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from "./react-desc-prop-types.js";
|
|
5
4
|
var src_default = Grid;
|
|
6
5
|
export {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\nexport { type DSGridT } from './react-desc-prop-types.js';\nexport { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from './react-desc-prop-types.js';\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,QAAQ,wBAAwB;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,QAAQ,wBAAwB;AAEvC,SAAS,cAAc,iBAAiB,6BAA6B,oBAAoB;AACzF,IAAO,cAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -77,8 +77,7 @@ const DSGridPropTypes = {
|
|
|
77
77
|
};
|
|
78
78
|
const DSCardHeaderPropTypesSchema = DSGridPropTypes;
|
|
79
79
|
const getGridProps = (props) => {
|
|
80
|
-
if (typeof props !== "object" || props === null)
|
|
81
|
-
return {};
|
|
80
|
+
if (typeof props !== "object" || props === null) return {};
|
|
82
81
|
const innerProps = props;
|
|
83
82
|
const innerGridPropTypes = props;
|
|
84
83
|
const filteredProps = {};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n export interface RowColBreakpoints {\n small?: RowOrColsSyntaxSugar[];\n medium?: RowOrColsSyntaxSugar[];\n large?: RowOrColsSyntaxSugar[];\n }\n\n export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n export interface SpanBreakpoints {\n small?: number;\n medium?: number;\n large?: number;\n }\n\n export type JustifyPlacement =\n | 'flex-start'\n | 'center'\n | 'flex-end'\n | 'space-between'\n | 'space-around'\n | 'space-evenly';\n export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n rows: RowOrColsValidValues;\n cols: RowOrColsValidValues;\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 alignContent?: AlignItemsPlacement;\n children?: React.ReactNode;\n withMaxWidthBreakpoints?: boolean;\n rowGap?: string | number;\n gutter?: string | number;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\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: RowOrColsValidValues;\n cols: RowOrColsValidValues;\n alignItems?: AlignItemsPlacement;\n alignContent?: 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: DSPropTypesSchema<DSGridT.Props> = {\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 justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n if (typeof props !== 'object' || props === null) return {};\n const innerProps = props as Record<string, unknown>;\n const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n const filteredProps: Partial<DSGridT.Props> = {};\n\n Object.keys(innerProps).forEach((key) => {\n const innerKey = key as keyof DSGridT.Props;\n if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n filteredProps[innerKey] = innerProps[innerKey];\n }\n });\n return filteredProps;\n};\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageCols.tsx"],
|
|
4
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 { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\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
|
-
"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,
|
|
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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageRows.tsx"],
|
|
4
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 { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\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
|
-
"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,
|
|
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
|
}
|
|
@@ -9,8 +9,7 @@ const manageSpanParent = ({
|
|
|
9
9
|
span,
|
|
10
10
|
theme
|
|
11
11
|
}) => {
|
|
12
|
-
if (!isSpanParent)
|
|
13
|
-
return [css``];
|
|
12
|
+
if (!isSpanParent) return [css``];
|
|
14
13
|
if (typeof span === "number") {
|
|
15
14
|
return [
|
|
16
15
|
css`
|
|
@@ -19,8 +18,7 @@ const manageSpanParent = ({
|
|
|
19
18
|
`
|
|
20
19
|
];
|
|
21
20
|
}
|
|
22
|
-
if (typeof span !== "object")
|
|
23
|
-
return [css``];
|
|
21
|
+
if (typeof span !== "object") return [css``];
|
|
24
22
|
const finalMediaDeclaration = [];
|
|
25
23
|
if (span.large) {
|
|
26
24
|
const cssString = generateCssStringForSpan(span.large);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageSpanParent.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\ntype InterpolatedFunctionProps = {\n theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateCssStringForSpan = (span: number): string => `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};\n`;\n// This is used to support bootrap like-ish way of using the grid component\nexport const manageSpanParent = ({\n isSpanParent,\n span,\n theme,\n}: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n // If it's not a span parent, we don't need to do anything\n if (!isSpanParent) return [css``];\n\n // if span is a number we don't add media queries\n if (typeof span === 'number') {\n return [\n css`\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};\n `,\n ];\n }\n // the only remaining valid definition for our supported types is an object, if it's not an object we fallback to doing nothing\n if (typeof span !== 'object') return [css``];\n\n // Span object\n\n const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n // we conditionally push into the array the media queries because span definitions supports partial definitions\n // meaning that you can define spans 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 (span.large) {\n const cssString = generateCssStringForSpan(span.large);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.large`${cssString}`);\n }\n if (span.medium) {\n const cssString = generateCssStringForSpan(span.medium);\n if (finalMediaDeclaration.length === 0)\n finalMediaDeclaration.push(css`\n ${cssString}\n `);\n finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n }\n if (span.small) {\n const cssString = generateCssStringForSpan(span.small);\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B,IAAI;AAAA,6BACR,IAAI;AAAA;AAG1B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AAEzD,MAAI,CAAC,aAAc,QAAO,CAAC,KAAK;AAGhC,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,MACL;AAAA,uCACiC,IAAI;AAAA,mCACR,IAAI;AAAA;AAAA,IAEnC;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,SAAU,QAAO,CAAC,KAAK;AAI3C,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,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;AACf,UAAM,YAAY,yBAAyB,KAAK,MAAM;AACtD,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;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB,KAAK;AAAA,UACvB,SAAS;AAAA,OACZ;AACH,0BAAsB,KAAK,MAAM,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC5D;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils/styles.js
CHANGED
|
@@ -2,15 +2,13 @@ import * as React from "react";
|
|
|
2
2
|
import { css, mapTemplateGrid } from "@elliemae/ds-system";
|
|
3
3
|
const manageSpan = css`
|
|
4
4
|
${({ isSpanParent, span, theme }) => {
|
|
5
|
-
if (!isSpanParent)
|
|
6
|
-
return "";
|
|
5
|
+
if (!isSpanParent) return "";
|
|
7
6
|
if (typeof span === "number") {
|
|
8
7
|
return `
|
|
9
8
|
-ms-grid-column: auto / span ${span};
|
|
10
9
|
grid-column: auto / span ${span};`;
|
|
11
10
|
}
|
|
12
|
-
if (typeof span !== "object")
|
|
13
|
-
return ``;
|
|
11
|
+
if (typeof span !== "object") return ``;
|
|
14
12
|
let data = "";
|
|
15
13
|
Object.keys(theme.media).forEach((key) => {
|
|
16
14
|
const theKey = key;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/restrict-template-expressions */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n ${({ isSpanParent, span, theme }) => {\n if (!isSpanParent) return '';\n\n if (typeof span === 'number') {\n return `\n -ms-grid-column: auto / span ${span};\n grid-column: auto / span ${span};`;\n }\n\n if (typeof span !== 'object') return ``;\n\n // Span object\n\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n // Type castings\n const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n const spanValue = span[theKey];\n\n if (!!spanValue && theme.breakpoints[theKey]) {\n if (theKey === 'small') {\n data += `\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n `;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-column: auto / span ${spanValue};\n grid-column: auto / span ${spanValue};\n }`;\n }\n }\n });\n return data;\n }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n ${({ cols, theme, isSpanParent }) => {\n if (typeof cols === 'object' && !Array.isArray(cols)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof cols;\n const colValue = cols[theKey];\n if (!!colValue && Array.isArray(colValue)) {\n const mtg = (mapTemplateGrid(colValue as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(colValue as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .join(' ');\n if (theKey === 'small') {\n data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!colValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-columns: repeat(${colValue}, 1fr);\n grid-template-columns: repeat(${colValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(cols)) {\n const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtg || 'auto'};\n -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-columns: ${mtgs || 'auto'};`;\n }\n if (isSpanParent) {\n return `\n -ms-grid-columns: repeat(${cols}, 1fr);\n grid-template-columns: repeat(${cols}, 1fr);`;\n }\n return '';\n }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n ${({ rows, theme, isSpanParent }) => {\n if (typeof rows === 'object' && !Array.isArray(rows)) {\n let data = '';\n Object.keys(theme.media).forEach((key) => {\n const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n const rowValue = rows[theKey];\n if (rowValue && Array.isArray(rowValue)) {\n const mtg = (mapTemplateGrid(rowValue as DSGridT.RowOrColsSyntaxSugar) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rowValue as DSGridT.RowOrColsSyntaxSugar) as string[])\n .map((c) => `minmax(0, ${c})`)\n .join(' ');\n if (key === 'small') {\n data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n }`;\n }\n } else if (!!rowValue && isSpanParent) {\n if (theKey === 'small') {\n data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);`;\n } else {\n data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n -ms-grid-rows: repeat(${rowValue}, 1fr);\n grid-template-rows: repeat(${rowValue}, 1fr);\n }`;\n }\n }\n });\n return data;\n }\n if (Array.isArray(rows)) {\n const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n return `\n -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtg || 'auto'};\n -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n grid-template-rows: ${mtgs || 'auto'};\n `;\n }\n if (isSpanParent) {\n return `\n -ms-grid-rows: repeat(${rows}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);`;\n }\n return '';\n }}\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,uBAAuB;AAG9B,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,MAAM,MAAM;AACnC,MAAI,CAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,uBAAuB;AAG9B,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,cAAc,MAAM,MAAM,MAAM;AACnC,MAAI,CAAC,aAAc,QAAO;AAE1B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,uCAC0B,IAAI;AAAA,mCACR,IAAI;AAAA,EACnC;AAEA,MAAI,OAAO,SAAS,SAAU,QAAO;AAIrC,MAAI,OAAO;AACX,SAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAExC,UAAM,SAAS;AACf,UAAM,YAAY,KAAK,MAAM;AAE7B,QAAI,CAAC,CAAC,aAAa,MAAM,YAAY,MAAM,GAAG;AAC5C,UAAI,WAAW,SAAS;AACtB,gBAAQ;AAAA,2CACyB,SAAS;AAAA,uCACb,SAAS;AAAA;AAAA,MAExC,OAAO;AACL,gBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,mDACd,SAAS;AAAA,+CACb,SAAS;AAAA;AAAA,MAEhD;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,aAAa,MAAM;AACnC,MAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,GAAG;AACpD,QAAI,OAAO;AACX,WAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AACxC,YAAM,SAAS;AACf,YAAM,WAAW,KAAK,MAAM;AAC5B,UAAI,CAAC,CAAC,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACzC,cAAM,MAAO,gBAAgB,QAAwC,EAAe,KAAK,GAAG;AAC5F,cAAM,OAAQ,gBAAgB,QAAwC,EACnE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,YAAI,WAAW,SAAS;AACtB,kBAAQ,qBAAqB,OAAO,kBAAkB;AAAA,+CACnB,OAAO,MAAM;AAAA,0CAClB,QAAQ,kBAAkB;AAAA,+CACrB,QAAQ,MAAM;AAAA,QACnD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,0CACzB,OAAO,kBAAkB;AAAA,+CACpB,OAAO,MAAM;AAAA,0CAClB,QAAQ,kBAAkB;AAAA,+CACrB,QAAQ,MAAM;AAAA;AAAA,QAEnD;AAAA,MACF,WAAW,CAAC,CAAC,YAAY,cAAc;AACrC,YAAI,WAAW,SAAS;AACtB,kBAAQ,4BAA4B,QAAQ;AAAA,qDACH,QAAQ;AAAA,QACnD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,iDAClB,QAAQ;AAAA,sDACH,QAAQ;AAAA;AAAA,QAEpD;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,MAAO,gBAAgB,IAAI,EAAe,KAAK,GAAG;AACxD,UAAM,OAAQ,gBAAgB,IAAI,EAAe,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG;AACvF,WAAO;AAAA,4BACe,OAAO,kBAAkB;AAAA,iCACpB,OAAO,MAAM;AAAA,4BAClB,QAAQ,kBAAkB;AAAA,iCACrB,QAAQ,MAAM;AAAA,EAC3C;AACA,MAAI,cAAc;AAChB,WAAO;AAAA,mCACsB,IAAI;AAAA,wCACC,IAAI;AAAA,EACxC;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,aAAa;AAAA,IACtB,CAAC,EAAE,MAAM,OAAO,aAAa,MAAM;AACnC,MAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,GAAG;AACpD,QAAI,OAAO;AACX,WAAO,KAAK,MAAM,KAAK,EAAE,QAAQ,CAAC,QAAQ;AACxC,YAAM,SAAS;AACf,YAAM,WAAW,KAAK,MAAM;AAC5B,UAAI,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACvC,cAAM,MAAO,gBAAgB,QAAwC,EAAe,KAAK,GAAG;AAC5F,cAAM,OAAQ,gBAAgB,QAAwC,EACnE,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAC5B,KAAK,GAAG;AACX,YAAI,QAAQ,SAAS;AACnB,kBAAQ,kBAAkB,OAAO,kBAAkB;AAAA,4CACnB,OAAO,MAAM;AAAA,uCAClB,QAAQ,kBAAkB;AAAA,4CACrB,QAAQ,MAAM;AAAA,QAChD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,uCAC5B,OAAO,kBAAkB;AAAA,4CACpB,OAAO,MAAM;AAAA,uCAClB,QAAQ,kBAAkB;AAAA,4CACrB,QAAQ,MAAM;AAAA;AAAA,QAEhD;AAAA,MACF,WAAW,CAAC,CAAC,YAAY,cAAc;AACrC,YAAI,WAAW,SAAS;AACtB,kBAAQ,yBAAyB,QAAQ;AAAA,kDACH,QAAQ;AAAA,QAChD,OAAO;AACL,kBAAQ,sBAAsB,MAAM,YAAY,MAAM,CAAC;AAAA,8CACrB,QAAQ;AAAA,mDACH,QAAQ;AAAA;AAAA,QAEjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,MAAO,gBAAgB,IAAI,EAAe,KAAK,GAAG;AACxD,UAAM,OAAQ,gBAAgB,IAAI,EAAe,IAAI,CAAC,MAAM,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG;AACvF,WAAO;AAAA,yBACY,OAAO,kBAAkB;AAAA,8BACpB,OAAO,MAAM;AAAA,yBAClB,QAAQ,kBAAkB;AAAA,8BACrB,QAAQ,MAAM;AAAA;AAAA,EAExC;AACA,MAAI,cAAc;AAChB,WAAO;AAAA,gCACmB,IAAI;AAAA,qCACC,IAAI;AAAA,EACrC;AACA,SAAO;AACT,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,13 +3,19 @@ import type { DSGridT } from '../react-desc-prop-types.js';
|
|
|
3
3
|
export declare const useGrid: (props: DSGridT.Props) => {
|
|
4
4
|
propsWithDefaults: DSGridT.InternalProps;
|
|
5
5
|
globalProps: Partial<Pick<object, "wrap" | "rows" | "cols" | "className" | "span" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode"> & Omit<{
|
|
6
|
-
|
|
6
|
+
wrap?: string | undefined;
|
|
7
|
+
rows?: number | undefined;
|
|
8
|
+
cols?: number | undefined;
|
|
9
|
+
className?: string | undefined;
|
|
10
|
+
span?: number | undefined;
|
|
11
|
+
form?: string | undefined;
|
|
12
|
+
list?: string | undefined;
|
|
7
13
|
"aria-activedescendant"?: string | undefined;
|
|
8
|
-
"aria-atomic"?: boolean | "true" | "false" | undefined;
|
|
14
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
9
15
|
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
10
16
|
"aria-braillelabel"?: string | undefined;
|
|
11
17
|
"aria-brailleroledescription"?: string | undefined;
|
|
12
|
-
"aria-busy"?: boolean | "true" | "false" | undefined;
|
|
18
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
13
19
|
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
14
20
|
"aria-colcount"?: number | undefined;
|
|
15
21
|
"aria-colindex"?: number | undefined;
|
|
@@ -20,37 +26,37 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
20
26
|
"aria-describedby"?: string | undefined;
|
|
21
27
|
"aria-description"?: string | undefined;
|
|
22
28
|
"aria-details"?: string | undefined;
|
|
23
|
-
"aria-disabled"?: boolean | "true" | "false" | undefined;
|
|
29
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
24
30
|
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
25
31
|
"aria-errormessage"?: string | undefined;
|
|
26
|
-
"aria-expanded"?: boolean | "true" | "false" | undefined;
|
|
32
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
27
33
|
"aria-flowto"?: string | undefined;
|
|
28
|
-
"aria-grabbed"?: boolean | "true" | "false" | undefined;
|
|
34
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
29
35
|
"aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
|
|
30
|
-
"aria-hidden"?: boolean | "true" | "false" | undefined;
|
|
36
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
31
37
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
32
38
|
"aria-keyshortcuts"?: string | undefined;
|
|
33
39
|
"aria-label"?: string | undefined;
|
|
34
40
|
"aria-labelledby"?: string | undefined;
|
|
35
41
|
"aria-level"?: number | undefined;
|
|
36
42
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
37
|
-
"aria-modal"?: boolean | "true" | "false" | undefined;
|
|
38
|
-
"aria-multiline"?: boolean | "true" | "false" | undefined;
|
|
39
|
-
"aria-multiselectable"?: boolean | "true" | "false" | undefined;
|
|
43
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
44
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
45
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
40
46
|
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
41
47
|
"aria-owns"?: string | undefined;
|
|
42
48
|
"aria-placeholder"?: string | undefined;
|
|
43
49
|
"aria-posinset"?: number | undefined;
|
|
44
50
|
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
45
|
-
"aria-readonly"?: boolean | "true" | "false" | undefined;
|
|
51
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
46
52
|
"aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
47
|
-
"aria-required"?: boolean | "true" | "false" | undefined;
|
|
53
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
48
54
|
"aria-roledescription"?: string | undefined;
|
|
49
55
|
"aria-rowcount"?: number | undefined;
|
|
50
56
|
"aria-rowindex"?: number | undefined;
|
|
51
57
|
"aria-rowindextext"?: string | undefined;
|
|
52
58
|
"aria-rowspan"?: number | undefined;
|
|
53
|
-
"aria-selected"?: boolean | "true" | "false" | undefined;
|
|
59
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
54
60
|
"aria-setsize"?: number | undefined;
|
|
55
61
|
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
56
62
|
"aria-valuemax"?: number | undefined;
|
|
@@ -218,25 +224,22 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
218
224
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
219
225
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
220
226
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
221
|
-
form?: string | undefined;
|
|
222
|
-
list?: string | undefined;
|
|
223
227
|
defaultChecked?: boolean | undefined;
|
|
224
228
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
225
229
|
suppressContentEditableWarning?: boolean | undefined;
|
|
226
230
|
suppressHydrationWarning?: boolean | undefined;
|
|
227
231
|
accessKey?: string | undefined;
|
|
228
232
|
autoFocus?: boolean | undefined;
|
|
229
|
-
|
|
230
|
-
contentEditable?: boolean | "true" | "false" | "inherit" | "plaintext-only" | undefined;
|
|
233
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
231
234
|
contextMenu?: string | undefined;
|
|
232
235
|
dir?: string | undefined;
|
|
233
|
-
draggable?: boolean | "true" | "false" | undefined;
|
|
236
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
234
237
|
hidden?: boolean | undefined;
|
|
235
238
|
id?: string | undefined;
|
|
236
239
|
lang?: string | undefined;
|
|
237
240
|
nonce?: string | undefined;
|
|
238
241
|
slot?: string | undefined;
|
|
239
|
-
spellCheck?: boolean | "true" | "false" | undefined;
|
|
242
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
240
243
|
style?: import("react").CSSProperties | undefined;
|
|
241
244
|
tabIndex?: 0 | -1 | undefined;
|
|
242
245
|
title?: string | undefined;
|
|
@@ -285,7 +288,6 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
285
288
|
checked?: boolean | undefined;
|
|
286
289
|
cite?: string | undefined;
|
|
287
290
|
classID?: string | undefined;
|
|
288
|
-
cols?: number | undefined;
|
|
289
291
|
colSpan?: number | undefined;
|
|
290
292
|
controls?: boolean | undefined;
|
|
291
293
|
coords?: string | undefined;
|
|
@@ -329,6 +331,7 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
329
331
|
minLength?: number | undefined;
|
|
330
332
|
multiple?: boolean | undefined;
|
|
331
333
|
muted?: boolean | undefined;
|
|
334
|
+
name?: string | undefined;
|
|
332
335
|
noValidate?: boolean | undefined;
|
|
333
336
|
open?: boolean | undefined;
|
|
334
337
|
optimum?: number | undefined;
|
|
@@ -340,7 +343,6 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
340
343
|
readOnly?: boolean | undefined;
|
|
341
344
|
required?: boolean | undefined;
|
|
342
345
|
reversed?: boolean | undefined;
|
|
343
|
-
rows?: number | undefined;
|
|
344
346
|
rowSpan?: number | undefined;
|
|
345
347
|
sandbox?: string | undefined;
|
|
346
348
|
scope?: string | undefined;
|
|
@@ -351,7 +353,6 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
351
353
|
shape?: string | undefined;
|
|
352
354
|
size?: number | undefined;
|
|
353
355
|
sizes?: string | undefined;
|
|
354
|
-
span?: number | undefined;
|
|
355
356
|
src?: string | undefined;
|
|
356
357
|
srcDoc?: string | undefined;
|
|
357
358
|
srcLang?: string | undefined;
|
|
@@ -365,7 +366,6 @@ export declare const useGrid: (props: DSGridT.Props) => {
|
|
|
365
366
|
value?: string | number | readonly string[] | undefined;
|
|
366
367
|
width?: string | number | undefined;
|
|
367
368
|
wmode?: string | undefined;
|
|
368
|
-
wrap?: string | undefined;
|
|
369
369
|
}, never>>;
|
|
370
370
|
xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
|
|
371
371
|
isSpanParent: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-grid",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Grid",
|
|
6
6
|
"files": [
|
|
@@ -65,16 +65,16 @@
|
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@xstyled/system": "~3.7.3",
|
|
68
|
-
"@elliemae/ds-props-helpers": "3.
|
|
69
|
-
"@elliemae/ds-
|
|
70
|
-
"@elliemae/ds-
|
|
68
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
69
|
+
"@elliemae/ds-utilities": "3.36.0-next.1",
|
|
70
|
+
"@elliemae/ds-system": "3.36.0-next.1"
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
74
74
|
"@elliemae/pui-theme": "~2.9.3",
|
|
75
75
|
"react-test-renderer": "~17.0.2",
|
|
76
76
|
"styled-components": "~5.3.9",
|
|
77
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
77
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"@elliemae/pui-theme": "~2.9.3",
|