@khanacademy/wonder-blocks-dropdown 10.13.3 → 10.13.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/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +20 -0
- package/dist/es/index.js +12 -15
- package/dist/index.js +14 -16
- package/package.json +14 -13
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-dropdown@10.13.
|
|
2
|
+
> @khanacademy/wonder-blocks-dropdown@10.13.4 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-dropdown
|
|
2
2
|
|
|
3
|
+
## 10.13.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- cbdc909: Declare `@khanacademy/wonder-blocks-button` as a dependency. Dropdown imports `Button`, and without the dependency its build bundled its own copy of `Button`.
|
|
8
|
+
- Updated dependencies [cbdc909]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@18.1.0
|
|
10
|
+
- @khanacademy/wonder-blocks-button@11.7.13
|
|
11
|
+
- @khanacademy/wonder-blocks-cell@6.2.15
|
|
12
|
+
- @khanacademy/wonder-blocks-clickable@8.3.2
|
|
13
|
+
- @khanacademy/wonder-blocks-form@7.7.2
|
|
14
|
+
- @khanacademy/wonder-blocks-icon@6.0.3
|
|
15
|
+
- @khanacademy/wonder-blocks-icon-button@12.0.2
|
|
16
|
+
- @khanacademy/wonder-blocks-modal@8.9.2
|
|
17
|
+
- @khanacademy/wonder-blocks-pill@3.1.79
|
|
18
|
+
- @khanacademy/wonder-blocks-search-field@5.2.2
|
|
19
|
+
- @khanacademy/wonder-blocks-styles@0.4.1
|
|
20
|
+
- @khanacademy/wonder-blocks-typography@5.0.6
|
|
21
|
+
- @khanacademy/wonder-blocks-announcer@1.1.2
|
|
22
|
+
|
|
3
23
|
## 10.13.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
|
9
9
|
import { View, useLatestRef, useOnMountEffect, keys, addStyle, Id } from '@khanacademy/wonder-blocks-core';
|
|
10
10
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
11
11
|
import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
|
|
12
|
-
import { ClickableBehavior
|
|
12
|
+
import { ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
|
|
13
13
|
import * as ReactDOM from 'react-dom';
|
|
14
14
|
import SearchField from '@khanacademy/wonder-blocks-search-field';
|
|
15
15
|
import { withActionScheduler, useActionScheduler } from '@khanacademy/wonder-blocks-timing';
|
|
@@ -18,8 +18,7 @@ import { Popper } from 'react-popper';
|
|
|
18
18
|
import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
|
|
19
19
|
import { detectOverflow } from '@popperjs/core';
|
|
20
20
|
import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
|
|
21
|
-
import
|
|
22
|
-
import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
|
|
21
|
+
import Button from '@khanacademy/wonder-blocks-button';
|
|
23
22
|
import { announceMessage } from '@khanacademy/wonder-blocks-announcer';
|
|
24
23
|
import caretDownIcon$1 from '@phosphor-icons/core/regular/caret-down.svg';
|
|
25
24
|
import xIcon from '@phosphor-icons/core/regular/x.svg';
|
|
@@ -30,17 +29,17 @@ const selectDropdownStyle={marginBlock:sizing.size_080};const filterableDropdown
|
|
|
30
29
|
|
|
31
30
|
var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{padding:{inline:sizing.size_0,block:sizing.size_040}},shadow:{default:boxShadow.mid}},opener:{border:{width:{error:border.width.thin},radius:{rest:border.radius.radius_040}},layout:{padding:{inline:sizing.size_160,inlineStart:sizing.size_160,inlineEnd:sizing.size_120}}},item:{border:{radius:{default:border.radius.radius_040,press:border.radius.radius_040}},layout:{padding:{block:sizing.size_100,inlineStart:sizing.size_080,inlineEnd:sizing.size_160}},font:{weight:font.weight.regular}}};
|
|
32
31
|
|
|
33
|
-
var theme
|
|
32
|
+
var theme = mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
|
|
34
33
|
|
|
35
|
-
class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$
|
|
34
|
+
class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsx(BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=StyleSheet.create({wrapper:{minBlockSize:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minBlockSize:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme.item.layout.padding.block},label:{fontWeight:theme.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:sizing.size_320}});
|
|
36
35
|
|
|
37
|
-
const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?semanticColor.core.foreground.disabled.strong:semanticColor.core.foreground.instructive.default;return jsx(PhosphorIcon,{color:iconColor,icon:checkIcon,size:"small",style:[styles$
|
|
36
|
+
const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?semanticColor.core.foreground.disabled.strong:semanticColor.core.foreground.instructive.default;return jsx(PhosphorIcon,{color:iconColor,icon:checkIcon,size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=StyleSheet.create({bounds:{alignSelf:"center",height:sizing.size_160,minBlockSize:sizing.size_160,minInlineSize:sizing.size_160},hide:{visibility:"hidden"}});
|
|
38
37
|
|
|
39
|
-
const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$
|
|
38
|
+
const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:sizing.size_120,height:sizing.size_120,margin:sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}};const styles$a=StyleSheet.create({checkbox:{alignSelf:"center",minBlockSize:sizing.size_160,minInlineSize:sizing.size_160,height:sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",insetBlockStart:-1,insetInlineStart:-1}});
|
|
40
39
|
|
|
41
|
-
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}}render(){const{disabled,focused,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$
|
|
40
|
+
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}}render(){const{disabled,focused,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$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row",gap:sizing.size_080},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsx(BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}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:theme.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=StyleSheet.create({optionItem:{paddingBlock:theme.item.layout.padding.block,paddingInlineStart:theme.item.layout.padding.inlineStart,paddingInlineEnd:theme.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minBlockSize:sizing.size_400,":active":{borderRadius:theme.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
42
41
|
|
|
43
|
-
class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$
|
|
42
|
+
class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=StyleSheet.create({separator:{borderBlockStart:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,height:1,minBlockSize:1,marginBlock:sizing.size_040}});
|
|
44
43
|
|
|
45
44
|
const DropdownOpener=React.forwardRef((props,ref)=>{const{disabled=false,readOnly=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-disabled":readOnly||disabled||undefined,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsx(ClickableBehavior,{onClick:onClick,disabled:disabled||readOnly,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
|
|
46
45
|
|
|
@@ -56,15 +55,13 @@ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxi
|
|
|
56
55
|
|
|
57
56
|
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}function getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement}){const openerLabel=getOpenerLabel(openerElement);const labelId=ariaLabelledBy||openerLabel?.id;if(labelId){return {"aria-labelledby":labelId}}const label=openerLabel?.textContent||ariaLabel;return label?{"aria-label":label}:{}}function getOpenerLabel(openerElement){if(!openerElement||!("labels"in openerElement)){return undefined}return openerElement.labels?.[0]}
|
|
58
57
|
|
|
59
|
-
const VIRTUALIZE_THRESHOLD=125;const 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};const createItemRefs=items=>{const itemRefs=[];for(let i=0;i<items.length;i++){if(items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return itemRefs};const defaultPropLabels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected};const DropdownCore=props=>{const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,alignment="left",autoFocus=true,className,disabled,dropdownStyle,enableTypeAhead=true,id,initialFocusedIndex,isFilterable,items,labels:propLabels=defaultPropLabels,onOpenChanged,onSearchTextChanged,open,opener,openerElement,role,searchText,selectionType="single",style}=props;const schedule=useActionScheduler();const openRef=useLatestRef(open);const onOpenChangedRef=useLatestRef(onOpenChanged);const rootRef=React.useRef(null);const popperElementRef=React.useRef(undefined);const virtualizedListRef=React.useRef(null);const searchFieldRef=React.useRef(null);const textSuggestionRef=React.useRef("");const[labels,setLabels]=React.useState(()=>({noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...propLabels}));const committedItemsRef=React.useRef({itemRefs:[],prevItems:items});const{itemRefs:prevItemRefs,prevItems}=committedItemsRef.current;const shouldCreateItemRefs=prevItemRefs.length===0&&open||!sameItemsFocusable(prevItems,items);const derivedItems=shouldCreateItemRefs?{itemRefs:createItemRefs(items),sameItemsFocusable:false}:{itemRefs:prevItemRefs,sameItemsFocusable:true};const itemRefsRef=React.useRef(derivedItems.itemRefs);React.useEffect(()=>{committedItemsRef.current={itemRefs:derivedItems.itemRefs,prevItems:items};itemRefsRef.current=derivedItems.itemRefs;});const hasSearchField=React.useCallback(()=>{return !!isFilterable},[isFilterable]);const isSearchFieldFocused=React.useCallback(()=>{return hasSearchField()&&document.activeElement===searchFieldRef.current},[hasSearchField]);const focusSearchField=React.useCallback(()=>{if(searchFieldRef.current){searchFieldRef.current.focus();}},[]);const focusedIndexRef=React.useRef(-1);const focusedOriginalIndexRef=React.useRef(-1);const itemsClickedRef=React.useRef(false);const resetFocusedIndex=React.useCallback(()=>{if(typeof initialFocusedIndex!=="undefined"){focusedIndexRef.current=initialFocusedIndex;}else {if(hasSearchField()&&!isSearchFieldFocused()){return focusSearchField()}focusedIndexRef.current=0;}},[focusSearchField,hasSearchField,initialFocusedIndex,isSearchFieldFocused]);const initializedRef=React.useRef(false);if(!initializedRef.current){initializedRef.current=true;resetFocusedIndex();}const shouldVirtualizeList=React.useCallback(()=>{return items.length>VIRTUALIZE_THRESHOLD},[items]);const focusCurrentItem=React.useCallback(onFocus=>{const focusedItemRef=itemRefsRef.current[focusedIndexRef.current];if(!focusedItemRef){return}const{current:virtualizedList}=virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!openRef.current){return}const currentFocusedItemRef=itemRefsRef.current[focusedIndexRef.current];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&shouldVirtualizeList()){schedule.animationFrame(focusNode);return}if(node){schedule.timeout(()=>{node.focus();},0);focusedOriginalIndexRef.current=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(shouldVirtualizeList()){schedule.animationFrame(focusNode);}else {focusNode();}},[openRef,schedule,shouldVirtualizeList]);const scheduleToFocusCurrentItem=React.useCallback(onFocus=>{if(shouldVirtualizeList()){schedule.animationFrame(()=>{focusCurrentItem(onFocus);});}else {focusCurrentItem(onFocus);}},[focusCurrentItem,schedule,shouldVirtualizeList]);const maybeFocusInitialItem=React.useCallback(()=>{if(!autoFocus){return}if(open){resetFocusedIndex();scheduleToFocusCurrentItem();}else if(!open){itemsClickedRef.current=false;}},[autoFocus,open,resetFocusedIndex,scheduleToFocusCurrentItem]);React.useEffect(()=>{if(!open){return}const handleInteract=event=>{const target=event.target;const thisElement=rootRef.current;if(thisElement&&!thisElement.contains(target)&&popperElementRef.current&&!popperElementRef.current.contains(target)){onOpenChangedRef.current(false);}};document.addEventListener("mouseup",handleInteract);document.addEventListener("touchend",handleInteract);return ()=>{document.removeEventListener("mouseup",handleInteract);document.removeEventListener("touchend",handleInteract);}},[open,onOpenChangedRef]);useOnMountEffect(()=>{maybeFocusInitialItem();});const prevRenderRef=React.useRef(null);React.useEffect(()=>{const prevProps=prevRenderRef.current;prevRenderRef.current={open,searchText,labels:propLabels,derivedItems};if(!prevProps||prevProps.derivedItems===derivedItems){return}if(prevProps.open!==open){maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=derivedItems;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===focusedOriginalIndexRef.current);if(newFocusableIndex===-1){focusedIndexRef.current=0;itemsClickedRef.current=false;scheduleToFocusCurrentItem();}else {focusedIndexRef.current=newFocusableIndex;}}if(propLabels!==prevProps.labels){setLabels(prevLabels=>({...prevLabels,...propLabels}));}}});const focusPreviousItem=React.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=itemRefsRef.current.length-1;}else if(focusedIndexRef.current===0){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=itemRefsRef.current.length-1;}else {focusedIndexRef.current-=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const focusNextItem=React.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=0;}else if(focusedIndexRef.current===itemRefsRef.current.length-1){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=0;}else {focusedIndexRef.current+=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const restoreTabOrder=React.useCallback(()=>{if(openerElement){openerElement.focus();}},[openerElement]);const handleKeyDownDebounceResult=React.useCallback(key=>{const foundIndex=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=!open;if(isClosed){onOpenChanged(true);}focusedIndexRef.current=foundIndex;scheduleToFocusCurrentItem(node=>{if(selectionType==="single"&&isClosed&&node){node.click();onOpenChanged(false);}});}textSuggestionRef.current="";},[items,onOpenChanged,open,scheduleToFocusCurrentItem,selectionType]);const handleKeyDownDebounceResultRef=React.useRef(handleKeyDownDebounceResult);handleKeyDownDebounceResultRef.current=handleKeyDownDebounceResult;const handleKeyDownDebounced=React.useMemo(()=>debounce(key=>handleKeyDownDebounceResultRef.current(key),500),[]);const handleKeyDown=event=>{const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();textSuggestionRef.current+=key;handleKeyDownDebounced(textSuggestionRef.current);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(isSearchFieldFocused()&&searchText){return}restoreTabOrder();onOpenChanged(false);return;case keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();focusPreviousItem();return;case keys.down:event.preventDefault();focusNextItem();return}};const handleKeyUp=event=>{const key=event.key;switch(key){case keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();restoreTabOrder();onOpenChanged(false);}return}};const handleClickFocus=index=>{itemsClickedRef.current=true;focusedIndexRef.current=index;focusedOriginalIndexRef.current=derivedItems.itemRefs[focusedIndexRef.current].originalIndex;};const handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}};const getItemRole=()=>{switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}};const maybeRenderNoResults=()=>{const{noResults}=propLabels;const numResults=items.length;if(numResults===0){return jsx(BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null};const handleItemClick=(focusIndex,item)=>{handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}};const renderList=()=>{let focusCounter=0;const itemRole=getItemRole();return 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=derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})};const parseVirtualizedItems=()=>{let focusCounter=0;const itemRole=getItemRole();return 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&&derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null,onClick:()=>{handleItemClick(focusIndex,item);}}})};const renderVirtualizedList=()=>{const virtualizedItems=parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:virtualizedListRef})};const handleSearchTextChanged=searchText=>{if(onSearchTextChanged){onSearchTextChanged(searchText);}};const renderSearchField=()=>{return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:handleSearchTextChanged,placeholder:labels.filter,ref:searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})};const renderDropdownMenu=(listRenderer,isReferenceHidden)=>{const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&renderSearchField(),jsx(View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),maybeRenderNoResults()]})};const renderDropdown=()=>{const listRenderer=shouldVirtualizeList()?renderVirtualizedList():renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{popperElementRef.current=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>renderDropdownMenu(listRenderer,isReferenceHidden)})};return jsxs(View,{ref:rootRef,onKeyDown:!disabled?handleKeyDown:undefined,onKeyUp:!disabled?handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&renderDropdown()]})};const styles$8=StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:sizing.size_060},searchInputStyle:{margin:sizing.size_080,marginBlockStart:sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
|
|
60
|
-
|
|
61
|
-
const textUnderlineOffset=sizing.size_040;const theme$2={root:{border:{width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{default:border.width.none,hover:border.width.none,press:border.width.none}},offset:{primary:border.width.medium,secondary:0,tertiary:0},radius:{default:border.radius.radius_040,hover:border.radius.radius_040,press:border.radius.radius_040}},sizing:{height:{small:sizing.size_320,medium:sizing.size_400,large:sizing.size_560},underline:{hover:sizing.size_020,press:sizing.size_010}},layout:{padding:{inline:{primary:{small:sizing.size_160,medium:sizing.size_160,large:sizing.size_320},secondary:{small:sizing.size_120,medium:sizing.size_160,large:sizing.size_180},tertiary:{small:sizing.size_0,medium:sizing.size_0,large:sizing.size_0}}}},font:{size:{large:sizing.size_180},lineHeight:{small:sizing.size_220,default:sizing.size_240,large:sizing.size_260},weight:{default:font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:sizing.size_060,outer:`calc(-1 * ${border.width.medium})`}},padding:sizing.size_020,sizing:{small:sizing.size_160,medium:sizing.size_240,large:sizing.size_240}}};var theme$1=mapValuesToCssVars(theme$2,"--wb-c-button-");function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[iconStyle,style],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React.cloneElement(icon,commonProps)}switch(size){case"small":return jsx(PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}const StyledA=addStyle("a");const StyledButton$2=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,id:id,role:"button",style:[styles$2$1.reset,style],...restProps};const inRouterContext=useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton$2,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2$1=StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsx(BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1$1[buttonType]){return styles$1$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1$1[buttonType]=StyleSheet.create(newStyles);return styles$1$1[buttonType]};const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const ActivityButtonCore=React.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsx(Fragment,{children:jsxs(View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles$7.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$7.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$7.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.endIcon]}))]})})})});React.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},font:{lineHeight:sizing.size_140},layout:{padding:{blockStart:sizing.size_040,blockEnd:sizing.size_060},width:sizing.size_640}},icon:{sizing:{height:sizing.size_200,width:sizing.size_200}}};const styles$7={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=StyleSheet.create(newStyles);return stateStyles[buttonType]};
|
|
58
|
+
const VIRTUALIZE_THRESHOLD=125;const 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};const createItemRefs=items=>{const itemRefs=[];for(let i=0;i<items.length;i++){if(items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return itemRefs};const defaultPropLabels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected};const DropdownCore=props=>{const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,alignment="left",autoFocus=true,className,disabled,dropdownStyle,enableTypeAhead=true,id,initialFocusedIndex,isFilterable,items,labels:propLabels=defaultPropLabels,onOpenChanged,onSearchTextChanged,open,opener,openerElement,role,searchText,selectionType="single",style}=props;const schedule=useActionScheduler();const openRef=useLatestRef(open);const onOpenChangedRef=useLatestRef(onOpenChanged);const rootRef=React.useRef(null);const popperElementRef=React.useRef(undefined);const virtualizedListRef=React.useRef(null);const searchFieldRef=React.useRef(null);const textSuggestionRef=React.useRef("");const[labels,setLabels]=React.useState(()=>({noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...propLabels}));const committedItemsRef=React.useRef({itemRefs:[],prevItems:items});const{itemRefs:prevItemRefs,prevItems}=committedItemsRef.current;const shouldCreateItemRefs=prevItemRefs.length===0&&open||!sameItemsFocusable(prevItems,items);const derivedItems=shouldCreateItemRefs?{itemRefs:createItemRefs(items),sameItemsFocusable:false}:{itemRefs:prevItemRefs,sameItemsFocusable:true};const itemRefsRef=React.useRef(derivedItems.itemRefs);React.useEffect(()=>{committedItemsRef.current={itemRefs:derivedItems.itemRefs,prevItems:items};itemRefsRef.current=derivedItems.itemRefs;});const hasSearchField=React.useCallback(()=>{return !!isFilterable},[isFilterable]);const isSearchFieldFocused=React.useCallback(()=>{return hasSearchField()&&document.activeElement===searchFieldRef.current},[hasSearchField]);const focusSearchField=React.useCallback(()=>{if(searchFieldRef.current){searchFieldRef.current.focus();}},[]);const focusedIndexRef=React.useRef(-1);const focusedOriginalIndexRef=React.useRef(-1);const itemsClickedRef=React.useRef(false);const resetFocusedIndex=React.useCallback(()=>{if(typeof initialFocusedIndex!=="undefined"){focusedIndexRef.current=initialFocusedIndex;}else {if(hasSearchField()&&!isSearchFieldFocused()){return focusSearchField()}focusedIndexRef.current=0;}},[focusSearchField,hasSearchField,initialFocusedIndex,isSearchFieldFocused]);const initializedRef=React.useRef(false);if(!initializedRef.current){initializedRef.current=true;resetFocusedIndex();}const shouldVirtualizeList=React.useCallback(()=>{return items.length>VIRTUALIZE_THRESHOLD},[items]);const focusCurrentItem=React.useCallback(onFocus=>{const focusedItemRef=itemRefsRef.current[focusedIndexRef.current];if(!focusedItemRef){return}const{current:virtualizedList}=virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!openRef.current){return}const currentFocusedItemRef=itemRefsRef.current[focusedIndexRef.current];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&shouldVirtualizeList()){schedule.animationFrame(focusNode);return}if(node){schedule.timeout(()=>{node.focus();},0);focusedOriginalIndexRef.current=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(shouldVirtualizeList()){schedule.animationFrame(focusNode);}else {focusNode();}},[openRef,schedule,shouldVirtualizeList]);const scheduleToFocusCurrentItem=React.useCallback(onFocus=>{if(shouldVirtualizeList()){schedule.animationFrame(()=>{focusCurrentItem(onFocus);});}else {focusCurrentItem(onFocus);}},[focusCurrentItem,schedule,shouldVirtualizeList]);const maybeFocusInitialItem=React.useCallback(()=>{if(!autoFocus){return}if(open){resetFocusedIndex();scheduleToFocusCurrentItem();}else if(!open){itemsClickedRef.current=false;}},[autoFocus,open,resetFocusedIndex,scheduleToFocusCurrentItem]);React.useEffect(()=>{if(!open){return}const handleInteract=event=>{const target=event.target;const thisElement=rootRef.current;if(thisElement&&!thisElement.contains(target)&&popperElementRef.current&&!popperElementRef.current.contains(target)){onOpenChangedRef.current(false);}};document.addEventListener("mouseup",handleInteract);document.addEventListener("touchend",handleInteract);return ()=>{document.removeEventListener("mouseup",handleInteract);document.removeEventListener("touchend",handleInteract);}},[open,onOpenChangedRef]);useOnMountEffect(()=>{maybeFocusInitialItem();});const prevRenderRef=React.useRef(null);React.useEffect(()=>{const prevProps=prevRenderRef.current;prevRenderRef.current={open,searchText,labels:propLabels,derivedItems};if(!prevProps||prevProps.derivedItems===derivedItems){return}if(prevProps.open!==open){maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=derivedItems;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===focusedOriginalIndexRef.current);if(newFocusableIndex===-1){focusedIndexRef.current=0;itemsClickedRef.current=false;scheduleToFocusCurrentItem();}else {focusedIndexRef.current=newFocusableIndex;}}if(propLabels!==prevProps.labels){setLabels(prevLabels=>({...prevLabels,...propLabels}));}}});const focusPreviousItem=React.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=itemRefsRef.current.length-1;}else if(focusedIndexRef.current===0){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=itemRefsRef.current.length-1;}else {focusedIndexRef.current-=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const focusNextItem=React.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=0;}else if(focusedIndexRef.current===itemRefsRef.current.length-1){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=0;}else {focusedIndexRef.current+=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const restoreTabOrder=React.useCallback(()=>{if(openerElement){openerElement.focus();}},[openerElement]);const handleKeyDownDebounceResult=React.useCallback(key=>{const foundIndex=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=!open;if(isClosed){onOpenChanged(true);}focusedIndexRef.current=foundIndex;scheduleToFocusCurrentItem(node=>{if(selectionType==="single"&&isClosed&&node){node.click();onOpenChanged(false);}});}textSuggestionRef.current="";},[items,onOpenChanged,open,scheduleToFocusCurrentItem,selectionType]);const handleKeyDownDebounceResultRef=React.useRef(handleKeyDownDebounceResult);handleKeyDownDebounceResultRef.current=handleKeyDownDebounceResult;const handleKeyDownDebounced=React.useMemo(()=>debounce(key=>handleKeyDownDebounceResultRef.current(key),500),[]);const handleKeyDown=event=>{const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();textSuggestionRef.current+=key;handleKeyDownDebounced(textSuggestionRef.current);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(isSearchFieldFocused()&&searchText){return}restoreTabOrder();onOpenChanged(false);return;case keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();focusPreviousItem();return;case keys.down:event.preventDefault();focusNextItem();return}};const handleKeyUp=event=>{const key=event.key;switch(key){case keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();restoreTabOrder();onOpenChanged(false);}return}};const handleClickFocus=index=>{itemsClickedRef.current=true;focusedIndexRef.current=index;focusedOriginalIndexRef.current=derivedItems.itemRefs[focusedIndexRef.current].originalIndex;};const handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}};const getItemRole=()=>{switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}};const maybeRenderNoResults=()=>{const{noResults}=propLabels;const numResults=items.length;if(numResults===0){return jsx(BodyText,{style:styles$7.noResult,testId:"dropdown-core-no-results",children:noResults})}return null};const handleItemClick=(focusIndex,item)=>{handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}};const renderList=()=>{let focusCounter=0;const itemRole=getItemRole();return 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=derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})};const parseVirtualizedItems=()=>{let focusCounter=0;const itemRole=getItemRole();return 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&&derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null,onClick:()=>{handleItemClick(focusIndex,item);}}})};const renderVirtualizedList=()=>{const virtualizedItems=parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:virtualizedListRef})};const handleSearchTextChanged=searchText=>{if(onSearchTextChanged){onSearchTextChanged(searchText);}};const renderSearchField=()=>{return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:handleSearchTextChanged,placeholder:labels.filter,ref:searchFieldRef,style:styles$7.searchInputStyle,value:searchText||""})};const renderDropdownMenu=(listRenderer,isReferenceHidden)=>{const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:handleDropdownMouseUp,style:[styles$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&renderSearchField(),jsx(View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$7.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),maybeRenderNoResults()]})};const renderDropdown=()=>{const listRenderer=shouldVirtualizeList()?renderVirtualizedList():renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{popperElementRef.current=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>renderDropdownMenu(listRenderer,isReferenceHidden)})};return jsxs(View,{ref:rootRef,onKeyDown:!disabled?handleKeyDown:undefined,onKeyUp:!disabled?handleKeyUp:undefined,style:[styles$7.menuWrapper,style],className:className,children:[opener,open&&renderDropdown()]})};const styles$7=StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme.listbox.border.radius,paddingBlock:theme.listbox.layout.padding.block,paddingInline:theme.listbox.layout.padding.inline,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:sizing.size_060},searchInputStyle:{margin:sizing.size_080,marginBlockStart:sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
|
|
62
59
|
|
|
63
60
|
const ActionMenuOpenerCore=React.forwardRef(function ActionMenuOpenerCore(props,ref){const{children,disabled,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=props;return jsx(Button,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu",kind:"tertiary","aria-label":ariaLabel,disabled:disabled,...restProps,testId:testId,endIcon:caretDownIcon,ref:ref,children:children})});
|
|
64
61
|
|
|
65
62
|
const ActionMenu=React.forwardRef(function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id},ref){const[internalOpened,setInternalOpened]=React.useState(false);const[openerElement,setOpenerElement]=React.useState(null);const generatedUniqueOpenerId=React.useId();const generatedUniqueDropdownId=React.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React.useCallback(()=>{handleOpenChanged(false);openerElement?.focus();},[handleOpenChanged,openerElement]);const handleOptionSelected=React.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React.useCallback(()=>{const allChildren=React.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React.useCallback(node=>{if(node instanceof HTMLElement||node==null){setOpenerElement(node??null);}else {setOpenerElement(document.getElementById(uniqueOpenerId));}},[uniqueOpenerId]);React.useEffect(()=>{if(openerElement?.isConnected){return}setOpenerElement(document.getElementById(uniqueOpenerId));},[openerElement,opener,uniqueOpenerId]);React.useImperativeHandle(ref,()=>openerElement,[openerElement]);const handleClick=React.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsx(DropdownCore,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElement??undefined,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$6.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})});const styles$6=StyleSheet.create({caret:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${sizing.size_040})`}});
|
|
66
63
|
|
|
67
|
-
const StyledButton$1=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$5.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$5=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme
|
|
64
|
+
const StyledButton$1=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$5.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$5=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme.opener.layout.padding.inlineStart,paddingInlineEnd:theme.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:sizing.size_160},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,cursor:"pointer",":active":{boxShadow:PRESS_SHADOW},":focus":{...focusStyles.focus[":focus-visible"]},[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:semanticColor.input.error.background,border:`${theme.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:semanticColor.input.default.placeholder},disabledPlaceholder:{color:semanticColor.input.disabled.placeholder},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text,":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}}});
|
|
68
65
|
|
|
69
66
|
const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
|
|
70
67
|
|
|
@@ -82,9 +79,9 @@ const StyledSpan=addStyle("span");function ComboboxLiveRegion({focusedIndex,focu
|
|
|
82
79
|
|
|
83
80
|
const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsx(View,{role:"group",style:styles$3.container,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsx(Button,{id:uniqueId,testId:testId?`${testId}-item-${index}`:undefined,size:"small",style:[styles$3.item,focused&&styles$3.itemFocused],kind:"secondary",actionType:"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),endIcon:disabled?undefined:jsx(PhosphorIcon,{icon:xIcon,size:"small"}),children:label},uniqueId)})})});const styles$3=StyleSheet.create({container:{flexDirection:"row",flexWrap:"wrap",gap:sizing.size_080,paddingBlockStart:sizing.size_080},item:{fontSize:font.body.size.small,justifyContent:"space-between",alignItems:"center",height:"auto",paddingInline:sizing.size_080},itemFocused:focusStyles.focus[":focus-visible"]});
|
|
84
81
|
|
|
85
|
-
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$2.listbox,style,disabled&&styles$2.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$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=StyleSheet.create({listbox:{backgroundColor:semanticColor.core.background.base.default,outline:"none",paddingBlock:theme
|
|
82
|
+
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$2.listbox,style,disabled&&styles$2.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$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=StyleSheet.create({listbox:{backgroundColor:semanticColor.core.background.base.default,outline:"none",paddingBlock:theme.listbox.layout.padding.block,paddingInline:theme.listbox.layout.padding.inline},disabled:{color:semanticColor.action.secondary.disabled.foreground}});
|
|
86
83
|
|
|
87
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){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 updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});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 handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);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.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.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$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.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:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],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",...ariaAttrs}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.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:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme
|
|
84
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){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 updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});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 handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);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.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.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$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.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:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],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",...ariaAttrs}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.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:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme.opener.border.radius.rest,border:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,paddingInline:theme.opener.layout.padding.inline,overflow:"hidden"},focused:focusStyles.focus[":focus-visible"],disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground},error:{background:semanticColor.input.error.background,border:`${theme.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme.listbox.border.radius,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:semanticColor.core.transparent},":active":{borderColor:semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
|
|
88
85
|
|
|
89
86
|
const StyledButton=addStyle("button");const CustomOpener=React.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsx(BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:sizing.size_020},disabled:{cursor:"not-allowed"}});
|
|
90
87
|
|
package/dist/index.js
CHANGED
|
@@ -21,8 +21,7 @@ var reactPopper = require('react-popper');
|
|
|
21
21
|
var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
|
|
22
22
|
var core = require('@popperjs/core');
|
|
23
23
|
var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
|
|
24
|
-
var
|
|
25
|
-
var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
|
|
24
|
+
var Button = require('@khanacademy/wonder-blocks-button');
|
|
26
25
|
var wonderBlocksAnnouncer = require('@khanacademy/wonder-blocks-announcer');
|
|
27
26
|
var caretDownIcon$1 = require('@phosphor-icons/core/regular/caret-down.svg');
|
|
28
27
|
var xIcon = require('@phosphor-icons/core/regular/x.svg');
|
|
@@ -54,6 +53,7 @@ var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
|
|
|
54
53
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
|
|
55
54
|
var SearchField__default = /*#__PURE__*/_interopDefaultLegacy(SearchField);
|
|
56
55
|
var caretDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon);
|
|
56
|
+
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
57
57
|
var caretDownIcon__default$1 = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon$1);
|
|
58
58
|
var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
|
|
59
59
|
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
|
|
@@ -62,17 +62,17 @@ const selectDropdownStyle={marginBlock:wonderBlocksTokens.sizing.size_080};const
|
|
|
62
62
|
|
|
63
63
|
var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.radius_040},layout:{padding:{inline:wonderBlocksTokens.sizing.size_0,block:wonderBlocksTokens.sizing.size_040}},shadow:{default:wonderBlocksTokens.boxShadow.mid}},opener:{border:{width:{error:wonderBlocksTokens.border.width.thin},radius:{rest:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,inlineStart:wonderBlocksTokens.sizing.size_160,inlineEnd:wonderBlocksTokens.sizing.size_120}}},item:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{block:wonderBlocksTokens.sizing.size_100,inlineStart:wonderBlocksTokens.sizing.size_080,inlineEnd:wonderBlocksTokens.sizing.size_160}},font:{weight:wonderBlocksTokens.font.weight.regular}}};
|
|
64
64
|
|
|
65
|
-
var theme
|
|
65
|
+
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
|
|
66
66
|
|
|
67
|
-
class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$
|
|
67
|
+
class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=aphrodite.StyleSheet.create({wrapper:{minBlockSize:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minBlockSize:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme.item.layout.padding.block},label:{fontWeight:theme.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:wonderBlocksTokens.sizing.size_320}});
|
|
68
68
|
|
|
69
|
-
const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:wonderBlocksTokens.semanticColor.core.foreground.instructive.default;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:iconColor,icon:checkIcon__default["default"],size:"small",style:[styles$
|
|
69
|
+
const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:wonderBlocksTokens.semanticColor.core.foreground.instructive.default;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:iconColor,icon:checkIcon__default["default"],size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.sizing.size_160,minBlockSize:wonderBlocksTokens.sizing.size_160,minInlineSize:wonderBlocksTokens.sizing.size_160},hide:{visibility:"hidden"}});
|
|
70
70
|
|
|
71
|
-
const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$
|
|
71
|
+
const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.sizing.size_120,height:wonderBlocksTokens.sizing.size_120,margin:wonderBlocksTokens.sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}};const styles$a=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minBlockSize:wonderBlocksTokens.sizing.size_160,minInlineSize:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",insetBlockStart:-1,insetInlineStart:-1}});
|
|
72
72
|
|
|
73
|
-
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}}render(){const{disabled,focused,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$
|
|
73
|
+
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}}render(){const{disabled,focused,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$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}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:theme.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=aphrodite.StyleSheet.create({optionItem:{paddingBlock:theme.item.layout.padding.block,paddingInlineStart:theme.item.layout.padding.inlineStart,paddingInlineEnd:theme.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minBlockSize:wonderBlocksTokens.sizing.size_400,":active":{borderRadius:theme.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
74
74
|
|
|
75
|
-
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$
|
|
75
|
+
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$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=aphrodite.StyleSheet.create({separator:{borderBlockStart:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,height:1,minBlockSize:1,marginBlock:wonderBlocksTokens.sizing.size_040}});
|
|
76
76
|
|
|
77
77
|
const DropdownOpener=React__namespace.forwardRef((props,ref)=>{const{disabled=false,readOnly=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-disabled":readOnly||disabled||undefined,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:onClick,disabled:disabled||readOnly,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
|
|
78
78
|
|
|
@@ -88,15 +88,13 @@ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxi
|
|
|
88
88
|
|
|
89
89
|
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}function getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement}){const openerLabel=getOpenerLabel(openerElement);const labelId=ariaLabelledBy||openerLabel?.id;if(labelId){return {"aria-labelledby":labelId}}const label=openerLabel?.textContent||ariaLabel;return label?{"aria-label":label}:{}}function getOpenerLabel(openerElement){if(!openerElement||!("labels"in openerElement)){return undefined}return openerElement.labels?.[0]}
|
|
90
90
|
|
|
91
|
-
const VIRTUALIZE_THRESHOLD=125;const 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};const createItemRefs=items=>{const itemRefs=[];for(let i=0;i<items.length;i++){if(items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return itemRefs};const defaultPropLabels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected};const DropdownCore=props=>{const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,alignment="left",autoFocus=true,className,disabled,dropdownStyle,enableTypeAhead=true,id,initialFocusedIndex,isFilterable,items,labels:propLabels=defaultPropLabels,onOpenChanged,onSearchTextChanged,open,opener,openerElement,role,searchText,selectionType="single",style}=props;const schedule=wonderBlocksTiming.useActionScheduler();const openRef=wonderBlocksCore.useLatestRef(open);const onOpenChangedRef=wonderBlocksCore.useLatestRef(onOpenChanged);const rootRef=React__namespace.useRef(null);const popperElementRef=React__namespace.useRef(undefined);const virtualizedListRef=React__namespace.useRef(null);const searchFieldRef=React__namespace.useRef(null);const textSuggestionRef=React__namespace.useRef("");const[labels,setLabels]=React__namespace.useState(()=>({noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...propLabels}));const committedItemsRef=React__namespace.useRef({itemRefs:[],prevItems:items});const{itemRefs:prevItemRefs,prevItems}=committedItemsRef.current;const shouldCreateItemRefs=prevItemRefs.length===0&&open||!sameItemsFocusable(prevItems,items);const derivedItems=shouldCreateItemRefs?{itemRefs:createItemRefs(items),sameItemsFocusable:false}:{itemRefs:prevItemRefs,sameItemsFocusable:true};const itemRefsRef=React__namespace.useRef(derivedItems.itemRefs);React__namespace.useEffect(()=>{committedItemsRef.current={itemRefs:derivedItems.itemRefs,prevItems:items};itemRefsRef.current=derivedItems.itemRefs;});const hasSearchField=React__namespace.useCallback(()=>{return !!isFilterable},[isFilterable]);const isSearchFieldFocused=React__namespace.useCallback(()=>{return hasSearchField()&&document.activeElement===searchFieldRef.current},[hasSearchField]);const focusSearchField=React__namespace.useCallback(()=>{if(searchFieldRef.current){searchFieldRef.current.focus();}},[]);const focusedIndexRef=React__namespace.useRef(-1);const focusedOriginalIndexRef=React__namespace.useRef(-1);const itemsClickedRef=React__namespace.useRef(false);const resetFocusedIndex=React__namespace.useCallback(()=>{if(typeof initialFocusedIndex!=="undefined"){focusedIndexRef.current=initialFocusedIndex;}else {if(hasSearchField()&&!isSearchFieldFocused()){return focusSearchField()}focusedIndexRef.current=0;}},[focusSearchField,hasSearchField,initialFocusedIndex,isSearchFieldFocused]);const initializedRef=React__namespace.useRef(false);if(!initializedRef.current){initializedRef.current=true;resetFocusedIndex();}const shouldVirtualizeList=React__namespace.useCallback(()=>{return items.length>VIRTUALIZE_THRESHOLD},[items]);const focusCurrentItem=React__namespace.useCallback(onFocus=>{const focusedItemRef=itemRefsRef.current[focusedIndexRef.current];if(!focusedItemRef){return}const{current:virtualizedList}=virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!openRef.current){return}const currentFocusedItemRef=itemRefsRef.current[focusedIndexRef.current];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&shouldVirtualizeList()){schedule.animationFrame(focusNode);return}if(node){schedule.timeout(()=>{node.focus();},0);focusedOriginalIndexRef.current=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(shouldVirtualizeList()){schedule.animationFrame(focusNode);}else {focusNode();}},[openRef,schedule,shouldVirtualizeList]);const scheduleToFocusCurrentItem=React__namespace.useCallback(onFocus=>{if(shouldVirtualizeList()){schedule.animationFrame(()=>{focusCurrentItem(onFocus);});}else {focusCurrentItem(onFocus);}},[focusCurrentItem,schedule,shouldVirtualizeList]);const maybeFocusInitialItem=React__namespace.useCallback(()=>{if(!autoFocus){return}if(open){resetFocusedIndex();scheduleToFocusCurrentItem();}else if(!open){itemsClickedRef.current=false;}},[autoFocus,open,resetFocusedIndex,scheduleToFocusCurrentItem]);React__namespace.useEffect(()=>{if(!open){return}const handleInteract=event=>{const target=event.target;const thisElement=rootRef.current;if(thisElement&&!thisElement.contains(target)&&popperElementRef.current&&!popperElementRef.current.contains(target)){onOpenChangedRef.current(false);}};document.addEventListener("mouseup",handleInteract);document.addEventListener("touchend",handleInteract);return ()=>{document.removeEventListener("mouseup",handleInteract);document.removeEventListener("touchend",handleInteract);}},[open,onOpenChangedRef]);wonderBlocksCore.useOnMountEffect(()=>{maybeFocusInitialItem();});const prevRenderRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{const prevProps=prevRenderRef.current;prevRenderRef.current={open,searchText,labels:propLabels,derivedItems};if(!prevProps||prevProps.derivedItems===derivedItems){return}if(prevProps.open!==open){maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=derivedItems;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===focusedOriginalIndexRef.current);if(newFocusableIndex===-1){focusedIndexRef.current=0;itemsClickedRef.current=false;scheduleToFocusCurrentItem();}else {focusedIndexRef.current=newFocusableIndex;}}if(propLabels!==prevProps.labels){setLabels(prevLabels=>({...prevLabels,...propLabels}));}}});const focusPreviousItem=React__namespace.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=itemRefsRef.current.length-1;}else if(focusedIndexRef.current===0){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=itemRefsRef.current.length-1;}else {focusedIndexRef.current-=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const focusNextItem=React__namespace.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=0;}else if(focusedIndexRef.current===itemRefsRef.current.length-1){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=0;}else {focusedIndexRef.current+=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const restoreTabOrder=React__namespace.useCallback(()=>{if(openerElement){openerElement.focus();}},[openerElement]);const handleKeyDownDebounceResult=React__namespace.useCallback(key=>{const foundIndex=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=!open;if(isClosed){onOpenChanged(true);}focusedIndexRef.current=foundIndex;scheduleToFocusCurrentItem(node=>{if(selectionType==="single"&&isClosed&&node){node.click();onOpenChanged(false);}});}textSuggestionRef.current="";},[items,onOpenChanged,open,scheduleToFocusCurrentItem,selectionType]);const handleKeyDownDebounceResultRef=React__namespace.useRef(handleKeyDownDebounceResult);handleKeyDownDebounceResultRef.current=handleKeyDownDebounceResult;const handleKeyDownDebounced=React__namespace.useMemo(()=>debounce(key=>handleKeyDownDebounceResultRef.current(key),500),[]);const handleKeyDown=event=>{const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();textSuggestionRef.current+=key;handleKeyDownDebounced(textSuggestionRef.current);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(isSearchFieldFocused()&&searchText){return}restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();focusNextItem();return}};const handleKeyUp=event=>{const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();restoreTabOrder();onOpenChanged(false);}return}};const handleClickFocus=index=>{itemsClickedRef.current=true;focusedIndexRef.current=index;focusedOriginalIndexRef.current=derivedItems.itemRefs[focusedIndexRef.current].originalIndex;};const handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}};const getItemRole=()=>{switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}};const maybeRenderNoResults=()=>{const{noResults}=propLabels;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null};const handleItemClick=(focusIndex,item)=>{handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}};const renderList=()=>{let focusCounter=0;const itemRole=getItemRole();return 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=derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})};const parseVirtualizedItems=()=>{let focusCounter=0;const itemRole=getItemRole();return 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&&derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null,onClick:()=>{handleItemClick(focusIndex,item);}}})};const renderVirtualizedList=()=>{const virtualizedItems=parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:virtualizedListRef})};const handleSearchTextChanged=searchText=>{if(onSearchTextChanged){onSearchTextChanged(searchText);}};const renderSearchField=()=>{return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:handleSearchTextChanged,placeholder:labels.filter,ref:searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})};const renderDropdownMenu=(listRenderer,isReferenceHidden)=>{const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),maybeRenderNoResults()]})};const renderDropdown=()=>{const listRenderer=shouldVirtualizeList()?renderVirtualizedList():renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{popperElementRef.current=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>renderDropdownMenu(listRenderer,isReferenceHidden)})};return jsxRuntime.jsxs(wonderBlocksCore.View,{ref:rootRef,onKeyDown:!disabled?handleKeyDown:undefined,onKeyUp:!disabled?handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&renderDropdown()]})};const styles$8=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:wonderBlocksTokens.sizing.size_060},searchInputStyle:{margin:wonderBlocksTokens.sizing.size_080,marginBlockStart:wonderBlocksTokens.sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
|
|
91
|
+
const VIRTUALIZE_THRESHOLD=125;const 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};const createItemRefs=items=>{const itemRefs=[];for(let i=0;i<items.length;i++){if(items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return itemRefs};const defaultPropLabels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected};const DropdownCore=props=>{const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,alignment="left",autoFocus=true,className,disabled,dropdownStyle,enableTypeAhead=true,id,initialFocusedIndex,isFilterable,items,labels:propLabels=defaultPropLabels,onOpenChanged,onSearchTextChanged,open,opener,openerElement,role,searchText,selectionType="single",style}=props;const schedule=wonderBlocksTiming.useActionScheduler();const openRef=wonderBlocksCore.useLatestRef(open);const onOpenChangedRef=wonderBlocksCore.useLatestRef(onOpenChanged);const rootRef=React__namespace.useRef(null);const popperElementRef=React__namespace.useRef(undefined);const virtualizedListRef=React__namespace.useRef(null);const searchFieldRef=React__namespace.useRef(null);const textSuggestionRef=React__namespace.useRef("");const[labels,setLabels]=React__namespace.useState(()=>({noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...propLabels}));const committedItemsRef=React__namespace.useRef({itemRefs:[],prevItems:items});const{itemRefs:prevItemRefs,prevItems}=committedItemsRef.current;const shouldCreateItemRefs=prevItemRefs.length===0&&open||!sameItemsFocusable(prevItems,items);const derivedItems=shouldCreateItemRefs?{itemRefs:createItemRefs(items),sameItemsFocusable:false}:{itemRefs:prevItemRefs,sameItemsFocusable:true};const itemRefsRef=React__namespace.useRef(derivedItems.itemRefs);React__namespace.useEffect(()=>{committedItemsRef.current={itemRefs:derivedItems.itemRefs,prevItems:items};itemRefsRef.current=derivedItems.itemRefs;});const hasSearchField=React__namespace.useCallback(()=>{return !!isFilterable},[isFilterable]);const isSearchFieldFocused=React__namespace.useCallback(()=>{return hasSearchField()&&document.activeElement===searchFieldRef.current},[hasSearchField]);const focusSearchField=React__namespace.useCallback(()=>{if(searchFieldRef.current){searchFieldRef.current.focus();}},[]);const focusedIndexRef=React__namespace.useRef(-1);const focusedOriginalIndexRef=React__namespace.useRef(-1);const itemsClickedRef=React__namespace.useRef(false);const resetFocusedIndex=React__namespace.useCallback(()=>{if(typeof initialFocusedIndex!=="undefined"){focusedIndexRef.current=initialFocusedIndex;}else {if(hasSearchField()&&!isSearchFieldFocused()){return focusSearchField()}focusedIndexRef.current=0;}},[focusSearchField,hasSearchField,initialFocusedIndex,isSearchFieldFocused]);const initializedRef=React__namespace.useRef(false);if(!initializedRef.current){initializedRef.current=true;resetFocusedIndex();}const shouldVirtualizeList=React__namespace.useCallback(()=>{return items.length>VIRTUALIZE_THRESHOLD},[items]);const focusCurrentItem=React__namespace.useCallback(onFocus=>{const focusedItemRef=itemRefsRef.current[focusedIndexRef.current];if(!focusedItemRef){return}const{current:virtualizedList}=virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!openRef.current){return}const currentFocusedItemRef=itemRefsRef.current[focusedIndexRef.current];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&shouldVirtualizeList()){schedule.animationFrame(focusNode);return}if(node){schedule.timeout(()=>{node.focus();},0);focusedOriginalIndexRef.current=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(shouldVirtualizeList()){schedule.animationFrame(focusNode);}else {focusNode();}},[openRef,schedule,shouldVirtualizeList]);const scheduleToFocusCurrentItem=React__namespace.useCallback(onFocus=>{if(shouldVirtualizeList()){schedule.animationFrame(()=>{focusCurrentItem(onFocus);});}else {focusCurrentItem(onFocus);}},[focusCurrentItem,schedule,shouldVirtualizeList]);const maybeFocusInitialItem=React__namespace.useCallback(()=>{if(!autoFocus){return}if(open){resetFocusedIndex();scheduleToFocusCurrentItem();}else if(!open){itemsClickedRef.current=false;}},[autoFocus,open,resetFocusedIndex,scheduleToFocusCurrentItem]);React__namespace.useEffect(()=>{if(!open){return}const handleInteract=event=>{const target=event.target;const thisElement=rootRef.current;if(thisElement&&!thisElement.contains(target)&&popperElementRef.current&&!popperElementRef.current.contains(target)){onOpenChangedRef.current(false);}};document.addEventListener("mouseup",handleInteract);document.addEventListener("touchend",handleInteract);return ()=>{document.removeEventListener("mouseup",handleInteract);document.removeEventListener("touchend",handleInteract);}},[open,onOpenChangedRef]);wonderBlocksCore.useOnMountEffect(()=>{maybeFocusInitialItem();});const prevRenderRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{const prevProps=prevRenderRef.current;prevRenderRef.current={open,searchText,labels:propLabels,derivedItems};if(!prevProps||prevProps.derivedItems===derivedItems){return}if(prevProps.open!==open){maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=derivedItems;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===focusedOriginalIndexRef.current);if(newFocusableIndex===-1){focusedIndexRef.current=0;itemsClickedRef.current=false;scheduleToFocusCurrentItem();}else {focusedIndexRef.current=newFocusableIndex;}}if(propLabels!==prevProps.labels){setLabels(prevLabels=>({...prevLabels,...propLabels}));}}});const focusPreviousItem=React__namespace.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=itemRefsRef.current.length-1;}else if(focusedIndexRef.current===0){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=itemRefsRef.current.length-1;}else {focusedIndexRef.current-=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const focusNextItem=React__namespace.useCallback(()=>{if(isSearchFieldFocused()){focusedIndexRef.current=0;}else if(focusedIndexRef.current===itemRefsRef.current.length-1){if(hasSearchField()){return focusSearchField()}focusedIndexRef.current=0;}else {focusedIndexRef.current+=1;}scheduleToFocusCurrentItem();},[focusSearchField,hasSearchField,isSearchFieldFocused,scheduleToFocusCurrentItem]);const restoreTabOrder=React__namespace.useCallback(()=>{if(openerElement){openerElement.focus();}},[openerElement]);const handleKeyDownDebounceResult=React__namespace.useCallback(key=>{const foundIndex=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=!open;if(isClosed){onOpenChanged(true);}focusedIndexRef.current=foundIndex;scheduleToFocusCurrentItem(node=>{if(selectionType==="single"&&isClosed&&node){node.click();onOpenChanged(false);}});}textSuggestionRef.current="";},[items,onOpenChanged,open,scheduleToFocusCurrentItem,selectionType]);const handleKeyDownDebounceResultRef=React__namespace.useRef(handleKeyDownDebounceResult);handleKeyDownDebounceResultRef.current=handleKeyDownDebounceResult;const handleKeyDownDebounced=React__namespace.useMemo(()=>debounce(key=>handleKeyDownDebounceResultRef.current(key),500),[]);const handleKeyDown=event=>{const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();textSuggestionRef.current+=key;handleKeyDownDebounced(textSuggestionRef.current);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(isSearchFieldFocused()&&searchText){return}restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();focusNextItem();return}};const handleKeyUp=event=>{const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();restoreTabOrder();onOpenChanged(false);}return}};const handleClickFocus=index=>{itemsClickedRef.current=true;focusedIndexRef.current=index;focusedOriginalIndexRef.current=derivedItems.itemRefs[focusedIndexRef.current].originalIndex;};const handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}};const getItemRole=()=>{switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}};const maybeRenderNoResults=()=>{const{noResults}=propLabels;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles$7.noResult,testId:"dropdown-core-no-results",children:noResults})}return null};const handleItemClick=(focusIndex,item)=>{handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}};const renderList=()=>{let focusCounter=0;const itemRole=getItemRole();return 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=derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})};const parseVirtualizedItems=()=>{let focusCounter=0;const itemRole=getItemRole();return 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&&derivedItems.itemRefs[focusIndex]?derivedItems.itemRefs[focusIndex].ref:null,onClick:()=>{handleItemClick(focusIndex,item);}}})};const renderVirtualizedList=()=>{const virtualizedItems=parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:virtualizedListRef})};const handleSearchTextChanged=searchText=>{if(onSearchTextChanged){onSearchTextChanged(searchText);}};const renderSearchField=()=>{return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:handleSearchTextChanged,placeholder:labels.filter,ref:searchFieldRef,style:styles$7.searchInputStyle,value:searchText||""})};const renderDropdownMenu=(listRenderer,isReferenceHidden)=>{const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:handleDropdownMouseUp,style:[styles$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$7.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),maybeRenderNoResults()]})};const renderDropdown=()=>{const listRenderer=shouldVirtualizeList()?renderVirtualizedList():renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{popperElementRef.current=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>renderDropdownMenu(listRenderer,isReferenceHidden)})};return jsxRuntime.jsxs(wonderBlocksCore.View,{ref:rootRef,onKeyDown:!disabled?handleKeyDown:undefined,onKeyUp:!disabled?handleKeyUp:undefined,style:[styles$7.menuWrapper,style],className:className,children:[opener,open&&renderDropdown()]})};const styles$7=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.listbox.border.radius,paddingBlock:theme.listbox.layout.padding.block,paddingInline:theme.listbox.layout.padding.inline,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:wonderBlocksTokens.sizing.size_060},searchInputStyle:{margin:wonderBlocksTokens.sizing.size_080,marginBlockStart:wonderBlocksTokens.sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
|
|
92
92
|
|
|
93
|
-
const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$2={root:{border:{width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.none,press:wonderBlocksTokens.border.width.none}},offset:{primary:wonderBlocksTokens.border.width.medium,secondary:0,tertiary:0},radius:{default:wonderBlocksTokens.border.radius.radius_040,hover:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},sizing:{height:{small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_560},underline:{hover:wonderBlocksTokens.sizing.size_020,press:wonderBlocksTokens.sizing.size_010}},layout:{padding:{inline:{primary:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_320},secondary:{small:wonderBlocksTokens.sizing.size_120,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_180},tertiary:{small:wonderBlocksTokens.sizing.size_0,medium:wonderBlocksTokens.sizing.size_0,large:wonderBlocksTokens.sizing.size_0}}}},font:{size:{large:wonderBlocksTokens.sizing.size_180},lineHeight:{small:wonderBlocksTokens.sizing.size_220,default:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_260},weight:{default:wonderBlocksTokens.font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:wonderBlocksTokens.sizing.size_060,outer:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`}},padding:wonderBlocksTokens.sizing.size_020,sizing:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_240}}};var theme$1=wonderBlocksTokens.mapValuesToCssVars(theme$2,"--wb-c-button-");function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[iconStyle,style],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,commonProps)}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}const StyledA=wonderBlocksCore.addStyle("a");const StyledButton$2=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,id:id,role:"button",style:[styles$2$1.reset,style],...restProps};const inRouterContext=reactRouterDomV5Compat.useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton$2,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2$1=aphrodite.StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1$1[buttonType]){return styles$1$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1$1[buttonType]};const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const ActivityButtonCore=React__namespace.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles$7.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$7.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$7.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.endIcon]}))]})})})});React__namespace.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},font:{lineHeight:wonderBlocksTokens.sizing.size_140},layout:{padding:{blockStart:wonderBlocksTokens.sizing.size_040,blockEnd:wonderBlocksTokens.sizing.size_060},width:wonderBlocksTokens.sizing.size_640}},icon:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200}}};const styles$7={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=aphrodite.StyleSheet.create(newStyles);return stateStyles[buttonType]};
|
|
94
|
-
|
|
95
|
-
const ActionMenuOpenerCore=React__namespace.forwardRef(function ActionMenuOpenerCore(props,ref){const{children,disabled,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=props;return jsxRuntime.jsx(Button,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu",kind:"tertiary","aria-label":ariaLabel,disabled:disabled,...restProps,testId:testId,endIcon:caretDownIcon__default["default"],ref:ref,children:children})});
|
|
93
|
+
const ActionMenuOpenerCore=React__namespace.forwardRef(function ActionMenuOpenerCore(props,ref){const{children,disabled,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=props;return jsxRuntime.jsx(Button__default["default"],{"aria-expanded":opened?"true":"false","aria-haspopup":"menu",kind:"tertiary","aria-label":ariaLabel,disabled:disabled,...restProps,testId:testId,endIcon:caretDownIcon__default["default"],ref:ref,children:children})});
|
|
96
94
|
|
|
97
95
|
const ActionMenu=React__namespace.forwardRef(function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id},ref){const[internalOpened,setInternalOpened]=React__namespace.useState(false);const[openerElement,setOpenerElement]=React__namespace.useState(null);const generatedUniqueOpenerId=React__namespace.useId();const generatedUniqueDropdownId=React__namespace.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React__namespace.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React__namespace.useCallback(()=>{handleOpenChanged(false);openerElement?.focus();},[handleOpenChanged,openerElement]);const handleOptionSelected=React__namespace.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React__namespace.useCallback(()=>{const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React__namespace.useCallback(node=>{if(node instanceof HTMLElement||node==null){setOpenerElement(node??null);}else {setOpenerElement(document.getElementById(uniqueOpenerId));}},[uniqueOpenerId]);React__namespace.useEffect(()=>{if(openerElement?.isConnected){return}setOpenerElement(document.getElementById(uniqueOpenerId));},[openerElement,opener,uniqueOpenerId]);React__namespace.useImperativeHandle(ref,()=>openerElement,[openerElement]);const handleClick=React__namespace.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsxRuntime.jsx(DropdownCore,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElement??undefined,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$6.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})});const styles$6=aphrodite.StyleSheet.create({caret:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
|
|
98
96
|
|
|
99
|
-
const StyledButton$1=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$5.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$5=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme
|
|
97
|
+
const StyledButton$1=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.default;const style=[styles$5.shared,styles$5.default,disabled&&styles$5.disabled,error&&styles$5.error,isPlaceholder&&styles$5.placeholder,isPlaceholder&&disabled&&styles$5.disabledPlaceholder,!disabled&&!readOnly&&this.state.pressed&&styles$5.press,readOnly&&styles$5.readOnly,readOnly&&isPlaceholder&&styles$5.placeholder];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton$1,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$5.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$5.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$5=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme.opener.layout.padding.inlineStart,paddingInlineEnd:theme.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:wonderBlocksTokens.sizing.size_160},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,cursor:"pointer",":active":{boxShadow:PRESS_SHADOW},":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]},[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,[":focus:active"]:{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:wonderBlocksTokens.semanticColor.input.default.placeholder},disabledPlaceholder:{color:wonderBlocksTokens.semanticColor.input.disabled.placeholder},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text,":active":{boxShadow:"none"},[":focus:active"]:{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}}});
|
|
100
98
|
|
|
101
99
|
const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React__namespace.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);wonderBlocksCore.useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
|
|
102
100
|
|
|
@@ -112,11 +110,11 @@ function useMultipleSelection({inputValue,isComboboxOpen,selected,onRemove}){con
|
|
|
112
110
|
|
|
113
111
|
const StyledSpan=wonderBlocksCore.addStyle("span");function ComboboxLiveRegion({focusedIndex,focusedMultiSelectIndex,labels={closedState:defaultComboboxLabels.closedState,liveRegionCurrentItem:defaultComboboxLabels.liveRegionCurrentItem,liveRegionListboxTotal:defaultComboboxLabels.liveRegionListboxTotal,liveRegionMultipleSelectionTotal:defaultComboboxLabels.liveRegionMultipleSelectionTotal,noItems:defaultComboboxLabels.noItems,selected:defaultComboboxLabels.selected,selectionCleared:defaultComboboxLabels.selectionCleared,unselected:defaultComboboxLabels.unselected},selectedLabels,opened,options,selected,selectionType="single",testId}){const lastSelectedValue=React__namespace.useRef(null);const[message,setMessage]=React__namespace.useState("");React__namespace.useEffect(()=>{if(selected&&selected!==lastSelectedValue?.current){let newMessage="";const lastSelectedLength=lastSelectedValue?.current?.length??0;const selectedLength=selected?.length??0;if(Array.isArray(selected)&&selected.length>0){const currentLabels=selectedLabels.join(", ");const selectedState=selectedLength>lastSelectedLength?labels.selected(currentLabels):labels.unselected(currentLabels);newMessage=selectedState;}else {newMessage=labels.selected(selectedLabels[0]);}setMessage(newMessage);}if(selectionType==="single"&&!selected&&lastSelectedValue.current){setMessage(labels.selectionCleared);}lastSelectedValue.current=selected;if(selectionType==="multiple"&&!opened){setMessage(labels.closedState);}},[labels,labels.closedState,selectedLabels,opened,selected,selectionType]);const focusedElementDescription=React__namespace.useMemo(()=>{if(focusedMultiSelectIndex>=0){const label=selectedLabels[focusedMultiSelectIndex];return labels.liveRegionCurrentItem({current:label,focused:true,index:focusedMultiSelectIndex,total:selectedLabels.length})+" "+labels.liveRegionMultipleSelectionTotal(selectedLabels.length)}if(options.length===0){return labels.noItems}if(focusedIndex<0||!options[focusedIndex]){return ""}const currentItemProps=options[focusedIndex].props;const label=getLabel(currentItemProps);const totalResults=options.length;return labels.liveRegionCurrentItem({current:label,disabled:currentItemProps.disabled,focused:false,index:focusedIndex,selected:currentItemProps.selected,total:totalResults})+" "+labels.liveRegionListboxTotal(totalResults)},[focusedIndex,focusedMultiSelectIndex,labels,options,selectedLabels]);return jsxRuntime.jsx(StyledSpan,{role:"log","aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",style:styles$4.srOnly,"data-testid":testId?`${testId}-status`:undefined,children:opened?focusedElementDescription:message})}const styles$4=aphrodite.StyleSheet.create({srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
|
|
114
112
|
|
|
115
|
-
const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsxRuntime.jsx(wonderBlocksCore.View,{role:"group",style:styles$3.container,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsxRuntime.jsx(
|
|
113
|
+
const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsxRuntime.jsx(wonderBlocksCore.View,{role:"group",style:styles$3.container,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsxRuntime.jsx(Button__default["default"],{id:uniqueId,testId:testId?`${testId}-item-${index}`:undefined,size:"small",style:[styles$3.item,focused&&styles$3.itemFocused],kind:"secondary",actionType:"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),endIcon:disabled?undefined:jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:xIcon__default["default"],size:"small"}),children:label},uniqueId)})})});const styles$3=aphrodite.StyleSheet.create({container:{flexDirection:"row",flexWrap:"wrap",gap:wonderBlocksTokens.sizing.size_080,paddingBlockStart:wonderBlocksTokens.sizing.size_080},item:{fontSize:wonderBlocksTokens.font.body.size.small,justifyContent:"space-between",alignItems:"center",height:"auto",paddingInline:wonderBlocksTokens.sizing.size_080},itemFocused:wonderBlocksStyles.focusStyles.focus[":focus-visible"]});
|
|
116
114
|
|
|
117
|
-
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$2.listbox,style,disabled&&styles$2.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$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=aphrodite.StyleSheet.create({listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,outline:"none",paddingBlock:theme
|
|
115
|
+
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$2.listbox,style,disabled&&styles$2.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$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=aphrodite.StyleSheet.create({listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,outline:"none",paddingBlock:theme.listbox.layout.padding.block,paddingInline:theme.listbox.layout.padding.inline},disabled:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}});
|
|
118
116
|
|
|
119
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){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 updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});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 handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);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.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.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$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.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:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],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",...ariaAttrs}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.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:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.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(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":active":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
|
|
117
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){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 updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});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 handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);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.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.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$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.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:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],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",...ariaAttrs}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.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:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.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(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":active":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
|
|
120
118
|
|
|
121
119
|
const StyledButton=wonderBlocksCore.addStyle("button");const CustomOpener=React__namespace.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsxRuntime.jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=aphrodite.StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...wonderBlocksStyles.focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:wonderBlocksTokens.sizing.size_020},disabled:{cursor:"not-allowed"}});
|
|
122
120
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Dropdown variants for Wonder Blocks.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "10.13.
|
|
6
|
+
"version": "10.13.4",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -29,19 +29,20 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@khanacademy/wonder-blocks-announcer": "1.1.2",
|
|
32
|
-
"@khanacademy/wonder-blocks-
|
|
33
|
-
"@khanacademy/wonder-blocks-
|
|
32
|
+
"@khanacademy/wonder-blocks-button": "11.7.13",
|
|
33
|
+
"@khanacademy/wonder-blocks-cell": "6.2.15",
|
|
34
|
+
"@khanacademy/wonder-blocks-clickable": "8.3.2",
|
|
34
35
|
"@khanacademy/wonder-blocks-core": "12.5.0",
|
|
35
|
-
"@khanacademy/wonder-blocks-form": "7.7.
|
|
36
|
-
"@khanacademy/wonder-blocks-icon": "6.0.
|
|
37
|
-
"@khanacademy/wonder-blocks-icon-button": "12.0.
|
|
38
|
-
"@khanacademy/wonder-blocks-modal": "8.9.
|
|
39
|
-
"@khanacademy/wonder-blocks-pill": "3.1.
|
|
40
|
-
"@khanacademy/wonder-blocks-search-field": "5.2.
|
|
41
|
-
"@khanacademy/wonder-blocks-styles": "0.4.
|
|
36
|
+
"@khanacademy/wonder-blocks-form": "7.7.2",
|
|
37
|
+
"@khanacademy/wonder-blocks-icon": "6.0.3",
|
|
38
|
+
"@khanacademy/wonder-blocks-icon-button": "12.0.2",
|
|
39
|
+
"@khanacademy/wonder-blocks-modal": "8.9.2",
|
|
40
|
+
"@khanacademy/wonder-blocks-pill": "3.1.79",
|
|
41
|
+
"@khanacademy/wonder-blocks-search-field": "5.2.2",
|
|
42
|
+
"@khanacademy/wonder-blocks-styles": "0.4.1",
|
|
42
43
|
"@khanacademy/wonder-blocks-timing": "7.1.0",
|
|
43
|
-
"@khanacademy/wonder-blocks-tokens": "18.
|
|
44
|
-
"@khanacademy/wonder-blocks-typography": "5.0.
|
|
44
|
+
"@khanacademy/wonder-blocks-tokens": "18.1.0",
|
|
45
|
+
"@khanacademy/wonder-blocks-typography": "5.0.6"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -57,7 +58,7 @@
|
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
60
|
"@khanacademy/wb-dev-build-settings": "3.3.0",
|
|
60
|
-
"@khanacademy/wonder-blocks-labeled-field": "4.3.
|
|
61
|
+
"@khanacademy/wonder-blocks-labeled-field": "4.3.2"
|
|
61
62
|
},
|
|
62
63
|
"scripts": {
|
|
63
64
|
"build:css": "pnpm exec wonder-blocks-tokens .",
|