@khanacademy/wonder-blocks-dropdown 10.2.7 → 10.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +34 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +12 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-dropdown@10.2.
|
|
2
|
+
> @khanacademy/wonder-blocks-dropdown@10.2.9 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-dropdown
|
|
2
2
|
|
|
3
|
+
## 10.2.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [e934f20]
|
|
8
|
+
- @khanacademy/wonder-blocks-form@7.3.0
|
|
9
|
+
- @khanacademy/wonder-blocks-search-field@5.1.36
|
|
10
|
+
|
|
11
|
+
## 10.2.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 956f8bd: Replaces instances of `semanticColor.text` with `semanticColor.core.foreground`
|
|
16
|
+
- Updated dependencies [956f8bd]
|
|
17
|
+
- Updated dependencies [eafcfa3]
|
|
18
|
+
- Updated dependencies [eafcfa3]
|
|
19
|
+
- Updated dependencies [fc6e4b7]
|
|
20
|
+
- Updated dependencies [956f8bd]
|
|
21
|
+
- Updated dependencies [956f8bd]
|
|
22
|
+
- Updated dependencies [eafcfa3]
|
|
23
|
+
- Updated dependencies [b42b694]
|
|
24
|
+
- Updated dependencies [956f8bd]
|
|
25
|
+
- @khanacademy/wonder-blocks-form@7.2.5
|
|
26
|
+
- @khanacademy/wonder-blocks-tokens@12.0.0
|
|
27
|
+
- @khanacademy/wonder-blocks-search-field@5.1.35
|
|
28
|
+
- @khanacademy/wonder-blocks-modal@8.1.7
|
|
29
|
+
- @khanacademy/wonder-blocks-styles@0.2.25
|
|
30
|
+
- @khanacademy/wonder-blocks-cell@5.0.6
|
|
31
|
+
- @khanacademy/wonder-blocks-clickable@7.1.18
|
|
32
|
+
- @khanacademy/wonder-blocks-icon@5.2.12
|
|
33
|
+
- @khanacademy/wonder-blocks-icon-button@10.3.13
|
|
34
|
+
- @khanacademy/wonder-blocks-pill@3.1.33
|
|
35
|
+
- @khanacademy/wonder-blocks-typography@4.2.14
|
|
36
|
+
|
|
3
37
|
## 10.2.7
|
|
4
38
|
|
|
5
39
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -65,7 +65,7 @@ class ActionMenuOpenerCore extends React.Component{render(){const{children,disab
|
|
|
65
65
|
|
|
66
66
|
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:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${sizing.size_040})`}});
|
|
67
67
|
|
|
68
|
-
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.core.foreground.disabled.default:theme$3.opener.color.icon;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(BodyText,{tag:"span",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.
|
|
68
|
+
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.core.foreground.disabled.default:theme$3.opener.color.icon;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(BodyText,{tag:"span",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.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?semanticColor.input.default.placeholder:semanticColor.core.foreground.instructive.default:semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?semanticColor.input.error:semanticColor.input.default;const disabledStatesStyles={background:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:border.width.thin,color:placeholder?semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},press:pressStyling};stateStyles[styleKey]=StyleSheet.create(newStyles);return stateStyles[styleKey]};
|
|
69
69
|
|
|
70
70
|
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}}
|
|
71
71
|
|
package/dist/index.js
CHANGED
|
@@ -98,7 +98,7 @@ class ActionMenuOpenerCore extends React__namespace.Component{render(){const{chi
|
|
|
98
98
|
|
|
99
99
|
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:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
|
|
100
100
|
|
|
101
|
-
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.core.foreground.disabled.default:theme$3.opener.color.icon;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.BodyText,{tag:"span",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.
|
|
101
|
+
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.core.foreground.disabled.default:theme$3.opener.color.icon;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.BodyText,{tag:"span",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.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{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 hoverStyling={borderColor:action.hover.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.hover.border}`};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.input.default.placeholder:wonderBlocksTokens.semanticColor.core.foreground.instructive.default:wonderBlocksTokens.semanticColor.input.default.foreground,borderColor:action.press.border,boxShadow:`inset 0 0 0 ${wonderBlocksTokens.border.width.thin} ${action.press.border}`,borderRadius:theme$3.opener.border.radius.press};const currentState=error?wonderBlocksTokens.semanticColor.input.error:wonderBlocksTokens.semanticColor.input.default;const disabledStatesStyles={background:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:theme$3.opener.border.radius.rest,color:wonderBlocksTokens.semanticColor.input.disabled.placeholder};const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:error?theme$3.opener.border.width.error:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle:currentState.foreground,cursor:"pointer",":hover":hoverStyling,["@media not (hover: hover)"]:{":hover":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd}},":active":pressStyling,...wonderBlocksStyles.focusStyles.focus},disabled:{...disabledStatesStyles,cursor:"not-allowed",":hover":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":active":{...disabledStatesStyles,outline:"none",boxShadow:"none"},":focus-visible":disabledStatesStyles},press:pressStyling};stateStyles[styleKey]=aphrodite.StyleSheet.create(newStyles);return stateStyles[styleKey]};
|
|
102
102
|
|
|
103
103
|
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}}
|
|
104
104
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-dropdown",
|
|
3
|
-
"version": "10.2.
|
|
3
|
+
"version": "10.2.9",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Dropdown variants for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -21,19 +21,19 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@khanacademy/wonder-blocks-announcer": "1.0.2",
|
|
24
|
-
"@khanacademy/wonder-blocks-cell": "5.0.
|
|
25
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
24
|
+
"@khanacademy/wonder-blocks-cell": "5.0.6",
|
|
25
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.18",
|
|
26
26
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
27
|
-
"@khanacademy/wonder-blocks-form": "7.
|
|
28
|
-
"@khanacademy/wonder-blocks-icon": "5.2.
|
|
29
|
-
"@khanacademy/wonder-blocks-icon-button": "10.3.
|
|
30
|
-
"@khanacademy/wonder-blocks-modal": "8.1.
|
|
31
|
-
"@khanacademy/wonder-blocks-pill": "3.1.
|
|
32
|
-
"@khanacademy/wonder-blocks-search-field": "5.1.
|
|
33
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
27
|
+
"@khanacademy/wonder-blocks-form": "7.3.0",
|
|
28
|
+
"@khanacademy/wonder-blocks-icon": "5.2.12",
|
|
29
|
+
"@khanacademy/wonder-blocks-icon-button": "10.3.13",
|
|
30
|
+
"@khanacademy/wonder-blocks-modal": "8.1.7",
|
|
31
|
+
"@khanacademy/wonder-blocks-pill": "3.1.33",
|
|
32
|
+
"@khanacademy/wonder-blocks-search-field": "5.1.36",
|
|
33
|
+
"@khanacademy/wonder-blocks-styles": "0.2.25",
|
|
34
34
|
"@khanacademy/wonder-blocks-timing": "7.0.2",
|
|
35
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
36
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
35
|
+
"@khanacademy/wonder-blocks-tokens": "12.0.0",
|
|
36
|
+
"@khanacademy/wonder-blocks-typography": "4.2.14"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@phosphor-icons/core": "^2.0.2",
|