linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/inputs/period/types.d.ts

@@ -0,0 +1,73 @@
+import { Moment } from 'moment';
+import { ReactNode } from 'react';
+import { ColorStyles } from '../../@types/ColorStyles.js';
+import { Period } from '../../@types/Period.js';
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+import { CustomInputEvent } from '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
+interface ChangeInputPeriodEvent {
+    target: {
+        value?: string;
+        name?: string;
+    };
+}
+interface IPeriodOptions {
+    id: DateTypes | 'custom';
+    label?: string;
+}
+interface IDialogProps {
+    children: ReactNode | ReactNode[];
+    onOpenChange: (open: boolean) => void;
+    dialogSize: {
+        width: string;
+        height: string;
+    };
+}
+interface IPeriodDropdownProps {
+    topPosition: number | string;
+    leftPosition: number | string;
+    width: number | string;
+    children: JSX.Element | JSX.Element[];
+    dropdownRef: (el: HTMLElement) => void;
+    targetElement?: HTMLDivElement | HTMLInputElement | null;
+}
+interface IPeriodPickerProps {
+    label?: string;
+    value?: {
+        initial?: Moment | string;
+        final?: Moment | string;
+    };
+    customClassForLabel?: string;
+    labelUppercase?: boolean;
+    showButtonOpen?: boolean;
+    shouldCloseOnSelect?: boolean;
+    openOnFocus?: boolean;
+    showCalendarInDialog?: boolean;
+    dialogSize?: {
+        width: string;
+        height: string;
+    };
+    calendarColorStyle?: ColorStyles;
+    required?: boolean;
+    onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
+    disabled?: boolean;
+    permissionAttr?: PermissionAttr;
+    errorMessages?: string[];
+    name?: string;
+    hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
+    onBlur?: (e: CustomInputEvent) => void;
+    onFocus?: (e: CustomInputEvent) => void;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+}
+interface IPeriodListProps {
+    handleOnSelect: (value: DateTypes | 'custom', date: Moment[] | null) => void;
+    selected?: string;
+}
+
+export { ChangeInputPeriodEvent, DateTypes, IDialogProps, IPeriodDropdownProps, IPeriodListProps, IPeriodOptions, IPeriodPickerProps };

package/lib/inputs/period/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/inputs/search/index.d.ts

@@ -0,0 +1,16 @@
+import { ISearchProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const SearchField: (props: ISearchProps) => JSX.Element | null;
+
+export { SearchField as default };

package/lib/inputs/search/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _icons = _interopRequireDefault(require("../../icons"));
+require("../../assets/styles/search.scss");
+var _drawer = _interopRequireWildcard(require("../../drawer"));
+const _excluded = ["headerTitle", "content", "onStateChange"];
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const SearchField = props => {
+  const {
+    resetButton = true,
+    advancedFilterProps = {},
+    value
+  } = props;
+  const [advancedFilterOpened, setAdvancedFilterOpened] = (0, _react.useState)(false);
+  const [valorCampo, setValorCampo] = (0, _react.useState)('');
+  const [onDenied, setOnDenied] = (0, _react.useState)();
+  const {
+      headerTitle,
+      content,
+      onStateChange
+    } = advancedFilterProps,
+    advancedFilterPropsRest = _objectWithoutProperties(advancedFilterProps, _excluded);
+  const onReset = event => {
+    if (props.onReset) props.onReset(event);
+    setValorCampo('');
+  };
+  const onChange = event => {
+    if (event) {
+      if (props.onChange) props.onChange(event);
+      setValorCampo(event.target.value);
+    }
+  };
+  const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
+  const hideContent = onDenied?.hideContent;
+  const buttonProps = () => {
+    const disableCallbacks = shouldBeReadOnly() || shouldDisable() || hideContent;
+    let propsButton = {
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "filter1",
+        color: "#a9a8a8",
+        key: "filter-icon"
+      }),
+      key: 'advanced-filter-button',
+      boxShadow: false,
+      readOnly: shouldBeReadOnly(),
+      style: {
+        padding: '0 0 0 5px',
+        width: 30
+      },
+      transparent: true,
+      disabled: shouldDisable()
+    };
+    if (!disableCallbacks) {
+      propsButton = _objectSpread(_objectSpread({}, propsButton), {}, {
+        onClick: e => {
+          if (props.onClick) props.onClick(e);
+          setAdvancedFilterOpened(!advancedFilterOpened);
+          if (onStateChange) onStateChange(!advancedFilterOpened);
+        }
+      }, propsButton);
+    }
+    return propsButton;
+  };
+  const rightElements = () => {
+    const enableFilterButton = Object.keys(advancedFilterProps).length > 0;
+    let elements = [/*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "search",
+      color: "#a9a8a8",
+      key: "search-icon",
+      disabled: shouldDisable()
+    })];
+    const resetButtonIcon = /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "cancel2",
+      color: "#a9a8a8",
+      key: "inputSearchIcon",
+      style: {
+        cursor: 'pointer',
+        pointerEvents: 'auto'
+      },
+      onClick: onReset
+    });
+    const filterButton = /*#__PURE__*/_react.default.createElement(_buttons.default, buttonProps());
+    if (enableFilterButton) elements = [...elements, filterButton];
+    if (resetButton && valorCampo.trim() !== '') elements = [resetButtonIcon, ...elements];
+    return elements;
+  };
+  (0, _react.useEffect)(() => {
+    if (value !== undefined && value !== valorCampo) {
+      setValorCampo(value);
+    }
+  }, [value]);
+  if (onDenied && onDenied.unvisible) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    onReset: onReset,
+    onChange: onChange,
+    value: valorCampo,
+    customClass: "",
+    handlerSetOnDenied: setOnDenied,
+    rightElements: rightElements()
+  })), advancedFilterOpened && /*#__PURE__*/_react.default.createElement(_drawer.default, _extends({
+    handlerClose: () => {
+      setAdvancedFilterOpened(false);
+      if (onStateChange) onStateChange(false);
+    }
+  }, advancedFilterPropsRest), headerTitle && /*#__PURE__*/_react.default.createElement(_drawer.DrawerHeader, {
+    title: headerTitle
+  }), /*#__PURE__*/_react.default.createElement(_drawer.DrawerContent, null, content)));
+};
+var _default = exports.default = SearchField;

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

