@mtes-mct/monitor-ui 5.9.1 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.9.2](https://github.com/MTES-MCT/monitor-ui/compare/v5.9.1...v5.9.2) (2023-05-10)
+
+
+### Bug Fixes
+
+* **elements:** delete stop click event propagation in Button & IconButton ([b2d70ad](https://github.com/MTES-MCT/monitor-ui/commit/b2d70adf14ce7780b6ef45ff9bbba0d026ac77ef))
+
+## [5.9.1](https://github.com/MTES-MCT/monitor-ui/compare/v5.9.0...v5.9.1) (2023-05-05)
+
+
+### Bug Fixes
+
+* **components:** add default class name to Dialog ([b74ea15](https://github.com/MTES-MCT/monitor-ui/commit/b74ea15a9ae9d629e99eb2917a2acc3b88936736))
+
 # [5.9.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.8.1...v5.9.0) (2023-05-05)
 
 

package/elements/Button.d.ts

@@ -8,7 +8,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'childre
     isFullWidth?: boolean | undefined;
     size?: Size | undefined;
 };
-export declare function Button({ accent, children, Icon, isFullWidth, onClick, size, type, ...nativeProps }: ButtonProps): JSX.Element;
+export declare function Button({ accent, children, Icon, isFullWidth, size, type, ...nativeProps }: ButtonProps): JSX.Element;
 export declare const PrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const TertiaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/elements/IconButton.d.ts

@@ -9,4 +9,4 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'chi
     iconSize?: number | undefined;
     size?: Size | undefined;
 };
-export declare function IconButton({ accent, color, Icon, iconSize, onClick, size, type, ...nativeProps }: IconButtonProps): JSX.Element;
+export declare function IconButton({ accent, color, Icon, iconSize, size, type, ...nativeProps }: IconButtonProps): JSX.Element;

package/fields/Search.d.ts

@@ -6,20 +6,21 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     MenuItem?: React.ElementType | undefined;
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
-    defaultValue?: OptionValue | undefined;
     error?: string | undefined;
     isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
-    isSearchIconHidden?: boolean | undefined;
+    isSearchIconVisible?: boolean | undefined;
     label: string;
     name: string;
     onChange?: ((nextValue: OptionValue | undefined) => Promisable<void>) | undefined;
     onQuery?: ((nextQuery: string | undefined) => Promisable<void>) | undefined;
-    options?: Option<OptionValue>[] | undefined;
+    optionValueKey?: keyof OptionValue | undefined;
+    options?: Option<OptionValue>[];
     queryMap?: ((record: Record<string, any>) => Option<OptionValue>) | undefined;
     queryUrl?: string | undefined;
     /** Duration in milliseconds */
     throttleDuration?: number;
+    value?: OptionValue | undefined;
 };
-export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, defaultValue, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration, ...originalProps }: SearchProps<OptionValue>): JSX.Element;
+export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, queryMap, queryUrl, throttleDuration, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;

package/index.js

@@ -1014,84 +1014,6 @@ _dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
 
 var map$1 = map;
 
