@catho/quantum/Dropdown/Dropdown.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _downshift = _interopRequireDefault(require("downshift"));
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
var _shared = require("../shared");
var _theme = require("../shared/theme");
var _subComponents = require("../Input/sub-components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["label", "error", "helperText", "required", "disabled", "items", "placeholder", "selectedItem", "onChange", "autocomplete", "theme", "id", "name", "ignoreSpecialChars", "skin"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
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); }
var uniqId = (0, _shared.createUniqId)('dropdown-');
var ITEM_HEIGHT = '44px';
var MAX_ITEMS_VISIBILITY = 7;
var DROPITEM_FONT_SIZE = _theme.baseFontSize * 0.875;
var DROPITEM_IMAGE_SIZE = '24px';
var ICON_DEFAULT_SIZE = "".concat(_theme.baseFontSize * 1.5, "px");
var DropInput = (0, _styledComponents["default"])(_subComponents.TextInput).withConfig({
  displayName: "Dropdown__DropInput",
  componentId: "sc-xoew8d-0"
})(["align-items:center;cursor:pointer;display:flex;justify-content:space-between;text-align:left;", ";"], function (_ref) {
  var text = _ref.text,
    autocomplete = _ref.autocomplete,
    _ref$theme$spacing = _ref.theme.spacing,
    xsmall = _ref$theme$spacing.xsmall,
    medium = _ref$theme$spacing.medium,
    xxxlarge = _ref$theme$spacing.xxxlarge;
  return "\n    ".concat(autocomplete ? "padding: ".concat(xsmall, "px ").concat(xxxlarge, "px ").concat(xsmall, "px ").concat(medium, "px;") : '', "\n    ").concat(!text ? 'flex-direction: row-reverse;' : '', "\n    color: inherit;\n  ");
});
var ArrowIcon = (0, _styledComponents["default"])(_Icon["default"]).withConfig({
  displayName: "Dropdown__ArrowIcon",
  componentId: "sc-xoew8d-1"
})(["pointer-events:none;width:", ";", ""], ICON_DEFAULT_SIZE, function (_ref2) {
  var selectedItem = _ref2.selectedItem;
  return !selectedItem && "\n    color: inherit;\n  ";
});
var DropList = _styledComponents["default"].ul.withConfig({
  displayName: "Dropdown__DropList",
  componentId: "sc-xoew8d-2"
})(["border-radius:4px;box-sizing:border-box;list-style:none;max-height:calc(", " * ", ");overflow:auto;padding:0;position:absolute;width:100%;z-index:9999;", ""], ITEM_HEIGHT, MAX_ITEMS_VISIBILITY, function (_ref3) {
  var theme = _ref3.theme;
  var xxsmall = theme.spacing.xxsmall,
    neutral = theme.colors.neutral;
  return (0, _styledComponents.css)(["background-color:", ";color:", ";margin-top:", "px;", ";"], neutral[0], neutral[700], xxsmall, (0, _shared.shadow)(5, neutral[300])({
    theme: theme
  }));
});
var CheckIcon = (0, _styledComponents["default"])(_Icon["default"]).attrs({
  name: 'check'
}).withConfig({
  displayName: "Dropdown__CheckIcon",
  componentId: "sc-xoew8d-3"
})(["", ""], function (_ref4) {
  var selectedItem = _ref4.selectedItem,
    primary700 = _ref4.theme.colors.primary[700];
  return !selectedItem && "\n    color: ".concat(primary700, ";\n  ");
});
var DropItem = _styledComponents["default"].li.withConfig({
  displayName: "Dropdown__DropItem",
  componentId: "sc-xoew8d-4"
})(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:pointer;min-height:42px;", " &[aria-selected= 'true' ]{", "}", ""], function (_ref5) {
  var _ref5$theme = _ref5.theme,
    _ref5$theme$spacing = _ref5$theme.spacing,
    xsmall = _ref5$theme$spacing.xsmall,
    medium = _ref5$theme$spacing.medium,
    neutral0 = _ref5$theme.colors.neutral[0];
  return "\n    font-size: ".concat(DROPITEM_FONT_SIZE, "px;\n    background-color: ").concat(neutral0, ";\n    padding: ").concat(xsmall, "px ").concat(medium, "px;\n  ");
}, function (_ref6) {
  var neutral100 = _ref6.theme.colors.neutral[100];
  return "\n      background-color: ".concat(neutral100, ";\n    ");
}, function (_ref7) {
  var isSelected = _ref7.isSelected;
  return isSelected && "\n    display: flex;\n    justify-content: space-between;\n  ";
});
var DropContainer = _styledComponents["default"].div.withConfig({
  displayName: "Dropdown__DropContainer",
  componentId: "sc-xoew8d-5"
})(["position:relative;"]);
var SelectedItemLabel = _styledComponents["default"].span.withConfig({
  displayName: "Dropdown__SelectedItemLabel",
  componentId: "sc-xoew8d-6"
})(["", ""], function (_ref8) {
  var primary700 = _ref8.theme.colors.primary[700];
  return "\n    color: ".concat(primary700, "\n  ");
});
var DropItemImage = _styledComponents["default"].img.withConfig({
  displayName: "Dropdown__DropItemImage",
  componentId: "sc-xoew8d-7"
})(["width:", ";height:", ";margin-left:", "px;"], DROPITEM_IMAGE_SIZE, DROPITEM_IMAGE_SIZE, _theme.spacing.xsmall);
DropInput.displayName = 'DropInput';
DropItem.displayName = 'DropItem';
ArrowIcon.displayName = 'ArrowIcon';
SelectedItemLabel.displayName = 'SelectedItemLabel';
DropItemImage.displayName = 'DropItemImage';
DropContainer.displayName = 'DropContainer';
var _getValue = function _getValue(item) {
  return item ? item.value || item.label || item : '';
};
var _getLabel = function _getLabel(item) {
  return item ? item.label || item.value || item : '';
};
var _getImage = function _getImage(_ref9) {
  var img = _ref9.img;
  return img;
};
var _getImageAlt = function _getImageAlt(_ref10) {
  var alt = _ref10.alt;
  return alt;
};
var _isEqual = function _isEqual(selected, item) {
  return _getValue(selected) === _getValue(item);
};
var itemPropType = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  label: _propTypes["default"].string
})]);
var List = function List(_ref11) {
  var theme = _ref11.theme,
    items = _ref11.items,
    _ref11$selectedItem = _ref11.selectedItem,
    selectedItem = _ref11$selectedItem === void 0 ? null : _ref11$selectedItem,
    getItemProps = _ref11.getItemProps;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropList, {
    theme: theme,
    children: items.map(function (item) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropItem, _objectSpread(_objectSpread({
        theme: theme
      }, getItemProps({
        item: item,
        isSelected: _isEqual(selectedItem, item)
      })), {}, {
        children: _isEqual(selectedItem, item) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedItemLabel, {
            theme: theme,
            children: _getLabel(item)
          }), _getImage(item) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DropItemImage, {
            src: _getImage(item),
            alt: _getImageAlt(item)
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {
            theme: theme
          })]
        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: _getLabel(item)
          }), _getImage(item) && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropItemImage, {
            src: _getImage(item),
            alt: _getImageAlt(item)
          })]
        })
      }), _getValue(item));
    })
  });
};
List.propTypes = {
  selectedItem: itemPropType,
  theme: _propTypes["default"].shape({
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object
  }).isRequired,
  items: _propTypes["default"].arrayOf(itemPropType).isRequired,
  getItemProps: _propTypes["default"].func.isRequired
};
var Dropdown = function Dropdown(_ref12) {
  var _ref12$label = _ref12.label,
    label = _ref12$label === void 0 ? '' : _ref12$label,
    _ref12$error = _ref12.error,
    error = _ref12$error === void 0 ? '' : _ref12$error,
    _ref12$helperText = _ref12.helperText,
    helperText = _ref12$helperText === void 0 ? '' : _ref12$helperText,
    _ref12$required = _ref12.required,
    required = _ref12$required === void 0 ? false : _ref12$required,
    _ref12$disabled = _ref12.disabled,
    disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
    _ref12$items = _ref12.items,
    items = _ref12$items === void 0 ? [] : _ref12$items,
    _ref12$placeholder = _ref12.placeholder,
    placeholder = _ref12$placeholder === void 0 ? 'Select an option' : _ref12$placeholder,
    _ref12$selectedItem = _ref12.selectedItem,
    selectedItem = _ref12$selectedItem === void 0 ? null : _ref12$selectedItem,
    _ref12$onChange = _ref12.onChange,
    onChange = _ref12$onChange === void 0 ? function () {} : _ref12$onChange,
    _ref12$autocomplete = _ref12.autocomplete,
    autocomplete = _ref12$autocomplete === void 0 ? false : _ref12$autocomplete,
    _ref12$theme = _ref12.theme,
    theme = _ref12$theme === void 0 ? {
      colors: _theme.colors,
      spacing: _theme.spacing,
      baseFontSize: _theme.baseFontSize
    } : _ref12$theme,
    _ref12$id = _ref12.id,
    id = _ref12$id === void 0 ? '' : _ref12$id,
    _ref12$name = _ref12.name,
    name = _ref12$name === void 0 ? '' : _ref12$name,
    _ref12$ignoreSpecialC = _ref12.ignoreSpecialChars,
    ignoreSpecialChars = _ref12$ignoreSpecialC === void 0 ? false : _ref12$ignoreSpecialC,
    _ref12$skin = _ref12.skin,
    skin = _ref12$skin === void 0 ? 'default' : _ref12$skin,
    rest = _objectWithoutProperties(_ref12, _excluded);
  var _buttonLabel = selectedItem ? _getLabel(selectedItem) : placeholder;
  var _highlightedReducer = function _highlightedReducer(_ref13, changes) {
    var selected = _ref13.selectedItem;
    if (changes.isOpen !== undefined && changes.isOpen) {
      var selectedIndex = items.map(_getValue).indexOf(_getValue(selected));
      var withRange = selectedIndex + Math.floor(MAX_ITEMS_VISIBILITY / 2);
      var length = items.length;
      return _objectSpread(_objectSpread({}, changes), {}, {
        highlightedIndex: withRange < length ? withRange : length - 1
      });
    }
    return changes;
  };
  var hasLabel = !!label;
  var _useState = (0, _react.useState)(id || uniqId()),
    _useState2 = _slicedToArray(_useState, 1),
    _id = _useState2[0];
  var inputFilter = function inputFilter(value) {
    return items.filter(function (item) {
      var itemValue = _getLabel(item).toLowerCase();
      if (ignoreSpecialChars) {
        itemValue = (0, _shared.normalizeChars)(itemValue);
        return itemValue.indexOf((0, _shared.normalizeChars)(value.toLowerCase())) > -1;
      }
      return itemValue.indexOf(value.toLowerCase()) > -1;
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_shared.FieldGroup, {
    theme: theme,
    skin: skin,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_downshift["default"], _objectSpread(_objectSpread({}, rest), {}, {
      selectedItem: selectedItem,
      onChange: onChange,
      itemToString: _getLabel,
      stateReducer: _highlightedReducer,
      autocomplete: autocomplete,
      children: function children(_ref14) {
        var getRootProps = _ref14.getRootProps,
          getLabelProps = _ref14.getLabelProps,
          getInputProps = _ref14.getInputProps,
          getToggleButtonProps = _ref14.getToggleButtonProps,
          getItemProps = _ref14.getItemProps,
          inputValue = _ref14.inputValue,
          openMenu = _ref14.openMenu,
          isOpen = _ref14.isOpen;
        var filteredInput = isOpen ? inputFilter(inputValue) : [];
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropContainer, _objectSpread(_objectSpread({
          theme: theme
        }, getRootProps()), {}, {
          children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_subComponents.InputLabel, _objectSpread(_objectSpread({}, getLabelProps()), {}, {
            error: error,
            disabled: disabled,
            htmlFor: _id,
            children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_subComponents.RequiredMark, {
              skin: skin,
              children: "*"
            })]
          })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
            name: name,
            type: 'hidden'
          }))), autocomplete ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropContainer, {
              theme: theme,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropInput, _objectSpread(_objectSpread({}, getInputProps({
                isOpen: isOpen,
                placeholder: placeholder,
                onClick: openMenu
              })), {}, {
                style: {
                  cursor: 'inherit'
                },
                error: error,
                disabled: disabled,
                text: _buttonLabel,
                theme: theme,
                hasLabel: hasLabel,
                id: _id,
                autocomplete: autocomplete,
                skin: skin
              }, rest))
            }), filteredInput.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
              items: filteredInput,
              theme: theme,
              selectedItem: selectedItem,
              getItemProps: getItemProps
            })]
          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DropInput, _objectSpread(_objectSpread({}, getToggleButtonProps()), {}, {
              as: "button",
              isOpen: isOpen,
              disabled: disabled,
              error: error,
              helperText: helperText,
              text: _buttonLabel,
              theme: theme,
              hasLabel: hasLabel,
              skin: skin,
              id: _id,
              children: [_buttonLabel, /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowIcon, {
                name: isOpen ? 'arrow_drop_up' : 'arrow_drop_down',
                theme: theme
              })]
            })), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
              items: items,
              theme: theme,
              selectedItem: selectedItem,
              getItemProps: getItemProps
            })]
          })]
        }));
      }
    })), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_subComponents.HelperText, {
      children: helperText
    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_subComponents.InputErrorMessage, {
      skin: skin,
      children: error
    })]
  });
};
Dropdown.propTypes = {
  /** Displays the list with start typing */
  autocomplete: _propTypes["default"].bool,
  /** Disables component */
  disabled: _propTypes["default"].bool,
  /** Displays a mark to shows thats component is required */
  required: _propTypes["default"].bool,
  /** Displays an error message and changes border color to error color */
  error: _propTypes["default"].string,
  id: _propTypes["default"].string,
  name: _propTypes["default"].string,
  /** Displays a label text that describes the field */
  label: _propTypes["default"].string,
  placeholder: _propTypes["default"].string,
  /** Receives the item of the list to be selected */
  selectedItem: itemPropType,
  /** Displays a helper text below the dropdown */
  helperText: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  /** A list of string or objects with value and label keys */
  items: _propTypes["default"].arrayOf(itemPropType),
  theme: _propTypes["default"].shape({
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object,
    baseFontSize: _propTypes["default"].number
  }),
  ignoreSpecialChars: _propTypes["default"].bool,
  skin: _propTypes["default"].oneOf(['default', 'dark'])
};
var _default = exports["default"] = Dropdown;