@fluentui/react-switch 0.0.0-nightly442708a36520211209.1 → 0.0.0-nightly49d3df438d20220225.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.json +165 -21
- package/CHANGELOG.md +46 -12
- package/dist/react-switch.d.ts +12 -17
- package/lib/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.js +6 -6
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.d.ts +10 -9
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.d.ts +1 -1
- package/lib/components/Switch/renderSwitch.js +9 -4
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.d.ts +2 -6
- package/lib/components/Switch/useSwitch.js +1 -6
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchState.js +1 -1
- package/lib/components/Switch/useSwitchState.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +1 -1
- package/lib/components/Switch/useSwitchStyles.js +10 -24
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +3 -3
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.d.ts +10 -9
- package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +11 -7
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.d.ts +2 -6
- package/lib-commonjs/components/Switch/useSwitch.js +4 -9
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchState.js +1 -1
- package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +25 -38
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -9
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SwitchState } from './Switch.types';\n\nexport const switchClassName = 'fui-Switch';\nconst trackClassName = `${switchClassName}-track`;\nconst thumbClassName = `${switchClassName}-thumb`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\n '--switch-checked-opacity': '0',\n '--switch-unchecked-opacity': '0',\n\n position: 'relative',\n width: 'var(--switch-width)',\n height: 'var(--switch-height)',\n display: 'inline-block',\n userSelect: 'none',\n touchAction: 'none',\n verticalAlign: 'bottom',\n },\n\n unchecked: {\n [`:hover .${thumbClassName}`]: {\n ':before': {\n backgroundColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n [`:hover .${trackClassName}`]: {\n ':before': {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n },\n\n checked: {\n [`:hover .${trackClassName}`]: {\n ':after': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n },\n\n [`:active .${trackClassName}`]: {\n ':after': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n\n enabled: {\n '-webkit-tap-highlight-color': 'rgba(0,0,0,0)',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n pointerEvents: 'none',\n },\n\n focusIndicator: createFocusOutlineStyle({ selector: 'focus-within', style: { outlineOffset: '8px' } }),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n transitionProperty: 'backgroundColor',\n transitionDuration: '0.1s',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n touchAction: 'none',\n pointerEvents: 'none',\n\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n boxSizing: 'border-box',\n ...shorthands.borderRadius('999px'),\n content: \"''\",\n opacity: 'var(--switch-unchecked-opacity)',\n },\n\n ':after': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n boxSizing: 'border-box',\n ...shorthands.borderRadius('999px'),\n content: \"''\",\n opacity: 'var(--switch-checked-opacity)',\n },\n },\n\n unchecked: {\n ':before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n backgroundColor: 'transparent',\n },\n },\n\n checked: {\n ':after': {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderStyle('none'),\n },\n },\n\n disabledUnchecked: {\n ':before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n },\n },\n\n disabledChecked: {\n ':after': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n },\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: {\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n touchAction: 'none',\n pointerEvents: 'none',\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n top: '50%',\n transform: 'translate(-50%, -50%)',\n transitionProperty: 'backgroundColor',\n transitionDuration: '0.1s',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n touchAction: 'none',\n pointerEvents: 'none',\n\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: \"''\",\n opacity: 'var(--switch-unchecked-opacity)',\n },\n\n ':after': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n content: \"''\",\n opacity: 'var(--switch-checked-opacity)',\n },\n },\n\n unchecked: {\n ':before': {\n backgroundColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n checked: {\n ':after': {\n backgroundColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n disabledUnchecked: {\n ':before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n },\n\n disabledChecked: {\n ':after': {\n backgroundColor: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/**\n * Styles for the activeRail slot\n */\nconst useActiveRailStyles = makeStyles({\n activeRail: {\n position: 'absolute',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n },\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n position: 'absolute',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n width: '100%',\n height: '100%',\n touchAction: 'none',\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const { checked, disabled } = state.input;\n\n const rootStyles = useRootStyles();\n const trackStyles = useTrackStyles();\n const thumbWrapperStyles = useThumbWrapperStyles();\n const thumbStyles = useThumbStyles();\n const activeRailStyles = useActiveRailStyles();\n const inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n switchClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && rootStyles.checked,\n !disabled && rootStyles.unchecked,\n disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && trackStyles.checked,\n !disabled && trackStyles.unchecked,\n disabled && trackStyles.disabledChecked,\n disabled && trackStyles.disabledUnchecked,\n state.track.className,\n );\n\n state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);\n\n state.thumb.className = mergeClasses(\n thumbClassName,\n thumbStyles.thumb,\n !disabled && thumbStyles.checked,\n !disabled && thumbStyles.unchecked,\n disabled && thumbStyles.disabledChecked,\n disabled && thumbStyles.disabledUnchecked,\n state.thumb.className,\n );\n\n state.activeRail.className = mergeClasses(activeRailStyles.activeRail, state.activeRail.className);\n\n state.input.className = mergeClasses(inputStyles.input, state.input.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourcesContent":["export {};\nexport * from './Switch';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-nightly49d3df438d20220225.1",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -22,15 +22,13 @@
|
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
24
|
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-switch/src && yarn docs",
|
25
|
-
"storybook": "
|
25
|
+
"storybook": "node ../../scripts/storybook/runner",
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
27
27
|
},
|
28
28
|
"devDependencies": {
|
29
|
-
"@fluentui/babel-make-styles": "0.0.0-nightly442708a36520211209.1",
|
30
29
|
"@fluentui/eslint-plugin": "*",
|
31
|
-
"@fluentui/jest-serializer-make-styles": "0.0.0-nightly442708a36520211209.1",
|
32
30
|
"@fluentui/react-conformance": "*",
|
33
|
-
"@fluentui/react-conformance-
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly49d3df438d20220225.1",
|
34
32
|
"@fluentui/scripts": "^1.0.0",
|
35
33
|
"@types/enzyme": "3.10.3",
|
36
34
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
@@ -44,10 +42,11 @@
|
|
44
42
|
"react-test-renderer": "^16.3.0"
|
45
43
|
},
|
46
44
|
"dependencies": {
|
47
|
-
"@fluentui/react-
|
48
|
-
"@fluentui/react-
|
49
|
-
"@fluentui/react-
|
50
|
-
"@fluentui/react-utilities": "0.0.0-
|
45
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly49d3df438d20220225.1",
|
46
|
+
"@fluentui/react-tabster": "0.0.0-nightly49d3df438d20220225.1",
|
47
|
+
"@fluentui/react-theme": "0.0.0-nightly49d3df438d20220225.1",
|
48
|
+
"@fluentui/react-utilities": "0.0.0-nightly49d3df438d20220225.1",
|
49
|
+
"@griffel/react": "1.0.0",
|
51
50
|
"tslib": "^2.1.0"
|
52
51
|
},
|
53
52
|
"peerDependencies": {
|