@khanacademy/wonder-blocks-dropdown 10.1.3 → 10.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/es/index.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-dropdown
|
|
2
2
|
|
|
3
|
+
## 10.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9bacc1a: Replaces all existing `semanticColor.border` references to use `semanticColor.core.border`
|
|
8
|
+
- 7abcccf: Replace call sites to use `core.background` instead of `action`.
|
|
9
|
+
- Updated dependencies [fa3e433]
|
|
10
|
+
- Updated dependencies [b1ee2b4]
|
|
11
|
+
- Updated dependencies [7abcccf]
|
|
12
|
+
- Updated dependencies [63ad56e]
|
|
13
|
+
- Updated dependencies [9bacc1a]
|
|
14
|
+
- Updated dependencies [9bacc1a]
|
|
15
|
+
- Updated dependencies [7abcccf]
|
|
16
|
+
- Updated dependencies [1c3c335]
|
|
17
|
+
- Updated dependencies [689f5d3]
|
|
18
|
+
- Updated dependencies [7d2a646]
|
|
19
|
+
- @khanacademy/wonder-blocks-icon-button@10.2.0
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@10.4.0
|
|
21
|
+
- @khanacademy/wonder-blocks-clickable@7.1.5
|
|
22
|
+
- @khanacademy/wonder-blocks-modal@7.1.19
|
|
23
|
+
- @khanacademy/wonder-blocks-pill@3.1.17
|
|
24
|
+
- @khanacademy/wonder-blocks-typography@4.1.0
|
|
25
|
+
- @khanacademy/wonder-blocks-search-field@5.1.19
|
|
26
|
+
- @khanacademy/wonder-blocks-cell@4.1.17
|
|
27
|
+
- @khanacademy/wonder-blocks-layout@3.1.16
|
|
28
|
+
|
|
3
29
|
## 10.1.3
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -33,9 +33,9 @@ const Check=function(props){const{selected}=props;return jsx(PhosphorIcon,{icon:
|
|
|
33
33
|
|
|
34
34
|
const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:spacing.small_12,height:spacing.small_12,margin:spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:semanticColor.input.default.border},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background}}}};const styles$9=StyleSheet.create({checkbox:{alignSelf:"center",minHeight:spacing.medium_16,minWidth:spacing.medium_16,height:spacing.medium_16,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:theme$6.checkbox.color.default.border},noBorder:{borderWidth:0},disabledCheckbox:{borderColor:theme$6.checkbox.color.disabled.border,backgroundColor:theme$6.checkbox.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
|
|
35
35
|
|
|
36
|
-
const StyledLi=addStyle("li");class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row"},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),jsx(Strut,{size:spacing.xSmall_8}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsx(LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsx(LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsx(LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2};const actionType=semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:semanticColor.surface.primary,foreground:semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:
|
|
36
|
+
const StyledLi=addStyle("li");class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row"},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),jsx(Strut,{size:spacing.xSmall_8}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsx(LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsx(LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsx(LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2};const actionType=semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:semanticColor.surface.primary,foreground:semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:semanticColor.core.background.disabled.subtle,foreground:semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.hover.foreground},press:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.press.foreground},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}},subtitle:{color:{default:{foreground:semanticColor.text.secondary},hover:{foreground:semanticColor.text.inverse},press:{foreground:semanticColor.text.inverse}}}};const styles$8=StyleSheet.create({reset:{margin:0,padding:0,border:0,background:"none",outline:"none",fontSize:"100%",verticalAlign:"baseline",textAlign:"left",textDecoration:"none",listStyle:"none",cursor:"pointer"},listboxItem:{backgroundColor:"transparent",color:"inherit"},item:{background:theme$5.optionItem.color.default.background,color:theme$5.optionItem.color.default.foreground,minHeight:"unset",":focus":focusedStyle,":focus-visible":{overflow:"visible"},[":hover[aria-disabled=false]"]:{color:theme$5.optionItem.color.hover.foreground,background:theme$5.optionItem.color.hover.background},[":active[aria-selected=false]"]:{},[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},[":is([aria-disabled=true])"]:{color:theme$5.optionItem.color.disabled.foreground,":focus-visible":{outline:"none"}},[":active[aria-disabled=false]"]:{color:theme$5.optionItem.color.press.foreground,background:theme$5.optionItem.color.press.background},[":hover[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.hover.background},[":active[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.press.background},[":hover[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.hover.foreground},[":active[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.press.foreground},[":is([aria-selected=true]) .checkbox"]:{background:theme$5.checkbox.color.selected.background},[":is([aria-selected=true]) .check"]:{color:theme$5.checkbox.color.selected.foreground},[":is([aria-disabled=false]) .subtitle"]:{color:theme$5.subtitle.color.default.foreground},[":hover[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.hover.foreground},[":active[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.press.foreground}},itemFocused:focusedStyle,itemDisabled:{outlineColor:semanticColor.focus.outer},itemContainer:{minHeight:"unset",paddingBlock:spacing.xSmall_8+spacing.xxxxSmall_2,paddingInlineStart:spacing.xSmall_8,paddingInlineEnd:spacing.medium_16,whiteSpace:"nowrap"},label:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
37
37
|
|
|
38
|
-
class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:semanticColor.border.
|
|
38
|
+
class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:semanticColor.core.border.neutral.subtle}}};const styles$7=StyleSheet.create({separator:{borderTop:`1px solid ${theme$4.separator.color.border}`,height:1,minHeight:1,marginTop:spacing.xxxSmall_4,marginBottom:spacing.xxxSmall_4}});
|
|
39
39
|
|
|
40
40
|
class DropdownOpener extends React.Component{renderAnchorChildren(eventState,clickableChildrenProps){const{disabled,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,id,role,onBlur}=this.props;const renderedChildren=this.props.children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=this.getTestIdFromProps(childrenProps);const renderedAriaLabel=childrenProps["aria-label"]??this.props["aria-label"];return React.cloneElement(renderedChildren,{...clickableChildrenProps,"aria-label":renderedAriaLabel??undefined,"aria-invalid":this.props.error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur})}render(){return jsx(ClickableBehavior,{onClick:this.props.onClick,disabled:this.props.disabled,tabIndex:0,children:(eventState,handlers)=>this.renderAnchorChildren(eventState,handlers)})}constructor(...args){super(...args),this.getTestIdFromProps=childrenProps=>{return childrenProps.testId||childrenProps["data-testid"]};}}DropdownOpener.defaultProps={disabled:false};
|
|
41
41
|
|
|
@@ -51,7 +51,7 @@ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxi
|
|
|
51
51
|
|
|
52
52
|
function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
|
|
53
53
|
|
|
54
|
-
const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){node.focus();this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsx(LabelMedium,{style:styles$6.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$6.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$6.dropdown,isReferenceHidden&&styles$6.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,style:[styles$6.listboxOrMenu,{minWidth:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxs(View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$6.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();this.focusPreviousItem();return;case keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const theme$3={dropdown:{color:{default:{background:semanticColor.surface.primary,border:semanticColor.border.primary}}},noResults:{color:{foreground:semanticColor.text.secondary}}};const styles$6=StyleSheet.create({menuWrapper:{width:"fit-content"},dropdown:{backgroundColor:theme$3.dropdown.color.default.background,borderRadius:border.radius.radius_040,paddingTop:spacing.xxxSmall_4,paddingBottom:spacing.xxxSmall_4,border:`solid 1px ${theme$3.dropdown.color.default.border}`,boxShadow:`0px 8px 8px 0px ${color.offBlack8}`,maxHeight:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:theme$3.noResults.color.foreground,alignSelf:"center",marginTop:spacing.xxSmall_6},searchInputStyle:{margin:spacing.xSmall_8,marginTop:spacing.xxxSmall_4,minHeight:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = withActionScheduler(DropdownCore);
|
|
54
|
+
const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){node.focus();this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsx(LabelMedium,{style:styles$6.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$6.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$6.dropdown,isReferenceHidden&&styles$6.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,style:[styles$6.listboxOrMenu,{minWidth:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxs(View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$6.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();this.focusPreviousItem();return;case keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const theme$3={dropdown:{color:{default:{background:semanticColor.surface.primary,border:semanticColor.core.border.neutral.subtle}}},noResults:{color:{foreground:semanticColor.text.secondary}}};const styles$6=StyleSheet.create({menuWrapper:{width:"fit-content"},dropdown:{backgroundColor:theme$3.dropdown.color.default.background,borderRadius:border.radius.radius_040,paddingTop:spacing.xxxSmall_4,paddingBottom:spacing.xxxSmall_4,border:`solid 1px ${theme$3.dropdown.color.default.border}`,boxShadow:`0px 8px 8px 0px ${color.offBlack8}`,maxHeight:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:theme$3.noResults.color.foreground,alignSelf:"center",marginTop:spacing.xxSmall_6},searchInputStyle:{margin:spacing.xSmall_8,marginTop:spacing.xxxSmall_4,minHeight:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = withActionScheduler(DropdownCore);
|
|
55
55
|
|
|
56
56
|
const StyledButton$1=addStyle("button");class ActionMenuOpenerCore extends React.Component{render(){const{children,disabled:disabledProp,focused,hovered,pressed,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=this.props;const disabled=disabledProp;const defaultStyle=[sharedStyles.shared,sharedStyles.default,disabled&&sharedStyles.disabled,!disabled&&pressed&&sharedStyles.press];const label=jsx(LabelLarge,{style:sharedStyles.text,children:children});return jsxs(StyledButton$1,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu","aria-label":ariaLabel,disabled:disabled,style:defaultStyle,type:"button",...restProps,"data-testid":testId,children:[jsx(View,{style:!disabled&&(hovered||focused)&&sharedStyles.focus,children:label}),jsx(Strut,{size:spacing.xxxSmall_4}),jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:caretDownIcon,"aria-hidden":"true"})]})}}const theme$2={actionMenuOpener:{color:{default:{background:"none",foreground:semanticColor.action.secondary.progressive.default.foreground},disabled:{foreground:semanticColor.action.secondary.disabled.foreground},press:{foreground:semanticColor.action.secondary.progressive.press.foreground}}}};const sharedStyles=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",height:DROPDOWN_ITEM_HEIGHT,border:"none",borderRadius:border.radius.radius_040,cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}},default:{background:theme$2.actionMenuOpener.color.default.background,color:theme$2.actionMenuOpener.color.default.foreground},disabled:{color:theme$2.actionMenuOpener.color.disabled.foreground,cursor:"not-allowed"},small:{height:spacing.xLarge_32},text:{textAlign:"left",display:"inline-block",alignItems:"center",fontWeight:"bold",userSelect:"none",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",pointerEvents:"none"},focus:{":after":{content:"''",position:"absolute",height:2,left:0,right:0,bottom:-1,background:"currentColor"}},press:{color:theme$2.actionMenuOpener.color.press.foreground}});
|
|
57
57
|
|
|
@@ -77,6 +77,6 @@ const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMulti
|
|
|
77
77
|
|
|
78
78
|
function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsx(View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsx(StandaloneListbox,{...props})}return jsx(View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:semanticColor.action.secondary.disabled.foreground}}}};const styles$1=StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
|
|
79
79
|
|
|
80
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.icon.disabled:startIcon.props.color??semanticColor.icon.primary});return jsx(View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(Fragment,{children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},focus:{border:semanticColor.focus.outer,background:semanticColor.surface.primary},disabled:semanticColor.input.disabled,error:semanticColor.input.error}},listbox:{color:{default:{background:semanticColor.surface.primary,border:semanticColor.border.
|
|
80
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.icon.disabled:startIcon.props.color??semanticColor.icon.primary});return jsx(View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(Fragment,{children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},focus:{border:semanticColor.focus.outer,background:semanticColor.surface.primary},disabled:semanticColor.input.disabled,error:semanticColor.input.error}},listbox:{color:{default:{background:semanticColor.surface.primary,border:semanticColor.core.border.neutral.subtle}}}};const styles=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:border.radius.radius_040,border:`solid ${border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:spacing.xxxSmall_4,top:spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:spacing.xLarge_32+spacing.xSmall_8},iconWrapper:{padding:spacing.xxxSmall_4,minWidth:"auto"}});
|
|
81
81
|
|
|
82
82
|
export { ActionItem, ActionMenu, Combobox, Listbox, MultiSelect, OptionItem, SeparatorItem, SingleSelect };
|
package/dist/index.js
CHANGED
|
@@ -66,9 +66,9 @@ const Check=function(props){const{selected}=props;return jsxRuntime.jsx(wonderBl
|
|
|
66
66
|
|
|
67
67
|
const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.spacing.small_12,height:wonderBlocksTokens.spacing.small_12,margin:wonderBlocksTokens.spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background}}}};const styles$9=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minHeight:wonderBlocksTokens.spacing.medium_16,minWidth:wonderBlocksTokens.spacing.medium_16,height:wonderBlocksTokens.spacing.medium_16,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:theme$6.checkbox.color.default.border},noBorder:{borderWidth:0},disabledCheckbox:{borderColor:theme$6.checkbox.color.disabled.border,backgroundColor:theme$6.checkbox.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
|
|
68
68
|
|
|
69
|
-
const StyledLi=wonderBlocksCore.addStyle("li");class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsxRuntime.jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2};const actionType=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:
|
|
69
|
+
const StyledLi=wonderBlocksCore.addStyle("li");class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsxRuntime.jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2};const actionType=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:wonderBlocksTokens.semanticColor.core.background.disabled.subtle,foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground},press:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}},subtitle:{color:{default:{foreground:wonderBlocksTokens.semanticColor.text.secondary},hover:{foreground:wonderBlocksTokens.semanticColor.text.inverse},press:{foreground:wonderBlocksTokens.semanticColor.text.inverse}}}};const styles$8=aphrodite.StyleSheet.create({reset:{margin:0,padding:0,border:0,background:"none",outline:"none",fontSize:"100%",verticalAlign:"baseline",textAlign:"left",textDecoration:"none",listStyle:"none",cursor:"pointer"},listboxItem:{backgroundColor:"transparent",color:"inherit"},item:{background:theme$5.optionItem.color.default.background,color:theme$5.optionItem.color.default.foreground,minHeight:"unset",":focus":focusedStyle,":focus-visible":{overflow:"visible"},[":hover[aria-disabled=false]"]:{color:theme$5.optionItem.color.hover.foreground,background:theme$5.optionItem.color.hover.background},[":active[aria-selected=false]"]:{},[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},[":is([aria-disabled=true])"]:{color:theme$5.optionItem.color.disabled.foreground,":focus-visible":{outline:"none"}},[":active[aria-disabled=false]"]:{color:theme$5.optionItem.color.press.foreground,background:theme$5.optionItem.color.press.background},[":hover[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.hover.background},[":active[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.press.background},[":hover[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.hover.foreground},[":active[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.press.foreground},[":is([aria-selected=true]) .checkbox"]:{background:theme$5.checkbox.color.selected.background},[":is([aria-selected=true]) .check"]:{color:theme$5.checkbox.color.selected.foreground},[":is([aria-disabled=false]) .subtitle"]:{color:theme$5.subtitle.color.default.foreground},[":hover[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.hover.foreground},[":active[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.press.foreground}},itemFocused:focusedStyle,itemDisabled:{outlineColor:wonderBlocksTokens.semanticColor.focus.outer},itemContainer:{minHeight:"unset",paddingBlock:wonderBlocksTokens.spacing.xSmall_8+wonderBlocksTokens.spacing.xxxxSmall_2,paddingInlineStart:wonderBlocksTokens.spacing.xSmall_8,paddingInlineEnd:wonderBlocksTokens.spacing.medium_16,whiteSpace:"nowrap"},label:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
70
70
|
|
|
71
|
-
class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:wonderBlocksTokens.semanticColor.border.
|
|
71
|
+
class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}}};const styles$7=aphrodite.StyleSheet.create({separator:{borderTop:`1px solid ${theme$4.separator.color.border}`,height:1,minHeight:1,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,marginBottom:wonderBlocksTokens.spacing.xxxSmall_4}});
|
|
72
72
|
|
|
73
73
|
class DropdownOpener extends React__namespace.Component{renderAnchorChildren(eventState,clickableChildrenProps){const{disabled,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,id,role,onBlur}=this.props;const renderedChildren=this.props.children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=this.getTestIdFromProps(childrenProps);const renderedAriaLabel=childrenProps["aria-label"]??this.props["aria-label"];return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,"aria-label":renderedAriaLabel??undefined,"aria-invalid":this.props.error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur})}render(){return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:this.props.onClick,disabled:this.props.disabled,tabIndex:0,children:(eventState,handlers)=>this.renderAnchorChildren(eventState,handlers)})}constructor(...args){super(...args),this.getTestIdFromProps=childrenProps=>{return childrenProps.testId||childrenProps["data-testid"]};}}DropdownOpener.defaultProps={disabled:false};
|
|
74
74
|
|
|
@@ -84,7 +84,7 @@ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxi
|
|
|
84
84
|
|
|
85
85
|
function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
|
|
86
86
|
|
|
87
|
-
const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React__namespace.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){node.focus();this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$6.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$6.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$6.dropdown,isReferenceHidden&&styles$6.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[styles$6.listboxOrMenu,{minWidth:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$6.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React__namespace.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM__namespace.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();this.focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React__namespace.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const theme$3={dropdown:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}},noResults:{color:{foreground:wonderBlocksTokens.semanticColor.text.secondary}}};const styles$6=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content"},dropdown:{backgroundColor:theme$3.dropdown.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,paddingTop:wonderBlocksTokens.spacing.xxxSmall_4,paddingBottom:wonderBlocksTokens.spacing.xxxSmall_4,border:`solid 1px ${theme$3.dropdown.color.default.border}`,boxShadow:`0px 8px 8px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:theme$3.noResults.color.foreground,alignSelf:"center",marginTop:wonderBlocksTokens.spacing.xxSmall_6},searchInputStyle:{margin:wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,minHeight:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = wonderBlocksTiming.withActionScheduler(DropdownCore);
|
|
87
|
+
const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React__namespace.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){node.focus();this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$6.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$6.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$6.dropdown,isReferenceHidden&&styles$6.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[styles$6.listboxOrMenu,{minWidth:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$6.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React__namespace.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM__namespace.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();this.focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React__namespace.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const theme$3={dropdown:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}}},noResults:{color:{foreground:wonderBlocksTokens.semanticColor.text.secondary}}};const styles$6=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content"},dropdown:{backgroundColor:theme$3.dropdown.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,paddingTop:wonderBlocksTokens.spacing.xxxSmall_4,paddingBottom:wonderBlocksTokens.spacing.xxxSmall_4,border:`solid 1px ${theme$3.dropdown.color.default.border}`,boxShadow:`0px 8px 8px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:theme$3.noResults.color.foreground,alignSelf:"center",marginTop:wonderBlocksTokens.spacing.xxSmall_6},searchInputStyle:{margin:wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,minHeight:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = wonderBlocksTiming.withActionScheduler(DropdownCore);
|
|
88
88
|
|
|
89
89
|
const StyledButton$1=wonderBlocksCore.addStyle("button");class ActionMenuOpenerCore extends React__namespace.Component{render(){const{children,disabled:disabledProp,focused,hovered,pressed,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=this.props;const disabled=disabledProp;const defaultStyle=[sharedStyles.shared,sharedStyles.default,disabled&&sharedStyles.disabled,!disabled&&pressed&&sharedStyles.press];const label=jsxRuntime.jsx(wonderBlocksTypography.LabelLarge,{style:sharedStyles.text,children:children});return jsxRuntime.jsxs(StyledButton$1,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu","aria-label":ariaLabel,disabled:disabled,style:defaultStyle,type:"button",...restProps,"data-testid":testId,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:!disabled&&(hovered||focused)&&sharedStyles.focus,children:label}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:caretDownIcon__default["default"],"aria-hidden":"true"})]})}}const theme$2={actionMenuOpener:{color:{default:{background:"none",foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},press:{foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}}}};const sharedStyles=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",height:DROPDOWN_ITEM_HEIGHT,border:"none",borderRadius:wonderBlocksTokens.border.radius.radius_040,cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}},default:{background:theme$2.actionMenuOpener.color.default.background,color:theme$2.actionMenuOpener.color.default.foreground},disabled:{color:theme$2.actionMenuOpener.color.disabled.foreground,cursor:"not-allowed"},small:{height:wonderBlocksTokens.spacing.xLarge_32},text:{textAlign:"left",display:"inline-block",alignItems:"center",fontWeight:"bold",userSelect:"none",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",pointerEvents:"none"},focus:{":after":{content:"''",position:"absolute",height:2,left:0,right:0,bottom:-1,background:"currentColor"}},press:{color:theme$2.actionMenuOpener.color.press.foreground}});
|
|
90
90
|
|
|
@@ -110,7 +110,7 @@ const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,f
|
|
|
110
110
|
|
|
111
111
|
function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React__namespace.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsxRuntime.jsx(StandaloneListbox,{...props})}return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}}};const styles$1=aphrodite.StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
|
|
112
112
|
|
|
113
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:startIcon.props.color??wonderBlocksTokens.semanticColor.icon.primary});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,background:wonderBlocksTokens.semanticColor.surface.primary},disabled:wonderBlocksTokens.semanticColor.input.disabled,error:wonderBlocksTokens.semanticColor.input.error}},listbox:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}}};const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:wonderBlocksTokens.spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:wonderBlocksTokens.spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:wonderBlocksTokens.spacing.xLarge_32+wonderBlocksTokens.spacing.xSmall_8},iconWrapper:{padding:wonderBlocksTokens.spacing.xxxSmall_4,minWidth:"auto"}});
|
|
113
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:startIcon.props.color??wonderBlocksTokens.semanticColor.icon.primary});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,background:wonderBlocksTokens.semanticColor.surface.primary},disabled:wonderBlocksTokens.semanticColor.input.disabled,error:wonderBlocksTokens.semanticColor.input.error}},listbox:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}}}};const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:wonderBlocksTokens.spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:wonderBlocksTokens.spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:wonderBlocksTokens.spacing.xLarge_32+wonderBlocksTokens.spacing.xSmall_8},iconWrapper:{padding:wonderBlocksTokens.spacing.xxxSmall_4,minWidth:"auto"}});
|
|
114
114
|
|
|
115
115
|
exports.ActionItem = ActionItem;
|
|
116
116
|
exports.ActionMenu = ActionMenu;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-dropdown",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.4",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Dropdown variants for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,18 +13,18 @@
|
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@khanacademy/wonder-blocks-announcer": "1.0.2",
|
|
16
|
-
"@khanacademy/wonder-blocks-cell": "4.1.
|
|
17
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
16
|
+
"@khanacademy/wonder-blocks-cell": "4.1.17",
|
|
17
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.5",
|
|
18
18
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
19
19
|
"@khanacademy/wonder-blocks-icon": "5.1.4",
|
|
20
|
-
"@khanacademy/wonder-blocks-icon-button": "10.
|
|
21
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
22
|
-
"@khanacademy/wonder-blocks-modal": "7.1.
|
|
23
|
-
"@khanacademy/wonder-blocks-pill": "3.1.
|
|
24
|
-
"@khanacademy/wonder-blocks-search-field": "5.1.
|
|
20
|
+
"@khanacademy/wonder-blocks-icon-button": "10.2.0",
|
|
21
|
+
"@khanacademy/wonder-blocks-layout": "3.1.16",
|
|
22
|
+
"@khanacademy/wonder-blocks-modal": "7.1.19",
|
|
23
|
+
"@khanacademy/wonder-blocks-pill": "3.1.17",
|
|
24
|
+
"@khanacademy/wonder-blocks-search-field": "5.1.19",
|
|
25
25
|
"@khanacademy/wonder-blocks-timing": "7.0.2",
|
|
26
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
27
|
-
"@khanacademy/wonder-blocks-typography": "4.
|
|
26
|
+
"@khanacademy/wonder-blocks-tokens": "10.4.0",
|
|
27
|
+
"@khanacademy/wonder-blocks-typography": "4.1.0"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@phosphor-icons/core": "^2.0.2",
|