@mtes-mct/monitor-ui 2.14.5 → 2.16.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [2.15.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.14.5...v2.15.0) (2023-02-10)
+
+
+### Features
+
+* **elements:** stop click event propagation in Button & IconButton ([0796b02](https://github.com/MTES-MCT/monitor-ui/commit/0796b02b12fed5fe170fb9b8ce5734f9b54b8c9b))
+* **fields:** add ellipsis for long options in MultiSelect & Select ([0c14f05](https://github.com/MTES-MCT/monitor-ui/commit/0c14f05582d9b8b5454a57908cb5a614837460dd))
+* **fields:** add title to MultiSelect & Select options label ([0d5bca5](https://github.com/MTES-MCT/monitor-ui/commit/0d5bca51b659564c4bac034290b0609b7f693233))
+
+## [2.14.5](https://github.com/MTES-MCT/monitor-ui/compare/v2.14.4...v2.14.5) (2023-02-09)
+
+
+### Bug Fixes
+
+* **fields:** add css selector for toggle event ([2c61e67](https://github.com/MTES-MCT/monitor-ui/commit/2c61e672fc979d92b43e3912b382754bfcc40eef))
+
 ## [2.14.4](https://github.com/MTES-MCT/monitor-ui/compare/v2.14.3...v2.14.4) (2023-02-09)
 
 

package/config/cypress.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Cypress.ConfigOptions<any>;
+export default _default;

package/index.js

@@ -2057,21 +2057,32 @@ const Dropdown = Object.assign(RawDropdown, {
     Item
 });
 
+function stopMouseEventPropagation(event) {
+    event.stopPropagation();
+}
+
 const ICON_SIZE = {
     [Size.LARGE]: 20,
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children] })), [children, Icon, size]);
+    const handleClick = useCallback((event) => {
+        stopMouseEventPropagation(event);
+        if (onClick) {
+            onClick(event);
+        }
+    }, [onClick]);
     const commonProps = useMemo(() => ({
         as: StyledButton$1,
         children: commonChildren,
         isFullWidth,
+        onClick: handleClick,
         size,
         type,
         ...nativeProps
-    }), [commonChildren, isFullWidth, nativeProps, size, type]);
+    }), [commonChildren, isFullWidth, handleClick, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { ...commonProps });
@@ -2189,7 +2200,7 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, onClick, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const children = useMemo(() => jsx(Icon, { color: color, size: iconSize || ICON_SIZE_IN_PX[size] }), [color, Icon, iconSize, size]);
     const commonProps = useMemo(() => ({
         children,
@@ -2197,13 +2208,19 @@ function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, size = Siz
         type,
         ...nativeProps
     }), [children, nativeProps, size, type]);
+    const handleClick = useCallback((event) => {
+        stopMouseEventPropagation(event);
+        if (onClick) {
+            onClick(event);
+        }
+    }, [onClick]);
     switch (accent) {
         case Accent.SECONDARY:
-            return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
+            return jsx(SecondaryButton, { as: StyledButton, onClick: handleClick, ...commonProps });
         case Accent.TERTIARY:
-            return jsx(TertiaryButton, { as: StyledButton, ...commonProps });
+            return jsx(TertiaryButton, { as: StyledButton, onClick: handleClick, ...commonProps });
         default:
-            return jsx(PrimaryButton, { as: StyledButton, ...commonProps });
+            return jsx(PrimaryButton, { as: StyledButton, onClick: handleClick, ...commonProps });
     }
 }
 const PADDING = {
@@ -4258,10 +4275,6 @@ p.$isDisabled
   }
 `;
 
-function stopMouseEventPropagation(event) {
-    event.stopPropagation();
-}
-
 function RangedTimePicker({ filter, minutesRange, onChange }) {
     const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
     const rangedTimeOptions = useMemo(() => getRangedTimeOptions(minutesRange), [minutesRange]);
@@ -5265,6 +5278,7 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
+    const renderMenuItem = useCallback((_label) => jsx("span", { title: String(_label), children: _label }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
         if (targetElement.tagName === 'path') {
@@ -5283,7 +5297,7 @@ searchable = false, ...originalProps }) {
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, defaultValue: controlledDefaultValue, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$1 = styled.div `
   position: relative;
@@ -5340,6 +5354,8 @@ const Box$1 = styled.div `
   }
 
   > .rs-picker-menu {
+    max-width: 100%;
+
     > .rs-picker-check-menu {
       margin: 0;
 
@@ -5349,7 +5365,10 @@ const Box$1 = styled.div `
             > 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;
@@ -5543,6 +5562,7 @@ searchable = false, ...originalProps }) {
             onChange(normalizedNextValue);
         }
     }, [close, onChange]);
+    const renderMenuItem = useCallback((_label) => jsx("span", { title: String(_label), children: _label }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
         if (targetElement.tagName === 'path') {
@@ -5566,7 +5586,7 @@ searchable = false, ...originalProps }) {
     return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, defaultValue: controlledDefaultValue, id: originalProps.name, 
                     // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
                     // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
-                    onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onChange: handleChange, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -5615,6 +5635,38 @@ const Box = styled.div `
       }
     }
   }
+
+  > .rs-picker-menu {
+    max-width: 100%;
+
+    > .rs-picker-search-bar {
+      > .rs-picker-search-bar-input {
+        background-color: ${p => p.theme.color.white};
+        border: solid 1px ${p => p.theme.color.lightGray};
+        border-radius: 0;
+        font-size: 13px;
+        padding: 4px 8px 6px 8px;
+      }
+
+      > svg {
+        color: ${p => p.theme.color.lightGray};
+        top: 11px;
+      }
+    }
+
+    > .rs-picker-select-menu {
+      > div[role='option'] {
+        > .rs-picker-select-menu-item {
+          font-size: 13px;
+          line-height: 1.3846;
+          overflow: hidden;
+          padding: 6px 12px 10px 12px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 `;
 
 function Textarea({ defaultValue, error, isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
@@ -5793,5 +5845,5 @@ function FormikTextInput({ name, ...originalProps }) {
 
 const noop = () => { };
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, SingleTag, Size, THEME, Tag, TagGroup, TextInput, Textarea, ThemeProvider, dayjs, getLocalizedDayjs, getUtcizedDayjs, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate };
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, SingleTag, Size, THEME, Tag, TagGroup, TextInput, Textarea, ThemeProvider, dayjs, getLocalizedDayjs, getUtcizedDayjs, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate, useKey, usePrevious };
 //# sourceMappingURL=index.js.map