labsense-ui-kit 1.1.61 → 1.1.63

package/dist/Inputs/CheckBox.d.ts

@@ -12,5 +12,10 @@ interface CheckBoxProps {
     color?: string;
     borderSize?: number;
 }
+export declare const StyledCheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $checkboxSize: number;
+    $checked?: boolean | undefined;
+    $borderSize?: number | undefined;
+}>> & string;
 declare const CheckBox: React.FC<CheckBoxProps>;
 export default CheckBox;

package/dist/index.js

@@ -6117,7 +6117,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
 };
 
 var _templateObject$i, _templateObject2$f;
-var StyledInput$1 = styled__default.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  appearance: none;\n  border: ", ";\n  border-radius: 4px;\n  background-color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  transition: all 0.2s ease;\n  font-size: ", "; // for em units\n\n  &:checked::after {\n    content: '';\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    width: ", ";\n    height: ", ";\n    border: solid ", ";\n    border-width: 0 0.2em 0.2em 0;\n    transform: rotate(45deg);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_ref) {
+var StyledCheckBox = styled__default.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  appearance: none;\n  border: ", ";\n  border-radius: 4px;\n  background-color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  transition: all 0.2s ease;\n  font-size: ", "; // for em units\n\n  &:checked::after {\n    content: '';\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    width: ", ";\n    height: ", ";\n    border: solid ", ";\n    border-width: 0 0.2em 0.2em 0;\n    transform: rotate(45deg);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_ref) {
   var $checkboxSize = _ref.$checkboxSize;
   return $checkboxSize + "px";
 }, function (_ref2) {
@@ -6180,7 +6180,7 @@ var CheckBox = function CheckBox(_ref10) {
       height: checkboxSize,
       display: 'flex'
     }
-  }, React__default.createElement(StyledInput$1, {
+  }, React__default.createElement(StyledCheckBox, {
     type: 'checkbox',
     id: safeId,
     "$checkboxSize": checkboxSize,
@@ -6755,13 +6755,16 @@ var TableRow = function TableRow(_ref) {
     }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
       "$padding": '0px 16px 0px 0px',
       "$alignItems": 'center'
-    }, React__default.createElement("input", {
-      type: "checkbox",
+    }, React__default.createElement(StyledCheckBox, {
+      type: 'checkbox',
+      "$checkboxSize": 13.5,
       checked: rowconfig[Index]._checked,
-      disabled: (_rowconfig$Index = rowconfig[Index]) === null || _rowconfig$Index === void 0 ? void 0 : _rowconfig$Index._selectable,
-      onClick: function onClick() {
+      "$checked": rowconfig[Index]._checked,
+      onChange: function onChange() {
         return toggleChecked(Index);
-      }
+      },
+      disabled: (_rowconfig$Index = rowconfig[Index]) === null || _rowconfig$Index === void 0 ? void 0 : _rowconfig$Index._selectable,
+      "$borderSize": 2
     })), data.rowData.map(function (cellData, cellkey) {
       var _tableheaderconfig$he;
       return React__default.createElement(TableCell, {
@@ -6792,15 +6795,18 @@ var TableHeader = styled__default.div(_templateObject2$k || (_templateObject2$k
   return props.$tcolor || 'white';
 });
 var TableContent = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var TableData = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  : ;\n  max-height: ", ";\n\n"])), function (_ref) {
+  var $isLegends = _ref.$isLegends;
+  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
+});
 var Divider = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables.border.extraLight);
-var Table = function Table(_ref) {
-  var tableObject = _ref.tableObject,
-    _ref$filter = _ref.filter,
-    filter = _ref$filter === void 0 ? false : _ref$filter,
-    loading = _ref.loading,
-    _ref$noDataText = _ref.noDataText,
-    noDataText = _ref$noDataText === void 0 ? 'No Data Found!' : _ref$noDataText;
+var Table = function Table(_ref2) {
+  var tableObject = _ref2.tableObject,
+    _ref2$filter = _ref2.filter,
+    filter = _ref2$filter === void 0 ? false : _ref2$filter,
+    loading = _ref2.loading,
+    _ref2$noDataText = _ref2.noDataText,
+    noDataText = _ref2$noDataText === void 0 ? 'No Data Found!' : _ref2$noDataText;
   var rowconfig = tableObject.rowconfig,
     tableheaderconfig = tableObject.tableheaderconfig;
   var _useState = React.useState(new Set()),
@@ -6849,10 +6855,13 @@ var Table = function Table(_ref) {
   }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
     "$padding": '0px 16px 0px 0px',
     "$alignItems": 'center'
-  }, React__default.createElement("input", {
+  }, React__default.createElement(StyledCheckBox, {
     type: 'checkbox',
+    "$checkboxSize": 13.5,
     checked: isAllSelected,
-    onChange: toggleSelectAll
+    "$checked": isAllSelected,
+    onChange: toggleSelectAll,
+    "$borderSize": 2
   })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
     var _columndata$maintext;
     var currentLegend = columndata.legend || '';
@@ -6899,9 +6908,13 @@ var Table = function Table(_ref) {
     "$alignItems": 'center',
     "$padding": '24px 24px',
     "$justifyContent": 'center'
-  }, React__default.createElement(Span, null, noDataText)) : filter ? React__default.createElement(TableData, null, Object.entries(roleGroups).map(function (_ref2) {
-    var role = _ref2[0],
-      rows = _ref2[1];
+  }, React__default.createElement(Span, null, noDataText)) : filter ? React__default.createElement(TableData, {
+    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
+      return !!col.legend;
+    })
+  }, Object.entries(roleGroups).map(function (_ref3) {
+    var role = _ref3[0],
+      rows = _ref3[1];
     return React__default.createElement(React__default.Fragment, {
       key: role
     }, React__default.createElement(Container, {
@@ -6931,7 +6944,11 @@ var Table = function Table(_ref) {
         tableheaderconfig: tableheaderconfig
       }), rows.length > 1 && index < rows.length - 1 && React__default.createElement(Divider, null));
     }));
-  })) : React__default.createElement(TableData, null, filteredRows.map(function (row, index) {
+  })) : React__default.createElement(TableData, {
+    "$isLegends": tableheaderconfig.headerdata.some(function (col) {
+      return !!col.legend;
+    })
+  }, filteredRows.map(function (row, index) {
     return React__default.createElement(React__default.Fragment, {
       key: index
     }, React__default.createElement(TableRow, {