@@ -0,0 +1,16 @@
+import { IActionButtonsSelectProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const ActionButtons: (props: IActionButtonsSelectProps) => JSX.Element;
+
+export { ActionButtons as default };

package/lib/inputs/select/ActionButtons.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("../../icons"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ActionButtons = props => {
+  const {
+    disabled = false,
+    showClearButton = true,
+    dropDownOpened,
+    handlerOpenClose,
+    handlerClear
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "actionbuttonsselect"
+  }, showClearButton && /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
+    tabIndex: -1,
+    className: "actionbutton buttonclear",
+    onClick: handlerClear
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "cancel",
+    pointerEvents: "none"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
+    tabIndex: -1,
+    className: "actionbutton buttonopenclose",
+    onClick: handlerOpenClose
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    pointerEvents: "none",
+    name: dropDownOpened ? 'mini_up' : 'mini_down'
+  })));
+};
+var _default = exports.default = ActionButtons;

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

@@ -0,0 +1,16 @@
+import { IDropdownSelectProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const Dropdown: (props: IDropdownSelectProps) => JSX.Element;
+
+export { Dropdown as default };

package/lib/inputs/select/Dropdown.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _avatar = _interopRequireDefault(require("../../avatar"));
+var helper = _interopRequireWildcard(require("./helper"));
+var _Popup = _interopRequireDefault(require("../../dropdown/Popup"));
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const Dropdown = props => {
+  const {
+    imageAlign = 'left',
+    striped = false,
+    dataCombo,
+    descriptionKey,
+    imgSrcKey,
+    dropdownRef,
+    currents = [],
+    dropdownWidth,
+    gridWrapperStyle,
+    handleOnSelect,
+    inputValue,
+    handleOnFocus,
+    opened,
+    handleOnFilter,
+    selected = null,
+    searchOnDropdown,
+    handleOnKeydown,
+    searchNotFoundText,
+    idKey
+  } = props;
+  const [dropdownDynamicStyles, setDropdownDynamicStyles] = (0, _react.useState)(helper.returnDropdownDynamicStyles(_objectSpread({}, props)));
+  (0, _react.useEffect)(() => {
+    if (dropdownRef.current) {
+      setDropdownDynamicStyles(helper.returnDropdownDynamicStyles(_objectSpread({}, props)));
+    }
+  }, [dropdownRef.current, dataCombo]);
+  return /*#__PURE__*/_react.default.createElement(_Popup.default, {
+    align: "left",
+    leftPosition: dropdownDynamicStyles.left,
+    topPosition: dropdownDynamicStyles.top
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-dropdown",
+    ref: dropdownRef,
+    style: {
+      width: dropdownWidth,
+      marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : '0',
+      maxHeight: dropdownDynamicStyles.maxHeight
+    }
+  }, searchOnDropdown && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filtercontainer"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: "filterinput",
+    type: "text",
+    value: inputValue,
+    onFocus: () => {
+      handleOnFocus();
+    },
+    onChange: e => {
+      handleOnFilter(e.target.value);
+    },
+    onKeyDown: e => {
+      handleOnKeydown(e);
+    },
+    autoFocus: opened
+  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "search",
+    viewBox: "0 0 32 32"
+  })), dataCombo.map(item => {
+    const disabled = currents && currents.length > 0 ? currents.some(s => s[idKey] === item[idKey]) : false;
+    const itemSelected = Boolean(selected && selected[idKey] === item[idKey]);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: `dropdowmIten ${item[idKey]}}`,
+      className: helper.getDropdownItemCssClass(itemSelected, disabled, striped)
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "menubutton",
+      tabIndex: -1,
+      onClick: event => {
+        if (!disabled) {
+          handleOnSelect(item);
+        }
+      }
+    }, item.iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: item.iconName,
+      customClass: "menuicon",
+      style: {
+        order: imageAlign === 'left' ? 0 : 1
+      }
+    }), imgSrcKey && item.imgSrcKey && /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      src: item.imgSrcKey,
+      customClass: "menuicon",
+      style: {
+        order: imageAlign === 'left' ? 0 : 1
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "label"
+    }, typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item))));
+  }), dataCombo && dataCombo.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "notfound"
+  }, searchNotFoundText)));
+};
+var _default = exports.default = Dropdown;

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

