@mtes-mct/monitor-ui 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [3.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v3.1.1...v3.2.0) (2023-02-24)
+
+
+### Bug Fixes
+
+* **fields:** use baseContainer document for active elements in DatePicker & DateRangePicker ([753bd1b](https://github.com/MTES-MCT/monitor-ui/commit/753bd1be2b14c843bf25082e280031a0e1a78ac6))
+
+
+### Features
+
+* **cypress:** add first commands ([b685093](https://github.com/MTES-MCT/monitor-ui/commit/b685093ed178b0e409ff1ef8b1d683f254e098f3))
+* **icons:** update ([ebd4fc3](https://github.com/MTES-MCT/monitor-ui/commit/ebd4fc3a6c17a22701c62d886dec5bf10fb464cc))
+
 ## [3.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v3.1.0...v3.1.1) (2023-02-23)
 
 

package/fields/Search.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Option } from '../types';
+import type { AutoCompleteProps as RsuiteAutoCompleteProps } from 'rsuite';
+import type { Promisable } from 'type-fest';
+export type SearchProps<T = string> = Omit<RsuiteAutoCompleteProps, 'as' | 'container' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'open' | 'onSelect' | 'value'> & {
+    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?: T | undefined;
+    error?: string | undefined;
+    isLabelHidden?: boolean | undefined;
+    isLight?: boolean | undefined;
+    isSearchIconHidden?: boolean | undefined;
+    label: string;
+    name: string;
+    onChange?: ((nextValue: T | undefined) => Promisable<void>) | undefined;
+    onQuery?: ((nextQuery: string | undefined) => Promisable<void>) | undefined;
+    options?: Option<T>[] | undefined;
+    queryMap?: ((record: Record<string, any>) => Option<T>) | undefined;
+    queryUrl?: string | undefined;
+};
+export declare function Search<T = string>({ baseContainer, defaultValue, error, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }: SearchProps<T>): JSX.Element;

package/formiks/FormikSearch.d.ts

@@ -0,0 +1,3 @@
+import type { SearchProps } from '../fields/Search';
+export type FormikSearchProps = Omit<SearchProps, 'defaultValue' | 'error' | 'onChange'>;
+export declare function FormikSearch({ name, ...originalProps }: FormikSearchProps): JSX.Element;

package/index.d.ts

@@ -13,7 +13,7 @@ export { Label } from './elements/Label';
 export { Legend } from './elements/Legend';
 export { Tag } from './elements/Tag';
 export { TagGroup } from './elements/TagGroup';
-export { AutoComplete } from './fields/AutoComplete';
+export { Search } from './fields/Search';
 export { Checkbox } from './fields/Checkbox';
 export { DatePicker } from './fields/DatePicker';
 export { DateRangePicker } from './fields/DateRangePicker';
@@ -26,7 +26,7 @@ export { CoordinatesInput } from './fields/CoordinatesInput';
 export { Select } from './fields/Select';
 export { Textarea } from './fields/Textarea';
 export { TextInput } from './fields/TextInput';
-export { FormikAutoComplete } from './formiks/FormikAutoComplete';
+export { FormikSearch } from './formiks/FormikSearch';
 export { FormikCheckbox } from './formiks/FormikCheckbox';
 export { FormikCoordinatesInput } from './formiks/FormikCoordinatesInput';
 export { FormikDatePicker } from './formiks/FormikDatePicker';
@@ -63,7 +63,7 @@ export type { LabelProps } from './elements/Label';
 export type { LegendProps } from './elements/Legend';
 export type { TagProps } from './elements/Tag';
 export type { TagGroupProps } from './elements/TagGroup';
-export type { AutoCompleteProps } from './fields/AutoComplete';
+export type { SearchProps } from './fields/Search';
 export type { CheckboxProps } from './fields/Checkbox';
 export type { DatePickerWithDateDateProps, DatePickerWithStringDateProps } from './fields/DatePicker';
 export type { DateRangePickerWithDateDateProps, DateRangePickerWithStringDateProps } from './fields/DateRangePicker';
@@ -76,7 +76,7 @@ export type { CoordinatesInputProps } from './fields/CoordinatesInput';
 export type { SelectProps } from './fields/Select';
 export type { TextareaProps } from './fields/Textarea';
 export type { TextInputProps } from './fields/TextInput';
-export type { FormikAutoCompleteProps } from './formiks/FormikAutoComplete';
+export type { FormikSearchProps } from './formiks/FormikSearch';
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox';
 export type { FormikCoordinatesInputProps } from './formiks/FormikCoordinatesInput';
 export type { FormikDatePickerWithDateDateProps, FormikDatePickerWithStringDateProps } from './formiks/FormikDatePicker';

package/index.js

@@ -1,7 +1,7 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import { Dropdown as Dropdown$1, AutoComplete as AutoComplete$1, 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, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 
 var Accent;
@@ -2582,7 +2582,7 @@ function Save({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("path", { d: "M14.444,2H2V18H18V5.556ZM10,16.222a2.667,2.667,0,1,1,2.667-2.667h0a2.663,2.663,0,0,1-2.659,2.667Zm2.667-8.889H3.778V3.778h8.889Z", fill: "currentColor" }), jsx("rect", { fill: "none", height: "20", width: "20" })] }) }));
 }
 
-function Search({ color, size, ...nativeProps }) {
+function Search$1({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsx("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: jsxs("g", { transform: "translate(200 -41)", children: [jsxs("g", { fill: "none", strokeMiterlimit: "10", children: [jsx("path", { d: "M-181.262,58.262l-5.111-5.111A6.958,6.958,0,0,0-185,49a7,7,0,0,0-7-7,7,7,0,0,0-7,7,7,7,0,0,0,7,7,6.958,6.958,0,0,0,4.151-1.373l5.111,5.111ZM-197,49a5.006,5.006,0,0,1,5-5,5.006,5.006,0,0,1,5,5,5.006,5.006,0,0,1-5,5A5.006,5.006,0,0,1-197,49Z", stroke: "none" }), jsx("path", { d: "M -182.7380065917969 59.73799896240234 L -187.8489990234375 54.62699890136719 C -189.0110015869141 55.48600006103516 -190.4440002441406 56 -192 56 C -195.8659973144531 56 -199 52.86600112915039 -199 49 C -199 45.13399887084961 -195.8659973144531 42 -192 42 C -188.1340026855469 42 -185 45.13399887084961 -185 49 C -185 50.55599975585938 -185.5140075683594 51.98899841308594 -186.3730010986328 53.1510009765625 L -181.2619934082031 58.26200103759766 L -182.7380065917969 59.73799896240234 Z M -192 44 C -194.7570037841797 44 -197 46.24300003051758 -197 49 C -197 51.75699996948242 -194.7570037841797 54 -192 54 C -189.2429962158203 54 -187 51.75699996948242 -187 49 C -187 46.24300003051758 -189.2429962158203 44 -192 44 Z", fill: "currentColor", stroke: "none" })] }), jsx("rect", { fill: "none", height: "20", transform: "translate(-200 41)", width: "20" })] }) }) }));
 }
 
@@ -2695,7 +2695,7 @@ var index = /*#__PURE__*/Object.freeze({
     Plus: Plus,
     Reject: Reject,
     Save: Save,
-    Search: Search,
+    Search: Search$1,
     SelectCircle: SelectCircle,
     SelectPolygon: SelectPolygon,
     SelectRectangle: SelectRectangle,
@@ -3928,11 +3928,12 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
+function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, ...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 [isOpen, setIsOpen] = useState(false);
@@ -3951,7 +3952,15 @@ function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLig
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
+    const clean = useCallback(() => {
+        setInputValue('');
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback(async (nextQuery) => {
+        if (!(typeof nextQuery === 'string')) {
+            return;
+        }
+        setInputValue(nextQuery);
         queryRef.current = normalizeString(nextQuery);
         if (queryUrl && queryMap && queryRef.current) {
             const url = queryUrl.replace('%s', queryRef.current);
@@ -3990,20 +3999,52 @@ function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLig
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$c, { ref: boxRef, 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, ...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 }), 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 }))] }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
-const StyledAutoComplete = styled(AutoComplete$1) `
+const StyledCloseButton = styled(IconButton) `
+  cursor: pointer;
+  height: 30px;
+  margin: 5px ${p => (p.isSearchIconHidden ? 5 : 0)}px 5px 5px;
+  padding: 8px;
+  width: 30px;
+`;
+const StyledSearchButton = styled(IconButton) `
+  border: unset;
+  cursor: pointer;
+  margin: 10px 10px 10px 8px;
+  padding: 0px;
+`;
+const Separator = styled.div `
+  height: 40px;
+  font-weight: 300;
+  color: ${p => p.theme.color.lightGray};
+  padding-top: 3px;
+  font-size: 20.5px;
+`;
+const StyledAutoComplete = styled(AutoComplete) `
   font-size: 13px;
+  flex-grow: 1;
 
   > input {
     background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-    border: 0;
+    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;
+    padding: 11px 16px;
+
+    :focus {
+      outline: unset;
+      border-color: ${p => p.theme.color.blueGray['100']};
+    }
   }
 `;
 const Box$c = styled.div `
+  background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   position: relative;
+  width: 100%;
+  display: flex;
 
   > .rs-picker-select {
     > .rs-picker-toggle {
@@ -15978,16 +16019,16 @@ const StyledInput = styled(Input) `
   }
 `;
 
-function FormikAutoComplete({ name, ...originalProps }) {
+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(AutoComplete, { name: name, onChange: helpers.setValue, ...originalProps });
+        return jsx(Search, { name: name, onChange: helpers.setValue, ...originalProps });
     }
-    return (jsx(AutoComplete, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(Search, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
@@ -16104,5 +16145,5 @@ function FormikTextInput({ name, ...originalProps }) {
     return (jsx(TextInput, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
-export { Accent, AutoComplete, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, dayjs, getCoordinates, getLocalizedDayjs, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate, useKey, usePrevious };
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, dayjs, getCoordinates, getLocalizedDayjs, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useForceUpdate, useKey, usePrevious };
 //# sourceMappingURL=index.js.map