You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							294 lines
						
					
					
						
							9.8 KiB
						
					
					
				
			
		
		
	
	
							294 lines
						
					
					
						
							9.8 KiB
						
					
					
				| import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 | |
| import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 | |
| import memoizeOne from 'memoize-one';
 | |
| import { F as defaultComponents } from '../../dist/index-a86253bb.esm.js';
 | |
| import * as React from 'react';
 | |
| import { useRef, useState, useEffect } from 'react';
 | |
| import _extends from '@babel/runtime/helpers/esm/extends';
 | |
| import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 | |
| import { Transition, TransitionGroup } from 'react-transition-group';
 | |
| import '@emotion/react';
 | |
| import '@babel/runtime/helpers/typeof';
 | |
| import '@babel/runtime/helpers/taggedTemplateLiteral';
 | |
| import '@babel/runtime/helpers/defineProperty';
 | |
| import 'react-dom';
 | |
| import '@floating-ui/dom';
 | |
| import 'use-isomorphic-layout-effect';
 | |
| 
 | |
| var _excluded$4 = ["in", "onExited", "appear", "enter", "exit"];
 | |
| // strip transition props off before spreading onto select component
 | |
| var AnimatedInput = function AnimatedInput(WrappedComponent) {
 | |
|   return function (_ref) {
 | |
|     _ref.in;
 | |
|       _ref.onExited;
 | |
|       _ref.appear;
 | |
|       _ref.enter;
 | |
|       _ref.exit;
 | |
|       var props = _objectWithoutProperties(_ref, _excluded$4);
 | |
|     return /*#__PURE__*/React.createElement(WrappedComponent, props);
 | |
|   };
 | |
| };
 | |
| 
 | |
| var _excluded$3 = ["component", "duration", "in", "onExited"];
 | |
| var Fade = function Fade(_ref) {
 | |
|   var Tag = _ref.component,
 | |
|     _ref$duration = _ref.duration,
 | |
|     duration = _ref$duration === void 0 ? 1 : _ref$duration,
 | |
|     inProp = _ref.in;
 | |
|     _ref.onExited;
 | |
|     var props = _objectWithoutProperties(_ref, _excluded$3);
 | |
|   var nodeRef = useRef(null);
 | |
|   var transition = {
 | |
|     entering: {
 | |
|       opacity: 0
 | |
|     },
 | |
|     entered: {
 | |
|       opacity: 1,
 | |
|       transition: "opacity ".concat(duration, "ms")
 | |
|     },
 | |
|     exiting: {
 | |
|       opacity: 0
 | |
|     },
 | |
|     exited: {
 | |
|       opacity: 0
 | |
|     }
 | |
|   };
 | |
|   return /*#__PURE__*/React.createElement(Transition, {
 | |
|     mountOnEnter: true,
 | |
|     unmountOnExit: true,
 | |
|     in: inProp,
 | |
|     timeout: duration,
 | |
|     nodeRef: nodeRef
 | |
|   }, function (state) {
 | |
|     var innerProps = {
 | |
|       style: _objectSpread({}, transition[state]),
 | |
|       ref: nodeRef
 | |
|     };
 | |
|     return /*#__PURE__*/React.createElement(Tag, _extends({
 | |
|       innerProps: innerProps
 | |
|     }, props));
 | |
|   });
 | |
| };
 | |
| 
 | |
| // ==============================
 | |
| // Collapse Transition
 | |
| // ==============================
 | |
| 
 | |
| var collapseDuration = 260;
 | |
| // wrap each MultiValue with a collapse transition; decreases width until
 | |
| // finally removing from DOM
 | |
