@mtes-mct/monitor-ui 17.2.2 → 18.0.1

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [18.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.2...v18.0.0) (2024-05-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **tables:** - Remove `isChecked` prop in `TableWithSelectableRows.RowCheckbox`, replaced by native `checked` prop.
+- Remove `isIndeterminate` prop in `TableWithSelectableRows.RowCheckbox`, replaced by original Rsuite `indeterminate` prop.
+- Remove `$isHighlighted` prop in `TableWithSelectableRows.Td`, replaced by the same prop on `TableWithSelectableRows.BodyTr`.
+- In order to work properly with `RowCheckbox`, `TableWithSelectableRows` now requires `<Table $withRowCheckbox />`.
+- Following the `SimpleTable` & `TableWithSelectableRows` margins/heights normalization, including a few hacks,
+  it may break some UI widths & heights.
+- Please check `TableWithSelectableRows.stories.tsx` to see a full example on how to use/update it.
+- As shown in the story, be careful **NOT** to wrap the checkbox table header cell
+  within `<TableWithSelectableRows.SortContainer />` since the flex display breaks its internal positioning.
+
+### Features
+
+* **tables:** add $isLoading prop to SimpleTable.Td ([6cc137e](https://github.com/MTES-MCT/monitor-ui/commit/6cc137e187bd0314756bfc973f65bcde19f063ea))
+
+
+### Bug Fixes
+
+* **tables:** normalize tables checkbox, margins & height ([23afb70](https://github.com/MTES-MCT/monitor-ui/commit/23afb702e79e44788d82b6abeb0e2e6ba4deb4d3))
+* **tables:** set SimpleTable.Td line-height & .CellLoader height to 22px ([176b161](https://github.com/MTES-MCT/monitor-ui/commit/176b161ac85c48913f25e5a483ce8ac30698e65c))
+
+## [17.2.2](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.1...v17.2.2) (2024-05-21)
+
+
+### Bug Fixes
+
+* **elements:** fix IconButton border ([f55eb2c](https://github.com/MTES-MCT/monitor-ui/commit/f55eb2ca036cd0c1c06b78eaaacfc1983e48ffb3))
+
 ## [17.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.0...v17.2.1) (2024-05-21)
 
 

package/fields/Checkbox.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from 'react';
 import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
+import type { ValueType } from 'rsuite/esm/Checkbox';
 import type { Promisable } from 'type-fest';
 export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaultChecked' | 'id' | 'onChange'> & {
     checked?: boolean | undefined;
@@ -25,5 +26,8 @@ export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaul
     readOnly?: boolean | undefined;
     style?: CSSProperties | undefined;
 };
-export declare function Checkbox({ checked, className, disabled, error, hasError, isErrorMessageHidden, isLight, isTransparent, isUndefinedWhenDisabled, label, name, onChange, readOnly, style, ...originalProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ checked, className, disabled, error, hasError, indeterminate, isErrorMessageHidden, isLight, isTransparent, isUndefinedWhenDisabled, label, name, onChange, readOnly, style, ...originalProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare const StyledRsuiteCheckbox: import("styled-components").StyledComponent<import("rsuite/esm/@types/common").RsRefForwardingComponent<"div", RsuiteCheckboxProps<ValueType>>, import("styled-components").DefaultTheme, import("./shared/types").CommonFieldStyleProps & {
+    $isChecked: boolean;
+}, never>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/fields/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/fields/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAWhE,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,IAAI,GAAG,UAAU,CAAC,GAAG;IAC/G,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CAClC,CAAA;AACD,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,oBAA4B,EAC5B,OAAe,EACf,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,aAAa,2CA2Cf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/fields/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAWhE,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,IAAI,GAAG,UAAU,CAAC,GAAG;IAC/G,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CAClC,CAAA;AACD,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,QAAgB,EAEhB,aAAqB,EACrB,oBAA4B,EAC5B,OAAe,EACf,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,aAAa,2CA4Cf;AAED,eAAO,MAAM,oBAAoB;;SAmGhC,CAAA"}

package/index.js

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
+import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as t from 'react';
 import t__default, { useMemo, PureComponent, forwardRef, useEffect, useReducer, useState, useRef, isValidElement, cloneElement, useLayoutEffect, useCallback, useImperativeHandle, createContext, useContext } from 'react';
@@ -54380,7 +54380,8 @@ function useFieldUndefineEffect(disabled, onChange, onDisable) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Checkbox({ checked = false, className, disabled = false, error, hasError = false, isErrorMessageHidden = false, isLight = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onChange, readOnly = false, style, ...originalProps }) {
+function Checkbox({ checked = false, className, disabled = false, error, hasError = false, // eslint-disable-next-line @typescript-eslint/naming-convention
+indeterminate = false, isErrorMessageHidden = false, isLight = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onChange, readOnly = false, style, ...originalProps }) {
     const controlledClassName = useMemo(()=>classnames('Field-Checkbox', className), [
         className
     ]);
@@ -54410,7 +54411,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
         children: [
             /*#__PURE__*/ jsx(StyledRsuiteCheckbox, {
                 $hasError: hasControlledError,
-                $isChecked: checked,
+                $isChecked: checked || indeterminate,
                 $isDisabled: disabled,
                 $isLight: isLight,
                 $isReadOnly: readOnly,
@@ -54418,6 +54419,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
                 checked: checked,
                 disabled: disabled,
                 id: name,
+                indeterminate: indeterminate,
                 name: name,
                 onChange: handleChange,
                 readOnly: readOnly,
@@ -54436,7 +54438,8 @@ const StyledRsuiteCheckbox = styled(Checkbox$1)`
     user-select: none;
   }
 
-  > .rs-checkbox-checker {
+  > .rs-checkbox-checker,
+  &.rs-checkbox-indeterminate > .rs-checkbox-checker {
     min-height: unset;
     padding: 0 0 0 24px;
 
@@ -76261,33 +76264,76 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
+const cellLoaderAnimation = keyframes`
+  from {
+    left: -100%;
+  }
+
+  to {
+    left: 100%;
+  }
+`;
+const CellLoader = styled.div`
+  background: ${(p)=>p.theme.color.gainsboro};
+  height: 22px;
+  overflow: hidden;
+  position: relative;
+
+  &:before {
+    animation: ${cellLoaderAnimation} 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    background: linear-gradient(to right, transparent 0%, ${(p)=>p.theme.color.white} 50%, transparent 100%);
+    content: '';
+    display: block;
+    height: 100%;
+    left: -100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+`;
+
+const Td$2 = styled.td.attrs((props)=>({
+        children: props.$isLoading ? /*#__PURE__*/ jsx(CellLoader, {}) : props.children
+    }))`
+  border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
+  border-right: 1px solid ${(p)=>p.theme.color.lightGray};
+  color: ${(p)=>p.theme.color.gunMetal};
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  max-width: 0;
+  overflow: hidden;
+  padding: 9px 10px;
+  text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /**
+    Dirty hack to prevent 'display: inline-flex;' from breaking row height.
+    This may be fixable by internal alignment cleanup in <Tag /> component.
+  */
+  > .Element-Tag {
+    align-self: unset;
+    vertical-align: bottom;
+  }
+`;
+
 const Table$1 = styled.table.attrs((props)=>({
         className: classnames('Table-SimpleTable', props.className)
     }))`
-  width: 100%;
-  table-layout: auto;
-  overflow: auto;
   border-collapse: separate;
+  overflow: auto;
+  table-layout: auto;
 `;
 const Head$1 = styled.thead`
   position: sticky;
   top: 0;
   z-index: 1;
 
-  th:first-child {
+  > th:first-child {
     border-left: 1px solid ${(p)=>p.theme.color.lightGray};
   }
 `;
-const SortContainer$1 = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: default;
-
-  &.cursor-pointer {
-    cursor: pointer;
-  }
-`;
 const Th$2 = styled.th`
   background-color: ${(p)=>p.theme.color.gainsboro};
   border-top: 1px solid ${(p)=>p.theme.color.lightGray};
@@ -76296,35 +76342,42 @@ const Th$2 = styled.th`
   color: ${(p)=>p.theme.color.slateGray};
   font-size: 13px;
   font-weight: 500;
-  padding: 10px;
+  line-height: 22px;
+  padding: 9px 10px;
   overflow: hidden;
   text-overflow: ellipsis;
+  user-select: none;
   white-space: nowrap;
+
+  ${(p)=>!!p.$width && css`
+      max-width: ${p.$width}px;
+      min-width: ${p.$width}px;
+      width: ${p.$width}px;
+    `}
+`;
+const SortContainer$1 = styled.div`
+  align-items: center;
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+
+  &.cursor-pointer {
+    cursor: pointer;
+  }
 `;
 const BodyTr$1 = styled.tr`
-  :hover {
+  &:hover {
     > td {
       background-color: ${(p)=>p.theme.color.blueYonder25};
     }
   }
-  td:first-child {
+  > td:first-child {
     border-left: 1px solid ${(p)=>p.theme.color.lightGray};
   }
 `;
-const Td$2 = styled.td`
-  font-size: 13px;
-  font-weight: 500;
-  color: ${(p)=>p.theme.color.gunMetal};
-  text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
-  border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
-  border-right: 1px solid ${(p)=>p.theme.color.lightGray};
-  overflow: hidden;
-  padding: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
 const SimpleTable = {
     BodyTr: BodyTr$1,
+    CellLoader,
     Head: Head$1,
     SortContainer: SortContainer$1,
     Table: Table$1,
@@ -76431,60 +76484,135 @@ function DataTable({ columns, data, initialSorting }) {
     });
 }
 
-function RowCheckbox({ className = '', disabled = false, isChecked = false, isIndeterminate = false, onChange = ()=>undefined }) {
-    return /*#__PURE__*/ jsx(Checkbox$1, {
-        checked: isChecked,
-        className: `${className} cursor-pointer`,
-        disabled: disabled,
-        indeterminate: isIndeterminate,
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        onChange: (_, __, event)=>onChange(event),
+function RowCheckbox({ onChange, ...nativeProps }) {
+    const handleOnChange = useCallback((_value, _checked, event)=>{
+        if (onChange) {
+            onChange(event);
+        }
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ jsx(RestyledRsuiteCheckbox, {
+        $isChecked: nativeProps.checked || nativeProps.indeterminate,
+        $isDisabled: nativeProps.disabled,
+        $isReadOnly: nativeProps.readOnly,
+        ...nativeProps,
+        onChange: handleOnChange,
         onClick: stopMouseEventPropagation
     });
 }
+const RestyledRsuiteCheckbox = styled(StyledRsuiteCheckbox)`
+  vertical-align: top;
+
+  > .rs-checkbox-checker,
+  &.rs-checkbox-indeterminate > .rs-checkbox-checker {
+    padding: 0;
+
+    > label {
+      > .rs-checkbox-wrapper {
+        bottom: 0;
+        top: 3px;
+
+        &:before {
+        }
+        &:after {
+          bottom: 0;
+          left: 0;
+          right: 0;
+          top: 0;
+        }
+
+        > .rs-checkbox-inner {
+          &:before {
+          }
+
+          /* Checkmark */
+          &:after {
+          }
+        }
+      }
+    }
+  }
+`;
 
 const Table = styled(SimpleTable.Table)`
   border-collapse: separate;
   border-spacing: 0 5px;
   table-layout: fixed;
+
+  ${(p)=>!!p.$withRowCheckbox && css`
+      > thead > tr > th:first-child {
+        padding: 0 0 0 8px;
+
+        > .rs-checkbox {
+          > .rs-checkbox-checker {
+            > label {
+              > .rs-checkbox-wrapper {
+                left: -8px;
+              }
+            }
+          }
+        }
+      }
+
+      > tbody > tr > td:first-child {
+        padding: 0 0 0 8px;
+      }
+    `}
 `;
 const Head = styled(SimpleTable.Head)`
-  th:last-child {
-    border-right: 1px solid ${(p)=>p.theme.color.lightGray};
+  > tr {
+    > th {
+      border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
+      border-right: none;
+      border-top: 1px solid ${(p)=>p.theme.color.lightGray};
+
+      &:first-child {
+        border-left: 1px solid ${(p)=>p.theme.color.lightGray};
+      }
+
+      &:last-child {
+        border-right: 1px solid ${(p)=>p.theme.color.lightGray};
+      }
+    }
   }
 `;
-const SortContainer = styled(SimpleTable.SortContainer)`
-  justify-content: start;
-  gap: 8px;
-`;
 const Th = styled(SimpleTable.Th)`
   background-color: ${(p)=>p.theme.color.white};
-  border-top: 1px solid ${(p)=>p.theme.color.lightGray};
-  border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
-  border-right: none;
-  padding: 2px 16px;
-  width: ${(p)=>p.$width}px;
+  line-height: 22px;
+  padding: 9px 16px;
+`;
+const SortContainer = styled(SimpleTable.SortContainer)`
+  gap: 8px;
+  justify-content: start;
 `;
 const BodyTr = styled(SimpleTable.BodyTr)`
-  td:first-child {
-    border-left: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
-  }
-  td:last-child {
-    border-right: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
-    overflow: visible;
+  > td {
+    border-bottom: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
+    border-right: none;
+    border-top: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
+    ${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset;`}
+
+    &:first-child {
+      border-left: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
+      ${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset, 1px 0 0 ${p.theme.color.blueGray} inset;`}
+    }
+
+    &:last-child {
+      border-right: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
+      ${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset, -1px 0 0 ${p.theme.color.blueGray} inset;`}
+      overflow: visible;
+    }
   }
 `;
 const Td = styled(SimpleTable.Td)`
   background-color: ${(p)=>p.theme.color.cultured};
-  border-top: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
-  border-bottom: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
-  border-right: none;
-  padding: 4px 16px;
-  border-right: ${(p)=>p.$hasRightBorder ? `1px solid ${p.theme.color.lightGray}` : ''};
-  width: ${(p)=>p.$width}px;
+  ${(p)=>!!p.$hasRightBorder && `border-right: 1px solid ${p.theme.color.lightGray} !important;`}
+  padding: 9px 16px;
 `;
 const TableWithSelectableRows = {
     BodyTr,
+    CellLoader: SimpleTable.CellLoader,
     Head,
     RowCheckbox,
     SortContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "17.2.2",
+  "version": "18.0.1",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {

package/tables/SimpleTable/CellLoader.d.ts

@@ -0,0 +1,2 @@
+export declare const CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CellLoader.d.ts.map

package/tables/SimpleTable/CellLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellLoader.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/CellLoader.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,yGAiBtB,CAAA"}

package/tables/SimpleTable/Td.d.ts

@@ -0,0 +1,6 @@
+import type { TdHTMLAttributes } from 'react';
+export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TdHTMLAttributes<HTMLTableCellElement> & {
+    $isCenter?: boolean | undefined;
+    $isLoading?: boolean | undefined;
+}, keyof TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
+//# sourceMappingURL=Td.d.ts.map

package/tables/SimpleTable/Td.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Td.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/Td.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAM7C,eAAO,MAAM,EAAE;gBAHD,OAAO,GAAG,SAAS;iBAClB,OAAO,GAAG,SAAS;6EA0BjC,CAAA"}

package/tables/{SimpleTable.d.ts → SimpleTable/index.d.ts}

@@ -1,11 +1,16 @@
+/// <reference types="react" />
 export declare const SimpleTable: {
     BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
+    CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
     Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
     SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
     Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
-    Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
-        $isCenter?: boolean;
+    Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
+        $isCenter?: boolean | undefined;
+        $isLoading?: boolean | undefined;
+    }, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
+    Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
+        $width?: number | undefined;
     }, never>;
-    Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
 };
-//# sourceMappingURL=SimpleTable.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/tables/SimpleTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/index.tsx"],"names":[],"mappings":";AA0EA,eAAO,MAAM,WAAW;;;;;;;;;;;iBA/Cb,MAAM,GAAG,SAAS;;CAuD5B,CAAA"}

package/tables/TableWithSelectableRows/RowCheckbox.d.ts

@@ -1,10 +1,7 @@
-import { type HTMLProps } from 'react';
-export type RowCheckboxProps = {
-    className?: string;
-    disabled?: boolean;
-    isChecked?: boolean;
-    isIndeterminate?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+import { type ChangeEvent, type HTMLProps } from 'react';
+import { type CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
+export type RowCheckboxProps = Omit<RsuiteCheckboxProps, 'onClick' | 'onChange'> & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
 };
-export declare function RowCheckbox({ className, disabled, isChecked, isIndeterminate, onChange }: RowCheckboxProps & HTMLProps<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare function RowCheckbox({ onChange, ...nativeProps }: RowCheckboxProps & HTMLProps<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RowCheckbox.d.ts.map

package/tables/TableWithSelectableRows/RowCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowCheckbox.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/RowCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAChE,CAAA;AACD,wBAAgB,WAAW,CAAC,EAC1B,SAAc,EACd,QAAgB,EAChB,SAAiB,EACjB,eAAuB,EACvB,QAA0B,EAC3B,EAAE,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,2CAYhD"}
+{"version":3,"file":"RowCheckbox.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/RowCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAKlE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAEjF,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACxE,CAAA;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAAE,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,2CAoBvG"}

package/tables/TableWithSelectableRows/index.d.ts

@@ -1,22 +1,24 @@
+/// <reference types="react" />
 import { RowCheckbox } from './RowCheckbox';
-export { RowCheckbox };
 export declare const TableWithSelectableRows: {
     BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
         $isHighlighted?: boolean;
     }, never>;
+    CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
     Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
     RowCheckbox: typeof RowCheckbox;
     SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-    Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
-    Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
-        $isCenter?: boolean;
-    } & {
-        $hasRightBorder: boolean;
-        $isHighlighted?: boolean;
-        $width: number;
+    Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
+        $withRowCheckbox?: boolean;
     }, never>;
+    Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
+        $isCenter?: boolean | undefined;
+        $isLoading?: boolean | undefined;
+    } & {
+        $hasRightBorder?: boolean;
+    }, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
     Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
-        $width: number;
+        $width?: number | undefined;
     }, never>;
 };
 //# sourceMappingURL=index.d.ts.map

package/tables/TableWithSelectableRows/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,OAAO,EAAE,WAAW,EAAE,CAAA;AAkDtB,eAAO,MAAM,uBAAuB;;yBAxByB,OAAO;;;;;;;;;yBAYf,OAAO;yBAAmB,OAAO;gBAAU,MAAM;;;gBArB1D,MAAM;;CAyCjD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/TableWithSelectableRows/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAkG3C,eAAO,MAAM,uBAAuB;;yBAnCjB,OAAO;;;;;;;2BA3DL,OAAO;;;;;;0BAuFR,OAAO;;;;;CAgB1B,CAAA"}

package/tables/SimpleTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleTable.d.ts","sourceRoot":"","sources":["../../src/tables/SimpleTable.tsx"],"names":[],"mappings":"AAuEA,eAAO,MAAM,WAAW;;;;;;oBAbW,OAAO;;;CAoBzC,CAAA"}