beta-parity-react
Version:
Beta Parity React Components
1 lines • 20.5 kB
JavaScript
"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.MenuTrigger=exports.MenuItem=exports.MenuIndicator=exports.MenuHeader=exports.MenuGroup=exports.MenuFooter=exports.MenuDivider=exports.Menu=void 0;var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _lucideReact=require("lucide-react");var _react2=require("@floating-ui/react");require("./index.css");require("./variables.css");var _BaseInput=require("../BaseInput");var _useKeyboard=_interopRequireDefault(require("../hooks/useKeyboard"));var _useDidMountEffect=_interopRequireDefault(require("../hooks/useDidMountEffect"));var _Portal=require("../Portal");var _useCombinedRefs=_interopRequireDefault(require("../hooks/useCombinedRefs"));var _useArrowKeyNavigation=require("../hooks/useArrowKeyNavigation");var _Checkbox=require("../Checkbox");var _Radio=require("../Radio");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["usePortal","isOpen","searchable","scrollIndicator","menuColor","prominence","theme","size","position","defaultSearch","noResultsText","className","children","anchor","isLoading","disabled","searchPlaceholder","menuItemsLimit","style"],_excluded2=["refs","floatingStyles"],_excluded3=["className","children","isLoading","disabled","checkmarkSide","prominence","color","label","value","icon","checked","name","multiselect","deselectable","useInput","onClick","onChange","onKeyDown"],_excluded4=["className","children"],_excluded5=["className","children"],_excluded6=["className","children"],_excluded7=["className","position","isActive","onClick"],_excluded8=["className","isLoading","disabled"],_excluded9=["className","children","groupLabel"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}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 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 _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 colorMap={neutral:"neutral",accent:"accent"};var prominenceMap={subtle:"subtle",pronounced:"pronounced"};var themeMap={"default":"default",alternative:"alternative"};var sizeHeightMap={sm:40,md:48};var Menu=exports.Menu=_react["default"].forwardRef(function(_ref,ref){var _itemsRef$current$scr,_itemsRef$current,_itemsRef$current$cli,_itemsRef$current2;var _ref$usePortal=_ref.usePortal,usePortal=_ref$usePortal===void 0?true:_ref$usePortal,_ref$isOpen=_ref.isOpen,isOpen=_ref$isOpen===void 0?false:_ref$isOpen,_ref$searchable=_ref.searchable,searchable=_ref$searchable===void 0?false:_ref$searchable,_ref$scrollIndicator=_ref.scrollIndicator,scrollIndicator=_ref$scrollIndicator===void 0?false:_ref$scrollIndicator,_ref$menuColor=_ref.menuColor,menuColor=_ref$menuColor===void 0?"neutral":_ref$menuColor,_ref$prominence=_ref.prominence,prominence=_ref$prominence===void 0?"subtle":_ref$prominence,_ref$theme=_ref.theme,theme=_ref$theme===void 0?"default":_ref$theme,_ref$size=_ref.size,size=_ref$size===void 0?"sm":_ref$size,_ref$position=_ref.position,position=_ref$position===void 0?"bottom-start":_ref$position,_ref$defaultSearch=_ref.defaultSearch,defaultSearch=_ref$defaultSearch===void 0?"":_ref$defaultSearch,_ref$noResultsText=_ref.noResultsText,noResultsText=_ref$noResultsText===void 0?"No results found":_ref$noResultsText,className=_ref.className,children=_ref.children,anchor=_ref.anchor,isLoading=_ref.isLoading,disabled=_ref.disabled,searchPlaceholder=_ref.searchPlaceholder,menuItemsLimit=_ref.menuItemsLimit,style=_ref.style,props=_objectWithoutProperties(_ref,_excluded);var searchRef=_react["default"].useRef(null);var itemsRef=_react["default"].useRef(null);var _useFloating=(0,_react2.useFloating)({placement:position,middleware:[(0,_react2.offset)(8),(0,_react2.flip)(),(0,_react2.shift)({padding:8})],whileElementsMounted:_react2.autoUpdate}),refs=_useFloating.refs,floatingStyles=_useFloating.floatingStyles,rest=_objectWithoutProperties(_useFloating,_excluded2);var menuRef=(0,_useCombinedRefs["default"])(ref,refs.setFloating);var _React$useState=_react["default"].useState(defaultSearch),_React$useState2=_slicedToArray(_React$useState,2),keyword=_React$useState2[0],setKeyword=_React$useState2[1];var handleFocus=function handleFocus(e){var _searchRef$current;return(_searchRef$current=searchRef.current)===null||_searchRef$current===void 0?void 0:_searchRef$current.focus()};var filterChildren=function filterChildren(children){var keyword=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"";return _react["default"].Children.map(children,function(child){if(!_react["default"].isValidElement(child))return child;if(child.type===MenuHeader||child.type===MenuFooter)return null;var isValidItem=searchable?child.props.value&&child.props.value.toLowerCase().includes(keyword.toLowerCase()):true;if(isValidItem||!child.props.value&&!child.props.groupLabel){return _react["default"].cloneElement(child,_objectSpread(_objectSpread({},child.props),{},{color:menuColor,prominence:prominence}))}else if(child.props.children){var filteredChildren=filterChildren(child.props.children,keyword);if(filteredChildren&&_react["default"].Children.count(filteredChildren)>0){return _react["default"].cloneElement(child,_objectSpread(_objectSpread({},child.props),{},{color:menuColor,prominence:prominence}),filteredChildren)}}return null})};_react["default"].useEffect(function(){!isOpen&&setKeyword(defaultSearch?defaultSearch:"")},[isOpen,defaultSearch]);var cloneChildren=filterChildren(children,keyword);var Header=getComponent(children,MenuHeader);var Footer=getComponent(children,MenuFooter);var PortalEl=usePortal?_Portal.Portal:_react["default"].Fragment;var isScrollable=!!menuItemsLimit||((_itemsRef$current$scr=(_itemsRef$current=itemsRef.current)===null||_itemsRef$current===void 0?void 0:_itemsRef$current.scrollHeight)!==null&&_itemsRef$current$scr!==void 0?_itemsRef$current$scr:0)>((_itemsRef$current$cli=(_itemsRef$current2=itemsRef.current)===null||_itemsRef$current2===void 0?void 0:_itemsRef$current2.clientHeight)!==null&&_itemsRef$current$cli!==void 0?_itemsRef$current$cli:0);var isContainChildren=_react["default"].Children.count(searchable?cloneChildren:children)>0;var combinedStyle=_objectSpread(_objectSpread(_objectSpread({},style),floatingStyles),{},{opacity:rest.elements.floating&&isOpen?"1":"0"});var accessibilityProps={role:"menu","aria-hidden":!isOpen,"data-open":isOpen,"data-disabled":disabled};var _React$useState3=_react["default"].useState({top:false,bottom:false}),_React$useState4=_slicedToArray(_React$useState3,2),indicator=_React$useState4[0],setIndicator=_React$useState4[1];var handleIndicatorClick=function handleIndicatorClick(name){if(itemsRef.current&&name==="top"){itemsRef.current.scrollTo({top:0,behavior:"smooth"})}if(itemsRef.current&&name==="bottom"){itemsRef.current.scrollTo({top:itemsRef.current.scrollHeight,behavior:"smooth"})}};_react["default"].useEffect(function(){var currentRef=itemsRef.current;var handleIndicator=function handleIndicator(){if(currentRef){setIndicator({top:currentRef.scrollTop!==0,bottom:currentRef.scrollHeight-currentRef.clientHeight-currentRef.scrollTop>0})}};handleIndicator();currentRef&¤tRef.addEventListener("scroll",handleIndicator);return function(){currentRef&¤tRef.removeEventListener("scroll",handleIndicator)}},[keyword,itemsRef,isOpen]);_react["default"].useEffect(function(){if(anchor===undefined)return;if(anchor&&typeof anchor==="string"){refs.setReference(document.getElementById(anchor));return}refs.setReference(anchor)},[anchor]);var _useArrowKeyNavigatio=(0,_useArrowKeyNavigation.useArrowKeyNavigation)(menuRef),setItemsRef=_useArrowKeyNavigatio.setItemsRef,resetItemsRef=_useArrowKeyNavigatio.resetItemsRef,initFocus=_useArrowKeyNavigatio.initFocus;_react["default"].useEffect(function(){resetItemsRef();if(isOpen&&itemsRef.current){var items=searchable?[searchRef.current].concat(_toConsumableArray(itemsRef.current.querySelectorAll("[role=\"menuitem\"]"))):itemsRef.current.querySelectorAll("[role=\"menuitem\"]");if(items&&items.length>0){var _searchRef$current2;items.forEach(function(item){setItemsRef(item)});searchable?(_searchRef$current2=searchRef.current)===null||_searchRef$current2===void 0?void 0:_searchRef$current2.focus():initFocus()}}},[isOpen,setItemsRef,resetItemsRef,keyword,menuRef,itemsRef]);return(0,_jsxRuntime.jsx)(PortalEl,{children:(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu",className,themeMap[theme],sizeMap[size],prominenceMap[prominence],colorMap[menuColor]),ref:menuRef,style:combinedStyle},props),accessibilityProps),{},{children:[searchable?(0,_jsxRuntime.jsx)(MenuHeader,{children:(0,_jsxRuntime.jsx)(_BaseInput.Input,{theme:theme,value:keyword,onChange:function onChange(e){return setKeyword(e.target.value)},ref:searchRef,type:"text",wrapperProps:{leftElement:(0,_jsxRuntime.jsx)("span",{className:"search-menu-btn",onClick:handleFocus,children:(0,_jsxRuntime.jsx)(_lucideReact.Search,{})})},isClearable:true,placeholder:searchPlaceholder||"",className:"menu-item-search"})}):Header,(0,_jsxRuntime.jsxs)("div",{className:"menu-items",tabIndex:-1,ref:itemsRef,style:_objectSpread({overflow:isScrollable?"auto":"hidden"},menuItemsLimit?{maxHeight:(sizeHeightMap[size]+4)*menuItemsLimit}:{}),children:[isScrollable&&isContainChildren&&scrollIndicator?(0,_jsxRuntime.jsx)(MenuIndicator,{position:"top",isActive:indicator.top,onClick:function onClick(){return handleIndicatorClick("top")}}):null,searchable?countMenuItems(cloneChildren)>0?cloneChildren:(0,_jsxRuntime.jsx)("span",{className:"menu-no-items",children:noResultsText}):cloneChildren,isScrollable&&isContainChildren&&scrollIndicator?(0,_jsxRuntime.jsx)(MenuIndicator,{position:"bottom",isActive:indicator.bottom,onClick:function onClick(){return handleIndicatorClick("bottom")}}):null]}),Footer]}))})});Menu.displayName="Menu";var MenuItem=exports.MenuItem=_react["default"].forwardRef(function(_ref2,ref){var className=_ref2.className,children=_ref2.children,isLoading=_ref2.isLoading,disabled=_ref2.disabled,_ref2$checkmarkSide=_ref2.checkmarkSide,checkmarkSide=_ref2$checkmarkSide===void 0?"right":_ref2$checkmarkSide,_ref2$prominence=_ref2.prominence,prominence=_ref2$prominence===void 0?"subtle":_ref2$prominence,_ref2$color=_ref2.color,color=_ref2$color===void 0?"neutral":_ref2$color,label=_ref2.label,value=_ref2.value,icon=_ref2.icon,checked=_ref2.checked,name=_ref2.name,_ref2$multiselect=_ref2.multiselect,multiselect=_ref2$multiselect===void 0?false:_ref2$multiselect,_ref2$deselectable=_ref2.deselectable,deselectable=_ref2$deselectable===void 0?true:_ref2$deselectable,_ref2$useInput=_ref2.useInput,useInput=_ref2$useInput===void 0?false:_ref2$useInput,onClick=_ref2.onClick,onChange=_ref2.onChange,onKeyDown=_ref2.onKeyDown,props=_objectWithoutProperties(_ref2,_excluded3);var _React$useState5=_react["default"].useState(checked||false),_React$useState6=_slicedToArray(_React$useState5,2),currentSelected=_React$useState6[0],setCurrentSelected=_React$useState6[1];var handleClick=function handleClick(e){if(disabled||isLoading)return;onClick&&onClick(e);if(!!useInput)return;var newSelected=deselectable||multiselect?!currentSelected:true;checked==undefined&&setCurrentSelected(newSelected);onChange===null||onChange===void 0||onChange({target:{value:value||""},checked:newSelected})};var handleChangeInput=function handleChangeInput(e){setCurrentSelected(e.target.checked);onChange===null||onChange===void 0||onChange({target:{value:value||""},checked:e.target.checked})};var keyDownHandler=(0,_useKeyboard["default"])(["Enter"," "],function(e){e.preventDefault();e.stopPropagation();e.target.click();onKeyDown===null||onKeyDown===void 0||onKeyDown(e)});var keyEventHandlers={onKeyDown:keyDownHandler};var accessibilityProps=_objectSpread({role:"menuitem","aria-label":label,"aria-disabled":disabled,tabIndex:disabled?-1:0},!useInput&&{"aria-checked":currentSelected});var sideOfCheckIcon=checkmarkSide==="right"||icon?"right":"left";var Component=useInput?"label":"div";var CheckMarkInput=multiselect?(0,_jsxRuntime.jsx)(_Checkbox.Checkbox,{tabIndex:-1,onChange:handleChangeInput,color:color,disabled:disabled}):(0,_jsxRuntime.jsx)(_Radio.Radio,{tabIndex:-1,onChange:handleChangeInput,color:color,name:name,disabled:disabled});var visibleIcon=useInput?CheckMarkInput:currentSelected?(0,_jsxRuntime.jsx)(_lucideReact.Check,{}):null;(0,_useDidMountEffect["default"])(function(){if(checked!==undefined){setCurrentSelected(checked)}},[checked]);return(0,_jsxRuntime.jsxs)(Component,_objectSpread(_objectSpread(_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-item",className,prominenceMap[prominence],colorMap[color]),ref:ref,onClick:handleClick},props),accessibilityProps),keyEventHandlers),{},{children:[sideOfCheckIcon==="left"||icon?(0,_jsxRuntime.jsx)("span",{className:"menu-item-icon",children:icon||visibleIcon}):null,(0,_jsxRuntime.jsx)("span",{className:"menu-item-label",children:label!==null&&label!==void 0?label:children}),sideOfCheckIcon==="right"&&(0,_jsxRuntime.jsx)("span",{className:"menu-item-icon",children:visibleIcon})]}))});MenuItem.displayName="MenuItem";var MenuTrigger=exports.MenuTrigger=_react["default"].forwardRef(function(_ref3,ref){var className=_ref3.className,children=_ref3.children,props=_objectWithoutProperties(_ref3,_excluded4);return(0,_jsxRuntime.jsx)("button",_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-trigger",className),ref:ref},props),{},{children:children}))});MenuTrigger.displayName="MenuTrigger";var MenuHeader=exports.MenuHeader=_react["default"].forwardRef(function(_ref4,ref){var className=_ref4.className,children=_ref4.children,props=_objectWithoutProperties(_ref4,_excluded5);return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-header",className),ref:ref},props),{},{children:children}))});MenuHeader.displayName="MenuHeader";var MenuFooter=exports.MenuFooter=_react["default"].forwardRef(function(_ref5,ref){var className=_ref5.className,children=_ref5.children,props=_objectWithoutProperties(_ref5,_excluded6);return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-footer",className),ref:ref},props),{},{children:children}))});MenuFooter.displayName="MenuFooter";var MenuIndicator=exports.MenuIndicator=_react["default"].forwardRef(function(_ref6,ref){var className=_ref6.className,position=_ref6.position,isActive=_ref6.isActive,onClick=_ref6.onClick,props=_objectWithoutProperties(_ref6,_excluded7);if(!isActive)return null;return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-indicator",className,{"menu-indicator-top":position==="top","menu-indicator-bottom":position==="bottom"}),ref:ref},props),{},{children:(0,_jsxRuntime.jsx)("button",{onClick:onClick,children:position==="top"?(0,_jsxRuntime.jsx)(_lucideReact.ChevronUp,{}):(0,_jsxRuntime.jsx)(_lucideReact.ChevronDown,{})})}))});MenuIndicator.displayName="MenuIndicator";var MenuDivider=exports.MenuDivider=_react["default"].forwardRef(function(_ref7,ref){var className=_ref7.className,isLoading=_ref7.isLoading,disabled=_ref7.disabled,props=_objectWithoutProperties(_ref7,_excluded8);return(0,_jsxRuntime.jsx)("div",_objectSpread({className:(0,_classnames["default"])("menu-divider",className),ref:ref},props))});MenuDivider.displayName="MenuDivider";var MenuGroup=exports.MenuGroup=_react["default"].forwardRef(function(_ref8,ref){var className=_ref8.className,children=_ref8.children,groupLabel=_ref8.groupLabel,props=_objectWithoutProperties(_ref8,_excluded9);return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("menu-group-label",className),"data-value":groupLabel,ref:ref},props),{},{children:groupLabel})),children]})});MenuGroup.displayName="MenuGroup";var getComponent=function getComponent(children,component){return _react["default"].Children.toArray(children).find(function(child){return _react["default"].isValidElement(child)&&child.type===component})};var countMenuItems=function countMenuItems(children){return _react["default"].Children.toArray(children).reduce(function(count,child){if(_react["default"].isValidElement(child)){var isMenuItem=child.type===MenuItem&&child.props.value!==""?1:0;var nestedCount=countMenuItems(child.props.children);return count+isMenuItem+nestedCount}return count},0)};