linear-react-components-ui 1.1.25-rc.2 → 1.1.26-beta-0

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

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

package/lib/inputs/select/select.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,3 @@
-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 '../../../internals/types.js';
-import '../../../@types/Position.js';
-
-declare const SimpleSelect: (props: ISimpleSelectProps) => JSX.Element;
-
-export { SimpleSelect as default };
+import { ISimpleSelectProps } from '../types';
+declare const SimpleSelect: (props: ISimpleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default SimpleSelect;