linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/inputs/select/multiple/index.js

@@ -1,126 +1,289 @@
-import { j as C } from "../../../chunks/jsx-runtime.D1SHvdVE.js";
-import { useState as u, useRef as R, useEffect as F } from "react";
-import { _ as I } from "../../../chunks/lodash.CIAK_hAg.js";
-import fe from "../Dropdown.js";
-import me from "../ActionButtons.js";
-import he from "./Selecteds.js";
-import { keyCodes as p } from "../../../internals/constants.js";
-import Ce from "../../base/InputTextBase.js";
-import { getFilteredMultipleDataCombo as J } from "../helper.js";
-import pe from "../../../hint/index.js";
-import { v as ge } from "../../../chunks/v1.Ds1rkxUj.js";
-const Be = (n) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
+var _Selecteds = _interopRequireDefault(require("./Selecteds"));
+var constants = _interopRequireWildcard(require("../../../internals/constants"));
+var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"));
+var _helper = require("../helper");
+var _hint = _interopRequireDefault(require("../../../hint"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const MultipleSelect = props => {
   const {
-    idKey: d,
-    dataSource: i = [],
-    handlerClear: Q,
-    value: g = [],
-    remoteSearch: L = !1,
-    descriptionKey: f,
-    showClearButton: X,
-    rightElements: Y = [],
-    hint: j,
-    hintPosition: Z = "below",
-    customClassForLabel: V,
-    customClassForWrapper: _,
-    customClassForInputContent: ee,
-    customClassForSideButtons: te
-  } = n, [r, D] = u(i), [s, S] = u([]), [w, m] = u(), [b, y] = u([]), [O, c] = u(!1), [K, W] = u(0), [ne, oe] = u(!1), [v, re] = u(), [ie, le] = u([]), A = `select-component${ge()}`, T = R(null), h = R(null), l = R(null), E = R(null), a = R(null), N = typeof f == "string", se = ["item", "menubutton", "filterinput", "filtercontainer", "label", "actionbutton"], P = () => {
-    l.current && W(l.current.clientWidth);
-  }, $ = (e) => {
+    idKey,
+    dataSource = [],
+    handlerClear,
+    value = [],
+    remoteSearch = false,
+    descriptionKey,
+    showClearButton,
+    rightElements = [],
+    hint,
+    hintPosition = 'below',
+    customClassForLabel,
+    customClassForWrapper,
+    customClassForInputContent,
+    customClassForSideButtons,
+    disabled = false,
+    dropdownMaxWidth = undefined
+  } = props;
+  const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
+  const [currents, setCurrents] = (0, _react.useState)([]);
+  const [selected, setSelected] = (0, _react.useState)();
+  const [inputValue, setInputValue] = (0, _react.useState)([]);
+  const [opened, setOpened] = (0, _react.useState)(false);
+  const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(0);
+  const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
+  const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
+  const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
+  const componentId = "select-component".concat(uuid.v1());
+  const componentRef = (0, _react.useRef)(null);
+  const dropdownRef = (0, _react.useRef)(null);
+  const selectWrapper = (0, _react.useRef)();
+  const gridElRef = (0, _react.useRef)();
+  const inputTextRef = (0, _react.useRef)(null);
+  const descriptionKeyIsString = typeof descriptionKey === 'string';
+  const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];
+  const onScreenResize = () => {
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onClickOutside = event => {
     const {
-      target: t
-    } = e;
-    !se.includes(t.className) && t !== l.current && l.current && !l.current.contains(t) && h.current && !h.current.contains(t) && c(!1);
-  }, M = (e) => {
-    const t = e.target, o = h.current?.parentElement?.id || "", ae = !!document.getElementById(o)?.contains(t);
-    oe(ae);
-  }, z = () => {
-    m(void 0), S([]), n.onSelect && n.onSelect();
-  }, U = (e) => {
-    let t = null;
-    if (L)
-      n.onSearch && n.onSearch(e), c(!0), y([e]);
-    else {
-      let o = i;
-      e.length > 0 && (o = J({
-        inputText: [e],
-        dataSource: i,
-        descriptionKey: f,
-        currents: s
-      })), o && o.length > 0 && (t = o[0]), D(o), c(!0), t && m(t), y([e]);
+      target
+    } = event;
+    if (!insideComponents.includes(target.className) && target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+      setOpened(false);
     }
-  }, x = () => {
-    const e = l.current ? l.current.clientWidth : K;
-    c(!0), W(e);
-  }, q = (e) => {
-    if (e === null) return;
-    const t = [...s, e];
-    S(t), D(i), y([]), a && a.current && a.current.focus(), n.onSelect && m(n.onSelect(t.map((o) => o[d]))), h.current?.focus();
-  }, ce = (e) => {
-    if (s) {
-      const t = s.filter((o) => o[d] !== e);
-      S(t), a && a.current && a.current.focus(), c(!1), n.onSelect && m(n.onSelect(t.map((o) => o[d]))), h.current?.focus();
+  };
+  const onMouseMove = event => {
+    var _dropdownRef$current, _dropdownRef$current$;
+    const target = event.target;
+    const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
+    const dropdownElement = document.getElementById(idDropdown);
+    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
+    setInsideComponent(keepDropdownOpen);
+  };
+  const onClearClick = () => {
+    setSelected(undefined);
+    setCurrents([]);
+    if (props.onSelect) props.onSelect();
+  };
+  const onFilter = filteredValue => {
+    let selectedFilter = null;
+    if (remoteSearch) {
+      if (props.onSearch) props.onSearch(filteredValue);
+      setOpened(true);
+      setInputValue([filteredValue]);
+    } else {
+      let dataComboFilter = dataSource;
+      if (filteredValue.length > 0) {
+        dataComboFilter = (0, _helper.getFilteredMultipleDataCombo)({
+          inputText: [filteredValue],
+          dataSource,
+          descriptionKey,
+          currents
+        });
+      }
+      if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];
+      setDataCombo(dataComboFilter);
+      setOpened(true);
+      if (selectedFilter) setSelected(selectedFilter);
+      setInputValue([filteredValue]);
     }
-  }, ue = () => {
-    c((e) => !e), l.current && W(l.current.clientWidth);
-  }, H = (e) => {
-    n.onBlur && n.onBlur(e), ne || (c(!1), D(i));
-  }, G = (e) => {
-    if (e.keyCode)
-      if (e.keyCode === p.ENTER && w && O)
-        e.preventDefault?.(), s.some((t) => t[d] === w[d]) || (e.preventDefault?.(), q(w));
-      else if ([p.ARROW_UP, p.ARROW_DOWN].includes(e.keyCode)) {
-        O || c(!0);
-        let t = r ? r.findIndex((o) => o === w) : 0;
-        e.keyCode === p.ARROW_DOWN ? t = r && t === r.length - 1 ? 0 : t + 1 : t = r && t === 0 ? r.length - 1 : t - 1, r && r.length && (N && r[t][f] ? y(r[t][f]) : N || y([f(r[t])])), r && m(r[t]);
-      } else if (e.keyCode === p.BACKSPACE) {
-        if (b.length === 0) {
-          const t = I.dropRight(s);
-          S(t), n.onSelect && n.onSelect(t.map((o) => o[d]));
+  };
+  const onFocus = () => {
+    const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
+    setOpened(true);
+    setDropdownWidth(dropdownWidthFocus);
+  };
+  const onSelect = select => {
+    var _dropdownRef$current2;
+    if (select === null) return;
+    const currentsSelect = [...currents, select];
+    setCurrents(currentsSelect);
+    setDataCombo(dataSource);
+    setInputValue([]);
+    if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+    if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
+    (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
+  };
+  const onUnselect = id => {
+    if (currents) {
+      var _dropdownRef$current3;
+      const result = currents.filter(item => item[idKey] !== id);
+      setCurrents(result);
+      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+      setOpened(false);
+      if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
+      (_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.focus();
+    }
+  };
+  const onOpenClose = () => {
+    setOpened(prevState => !prevState);
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onBlur = e => {
+    if (props.onBlur) props.onBlur(e);
+    if (selected && opened) {
+      onSelect(selected);
+    }
+    if (!insideComponent) {
+      setOpened(false);
+      setDataCombo(dataSource);
+    }
+  };
+  const onInputKeyDown = e => {
+    if (e.keyCode) {
+      if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) && selected && opened) {
+        var _e$preventDefault;
+        if (e.keyCode === constants.keyCodes.ENTER) (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+        if (!currents.some(current => current[idKey] === selected[idKey])) {
+          onSelect(selected);
+        }
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
+        if (!opened) setOpened(true);
+        let index = dataCombo ? dataCombo.findIndex(d => d === selected) : 0;
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
+          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
+        } else {
+          index = dataCombo && index === 0 ? dataCombo.length - 1 : index - 1;
+        }
+        if (dataCombo && dataCombo.length) {
+          if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {
+            setInputValue(dataCombo[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);
         }
-      } else e.keyCode === p.TAB && c(!1);
-  }, de = (e) => {
-    re(e);
-  }, B = () => n.disabled || v && (v.disabled || v.hideContent), k = () => n.readOnly || v && v.readOnly;
-  return F(() => (window.addEventListener("resize", P), document.addEventListener("click", $), document.addEventListener("mousemove", M), Q && z(), () => {
-    window.removeEventListener("resize", P), document.removeEventListener("click", $), document.removeEventListener("mousemove", M);
-  }), []), F(() => {
-    if (n.gridLayout) {
-      const e = document.querySelector(`#${A}>.-withinput.grid-container`);
-      E.current !== e && e && (E.current = e);
+        if (dataCombo) setSelected(dataCombo[index]);
+      } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
+        if (inputValue.length === 0) {
+          const currentsKeyDown = _lodash.default.dropRight(currents);
+          setCurrents(currentsKeyDown);
+          if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));
+        }
+      } else if (e.keyCode === constants.keyCodes.TAB) {
+        setOpened(false);
+      }
+    }
+  };
+  const setOnDenied = denied => {
+    setOnDeniedSelect(denied);
+  };
+  const shouldDisable = () => disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('click', onClickOutside);
+    document.addEventListener('mousemove', onMouseMove);
+    if (handlerClear) onClearClick();
+    return () => {
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('click', onClickOutside);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (props.gridLayout) {
+      const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
+      if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;
     }
-  }, []), F(() => {
-    if (g.length > 0 && g !== ie && i.length > 0) {
-      const e = i.filter((t) => g.includes(t[d]));
-      le(g), S(e);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (value.length > 0 && value !== valueFromProps && dataSource.length > 0) {
+      const newCurrents = dataSource.filter(item => value.includes(item[idKey]));
+      setValueFromProps(value);
+      setCurrents(newCurrents);
     }
-  }, [i.length, g.length]), F(() => {
-    if (!I.isEqual(i, r)) {
-      const e = L ? i : J({
-        currents: s,
-        dataSource: i,
-        descriptionKey: f,
-        inputText: b
+  }, [dataSource.length, value.length]);
+  (0, _react.useEffect)(() => {
+    if (!_lodash.default.isEqual(dataSource, dataCombo)) {
+      const filteredDataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)({
+        currents,
+        dataSource,
+        descriptionKey,
+        inputText: inputValue
       });
-      D(e), m(e.length > 0 ? r[0] : null);
+      setDataCombo(filteredDataCombo);
+      setSelected(filteredDataCombo.length > 0 ? dataCombo[0] : null);
     }
-  }, [i]), /* @__PURE__ */ C.jsxs("span", { id: A, ref: T, className: "select-component", children: [
-    /* @__PURE__ */ C.jsx(Ce, { ...n, inputRef: (e) => {
-      n.inputRef && (I.isFunction(n.inputRef) ? n.inputRef(e) : n.inputRef.current = e), a.current = e;
-    }, autoComplete: "off", value: b.toString(), readOnly: k(), onFocus: () => {
-      x();
-    }, onBlur: (e) => {
-      H(e);
-    }, onChange: (e) => {
-      e && U(e.target.value);
-    }, onClick: x, onKeyDown: G, customClassForLabel: V, customClassForWrapper: `selectwrapper ${(n.readOnly || B() || k()) && " -undigitable"} ${_}`, customClassForInputContent: `multiselect ${ee}`, inputBaseRef: (e) => {
-      l.current = e;
-    }, handlerSetOnDenied: de, rightElements: [...Y, /* @__PURE__ */ C.jsx(me, { showClearButton: X, disabled: B() || k(), dropDownOpened: O, handlerClear: () => B() ? null : z(), handlerOpenClose: ue, customClassForSideButtons: te }, "action-buttons-multiselect")], children: /* @__PURE__ */ C.jsx(he, { ...n, currents: s, handlerOnUnselect: ce }) }),
-    O && /* @__PURE__ */ C.jsx(fe, { ...n, selected: w, selectFieldRef: T, dropdownRef: h, gridWrapperStyle: n.gridLayout && E.current ? window.getComputedStyle(E.current) : void 0, handleOnSelect: q, handleOnFilter: U, handleOnKeydown: G, handleOnBlur: () => H, handleOnFocus: x, opened: O, dataCombo: r, currents: s, dropdownWidth: K || 0 }),
-    /* @__PURE__ */ C.jsx(pe, { visible: !!j && Z === "below", customClass: "hint", description: j })
-  ] });
-};
-export {
-  Be as default
+  }, [dataSource]);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    id: componentId,
+    ref: componentRef,
+    className: "select-component"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: ref => {
+      if (props.inputRef) {
+        if (!_lodash.default.isFunction(props.inputRef)) {
+          props.inputRef.current = ref;
+        } else {
+          props.inputRef(ref);
+        }
+      }
+      inputTextRef.current = ref;
+    },
+    autoComplete: "off",
+    value: inputValue.toString(),
+    readOnly: shouldBeReadOnly(),
+    onFocus: () => {
+      onFocus();
+    },
+    onBlur: e => {
+      onBlur(e);
+    },
+    onChange: e => {
+      if (e) onFilter(e.target.value);
+    },
+    onClick: onFocus,
+    onKeyDown: onInputKeyDown,
+    customClassForLabel: customClassForLabel,
+    customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable', " ").concat(customClassForWrapper),
+    customClassForInputContent: "multiselect ".concat(customClassForInputContent),
+    inputBaseRef: r => {
+      selectWrapper.current = r;
+    },
+    handlerSetOnDenied: setOnDenied,
+    rightElements: [...rightElements, /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      key: "action-buttons-multiselect",
+      showClearButton: showClearButton,
+      disabled: shouldDisable() || shouldBeReadOnly(),
+      dropDownOpened: opened,
+      handlerClear: () => {
+        if (shouldDisable()) return null;
+        return onClearClick();
+      },
+      handlerOpenClose: onOpenClose,
+      customClassForSideButtons: customClassForSideButtons
+    })]
+  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
+    currents: currents,
+    handlerOnUnselect: onUnselect
+  }))), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
+    selected: selected,
+    selectFieldRef: componentRef,
+    dropdownRef: dropdownRef,
+    gridWrapperStyle: props.gridLayout && gridElRef.current ? window.getComputedStyle(gridElRef.current) : undefined,
+    handleOnSelect: onSelect,
+    handleOnFilter: onFilter,
+    handleOnKeydown: onInputKeyDown,
+    handleOnBlur: () => onBlur,
+    handleOnFocus: onFocus,
+    opened: opened,
+    dataCombo: dataCombo,
+    currents: currents,
+    dropdownWidth: dropdownMaxWidth || dropdownWidth || 0
+  })), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }));
 };
+var _default = exports.default = MultipleSelect;

package/lib/inputs/select/simple/index.d.ts

@@ -1,3 +1,13 @@
-import { ISimpleSelectProps } from '../types';
-declare const SimpleSelect: (props: ISimpleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export default SimpleSelect;
+import { ISimpleSelectProps } from '../types.js';
+import '../../../@types/Align.js';
+import '../../../@types/DataCombo.js';
+import '../../../@types/PermissionAttr.js';
+import '../../base/types.js';
+import 'react';
+import '../../../@types/Period.js';
+import '../../../tooltip/types.js';
+import '../../../@types/Position.js';
+
+declare const SimpleSelect: (props: ISimpleSelectProps) => JSX.Element;
+
+export { SimpleSelect as default };