@tecsinapse/react-web-kit 1.17.3 → 1.17.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.17.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.17.3...@tecsinapse/react-web-kit@1.17.4) (2022-06-08)
+
+
+### Features
+
+* add grid for web based on div ([f44bc76](https://github.com/tecsinapse/design-system/commit/f44bc76f8e34ac7f918c21478002f04b3ff52ff8))
+
+
+
+
+
 ## [1.17.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.17.2...@tecsinapse/react-web-kit@1.17.3) (2022-05-24)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

package/dist/components/molecules/Grid/Grid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+export interface IGrid extends React.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element[];
+    layout?: number[][];
+    columns?: number;
+    spacing?: SpacingType | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+    };
+}
+declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGrid) => JSX.Element;
+export default Grid;

package/dist/components/molecules/Grid/Grid.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}) => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return _react.default.createElement("div", _extends({
+      style: { ...style,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      }
+    }, rest), _react.default.Children.map(children, (child, index) => _react.default.createElement(_Item.GridItem, {
+      columns: columns,
+      span: flatLayout[index],
+      spacing: spacing
+    }, child)));
+  }
+
+  return _react.default.createElement("div", _extends({
+    style: { ...style,
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    }
+  }, rest), _react.default.Children.map(children, child => {
+    return _react.default.cloneElement(child, { ...(child === null || child === void 0 ? void 0 : child.props),
+      columns,
+      spacing: (child === null || child === void 0 ? void 0 : child.props.spacing) ?? spacing
+    });
+  }));
+};
+
+var _default = Grid;
+exports.default = _default;
+//# sourceMappingURL=Grid.js.map

package/dist/components/molecules/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AA0BA,MAAMA,IAAI,GAAG,CAAC;AACZC,EAAAA,QADY;AAEZC,EAAAA,OAAO,GAAG,EAFE;AAGZC,EAAAA,MAHY;AAIZC,EAAAA,KAJY;AAKZC,EAAAA,OALY;AAMZ,KAAGC;AANS,CAAD,KAOA;AACX,MAAIH,MAAJ,EAAY;AACV,UAAMI,UAAU,GAAGJ,MAAM,CAACK,IAAP,EAAnB;AACA,WACE;AACE,MAAA,KAAK,EAAE,EACL,GAAGJ,KADE;AAELK,QAAAA,OAAO,EAAE,MAFJ;AAGLC,QAAAA,aAAa,EAAE,KAHV;AAILC,QAAAA,QAAQ,EAAE;AAJL;AADT,OAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAC5B,6BAAC,cAAD;AACE,MAAA,OAAO,EAAEd,OADX;AAEE,MAAA,IAAI,EAAEK,UAAU,CAACS,KAAD,CAFlB;AAGE,MAAA,OAAO,EAAEX;AAHX,OAKGU,KALH,CADD,CATH,CADF;AAqBD;;AAED,SACE;AACE,IAAA,KAAK,EAAE,EACL,GAAGX,KADE;AAELK,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,aAAa,EAAE,KAHV;AAILC,MAAAA,QAAQ,EAAE;AAJL;AADT,KAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6Bc,KAAK,IAAI;AACrC,WAAOH,eAAMK,YAAN,CAAmBF,KAAnB,EAA0B,EAC/B,IAAGA,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,KAAP,CAAab,OAAb,KAAwBA;AAHF,KAA1B,CAAP;AAKD,GANA,CATH,CADF;AAmBD,CApDD;;eAsDeL,I","sourcesContent":["import React from 'react';\nimport { GridItem } from './Item';\nimport { SpacingType } from '@tecsinapse/react-core';\n\nexport interface IGrid extends React.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element[];\n  /** Layout should represent the multiplier of columns to fill the rows properly.\n   * Example:\n   * const layout = [\n   *   [6, 6], // Two elements on row\n   *   [4, 4, 4], // Three elements on row\n   *   [12], // One element on row\n   * ];\n   * */\n  layout?: number[][];\n  /** Number of grid columns to be considered (not the number of elements per row) */\n  columns?: number;\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n}\n\nconst Grid = ({\n  children,\n  columns = 12,\n  layout,\n  style,\n  spacing,\n  ...rest\n}: IGrid) => {\n  if (layout) {\n    const flatLayout = layout.flat();\n    return (\n      <div\n        style={{\n          ...style,\n          display: 'flex',\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n        }}\n        {...rest}\n      >\n        {React.Children.map(children, (child, index) => (\n          <GridItem\n            columns={columns}\n            span={flatLayout[index]}\n            spacing={spacing}\n          >\n            {child}\n          </GridItem>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        ...style,\n        display: 'flex',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n      }}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        return React.cloneElement(child, {\n          ...child?.props,\n          columns,\n          spacing: child?.props.spacing ?? spacing,\n        });\n      })}\n    </div>\n  );\n};\n\nexport default Grid;\n"],"file":"Grid.js"}

