@khanacademy/wonder-blocks-dropdown 10.0.6 → 10.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/dist/components/action-item.d.ts +4 -0
- package/dist/es/index.js +5 -5
- package/dist/index.js +5 -5
- package/package.json +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-dropdown
|
|
2
2
|
|
|
3
|
+
## 10.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 668093b: Add missing `wonder-blocks-icon-button` dependency
|
|
8
|
+
- Updated dependencies [c7d95bf]
|
|
9
|
+
- Updated dependencies [668093b]
|
|
10
|
+
- Updated dependencies [668093b]
|
|
11
|
+
- @khanacademy/wonder-blocks-tokens@10.2.0
|
|
12
|
+
- @khanacademy/wonder-blocks-icon-button@10.0.0
|
|
13
|
+
- @khanacademy/wonder-blocks-announcer@1.0.2
|
|
14
|
+
- @khanacademy/wonder-blocks-cell@4.1.14
|
|
15
|
+
- @khanacademy/wonder-blocks-clickable@7.1.2
|
|
16
|
+
- @khanacademy/wonder-blocks-core@12.3.0
|
|
17
|
+
- @khanacademy/wonder-blocks-icon@5.1.4
|
|
18
|
+
- @khanacademy/wonder-blocks-layout@3.1.13
|
|
19
|
+
- @khanacademy/wonder-blocks-modal@7.1.16
|
|
20
|
+
- @khanacademy/wonder-blocks-pill@3.1.14
|
|
21
|
+
- @khanacademy/wonder-blocks-search-field@5.1.16
|
|
22
|
+
- @khanacademy/wonder-blocks-timing@7.0.2
|
|
23
|
+
- @khanacademy/wonder-blocks-typography@3.2.3
|
|
24
|
+
|
|
25
|
+
## 10.1.0
|
|
26
|
+
|
|
27
|
+
### Minor Changes
|
|
28
|
+
|
|
29
|
+
- 96048b6: Adds "active" prop to ActionItem so that it can be marked `aria-current`
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- abf5496: modify form field components to use `semanticColor.input`.
|
|
34
|
+
- Updated dependencies [a1be4c5]
|
|
35
|
+
- Updated dependencies [d00a6f1]
|
|
36
|
+
- Updated dependencies [abf5496]
|
|
37
|
+
- Updated dependencies [812c167]
|
|
38
|
+
- @khanacademy/wonder-blocks-tokens@10.1.0
|
|
39
|
+
- @khanacademy/wonder-blocks-search-field@5.1.15
|
|
40
|
+
- @khanacademy/wonder-blocks-cell@4.1.13
|
|
41
|
+
- @khanacademy/wonder-blocks-clickable@7.1.1
|
|
42
|
+
- @khanacademy/wonder-blocks-layout@3.1.12
|
|
43
|
+
- @khanacademy/wonder-blocks-modal@7.1.15
|
|
44
|
+
- @khanacademy/wonder-blocks-pill@3.1.13
|
|
45
|
+
- @khanacademy/wonder-blocks-typography@3.2.2
|
|
46
|
+
|
|
3
47
|
## 10.0.6
|
|
4
48
|
|
|
5
49
|
### Patch Changes
|
|
@@ -78,6 +78,10 @@ type ActionProps = {
|
|
|
78
78
|
* Optional right accessory to display in the `ActionItem` element.
|
|
79
79
|
*/
|
|
80
80
|
rightAccessory?: CompactCellProps["rightAccessory"];
|
|
81
|
+
/**
|
|
82
|
+
* Optional; applies aria-current to the cell.
|
|
83
|
+
*/
|
|
84
|
+
active?: CompactCellProps["active"];
|
|
81
85
|
};
|
|
82
86
|
type DefaultProps = {
|
|
83
87
|
disabled: ActionProps["disabled"];
|
package/dist/es/index.js
CHANGED
|
@@ -27,13 +27,13 @@ import Pill from '@khanacademy/wonder-blocks-pill';
|
|
|
27
27
|
|
|
28
28
|
const selectDropdownStyle={marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
|
|
29
29
|
|
|
30
|
-
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,testId}=this.props;const defaultStyle=[styles$b.wrapper,style];const labelComponent=typeof label==="string"?jsx(LabelMedium,{lang:lang,style:styles$b.label,children:label}):React.cloneElement(label,{lang,style:styles$b.label,...label.props});return jsx(CompactCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:defaultStyle,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[styles$b.shared,indent&&styles$b.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const actionType$1=semanticColor.action.primary.progressive;const theme$7={actionItem:{color:{hover:{background:actionType$1.hover.background,foreground:actionType$1.hover.foreground},press:{background:actionType$1.press.background,foreground:actionType$1.press.foreground}}}};const styles$b=StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2},[":hover[aria-disabled=false]"]:{color:theme$7.actionItem.color.hover.foreground,background:theme$7.actionItem.color.hover.background},[":active[aria-disabled=false]"]:{color:theme$7.actionItem.color.press.foreground,background:theme$7.actionItem.color.press.background}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:sizing.size_100},label:{whiteSpace:"nowrap",userSelect:"none"},indent:{paddingLeft:spacing.medium_16*2}});
|
|
30
|
+
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,testId,active}=this.props;const defaultStyle=[styles$b.wrapper,style];const labelComponent=typeof label==="string"?jsx(LabelMedium,{lang:lang,style:styles$b.label,children:label}):React.cloneElement(label,{lang,style:styles$b.label,...label.props});return jsx(CompactCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:defaultStyle,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[styles$b.shared,indent&&styles$b.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const actionType$1=semanticColor.action.primary.progressive;const theme$7={actionItem:{color:{hover:{background:actionType$1.hover.background,foreground:actionType$1.hover.foreground},press:{background:actionType$1.press.background,foreground:actionType$1.press.foreground}}}};const styles$b=StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2},[":hover[aria-disabled=false]"]:{color:theme$7.actionItem.color.hover.foreground,background:theme$7.actionItem.color.hover.background},[":active[aria-disabled=false]"]:{color:theme$7.actionItem.color.press.foreground,background:theme$7.actionItem.color.press.background}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:sizing.size_100},label:{whiteSpace:"nowrap",userSelect:"none"},indent:{paddingLeft:spacing.medium_16*2}});
|
|
31
31
|
|
|
32
32
|
const Check=function(props){const{selected}=props;return jsx(PhosphorIcon,{icon:checkIcon,size:"small",style:[styles$a.bounds,!selected&&styles$a.hide]})};const styles$a=StyleSheet.create({bounds:{alignSelf:"center",height:spacing.medium_16,minHeight:spacing.medium_16,minWidth:spacing.medium_16},hide:{visibility:"hidden"}});
|
|
33
33
|
|
|
34
|
-
const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:spacing.small_12,height:spacing.small_12,margin:spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:semanticColor.border
|
|
34
|
+
const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:spacing.small_12,height:spacing.small_12,margin:spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:semanticColor.input.default.border},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background}}}};const styles$9=StyleSheet.create({checkbox:{alignSelf:"center",minHeight:spacing.medium_16,minWidth:spacing.medium_16,height:spacing.medium_16,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:theme$6.checkbox.color.default.border},noBorder:{borderWidth:0},disabledCheckbox:{borderColor:theme$6.checkbox.color.disabled.border,backgroundColor:theme$6.checkbox.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
|
|
35
35
|
|
|
36
|
-
const StyledLi=addStyle("li");class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row"},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),jsx(Strut,{size:spacing.xSmall_8}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsx(LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsx(LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsx(LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2};const actionType=semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:semanticColor.surface.primary,foreground:semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:"transparent",foreground:semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.hover.foreground},press:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.press.foreground},selected:{background:
|
|
36
|
+
const StyledLi=addStyle("li");class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row"},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),jsx(Strut,{size:spacing.xSmall_8}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsx(LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsx(LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsx(LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:border.radius.radius_040,outline:`${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,outlineOffset:-spacing.xxxxSmall_2};const actionType=semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:semanticColor.surface.primary,foreground:semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:"transparent",foreground:semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.hover.foreground},press:{background:semanticColor.surface.primary,foreground:semanticColor.action.secondary.progressive.press.foreground},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}},subtitle:{color:{default:{foreground:semanticColor.text.secondary},hover:{foreground:semanticColor.text.inverse},press:{foreground:semanticColor.text.inverse}}}};const styles$8=StyleSheet.create({reset:{margin:0,padding:0,border:0,background:"none",outline:"none",fontSize:"100%",verticalAlign:"baseline",textAlign:"left",textDecoration:"none",listStyle:"none",cursor:"pointer"},listboxItem:{backgroundColor:"transparent",color:"inherit"},item:{background:theme$5.optionItem.color.default.background,color:theme$5.optionItem.color.default.foreground,minHeight:"unset",":focus":focusedStyle,":focus-visible":{overflow:"visible"},[":hover[aria-disabled=false]"]:{color:theme$5.optionItem.color.hover.foreground,background:theme$5.optionItem.color.hover.background},[":active[aria-selected=false]"]:{},[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},[":is([aria-disabled=true])"]:{color:theme$5.optionItem.color.disabled.foreground,":focus-visible":{outline:"none"}},[":active[aria-disabled=false]"]:{color:theme$5.optionItem.color.press.foreground,background:theme$5.optionItem.color.press.background},[":hover[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.hover.background},[":active[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.press.background},[":hover[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.hover.foreground},[":active[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.press.foreground},[":is([aria-selected=true]) .checkbox"]:{background:theme$5.checkbox.color.selected.background},[":is([aria-selected=true]) .check"]:{color:theme$5.checkbox.color.selected.foreground},[":is([aria-disabled=false]) .subtitle"]:{color:theme$5.subtitle.color.default.foreground},[":hover[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.hover.foreground},[":active[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.press.foreground}},itemFocused:focusedStyle,itemDisabled:{outlineColor:semanticColor.focus.outer},itemContainer:{minHeight:"unset",paddingBlock:spacing.xSmall_8+spacing.xxxxSmall_2,paddingInlineStart:spacing.xSmall_8,paddingInlineEnd:spacing.medium_16,whiteSpace:"nowrap"},label:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
37
37
|
|
|
38
38
|
class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:semanticColor.border.primary}}};const styles$7=StyleSheet.create({separator:{borderTop:`1px solid ${theme$4.separator.color.border}`,height:1,minHeight:1,marginTop:spacing.xxxSmall_4,marginBottom:spacing.xxxSmall_4}});
|
|
39
39
|
|
|
@@ -57,7 +57,7 @@ const StyledButton$1=addStyle("button");class ActionMenuOpenerCore extends React
|
|
|
57
57
|
|
|
58
58
|
class ActionMenu extends React.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}getMenuItems(){const{children,selectedValues}=this.props;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:this.handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:this.handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})}renderOpener(numItems,dropdownId){const{disabled,menuText,opener,testId,id}=this.props;return jsx(Id,{id:id,children:uniqueOpenerId=>jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:this.handleClick,disabled:numItems===0||disabled,text:menuText,ref:this.handleOpenerRef,testId:opener?undefined:testId,opened:this.state.opened,role:"button",children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})})}render(){const{alignment,dropdownStyle,style,className,dropdownId}=this.props;const items=this.getMenuItems();return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:this.renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:this.state.opened,items:items,openerElement:this.openerElement,onOpenChanged:this.handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle]})})}constructor(...args){super(...args),this.state={opened:false},this.handleItemSelected=()=>{this.handleOpenChanged(false);if(this.openerElement){this.openerElement.focus();}},this.handleOpenChanged=opened=>{this.setState({opened});if(this.props.onToggle){this.props.onToggle(opened);}},this.handleOptionSelected=selectedValue=>{const{onChange,selectedValues}=this.props;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]);}this.handleItemSelected();},this.handleOpenerRef=node=>{this.openerElement=ReactDOM.findDOMNode(node);},this.handleClick=e=>{this.handleOpenChanged(!this.state.opened);};}}ActionMenu.defaultProps={alignment:"left",disabled:false};const styles$5=StyleSheet.create({caret:{marginLeft:4},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:-4}});
|
|
59
59
|
|
|
60
|
-
const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?semanticColor.icon.disabled:semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"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:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(LabelMedium,{style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.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,error:false,isPlaceholder:false};const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12,borderWidth:0,borderRadius:border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const
|
|
60
|
+
const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?semanticColor.icon.disabled:semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"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:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(LabelMedium,{style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.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,error:false,isPlaceholder:false};const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12,borderWidth:0,borderRadius:border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.text.secondary:semanticColor.action.secondary.progressive.press.foreground:semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?semanticColor.input.error:semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:border.width.thin,color:placeholder?semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:border.width.thin,paddingLeft:spacing.medium_16,paddingRight:spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":focus-visible":{outlineColor:semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=StyleSheet.create(newStyles);return stateStyles[styleKey]};
|
|
61
61
|
|
|
62
62
|
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}}
|
|
63
63
|
|
|
@@ -77,6 +77,6 @@ const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMulti
|
|
|
77
77
|
|
|
78
78
|
function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsx(View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsx(StandaloneListbox,{...props})}return jsx(View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:semanticColor.action.secondary.disabled.foreground}}}};const styles$1=StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
|
|
79
79
|
|
|
80
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.icon.disabled:startIcon.props.color??semanticColor.icon.primary});return jsx(View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(Fragment,{children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:semanticColor.border
|
|
80
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.icon.disabled:startIcon.props.color??semanticColor.icon.primary});return jsx(View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(Fragment,{children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},focus:{border:semanticColor.focus.outer,background:semanticColor.surface.primary},disabled:semanticColor.input.disabled,error:semanticColor.input.error}},listbox:{color:{default:{background:semanticColor.surface.primary,border:semanticColor.border.primary}}}};const styles=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:border.radius.radius_040,border:`solid ${border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:spacing.xxxSmall_4,top:spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:spacing.xLarge_32+spacing.xSmall_8},iconWrapper:{padding:spacing.xxxSmall_4,minWidth:"auto"}});
|
|
81
81
|
|
|
82
82
|
export { ActionItem, ActionMenu, Combobox, Listbox, MultiSelect, OptionItem, SeparatorItem, SingleSelect };
|
package/dist/index.js
CHANGED
|
@@ -60,13 +60,13 @@ var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
|
|
|
60
60
|
|
|
61
61
|
const selectDropdownStyle={marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
|
|
62
62
|
|
|
63
|
-
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,testId}=this.props;const defaultStyle=[styles$b.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{lang:lang,style:styles$b.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$b.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.CompactCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:defaultStyle,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[styles$b.shared,indent&&styles$b.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const actionType$1=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$7={actionItem:{color:{hover:{background:actionType$1.hover.background,foreground:actionType$1.hover.foreground},press:{background:actionType$1.press.background,foreground:actionType$1.press.foreground}}}};const styles$b=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2},[":hover[aria-disabled=false]"]:{color:theme$7.actionItem.color.hover.foreground,background:theme$7.actionItem.color.hover.background},[":active[aria-disabled=false]"]:{color:theme$7.actionItem.color.press.foreground,background:theme$7.actionItem.color.press.background}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:wonderBlocksTokens.sizing.size_100},label:{whiteSpace:"nowrap",userSelect:"none"},indent:{paddingLeft:wonderBlocksTokens.spacing.medium_16*2}});
|
|
63
|
+
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,testId,active}=this.props;const defaultStyle=[styles$b.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{lang:lang,style:styles$b.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$b.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.CompactCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:defaultStyle,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[styles$b.shared,indent&&styles$b.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick,active:active})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const actionType$1=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$7={actionItem:{color:{hover:{background:actionType$1.hover.background,foreground:actionType$1.hover.foreground},press:{background:actionType$1.press.background,foreground:actionType$1.press.foreground}}}};const styles$b=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2},[":hover[aria-disabled=false]"]:{color:theme$7.actionItem.color.hover.foreground,background:theme$7.actionItem.color.hover.background},[":active[aria-disabled=false]"]:{color:theme$7.actionItem.color.press.foreground,background:theme$7.actionItem.color.press.background}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:wonderBlocksTokens.sizing.size_100},label:{whiteSpace:"nowrap",userSelect:"none"},indent:{paddingLeft:wonderBlocksTokens.spacing.medium_16*2}});
|
|
64
64
|
|
|
65
65
|
const Check=function(props){const{selected}=props;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",style:[styles$a.bounds,!selected&&styles$a.hide]})};const styles$a=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.spacing.medium_16,minHeight:wonderBlocksTokens.spacing.medium_16,minWidth:wonderBlocksTokens.spacing.medium_16},hide:{visibility:"hidden"}});
|
|
66
66
|
|
|
67
|
-
const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.spacing.small_12,height:wonderBlocksTokens.spacing.small_12,margin:wonderBlocksTokens.spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:wonderBlocksTokens.semanticColor.border
|
|
67
|
+
const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.spacing.small_12,height:wonderBlocksTokens.spacing.small_12,margin:wonderBlocksTokens.spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background}}}};const styles$9=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minHeight:wonderBlocksTokens.spacing.medium_16,minWidth:wonderBlocksTokens.spacing.medium_16,height:wonderBlocksTokens.spacing.medium_16,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:theme$6.checkbox.color.default.border},noBorder:{borderWidth:0},disabledCheckbox:{borderColor:theme$6.checkbox.color.disabled.border,backgroundColor:theme$6.checkbox.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
|
|
68
68
|
|
|
69
|
-
const StyledLi=wonderBlocksCore.addStyle("li");class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsxRuntime.jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2};const actionType=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground},press:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},selected:{background:
|
|
69
|
+
const StyledLi=wonderBlocksCore.addStyle("li");class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}renderCell(){const{disabled,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$8.item,style];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsxRuntime.jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2};const actionType=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground},press:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}},subtitle:{color:{default:{foreground:wonderBlocksTokens.semanticColor.text.secondary},hover:{foreground:wonderBlocksTokens.semanticColor.text.inverse},press:{foreground:wonderBlocksTokens.semanticColor.text.inverse}}}};const styles$8=aphrodite.StyleSheet.create({reset:{margin:0,padding:0,border:0,background:"none",outline:"none",fontSize:"100%",verticalAlign:"baseline",textAlign:"left",textDecoration:"none",listStyle:"none",cursor:"pointer"},listboxItem:{backgroundColor:"transparent",color:"inherit"},item:{background:theme$5.optionItem.color.default.background,color:theme$5.optionItem.color.default.foreground,minHeight:"unset",":focus":focusedStyle,":focus-visible":{overflow:"visible"},[":hover[aria-disabled=false]"]:{color:theme$5.optionItem.color.hover.foreground,background:theme$5.optionItem.color.hover.background},[":active[aria-selected=false]"]:{},[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},[":is([aria-disabled=true])"]:{color:theme$5.optionItem.color.disabled.foreground,":focus-visible":{outline:"none"}},[":active[aria-disabled=false]"]:{color:theme$5.optionItem.color.press.foreground,background:theme$5.optionItem.color.press.background},[":hover[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.hover.background},[":active[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.press.background},[":hover[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.hover.foreground},[":active[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.press.foreground},[":is([aria-selected=true]) .checkbox"]:{background:theme$5.checkbox.color.selected.background},[":is([aria-selected=true]) .check"]:{color:theme$5.checkbox.color.selected.foreground},[":is([aria-disabled=false]) .subtitle"]:{color:theme$5.subtitle.color.default.foreground},[":hover[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.hover.foreground},[":active[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.press.foreground}},itemFocused:focusedStyle,itemDisabled:{outlineColor:wonderBlocksTokens.semanticColor.focus.outer},itemContainer:{minHeight:"unset",paddingBlock:wonderBlocksTokens.spacing.xSmall_8+wonderBlocksTokens.spacing.xxxxSmall_2,paddingInlineStart:wonderBlocksTokens.spacing.xSmall_8,paddingInlineEnd:wonderBlocksTokens.spacing.medium_16,whiteSpace:"nowrap"},label:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
|
|
70
70
|
|
|
71
71
|
class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:wonderBlocksTokens.semanticColor.border.primary}}};const styles$7=aphrodite.StyleSheet.create({separator:{borderTop:`1px solid ${theme$4.separator.color.border}`,height:1,minHeight:1,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,marginBottom:wonderBlocksTokens.spacing.xxxSmall_4}});
|
|
72
72
|
|
|
@@ -90,7 +90,7 @@ const StyledButton$1=wonderBlocksCore.addStyle("button");class ActionMenuOpenerC
|
|
|
90
90
|
|
|
91
91
|
class ActionMenu extends React__namespace.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}getMenuItems(){const{children,selectedValues}=this.props;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:this.handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:this.handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})}renderOpener(numItems,dropdownId){const{disabled,menuText,opener,testId,id}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:this.handleClick,disabled:numItems===0||disabled,text:menuText,ref:this.handleOpenerRef,testId:opener?undefined:testId,opened:this.state.opened,role:"button",children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})})}render(){const{alignment,dropdownStyle,style,className,dropdownId}=this.props;const items=this.getMenuItems();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:this.renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:this.state.opened,items:items,openerElement:this.openerElement,onOpenChanged:this.handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle]})})}constructor(...args){super(...args),this.state={opened:false},this.handleItemSelected=()=>{this.handleOpenChanged(false);if(this.openerElement){this.openerElement.focus();}},this.handleOpenChanged=opened=>{this.setState({opened});if(this.props.onToggle){this.props.onToggle(opened);}},this.handleOptionSelected=selectedValue=>{const{onChange,selectedValues}=this.props;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]);}this.handleItemSelected();},this.handleOpenerRef=node=>{this.openerElement=ReactDOM__namespace.findDOMNode(node);},this.handleClick=e=>{this.handleOpenChanged(!this.state.opened);};}}ActionMenu.defaultProps={alignment:"left",disabled:false};const styles$5=aphrodite.StyleSheet.create({caret:{marginLeft:4},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:-4}});
|
|
92
92
|
|
|
93
|
-
const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"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:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.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,error:false,isPlaceholder:false};const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12,borderWidth:0,borderRadius:wonderBlocksTokens.border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:wonderBlocksTokens.spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const
|
|
93
|
+
const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"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:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.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,error:false,isPlaceholder:false};const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12,borderWidth:0,borderRadius:wonderBlocksTokens.border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:wonderBlocksTokens.spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const actionType=error?"destructive":"progressive";const action=wonderBlocksTokens.semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:wonderBlocksTokens.border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:wonderBlocksTokens.semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.text.secondary:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground:wonderBlocksTokens.semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=aphrodite.StyleSheet.create(newStyles);return stateStyles[styleKey]};
|
|
94
94
|
|
|
95
95
|
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}}
|
|
96
96
|
|
|
@@ -110,7 +110,7 @@ const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,f
|
|
|
110
110
|
|
|
111
111
|
function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React__namespace.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:uniqueId,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsxRuntime.jsx(StandaloneListbox,{...props})}return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:id,style:[styles$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const theme$1={listbox:{color:{disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}}};const styles$1=aphrodite.StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
|
|
112
112
|
|
|
113
|
-
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:startIcon.props.color??wonderBlocksTokens.semanticColor.icon.primary});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:wonderBlocksTokens.semanticColor.border.strong,background:wonderBlocksTokens.semanticColor.surface.primary},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,background:wonderBlocksTokens.semanticColor.surface.primary},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background,foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background,foreground:wonderBlocksTokens.semanticColor.text.primary}}},listbox:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}}};const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:wonderBlocksTokens.spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:wonderBlocksTokens.spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:wonderBlocksTokens.spacing.xLarge_32+wonderBlocksTokens.spacing.xSmall_8},iconWrapper:{padding:wonderBlocksTokens.spacing.xxxSmall_4,minWidth:"auto"}});
|
|
113
|
+
function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value=""}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemove=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:startIcon.props.color??wonderBlocksTokens.semanticColor.icon.primary});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemove,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:styles.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,styles.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"small",style:[styles.button,openState&&styles.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,style:[styles.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}],horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const theme={combobox:{color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,background:wonderBlocksTokens.semanticColor.surface.primary},disabled:wonderBlocksTokens.semanticColor.input.disabled,error:wonderBlocksTokens.semanticColor.input.error}},listbox:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}}};const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:wonderBlocksTokens.spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:wonderBlocksTokens.spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:wonderBlocksTokens.spacing.xLarge_32+wonderBlocksTokens.spacing.xSmall_8},iconWrapper:{padding:wonderBlocksTokens.spacing.xxxSmall_4,minWidth:"auto"}});
|
|
114
114
|
|
|
115
115
|
exports.ActionItem = ActionItem;
|
|
116
116
|
exports.ActionMenu = ActionMenu;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-dropdown",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.1.1",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Dropdown variants for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,17 +13,18 @@
|
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@khanacademy/wonder-blocks-announcer": "1.0.2",
|
|
16
|
-
"@khanacademy/wonder-blocks-cell": "4.1.
|
|
17
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
16
|
+
"@khanacademy/wonder-blocks-cell": "4.1.14",
|
|
17
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.2",
|
|
18
18
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
19
19
|
"@khanacademy/wonder-blocks-icon": "5.1.4",
|
|
20
|
-
"@khanacademy/wonder-blocks-
|
|
21
|
-
"@khanacademy/wonder-blocks-
|
|
22
|
-
"@khanacademy/wonder-blocks-
|
|
23
|
-
"@khanacademy/wonder-blocks-
|
|
20
|
+
"@khanacademy/wonder-blocks-icon-button": "10.0.0",
|
|
21
|
+
"@khanacademy/wonder-blocks-layout": "3.1.13",
|
|
22
|
+
"@khanacademy/wonder-blocks-modal": "7.1.16",
|
|
23
|
+
"@khanacademy/wonder-blocks-pill": "3.1.14",
|
|
24
|
+
"@khanacademy/wonder-blocks-search-field": "5.1.16",
|
|
24
25
|
"@khanacademy/wonder-blocks-timing": "7.0.2",
|
|
25
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
26
|
-
"@khanacademy/wonder-blocks-typography": "3.2.
|
|
26
|
+
"@khanacademy/wonder-blocks-tokens": "10.2.0",
|
|
27
|
+
"@khanacademy/wonder-blocks-typography": "3.2.3"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
29
30
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
"react-window": "^1.8.11"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@khanacademy/wb-dev-build-settings": "3.
|
|
42
|
+
"@khanacademy/wb-dev-build-settings": "3.1.0"
|
|
42
43
|
},
|
|
43
44
|
"scripts": {
|
|
44
45
|
"test": "echo \"Error: no test specified\" && exit 1"
|