@geezee/react-ui/esm/select/select.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo, useRef, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import useTheme from '../styles/use-theme';
import useClickAway from '../utils/use-click-away';
import { pickChildByProps } from '../utils/collections';
import SelectIcon from './select-icon';
import SelectMultipleValue from './select-multiple-value';
import Grid from '../grid';
import { SelectContext } from './select-context';
import { getSizes, getSelectColors } from './styles';
import Ellipsis from '../shared/ellipsis';
import useMergedState from '../utils/use-merged-state';
import Dropdown from '../shared/dropdown';
var defaultProps = {
  disabled: false,
  size: 'medium',
  icon: SelectIcon,
  pure: false,
  multiple: false,
  width: 'initial',
  className: '',
  variant: 'line',
  disableMatchWidth: false
};
var Select = forwardRef(function (_ref, ref) {
  var children = _ref.children,
      size = _ref.size,
      disabled = _ref.disabled,
      defaultValue = _ref.defaultValue,
      value = _ref.value,
      Icon = _ref.icon,
      onChange = _ref.onChange,
      pure = _ref.pure,
      multiple = _ref.multiple,
      placeholder = _ref.placeholder,
      width = _ref.width,
      variant = _ref.variant,
      className = _ref.className,
      dropdownClassName = _ref.dropdownClassName,
      dropdownStyle = _ref.dropdownStyle,
      disableMatchWidth = _ref.disableMatchWidth,
      props = _objectWithoutProperties(_ref, ["children", "size", "disabled", "defaultValue", "value", "icon", "onChange", "pure", "multiple", "placeholder", "width", "variant", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth"]);

  var theme = useTheme();
  var domRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useMergedState = useMergedState(defaultValue, {
    value: value,
    onChange: onChange,
    postState: function postState() {
      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      if (!multiple) return value;
      if (Array.isArray(value)) return value;
      return typeof value === 'undefined' || value === '' ? [] : [value];
    }
  }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      mergedValue = _useMergedState2[0],
      setMergedValue = _useMergedState2[1];

  var isEmpty = useMemo(function () {
    if (!Array.isArray(mergedValue)) {
      return !mergedValue;
    }

    return mergedValue.length === 0;
  }, [mergedValue]);
  var sizes = useMemo(function () {
    return getSizes(theme, size);
  }, [theme, size]);
  var colors = useMemo(function () {
    return getSelectColors(disabled, theme.palette, variant);
  }, [disabled, theme.palette, variant]);

  var updateValue = function updateValue(next) {
    var setNewValue = function setNewValue() {
      if (!Array.isArray(mergedValue)) return next;
      if (!mergedValue.includes(next)) return [].concat(_toConsumableArray(mergedValue), [next]);
      return mergedValue.filter(function (item) {
        return item !== next;
      });
    };

    var newValue = setNewValue();
    setMergedValue(newValue);

    if (!multiple) {
      setVisible(false);
    }
  };

  useImperativeHandle(ref, function () {
    return {
      setValue: function setValue() {
        var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
        setMergedValue(value);
      },
      getValue: function getValue() {
        return mergedValue;
      }
    };
  });
  var initialValue = useMemo(function () {
    return {
      value: mergedValue,
      variant: variant,
      updateValue: updateValue,
      size: size,
      disableAll: disabled
    };
  }, [size, disabled, variant, mergedValue, updateValue]);

  var clickHandler = function clickHandler(event) {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (disabled) return;
    setVisible(!visible);
  };

  var clickawayHandler = useCallback(function () {
    return setVisible(false);
  }, []);
  useClickAway(domRef, clickawayHandler);
  var selectedChild = useMemo(function () {
    var _pickChildByProps = pickChildByProps(children, 'value', mergedValue),
        _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
        optionChildren = _pickChildByProps2[1];

    return React.Children.map(optionChildren, function (child) {
      if (!React.isValidElement(child)) return null;
      var el = React.cloneElement(child, {
        preventAllEvents: true
      });
      if (!multiple) return el;
      return /*#__PURE__*/React.createElement(SelectMultipleValue, {
        size: sizes.fontSize,
        disabled: disabled
      }, el);
    });
  }, [mergedValue, children, multiple]);
  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({
    ref: domRef,
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]]) + " " + (props && props.className != null && props.className || "select ".concat(multiple ? 'multiple' : '', " ").concat(variant || 'line', " ").concat(className))
  }), isEmpty && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]]) + " " + "value placeholder"
  }, /*#__PURE__*/React.createElement(Ellipsis, {
    height: sizes.height
  }, placeholder)), mergedValue && !multiple && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]]) + " " + "value"
  }, selectedChild), mergedValue && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
    gap: 0.5
  }, selectedChild), /*#__PURE__*/React.createElement(Dropdown, {
    parent: domRef,
    visible: visible,
    disableMatchWidth: disableMatchWidth
  }, /*#__PURE__*/React.createElement("div", {
    style: dropdownStyle,
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]]) + " " + "select-dropdown ".concat(dropdownClassName)
  }, children)), !pure && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]]) + " " + "icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    className: _JSXStyle.dynamic([["2795178518", [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]]])
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2795178518",
    dynamic: [disabled ? 'not-allowed' : 'pointer', width, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.border, theme.expressiveness.R2, theme.layout.gapHalf, theme.layout.gap, sizes.height, colors.bgColor, theme.expressiveness.R2, theme.expressiveness.D2, theme.palette.cNeutral8, theme.layout.gapHalf, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, colors.hoverBorder, colors.hoverBgColor, colors.hoverColor, colors.placeholderColor, sizes.fontSize, sizes.fontSize, colors.color, sizes.fontSize, theme.expressiveness.L1, theme.expressiveness.cLineStyle1, colors.placeholderColor, theme.layout.gapHalf, sizes.fontSize, visible ? '180' : '0', colors.color]
  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:80vw;width:").concat(width, ";overflow:hidden;-webkit-transition:border 0.2s ease 0s,color 0.2s ease-out 0s,box-shadow 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease-out 0s,box-shadow 0.2s ease 0s;border:").concat(theme.expressiveness.L1, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(colors.border, ";border-radius:").concat(theme.expressiveness.R2, ";padding:0 calc(").concat(theme.layout.gapHalf, " * 1.5) 0 ").concat(theme.layout.gap, ";height:").concat(sizes.height, ";background-color:").concat(colors.bgColor, ";}.select-dropdown.__jsx-style-dynamic-selector{border-radius:").concat(theme.expressiveness.R2, ";box-shadow:").concat(theme.expressiveness.D2, ";background-color:").concat(theme.palette.cNeutral8, ";max-height:15rem;overflow-y:auto;overflow-anchor:none;padding:").concat(theme.layout.gapHalf, " 0;}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:").concat(sizes.height, ";padding:").concat(theme.layout.gapQuarter, " calc(").concat(sizes.fontSize, " * 2) ").concat(theme.layout.gapQuarter, " ").concat(theme.layout.gapHalf, ";}.select.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .value.__jsx-style-dynamic-selector{color:").concat(colors.hoverColor, ";}.select.__jsx-style-dynamic-selector:hover .placeholder.__jsx-style-dynamic-selector{color:").concat(colors.placeholderColor, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;font-weight:500;padding:0;margin-right:calc(").concat(sizes.fontSize, " * 1.5);font-size:").concat(sizes.fontSize, ";color:").concat(colors.color, ";width:calc(100% - ").concat(sizes.fontSize, " * 1.5);}.value.__jsx-style-dynamic-selector svg,.multiple.__jsx-style-dynamic-selector svg{display:none;}.value.__jsx-style-dynamic-selector .option,.multiple.__jsx-style-dynamic-selector .option{border:").concat(theme.expressiveness.L1, " ").concat(theme.expressiveness.cLineStyle1, " transparent;}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(colors.placeholderColor, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:calc(").concat(theme.layout.gapHalf, " * 1.5);font-size:").concat(sizes.fontSize, ";top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(colors.color, ";}"))));
});
Select.defaultProps = defaultProps;
export default Select;