beta-parity-react/ui/Select/Custom.js

Beta Parity React Components

"use strict";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)}Object.defineProperty(exports,"__esModule",{value:true});exports.SelectMenu=exports.SelectItem=exports.SelectGroup=exports.SelectDivider=exports.CustomSelect=void 0;var _react=_interopRequireWildcard(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _lucideReact=require("lucide-react");require("./index.css");require("./variables.css");var _BaseInput=require("../BaseInput");var _Menu=require("../Menu");var _FloatingLabel=require("../FloatingLabel");var _useObserver=require("../hooks/useObserver");var _useOutsideClick=require("../hooks/useOutsideClick");var _useCombinedRefs=_interopRequireDefault(require("../hooks/useCombinedRefs"));var _useKeyboard=_interopRequireDefault(require("../hooks/useKeyboard"));var _Native=require("./Native");var _Tag=require("../Tag");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["options","children","className","style","disabled","multiselect","filterable","clearButton","keepOpen","deselectable","leftIcon","placeholder","countDescription","selectedIcon","floatingLabel","theme","selectSize","tagProps","onChange","onFocus","onBlur","onKeyDown","onMouseDown","onTouchStart","value"],_excluded2=["type"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}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 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(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}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 _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_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(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}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(arr){if(Array.isArray(arr))return arr}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}}return target}var sizeMap={sm:"small",md:"medium"};var CustomSelect=exports.CustomSelect=_react["default"].forwardRef(function(_ref,ref){var _ref2,_selectInputRef$curre2;var options=_ref.options,children=_ref.children,className=_ref.className,style=_ref.style,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$multiselect=_ref.multiselect,multiselect=_ref$multiselect===void 0?false:_ref$multiselect,_ref$filterable=_ref.filterable,filterable=_ref$filterable===void 0?false:_ref$filterable,_ref$clearButton=_ref.clearButton,clearButton=_ref$clearButton===void 0?false:_ref$clearButton,_ref$keepOpen=_ref.keepOpen,keepOpen=_ref$keepOpen===void 0?true:_ref$keepOpen,deselectable=_ref.deselectable,leftIcon=_ref.leftIcon,_ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Please choose an option":_ref$placeholder,_ref$countDescription=_ref.countDescription,countDescription=_ref$countDescription===void 0?"item(s) selected":_ref$countDescription,selectedIcon=_ref.selectedIcon,floatingLabel=_ref.floatingLabel,_ref$theme=_ref.theme,theme=_ref$theme===void 0?"default":_ref$theme,_ref$selectSize=_ref.selectSize,selectSize=_ref$selectSize===void 0?"md":_ref$selectSize,tagProps=_ref.tagProps,onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onKeyDown=_ref.onKeyDown,onMouseDown=_ref.onMouseDown,onTouchStart=_ref.onTouchStart,value=_ref.value,props=_objectWithoutProperties(_ref,_excluded);var _React$useState=_react["default"].useState(value||multiselect?[]:""),_React$useState2=_slicedToArray(_React$useState,2),currentValue=_React$useState2[0],setCurrentValue=_React$useState2[1];var _React$useState3=_react["default"].useState(false),_React$useState4=_slicedToArray(_React$useState3,2),isSelectOpen=_React$useState4[0],setIsSelectOpen=_React$useState4[1];var menuRef=_react["default"].useRef(null);var _useResizeObserver=(0,_useObserver.useResizeObserver)(),_useResizeObserver2=_slicedToArray(_useResizeObserver,2),wrapperRef=_useResizeObserver2[0],rect=_useResizeObserver2[1];var refOutsideClick=(0,_useOutsideClick.useOutsideClick)(function(){return setIsSelectOpen(false)},["click","touchstart"],[menuRef,wrapperRef]);var mergedRef=(0,_useCombinedRefs["default"])(ref,refOutsideClick,wrapperRef);var selectContainerRef=_react["default"].useRef(null);var selectInputRef=_react["default"].useRef(null);var renderedOptions=options&&options.length>0?options:getSelectItems(children);var isDeselectable=(_ref2=deselectable!==null&&deselectable!==void 0?deselectable:multiselect)!==null&&_ref2!==void 0?_ref2:false;var handleClick=function handleClick(value,isRemove){if(disabled)return;var changedValue;if(multiselect){isRemove||currentValue.includes(value)&&isDeselectable?changedValue=currentValue.filter(function(val){return val!==value}):changedValue=Array.from(new Set([].concat(_toConsumableArray(currentValue),[value])))}else{changedValue=isDeselectable&&currentValue===value?"":value}setCurrentValue(multiselect&&!value?[]:changedValue);onChange===null||onChange===void 0||onChange(multiselect&&!value?[]:changedValue);if(!keepOpen){var _selectInputRef$curre;setIsSelectOpen(false);(_selectInputRef$curre=selectInputRef.current)===null||_selectInputRef$curre===void 0||_selectInputRef$curre.focus()}};var handleClear=function handleClear(){setCurrentValue(multiselect?[]:"");onChange===null||onChange===void 0||onChange(multiselect?[]:"")};var handleFocus=function handleFocus(e){e.preventDefault();if(disabled)return;setIsSelectOpen(!isSelectOpen);onFocus===null||onFocus===void 0||onFocus(e)};var cloneWithProps=function cloneWithProps(child){if(!_react["default"].isValidElement(child)){return child}if(child.type===SelectItem){var isChecked=Array.isArray(currentValue)?currentValue.includes(child.props.value)&&!!child.props.value:child.props.value===currentValue&&!!child.props.value;return(0,_react.createElement)(_Menu.MenuItem,_objectSpread(_objectSpread({},child.props),{},{key:child.props.value,value:child.props.value,label:child.props.label,checked:isChecked,useInput:false,multiselect:multiselect,onChange:function onChange(e){return handleClick(e.target.value)},icon:selectedIcon}))}return _react["default"].cloneElement(child,{children:_react["default"].Children.map(child.props.children,cloneWithProps)})};var ArrowBtn=(0,_jsxRuntime.jsx)("button",{tabIndex:-1,className:(0,_classnames["default"])("arrow-select-btn",{open:isSelectOpen}),onClick:handleFocus,children:(0,_jsxRuntime.jsx)(_lucideReact.ChevronDown,{})});var isValueEmpty=Array.isArray(currentValue)?currentValue.length===0:!currentValue;var addedClassname=clearButton?"input-actions":"input-action";var RightInputActions=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[clearButton&&!isValueEmpty&&(0,_jsxRuntime.jsx)("button",{type:"button",className:(0,_classnames["default"])("clear-button"),onClick:handleClear,children:(0,_jsxRuntime.jsx)(_lucideReact.X,{})}),ArrowBtn]});var LeftInputActions=(0,_jsxRuntime.jsx)("span",{className:"select-left-icon input-icon",children:leftIcon});var _React$useState5=_react["default"].useState(multiselect&&Array.isArray(currentValue)&&currentValue.length>0),_React$useState6=_slicedToArray(_React$useState5,2),isShowingChips=_React$useState6[0],setIsShowingChips=_React$useState6[1];_react["default"].useLayoutEffect(function(){var _selectContainerRef$c;var selectInputWidth=selectInputRef.current?selectInputRef.current.clientWidth:0;var selectInputPaddingX=selectInputRef.current?parseInt(window.getComputedStyle(selectInputRef.current).paddingLeft.slice(0,-2))+parseInt(window.getComputedStyle(selectInputRef.current).paddingRight.slice(0,-2)):0;var containerWidth=((_selectContainerRef$c=selectContainerRef.current)===null||_selectContainerRef$c===void 0?void 0:_selectContainerRef$c.clientWidth)||0;setIsShowingChips(selectInputWidth-selectInputPaddingX>=containerWidth)},[currentValue,selectInputRef.current,selectContainerRef.current,(_selectInputRef$curre2=selectInputRef.current)===null||_selectInputRef$curre2===void 0?void 0:_selectInputRef$curre2.clientWidth,isSelectOpen]);_react["default"].useEffect(function(){if(value!==undefined){setCurrentValue(value)}else{setCurrentValue(multiselect?[]:"")}},[value,multiselect]);var accessibilityWrapperProps=_objectSpread({role:"combobox",tabIndex:disabled?-1:0,"aria-disabled":disabled,"data-focus-visible":isSelectOpen,"aria-haspopup":true},!isShowingChips&&!isValueEmpty&&{"data-number-of-chips":currentValue.length});var keyDownHandler=(0,_useKeyboard["default"])(["Enter"," "],function(e){if(disabled)return;e.target===selectInputRef.current&&setIsSelectOpen(function(pre){return!pre});onKeyDown===null||onKeyDown===void 0||onKeyDown(e)});var mouseDownHandler=function mouseDownHandler(e){if(disabled)return;e.preventDefault();handleFocus(e);onMouseDown===null||onMouseDown===void 0||onMouseDown(e)};var onTouchStartHandler=function onTouchStartHandler(e){if(disabled)return;e.preventDefault();handleFocus(e);onTouchStart===null||onTouchStart===void 0||onTouchStart(e)};var keyEventHandlers={onKeyDown:keyDownHandler,onMouseDown:mouseDownHandler,onTouchStart:onTouchStartHandler};var wrapperKeyDownHandler=(0,_useKeyboard["default"])("Escape",function(e){var _selectInputRef$curre3;e.preventDefault();(_selectInputRef$curre3=selectInputRef.current)===null||_selectInputRef$curre3===void 0||_selectInputRef$curre3.focus()});var wrapperKeyEventHandlers={onKeyDown:wrapperKeyDownHandler};_react["default"].useEffect(function(){var handleGlobalKeyDown=function handleGlobalKeyDown(e){if(e.key==="Escape"){setIsSelectOpen(false)}};window.addEventListener("keydown",handleGlobalKeyDown);return function(){return window.removeEventListener("keydown",handleGlobalKeyDown)}},[]);return(0,_jsxRuntime.jsxs)(_BaseInput.InputWrapper,_objectSpread(_objectSpread({className:addedClassname,leftElement:!!leftIcon?LeftInputActions:null,rightElement:RightInputActions,ref:mergedRef},wrapperKeyEventHandlers),{},{children:[floatingLabel&&(0,_jsxRuntime.jsx)(_FloatingLabel.ContainedLabel,{isActive:isSelectOpen||!isValueEmpty,children:floatingLabel}),(0,_jsxRuntime.jsxs)(_BaseInput.ValueInputWrapper,_objectSpread(_objectSpread(_objectSpread({ref:selectInputRef,className:(0,_classnames["default"])("select-input",_defineProperty({"non-value":isValueEmpty},sizeMap[selectSize],!floatingLabel)),theme:theme},accessibilityWrapperProps),keyEventHandlers),{},{children:[!isShowingChips&&!isValueEmpty&&(0,_jsxRuntime.jsx)("div",{className:"select-number-chips-label",children:currentValue.length+" "+countDescription}),(0,_jsxRuntime.jsx)("div",{className:"select-container",ref:selectContainerRef,children:multiselect&&Array.isArray(currentValue)&&currentValue.length?currentValue.map(function(item){return!!item&&(0,_jsxRuntime.jsx)(_Tag.Tag,_objectSpread({kind:"glass",color:"neutral",value:item,label:renderedOptions.filter(function(i){return i.value===item})[0].label,onRemove:function onRemove(){return handleClick(item,true)}},tagProps),item)}):null}),(0,_jsxRuntime.jsx)("span",{className:"select-label",children:isValueEmpty?placeholder:!multiselect&&renderedOptions.filter(function(item){return item.value===currentValue})[0].label})]})),(0,_jsxRuntime.jsxs)(SelectMenu,_objectSpread(_objectSpread({ref:menuRef,className:(0,_classnames["default"])("custom-select",className,{"non-value":isValueEmpty}),theme:theme,anchor:wrapperRef.current,isOpen:isSelectOpen,"data-select-value":currentValue},props),{},{size:selectSize,style:_objectSpread({width:rect===null||rect===void 0?void 0:rect.width},style),searchable:filterable,children:[!isDeselectable&&(0,_jsxRuntime.jsx)(_Menu.MenuItem,{value:"",label:placeholder,checked:Array.isArray(currentValue)?currentValue.includes(""):""===currentValue,useInput:false,multiselect:multiselect,onChange:function onChange(e){return handleClick(e.target.value)},icon:selectedIcon}),options&&options.length>0?renderedOptions.map(function(_ref3){var value=_ref3.value,label=_ref3.label;var isChecked=Array.isArray(currentValue)?currentValue.includes(value)&&!!value:value===currentValue&&!!value;return!!value&&(0,_jsxRuntime.jsx)(_Menu.MenuItem,{value:value,label:label,checked:isChecked,useInput:false,multiselect:multiselect,onChange:function onChange(e){return handleClick(e.target.value)},icon:selectedIcon},value)}):_react["default"].Children.map(children,cloneWithProps)]}))]}))});CustomSelect.displayName="CustomSelect";var SelectMenu=exports.SelectMenu=_react["default"].forwardRef(function(props,ref){return(0,_jsxRuntime.jsx)(_Menu.Menu,_objectSpread(_objectSpread({},props),{},{ref:ref}))});SelectMenu.displayName="SelectMenu";var SelectItem=exports.SelectItem=_react["default"].forwardRef(function(props,ref){var type=props.type,rest=_objectWithoutProperties(props,_excluded2);var Component=type==="input"?_Menu.MenuItem:_Native.NativeOption;return(0,_jsxRuntime.jsx)(Component,_objectSpread(_objectSpread({},rest),{},{ref:ref}))});SelectItem.displayName="SelectItem";var SelectGroup=exports.SelectGroup=_react["default"].forwardRef(function(props,ref){return(0,_jsxRuntime.jsx)(_Menu.MenuGroup,_objectSpread(_objectSpread({},props),{},{ref:ref}))});SelectGroup.displayName="SelectGroup";var SelectDivider=exports.SelectDivider=_react["default"].forwardRef(function(props,ref){return(0,_jsxRuntime.jsx)(_Menu.MenuDivider,_objectSpread(_objectSpread({},props),{},{ref:ref}))});SelectDivider.displayName="SelectDivider";var getSelectItems=function getSelectItems(children){var returnValue=[];_react["default"].Children.forEach(children,function(child,index){if(!_react["default"].isValidElement(child))return;if(child.type===SelectGroup){returnValue=returnValue.concat(getSelectItems(child.props.children))}if(child.type===SelectItem){returnValue=returnValue.concat({value:child.props.value,label:child.props.label})}});return returnValue};