package/dist/components/molecules/Grid/Item/Item.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+declare type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+declare type FlexAlignBase = FlexPositioning | 'stretch';
+declare type FlexAlignType = FlexAlignBase | 'baseline';
+declare type FlexSpacing = 'space-between' | 'space-around';
+export interface IGridItem {
+    children: React.ReactElement;
+    span: number;
+    columns?: number;
+    loading?: boolean;
+    loadingComponent?: React.ReactElement;
+    alignContent?: FlexAlignBase | FlexSpacing;
+    alignItems?: FlexAlignType;
+    alignSelf?: 'auto' | FlexAlignType;
+    flex?: number;
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexGrow?: number;
+    flexShrink?: number;
+    justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+    spacing?: SpacingType | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+    };
+    wrapper?: boolean;
+}
+declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
+export default GridItem;

package/dist/components/molecules/Grid/Item/Item.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  ...rest
+}) => {
+  const {
+    spacing
+  } = (0, _reactCore.useTheme)();
+
+  if (!_react.default.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const getPadding = pos => {
+    if (_spacing) {
+      if (typeof _spacing === 'string') return (0, _reactCore.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
+        return (0, _reactCore.extractNumbersFromString)(spacing[_spacing[pos]]);
+      } else return undefined;
+    } else return undefined;
+  };
+
+  const style = { ...rest,
+    boxSizing: 'border-box',
+    flexBasis: `${100 / (columns / span)}%`,
+    paddingTop: getPadding('top'),
+    paddingBottom: getPadding('bottom'),
+    paddingRight: getPadding('right'),
+    paddingLeft: getPadding('left')
+  };
+
+  const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
+    style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ...style,
+      ...(children === null || children === void 0 ? void 0 : children.props.style)
+    }
+  });
+
+  return wrapper ? _react.default.createElement("div", {
+    style: style
+  }, clone) : clone;
+};
+
+var _default = GridItem;
+exports.default = _default;
+//# sourceMappingURL=Item.js.map

package/dist/components/molecules/Grid/Item/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","getPadding","pos","undefined","style","boxSizing","flexBasis","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;;;AA4CA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,0BAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,UAAU,GAAIC,GAAD,IAA0B;AAC3C,QAAIR,QAAJ,EAAc;AACZ,UAAI,OAAOA,QAAP,KAAoB,QAAxB,EACE,OAAO,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,yCAAyBT,OAAO,CAACC,QAAQ,CAACQ,GAAD,CAAT,CAAhC,CAAP;AACD,OAFI,MAEE,OAAOC,SAAP;AACR,KAND,MAMO,OAAOA,SAAP;AACR,GARD;;AAUA,QAAMC,KAA0B,GAAG,EACjC,GAAGR,IAD8B;AAEjCS,IAAAA,SAAS,EAAE,YAFsB;AAGjCC,IAAAA,SAAS,EAAG,GAAE,OAAOhB,OAAO,GAAGD,IAAjB,CAAuB,GAHJ;AAIjCkB,IAAAA,UAAU,EAAEN,UAAU,CAAC,KAAD,CAJW;AAKjCO,IAAAA,aAAa,EAAEP,UAAU,CAAC,QAAD,CALQ;AAMjCQ,IAAAA,YAAY,EAAER,UAAU,CAAC,OAAD,CANS;AAOjCS,IAAAA,WAAW,EAAET,UAAU,CAAC,MAAD;AAPU,GAAnC;;AAUA,QAAMU,KAAK,GAAGd,eAAMe,YAAN,CAAmBxB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAV,CAAgBT,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAOT,OAAO,GAAG;AAAK,IAAA,KAAK,EAAES;AAAZ,KAAoBO,KAApB,CAAH,GAAsCA,KAApD;AACD,CA9CD;;eAgDexB,Q","sourcesContent":["import React from 'react';\nimport {\n  extractNumbersFromString,\n  SpacingType,\n  useTheme,\n} from '@tecsinapse/react-core';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\ntype PaddingPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface IGridItem {\n  children: React.ReactElement;\n  /** Number of columns to fill */\n  span: number;\n  /** You don't have to give this property since is inherited from Grid */\n  columns?: number;\n  loading?: boolean;\n  /** If your GridItem has a loading state, specify the component here (Skeleton) */\n  loadingComponent?: React.ReactElement;\n  /** Flex properties below */\n  alignContent?: FlexAlignBase | FlexSpacing;\n  alignItems?: FlexAlignType;\n  alignSelf?: 'auto' | FlexAlignType;\n  flex?: number;\n  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  flexGrow?: number;\n  flexShrink?: number;\n  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n  /** You don't have to give this property since is inherited from Grid */\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n  /** Used to wrap children in a View when its style extrapolates the dimensions*/\n  wrapper?: boolean;\n}\n\nconst GridItem = ({\n  children,\n  span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  ...rest\n}: IGridItem) => {\n  const { spacing } = useTheme();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const getPadding = (pos: PaddingPosition) => {\n    if (_spacing) {\n      if (typeof _spacing === 'string')\n        return extractNumbersFromString(spacing[_spacing]);\n      else if (typeof _spacing === 'object' && _spacing[pos]) {\n        return extractNumbersFromString(spacing[_spacing[pos]!]);\n      } else return undefined;\n    } else return undefined;\n  };\n\n  const style: React.CSSProperties = {\n    ...rest,\n    boxSizing: 'border-box',\n    flexBasis: `${100 / (columns / span)}%`,\n    paddingTop: getPadding('top'),\n    paddingBottom: getPadding('bottom'),\n    paddingRight: getPadding('right'),\n    paddingLeft: getPadding('left'),\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ...style, ...children?.props.style },\n  });\n\n  return wrapper ? <div style={style}>{clone}</div> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}

