@semcore/data-table 16.2.1 → 16.3.0-prerelease.3

package/lib/es6/components/DataTable/DataTable.js

@@ -25,38 +25,38 @@ import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFo
 import { NoData } from '@semcore/widget-empty';
 import * as React from 'react';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_9bjvx_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_9bjvx_gg_.__isDataEmpty_9bjvx_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_9bjvx_gg_.__gridTemplateColumns_9bjvx_gg_{grid-template-columns:var(--gridTemplateColumns_9bjvx)}.___SDataTable_9bjvx_gg_.__gridTemplateAreas_9bjvx_gg_{grid-template-areas:var(--gridTemplateAreas_9bjvx)}.___SDataTable_9bjvx_gg_.__gridTemplateRows_9bjvx_gg_{grid-template-rows:var(--gridTemplateRows_9bjvx)}", /*__inner_css_end__*/"9bjvx_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_12hpo_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_12hpo_gg_.__isDataEmpty_12hpo_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_12hpo_gg_.__gridTemplateColumns_12hpo_gg_{grid-template-columns:var(--gridTemplateColumns_12hpo)}.___SDataTable_12hpo_gg_.__gridTemplateAreas_12hpo_gg_{grid-template-areas:var(--gridTemplateAreas_12hpo)}.___SDataTable_12hpo_gg_.__gridTemplateRows_12hpo_gg_{grid-template-rows:var(--gridTemplateRows_12hpo)}", /*__inner_css_end__*/"12hpo_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_9bjvx_gg_",
-  "_isDataEmpty": "__isDataEmpty_9bjvx_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_9bjvx_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_9bjvx",
-  "_gridTemplateAreas": "__gridTemplateAreas_9bjvx_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_9bjvx",
-  "_gridTemplateRows": "__gridTemplateRows_9bjvx_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_9bjvx"
+  "__SDataTable": "___SDataTable_12hpo_gg_",
+  "_isDataEmpty": "__isDataEmpty_12hpo_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_12hpo_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_12hpo",
+  "_gridTemplateAreas": "__gridTemplateAreas_12hpo_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_12hpo",
+  "_gridTemplateRows": "__gridTemplateRows_12hpo_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_12hpo"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_1i4b5_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_{overflow:visible;overflow:initial}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_both_1i4b5_gg_{overflow:auto}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_both_1i4b5_gg_.__loading_1i4b5_gg_,.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_horizontal_1i4b5_gg_.__loading_1i4b5_gg_,.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_vertical_1i4b5_gg_.__loading_1i4b5_gg_{overflow:hidden}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_horizontal_1i4b5_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_._scrollDirection_vertical_1i4b5_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_.__headerHeight_1i4b5_gg_{scroll-padding-top:var(--headerHeight_1i4b5)}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_.__leftScrollPadding_1i4b5_gg_{scroll-padding-left:var(--leftScrollPadding_1i4b5)}.___SScrollArea_1i4b5_gg_ .___SContainer_1i4b5_gg_.__rightScrollPadding_1i4b5_gg_{scroll-padding-right:var(--rightScrollPadding_1i4b5)}.___SScrollArea_1i4b5_gg_ .___SShadowHorizontal_1i4b5_gg_::before,.___SScrollArea_1i4b5_gg_ .___SShadowHorizontal_1i4b5_gg_:after,.___SScrollArea_1i4b5_gg_ .___SShadowVertical_1i4b5_gg_::after{z-index:20}.___SScrollArea_1i4b5_gg_ .___SShadowHorizontal_1i4b5_gg_.__leftOffset_1i4b5_gg_::before,.___SScrollArea_1i4b5_gg_ .___SShadowHorizontal_1i4b5_gg_.__rightOffset_1i4b5_gg_::after,.___SScrollArea_1i4b5_gg_ .___SShadowVertical_1i4b5_gg_::before{display:none}", /*__inner_css_end__*/"1i4b5_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_w8oky_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_{overflow:visible;overflow:initial}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_both_w8oky_gg_{overflow:auto}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_both_w8oky_gg_.__loading_w8oky_gg_,.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_horizontal_w8oky_gg_.__loading_w8oky_gg_,.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_vertical_w8oky_gg_.__loading_w8oky_gg_{overflow:hidden}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_horizontal_w8oky_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_vertical_w8oky_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__headerHeight_w8oky_gg_{scroll-padding-top:var(--headerHeight_w8oky)}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__leftScrollPadding_w8oky_gg_{scroll-padding-left:var(--leftScrollPadding_w8oky)}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__rightScrollPadding_w8oky_gg_{scroll-padding-right:var(--rightScrollPadding_w8oky)}.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_::before,.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_:after,.___SScrollArea_w8oky_gg_ .___SShadowVertical_w8oky_gg_::after{z-index:20}.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_.__leftOffset_w8oky_gg_::before,.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_.__rightOffset_w8oky_gg_::after,.___SScrollArea_w8oky_gg_ .___SShadowVertical_w8oky_gg_::before{display:none}", /*__inner_css_end__*/"w8oky_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_1i4b5_gg_",
-  "__SContainer": "___SContainer_1i4b5_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_1i4b5_gg_",
-  "_loading": "__loading_1i4b5_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1i4b5_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_1i4b5_gg_",
-  "_headerHeight": "__headerHeight_1i4b5_gg_",
-  "--headerHeight": "--headerHeight_1i4b5",
-  "_leftScrollPadding": "__leftScrollPadding_1i4b5_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_1i4b5",
-  "_rightScrollPadding": "__rightScrollPadding_1i4b5_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_1i4b5",
-  "__SShadowVertical": "___SShadowVertical_1i4b5_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1i4b5_gg_",
-  "_leftOffset": "__leftOffset_1i4b5_gg_",
-  "_rightOffset": "__rightOffset_1i4b5_gg_"
+  "__SScrollArea": "___SScrollArea_w8oky_gg_",
+  "__SContainer": "___SContainer_w8oky_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_w8oky_gg_",
+  "_loading": "__loading_w8oky_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_w8oky_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_w8oky_gg_",
+  "_headerHeight": "__headerHeight_w8oky_gg_",
+  "--headerHeight": "--headerHeight_w8oky",
+  "_leftScrollPadding": "__leftScrollPadding_w8oky_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_w8oky",
+  "_rightScrollPadding": "__rightScrollPadding_w8oky_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_w8oky",
+  "__SShadowVertical": "___SShadowVertical_w8oky_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_w8oky_gg_",
+  "_leftOffset": "__leftOffset_w8oky_gg_",
+  "_rightOffset": "__rightOffset_w8oky_gg_"
 });
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { Body } from '../Body/Body';
@@ -634,11 +634,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         headerProps = _this$asProps7.headerProps,
         onSelectedRowsChange = _this$asProps7.onSelectedRowsChange,
         selectedRows = _this$asProps7.selectedRows,