@@ -0,0 +1,25 @@
+import { IDropdownSelectProps } from '../types.js';
+import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const contentClass: (props: IDropdownSelectProps) => string;
+declare const getDropdownItemCssClass: (selected: boolean, disabled: boolean, striped: boolean) => string;
+declare const getFilteredSimpleDataCombo: ({ dataSource, descriptionKey, inputText, }: Omit<GetSimpleFilteredParams, 'currents'>) => any[];
+declare const getFilteredMultipleDataCombo: ({ dataSource, inputText, descriptionKey, currents, }: GetMultipleFilteredParams) => any[];
+declare const returnDropdownDynamicStyles: ({ selectFieldRef, dropdownMaxHeight, dropdownRef }: IDropdownSelectProps) => {
+    maxHeight: number;
+    top: number;
+    left: number;
+};
+
+export { contentClass, getDropdownItemCssClass, getFilteredMultipleDataCombo, getFilteredSimpleDataCombo, returnDropdownDynamicStyles };

package/lib/inputs/select/helper.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.returnDropdownDynamicStyles = exports.getFilteredSimpleDataCombo = exports.getFilteredMultipleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
+const contentClass = props => `content ${props.showClearButton ? '' : 'noclear'}`;
+exports.contentClass = contentClass;
+const getDropdownItemCssClass = (selected, disabled, striped) => {
+  let className = 'item';
+  className += selected && !disabled ? ' -selected ' : '';
+  className += disabled ? ' -disabled' : '';
+  className += !selected && !disabled && striped ? ' -striped ' : '';
+  return className;
+};
+exports.getDropdownItemCssClass = getDropdownItemCssClass;
+const getFilteredSimpleDataCombo = _ref => {
+  let {
+    dataSource,
+    descriptionKey,
+    inputText
+  } = _ref;
+  return dataSource && dataSource.filter(item => {
+    if (typeof descriptionKey === 'string') {
+      return item[descriptionKey]?.toLowerCase().indexOf(inputText?.toString().toLowerCase()) > -1;
+    }
+    return descriptionKey(item)?.toLowerCase().indexOf(inputText?.toString().toLowerCase()) > -1;
+  });
+};
+exports.getFilteredSimpleDataCombo = getFilteredSimpleDataCombo;
+const getFilteredMultipleDataCombo = _ref2 => {
+  let {
+    dataSource,
+    inputText,
+    descriptionKey,
+    currents
+  } = _ref2;
+  return dataSource.filter(item => {
+    if (typeof descriptionKey === 'string') {
+      return item[descriptionKey].toLowerCase().indexOf(inputText?.toString().toLowerCase()) > -1 && !currents.includes(item);
+    }
+    return descriptionKey(item)?.toLowerCase().indexOf(inputText?.toString().toLowerCase()) > -1 && !currents.includes(item);
+  });
+};
+exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
+const returnDropdownPosition = function (_ref3) {
+  let {
+    selectFieldRects,
+    dropdownRef,
+    dropdownRects
+  } = _ref3;
+  let aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const DEFAULT_MARGIN_BOTTOM = 10;
+  if (aboveDropdown && dropdownRef?.current && dropdownRects?.height) {
+    return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
+  }
+  return selectFieldRects.top + window.scrollY + selectFieldRects.height;
+};
+const returnDropdownDynamicStyles = _ref4 => {
+  let {
+    selectFieldRef,
+    dropdownMaxHeight,
+    dropdownRef
+  } = _ref4;
+  const selectFieldRects = selectFieldRef?.current ? selectFieldRef.current.getBoundingClientRect() : undefined;
+  const dropdownRects = dropdownRef?.current ? dropdownRef.current.getBoundingClientRect() : undefined;
+  const selectFieldRectsBottom = selectFieldRects ? selectFieldRects?.bottom : 0;
+  const selectFieldRectsTop = selectFieldRects ? selectFieldRects?.top : 0;
+  const dropdownBottomDistance = window.innerHeight - selectFieldRectsBottom;
+  const bottomOffset = 30;
+  let maxDropdownBottomDistance = 200;
+  let height = dropdownMaxHeight;
+  let dropdownPosition;
+  if (!height || height <= 0) {
+    if (dropdownBottomDistance < maxDropdownBottomDistance && selectFieldRects) {
+      height = selectFieldRectsTop;
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects,
+        dropdownRef,
+        dropdownRects
+      }, true);
+    } else {
+      height = dropdownBottomDistance;
+      dropdownPosition = selectFieldRects ? returnDropdownPosition({
+        selectFieldRects
+      }) : 0;
+    }
+  } else {
+    maxDropdownBottomDistance = height;
+    if (dropdownBottomDistance < maxDropdownBottomDistance && selectFieldRects) {
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects,
+        dropdownRef,
+        dropdownRects
+      }, true);
+    } else {
+      dropdownPosition = selectFieldRects ? returnDropdownPosition({
+        selectFieldRects
+      }) : 0;
+    }
+  }
+  return {
+    maxHeight: height - bottomOffset,
+    top: dropdownPosition,
+    left: selectFieldRects ? selectFieldRects.left : 0
+  };
+};
+exports.returnDropdownDynamicStyles = returnDropdownDynamicStyles;

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

