@elliemae/ds-grid 3.0.0-next.1 → 3.0.0-next.13

package/dist/esm/Grid.js

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2 from "react";
+import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { get } from "lodash";
+import { fixSpaceGutter } from "@elliemae/ds-system";
+import { DSGridPropTypes, defaultProps } from "./react-desc-prop-types";
+import { GridItem } from "./GridItem";
+const Grid = React2.forwardRef((props, ref) => {
+  const _a = props, { children } = _a, propsWithoutChildren = __objRest(_a, ["children"]);
+  const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);
+  const _b = propsWithDefaults, { rows, cols, alignItems, className, justify, gutter, wrap, width, height } = _b, rest = __objRest(_b, ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"]);
+  let isSpanParent = true;
+  const renderChildren = React2.Children.map(children, (child) => {
+    if (get(child, "child.type.name") === "Grid" || get(child, "type.displayName") === "Grid" || parseInt(get(child, "props.span", 0), 10) > 0) {
+      const { width: wc, height: hc, span } = child.props;
+      if (!span)
+        isSpanParent = false;
+      return React2.cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        width: fixSpaceGutter(wc),
+        height: fixSpaceGutter(hc)
+      }));
+    }
+    return child;
+  });
+  return /* @__PURE__ */ React2.createElement(GridItem, __spreadProps(__spreadValues({
+    alignItems,
+    className,
+    cols,
+    gutter,
+    isSpanParent,
+    justify,
+    rows,
+    wrap,
+    childNumber: React2.Children.count(children),
+    ref
+  }, rest), {
+    w: width,
+    h: height
+  }), renderChildren);
+});
+Grid.displayName = "Grid";
+Grid.propTypes = DSGridPropTypes;
+const DSGridWithSchema = describe(Grid);
+DSGridWithSchema.propTypes = DSGridPropTypes;
+var Grid_default = Grid;
+export {
+  DSGridWithSchema,
+  Grid,
+  Grid_default as default
+};
+//# sourceMappingURL=Grid.js.map

