@mtes-mct/monitor-ui 24.17.1 → 24.18.1

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [24.18.0](https://github.com/MTES-MCT/monitor-ui/compare/v24.17.1...v24.18.0) (2025-05-06)
+
+### Features
+
+* **components:** add option display props. refacto to use override value, label and children key ([266d620](https://github.com/MTES-MCT/monitor-ui/commit/266d6201f61cdd70cf0c6fefef2b9fa4e6f9d28f))
+* **components:** add option display props. refacto to use override value, label and children key ([728ec63](https://github.com/MTES-MCT/monitor-ui/commit/728ec63e106ad5d164be5f74b316a1efc51a7625))
+
+### Bug Fixes
+
+* **components:** move checkpicker css ([ce6c3f9](https://github.com/MTES-MCT/monitor-ui/commit/ce6c3f9b692b2a75f092049aa36177af4e00e686))
+* **components:** move computing disabled values on value setting instead of onChange. Fix formik story ([5e3cf81](https://github.com/MTES-MCT/monitor-ui/commit/5e3cf813299a038165f3cca6627678ce31353db1))
+* **fields:** fix checktreepicker style ([2706b3d](https://github.com/MTES-MCT/monitor-ui/commit/2706b3d08a5af32e9dc7b802955672700e1ebd02))
+* **fields:** fix style with isLight and isTransparent props ([ee4d1db](https://github.com/MTES-MCT/monitor-ui/commit/ee4d1dbee3f9520f9e8f706c55354c1038f1c5b6))
+
+### Buid System & Dependencies
+
+* **deps:** bump @babel/runtime in the non-major-dependencies group ([5828afa](https://github.com/MTES-MCT/monitor-ui/commit/5828afae412d302a136c07767568e1c04437e279))
+* **dev-deps:** bump the all-non-major-dependencies group ([651d1e6](https://github.com/MTES-MCT/monitor-ui/commit/651d1e60730c0685c9e84454ae411c2aed740a8c))
+
+## [24.17.1](https://github.com/MTES-MCT/monitor-ui/compare/v24.17.0...v24.17.1) (2025-05-02)
+
+### Buid System & Dependencies
+
+* **deps:** bump @tanstack/react-table ([652fa3c](https://github.com/MTES-MCT/monitor-ui/commit/652fa3cf4dd1b9bd67168f088aff1cb00b6f307b))
+* **dev-deps:** bump the all-non-major-dependencies group ([44922f2](https://github.com/MTES-MCT/monitor-ui/commit/44922f2e4127eb1eac1e3060eedd6cc45e6731c9))
+* **dev-deps:** bump the all-non-major-dependencies group ([b31336b](https://github.com/MTES-MCT/monitor-ui/commit/b31336b8dabfe48747548aa5198a559ac6dc77b6))
+* **dev-deps:** bump the non-major-dev-dependencies group across 1 directory with 17 updates ([c2ae567](https://github.com/MTES-MCT/monitor-ui/commit/c2ae567788228b0b67a738823a6a1c892bf8979f))
+* **dev-deps:** bump vite ([04cc7d4](https://github.com/MTES-MCT/monitor-ui/commit/04cc7d4b90f0f317fe481da26890c86c8412d9b4))
+* **dev-deps:** bump vite in the npm_and_yarn group ([3aef1de](https://github.com/MTES-MCT/monitor-ui/commit/3aef1de215e81c39cf2880c3e486ee2a4537b098))
+
 ## [24.16.0](https://github.com/MTES-MCT/monitor-ui/compare/v24.15.1...v24.16.0) (2025-04-02)
 
 ### Features

package/fields/CheckTreePicker/CheckTreePickerBox.d.ts

@@ -0,0 +1,21 @@
+interface CheckPickerBoxProps {
+    boxRef: React.RefObject<HTMLDivElement> | undefined;
+    children?: React.ReactNode;
+    className: string | undefined;
+    disabled: boolean;
+    error: string | undefined;
+    hasError: boolean;
+    isErrorMessageHidden: boolean;
+    isLabelHidden?: boolean;
+    isLight: boolean;
+    isRequired?: boolean;
+    isTransparent: boolean;
+    label: string;
+    name: string;
+    popupWidth: number | undefined;
+    readOnly: boolean;
+    style: React.CSSProperties | undefined;
+}
+export declare function CheckTreePickerBox({ boxRef, children, className, disabled, error, hasError, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, label, name, popupWidth, readOnly, style }: CheckPickerBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckTreePickerBox.d.ts.map

package/fields/CheckTreePicker/CheckTreePickerBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckTreePickerBox.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/CheckTreePickerBox.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,QAAQ,EAAE,OAAO,CAAA;IACjB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;CACvC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,UAAU,EACV,aAAa,EACb,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,KAAK,EACN,EAAE,mBAAmB,2CAqBrB"}

package/fields/CheckTreePicker/RsuiteCheckTreePickerBox.d.ts

@@ -0,0 +1,3 @@
+import type { CommonPickerFieldStyleProps } from '@fields/shared/types';
+export declare const RsuiteCheckTreePickerBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CommonPickerFieldStyleProps>> & string;
+//# sourceMappingURL=RsuiteCheckTreePickerBox.d.ts.map

package/fields/CheckTreePicker/RsuiteCheckTreePickerBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RsuiteCheckTreePickerBox.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/RsuiteCheckTreePickerBox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAA;AAEvE,eAAO,MAAM,wBAAwB,gQAkRpC,CAAA"}

package/fields/CheckTreePicker/index.d.ts

@@ -2,7 +2,6 @@ import { type CheckTreePickerProps as RsuiteCheckTreePickerProps } from 'rsuite'
 import type { TreeOption } from './types';
 import type { Promisable } from 'type-fest';
 export type CheckTreePickerProps = Omit<RsuiteCheckTreePickerProps, 'as' | 'container' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'renderMenuItem' | 'value'> & {
-    childrenKey?: string;
     error?: string | undefined;
     isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
@@ -13,12 +12,13 @@ export type CheckTreePickerProps = Omit<RsuiteCheckTreePickerProps, 'as' | 'cont
     isUndefinedWhenDisabled?: boolean | undefined;
     label: string;
     name: string;
-    onChange?: (nextValue: TreeOption[] | undefined) => Promisable<void>;
+    onChange?: (nextValue: any[] | undefined) => Promisable<void>;
     options: TreeOption[];
     popupWidth?: number | undefined;
     renderedChildrenValue?: string;
     renderedValue?: string;
+    shouldShowLabels?: boolean;
     value?: TreeOption[] | undefined;
 };
-export declare function CheckTreePicker({ childrenKey, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isMultiSelect, isRequired, isTransparent, isUndefinedWhenDisabled, label, onChange, options, popupWidth, readOnly, renderedChildrenValue, renderedValue, style, value, ...originalProps }: CheckTreePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckTreePicker({ childrenKey, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isMultiSelect, isRequired, isTransparent, isUndefinedWhenDisabled, label, labelKey, onChange, options, popupWidth, readOnly, renderedChildrenValue, renderedValue, shouldShowLabels, style, value, valueKey, ...originalProps }: CheckTreePickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/fields/CheckTreePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,oBAAoB,IAAI,0BAA0B,EACxD,MAAM,QAAQ,CAAA;AAQf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,0BAA0B,EAC1B,IAAI,GAAG,WAAW,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,gBAAgB,GAAG,OAAO,CAC9F,GAAG;IACF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,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,UAAU,EAAE,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IACpE,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,UAAU,EAAE,GAAG,SAAS,CAAA;CACjC,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAwB,EACxB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,aAAoB,EACpB,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAgB,EAChB,qBAAyC,EACzC,aAA4B,EAC5B,KAAK,EACL,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,oBAAoB,2CAwGtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,oBAAoB,IAAI,0BAA0B,EACxD,MAAM,QAAQ,CAAA;AAYf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,0BAA0B,EAC1B,IAAI,GAAG,WAAW,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,gBAAgB,GAAG,OAAO,CAC9F,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,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,GAAG,EAAE,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC7D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,EAAE,GAAG,SAAS,CAAA;CACjC,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAwB,EACxB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,aAAoB,EACpB,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,QAAkB,EAClB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAgB,EAChB,qBAAyC,EACzC,aAA4B,EAC5B,gBAAuB,EACvB,KAAK,EACL,KAAK,EACL,QAAkB,EAClB,GAAG,aAAa,EACjB,EAAE,oBAAoB,2CA+JtB"}

package/fields/CheckTreePicker/types.d.ts

@@ -1,8 +1,4 @@
-export type TreeOption = ({
-    label: string;
-    value: string | number;
-} & Record<string, TreeOption[] | undefined>) | {
-    label: string;
-    value: string | number;
+export type TreeOption = {
+    [key: string]: string | number | TreeOption[] | undefined;
 };
 //# sourceMappingURL=types.d.ts.map

package/fields/CheckTreePicker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,CAAC;IACC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,CAAC,GAC7C;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,UAAU,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,EAAE,GAAG,SAAS,CAAA;CAC1D,CAAA"}

package/fields/CheckTreePicker/utils.d.ts

@@ -1,7 +1,8 @@
 import type { TreeOption } from './types';
 import type { ValueType } from 'rsuite/esm/CheckTreePicker';
-export declare function fromRsuiteValue(selectedValues: ValueType, allOptions: TreeOption[], childrenKey?: string): TreeOption[] | undefined;
-export declare function getTreeOptionsBySelectedValues(selectedValues: ValueType | undefined, options: TreeOption[], childrenKey?: string): TreeOption[];
-export declare function toRsuiteValue(uiValues: TreeOption[] | undefined, childrenKey?: string): ValueType | undefined;
-export declare function computeDisabledValues(isMultiSelect: boolean, value: ValueType | undefined, options: TreeOption[], childrenKey?: string): (string | number)[];
+export declare function fromRsuiteValue(selectedValues: ValueType, allOptions: TreeOption[], childrenKey?: string, valueKey?: string | number, labelKey?: string): TreeOption[] | undefined;
+export declare function getTreeOptionsBySelectedValues(selectedValues: ValueType | undefined, options: TreeOption[], childrenKey?: string, valueKey?: string | number, labelKey?: string): TreeOption[];
+export declare function toRsuiteValue(uiValues: TreeOption[] | undefined, childrenKey?: string, valueKey?: string): ValueType | undefined;
+export declare function computeDisabledValues(isMultiSelect: boolean, value: ValueType | undefined, options: TreeOption[], childrenKey?: string, valueKey?: string, labelKey?: string): (string | number)[];
+export declare function getOptionsToDisplay(allOptions: TreeOption[], selectedOptions: TreeOption[], childrenKey?: string, valueKey?: string): TreeOption[];
 //# sourceMappingURL=utils.d.ts.map

package/fields/CheckTreePicker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE3D,wBAAgB,eAAe,CAC7B,cAAc,EAAE,SAAS,EACzB,UAAU,EAAE,UAAU,EAAE,EACxB,WAAW,GAAE,MAAmB,GAC/B,UAAU,EAAE,GAAG,SAAS,CAI1B;AAED,wBAAgB,8BAA8B,CAC5C,cAAc,EAAE,SAAS,GAAG,SAAS,EACrC,OAAO,EAAE,UAAU,EAAE,EACrB,WAAW,GAAE,MAAmB,GAC/B,UAAU,EAAE,CAiCd;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,UAAU,EAAE,GAAG,SAAS,EAClC,WAAW,GAAE,MAAmB,GAC/B,SAAS,GAAG,SAAS,CAUvB;AAED,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,SAAS,GAAG,SAAS,EAC5B,OAAO,EAAE,UAAU,EAAE,EACrB,WAAW,GAAE,MAAmB,uBAmBjC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fields/CheckTreePicker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE3D,wBAAgB,eAAe,CAC7B,cAAc,EAAE,SAAS,EACzB,UAAU,EAAE,UAAU,EAAE,EACxB,WAAW,GAAE,MAAmB,EAChC,QAAQ,GAAE,MAAM,GAAG,MAAgB,EACnC,QAAQ,GAAE,MAAgB,GACzB,UAAU,EAAE,GAAG,SAAS,CAI1B;AAED,wBAAgB,8BAA8B,CAC5C,cAAc,EAAE,SAAS,GAAG,SAAS,EACrC,OAAO,EAAE,UAAU,EAAE,EACrB,WAAW,GAAE,MAAmB,EAChC,QAAQ,GAAE,MAAM,GAAG,MAAgB,EACnC,QAAQ,GAAE,MAAgB,GACzB,UAAU,EAAE,CAgCd;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,UAAU,EAAE,GAAG,SAAS,EAClC,WAAW,GAAE,MAAmB,EAChC,QAAQ,GAAE,MAAgB,GACzB,SAAS,GAAG,SAAS,CAcvB;AAED,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,SAAS,GAAG,SAAS,EAC5B,OAAO,EAAE,UAAU,EAAE,EACrB,WAAW,GAAE,MAAmB,EAChC,QAAQ,GAAE,MAAgB,EAC1B,QAAQ,GAAE,MAAgB,uBAmB3B;AACD,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,UAAU,EAAE,EACxB,eAAe,EAAE,UAAU,EAAE,EAC7B,WAAW,GAAE,MAAmB,EAChC,QAAQ,GAAE,MAAgB,GACzB,UAAU,EAAE,CA0Bd"}

package/fields/shared/StyledRsuitePickerBox.d.ts

@@ -1,3 +1,5 @@
 import type { CommonPickerFieldStyleProps } from './types';
+export declare const getCheckPickerInputCss: (p: CommonPickerFieldStyleProps) => import("styled-components").RuleSet<object>;
+export declare const getCheckPickerMenuCss: (p: CommonPickerFieldStyleProps) => import("styled-components").RuleSet<object>;
 export declare const StyledRsuitePickerBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CommonPickerFieldStyleProps>> & string;
 //# sourceMappingURL=StyledRsuitePickerBox.d.ts.map

package/fields/shared/StyledRsuitePickerBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRsuitePickerBox.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/StyledRsuitePickerBox.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAA;AAE1D,eAAO,MAAM,qBAAqB,gQAofjC,CAAA"}
+{"version":3,"file":"StyledRsuitePickerBox.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/StyledRsuitePickerBox.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAA;AAE1D,eAAO,MAAM,sBAAsB,GAAI,GAAG,2BAA2B,gDAyHpE,CAAA;AACD,eAAO,MAAM,qBAAqB,GAAI,GAAG,2BAA2B,gDA4LnE,CAAA;AACD,eAAO,MAAM,qBAAqB,gQAajC,CAAA"}

package/fields/shared/utils.d.ts

@@ -1,7 +1,16 @@
-import type { CommonChoiceFieldStyleProps, CommonFieldStyleProps, PseudoState } from './types';
+import type { CommonChoiceFieldStyleProps, PseudoState } from './types';
 export declare function getChoiceFieldBackgroundColorFactoryForState(pseudoState: PseudoState): (props: CommonChoiceFieldStyleProps) => string;
 export declare function getChoiceFieldBorderColorFactoryForState(pseudoState: PseudoState): (props: CommonChoiceFieldStyleProps) => string;
-export declare function getFieldBackgroundColorFactory(): (props: CommonFieldStyleProps) => string;
-export declare function getFieldBorderColorFactoryForState(pseudoState: PseudoState): (props: CommonFieldStyleProps) => string;
-export declare function getFieldPlaceholderColorFactoryForState(pseudoState: PseudoState): (props: CommonFieldStyleProps) => string;
+export declare function getFieldBackgroundColorFactory(): (props: {
+    [key: string]: any;
+    theme: any;
+}) => any;
+export declare function getFieldBorderColorFactoryForState(pseudoState: PseudoState): (props: {
+    [key: string]: any;
+    theme: any;
+}) => any;
+export declare function getFieldPlaceholderColorFactoryForState(pseudoState: PseudoState): (props: {
+    [key: string]: any;
+    theme: any;
+}) => any;
 //# sourceMappingURL=utils.d.ts.map

package/fields/shared/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE9F,wBAAgB,4CAA4C,CAAC,WAAW,EAAE,WAAW,IAC3E,OAAO,2BAA2B,YAsC3C;AAED,wBAAgB,wCAAwC,CAAC,WAAW,EAAE,WAAW,IACvE,OAAO,2BAA2B,YAoC3C;AAED,wBAAgB,8BAA8B,KACpC,OAAO,qBAAqB,YAqBrC;AAED,wBAAgB,kCAAkC,CAAC,WAAW,EAAE,WAAW,IACjE,OAAO,qBAAqB,YAiCrC;AAED,wBAAgB,uCAAuC,CAAC,WAAW,EAAE,WAAW,IACtE,OAAO,qBAAqB,YAoBrC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEvE,wBAAgB,4CAA4C,CAAC,WAAW,EAAE,WAAW,IAC3E,OAAO,2BAA2B,YAsC3C;AAED,wBAAgB,wCAAwC,CAAC,WAAW,EAAE,WAAW,IACvE,OAAO,2BAA2B,YAoC3C;AAED,wBAAgB,8BAA8B,KACpC,OAAO;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,SAqBlD;AAED,wBAAgB,kCAAkC,CAAC,WAAW,EAAE,WAAW,IACjE,OAAO;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,SAiClD;AAED,wBAAgB,uCAAuC,CAAC,WAAW,EAAE,WAAW,IACtE,OAAO;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,SAoBlD"}

package/index.js

@@ -53937,7 +53937,7 @@ function IconButton({ accent = Accent.PRIMARY, badgeBackgroundColor, badgeColor,
             return /*#__PURE__*/ jsx(Fragment, {
                 children: badgeNumber === undefined ? /*#__PURE__*/ jsx(SecondaryButton$1, {
                     ...buttonProps
-                }) : /*#__PURE__*/ jsxs(Wrapper$2, {
+                }) : /*#__PURE__*/ jsxs(Wrapper$3, {
                     className: className,
                     style: style,
                     children: [
@@ -53957,7 +53957,7 @@ function IconButton({ accent = Accent.PRIMARY, badgeBackgroundColor, badgeColor,
             return /*#__PURE__*/ jsx(Fragment, {
                 children: badgeNumber === undefined ? /*#__PURE__*/ jsx(TertiaryButton$1, {
                     ...buttonProps
-                }) : /*#__PURE__*/ jsxs(Wrapper$2, {
+                }) : /*#__PURE__*/ jsxs(Wrapper$3, {
                     className: className,
                     style: style,
                     children: [
@@ -53977,7 +53977,7 @@ function IconButton({ accent = Accent.PRIMARY, badgeBackgroundColor, badgeColor,
             return /*#__PURE__*/ jsx(Fragment, {
                 children: badgeNumber === undefined ? /*#__PURE__*/ jsx(PrimaryButton$1, {
                     ...buttonProps
-                }) : /*#__PURE__*/ jsxs(Wrapper$2, {
+                }) : /*#__PURE__*/ jsxs(Wrapper$3, {
                     className: className,
                     style: style,
                     children: [
@@ -53995,7 +53995,7 @@ function IconButton({ accent = Accent.PRIMARY, badgeBackgroundColor, badgeColor,
             });
     }
 }
-const Wrapper$2 = styled.div`
+const Wrapper$3 = styled.div`
   position: relative;
 `;
 const LEFT_MARGIN = {
@@ -54084,12 +54084,12 @@ const MenuButton = styled(IconButton)`
 `;
 
 function Menu({ children }) {
-    return /*#__PURE__*/ jsx(Wrapper$1, {
+    return /*#__PURE__*/ jsx(Wrapper$2, {
         role: "menu",
         children: children
     });
 }
-const Wrapper$1 = styled.div`
+const Wrapper$2 = styled.div`
   background-color: ${(p)=>p.theme.color.charcoal};
   box-sizing: border-box;
   display: flex;
@@ -54521,7 +54521,7 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
         onAutoClose,
         withAutomaticClosing
     ]);
-    return /*#__PURE__*/ jsx(Wrapper, {
+    return /*#__PURE__*/ jsx(Wrapper$1, {
         $isCollapsed: isCollapsed,
         $isCollapsible: isCollapsible,
         $isFixed: isFixed,
@@ -54565,7 +54565,7 @@ function Banner({ children, className = undefined, closingDelay = 3000, isClosab
         })
     });
 }
-const Wrapper = styled.div`
+const Wrapper$1 = styled.div`
   align-items: center;
   background-color: ${(p)=>getBannerPalette(p.$level).backgroundColor};
   border-bottom: ${(p)=>p.$isCollapsible ? `4px solid ${getBannerPalette(p.$level).borderColor}` : 'none'};
@@ -55465,16 +55465,7 @@ const StyledRsuiteCheckbox = styled(Checkbox$1)`
     return optionValues.map((optionValue)=>getRsuiteDataItemValueFromOptionValue(optionValue, optionValueKey));
 }
 
-const StyledRsuitePickerBox = styled.div`
-  font-size: 13px !important;
-  position: relative;
-  user-select: none;
-  width: 100%;
-
-  * {
-    ${(p)=>p.$isReadOnly && `cursor: default !important;`}
-  }
-
+const getCheckPickerInputCss = (p)=>css`
   > .rs-picker-toggle-wrapper,
   > .rs-auto-complete {
     background-color: transparent;
@@ -55494,9 +55485,9 @@ const StyledRsuitePickerBox = styled.div`
       /* Remove focus ring (Select) */
       box-shadow: none;
       font-size: 13px;
-      height: 30px;
+      min-height: 30px;
       line-height: 1.3846;
-      padding: 3.5px 40px 0 8px !important;
+      padding: 3.5px 40px 3.5px 8px !important;
 
       &:hover,
       &._hover {
@@ -55548,7 +55539,7 @@ const StyledRsuitePickerBox = styled.div`
 
           /* Selected value(s) */
           > .rs-picker-toggle-value {
-            color: ${(p)=>p.theme.color.gunMetal};
+            color: ${p.theme.color.gunMetal};
             font-weight: 500;
 
             > .rs-picker-value-list {
@@ -55560,7 +55551,7 @@ const StyledRsuitePickerBox = styled.div`
             /* Counter badge, if any */
             > .rs-picker-value-count {
               align-items: center;
-              background-color: ${(p)=>p.theme.color.charcoal};
+              background-color: ${p.theme.color.charcoal};
               border-radius: 50%;
               display: flex;
               font-family: 'Open Sans', sans-serif !important;
@@ -55595,13 +55586,14 @@ const StyledRsuitePickerBox = styled.div`
       }
     }
   }
-
+`;
+const getCheckPickerMenuCss = (p)=>css`
   > .rs-picker-popup {
-    border: solid 1px ${(p)=>p.theme.color.gainsboro};
+    border: solid 1px ${p.theme.color.gainsboro};
     border-radius: 0;
     padding: 0;
 
-    ${(p)=>p.$popupWidth ? `
+    ${p.$popupWidth ? `
       max-width: ${p.$popupWidth}px;
       min-width: ${p.$popupWidth}px !important;
       width: ${p.$popupWidth}px;
@@ -55613,13 +55605,13 @@ const StyledRsuitePickerBox = styled.div`
       padding: 8px;
 
       > .rs-input-group {
-        background-color: ${(p)=>p.theme.color.white};
-        border: solid 1px ${(p)=>p.theme.color.lightGray};
+        background-color: ${p.theme.color.white};
+        border: solid 1px ${p.theme.color.lightGray};
         border-radius: 0;
 
         > [role='searchbox'] {
-          color: ${(p)=>p.theme.color.gunMetal};
-          caret-color: ${(p)=>p.theme.color.gunMetal};
+          color: ${p.theme.color.gunMetal};
+          caret-color: ${p.theme.color.gunMetal};
           font-size: 13px;
           line-height: 1;
           padding: 1px 8px 5px 8px;
@@ -55634,7 +55626,7 @@ const StyledRsuitePickerBox = styled.div`
           padding: 4px 8px 4px 4px;
 
           > svg {
-            color: ${(p)=>p.theme.color.lightGray};
+            color: ${p.theme.color.lightGray};
           }
         }
       }
@@ -55649,7 +55641,7 @@ const StyledRsuitePickerBox = styled.div`
       [role='option'],
       [role='treeitem'] {
         > .rs-picker-select-menu-item {
-          color: ${(p)=>p.theme.color.gunMetal};
+          color: ${p.theme.color.gunMetal};
           line-height: 1;
           overflow: hidden;
           padding: 8px 8px 11px 8px;
@@ -55657,8 +55649,8 @@ const StyledRsuitePickerBox = styled.div`
           white-space: nowrap;
 
           &:hover {
-            background-color: ${(p)=>p.theme.color.blueYonder25};
-            color: ${(p)=>p.theme.color.blueYonder};
+            background-color: ${p.theme.color.blueYonder25};
+            color: ${p.theme.color.blueYonder};
           }
 
           &.rs-picker-select-menu-item-active {
@@ -55666,13 +55658,13 @@ const StyledRsuitePickerBox = styled.div`
             font-weight: 500;
 
             &:hover {
-              background-color: ${(p)=>p.theme.color.blueYonder25};
+              background-color: ${p.theme.color.blueYonder25};
             }
           }
 
           &.rs-picker-select-menu-item-disabled {
             background-color: transparent;
-            color: ${(p)=>p.theme.color.lightGray};
+            color: ${p.theme.color.lightGray};
           }
         }
 
@@ -55681,7 +55673,7 @@ const StyledRsuitePickerBox = styled.div`
             min-height: auto;
 
             > label {
-              color: ${(p)=>p.theme.color.gunMetal};
+              color: ${p.theme.color.gunMetal};
               font-size: 13px !important;
               line-height: 1;
               overflow: hidden;
@@ -55696,8 +55688,8 @@ const StyledRsuitePickerBox = styled.div`
 
                 > .rs-checkbox-inner {
                   &:before {
-                    background-color: ${(p)=>p.theme.color.gainsboro};
-                    border: solid 2px ${(p)=>p.theme.color.lightGray};
+                    background-color: ${p.theme.color.gainsboro};
+                    border: solid 2px ${p.theme.color.lightGray};
                     border-radius: 0;
                   }
                 }
@@ -55706,17 +55698,17 @@ const StyledRsuitePickerBox = styled.div`
           }
 
           &:hover {
-            background-color: ${(p)=>p.theme.color.blueYonder25};
+            background-color: ${p.theme.color.blueYonder25};
 
             > .rs-checkbox-checker {
               > label {
-                color: ${(p)=>p.theme.color.blueYonder};
+                color: ${p.theme.color.blueYonder};
 
                 > .rs-checkbox-wrapper {
                   > .rs-checkbox-inner {
                     &:before {
-                      background-color: ${(p)=>p.theme.color.blueYonder25};
-                      border: solid 2px ${(p)=>p.theme.color.blueYonder};
+                      background-color: ${p.theme.color.blueYonder25};
+                      border: solid 2px ${p.theme.color.blueYonder};
                     }
                   }
                 }
@@ -55725,7 +55717,7 @@ const StyledRsuitePickerBox = styled.div`
           }
 
           &.rs-check-item-focus {
-            background-color: ${(p)=>p.theme.color.blueYonder25};
+            background-color: ${p.theme.color.blueYonder25};
 
             > .rs-checkbox-checker {
               > label {
@@ -55738,19 +55730,19 @@ const StyledRsuitePickerBox = styled.div`
             background-color: transparent;
 
             &.rs-check-item-focus {
-              background-color: ${(p)=>p.theme.color.blueYonder25};
+              background-color: ${p.theme.color.blueYonder25};
             }
 
             > .rs-checkbox-checker {
               > label {
-                color: ${(p)=>p.theme.color.gunMetal};
+                color: ${p.theme.color.gunMetal};
                 font-weight: 500;
 
                 > .rs-checkbox-wrapper {
                   > .rs-checkbox-inner {
                     &:before {
-                      background-color: ${(p)=>p.theme.color.charcoal};
-                      border: solid 2px ${(p)=>p.theme.color.charcoal};
+                      background-color: ${p.theme.color.charcoal};
+                      border: solid 2px ${p.theme.color.charcoal};
                     }
                   }
                 }
@@ -55759,17 +55751,17 @@ const StyledRsuitePickerBox = styled.div`
 
             &:hover,
             &._hover {
-              background-color: ${(p)=>p.theme.color.blueYonder25};
+              background-color: ${p.theme.color.blueYonder25};
 
               > .rs-checkbox-checker {
                 > label {
-                  color: ${(p)=>p.theme.color.blueYonder};
+                  color: ${p.theme.color.blueYonder};
 
                   > .rs-checkbox-wrapper {
                     > .rs-checkbox-inner {
                       &:before {
-                        background-color: ${(p)=>p.theme.color.blueYonder};
-                        border: solid 2px ${(p)=>p.theme.color.blueYonder};
+                        background-color: ${p.theme.color.blueYonder};
+                        border: solid 2px ${p.theme.color.blueYonder};
                       }
                     }
                   }
@@ -55780,11 +55772,209 @@ const StyledRsuitePickerBox = styled.div`
         }
       }
     }
-    /** CheckTreePicker **/
+  }
+`;
+const StyledRsuitePickerBox = styled.div`
+  font-size: 13px !important;
+  position: relative;
+  user-select: none;
+  width: 100%;
+
+  * {
+    ${(p)=>p.$isReadOnly && `cursor: default !important;`}
+  }
+
+  ${(p)=>getCheckPickerInputCss(p)}
+
+  ${(p)=>getCheckPickerMenuCss(p)}
+`;
+
+function CheckPickerBox({ boxRef, children, className, disabled, error, hasError, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, label, name, popupWidth, readOnly, style }) {
+    return /*#__PURE__*/ jsxs(Field$2, {
+        className: className,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                $isDisabled: disabled,
+                $isHidden: isLabelHidden,
+                $isRequired: isRequired,
+                htmlFor: name,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(StyledRsuitePickerBox, {
+                ref: boxRef,
+                $hasError: hasError,
+                $isDisabled: disabled,
+                $isLight: isLight,
+                $isReadOnly: readOnly,
+                $isTransparent: isTransparent,
+                $popupWidth: popupWidth,
+                children: children
+            }),
+            !isErrorMessageHidden && hasError && /*#__PURE__*/ jsx(FieldError, {
+                children: error
+            })
+        ]
+    });
+}
+
+function CheckPicker({ className, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, popupWidth, readOnly = false, searchable = false, style, value, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const boxRef = useRef(null);
+    /** Instance of `CustomSearch` */ const customSearchRef = useRef(customSearch);
+    const controlledClassName = useMemo(()=>classnames('Field-CheckPicker', className), [
+        className
+    ]);
+    const controlledError = useMemo(()=>normalizeString(error), [
+        error
+    ]);
+    const hasError = Boolean(controlledError);
+    const selectedRsuiteValue = useMemo(()=>getRsuiteDataItemValuesFromOptionValues(value, optionValueKey), [
+        optionValueKey,
+        value
+    ]);
+    const rsuiteData = useMemo(()=>getRsuiteDataItemsFromOptions(options, optionValueKey), [
+        options,
+        optionValueKey
+    ]);
+    const { forceUpdate } = useForceUpdate();
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const handleChange = useCallback((nextOptionRsuiteValues)=>{
+        if (!onChange) {
+            return;
+        }
+        const nextValue = nextOptionRsuiteValues ? getSelectedOptionValuesFromSelectedRsuiteDataItemValues(rsuiteData, nextOptionRsuiteValues) : [];
+        const normalizedNextValue = nextValue.length > 0 ? nextValue : undefined;
+        setControlledRsuiteData(rsuiteData);
+        onChange(normalizedNextValue);
+    }, [
+        onChange,
+        rsuiteData
+    ]);
+    const handleSearch = useCallback((nextQuery)=>{
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            setControlledRsuiteData(rsuiteData);
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength ? getRsuiteDataItemsFromOptions(customSearchRef.current.find(nextQuery), optionValueKey) : rsuiteData;
+        setControlledRsuiteData(nextControlledRsuiteData);
+    }, [
+        customSearchMinQueryLength,
+        optionValueKey,
+        rsuiteData
+    ]);
+    const renderMenuItem = useCallback((node)=>/*#__PURE__*/ jsx("span", {
+            title: String(node),
+            children: String(node)
+        }), []);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
+    useEffect(()=>{
+        forceUpdate();
+    }, [
+        forceUpdate
+    ]);
+    return /*#__PURE__*/ jsx(CheckPickerBox, {
+        boxRef: boxRef,
+        className: controlledClassName,
+        disabled: disabled,
+        error: controlledError,
+        hasError: hasError,
+        isErrorMessageHidden: isErrorMessageHidden,
+        isLabelHidden: isLabelHidden,
+        isLight: isLight,
+        isRequired: isRequired,
+        isTransparent: isTransparent,
+        label: label,
+        name: originalProps.name,
+        popupWidth: popupWidth,
+        readOnly: readOnly,
+        style: style,
+        children: boxRef.current && /*#__PURE__*/ jsx(CheckPicker$1, {
+            container: boxRef.current,
+            // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+            // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
+            data: controlledRsuiteData ?? rsuiteData,
+            disabled: disabled,
+            id: originalProps.name,
+            onChange: handleChange,
+            onSearch: handleSearch,
+            readOnly: readOnly,
+            renderMenuItem: renderMenuItem,
+            searchable: !!customSearch || searchable,
+            // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+            // that's why we send this "always true" filter to disable Rsuite CheckPicker internal search filtering
+            searchBy: customSearch ? ()=>true : undefined,
+            size: originalProps.size ?? 'sm',
+            value: selectedRsuiteValue,
+            ...originalProps
+        })
+    });
+}
+
+const RsuiteCheckTreePickerBox = styled.div`
+  font-size: 13px !important;
+  position: relative;
+  user-select: none;
+  width: 100%;
+
+  * {
+    ${(p)=>p.$isReadOnly && `cursor: default !important;`}
+  }
+
+  ${(p)=>getCheckPickerInputCss(p)}
+
+  > .rs-picker-popup {
+    border: solid 1px ${(p)=>p.theme.color.gainsboro};
+    border-radius: 0;
+    padding: 0;
+
+    ${(p)=>p.$popupWidth ? `
+      max-width: ${p.$popupWidth}px;
+      min-width: ${p.$popupWidth}px !important;
+      width: ${p.$popupWidth}px;
+      ` : `
+      width: 100%;
+    `};
+
+    > .rs-search-box {
+      padding: 8px;
+
+      > .rs-input-group {
+        background-color: ${(p)=>p.theme.color.white};
+        border: solid 1px ${(p)=>p.theme.color.lightGray};
+        border-radius: 0;
+
+        > [role='searchbox'] {
+          color: ${(p)=>p.theme.color.gunMetal};
+          caret-color: ${(p)=>p.theme.color.gunMetal};
+          font-size: 13px;
+          line-height: 1;
+          padding: 1px 8px 5px 8px;
+
+          &::placeholder {
+            color: transparent;
+          }
+        }
+
+        > .rs-input-group-addon {
+          line-height: 1;
+          padding: 4px 8px 4px 4px;
+
+          > svg {
+            color: ${(p)=>p.theme.color.lightGray};
+          }
+        }
+      }
+    }
     > .rs-check-tree {
       padding: 0;
       margin: 0;
 
+      .rs-check-tree-node {
+        padding: 0 !important;
+      }
+
       .rs-check-tree-node-custom-icon {
         margin-top: -2px;
       }
@@ -55792,6 +55982,7 @@ const StyledRsuitePickerBox = styled.div`
       [role='treeitem'] {
         display: flex;
         align-items: center;
+
         .rs-check-item {
           width: 100%;
           color: ${(p)=>p.theme.color.gunMetal};
@@ -55800,7 +55991,7 @@ const StyledRsuitePickerBox = styled.div`
           text-overflow: ellipsis;
           white-space: nowrap;
           .rs-check-item-focus {
-            background-color: none;
+            background-color: transparent;
           }
 
           &.rs-picker-select-menu-item-active {
@@ -55834,6 +56025,9 @@ const StyledRsuitePickerBox = styled.div`
                 background-color: ${(p)=>p.theme.color.charcoal} !important;
                 border: solid 2px ${(p)=>p.theme.color.charcoal} !important;
               }
+              &:after {
+                margin-left: 11px !important;
+              }
             }
           }
           &.rs-checkbox-disabled {
@@ -55858,21 +56052,21 @@ const StyledRsuitePickerBox = styled.div`
             > label {
               color: ${(p)=>p.theme.color.gunMetal};
               font-size: 13px !important;
-              line-height: 1;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               padding: 1px 0;
 
               > .rs-check-tree-node-label-content {
-                margin-left: 38px;
                 background-color: initial;
                 color: initial;
+                padding: 3px 8px 6px 44px;
+                width: 100%;
               }
 
               > .rs-checkbox-wrapper {
                 height: auto;
-                left: 8px;
+                left: 0px;
                 top: 7px !important;
                 margin-left: 14px;
 
@@ -55881,7 +56075,10 @@ const StyledRsuitePickerBox = styled.div`
                     background-color: ${(p)=>p.theme.color.gainsboro};
                     border: solid 2px ${(p)=>p.theme.color.lightGray};
                     border-radius: 0;
-                    margin-right: 8px;
+                    margin-left: 8px;
+                  }
+                  &:after {
+                    margin-left: 13px;
                   }
                 }
               }
@@ -55959,12 +56156,36 @@ const StyledRsuitePickerBox = styled.div`
             }
           }
         }
+
+        /* childrens */
+        &[aria-level='2'] {
+          > .rs-check-item {
+            > .rs-checkbox-checker {
+              > label {
+                > .rs-check-tree-node-label-content {
+                  padding-left: 60px;
+                }
+
+                > .rs-checkbox-wrapper {
+                  > .rs-checkbox-inner {
+                    &:before {
+                      margin-left: 24px;
+                    }
+                    &:after {
+                      margin-left: 29px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
 `;
 
-function CheckPickerBox({ boxRef, children, className, disabled, error, hasError, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, label, name, popupWidth, readOnly, style }) {
+function CheckTreePickerBox({ boxRef, children, className, disabled, error, hasError, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, label, name, popupWidth, readOnly, style }) {
     return /*#__PURE__*/ jsxs(Field$2, {
         className: className,
         style: style,
@@ -55976,7 +56197,7 @@ function CheckPickerBox({ boxRef, children, className, disabled, error, hasError
                 htmlFor: name,
                 children: label
             }),
-            /*#__PURE__*/ jsx(StyledRsuitePickerBox, {
+            /*#__PURE__*/ jsx(RsuiteCheckTreePickerBox, {
                 ref: boxRef,
                 $hasError: hasError,
                 $isDisabled: disabled,
@@ -55993,105 +56214,11 @@ function CheckPickerBox({ boxRef, children, className, disabled, error, hasError
     });
 }
 
-function CheckPicker({ className, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, popupWidth, readOnly = false, searchable = false, style, value, ...originalProps }) {
-    // eslint-disable-next-line no-null/no-null
-    const boxRef = useRef(null);
-    /** Instance of `CustomSearch` */ const customSearchRef = useRef(customSearch);
-    const controlledClassName = useMemo(()=>classnames('Field-CheckPicker', className), [
-        className
-    ]);
-    const controlledError = useMemo(()=>normalizeString(error), [
-        error
-    ]);
-    const hasError = Boolean(controlledError);
-    const selectedRsuiteValue = useMemo(()=>getRsuiteDataItemValuesFromOptionValues(value, optionValueKey), [
-        optionValueKey,
-        value
-    ]);
-    const rsuiteData = useMemo(()=>getRsuiteDataItemsFromOptions(options, optionValueKey), [
-        options,
-        optionValueKey
-    ]);
-    const { forceUpdate } = useForceUpdate();
-    // Only used when `customSearch` prop is set
-    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
-    const handleChange = useCallback((nextOptionRsuiteValues)=>{
-        if (!onChange) {
-            return;
-        }
-        const nextValue = nextOptionRsuiteValues ? getSelectedOptionValuesFromSelectedRsuiteDataItemValues(rsuiteData, nextOptionRsuiteValues) : [];
-        const normalizedNextValue = nextValue.length > 0 ? nextValue : undefined;
-        setControlledRsuiteData(rsuiteData);
-        onChange(normalizedNextValue);
-    }, [
-        onChange,
-        rsuiteData
-    ]);
-    const handleSearch = useCallback((nextQuery)=>{
-        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
-            setControlledRsuiteData(rsuiteData);
-            return;
-        }
-        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength ? getRsuiteDataItemsFromOptions(customSearchRef.current.find(nextQuery), optionValueKey) : rsuiteData;
-        setControlledRsuiteData(nextControlledRsuiteData);
-    }, [
-        customSearchMinQueryLength,
-        optionValueKey,
-        rsuiteData
-    ]);
-    const renderMenuItem = useCallback((node)=>/*#__PURE__*/ jsx("span", {
-            title: String(node),
-            children: String(node)
-        }), []);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    useEffect(()=>{
-        forceUpdate();
-    }, [
-        forceUpdate
-    ]);
-    return /*#__PURE__*/ jsx(CheckPickerBox, {
-        boxRef: boxRef,
-        className: controlledClassName,
-        disabled: disabled,
-        error: controlledError,
-        hasError: hasError,
-        isErrorMessageHidden: isErrorMessageHidden,
-        isLabelHidden: isLabelHidden,
-        isLight: isLight,
-        isRequired: isRequired,
-        isTransparent: isTransparent,
-        label: label,
-        name: originalProps.name,
-        popupWidth: popupWidth,
-        readOnly: readOnly,
-        style: style,
-        children: boxRef.current && /*#__PURE__*/ jsx(CheckPicker$1, {
-            container: boxRef.current,
-            // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
-            // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
-            data: controlledRsuiteData ?? rsuiteData,
-            disabled: disabled,
-            id: originalProps.name,
-            onChange: handleChange,
-            onSearch: handleSearch,
-            readOnly: readOnly,
-            renderMenuItem: renderMenuItem,
-            searchable: !!customSearch || searchable,
-            // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
-            // that's why we send this "always true" filter to disable Rsuite CheckPicker internal search filtering
-            searchBy: customSearch ? ()=>true : undefined,
-            size: originalProps.size ?? 'sm',
-            value: selectedRsuiteValue,
-            ...originalProps
-        })
-    });
-}
-
-function fromRsuiteValue(selectedValues, allOptions, childrenKey = 'children') {
-    const formattedTree = getTreeOptionsBySelectedValues(selectedValues, allOptions, childrenKey);
+function fromRsuiteValue(selectedValues, allOptions, childrenKey = 'children', valueKey = 'value', labelKey = 'label') {
+    const formattedTree = getTreeOptionsBySelectedValues(selectedValues, allOptions, childrenKey, valueKey, labelKey);
     return formattedTree.length > 0 ? formattedTree : undefined;
 }
-function getTreeOptionsBySelectedValues(selectedValues, options, childrenKey = 'children') {
+function getTreeOptionsBySelectedValues(selectedValues, options, childrenKey = 'children', valueKey = 'value', labelKey = 'label') {
     function getOption(option) {
         const children = option[childrenKey];
         if (children && Array.isArray(children)) {
@@ -56099,55 +56226,81 @@ function getTreeOptionsBySelectedValues(selectedValues, options, childrenKey = '
             if (filteredChildren.length > 0) {
                 return {
                     [childrenKey]: filteredChildren.map((child)=>({
-                            label: child.label,
-                            value: child.value
+                            [labelKey]: child[labelKey],
+                            [valueKey]: child[valueKey]
                         })),
-                    label: option.label,
-                    value: option.value
+                    [labelKey]: option[labelKey],
+                    [valueKey]: option[valueKey]
                 };
             }
         }
-        if (selectedValues?.includes(option.value)) {
+        if (selectedValues?.includes(option[valueKey])) {
             return {
                 [childrenKey]: (option[childrenKey] ?? []).map((child)=>({
-                        label: child.label,
-                        value: child.value
+                        [labelKey]: child[labelKey],
+                        [valueKey]: child[valueKey]
                     })),
-                label: option.label,
-                value: option.value
+                [labelKey]: option[labelKey],
+                [valueKey]: option[valueKey]
             };
         }
         return undefined;
     }
-    // Appliquer la fonction filterOption à chaque option de départ
     return options.map(getOption).filter((option)=>option !== undefined);
 }
-function toRsuiteValue(uiValues, childrenKey = 'children') {
+function toRsuiteValue(uiValues, childrenKey = 'children', valueKey = 'value') {
     if (!uiValues) {
         return undefined;
     }
     // set only childless and children values
-    const rsuiteValues = uiValues.filter((uiValue)=>uiValue[childrenKey] === undefined).flatMap(({ value })=>value);
-    const rsuiteChildrenValues = uiValues.flatMap((uiValue)=>(uiValue[childrenKey] ?? []).flatMap(({ value })=>value));
+    const rsuiteValues = uiValues.filter((uiValue)=>uiValue[childrenKey] === undefined || uiValue[childrenKey].length === 0).flatMap((option)=>option[valueKey]);
+    const rsuiteChildrenValues = uiValues.flatMap((uiValue)=>(uiValue[childrenKey] ?? []).flatMap((child)=>child[valueKey]));
     return [
         ...rsuiteValues,
         ...rsuiteChildrenValues
     ];
 }
-function computeDisabledValues(isMultiSelect, value, options, childrenKey = 'children') {
+function computeDisabledValues(isMultiSelect, value, options, childrenKey = 'children', valueKey = 'value', labelKey = 'label') {
     if (isMultiSelect) {
         return [];
     }
-    const selectedOptions = getTreeOptionsBySelectedValues(value, options, childrenKey);
-    const valuesToDisabled = options.filter((option)=>selectedOptions.some((selectedOption)=>selectedOption.value !== option.value)).map((option)=>option.value);
-    const subValuesToDisabled = options.filter((option)=>selectedOptions.some((selectedOption)=>selectedOption.value !== option.value)).flatMap((option)=>option[childrenKey]).filter(Boolean).flatMap((option)=>option.value);
+    const selectedOptions = getTreeOptionsBySelectedValues(value, options, childrenKey, valueKey, labelKey);
+    const valuesToDisabled = options.filter((option)=>selectedOptions.some((selectedOption)=>selectedOption[valueKey] !== option[valueKey])).map((option)=>option[valueKey]);
+    const subValuesToDisabled = options.filter((option)=>selectedOptions.some((selectedOption)=>selectedOption[valueKey] !== option[valueKey])).flatMap((option)=>option[childrenKey]).filter(Boolean).flatMap((option)=>option[valueKey]);
     return [
         ...valuesToDisabled,
         ...subValuesToDisabled
     ];
 }
+function getOptionsToDisplay(allOptions, selectedOptions, childrenKey = 'children', valueKey = 'value') {
+    const selectedMap = new Map(selectedOptions.map((opt)=>[
+            opt[valueKey],
+            opt
+        ]));
+    const result = [];
+    function findChildren(option) {
+        const children = option[childrenKey];
+        const value = option[valueKey];
+        if (children && children.length > 0) {
+            const hasAllChildrenSelected = children.every((child)=>selectedMap.has(child[valueKey]));
+            if (hasAllChildrenSelected) {
+                result.push(option) // on garde le parent seulement
+                ;
+                children.forEach((child)=>selectedMap.delete(child[valueKey]));
+            } else {
+                children.forEach(findChildren) // on descend chercher les enfants partiellement sélectionnés
+                ;
+            }
+        } else if (selectedMap.has(value)) {
+            result.push(option) // enfant orphelin sélectionné
+            ;
+        }
+    }
+    allOptions.forEach(findChildren);
+    return result;
+}
 
-function CheckTreePicker({ childrenKey = 'children', className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isMultiSelect = true, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, onChange, options, popupWidth, readOnly = false, renderedChildrenValue = 'Sous-thématique', renderedValue = 'Thématique', style, value, ...originalProps }) {
+function CheckTreePicker({ childrenKey = 'children', className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isMultiSelect = true, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, labelKey = 'label', onChange, options, popupWidth, readOnly = false, renderedChildrenValue = 'Sous-thématique', renderedValue = 'Thématique', shouldShowLabels = true, style, value, valueKey = 'value', ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const controlledClassName = useMemo(()=>classnames('Field-CheckTreePicker', className), [
@@ -56164,29 +56317,42 @@ function CheckTreePicker({ childrenKey = 'children', className, disabled = false
     }, [
         forceUpdate
     ]);
-    const rsuiteValue = useMemo(()=>toRsuiteValue(value, childrenKey), [
+    const [disabledValues, setDisabledValues] = useState([]);
+    const rsuiteValue = useMemo(()=>{
+        const nextRsuiteValue = toRsuiteValue(value, childrenKey, valueKey);
+        if (!isMultiSelect && nextRsuiteValue) {
+            setDisabledValues(computeDisabledValues(isMultiSelect, nextRsuiteValue, options, childrenKey, valueKey, labelKey));
+        } else {
+            setDisabledValues([]);
+        }
+        return nextRsuiteValue;
+    }, [
         childrenKey,
-        value
+        isMultiSelect,
+        labelKey,
+        options,
+        value,
+        valueKey
     ]);
-    const [disabledValues, setDisabledValues] = useState(computeDisabledValues(isMultiSelect, rsuiteValue, options, childrenKey));
     const handleChange = useCallback((nextValue)=>{
         if (!onChange) {
             return;
         }
-        const formattedValues = fromRsuiteValue(nextValue, options, childrenKey);
-        if (!isMultiSelect && formattedValues) {
-            setDisabledValues(computeDisabledValues(isMultiSelect, nextValue, options, childrenKey));
-        } else {
-            setDisabledValues([]);
-        }
+        const formattedValues = fromRsuiteValue(nextValue, options, childrenKey, valueKey, labelKey);
         onChange(formattedValues);
     }, [
         childrenKey,
-        isMultiSelect,
+        labelKey,
         onChange,
-        options
+        options,
+        valueKey
     ]);
-    return /*#__PURE__*/ jsx(CheckPickerBox, {
+    const removeOptions = (valuesToRemove, e)=>{
+        e.stopPropagation();
+        const valueToUpdate = rsuiteValue?.filter((rvalue)=>!valuesToRemove.includes(rvalue));
+        handleChange(valueToUpdate ?? []);
+    };
+    return /*#__PURE__*/ jsx(CheckTreePickerBox, {
         boxRef: boxRef,
         className: controlledClassName,
         disabled: disabled,
@@ -56210,6 +56376,7 @@ function CheckTreePicker({ childrenKey = 'children', className, disabled = false
             disabled: disabled,
             disabledItemValues: disabledValues,
             id: originalProps.name,
+            labelKey: labelKey,
             onChange: handleChange,
             readOnly: readOnly,
             renderTreeIcon: ({ expand })=>/*#__PURE__*/ jsx(IconButton, {
@@ -56221,45 +56388,84 @@ function CheckTreePicker({ childrenKey = 'children', className, disabled = false
                     }
                 }),
             renderValue: ()=>{
-                const childrenCount = getTreeOptionsBySelectedValues(rsuiteValue, options, childrenKey).flatMap((treeOption)=>treeOption[childrenKey]).length;
-                const parentCount = getTreeOptionsBySelectedValues(rsuiteValue, options, childrenKey).length;
-                return /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ jsxs("span", {
-                            className: "rs-picker-value-list",
-                            title: renderedValue,
-                            children: [
-                                renderedValue,
-                                " ",
-                                /*#__PURE__*/ jsxs(Bold, {
-                                    children: [
-                                        "(",
-                                        parentCount,
-                                        ")"
-                                    ]
-                                })
-                            ]
-                        }),
-                        childrenCount > 0 && /*#__PURE__*/ jsxs("span", {
-                            className: "rs-picker-value-list",
-                            title: renderedChildrenValue,
-                            children: [
-                                renderedChildrenValue,
-                                " ",
-                                /*#__PURE__*/ jsxs(Bold, {
-                                    children: [
-                                        "(",
-                                        childrenCount,
-                                        ")"
-                                    ]
-                                })
-                            ]
+                const children = getTreeOptionsBySelectedValues(rsuiteValue, options, childrenKey, valueKey, labelKey).flatMap((treeOption)=>treeOption[childrenKey]);
+                const parents = getTreeOptionsBySelectedValues(rsuiteValue, options, childrenKey, valueKey, labelKey);
+                if (!shouldShowLabels) {
+                    return /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "rs-picker-value-list",
+                                title: renderedValue,
+                                children: [
+                                    renderedValue,
+                                    " ",
+                                    /*#__PURE__*/ jsxs(Bold, {
+                                        children: [
+                                            "(",
+                                            parents.length,
+                                            ")"
+                                        ]
+                                    })
+                                ]
+                            }),
+                            children.length > 0 && /*#__PURE__*/ jsxs("span", {
+                                className: "rs-picker-value-list",
+                                title: renderedChildrenValue,
+                                children: [
+                                    renderedChildrenValue,
+                                    " ",
+                                    /*#__PURE__*/ jsxs(Bold, {
+                                        children: [
+                                            "(",
+                                            children.length,
+                                            ")"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    });
+                }
+                const optionsToDisplay = getOptionsToDisplay(options, [
+                    ...parents,
+                    ...children
+                ], childrenKey, valueKey);
+                return /*#__PURE__*/ jsx(Wrapper, {
+                    children: /*#__PURE__*/ jsx(SubWrapper, {
+                        children: optionsToDisplay.map((option)=>{
+                            const isParent = option[childrenKey] !== undefined && option[childrenKey].length > 0;
+                            return /*#__PURE__*/ jsxs(SelectedOptionContainer, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(SelectedOptionLabel, {
+                                        $isLight: isLight || isTransparent,
+                                        title: option[labelKey],
+                                        children: [
+                                            option[labelKey],
+                                            isParent && ' (Tout)'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(StyledButton, {
+                                        $isLight: isLight || isTransparent,
+                                        accent: Accent.TERTIARY,
+                                        Icon: Close,
+                                        onClick: (e)=>{
+                                            removeOptions(isParent ? option[childrenKey].flatMap((child)=>child[valueKey]) : [
+                                                option[valueKey]
+                                            ], e);
+                                        },
+                                        size: Size.SMALL,
+                                        tabIndex: 0,
+                                        title: `Retirer ${option[labelKey]}`
+                                    })
+                                ]
+                            }, option[valueKey]);
                         })
-                    ]
+                    })
                 });
             },
             size: originalProps.size ?? 'sm',
             value: rsuiteValue ?? [],
+            valueKey: valueKey,
             ...originalProps
         })
     });
@@ -56268,6 +56474,56 @@ const Bold = styled.span`
   font-weight: bold;
   margin-right: 4px;
 `;
+const StyledButton = styled(Button)`
+  padding: 0 3px;
+  background-color: ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+
+  &:hover,
+  &._hover {
+    background-color: ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+    border: 1px solid ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+    color: ${(p)=>p.theme.color.maximumRed};
+  }
+
+  &:active,
+  &._active {
+    background-color: ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+    border: 1px solid ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+    color: ${(p)=>p.theme.color.maximumRed};
+  }
+
+  > .Element-IconBox {
+    margin-right: 0px;
+    > svg {
+      height: 10px;
+      width: 10px;
+    }
+  }
+`;
+const Wrapper = styled.div`
+  display: contents;
+`;
+const SubWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: calc(100% - 6px);
+`;
+const SelectedOptionContainer = styled.div`
+  display: flex;
+  gap: 1px;
+  padding-top: 1px;
+  max-width: calc(100% - 6px);
+`;
+const SelectedOptionLabel = styled.span`
+  background-color: ${(p)=>p.$isLight ? p.theme.color.gainsboro : p.theme.color.white};
+  font-size: 11px;
+  padding: 2px 8px 1px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+`;
 
 function isNumeric(val) {
     // parseFloat NaNs numeric-cast false positives (null|true|false|"")

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "24.17.1",
+  "version": "24.18.1",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {
     "node": ">=20"
   },
   "dependencies": {
-    "@babel/runtime": "7.27.0",
+    "@babel/runtime": "7.27.1",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.6",
     "prop-types": "15.8.1",