@mtes-mct/monitor-ui 10.8.0 → 10.9.1

package/index.js

@@ -2,7 +2,7 @@ import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from
 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';
-import { Dropdown as Dropdown$1, AutoComplete, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
+import { Dropdown as Dropdown$1, AutoComplete, Checkbox as Checkbox$1, CheckPicker as CheckPicker$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 import { captureMessage } from '@sentry/react';
 
@@ -2300,7 +2300,7 @@ function stopMouseEventPropagation(event) {
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
     const controlledClassName = classnames('Component-Dialog', className);
-    return /*#__PURE__*/ jsxs(Box$i, {
+    return /*#__PURE__*/ jsxs(Box$j, {
         $isAbsolute: isAbsolute,
         className: controlledClassName,
         onClick: stopMouseEventPropagation,
@@ -2316,7 +2316,7 @@ function RawDialog({ children, className, isAbsolute = false, ...nativeProps })
         ]
     });
 }
-const Box$i = styled.div`
+const Box$j = styled.div`
   position: ${(p)=>p.$isAbsolute ? 'absolute' : 'fixed'};
   top: 0;
   bottom: 0;
@@ -38051,7 +38051,7 @@ function SingleTag({ accent = Accent.PRIMARY, children, className, onDelete, ...
     ]);
     switch(accent){
         case Accent.SECONDARY:
-            return /*#__PURE__*/ jsxs(Box$h, {
+            return /*#__PURE__*/ jsxs(Box$i, {
                 className: controlledClassName,
                 ...nativeProps,
                 children: [
@@ -38067,7 +38067,7 @@ function SingleTag({ accent = Accent.PRIMARY, children, className, onDelete, ...
                 ]
             });
         default:
-            return /*#__PURE__*/ jsxs(Box$h, {
+            return /*#__PURE__*/ jsxs(Box$i, {
                 className: controlledClassName,
                 ...nativeProps,
                 children: [
@@ -38084,7 +38084,7 @@ function SingleTag({ accent = Accent.PRIMARY, children, className, onDelete, ...
             });
     }
 }
-const Box$h = styled.div`
+const Box$i = styled.div`
   align-items: center;
   display: inline-flex;
   max-width: 100%;
@@ -38219,7 +38219,7 @@ const ExclamationPoint = styled.span`
 function Message({ children, level = Level.WARNING, ...nativeProps }) {
     switch(level){
         case Level.WARNING:
-            return /*#__PURE__*/ jsxs(Box$g, {
+            return /*#__PURE__*/ jsxs(Box$h, {
                 backgroundColor: THEME.color.goldenPoppy25,
                 color: THEME.color.slateGray,
                 ...nativeProps,
@@ -38234,7 +38234,7 @@ function Message({ children, level = Level.WARNING, ...nativeProps }) {
                 ]
             });
         default:
-            return /*#__PURE__*/ jsxs(Box$g, {
+            return /*#__PURE__*/ jsxs(Box$h, {
                 backgroundColor: THEME.color.goldenPoppy25,
                 color: THEME.color.slateGray,
                 ...nativeProps,
@@ -38253,7 +38253,7 @@ function Message({ children, level = Level.WARNING, ...nativeProps }) {
 const Text = styled.div`
   margin-left: 8px;
 `;
-const Box$g = styled.span`
+const Box$h = styled.span`
   background: ${(p)=>p.backgroundColor || p.theme.color.goldenPoppy25};
   color: ${(p)=>p.color || p.theme.color.slateGray};
   padding: 8px 16px 16px 8px;
@@ -38289,7 +38289,7 @@ function Fieldset({ children, className, hasBorder = false, hasError = false, is
     const hasLegend = useMemo(()=>Boolean(legend), [
         legend
     ]);
-    return /*#__PURE__*/ jsxs(Box$f, {
+    return /*#__PURE__*/ jsxs(Box$g, {
         className: classnames('Element-Fieldset', className),
         ...nativeProps,
         children: [
@@ -38308,7 +38308,7 @@ function Fieldset({ children, className, hasBorder = false, hasError = false, is
         ]
     });
 }
-const Box$f = styled.fieldset`
+const Box$g = styled.fieldset`
   align-items: flex-start;
   border: 0;
   display: flex;
@@ -38405,7 +38405,7 @@ function Tag({ accent, backgroundColor, borderColor, bullet, bulletColor, childr
                 ...commonProps
             });
         default:
-            return /*#__PURE__*/ jsx(Box$e, {
+            return /*#__PURE__*/ jsx(Box$f, {
                 $backgroundColor: backgroundColor,
                 $borderColor: borderColor,
                 $color: color,
@@ -38413,7 +38413,7 @@ function Tag({ accent, backgroundColor, borderColor, bullet, bulletColor, childr
             });
     }
 }
-const Box$e = styled.span`
+const Box$f = styled.span`
   align-items: end;
   align-self: flex-start;
   background-color: ${(p)=>{
@@ -38442,16 +38442,16 @@ const Box$e = styled.span`
     margin-right: 4px;
   }
 `;
-const PrimaryTag = styled(Box$e)`
+const PrimaryTag = styled(Box$f)`
   background-color: ${(p)=>p.$isLight ? p.theme.color.white : p.theme.color.gainsboro};
   color: ${(p)=>p.theme.color.gunMetal};
 `;
 // TODO Fix this color.
-const SecondaryTag = styled(Box$e)`
+const SecondaryTag = styled(Box$f)`
   background-color: ${(p)=>p.$isLight ? p.theme.color.goldenPoppy : p.theme.color.goldenPoppy};
   color: ${(p)=>p.theme.color.gunMetal};
 `;
-const TertiaryTag = styled(Box$e)`
+const TertiaryTag = styled(Box$f)`
   background-color: ${(p)=>p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal};
   color: ${(p)=>p.theme.color.white};
 `;
@@ -55879,7 +55879,7 @@ function Search({ baseContainer, className, customSearch = undefined, customSear
                 isHidden: isLabelHidden,
                 children: label
             }),
-            /*#__PURE__*/ jsxs(Box$d, {
+            /*#__PURE__*/ jsxs(Box$e, {
                 ref: boxRef,
                 isLight: isLight,
                 children: [
@@ -55970,7 +55970,7 @@ const StyledAutoComplete = styled(AutoComplete)`
     }
   }
 `;
-const Box$d = styled.div`
+const Box$e = styled.div`
   background-color: ${(p)=>p.isLight ? p.theme.color.white : p.theme.color.gainsboro};
   position: relative;
   width: 100%;
@@ -56045,6 +56045,207 @@ const StyledCheckbox = styled(Checkbox$1)`
   }
 `;
 
+function getRsuiteValuesFromOptionValues(optionValues, optionValueKey) {
+    if (!optionValues || optionValues.length === 0) {
+        return [];
+    }
+    return optionValues.filter((optionValue)=>optionValue !== undefined).map((optionValue)=>String(optionValueKey ? optionValue[optionValueKey] : optionValue));
+}
+
+function CheckPicker({ className, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, 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 rsuiteData = useMemo(()=>getRsuiteDataFromOptions(options, optionValueKey), [
+        options,
+        optionValueKey
+    ]);
+    const hasError = useMemo(()=>Boolean(controlledError), [
+        controlledError
+    ]);
+    const key = useKey([
+        disabled,
+        originalProps.name
+    ]);
+    const selectedRsuiteValue = useMemo(()=>getRsuiteValuesFromOptionValues(value, optionValueKey), [
+        optionValueKey,
+        value
+    ]);
+    const { forceUpdate } = useForceUpdate();
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const getOptionValuesFromRsuiteDataValues = useCallback((rsuiteValues)=>rsuiteData.reduce((optionsValues, rsuiteDataItem)=>{
+            if (!rsuiteValues.includes(rsuiteDataItem.value)) {
+                return optionsValues;
+            }
+            return [
+                ...optionsValues,
+                rsuiteDataItem.optionValue
+            ];
+        }, []), [
+        rsuiteData
+    ]);
+    const handleChange = useCallback((nextOptionRsuiteValues)=>{
+        if (!onChange) {
+            return;
+        }
+        const nextValue = nextOptionRsuiteValues ? getOptionValuesFromRsuiteDataValues(nextOptionRsuiteValues) : [];
+        const normalizedNextValue = nextValue.length > 0 ? nextValue : undefined;
+        setControlledRsuiteData(rsuiteData);
+        onChange(normalizedNextValue);
+    }, [
+        getOptionValuesFromRsuiteDataValues,
+        onChange,
+        rsuiteData
+    ]);
+    const handleSearch = useCallback((nextQuery)=>{
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength ? getRsuiteDataFromOptions(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__*/ jsxs(Field$2, {
+        className: controlledClassName,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                disabled: disabled,
+                hasError: hasError,
+                htmlFor: originalProps.name,
+                isHidden: isLabelHidden,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Box$d, {
+                ref: boxRef,
+                $hasError: hasError,
+                $isLight: isLight,
+                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,
+                    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
+                }, key)
+            }),
+            !isErrorMessageHidden && hasError && /*#__PURE__*/ jsx(FieldError, {
+                children: controlledError
+            })
+        ]
+    });
+}
+const Box$d = styled.div`
+  position: relative;
+  user-select: none;
+  width: 100%;
+
+  > .rs-picker {
+    background-color: ${(p)=>p.$isLight ? p.theme.color.white : p.theme.color.gainsboro} !important;
+    cursor: pointer;
+    width: 100%;
+    height: 30px;
+
+    > .rs-picker-toggle {
+      background-color: ${(p)=>p.$isLight ? p.theme.color.white : p.theme.color.gainsboro} !important;
+      border: solid 1px ${(p)=>p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro} !important;
+      cursor: inherit;
+      font-size: 13px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      :hover {
+        border: solid 1px ${(p)=>p.$hasError ? p.theme.color.maximumRed : p.theme.color.slateGray} !important;
+      }
+
+      :active,
+      :focus {
+        border: solid 1px ${(p)=>p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray} !important;
+      }
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+            line-height: 1;
+            vertical-align: 1px;
+          }
+          .rs-picker-value-count {
+            background-color: ${(p)=>p.theme.color.charcoal} !important;
+            line-height: 18px !important;
+          }
+
+          .rs-picker-toggle-caret {
+            right: 10px;
+          }
+          .rs-picker-toggle-clean,
+          .rs-picker-toggle-caret {
+            top: 5px;
+          }
+        }
+      }
+    }
+  }
+  > .rs-picker-menu {
+    max-width: 100%;
+    > .rs-picker-check-menu {
+      padding-top: 6px;
+      margin: 0;
+
+      > div[role='option'] {
+        > .rs-check-item {
+          > .rs-checkbox-checker {
+            > label {
+              font-size: 13px;
+              line-height: 1.3846;
+              overflow: hidden;
+              padding: 8px 12px 8px 38px;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              > .rs-checkbox-wrapper {
+                left: 12px;
+                top: 10px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 var dayjs_min = {exports: {}};
 
 var hasRequiredDayjs_min;
@@ -58183,6 +58384,9 @@ function MultiSelect({ baseContainer, className, customSearch, customSearchMinQu
             children: String(node)
         }), []);
     const toggle = useCallback((event)=>{
+        if (disabled) {
+            return;
+        }
         let targetElement = event.target;
         if (targetElement.tagName === 'path') {
             if (targetElement.parentElement) {
@@ -58193,7 +58397,8 @@ function MultiSelect({ baseContainer, className, customSearch, customSearchMinQu
             setIsOpen(!isOpen);
         }
     }, [
-        isOpen
+        isOpen,
+        disabled
     ]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
@@ -69652,6 +69857,9 @@ function Select({ baseContainer, className, customSearch, customSearchMinQueryLe
             children: String(node)
         }), []);
     const toggle = useCallback((event)=>{
+        if (disabled) {
+            return;
+        }
         let targetElement = event.target;
         if (targetElement.tagName === 'path') {
             if (targetElement.parentElement) {
@@ -69662,7 +69870,8 @@ function Select({ baseContainer, className, customSearch, customSearchMinQueryLe
             setIsOpen(!isOpen);
         }
     }, [
-        isOpen
+        isOpen,
+        disabled
     ]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
@@ -78408,5 +78617,5 @@ const undefineObjectPropPair = ([key, value])=>[
     return value;
 }
 
-export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DataTable, DatePicker, DateRangePicker, Dialog, Dropdown, ExclamationPoint, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, Level, MapMenuDialog, Message, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, cleanString, coordinatesAreDistinct, customDayjs, getCoordinates, getHashFromCollection, getLocalizedDayjs, getOptionsFromIdAndName, getOptionsFromLabelledEnum, getPseudoRandomString, getUtcizedDayjs, isArray, isDefined, isNumeric, isObject, logSoftError, normalizeString, nullify, pluralize, stopMouseEventPropagation, undefine, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button$1 as Button, CheckPicker, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DataTable, DatePicker, DateRangePicker, Dialog, Dropdown, ExclamationPoint, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, Level, MapMenuDialog, Message, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, cleanString, coordinatesAreDistinct, customDayjs, getCoordinates, getHashFromCollection, getLocalizedDayjs, getOptionsFromIdAndName, getOptionsFromLabelledEnum, getPseudoRandomString, getUtcizedDayjs, isArray, isDefined, isNumeric, isObject, logSoftError, normalizeString, nullify, pluralize, stopMouseEventPropagation, undefine, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map