| var Collapse = function Collapse(_ref2) {
 | |
|   var children = _ref2.children,
 | |
|     _in = _ref2.in,
 | |
|     _onExited = _ref2.onExited;
 | |
|   var ref = useRef(null);
 | |
|   var _useState = useState('auto'),
 | |
|     _useState2 = _slicedToArray(_useState, 2),
 | |
|     width = _useState2[0],
 | |
|     setWidth = _useState2[1];
 | |
|   useEffect(function () {
 | |
|     var el = ref.current;
 | |
|     if (!el) return;
 | |
| 
 | |
|     /*
 | |
|       Here we're invoking requestAnimationFrame with a callback invoking our
 | |
|       call to getBoundingClientRect and setState in order to resolve an edge case
 | |
|       around portalling. Certain portalling solutions briefly remove children from the DOM
 | |
|       before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
 | |
|       while the Select component is in this state.
 | |
|     */
 | |
|     // cannot use `offsetWidth` because it is rounded
 | |
|     var rafId = window.requestAnimationFrame(function () {
 | |
|       return setWidth(el.getBoundingClientRect().width);
 | |
|     });
 | |
|     return function () {
 | |
|       return window.cancelAnimationFrame(rafId);
 | |
|     };
 | |
|   }, []);
 | |
|   var getStyleFromStatus = function getStyleFromStatus(status) {
 | |
|     switch (status) {
 | |
|       default:
 | |
|         return {
 | |
|           width: width
 | |
|         };
 | |
|       case 'exiting':
 | |
|         return {
 | |
|           width: 0,
 | |
|           transition: "width ".concat(collapseDuration, "ms ease-out")
 | |
|         };
 | |
|       case 'exited':
 | |
|         return {
 | |
|           width: 0
 | |
|         };
 | |
|     }
 | |
|   };
 | |
|   return /*#__PURE__*/React.createElement(Transition, {
 | |
|     enter: false,
 | |
|     mountOnEnter: true,
 | |
|     unmountOnExit: true,
 | |
|     in: _in,
 | |
|     onExited: function onExited() {
 | |
|       var el = ref.current;
 | |
|       if (!el) return;
 | |
|       _onExited === null || _onExited === void 0 ? void 0 : _onExited(el);
 | |
|     },
 | |
|     timeout: collapseDuration,
 | |
|     nodeRef: ref
 | |
|   }, function (status) {
 | |
|     return /*#__PURE__*/React.createElement("div", {
 | |
|       ref: ref,
 | |
|       style: _objectSpread({
 | |
|         overflow: 'hidden',
 | |
|         whiteSpace: 'nowrap'
 | |
|       }, getStyleFromStatus(status))
 | |
|     }, children);
 | |
|   });
 | |
| };
 | |
| 
 | |
| var _excluded$2 = ["in", "onExited"];
 | |
| // strip transition props off before spreading onto actual component
 | |
| 
 | |
| var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {
 | |
|   return function (_ref) {
 | |
|     var inProp = _ref.in,
 | |
|       onExited = _ref.onExited,
 | |
|       props = _objectWithoutProperties(_ref, _excluded$2);
 | |
|     return /*#__PURE__*/React.createElement(Collapse, {
 | |
|       in: inProp,
 | |
|       onExited: onExited
 | |
|     }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({
 | |
|       cropWithEllipsis: inProp
 | |
|     }, props)));
 | |
|   };
 | |
| };
 | |
| 
 | |
| // fade in when last multi-value removed, otherwise instant
 | |
| var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {
 | |
|   return function (props) {
 | |
|     return /*#__PURE__*/React.createElement(Fade, _extends({
 | |
|       component: WrappedComponent,
 | |
|       duration: props.isMulti ? collapseDuration : 1
 | |
|     }, props));
 | |
|   };
 | |
| };
 | |
| 
 | |
| // instant fade; all transition-group children must be transitions
 | |
| 
 | |
| var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {
 | |
|   return function (props) {
 | |
|     return /*#__PURE__*/React.createElement(Fade, _extends({
 | |
|       component: WrappedComponent
 | |
|     }, props));
 | |
|   };
 | |
| };
 | |
| 
 | |
| var _excluded$1 = ["component"],
 | |
|   _excluded2 = ["children"];
 | |
| // make ValueContainer a transition group
 | |
| var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {
 | |
|   return function (props) {
 | |
|     return props.isMulti ? /*#__PURE__*/React.createElement(IsMultiValueContainer, _extends({
 | |
|       component: WrappedComponent
 | |
|     }, props)) : /*#__PURE__*/React.createElement(TransitionGroup, _extends({
 | |
|       component: WrappedComponent
 | |
|     }, props));
 | |
|   };
 | |
| };
 | |
| var IsMultiValueContainer = function IsMultiValueContainer(_ref) {
 | |
|   var component = _ref.component,
 | |
|     restProps = _objectWithoutProperties(_ref, _excluded$1);
 | |
|   var multiProps = useIsMultiValueContainer(restProps);
 | |
|   return /*#__PURE__*/React.createElement(TransitionGroup, _extends({
 | |
|     component: component
 | |
|   }, multiProps));
 | |
| };
 | |