-        sideIndents = _this$asProps7.sideIndents;
+        sideIndents = _this$asProps7.sideIndents,
+        variant = _this$asProps7.variant;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       var shadowVertical = this.state.shadowVertical;
+      var sideIndentsValue = variant === 'card' ? 'wide' : sideIndents;
       return _objectSpread(_objectSpread({}, headerProps), {}, {
         columns: this.columns,
         treeColumns: this.treeColumns,
@@ -653,7 +655,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns: gridTemplateColumns,
         gridTemplateAreas: gridTemplateAreas,
-        sideIndents: sideIndents,
+        sideIndents: sideIndentsValue,
         totalRows: this.totalRows,
         selectedRows: selectedRows,
         flatRows: this.getFlatRows(),
@@ -696,7 +698,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         accordionDuration = _this$asProps8.accordionDuration,
         accordionMode = _this$asProps8.accordionMode,
         rawData = _this$asProps8.data,
-        renderCellOverlay = _this$asProps8.renderCellOverlay;
+        renderCellOverlay = _this$asProps8.renderCellOverlay,
+        variant = _this$asProps8.variant;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
@@ -737,7 +740,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         onCellClick: this.handleCellClick,
         rawData: rawData,
         shadowVertical: shadowVertical,
-        renderCellOverlay: renderCellOverlay
+        renderCellOverlay: renderCellOverlay,
+        variant: variant
       };
     }
   }, {
@@ -1209,7 +1213,8 @@ _defineProperty(DataTableRoot, "defaultProps", {
       description: "",
       w: "100%"
     });
-  }
+  },
+  variant: 'default'
 });
 export var DataTable = createComponent(DataTableRoot, {
   Head: Head,