@evergis/uilib-gl 1.0.79 → 1.0.81

package/dist/organisms/AutoComplete/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import { CSSProperties, KeyboardEvent, MouseEvent, PropsWithChildren } from "react";
 import Autosuggest from "react-autosuggest";
 import { IOption } from "../Menu";
 import { InputProps } from "../../molecules/Input";
@@ -56,17 +56,17 @@ export interface IOptionProps {
     onClick?: (e: MouseEvent) => void;
     onMouseDown?: (e: MouseEvent) => void;
 }
-export interface IPopup {
+export interface IPopup extends PropsWithChildren {
     anchor: HTMLElement;
     zIndex?: number;
     suggestions: IOption[];
     bottomBind?: boolean;
     menuHeight?: string;
     width?: string;
+    minWidth?: string;
     containerRef?: (ref: HTMLDivElement | null) => void;
     root?: HTMLElement | null;
     onRequestClose?: VoidFunction;
-    children?: ReactNode | ReactNode[];
 }
 export interface IText {
     highlight?: boolean;

package/dist/organisms/FilterInput/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,45 @@
+import { ChangeEvent, Component, FormEvent } from "react";
+import Autosuggest from "react-autosuggest";
+import { IOption } from "../../Menu";
+import { IAutoCompleteProps, IAutoCompleteState } from "./types";
+export declare class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
+    static defaultProps: {
+        width: string;
+        bottomBind: boolean;
+        valueLengthThrottled: number;
+        valueLengthFilter: number;
+        options: never[];
+        valueLengthAsync: number;
+        filterOptions: (value: string, options: IOption<string>[]) => IOption<string>[];
+    };
+    static getDerivedStateFromProps(nextProps: IAutoCompleteProps, prevState: IAutoCompleteState): {
+        selectedSuggestion: never[];
+        value?: undefined;
+        suggestions?: undefined;
+    } | {
+        value: string | undefined;
+        selectedSuggestion: IOption<string>;
+        suggestions?: undefined;
+    } | {
+        suggestions: never[];
+        selectedSuggestion?: undefined;
+        value?: undefined;
+    } | null;
+    state: IAutoCompleteState;
+    input: HTMLElement | null;
+    loadSuggestionsDebounced: (value: string) => void;
+    loadSuggestionsThrottled: (value: string) => void;
+    constructor(props: IAutoCompleteProps);
+    loadSuggestions: (value: string) => void;
+    onSuggestionsFetchRequested: ({ value }: Autosuggest.SuggestionsFetchRequestedParams) => void;
+    getSuggestions: (value: string, options: IOption[]) => IOption<string>[];
+    onChangeInput: (_event: ChangeEvent<HTMLInputElement>, { newValue }: {
+        newValue: string;
+    }) => void;
+    onSuggestionsClearRequested: () => void;
+    getSuggestionValue: (suggestion: IOption) => string;
+    onSuggestionSelected: (_event: FormEvent<HTMLInputElement>, data: Autosuggest.SuggestionSelectedEventData<IOption>) => void;
+    onRefInput: (ref: HTMLInputElement | null, onAutosuggestRef: (ref: HTMLElement) => void) => void;
+    shouldRenderSuggestions: (value: string) => boolean;
+    render(): import("react").JSX.Element;
+}

package/dist/organisms/FilterInput/AutoComplete/Input.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { IInput } from "./types";
+export declare const InputComponent: FC<IInput>;
+export declare const Input: FC<IInput>;

package/dist/organisms/FilterInput/AutoComplete/Menu.d.ts

@@ -0,0 +1,5 @@
+import { IMenu } from "./types";
+export declare const classNames: {
+    suggestionsList: string;
+};
+export declare const Menu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../atoms/Blank").IBlankProps & IMenu, never>;

package/dist/organisms/FilterInput/AutoComplete/Option.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IOptionProps } from "./types";
+export declare const Option: FC<IOptionProps>;

package/dist/organisms/FilterInput/AutoComplete/Popup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { IPopup } from "./types";
+export declare const PopupComponent: FC<IPopup>;
+export declare const Popup: FC<IPopup>;

package/dist/organisms/FilterInput/AutoComplete/Text.d.ts

@@ -0,0 +1,2 @@
+import { IText } from "./types";
+export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IText, never>;

