@mtes-mct/monitor-ui 17.2.1 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [17.2.2](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.1...v17.2.2) (2024-05-21)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **elements:** fix IconButton border ([f55eb2c](https://github.com/MTES-MCT/monitor-ui/commit/f55eb2ca036cd0c1c06b78eaaacfc1983e48ffb3))
7
+
8
+ ## [17.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v17.2.0...v17.2.1) (2024-05-21)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * **types:** fix AnyEnum key type ([de3f0cc](https://github.com/MTES-MCT/monitor-ui/commit/de3f0cce9a5228db0e1c48a7d6a7f4ec662b7ab0))
14
+
1
15
  ## [17.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v17.1.1...v17.2.0) (2024-05-21)
2
16
 
3
17
 
@@ -1,5 +1,6 @@
1
1
  import { type CSSProperties } from 'react';
2
2
  import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
3
+ import type { ValueType } from 'rsuite/esm/Checkbox';
3
4
  import type { Promisable } from 'type-fest';
4
5
  export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaultChecked' | 'id' | 'onChange'> & {
5
6
  checked?: boolean | undefined;
@@ -25,5 +26,8 @@ export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaul
25
26
  readOnly?: boolean | undefined;
26
27
  style?: CSSProperties | undefined;
27
28
  };
28
- 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;
29
+ 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;
30
+ 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 & {
31
+ $isChecked: boolean;
32
+ }, never>;
29
33
  //# sourceMappingURL=Checkbox.d.ts.map
@@ -1 +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"}
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;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 CHANGED
@@ -1,4 +1,4 @@
1
- import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
1
+ import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as t from 'react';
4
4
  import t__default, { useMemo, PureComponent, forwardRef, useEffect, useReducer, useState, useRef, isValidElement, cloneElement, useLayoutEffect, useCallback, useImperativeHandle, createContext, useContext } from 'react';
@@ -53373,7 +53373,8 @@ const PADDING$1 = {
53373
53373
  // We can't use $-prefixed props here for some reason (maybe because the `as` prop exclude them?).
53374
53374
  const StyledButton = styled.button`
53375
53375
  align-items: center;
53376
- border: solid ${(p)=>p.isCompact ? 0 : 1}px transparent;
53376
+ border-style: solid;
53377
+ border-width: ${(p)=>p.isCompact ? 0 : 1}px;
53377
53378
  display: flex;
53378
53379
  justify-content: center;
53379
53380
  padding: ${(p)=>p.isCompact ? 0 : PADDING$1[p.size]};
@@ -54379,7 +54380,8 @@ function useFieldUndefineEffect(disabled, onChange, onDisable) {
54379
54380
  return cleanText.length > 0 ? cleanText : undefined;
54380
54381
  }
54381
54382
 
54382
- 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 }) {
54383
+ function Checkbox({ checked = false, className, disabled = false, error, hasError = false, // eslint-disable-next-line @typescript-eslint/naming-convention
54384
+ indeterminate = false, isErrorMessageHidden = false, isLight = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onChange, readOnly = false, style, ...originalProps }) {
54383
54385
  const controlledClassName = useMemo(()=>classnames('Field-Checkbox', className), [
54384
54386
  className
54385
54387
  ]);
@@ -54409,7 +54411,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
54409
54411
  children: [
54410
54412
  /*#__PURE__*/ jsx(StyledRsuiteCheckbox, {
54411
54413
  $hasError: hasControlledError,
54412
- $isChecked: checked,
54414
+ $isChecked: checked || indeterminate,
54413
54415
  $isDisabled: disabled,
54414
54416
  $isLight: isLight,
54415
54417
  $isReadOnly: readOnly,
@@ -54417,6 +54419,7 @@ function Checkbox({ checked = false, className, disabled = false, error, hasErro
54417
54419
  checked: checked,
54418
54420
  disabled: disabled,
54419
54421
  id: name,
54422
+ indeterminate: indeterminate,
54420
54423
  name: name,
54421
54424
  onChange: handleChange,
54422
54425
  readOnly: readOnly,
@@ -54435,7 +54438,8 @@ const StyledRsuiteCheckbox = styled(Checkbox$1)`
54435
54438
  user-select: none;
54436
54439
  }
54437
54440
 
54438
- > .rs-checkbox-checker {
54441
+ > .rs-checkbox-checker,
54442
+ &.rs-checkbox-indeterminate > .rs-checkbox-checker {
54439
54443
  min-height: unset;
54440
54444
  padding: 0 0 0 24px;
54441
54445
 
@@ -76260,33 +76264,76 @@ function useReactTable(options) {
76260
76264
  return tableRef.current;
76261
76265
  }
76262
76266
 
76267
+ const cellLoaderAnimation = keyframes`
76268
+ from {
76269
+ left: -100%;
76270
+ }
76271
+
76272
+ to {
76273
+ left: 100%;
76274
+ }
76275
+ `;
76276
+ const CellLoader = styled.div`
76277
+ background: ${(p)=>p.theme.color.gainsboro};
76278
+ height: 22px;
76279
+ overflow: hidden;
76280
+ position: relative;
76281
+
76282
+ &:before {
76283
+ animation: ${cellLoaderAnimation} 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
76284
+ background: linear-gradient(to right, transparent 0%, ${(p)=>p.theme.color.white} 50%, transparent 100%);
76285
+ content: '';
76286
+ display: block;
76287
+ height: 100%;
76288
+ left: -100%;
76289
+ position: absolute;
76290
+ top: 0;
76291
+ width: 100%;
76292
+ }
76293
+ `;
76294
+
76295
+ const Td$2 = styled.td.attrs((props)=>({
76296
+ children: props.$isLoading ? /*#__PURE__*/ jsx(CellLoader, {}) : props.children
76297
+ }))`
76298
+ border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
76299
+ border-right: 1px solid ${(p)=>p.theme.color.lightGray};
76300
+ color: ${(p)=>p.theme.color.gunMetal};
76301
+ font-size: 13px;
76302
+ font-weight: 500;
76303
+ line-height: 22px;
76304
+ max-width: 0;
76305
+ overflow: hidden;
76306
+ padding: 9px 10px;
76307
+ text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
76308
+ text-overflow: ellipsis;
76309
+ white-space: nowrap;
76310
+
76311
+ /**
76312
+ Dirty hack to prevent 'display: inline-flex;' from breaking row height.
76313
+ This may be fixable by internal alignment cleanup in <Tag /> component.
76314
+ */
76315
+ > .Element-Tag {
76316
+ align-self: unset;
76317
+ vertical-align: bottom;
76318
+ }
76319
+ `;
76320
+
76263
76321
  const Table$1 = styled.table.attrs((props)=>({
76264
76322
  className: classnames('Table-SimpleTable', props.className)
76265
76323
  }))`
76266
- width: 100%;
76267
- table-layout: auto;
76268
- overflow: auto;
76269
76324
  border-collapse: separate;
76325
+ overflow: auto;
76326
+ table-layout: auto;
76270
76327
  `;
76271
76328
  const Head$1 = styled.thead`
76272
76329
  position: sticky;
76273
76330
  top: 0;
76274
76331
  z-index: 1;
76275
76332
 
76276
- th:first-child {
76333
+ > th:first-child {
76277
76334
  border-left: 1px solid ${(p)=>p.theme.color.lightGray};
76278
76335
  }
76279
76336
  `;
76280
- const SortContainer$1 = styled.div`
76281
- display: flex;
76282
- justify-content: space-between;
76283
- align-items: center;
76284
- cursor: default;
76285
-
76286
- &.cursor-pointer {
76287
- cursor: pointer;
76288
- }
76289
- `;
76290
76337
  const Th$2 = styled.th`
76291
76338
  background-color: ${(p)=>p.theme.color.gainsboro};
76292
76339
  border-top: 1px solid ${(p)=>p.theme.color.lightGray};
@@ -76295,35 +76342,36 @@ const Th$2 = styled.th`
76295
76342
  color: ${(p)=>p.theme.color.slateGray};
76296
76343
  font-size: 13px;
76297
76344
  font-weight: 500;
76298
- padding: 10px;
76345
+ line-height: 22px;
76346
+ padding: 9px 10px;
76299
76347
  overflow: hidden;
76300
76348
  text-overflow: ellipsis;
76349
+ ${(p)=>!!p.$width && `width: ${p.$width}px;`}
76301
76350
  white-space: nowrap;
76302
76351
  `;
76352
+ const SortContainer$1 = styled.div`
76353
+ align-items: center;
76354
+ cursor: default;
76355
+ display: flex;
76356
+ justify-content: space-between;
76357
+
76358
+ &.cursor-pointer {
76359
+ cursor: pointer;
76360
+ }
76361
+ `;
76303
76362
  const BodyTr$1 = styled.tr`
76304
- :hover {
76363
+ &:hover {
76305
76364
  > td {
76306
76365
  background-color: ${(p)=>p.theme.color.blueYonder25};
76307
76366
  }
76308
76367
  }
76309
- td:first-child {
76368
+ > td:first-child {
76310
76369
  border-left: 1px solid ${(p)=>p.theme.color.lightGray};
76311
76370
  }
76312
76371
  `;
76313
- const Td$2 = styled.td`
76314
- font-size: 13px;
76315
- font-weight: 500;
76316
- color: ${(p)=>p.theme.color.gunMetal};
76317
- text-align: ${(p)=>p.$isCenter ? 'center' : 'left'};
76318
- border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
76319
- border-right: 1px solid ${(p)=>p.theme.color.lightGray};
76320
- overflow: hidden;
76321
- padding: 10px;
76322
- text-overflow: ellipsis;
76323
- white-space: nowrap;
76324
- `;
76325
76372
  const SimpleTable = {
76326
76373
  BodyTr: BodyTr$1,
76374
+ CellLoader,
76327
76375
  Head: Head$1,
76328
76376
  SortContainer: SortContainer$1,
76329
76377
  Table: Table$1,
@@ -76430,60 +76478,135 @@ function DataTable({ columns, data, initialSorting }) {
76430
76478
  });
76431
76479
  }
76432
76480
 
76433
- function RowCheckbox({ className = '', disabled = false, isChecked = false, isIndeterminate = false, onChange = ()=>undefined }) {
76434
- return /*#__PURE__*/ jsx(Checkbox$1, {
76435
- checked: isChecked,
76436
- className: `${className} cursor-pointer`,
76437
- disabled: disabled,
76438
- indeterminate: isIndeterminate,
76439
- // eslint-disable-next-line @typescript-eslint/naming-convention
76440
- onChange: (_, __, event)=>onChange(event),
76481
+ function RowCheckbox({ onChange, ...nativeProps }) {
76482
+ const handleOnChange = useCallback((_value, _checked, event)=>{
76483
+ if (onChange) {
76484
+ onChange(event);
76485
+ }
76486
+ }, [
76487
+ onChange
76488
+ ]);
76489
+ return /*#__PURE__*/ jsx(RestyledRsuiteCheckbox, {
76490
+ $isChecked: nativeProps.checked || nativeProps.indeterminate,
76491
+ $isDisabled: nativeProps.disabled,
76492
+ $isReadOnly: nativeProps.readOnly,
76493
+ ...nativeProps,
76494
+ onChange: handleOnChange,
76441
76495
  onClick: stopMouseEventPropagation
76442
76496
  });
76443
76497
  }
76498
+ const RestyledRsuiteCheckbox = styled(StyledRsuiteCheckbox)`
76499
+ vertical-align: top;
76500
+
76501
+ > .rs-checkbox-checker,
76502
+ &.rs-checkbox-indeterminate > .rs-checkbox-checker {
76503
+ padding: 0;
76504
+
76505
+ > label {
76506
+ > .rs-checkbox-wrapper {
76507
+ bottom: 0;
76508
+ top: 3px;
76509
+
76510
+ &:before {
76511
+ }
76512
+ &:after {
76513
+ bottom: 0;
76514
+ left: 0;
76515
+ right: 0;
76516
+ top: 0;
76517
+ }
76518
+
76519
+ > .rs-checkbox-inner {
76520
+ &:before {
76521
+ }
76522
+
76523
+ /* Checkmark */
76524
+ &:after {
76525
+ }
76526
+ }
76527
+ }
76528
+ }
76529
+ }
76530
+ `;
76444
76531
 
76445
76532
  const Table = styled(SimpleTable.Table)`
76446
76533
  border-collapse: separate;
76447
76534
  border-spacing: 0 5px;
76448
76535
  table-layout: fixed;
76536
+
76537
+ ${(p)=>!!p.$withRowCheckbox && `
76538
+ > thead > tr > th:first-child {
76539
+ padding: 0 0 0 8px;
76540
+
76541
+ > .rs-checkbox {
76542
+ > .rs-checkbox-checker {
76543
+ > label {
76544
+ > .rs-checkbox-wrapper {
76545
+ left: -8px;
76546
+ }
76547
+ }
76548
+ }
76549
+ }
76550
+ }
76551
+
76552
+ > tbody > tr > td:first-child {
76553
+ padding: 0 0 0 8px;
76554
+ }
76555
+ `}
76449
76556
  `;
76450
76557
  const Head = styled(SimpleTable.Head)`
76451
- th:last-child {
76452
- border-right: 1px solid ${(p)=>p.theme.color.lightGray};
76558
+ > tr {
76559
+ > th {
76560
+ border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
76561
+ border-right: none;
76562
+ border-top: 1px solid ${(p)=>p.theme.color.lightGray};
76563
+
76564
+ &:first-child {
76565
+ border-left: 1px solid ${(p)=>p.theme.color.lightGray};
76566
+ }
76567
+
76568
+ &:last-child {
76569
+ border-right: 1px solid ${(p)=>p.theme.color.lightGray};
76570
+ }
76571
+ }
76453
76572
  }
76454
76573
  `;
76455
- const SortContainer = styled(SimpleTable.SortContainer)`
76456
- justify-content: start;
76457
- gap: 8px;
76458
- `;
76459
76574
  const Th = styled(SimpleTable.Th)`
76460
76575
  background-color: ${(p)=>p.theme.color.white};
76461
- border-top: 1px solid ${(p)=>p.theme.color.lightGray};
76462
- border-bottom: 1px solid ${(p)=>p.theme.color.lightGray};
76463
- border-right: none;
76464
- padding: 2px 16px;
76465
- width: ${(p)=>p.$width}px;
76576
+ line-height: 22px;
76577
+ padding: 9px 16px;
76578
+ `;
76579
+ const SortContainer = styled(SimpleTable.SortContainer)`
76580
+ gap: 8px;
76581
+ justify-content: start;
76466
76582
  `;
76467
76583
  const BodyTr = styled(SimpleTable.BodyTr)`
76468
- td:first-child {
76469
- border-left: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
76470
- }
76471
- td:last-child {
76472
- border-right: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
76473
- overflow: visible;
76584
+ > td {
76585
+ border-bottom: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
76586
+ border-right: none;
76587
+ border-top: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
76588
+ ${(p)=>!!p.$isHighlighted && `box-shadow: 0 -1px 0 ${p.theme.color.blueGray} inset, 0 1px 0 ${p.theme.color.blueGray} inset;`}
76589
+
76590
+ &:first-child {
76591
+ border-left: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
76592
+ ${(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;`}
76593
+ }
76594
+
76595
+ &:last-child {
76596
+ border-right: 1px solid ${(p)=>p.$isHighlighted ? p.theme.color.blueGray : p.theme.color.lightGray};
76597
+ ${(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;`}
76598
+ overflow: visible;
76599
+ }
76474
76600
  }
76475
76601
  `;
76476
76602
  const Td = styled(SimpleTable.Td)`
76477
76603
  background-color: ${(p)=>p.theme.color.cultured};
76478
- border-top: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
76479
- border-bottom: ${(p)=>p.$isHighlighted ? `2px solid ${p.theme.color.blueGray}` : `1px solid ${p.theme.color.lightGray}`};
76480
- border-right: none;
76481
- padding: 4px 16px;
76482
- border-right: ${(p)=>p.$hasRightBorder ? `1px solid ${p.theme.color.lightGray}` : ''};
76483
- width: ${(p)=>p.$width}px;
76604
+ ${(p)=>!!p.$hasRightBorder && `border-right: 1px solid ${p.theme.color.lightGray};`}
76605
+ padding: 9px 16px;
76484
76606
  `;
76485
76607
  const TableWithSelectableRows = {
76486
76608
  BodyTr,
76609
+ CellLoader: SimpleTable.CellLoader,
76487
76610
  Head,
76488
76611
  RowCheckbox,
76489
76612
  SortContainer,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mtes-mct/monitor-ui",
3
3
  "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
4
- "version": "17.2.1",
4
+ "version": "18.0.0",
5
5
  "license": "AGPL-3.0",
6
6
  "type": "module",
7
7
  "engines": {
@@ -0,0 +1,2 @@
1
+ export declare const CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
+ //# sourceMappingURL=CellLoader.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CellLoader.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/CellLoader.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,yGAiBtB,CAAA"}
@@ -0,0 +1,6 @@
1
+ import type { TdHTMLAttributes } from 'react';
2
+ export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TdHTMLAttributes<HTMLTableCellElement> & {
3
+ $isCenter?: boolean | undefined;
4
+ $isLoading?: boolean | undefined;
5
+ }, keyof TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
6
+ //# sourceMappingURL=Td.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,11 +1,16 @@
1
+ /// <reference types="react" />
1
2
  export declare const SimpleTable: {
2
3
  BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
4
+ CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
5
  Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
4
6
  SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
7
  Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
6
- Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
7
- $isCenter?: boolean;
8
+ Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
9
+ $isCenter?: boolean | undefined;
10
+ $isLoading?: boolean | undefined;
11
+ }, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
12
+ Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
13
+ $width?: number | undefined;
8
14
  }, never>;
9
- Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
10
15
  };
11
- //# sourceMappingURL=SimpleTable.d.ts.map
16
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tables/SimpleTable/index.tsx"],"names":[],"mappings":";AAkEA,eAAO,MAAM,WAAW;;;;;;;;;;;iBAvCb,MAAM,GAAG,SAAS;;CA+C5B,CAAA"}
@@ -1,10 +1,7 @@
1
- import { type HTMLProps } from 'react';
2
- export type RowCheckboxProps = {
3
- className?: string;
4
- disabled?: boolean;
5
- isChecked?: boolean;
6
- isIndeterminate?: boolean;
7
- onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
1
+ import { type ChangeEvent, type HTMLProps } from 'react';
2
+ import { type CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
3
+ export type RowCheckboxProps = Omit<RsuiteCheckboxProps, 'onClick' | 'onChange'> & {
4
+ onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
8
5
  };
9
- export declare function RowCheckbox({ className, disabled, isChecked, isIndeterminate, onChange }: RowCheckboxProps & HTMLProps<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
6
+ export declare function RowCheckbox({ onChange, ...nativeProps }: RowCheckboxProps & HTMLProps<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
10
7
  //# sourceMappingURL=RowCheckbox.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,22 +1,24 @@
1
+ /// <reference types="react" />
1
2
  import { RowCheckbox } from './RowCheckbox';
2
- export { RowCheckbox };
3
3
  export declare const TableWithSelectableRows: {
4
4
  BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
5
5
  $isHighlighted?: boolean;
6
6
  }, never>;
7
+ CellLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
8
  Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
8
9
  RowCheckbox: typeof RowCheckbox;
9
10
  SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
- Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
11
- Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
12
- $isCenter?: boolean;
13
- } & {
14
- $hasRightBorder: boolean;
15
- $isHighlighted?: boolean;
16
- $width: number;
11
+ Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
12
+ $withRowCheckbox?: boolean;
17
13
  }, never>;
14
+ Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, import("react").TdHTMLAttributes<HTMLTableCellElement> & {
15
+ $isCenter?: boolean | undefined;
16
+ $isLoading?: boolean | undefined;
17
+ } & {
18
+ $hasRightBorder?: boolean;
19
+ }, keyof import("react").TdHTMLAttributes<HTMLTableCellElement> | "$isCenter" | "$isLoading">;
18
20
  Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
19
- $width: number;
21
+ $width?: number | undefined;
20
22
  }, never>;
21
23
  };
22
24
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SimpleTable.d.ts","sourceRoot":"","sources":["../../src/tables/SimpleTable.tsx"],"names":[],"mappings":"AAuEA,eAAO,MAAM,WAAW;;;;;;oBAbW,OAAO;;;CAoBzC,CAAA"}