@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.
Files changed (40) hide show
  1. package/CHANGELOG.json +165 -21
  2. package/CHANGELOG.md +46 -12
  3. package/dist/react-switch.d.ts +12 -17
  4. package/lib/Switch.js.map +1 -1
  5. package/lib/components/Switch/Switch.js +6 -6
  6. package/lib/components/Switch/Switch.js.map +1 -1
  7. package/lib/components/Switch/Switch.types.d.ts +10 -9
  8. package/lib/components/Switch/Switch.types.js.map +1 -1
  9. package/lib/components/Switch/index.js.map +1 -1
  10. package/lib/components/Switch/renderSwitch.d.ts +1 -1
  11. package/lib/components/Switch/renderSwitch.js +9 -4
  12. package/lib/components/Switch/renderSwitch.js.map +1 -1
  13. package/lib/components/Switch/useSwitch.d.ts +2 -6
  14. package/lib/components/Switch/useSwitch.js +1 -6
  15. package/lib/components/Switch/useSwitch.js.map +1 -1
  16. package/lib/components/Switch/useSwitchState.js +1 -1
  17. package/lib/components/Switch/useSwitchState.js.map +1 -1
  18. package/lib/components/Switch/useSwitchStyles.d.ts +1 -1
  19. package/lib/components/Switch/useSwitchStyles.js +10 -24
  20. package/lib/components/Switch/useSwitchStyles.js.map +1 -1
  21. package/lib/index.js.map +1 -1
  22. package/lib-commonjs/Switch.js.map +1 -1
  23. package/lib-commonjs/components/Switch/Switch.js +3 -3
  24. package/lib-commonjs/components/Switch/Switch.js.map +1 -1
  25. package/lib-commonjs/components/Switch/Switch.types.d.ts +10 -9
  26. package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
  27. package/lib-commonjs/components/Switch/index.js.map +1 -1
  28. package/lib-commonjs/components/Switch/renderSwitch.d.ts +1 -1
  29. package/lib-commonjs/components/Switch/renderSwitch.js +11 -7
  30. package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
  31. package/lib-commonjs/components/Switch/useSwitch.d.ts +2 -6
  32. package/lib-commonjs/components/Switch/useSwitch.js +4 -9
  33. package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
  34. package/lib-commonjs/components/Switch/useSwitchState.js +1 -1
  35. package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
  36. package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +1 -1
  37. package/lib-commonjs/components/Switch/useSwitchStyles.js +25 -38
  38. package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
  39. package/lib-commonjs/index.js.map +1 -1
  40. 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":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourceRoot":""}
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-nightly442708a36520211209.1",
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": "start-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-make-styles": "0.0.0-nightly442708a36520211209.1",
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-make-styles": "0.0.0-nightly442708a36520211209.1",
48
- "@fluentui/react-shared-contexts": "0.0.0-nightly442708a36520211209.1",
49
- "@fluentui/react-tabster": "0.0.0-nightly442708a36520211209.1",
50
- "@fluentui/react-utilities": "0.0.0-nightly442708a36520211209.1",
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": {