@widergy/energy-ui 3.37.2 → 3.38.0

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/styles.module.scss

@@ -0,0 +1,7 @@
+.scrollbar {
+  max-height: 260px;
+}
+
+.noOptionsLabel {
+  text-align: center;
+}

package/dist/components/UTSelect/versions/V1/index.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _lab = require("@material-ui/lab");
+var _clone = _interopRequireDefault(require("lodash/clone"));
+var _utils = require("../../../UTValidation/utils");
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTPaper = _interopRequireDefault(require("../../../UTPaper"));
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _utils2 = require("./utils");
+var _InputComponent = _interopRequireDefault(require("./components/InputComponent"));
+var _ListboxComponent = _interopRequireDefault(require("./components/ListboxComponent"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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; }
+const UTSelect = _ref => {
+  let {
+    action,
+    alwaysShowPlaceholder = true,
+    className,
+    clearable = true,
+    disabled,
+    disableFilterOptions = false,
+    error,
+    helpText,
+    multiple = false,
+    noMatchesText = 'No hay coincidencias con tu búsqueda',
+    onChange = () => {},
+    onChangeSearchTerm = () => {},
+    options,
+    placeholder = 'Seleccione un elemento',
+    prefix,
+    readOnly,
+    required,
+    suffix,
+    title,
+    value = multiple ? [] : null,
+    variant = 'select',
+    withAutoReset = true
+  } = _ref;
+  const optionsSortedByCategory = (0, _react.useMemo)(() => {
+    const clonedOptions = (0, _clone.default)(options);
+    const categoryOrder = new Map();
+    clonedOptions.forEach(option => {
+      if (!categoryOrder.has(option.category)) categoryOrder.set(option.category, categoryOrder.size);
+    });
+    return clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
+  }, [options]);
+  const [isPopperOpen, setIsPopperOpen] = (0, _react.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, _react.useState)((0, _utils2.getDisplayValue)(value, optionsSortedByCategory, multiple));
+  const [showClearButton, setShowClearButton] = (0, _react.useState)(!!searchTerm);
+  const [sortedOptions, setSortedOptions] = (0, _react.useState)(optionsSortedByCategory);
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (withAutoReset && (0, _utils2.shouldReset)(value, optionsSortedByCategory, multiple)) {
+      onChange(null);
+      setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, null, multiple));
+    }
+  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  (0, _react.useEffect)(() => {
+    if (isPopperOpen) setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
+  }, [isPopperOpen, optionsSortedByCategory, value, multiple]);
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
+  const filteredOptions = (0, _react.useMemo)(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
+  const handleSearchChange = (0, _react.useCallback)(searchValue => {
+    onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
+    setSearchTerm(searchValue);
+  }, [onChangeSearchTerm]);
+  const clearSearchInputValue = (0, _react.useCallback)(inputValue => {
+    setIsPopperOpen(false);
+    const displayValue = (0, _utils2.getDisplayValue)(inputValue, optionsSortedByCategory, multiple);
+    handleSearchChange(displayValue);
+    setShowClearButton(!!displayValue);
+  }, [_utils2.getDisplayValue, optionsSortedByCategory, multiple, handleSearchChange]);
+  const handleSelectionChange = newValues => {
+    const selectedValue = multiple ? newValues : newValues[0] || '';
+    onChange(selectedValue);
+    if (!multiple) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+      clearSearchInputValue(selectedValue);
+    }
+  };
+  const handleInputFocus = () => {
+    setShowClearButton(false);
+    handleSearchChange('');
+    setIsPopperOpen(true);
+    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
+  };
+  const handleInputBlur = () => {
+    clearSearchInputValue(value);
+    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
+  };
+  const handleClearSelection = () => {
+    const clearedValue = multiple ? [] : null;
+    onChange(clearedValue);
+    handleSearchChange('');
+    setShowClearButton(false);
+    setIsPopperOpen(false);
+    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, clearedValue, multiple));
+  };
+  const leftAdornments = (0, _react.useMemo)(() => (0, _utils2.getLeftAdornments)({
+    error,
+    multiple,
+    value,
+    prefix
+  }), [multiple, value, prefix]);
+  const rightAdornments = (0, _react.useMemo)(() => (0, _utils2.getRightAdornments)({
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  }), [suffix, showClearButton, clearable, disabled, action, handleClearSelection, variant]);
+  const InputComponentToRender = (0, _react.useMemo)(() => params => /*#__PURE__*/_react.default.createElement(_InputComponent.default, {
+    alwaysShowPlaceholder: alwaysShowPlaceholder,
+    disabled: disabled,
+    error: error,
+    inputRef: inputRef,
+    leftAdornments: leftAdornments,
+    onBlur: handleInputBlur,
+    onChange: handleSearchChange,
+    onFocus: handleInputFocus,
+    params: params,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornments: rightAdornments,
+    value: searchTerm,
+    variant: variant
+  }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
+  const listBoxProps = (0, _react.useMemo)(() => ({
+    filteredOptions,
+    handleSelectionChange,
+    multiple,
+    noMatchesText,
+    value
+  }), [filteredOptions, handleSelectionChange, multiple, noMatchesText, value]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(className)
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    required: required,
+    variant: "body"
+  }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, {
+    disabled: disabled || readOnly,
+    getOptionLabel: option => option.label,
+    ListboxComponent: _ListboxComponent.default,
+    ListboxProps: listBoxProps,
+    multiple: multiple,
+    onClose: () => setIsPopperOpen(false),
+    onOpen: () => setIsPopperOpen(true),
+    open: isPopperOpen,
+    options: optionsSortedByCategory,
+    PaperComponent: _UTPaper.default,
+    renderInput: InputComponentToRender
+  }), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    validationData: validationData
+  }));
+};
+UTSelect.propTypes = {
+  action: (0, _propTypes.shape)({
+    Icon: _propTypes.string,
+    onClick: _propTypes.func,
+    size: _propTypes.string
+  }),
+  alwaysShowPlaceholder: _propTypes.bool,
+  className: _propTypes.string,
+  clearable: _propTypes.bool,
+  disabled: _propTypes.bool,
+  disableFilterOptions: _propTypes.bool,
+  error: _propTypes.string,
+  helpText: _propTypes.string,
+  multiple: _propTypes.bool,
+  noMatchesText: _propTypes.string,
+  onChange: _propTypes.func,
+  onChangeSearchTerm: _propTypes.func,
+  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    label: _propTypes.string,
+    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+  })),
+  placeholder: _propTypes.string,
+  prefix: _propTypes.string,
+  readOnly: _propTypes.bool,
+  required: _propTypes.bool,
+  suffix: _propTypes.string,
+  title: _propTypes.string,
+  value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]))]),
+  variant: _propTypes.string,
+  withAutoReset: _propTypes.bool
+};
+var _default = exports.default = UTSelect;