package/dist/components/molecules/Grid/Item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GridItem } from './Item';
+export type { IGridItem } from './Item';

package/dist/components/molecules/Grid/Item/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.default;
+  }
+});
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Grid/Item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as GridItem } from './Item';\nexport type { IGridItem } from './Item';\n"],"file":"index.js"}

package/dist/components/molecules/Grid/index.d.ts

@@ -0,0 +1,4 @@
+export { GridItem } from './Item';
+export type { IGridItem } from './Item';
+export { default as Grid } from './Grid';
+export type { IGrid } from './Grid';

package/dist/components/molecules/Grid/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.GridItem;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+
+var _Item = require("./Item");
+
+var _Grid = _interopRequireDefault(require("./Grid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Grid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEA","sourcesContent":["export { GridItem } from './Item';\nexport type { IGridItem } from './Item';\nexport { default as Grid } from './Grid';\nexport type { IGrid } from './Grid';\n"],"file":"index.js"}

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
 export { DatePicker, WebDatePickerProps, } from './components/molecules/DatePicker';
 export { DateTimePicker, WebDateTimePickerProps, } from './components/molecules/DateTimePicker';
+export { Grid, GridItem, IGrid, IGridItem } from './components/molecules/Grid';

package/dist/index.js

@@ -47,7 +47,11 @@ var _exportNames = {
   DatePicker: true,
   WebDatePickerProps: true,
   DateTimePicker: true,
-  WebDateTimePickerProps: true
+  WebDateTimePickerProps: true,
+  Grid: true,
+  GridItem: true,
+  IGrid: true,
+  IGridItem: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -313,6 +317,30 @@ Object.defineProperty(exports, "WebDateTimePickerProps", {
     return _DateTimePicker.WebDateTimePickerProps;
   }
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.Grid;
+  }
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () {
+    return _Grid.GridItem;
+  }
+});
+Object.defineProperty(exports, "IGrid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.IGrid;
+  }
+});
+Object.defineProperty(exports, "IGridItem", {
+  enumerable: true,
+  get: function () {
+    return _Grid.IGridItem;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -380,6 +408,8 @@ var _DatePicker = require("./components/molecules/DatePicker");
 
 var _DateTimePicker = require("./components/molecules/DateTimePicker");
 
+var _Grid = require("./components/molecules/Grid");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport { InputMask, InputMaskWebProps } from './components/atoms/InputMask';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport {\n  DatePicker,\n  WebDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  WebDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAIA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport { InputMask, InputMaskWebProps } from './components/atoms/InputMask';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport {\n  DatePicker,\n  WebDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  WebDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Grid, GridItem, IGrid, IGridItem } from './components/molecules/Grid';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -33,5 +33,5 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "f4d635a35883748ec2594557606c00e2822a1ad6"
+  "gitHead": "de45e97bbf6789a78945883eb0ca38a63d7c3e36"
 }

package/src/components/molecules/Grid/Grid.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { GridItem } from './Item';
+import { SpacingType } from '@tecsinapse/react-core';
+
+export interface IGrid extends React.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element[];
+  /** Layout should represent the multiplier of columns to fill the rows properly.
+   * Example:
+   * const layout = [
+   *   [6, 6], // Two elements on row
+   *   [4, 4, 4], // Three elements on row
+   *   [12], // One element on row
+   * ];
+   * */
+  layout?: number[][];
+  /** Number of grid columns to be considered (not the number of elements per row) */
+  columns?: number;
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
+}
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}: IGrid) => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return (
+      <div
+        style={{
+          ...style,
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+        {...rest}
+      >
+        {React.Children.map(children, (child, index) => (
+          <GridItem
+            columns={columns}
+            span={flatLayout[index]}
+            spacing={spacing}
+          >
+            {child}
+          </GridItem>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...style,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      }}
+      {...rest}
+    >
+      {React.Children.map(children, child => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+        });
+      })}
+    </div>
+  );
+};
+
+export default Grid;