| var useIsMultiValueContainer = function useIsMultiValueContainer(_ref2) {
 | |
|   var children = _ref2.children,
 | |
|     props = _objectWithoutProperties(_ref2, _excluded2);
 | |
|   var isMulti = props.isMulti,
 | |
|     hasValue = props.hasValue,
 | |
|     innerProps = props.innerProps,
 | |
|     _props$selectProps = props.selectProps,
 | |
|     components = _props$selectProps.components,
 | |
|     controlShouldRenderValue = _props$selectProps.controlShouldRenderValue;
 | |
|   var _useState = useState(isMulti && controlShouldRenderValue && hasValue),
 | |
|     _useState2 = _slicedToArray(_useState, 2),
 | |
|     cssDisplayFlex = _useState2[0],
 | |
|     setCssDisplayFlex = _useState2[1];
 | |
|   var _useState3 = useState(false),
 | |
|     _useState4 = _slicedToArray(_useState3, 2),
 | |
|     removingValue = _useState4[0],
 | |
|     setRemovingValue = _useState4[1];
 | |
|   useEffect(function () {
 | |
|     if (hasValue && !cssDisplayFlex) {
 | |
|       setCssDisplayFlex(true);
 | |
|     }
 | |
|   }, [hasValue, cssDisplayFlex]);
 | |
|   useEffect(function () {
 | |
|     if (removingValue && !hasValue && cssDisplayFlex) {
 | |
|       setCssDisplayFlex(false);
 | |
|     }
 | |
|     setRemovingValue(false);
 | |
|   }, [removingValue, hasValue, cssDisplayFlex]);
 | |
|   var onExited = function onExited() {
 | |
|     return setRemovingValue(true);
 | |
|   };
 | |
|   var childMapper = function childMapper(child) {
 | |
|     if (isMulti && /*#__PURE__*/React.isValidElement(child)) {
 | |
|       // Add onExited callback to MultiValues
 | |
|       if (child.type === components.MultiValue) {
 | |
|         return /*#__PURE__*/React.cloneElement(child, {
 | |
|           onExited: onExited
 | |
|         });
 | |
|       }
 | |
|       // While container flexed, Input cursor is shown after Placeholder text,
 | |
|       // so remove Placeholder until display is set back to grid
 | |
|       if (child.type === components.Placeholder && cssDisplayFlex) {
 | |
|         return null;
 | |
|       }
 | |
|     }
 | |
|     return child;
 | |
|   };
 | |
|   var newInnerProps = _objectSpread(_objectSpread({}, innerProps), {}, {
 | |
|     style: _objectSpread(_objectSpread({}, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style), {}, {
 | |
|       display: isMulti && hasValue || cssDisplayFlex ? 'flex' : 'grid'
 | |
|     })
 | |
|   });
 | |
|   var newProps = _objectSpread(_objectSpread({}, props), {}, {
 | |
|     innerProps: newInnerProps,
 | |
|     children: React.Children.toArray(children).map(childMapper)
 | |
|   });
 | |
|   return newProps;
 | |
| };
 | |
| 
 | |
| var _excluded = ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"];
 | |
| var makeAnimated = function makeAnimated() {
 | |
|   var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 | |
|   var components = defaultComponents({
 | |
|     components: externalComponents
 | |
|   });
 | |
|   var Input = components.Input,
 | |
|     MultiValue = components.MultiValue,
 | |
|     Placeholder = components.Placeholder,
 | |
|     SingleValue = components.SingleValue,
 | |
|     ValueContainer = components.ValueContainer,
 | |
|     rest = _objectWithoutProperties(components, _excluded);
 | |
|   return _objectSpread({
 | |
|     Input: AnimatedInput(Input),
 | |
|     MultiValue: AnimatedMultiValue(MultiValue),
 | |
|     Placeholder: AnimatedPlaceholder(Placeholder),
 | |
|     SingleValue: AnimatedSingleValue(SingleValue),
 | |
|     ValueContainer: AnimatedValueContainer(ValueContainer)
 | |
|   }, rest);
 | |
| };
 | |
| var AnimatedComponents = makeAnimated();
 | |
| var Input = AnimatedComponents.Input;
 | |
| var MultiValue = AnimatedComponents.MultiValue;
 | |
| var Placeholder = AnimatedComponents.Placeholder;
 | |
| var SingleValue = AnimatedComponents.SingleValue;
 | |
| var ValueContainer = AnimatedComponents.ValueContainer;
 | |
| var index = memoizeOne(makeAnimated);
 | |
| 
 | |
| export default index;
 | |
| export { Input, MultiValue, Placeholder, SingleValue, ValueContainer };
 |