package/dist/components/UTSelect/versions/V1/styles.module.scss

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}

package/dist/components/UTSelect/versions/V1/utils.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortOptions = exports.shouldReset = exports.getRightAdornments = exports.getLeftAdornments = exports.getDisplayValue = void 0;
+var _array = require("@widergy/web-utils/lib/array");
+var _clone = _interopRequireDefault(require("lodash/clone"));
+var _constants = require("../../../UTBaseInputField/constants");
+var _constants2 = require("../../../UTCheckList/versions/V1/constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hasOption = (options, value) => options.some(opt => {
+  var _opt$subOptions;
+  return opt.value === value || ((_opt$subOptions = opt.subOptions) === null || _opt$subOptions === void 0 ? void 0 : _opt$subOptions.some(sub => sub.value === value));
+});
+const shouldReset = (value, options, multiple) => {
+  if ((0, _array.isEmpty)(options) || (0, _array.isEmpty)(value)) return false;
+  return multiple ? value.some(val => !hasOption(options, val)) : !hasOption(options, value);
+};
+exports.shouldReset = shouldReset;
+const getDisplayValue = (inputValue, options, multiple) => {
+  if (!inputValue) return '';
+  const findLabel = optionValue => {
+    var _options$find;
+    return ((_options$find = options.find(o => o.value === optionValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) || '';
+  };
+  return multiple ? inputValue.map(findLabel).join(', ') : findLabel(inputValue);
+};
+exports.getDisplayValue = getDisplayValue;
+const getLeftAdornments = _ref => {
+  let {
+    error,
+    multiple,
+    prefix,
+    value
+  } = _ref;
+  const adornments = [];
+  if (error) adornments.push({
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      showOnlyOnError: true
+    }
+  });
+  if (multiple && !(0, _array.isEmpty)(value)) adornments.push({
+    name: _constants.COMPONENT_KEYS.BADGE,
+    props: {
+      text: value.length,
+      colorTheme: error ? 'error' : 'accent'
+    }
+  });
+  if (prefix) adornments.push({
+    name: _constants.COMPONENT_KEYS.PREFIX,
+    props: {
+      text: prefix
+    }
+  });
+  return adornments;
+};
+exports.getLeftAdornments = getLeftAdornments;
+const getRightAdornments = _ref2 => {
+  let {
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  } = _ref2;
+  const adornments = [];
+  if (suffix) adornments.push({
+    name: _constants.COMPONENT_KEYS.SUFFIX,
+    props: {
+      text: suffix
+    }
+  });
+  if (showClearButton && clearable && !disabled && !readOnly) adornments.push({
+    key: 'clearAction',
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action: {
+        Icon: 'IconX',
+        onClick: handleClearSelection,
+        size: 'small'
+      }
+    }
+  });
+  adornments.push({
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconChevronDown',
+      changeIconOnError: false,
+      changeOnError: true,
+      ...(variant === 'picker' && !disabled && {
+        colorTheme: 'dark'
+      })
+    }
+  });
+  if (action) adornments.push({
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  });
+  return adornments;
+};
+exports.getRightAdornments = getRightAdornments;
+const sortOptions = (options, value, multiple) => {
+  const copiedOptions = (0, _clone.default)(options);
+  return copiedOptions.map(option => ({
+    ...option,
+    category: multiple ? value !== null && value !== void 0 && value.includes(option.value) ? _constants2.NO_CATEGORY : option.category : option.value === value ? _constants2.NO_CATEGORY : option.category
+  })).sort((a, b) => a.category === _constants2.NO_CATEGORY ? -1 : b.category === _constants2.NO_CATEGORY ? 1 : 0);
+};
+exports.sortOptions = sortOptions;