package/dist/esm/Grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Grid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { DSGridT, DSGridPropTypes, defaultProps } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n  const { children, ...propsWithoutChildren } = props;\n  const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);\n\n  const { rows, cols, alignItems, className, justify, gutter, wrap, width, height, ...rest } = propsWithDefaults;\n\n  let isSpanParent = true;\n\n  const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n    if (\n      get(child, 'child.type.name') === 'Grid' ||\n      get(child, 'type.displayName') === 'Grid' ||\n      parseInt(get(child, 'props.span', 0) as string, 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n      if (!span) isSpanParent = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      return React.cloneElement(child as React.ReactElement, {\n        ...(child as React.ReactElement).props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return (\n    <GridItem\n      alignItems={alignItems}\n      className={className}\n      cols={cols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={rows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      ref={ref}\n      {...rest}\n      w={width}\n      h={height}\n    >\n      {renderChildren}\n    </GridItem>\n  );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAA8C,YAAtC,eAAsC,IAAzB,iCAAyB,IAAzB,CAAb;AACR,QAAM,oBAAoB,6BAA6B,sBAAsB;AAE7E,QAA6F,wBAArF,QAAM,MAAM,YAAY,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAoB,IAAT,iBAAS,IAAT,CAA5E,QAAM,QAAM,cAAY,aAAW,WAAS,UAAQ,QAAM,SAAO;AAEzE,MAAI,eAAe;AAEnB,QAAM,iBAAiB,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,uBAAuB,UAClC,IAAI,OAAO,wBAAwB,UACnC,SAAS,IAAI,OAAO,cAAc,IAAc,MAAM,GACtD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAU,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,OAAM,aAAa,OAA6B,iCACjD,MAA6B,QADoB;AAAA,QAErD,OAAO,eAAe;AAAA,QACtB,QAAQ,eAAe;AAAA;AAAA;AAG3B,WAAO;AAAA;AAGT,SACE,qCAAC,UAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,OAAM,SAAS,MAAM;AAAA,IAClC;AAAA,KACI,OAXN;AAAA,IAYE,GAAG;AAAA,IACH,GAAG;AAAA,MAEF;AAAA;AAMP,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS;AAClC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "names": []
+}

package/dist/esm/GridItem.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import styled from "styled-components";
+import {
+  space,
+  width,
+  height,
+  flexboxes,
+  grids,
+  sizing
+} from "@xstyled/styled-components";
+import { mapGap } from "@elliemae/ds-system";
+import { manageCols, manageRows, manageSpan } from "./utils/styles";
+const GridItem = styled.div`
+  display: grid;
+  display: -ms-grid;
+  column-gap: ${({ gutter }) => mapGap(gutter)};
+  row-gap: ${({ gutter }) => mapGap(gutter)};
+  ${grids}
+  ${flexboxes}
+  ${sizing}
+  ${space}
+  ${height}
+  ${width}
+  ${manageCols}
+  ${manageRows}
+  ${manageSpan}
+`;
+export {
+  GridItem
+};
+//# sourceMappingURL=GridItem.js.map

package/dist/esm/GridItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GridItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport {\n  space,\n  width,\n  height,\n  flexboxes,\n  grids,\n  sizing,\n  LayoutProps,\n  SpaceProps,\n  SizingProps,\n} from '@xstyled/styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n  display: grid;\n  display: -ms-grid;\n  column-gap: ${({ gutter }) => mapGap(gutter)};\n  row-gap: ${({ gutter }) => mapGap(gutter)};\n  ${grids}\n  ${flexboxes}\n  ${sizing}\n  ${space}\n  ${height}\n  ${width}\n  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n`;\n"],
+  "mappings": "AAAA;ACEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,aAAa,OAAO;AAAA,aAC1B,CAAC,EAAE,aAAa,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { default as default2, Grid, default as default3, default as default4, DSGridWithSchema } from "./Grid";
+export {
+  DSGridWithSchema,
+  Grid,
+  default3 as GridContainer,
+  default4 as GridItem,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, Grid, default as GridContainer, default as GridItem, DSGridWithSchema } from './Grid';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import {
+  PropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { alignItemsPlacement, justifyPlacement, wrap } from "./utils/constants";
+const defaultProps = {
+  rows: [],
+  cols: [],
+  className: "",
+  justify: "flex-start",
+  gutter: 0,
+  wrap: "wrap",
+  span: 1
+};
+const rowColBreakpoints = PropTypes.shape({
+  small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
+});
+const spanBreakpoints = PropTypes.shape({
+  small: PropTypes.number,
+  medium: PropTypes.number,
+  large: PropTypes.number
+});
+const DSGridPropTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
+  rows: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+    rowColBreakpoints
+  ]).description("Row layout cells").defaultValue([]),
+  cols: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+    rowColBreakpoints
+  ]).description("Column layout cells").defaultValue([]),
+  span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description("Expands the grid element within columns."),
+  alignItems: PropTypes.oneOf(alignItemsPlacement).description("flex-like align items prop"),
+  children: PropTypes.node.description("Children node inside grid cell"),
+  className: PropTypes.string.description("CSS class").defaultValue(""),
+  justifyContent: PropTypes.oneOf(justifyPlacement).description("flex-like justify prop").defaultValue(justifyPlacement[0]),
+  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Space between cells prop").defaultValue(0),
+  wrap: PropTypes.oneOf(wrap).description("Wrap type").defaultValue(wrap[0]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid height."),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid width.")
+});
+export {
+  DSGridPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  GlobalAttributesT,\n  XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';\n\nexport declare namespace DSGridT {\n  interface RowColBreakpoints {\n    small?: string | number[];\n    medium?: string | number[];\n    large?: string | number[];\n  }\n\n  interface SpanBreakpoints {\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  interface IProps {\n    height?: string;\n    width?: string;\n    rows?: string[] | string | number[] | RowColBreakpoints;\n    cols?: string[] | string | number[] | RowColBreakpoints;\n    justifyContent?: typeof justifyPlacement[number];\n    alignItems?: typeof alignItemsPlacement[number];\n    children?: React.ReactNode;\n    className?: string;\n    justify?: typeof justifyPlacement[number];\n    gutter?: string | number;\n    wrap?: typeof wrap[number];\n    span?: number;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n\n  export interface ItemProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    alignItems: typeof alignItemsPlacement[number];\n    children: React.ReactNode;\n    className: string;\n    justify: typeof justifyPlacement[number];\n    gutter: string | number;\n    wrap: typeof wrap[number];\n    childNumber: number;\n    isSpanParent: boolean;\n    span?: number | SpanBreakpoints;\n    ref: React.ForwardedRef<HTMLDivElement>;\n  }\n}\n\nexport const defaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  gutter: 0,\n  wrap: 'wrap',\n  span: 1,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n  small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    rowColBreakpoints,\n  ])\n    .description('Column layout cells')\n    .defaultValue([]),\n  span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description(\n    'Expands the grid element within columns.',\n  ),\n  alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),\n  children: PropTypes.node.description('Children node inside grid cell'),\n  className: PropTypes.string.description('CSS class').defaultValue(''),\n  justifyContent: PropTypes.oneOf(justifyPlacement)\n    .description('flex-like justify prop')\n    .defaultValue(justifyPlacement[0]),\n  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Space between cells prop')\n    .defaultValue(0),\n  wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),\n  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAOA;AAgDO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AAMR,MAAM,oBAAoB,UAAU,MAAM;AAAA,EACxC,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC1E,QAAQ,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC3E,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA;AAG5E,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC,OAAO,UAAU;AAAA,EACjB,QAAQ,UAAU;AAAA,EAClB,OAAO,UAAU;AAAA;AAGZ,MAAM,kBAAkB,gDAC1B,4BACA,mBAF0B;AAAA,EAG7B,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE;AAAA,KAEC,YAAY,oBACZ,aAAa;AAAA,EAChB,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE;AAAA,KAEC,YAAY,uBACZ,aAAa;AAAA,EAChB,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,kBAAkB,YAC7D;AAAA,EAEF,YAAY,UAAU,MAAM,qBAAqB,YAAY;AAAA,EAC7D,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,WAAW,UAAU,OAAO,YAAY,aAAa,aAAa;AAAA,EAClE,gBAAgB,UAAU,MAAM,kBAC7B,YAAY,0BACZ,aAAa,iBAAiB;AAAA,EACjC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SACtD,YAAY,4BACZ,aAAa;AAAA,EAChB,MAAM,UAAU,MAAM,MAAM,YAAY,aAAa,aAAa,KAAK;AAAA,EACvE,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC9E,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/utils/constants.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const justifyPlacement = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
+const alignItemsPlacement = ["flex-start", "center", "flex-end", "stretch", "baseline"];
+const wrap = ["wrap", "nowrap", "wrap-reverse"];
+export {
+  alignItemsPlacement,
+  justifyPlacement,
+  wrap
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/utils/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n"],
+  "mappings": "AAAA;ACAO,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB;AAE/F,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW;AAE5E,MAAM,OAAO,CAAC,QAAQ,UAAU;",
+  "names": []
+}