-/**
- * Determine if the passed argument is an integer.
- *
- * @private
- * @param {*} n
- * @category Type
- * @return {Boolean}
- */
-var _isInteger = Number.isInteger || function _isInteger(n) {
-  return n << 0 === n;
-};
-
-/**
- * Returns the nth element of the given list or string. If n is negative the
- * element at index length + n is returned.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category List
- * @sig Number -> [a] -> a | Undefined
- * @sig Number -> String -> String
- * @param {Number} offset
- * @param {*} list
- * @return {*}
- * @example
- *
- *      const list = ['foo', 'bar', 'baz', 'quux'];
- *      R.nth(1, list); //=> 'bar'
- *      R.nth(-1, list); //=> 'quux'
- *      R.nth(-99, list); //=> undefined
- *
- *      R.nth(2, 'abc'); //=> 'c'
- *      R.nth(3, 'abc'); //=> ''
- * @symb R.nth(-1, [a, b, c]) = c
- * @symb R.nth(0, [a, b, c]) = a
- * @symb R.nth(1, [a, b, c]) = b
- */
-
-var nth =
-/*#__PURE__*/
-_curry2(function nth(offset, list) {
-  var idx = offset < 0 ? list.length + offset : offset;
-  return _isString(list) ? list.charAt(idx) : list[idx];
-});
-
-/**
- * Returns a function that when supplied an object returns the indicated
- * property of that object, if it exists.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Object
- * @typedefn Idx = String | Int | Symbol
- * @sig Idx -> {s: a} -> a | Undefined
- * @param {String|Number} p The property name or array index
- * @param {Object} obj The object to query
- * @return {*} The value at `obj.p`.
- * @see R.path, R.props, R.pluck, R.project, R.nth
- * @example
- *
- *      R.prop('x', {x: 100}); //=> 100
- *      R.prop('x', {}); //=> undefined
- *      R.prop(0, [100]); //=> 100
- *      R.compose(R.inc, R.prop('x'))({ x: 3 }) //=> 4
- */
-
-var prop =
-/*#__PURE__*/
-_curry2(function prop(p, obj) {
-  if (obj == null) {
-    return;
-  }
-
-  return _isInteger(p) ? nth(p, obj) : obj[p];
-});
-
 /**
  * Returns a single item by iterating through the list, successively calling
  * the iterator function and passing it an accumulator value and the current
@@ -2123,40 +2045,6 @@ _curry2(function mergeDeepRight(lObj, rObj) {
 
 var mergeDeepRight$1 = mergeDeepRight;
 
-/**
- * Returns `true` if the specified object property is equal, in
- * [`R.equals`](#equals) terms, to the given value; `false` otherwise.
- * You can test multiple properties with [`R.whereEq`](#whereEq).
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Relation
- * @sig String -> a -> Object -> Boolean
- * @param {String} name
- * @param {*} val
- * @param {*} obj
- * @return {Boolean}
- * @see R.whereEq, R.propSatisfies, R.equals
- * @example
- *
- *      const abby = {name: 'Abby', age: 7, hair: 'blond'};
- *      const fred = {name: 'Fred', age: 12, hair: 'brown'};
- *      const rusty = {name: 'Rusty', age: 10, hair: 'brown'};
- *      const alois = {name: 'Alois', age: 15, disposition: 'surly'};
- *      const kids = [abby, fred, rusty, alois];
- *      const hasBrownHair = R.propEq('hair', 'brown');
- *      R.filter(hasBrownHair, kids); //=> [fred, rusty]
- */
-
-var propEq =
-/*#__PURE__*/
-_curry3(function propEq(name, val, obj) {
-  return equals$1(val, prop(name, obj));
-});
-
-var propEq$1 = propEq;
-
 const UntypedStyledComponentsThemeProvider = ThemeProvider$1;
 function ThemeProvider({ children, theme = {} }) {
     const finalTheme = mergeDeepRight$1(THEME, theme);
@@ -2709,23 +2597,16 @@ const ICON_SIZE = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children && jsx(ButtonLabel, { children: 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, handleClick, nativeProps, size, type]);
+    }), [commonChildren, isFullWidth, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { ...commonProps });
@@ -2851,7 +2732,7 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, onClick, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, 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,
@@ -2859,19 +2740,13 @@ function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, onClick, s
         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, onClick: handleClick, ...commonProps });
+            return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
         case Accent.TERTIARY:
-            return jsx(TertiaryButton, { as: StyledButton, onClick: handleClick, ...commonProps });
+            return jsx(TertiaryButton, { as: StyledButton, ...commonProps });
         default:
-            return jsx(PrimaryButton, { as: StyledButton, onClick: handleClick, ...commonProps });
+            return jsx(PrimaryButton, { as: StyledButton, ...commonProps });
     }
 }
 const PADDING = {
@@ -21301,6 +21176,18 @@ function useKey(deps) {
     return keyRef.current;
 }
 
+function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
+    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
+}
+
+function getRsuiteDataFromOptions(options, optionValueKey) {
+    return options.map(({ value, ...rest }) => ({
+        ...rest,
+        optionValue: value,
+        value: getRsuiteValueFromOptionValue(value, optionValueKey)
+    }));
+}
+
 /**
  * Trim and single-space a string
  */