package/src/components/molecules/Grid/Item/Item.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  extractNumbersFromString,
+  SpacingType,
+  useTheme,
+} from '@tecsinapse/react-core';
+
+type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+type FlexAlignBase = FlexPositioning | 'stretch';
+type FlexAlignType = FlexAlignBase | 'baseline';
+type FlexSpacing = 'space-between' | 'space-around';
+
+type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export interface IGridItem {
+  children: React.ReactElement;
+  /** Number of columns to fill */
+  span: number;
+  /** You don't have to give this property since is inherited from Grid */
+  columns?: number;
+  loading?: boolean;
+  /** If your GridItem has a loading state, specify the component here (Skeleton) */
+  loadingComponent?: React.ReactElement;
+  /** Flex properties below */
+  alignContent?: FlexAlignBase | FlexSpacing;
+  alignItems?: FlexAlignType;
+  alignSelf?: 'auto' | FlexAlignType;
+  flex?: number;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexGrow?: number;
+  flexShrink?: number;
+  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+  /** You don't have to give this property since is inherited from Grid */
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
+  /** Used to wrap children in a View when its style extrapolates the dimensions*/
+  wrapper?: boolean;
+}
+
+const GridItem = ({
+  children,
+  span,
+  columns = 12,
+  loadingComponent,
+  loading = false,
+  spacing: _spacing,
+  wrapper = false,
+  ...rest
+}: IGridItem) => {
+  const { spacing } = useTheme();
+  if (!React.Children.only(children)) {
+    throw new Error('The number of children in GridItem should be one');
+  }
+  if (loadingComponent && loading) {
+    return loadingComponent;
+  }
+
+  const getPadding = (pos: PaddingPosition) => {
+    if (_spacing) {
+      if (typeof _spacing === 'string')
+        return extractNumbersFromString(spacing[_spacing]);
+      else if (typeof _spacing === 'object' && _spacing[pos]) {
+        return extractNumbersFromString(spacing[_spacing[pos]!]);
+      } else return undefined;
+    } else return undefined;
+  };
+
+  const style: React.CSSProperties = {
+    ...rest,
+    boxSizing: 'border-box',
+    flexBasis: `${100 / (columns / span)}%`,
+    paddingTop: getPadding('top'),
+    paddingBottom: getPadding('bottom'),
+    paddingRight: getPadding('right'),
+    paddingLeft: getPadding('left'),
+  };
+
+  const clone = React.cloneElement(children, {
+    ...children?.props,
+    style: wrapper
+      ? children?.props.style
+      : { ...style, ...children?.props.style },
+  });
+
+  return wrapper ? <div style={style}>{clone}</div> : clone;
+};
+
+export default GridItem;

package/src/components/molecules/Grid/Item/index.ts

@@ -0,0 +1,2 @@
+export { default as GridItem } from './Item';
+export type { IGridItem } from './Item';

package/src/components/molecules/Grid/index.ts

@@ -0,0 +1,4 @@
+export { GridItem } from './Item';
+export type { IGridItem } from './Item';
+export { default as Grid } from './Grid';
+export type { IGrid } from './Grid';

package/src/index.ts

@@ -49,3 +49,4 @@ export {
   DateTimePicker,
   WebDateTimePickerProps,
 } from './components/molecules/DateTimePicker';
+export { Grid, GridItem, IGrid, IGridItem } from './components/molecules/Grid';