package/dist/organisms/FilterInput/AutoComplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./types";

package/dist/organisms/FilterInput/AutoComplete/styled.d.ts

@@ -0,0 +1 @@
+export declare const ProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/organisms/FilterInput/AutoComplete/types.d.ts

@@ -0,0 +1,60 @@
+import { KeyboardEvent, CSSProperties, PropsWithChildren } from "react";
+import Autosuggest from "react-autosuggest";
+import { IOption } from "../../Menu";
+import { InputProps } from "../../../molecules/Input";
+import { IBlankProps } from "../../../atoms/Blank";
+export interface IAutoCompleteProps extends Omit<InputProps, "value" | "onChange" | "onSelect" | "onKeyDown"> {
+    options?: IOption[];
+    value: string;
+    width?: string;
+    menuWidth?: string;
+    menuHeight?: string;
+    onSelect?: (option: IOption) => void;
+    onChange: (value: string) => void;
+    autosuggestProps?: Autosuggest.AutosuggestProps<any, any>;
+    asyncCallback?: (value: string) => Promise<IOption[]>;
+    bottomBind?: boolean;
+    zIndex?: number;
+    id?: string;
+    valueLengthThrottled?: number;
+    valueLengthFilter?: number;
+    valueLengthAsync?: number;
+    filterOptions?: FilterOptions;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onGetInnerRef?: (input: HTMLElement) => void;
+    optionStyle?: CSSProperties;
+    root?: HTMLElement | null;
+    loading?: boolean;
+}
+export interface IAutoCompleteState {
+    suggestions: IOption[];
+    selectedSuggestion: IOption | undefined;
+}
+export declare type FilterOptions = (value: string, options: IOption[]) => IOption[];
+export interface IInput {
+    selectedSuggestion?: IOption;
+    innerRef?: RefType<HTMLInputElement | null>;
+}
+export interface IMenu extends IBlankProps {
+    minWidth?: string;
+    maxHeight?: string;
+}
+export interface IOptionProps {
+    query: string;
+    suggestion: IOption;
+    isHighlighted: boolean;
+    optionStyle?: CSSProperties;
+}
+export interface IPopup extends PropsWithChildren {
+    anchor: HTMLElement;
+    zIndex?: number;
+    suggestions: IOption[];
+    bottomBind?: boolean;
+    menuHeight?: string;
+    width?: string;
+    containerRef?: (ref: HTMLDivElement | null) => void;
+    root?: HTMLElement | null;
+}
+export interface IText {
+    highlight?: boolean;
+}

package/dist/organisms/FilterInput/types.d.ts