@@ -0,0 +1,13 @@
+import { ISelectFieldProps } 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 SelectField: (props: ISelectFieldProps) => JSX.Element;
+
+export { SelectField as default };

package/lib/inputs/select/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _multiple = _interopRequireDefault(require("./multiple"));
+require("../../assets/styles/select.scss");
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _simple = _interopRequireDefault(require("./simple"));
+const _excluded = ["gridLayout", "multiple", "value"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const SelectField = props => {
+  const {
+      gridLayout,
+      multiple,
+      value
+    } = props,
+    newProps = _objectWithoutProperties(props, _excluded);
+  const component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({}, newProps, {
+    dataSource: props.dataSource ? props.dataSource : [],
+    idKey: props.idKey ? props.idKey : '',
+    value: Array.isArray(value) ? value : undefined,
+    descriptionKey: props.descriptionKey ? props.descriptionKey : ''
+  })) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({}, newProps, {
+    idKey: props.idKey ? props.idKey : '',
+    value: !Array.isArray(value) ? value : undefined,
+    descriptionKey: props.descriptionKey ? props.descriptionKey : ''
+  }));
+  if (gridLayout !== undefined) {
+    return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+      customClass: "-withinput",
+      cols: gridLayout
+    }, component);
+  }
+  return component;
+};
+var _default = exports.default = SelectField;

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -0,0 +1,13 @@
+import { ISelectedsMultipleProps } 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 Selecteds: ({ currents, descriptionKey, idKey, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
+
+export { Selecteds as default };

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Selecteds = _ref => {
+  let {
+    currents,
+    descriptionKey,
+    idKey,
+    handlerOnUnselect
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
+    className: "selecteditem",
+    key: `selected-${selected[idKey]}`
+  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
+    className: "close",
+    tabIndex: -1,
+    onClick: () => handlerOnUnselect(selected[idKey])
+  }))));
+};
+var _default = exports.default = Selecteds;

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

@@ -0,0 +1,13 @@
+import { IMultipleSelectProps } 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 MultipleSelect: (props: IMultipleSelectProps) => JSX.Element;
+
+export { MultipleSelect as default };