package/dist/components/UTTouchableWithoutFeedback/index.js

@@ -21,6 +21,7 @@ const UTTouchableWithoutFeedback = _ref => {
     disabled = false,
     keyName,
     onClick,
+    onMouseDown,
     withRipple = false,
     ...props
   } = _ref;
@@ -30,16 +31,19 @@ const UTTouchableWithoutFeedback = _ref => {
     if (containerSetter) containerSetter(ref);
   };
   const handleClick = event => {
-    if (!disabled && onClick) {
-      onClick(event);
-    }
+    if (!disabled) onClick(event);
+  };
+  const handleMouseDown = event => {
+    event.preventDefault();
+    if (!disabled) onMouseDown(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
     "aria-disabled": disabled,
     className: "".concat(_stylesModule.default.container, " ").concat(className, " ").concat(disabled && _stylesModule.default.disabled),
     "data-testid": dataTestId,
     key: keyName,
-    onClick: handleClick,
+    onMouseDown: onMouseDown ? handleMouseDown : undefined,
+    onClick: onClick ? handleClick : undefined,
     ref: setRef,
     role: "button",
     tabIndex: disabled ? -1 : 0
@@ -55,6 +59,7 @@ UTTouchableWithoutFeedback.propTypes = {
   disabled: _propTypes.bool,
   keyName: _propTypes.string,
   onClick: _propTypes.func,
+  onMouseDown: _propTypes.func,
   withRipple: _propTypes.bool
 };
 var _default = exports.default = UTTouchableWithoutFeedback;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.37.2",
+  "version": "3.38.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",