@@ -21319,27 +21206,19 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, defaultValue, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration = 200, ...originalProps }) {
+function Search({ baseContainer, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, queryMap, queryUrl, throttleDuration = 200, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const queryRef = useRef(undefined);
-    const prevDefaultValuePropRef = useRef(defaultValue);
-    const [inputValue, setInputValue] = useState(undefined);
-    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
-    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
+    const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
+    const [formattedOptions, setFormattedOptions] = useState(data);
     const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
-    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
-    const controlledValueAsLabel = useMemo(() => {
-        if (originalProps.disabled) {
-            return undefined;
-        }
-        const foundOption = controlledOptions.find(propEq$1('value', controlledDefaultValue));
-        return foundOption ? foundOption.label : undefined;
-    }, [controlledDefaultValue, controlledOptions, originalProps.disabled]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([value, originalProps.disabled, originalProps.name]);
+    const rsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
+    const [inputValue, setInputValue] = useState(rsuiteValue);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -21352,61 +21231,51 @@ function Search({ baseContainer, defaultValue, error, isErrorMessageHidden = fal
         const rawData = await ky$1.get(url).json();
         return rawData.map(_queryMap);
     }, throttleDuration);
-    const handleChange = useCallback(async (nextQuery) => {
+    const handleChange = useCallback(async (nextQuery, event) => {
         if (!(typeof nextQuery === 'string')) {
             return;
         }
-        setInputValue(nextQuery);
         queryRef.current = normalizeString(nextQuery);
+        if (event.type === 'change') {
+            setInputValue(nextQuery);
+            setIsOpen(Boolean(queryRef.current));
+        }
+        else {
+            setIsOpen(false);
+        }
         if (queryUrl && queryMap && queryRef.current) {
             const nextData = (await fetchQueryResponse(queryRef.current, queryUrl, queryMap)) || [];
-            setAutoGeneratedOptions(nextData);
+            setFormattedOptions(getRsuiteDataFromOptions(nextData, optionValueKey));
         }
-        setIsOpen(Boolean(queryRef.current));
         if (onChange && !queryRef.current) {
             onChange(undefined);
         }
         if (onQuery) {
             onQuery(queryRef.current);
         }
-    }, [onChange, onQuery, queryMap, queryUrl, fetchQueryResponse]);
-    const handleSelect = useCallback((nextValue) => {
+    }, [onChange, onQuery, queryMap, queryUrl, fetchQueryResponse, optionValueKey]);
+    const handleSelect = useCallback((_, item) => {
         if (onChange) {
-            onChange(nextValue);
+            onChange(item.optionValue);
         }
-        setDefaultControlledValue(nextValue);
+        setInputValue(item.label);
     }, [onChange]);
-    const open = useCallback(() => {
-        if (!queryRef.current) {
-            return;
-        }
-        setIsOpen(true);
-    }, []);
-    useEffect(() => {
-        if (defaultValue === prevDefaultValuePropRef.current) {
-            return;
-        }
-        setDefaultControlledValue(defaultValue);
-    }, [defaultValue]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Search", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, onClick: open, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconHidden: isSearchIconHidden, onClick: clean, size: Size.SMALL }), !isSearchIconHidden && jsx(Separator, { children: "|" })] })), !isSearchIconHidden && (jsx(StyledSearchButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Search$1, size: Size.NORMAL }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: "Field-Search", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: formattedOptions, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
   height: 30px;
-  margin: 5px ${p => (p.isSearchIconHidden ? 5 : 0)}px 5px 5px;
+  margin: 5px ${p => (p.isSearchIconVisible ? 0 : 5)}px 5px 5px;
   padding: 8px;
   width: 30px;
 `;
-const StyledSearchButton = styled(IconButton) `
-  border: unset;
-  cursor: pointer;
+const StyledIconSearch = styled(Search$1) `
   margin: 10px 10px 10px 8px;
-  padding: 0px;
 `;
 const Separator = styled.div `
   height: 40px;
@@ -21423,6 +21292,7 @@ const StyledAutoComplete = styled(AutoComplete) `
     background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
     border-width: 0 0 1px;
     border-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+
     font-size: 13px;
     width: 100%;
     height: 40px;
@@ -22984,18 +22854,6 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
-    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
-}
-
-function getRsuiteDataFromOptions(options, optionValueKey) {
-    return options.map(({ value, ...rest }) => ({
-        ...rest,
-        optionValue: value,
-        value: getRsuiteValueFromOptionValue(value, optionValueKey)
-    }));
-}
-
 function MultiSelect({ baseContainer, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
@@ -32403,13 +32261,8 @@ const StyledInput = styled(Input) `
 function FormikSearch({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    if (!defaultValue) {
-        return jsx(Search, { name: name, onChange: helpers.setValue, ...originalProps });
-    }
-    return (jsx(Search, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
+    return jsx(Search, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikCheckbox({ name, ...originalProps }) {