@@ -56,7 +56,7 @@ export interface FilterInputProps {
     selectedOption?: FilterTypeOption | null;
     onShown?: VoidFunction;
     onChange?: (filterType: FilterTypeOption | null, value: FilterValue) => void;
-    asyncCallback?: (value: string) => Promise<void>;
+    asyncCallback?: (value: string) => Promise<IOption[]>;
     zIndex?: number;
     menuTitle?: string;
     clearTitle?: string;

package/dist/uilib-gl.esm.js

@@ -40,6 +40,7 @@ import addDays from 'date-fns/addDays';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import getDay from 'date-fns/getDay';
 import { returnFound, removeObject, changeProps, insertObjectAfter } from 'find-and';
+import isNil$1 from 'lodash-es/isNil';
 import { parse } from 'date-fns';
 import { DateRange } from 'react-date-range';
 import PropTypes from 'prop-types';
@@ -13709,7 +13710,7 @@ const Box = styled.span`
       borderRadius
     }
   } = _ref3;
-  return borderRadius.medium;
+  return borderRadius.xSmall;
 }};
   box-sizing: border-box;
   overflow: hidden;
@@ -18783,7 +18784,7 @@ const OptionContainer = styled.div`
   justify-content: flex-start;
   align-items: center;
   min-height: 1.25em;
-  padding: 0.75rem 1rem;
+  padding: 0.625rem 1rem;
   color: ${_ref => {
   let {
     theme: {
@@ -18856,7 +18857,6 @@ const OptionContainer = styled.div`
 }};
 `;
 const OptionIcon = styled.span`
-  margin-right: 0.5rem;
   min-width: 1.5rem;
   text-overflow: unset !important;
 `;
@@ -21086,16 +21086,22 @@ const classNames = {
 };
 const Menu$1 = /*#__PURE__*/styled(Blank)`
   position: relative;
-  min-width: ${_ref => {
+  width: ${_ref => {
   let {
-    minWidth
+    width
   } = _ref;
+  return width ?? "auto";
+}};
+  min-width: ${_ref2 => {
+  let {
+    minWidth
+  } = _ref2;
   return minWidth;
 }};
-  max-height: ${_ref2 => {
+  max-height: ${_ref3 => {
   let {
     maxHeight
-  } = _ref2;
+  } = _ref3;
   return maxHeight;
 }};
   padding: 0.625rem 0;
@@ -21114,6 +21120,7 @@ const PopupComponent = _ref => {
     bottomBind,
     menuHeight,
     width,
+    minWidth,
     anchor,
     children,
     containerRef,
@@ -21132,7 +21139,8 @@ const PopupComponent = _ref => {
     root: root,
     onRequestClose: onRequestClose
   }, React.createElement(Menu$1, Object.assign({
-    minWidth: width,
+    width: width,
+    minWidth: minWidth,
     maxHeight: menuHeight,
     ref: containerRef
   }, props), children));
@@ -24122,6 +24130,392 @@ const DraggableTree = _ref => {
   return React.createElement(DraggableTreeContainer, null, renderNodes(nodesClone, 0));
 };
 
+const classNames$1 = {
+  suggestionsList: "react-autosuggest__suggestions-list"
+};
+const Menu$2 = /*#__PURE__*/styled(Blank)`
+  position: relative;
+  min-width: ${_ref => {
+  let {
+    minWidth
+  } = _ref;
+  return minWidth;
+}};
+  max-height: ${_ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return maxHeight;
+}};
+  padding: 0.625rem 0;
+
+  .${classNames$1.suggestionsList} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+const PopupComponent$2 = _ref => {
+  let {
+    zIndex,
+    suggestions,
+    bottomBind,
+    menuHeight,
+    width,
+    anchor,
+    children,
+    containerRef,
+    root,
+    ...props
+  } = _ref;
+  return React.createElement(Popover, {
+    open: suggestions.length > 0 && !!children,
+    anchorOrigin: bottomBind ? "bottom-left" : "top-left",
+    targetOrigin: bottomBind ? "top-left" : "bottom-left",
+    animateX: false,
+    zIndex: zIndex || 1,
+    anchor: anchor,
+    root: root
+  }, React.createElement(Menu$2, Object.assign({
+    minWidth: width,
+    maxHeight: menuHeight,
+    ref: containerRef
+  }, props), children));
+};
+const Popup$2 = /*#__PURE__*/memo(PopupComponent$2);
+
+const Text$2 = styled.span`
+  font-weight: ${_ref => {
+  let {
+    highlight
+  } = _ref;
+  return highlight ? "bold" : "normal";
+}};
+`;
+
+const OptionComponent$2 = _ref => {
+  let {
+    query,
+    suggestion,
+    isHighlighted,
+    optionStyle
+  } = _ref;
+  const {
+    text: optionText,
+    icon,
+    value,
+    prefix,
+    style
+  } = suggestion;
+  const parts = getHighlightParts(optionText || "", query);
+  return React.createElement(OptionContainer, {
+    nullable: value === null,
+    selected: isHighlighted,
+    onMouseDown: e => e.preventDefault(),
+    style: optionStyle || style
+  }, prefix, icon && React.createElement(OptionIcon, null, React.createElement(Icon, {
+    kind: icon
+  })), React.createElement("span", null, parts.map((_ref2, index) => {
+    let {
+      text,
+      highlight
+    } = _ref2;
+    return React.createElement(Text$2, {
+      highlight: highlight,
+      key: `text-${index}`
+    }, text);
+  })));
+};
+
+const Option$2 = /*#__PURE__*/memo(OptionComponent$2);
+
+const InputComponent$2 = _ref => {
+  let {
+    selectedSuggestion,
+    ...props
+  } = _ref;
+  const icon = (selectedSuggestion == null ? void 0 : selectedSuggestion.icon) && React.createElement(Icon, {
+    kind: selectedSuggestion.icon
+  });
+  const prefix = selectedSuggestion != null && selectedSuggestion.prefix ? React.createElement("div", {
+    style: {
+      marginLeft: "0.5rem"
+    }
+  }, selectedSuggestion == null ? void 0 : selectedSuggestion.prefix) : null;
+  return React.createElement(Input$1, Object.assign({
+    iconBefore: icon || prefix
+  }, props));
+};
+const Input$4 = /*#__PURE__*/memo(InputComponent$2);
+
+const ProgressContainer$2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+const filterOptions$1 = (value, options) => options.filter(item => {
+  var _item$text;
+
+  return (_item$text = item.text) == null ? void 0 : _item$text.trim().toLowerCase().includes(value || "");
+}).sort((_a, b) => {
+  var _b$text;
+
+  return ((_b$text = b.text) == null ? void 0 : _b$text.toLowerCase().indexOf(value || "")) === 0 ? 1 : -1;
+});
+
+class AutoComplete$1 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      suggestions: [],
+      selectedSuggestion: undefined
+    };
+    this.input = null;
+
+    this.loadSuggestions = value => {
+      const {
+        asyncCallback,
+        valueLengthAsync
+      } = this.props;
+      const inputValue = value.trim();
+
+      if (asyncCallback && inputValue.length >= valueLengthAsync) {
+        asyncCallback(value).then(suggestions => {
+          this.setState({
+            suggestions: this.getSuggestions(value, suggestions)
+          });
+        });
+      }
+    };
+
+    this.onSuggestionsFetchRequested = _ref => {
+      let {
+        value
+      } = _ref;
+      const {
+        options,
+        asyncCallback,
+        valueLengthThrottled
+      } = this.props;
+
+      if (asyncCallback) {
+        if (value.length < valueLengthThrottled) {
+          this.loadSuggestionsThrottled(value);
+        } else {
+          this.loadSuggestionsDebounced(value);
+        }
+      } else {
+        this.setState({
+          suggestions: this.getSuggestions(value, options)
+        });
+      }
+    };
+
+    this.getSuggestions = (value, options) => {
+      const inputValue = value.trim().toLowerCase();
+
+      if (!Array.isArray(options)) {
+        return [];
+      }
+
+      if (!inputValue) {
+        return options;
+      }
+
+      if (this.props.filterOptions) {
+        return this.props.filterOptions(inputValue, options);
+      }
+
+      return [];
+    };
+
+    this.onChangeInput = (_event, _ref2) => {
+      let {
+        newValue
+      } = _ref2;
+      return this.props.onChange(newValue);
+    };
+
+    this.onSuggestionsClearRequested = () => {
+      this.setState({
+        suggestions: []
+      });
+    };
+
+    this.getSuggestionValue = suggestion => {
+      return suggestion.text || "";
+    };
+
+    this.onSuggestionSelected = (_event, data) => {
+      const {
+        onSelect
+      } = this.props;
+      const {
+        suggestion
+      } = data;
+      this.setState({
+        selectedSuggestion: suggestion
+      }, () => {
+        onSelect && onSelect(suggestion);
+      });
+    };
+
+    this.onRefInput = (ref, onAutosuggestRef) => {
+      if (ref) {
+        this.input = ref;
+        onAutosuggestRef(ref);
+
+        if (this.props.onGetInnerRef) {
+          this.props.onGetInnerRef(ref);
+        }
+      }
+    };
+
+    this.shouldRenderSuggestions = value => {
+      const {
+        valueLengthFilter
+      } = this.props;
+      return value.trim().length >= valueLengthFilter;
+    };
+
+    this.loadSuggestionsDebounced = debounce$1(this.loadSuggestions, 500);
+    this.loadSuggestionsThrottled = throttle(this.loadSuggestions, 500);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      value,
+      options,
+      valueLengthFilter
+    } = nextProps;
+    const {
+      selectedSuggestion
+    } = prevState;
+    const suggestion = options == null ? void 0 : options.find(option => option.value === value);
+
+    if (!value) {
+      return {
+        selectedSuggestion: []
+      };
+    }
+
+    if (selectedSuggestion && value !== selectedSuggestion.value && suggestion) {
+      return {
+        value: suggestion.text,
+        selectedSuggestion: suggestion
+      };
+    }
+
+    if (!value && valueLengthFilter && valueLengthFilter > 0) {
+      return {
+        suggestions: []
+      };
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      suggestions,
+      selectedSuggestion
+    } = this.state;
+    const {
+      value,
+      onChange,
+      onSelect,
+      width,
+      autosuggestProps,
+      zIndex,
+      menuHeight,
+      bottomBind,
+      id,
+      menuWidth,
+      onGetInnerRef,
+      optionStyle,
+      root,
+      loading,
+      ...props
+    } = this.props;
+    const inputProps = {
+      value,
+      onChange: this.onChangeInput,
+      width,
+      id,
+      ...props
+    };
+    return React.createElement(Autosuggest, Object.assign({
+      suggestions: suggestions,
+      shouldRenderSuggestions: this.shouldRenderSuggestions,
+      onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
+      onSuggestionsClearRequested: this.onSuggestionsClearRequested,
+      getSuggestionValue: this.getSuggestionValue,
+      renderSuggestion: (suggestion, _ref3) => {
+        let {
+          query,
+          isHighlighted
+        } = _ref3;
+        return React.createElement(Option$2, {
+          suggestion: suggestion,
+          query: query,
+          isHighlighted: isHighlighted,
+          optionStyle: optionStyle
+        });
+      },
+      renderSuggestionsContainer: _ref4 => {
+        let {
+          containerProps: {
+            ref,
+            ...containerProps
+          },
+          children
+        } = _ref4;
+        return React.createElement(Popup$2, Object.assign({
+          anchor: this.input,
+          zIndex: zIndex,
+          width: menuWidth || width,
+          menuHeight: menuHeight,
+          bottomBind: bottomBind,
+          suggestions: suggestions,
+          containerRef: ref,
+          root: root
+        }, containerProps), loading && React.createElement(ProgressContainer$2, null, React.createElement(CircularProgress, {
+          diameter: 1.25
+        })), !loading && children);
+      },
+      id: id,
+      onSuggestionSelected: this.onSuggestionSelected,
+      inputProps: inputProps,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      renderInputComponent: _ref5 => {
+        let {
+          ref,
+          ...renderProps
+        } = _ref5;
+        return React.createElement(Input$4, Object.assign({
+          selectedSuggestion: selectedSuggestion,
+          innerRef: input => this.onRefInput(input, ref)
+        }, renderProps));
+      }
+    }, autosuggestProps));
+  }
+
+}
+AutoComplete$1.defaultProps = {
+  width: "14rem",
+  bottomBind: true,
+  valueLengthThrottled: 5,
+  valueLengthFilter: 0,
+  options: [],
+  valueLengthAsync: 0,
+  filterOptions: filterOptions$1
+};
+
 const Spacer = styled.div`
   * {
     margin-right: 1rem;
@@ -25290,7 +25684,7 @@ _ref => {
   [defaultFilterType, isMenuOpened, toggleMenu, selectedOption == null ? void 0 : selectedOption.icon, menuTitle, menuMaxHeight, onFilterTypeSelect]);
   const renderClearButton = useMemo(() => {
     const isArray = Array.isArray(filterValue);
-    return isArray && (filterValue == null ? void 0 : filterValue[0]) !== undefined || !isArray && !isNil(filterValue) ? React.createElement(IconButton, {
+    return isArray && (filterValue == null ? void 0 : filterValue[0]) !== undefined || !isArray && !isNil$1(filterValue) ? React.createElement(IconButton, {
       kind: "close",
       onClick: () => {
         setFilterValue(null);
@@ -25382,7 +25776,7 @@ _ref => {
         });
       }
 
-      return selectedOption != null && selectedOption.autocomplete ? React.createElement(AutoComplete, {
+      return selectedOption != null && selectedOption.autocomplete ? React.createElement(AutoComplete$1, {
         label: label,
         asyncCallback: asyncCallback,
         zIndex: zIndex,
@@ -25393,10 +25787,11 @@ _ref => {
         disableInputOnly: isDisabled,
         onKeyDown: onKeyDown,
         onChange: setFilterValue,
-        onSelect: items => {
-          var _items;
-
-          return onFilterChange(selectedOption, ((_items = items[items.length - 1]) == null ? void 0 : _items.text) || "");
+        onSelect: _ref2 => {
+          let {
+            text
+          } = _ref2;
+          return onFilterChange(selectedOption, text);
         },
         onBlur: () => onFilterChange(selectedOption, filterValue !== "" ? filterValue : null),
         active: active