@khanacademy/wonder-blocks-switch 3.3.26 → 3.3.28
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 +16 -0
- package/dist/components/switch.d.ts +3 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-switch@3.3.
|
|
2
|
+
> @khanacademy/wonder-blocks-switch@3.3.28 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch
|
|
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-switch/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-switch
|
|
2
2
|
|
|
3
|
+
## 3.3.28
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 12e04c3: Update component documentation for the `disabled` props to include details about `aria-disabled` being set internally to keep an element focusable while in a disabled state
|
|
8
|
+
|
|
9
|
+
## 3.3.27
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 8bb7ada: Update color tokens to use semanticColor.core.foreground.instructive changes
|
|
14
|
+
- Updated dependencies [8bb7ada]
|
|
15
|
+
- @khanacademy/wonder-blocks-tokens@15.0.0
|
|
16
|
+
- @khanacademy/wonder-blocks-icon@5.3.7
|
|
17
|
+
- @khanacademy/wonder-blocks-styles@0.2.38
|
|
18
|
+
|
|
3
19
|
## 3.3.26
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -8,6 +8,9 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-labe
|
|
|
8
8
|
checked: boolean;
|
|
9
9
|
/**
|
|
10
10
|
* Whether the switch is disabled. Defaults to `false`.
|
|
11
|
+
*
|
|
12
|
+
* Internally, the `aria-disabled` attribute will be set so that the
|
|
13
|
+
* element remains focusable and will be included in the tab order.
|
|
11
14
|
*/
|
|
12
15
|
disabled?: boolean;
|
|
13
16
|
/**
|
package/dist/es/index.js
CHANGED
|
@@ -10,6 +10,6 @@ var themeDefault = {root:{border:{radius:{default:border.radius.radius_120,hover
|
|
|
10
10
|
|
|
11
11
|
var theme = mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
12
12
|
|
|
13
|
-
const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const focusStylesObject=focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:semanticColor.core.border.neutral.strong,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.core.foreground.knockout.default,off:semanticColor.core.foreground.knockout.default},icon:{on:semanticColor.core.foreground.instructive.
|
|
13
|
+
const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const focusStylesObject=focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:semanticColor.core.border.neutral.strong,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.core.foreground.knockout.default,off:semanticColor.core.foreground.knockout.default},icon:{on:semanticColor.core.foreground.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.foreground.disabled.default}}}};const sharedStyles=StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxs(View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=StyleSheet.create(newStyles);return styles[checkedStyle]};
|
|
14
14
|
|
|
15
15
|
export { Switch as default };
|
package/dist/index.js
CHANGED
|
@@ -31,6 +31,6 @@ var themeDefault = {root:{border:{radius:{default:wonderBlocksTokens.border.radi
|
|
|
31
31
|
|
|
32
32
|
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
33
33
|
|
|
34
|
-
const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.semanticColor.core.border.neutral.strong,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.core.foreground.knockout.default,off:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},icon:{on:wonderBlocksTokens.semanticColor.core.foreground.instructive.
|
|
34
|
+
const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.semanticColor.core.border.neutral.strong,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.core.foreground.knockout.default,off:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},icon:{on:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.foreground.disabled.default}}}};const sharedStyles=aphrodite.StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React__namespace.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React__namespace.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsxRuntime.jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsxRuntime.jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=aphrodite.StyleSheet.create(newStyles);return styles[checkedStyle]};
|
|
35
35
|
|
|
36
36
|
module.exports = Switch;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Switch components for Wonder Blocks.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "3.3.
|
|
6
|
+
"version": "3.3.28",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@khanacademy/wonder-blocks-core": "12.4.3",
|
|
32
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
33
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
32
|
+
"@khanacademy/wonder-blocks-icon": "5.3.7",
|
|
33
|
+
"@khanacademy/wonder-blocks-styles": "0.2.38",
|
|
34
34
|
"@khanacademy/wonder-blocks-theming": "4.0.2",
|
|
35
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
35
|
+
"@khanacademy/wonder-blocks-tokens": "15.0.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"aphrodite": "^1.2.5",
|