package/dist/esm/utils/styles.js

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { css, mapTemplateGrid } from "@elliemae/ds-system";
+const manageSpan = css`
+  ${({ isSpanParent, span, theme }) => {
+  if (!isSpanParent)
+    return "";
+  if (typeof span === "number") {
+    return `
+        -ms-grid-column: auto / span ${span};
+        grid-column: auto / span ${span};`;
+  }
+  if (typeof span !== "object")
+    return ``;
+  let data = "";
+  Object.keys(theme.media).forEach((key) => {
+    const theKey = key;
+    const spanValue = span[theKey];
+    if (!!spanValue && theme.breakpoints[theKey]) {
+      if (theKey === "small") {
+        data += `
+            -ms-grid-column: auto / span ${spanValue};
+            grid-column: auto / span ${spanValue};
+          `;
+      } else {
+        data += `@media (min-width: ${theme.breakpoints[theKey]}) {
+                    -ms-grid-column: auto / span ${spanValue};
+                    grid-column: auto / span ${spanValue};
+                  }`;
+      }
+    }
+  });
+  return data;
+}}
+`;
+const manageCols = css`
+  ${({ cols, theme, isSpanParent }) => {
+  if (typeof cols === "object" && !Array.isArray(cols)) {
+    let data = "";
+    Object.keys(theme.media).forEach((key) => {
+      const theKey = key;
+      const colValue = cols[theKey];
+      if (!!colValue && Array.isArray(colValue)) {
+        const mtg = mapTemplateGrid(colValue).join(" ");
+        const mtgs = mapTemplateGrid(colValue).map((c) => `minmax(0, ${c})`).join(" ");
+        if (theKey === "small") {
+          data += `-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
+                      grid-template-columns: ${mtg || "auto"};
+                      -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
+                      grid-template-columns: ${mtgs || "auto"};`;
+        } else {
+          data += `@media (min-width: ${theme.breakpoints[theKey]}) {
+                      -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
+                      grid-template-columns: ${mtg || "auto"};
+                      -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
+                      grid-template-columns: ${mtgs || "auto"};
+                    }`;
+        }
+      } else if (!!colValue && isSpanParent) {
+        if (theKey === "small") {
+          data += `-ms-grid-columns: repeat(${colValue}, 1fr);
+                     grid-template-columns: repeat(${colValue}, 1fr);`;
+        } else {
+          data += `@media (min-width: ${theme.breakpoints[theKey]}) {
+                      -ms-grid-columns: repeat(${colValue}, 1fr);
+                      grid-template-columns: repeat(${colValue}, 1fr);
+                    }`;
+        }
+      }
+    });
+    return data;
+  }
+  if (Array.isArray(cols)) {
+    const mtg = mapTemplateGrid(cols).join(" ");
+    const mtgs = mapTemplateGrid(cols).map((c) => `minmax(0, ${c})`).join(" ");
+    return `
+        -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
+        grid-template-columns: ${mtg || "auto"};
+        -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
+        grid-template-columns: ${mtgs || "auto"};`;
+  }
+  if (isSpanParent) {
+    return `
+        -ms-grid-columns: repeat(${cols}, 1fr);
+        grid-template-columns: repeat(${cols}, 1fr);`;
+  }
+  return "";
+}}
+`;
+const manageRows = css`
+  ${({ rows, theme, isSpanParent }) => {
+  if (typeof rows === "object" && !Array.isArray(rows)) {
+    let data = "";
+    Object.keys(theme.media).forEach((key) => {
+      const theKey = key;
+      const rowValue = rows[theKey];
+      if (rowValue && Array.isArray(rowValue)) {
+        const mtg = mapTemplateGrid(rowValue).join(" ");
+        const mtgs = mapTemplateGrid(rowValue).map((c) => `minmax(0, ${c})`).join(" ");
+        if (key === "small") {
+          data += `-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
+                      grid-template-rows: ${mtg || "auto"};
+                      -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
+                      grid-template-rows: ${mtgs || "auto"};`;
+        } else {
+          data += `@media (min-width: ${theme.breakpoints[theKey]}) {
+                      -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
+                      grid-template-rows: ${mtg || "auto"};
+                      -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
+                      grid-template-rows: ${mtgs || "auto"};
+                    }`;
+        }
+      } else if (!!rowValue && isSpanParent) {
+        if (theKey === "small") {
+          data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
+                     grid-template-rows: repeat(${rowValue}, 1fr);`;
+        } else {
+          data += `@media (min-width: ${theme.breakpoints[theKey]}) {
+                      -ms-grid-rows: repeat(${rowValue}, 1fr);
+                      grid-template-rows: repeat(${rowValue}, 1fr);
+                    }`;
+        }
+      }
+    });
+    return data;
+  }
+  if (Array.isArray(rows)) {
+    const mtg = mapTemplateGrid(rows).join(" ");
+    const mtgs = mapTemplateGrid(rows).map((c) => `minmax(0, ${c})`).join(" ");
+    return `
+        -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
+        grid-template-rows: ${mtg || "auto"};
+        -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
+        grid-template-rows: ${mtgs || "auto"};
+      `;
+  }
+  if (isSpanParent) {
+    return `
+        -ms-grid-rows: repeat(${rows}, 1fr);
+        grid-template-rows: repeat(${rows}, 1fr);`;
+  }
+  return "";
+}}
+`;
+export {
+  manageCols,
+  manageRows,
+  manageSpan
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/utils/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n\n    if (typeof span === 'number') {\n      return `\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};`;\n    }\n\n    if (typeof span !== 'object') return ``;\n\n    // Span object\n\n    let data = '';\n    Object.keys(theme.media).forEach((key) => {\n      // Type castings\n      const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n      const spanValue = span[theKey];\n\n      if (!!spanValue && theme.breakpoints[theKey]) {\n        if (theKey === 'small') {\n          data += `\n            -ms-grid-column: auto / span ${spanValue};\n            grid-column: auto / span ${spanValue};\n          `;\n        } else {\n          data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                    -ms-grid-column: auto / span ${spanValue};\n                    grid-column: auto / span ${spanValue};\n                  }`;\n        }\n      }\n    });\n    return data;\n  }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof cols;\n        const colValue = cols[theKey];\n        if (!!colValue && Array.isArray(colValue)) {\n          const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n                      grid-template-columns: ${mtg || 'auto'};\n                      -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n                      grid-template-columns: ${mtgs || 'auto'};`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n                      grid-template-columns: ${mtg || 'auto'};\n                      -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n                      grid-template-columns: ${mtgs || 'auto'};\n                    }`;\n          }\n        } else if (!!colValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n                     grid-template-columns: repeat(${colValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: repeat(${colValue}, 1fr);\n                      grid-template-columns: repeat(${colValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n      return `\n        -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n        grid-template-columns: ${mtg || 'auto'};\n        -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n        grid-template-columns: ${mtgs || 'auto'};`;\n    }\n    if (isSpanParent) {\n      return `\n        -ms-grid-columns: repeat(${cols}, 1fr);\n        grid-template-columns: repeat(${cols}, 1fr);`;\n    }\n    return '';\n  }}\n`;\n\nexport const manageRows = css<DSGridT.ItemProps>`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n        const rowValue = rows[theKey];\n        if (rowValue && Array.isArray(rowValue)) {\n          const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (key === 'small') {\n            data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n                      grid-template-rows: ${mtg || 'auto'};\n                      -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n                      grid-template-rows: ${mtgs || 'auto'};`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n                      grid-template-rows: ${mtg || 'auto'};\n                      -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n                      grid-template-rows: ${mtgs || 'auto'};\n                    }`;\n          }\n        } else if (!!rowValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n                     grid-template-rows: repeat(${rowValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: repeat(${rowValue}, 1fr);\n                      grid-template-rows: repeat(${rowValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n      return `\n        -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n        grid-template-rows: ${mtg || 'auto'};\n        -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n        grid-template-rows: ${mtgs || 'auto'};\n      `;\n    }\n    if (isSpanParent) {\n      return `\n        -ms-grid-rows: repeat(${rows}, 1fr);\n        grid-template-rows: repeat(${rows}, 1fr);`;\n    }\n    return '';\n  }}\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,43 +1,46 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils/styles": {
-      "import": "./esm/utils/styles.js",
-      "require": "./cjs/utils/styles.js"
+      "import": "./dist/esm/utils/styles.js",
+      "require": "./dist/cjs/utils/styles.js"
     },
     "./utils/constants": {
-      "import": "./esm/utils/constants.js",
-      "require": "./cjs/utils/constants.js"
+      "import": "./dist/esm/utils/constants.js",
+      "require": "./dist/cjs/utils/constants.js"
     },
     "./types": {
-      "import": "./esm/types.js",
-      "require": "./cjs/types.js"
+      "import": "./dist/esm/types.js",
+      "require": "./dist/cjs/types.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./GridItem": {
-      "import": "./esm/GridItem.js",
-      "require": "./cjs/GridItem.js"
+      "import": "./dist/esm/GridItem.js",
+      "require": "./dist/cjs/GridItem.js"
     },
     "./Grid": {
-      "import": "./esm/Grid.js",
-      "require": "./cjs/Grid.js"
+      "import": "./dist/esm/Grid.js",
+      "require": "./dist/cjs/Grid.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -49,23 +52,24 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.0.0-next.1",
-    "@xstyled/styled-components": "~3.1.1",
+    "@elliemae/ds-props-helpers": "3.0.0-next.13",
+    "@elliemae/ds-system": "3.0.0-next.13",
+    "@xstyled/styled-components": "~3.1.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.16.2",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3",
@@ -80,7 +84,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }