@fluentui/react-switch 9.0.0-alpha.7 → 9.0.0-beta.2

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 (66) hide show
  1. package/CHANGELOG.json +633 -10
  2. package/CHANGELOG.md +185 -11
  3. package/dist/react-switch.d.ts +7 -2
  4. package/lib/Switch.js.map +1 -1
  5. package/lib/common/isConformant.js.map +1 -1
  6. package/lib/components/Switch/Switch.d.ts +2 -2
  7. package/lib/components/Switch/Switch.js.map +1 -1
  8. package/lib/components/Switch/Switch.types.d.ts +5 -1
  9. package/lib/components/Switch/Switch.types.js.map +1 -1
  10. package/lib/components/Switch/index.js.map +1 -1
  11. package/lib/components/Switch/renderSwitch.js +1 -1
  12. package/lib/components/Switch/renderSwitch.js.map +1 -1
  13. package/lib/components/Switch/useSwitch.js +6 -1
  14. package/lib/components/Switch/useSwitch.js.map +1 -1
  15. package/lib/components/Switch/useSwitchState.js +125 -19
  16. package/lib/components/Switch/useSwitchState.js.map +1 -1
  17. package/lib/components/Switch/useSwitchStyles.js +186 -95
  18. package/lib/components/Switch/useSwitchStyles.js.map +1 -1
  19. package/lib/index.js.map +1 -1
  20. package/lib-commonjs/Switch.js.map +1 -1
  21. package/lib-commonjs/common/isConformant.js.map +1 -1
  22. package/lib-commonjs/components/Switch/Switch.d.ts +2 -2
  23. package/lib-commonjs/components/Switch/Switch.js.map +1 -1
  24. package/lib-commonjs/components/Switch/Switch.types.d.ts +5 -1
  25. package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
  26. package/lib-commonjs/components/Switch/index.js.map +1 -1
  27. package/lib-commonjs/components/Switch/renderSwitch.js +1 -1
  28. package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
  29. package/lib-commonjs/components/Switch/useSwitch.js +6 -1
  30. package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
  31. package/lib-commonjs/components/Switch/useSwitchState.js +124 -18
  32. package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
  33. package/lib-commonjs/components/Switch/useSwitchStyles.js +185 -94
  34. package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
  35. package/lib-commonjs/index.js.map +1 -1
  36. package/package.json +12 -12
  37. package/lib-amd/Switch.d.ts +0 -1
  38. package/lib-amd/Switch.js +0 -6
  39. package/lib-amd/Switch.js.map +0 -1
  40. package/lib-amd/common/isConformant.d.ts +0 -4
  41. package/lib-amd/common/isConformant.js +0 -16
  42. package/lib-amd/common/isConformant.js.map +0 -1
  43. package/lib-amd/components/Switch/Switch.d.ts +0 -6
  44. package/lib-amd/components/Switch/Switch.js +0 -15
  45. package/lib-amd/components/Switch/Switch.js.map +0 -1
  46. package/lib-amd/components/Switch/Switch.types.d.ts +0 -54
  47. package/lib-amd/components/Switch/Switch.types.js +0 -5
  48. package/lib-amd/components/Switch/Switch.types.js.map +0 -1
  49. package/lib-amd/components/Switch/index.d.ts +0 -5
  50. package/lib-amd/components/Switch/index.js +0 -10
  51. package/lib-amd/components/Switch/index.js.map +0 -1
  52. package/lib-amd/components/Switch/renderSwitch.d.ts +0 -5
  53. package/lib-amd/components/Switch/renderSwitch.js +0 -18
  54. package/lib-amd/components/Switch/renderSwitch.js.map +0 -1
  55. package/lib-amd/components/Switch/useSwitch.d.ts +0 -10
  56. package/lib-amd/components/Switch/useSwitch.js +0 -42
  57. package/lib-amd/components/Switch/useSwitch.js.map +0 -1
  58. package/lib-amd/components/Switch/useSwitchState.d.ts +0 -2
  59. package/lib-amd/components/Switch/useSwitchState.js +0 -44
  60. package/lib-amd/components/Switch/useSwitchState.js.map +0 -1
  61. package/lib-amd/components/Switch/useSwitchStyles.d.ts +0 -5
  62. package/lib-amd/components/Switch/useSwitchStyles.js +0 -161
  63. package/lib-amd/components/Switch/useSwitchStyles.js.map +0 -1
  64. package/lib-amd/index.d.ts +0 -2
  65. package/lib-amd/index.js +0 -6
  66. package/lib-amd/index.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\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: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundHover,\n },\n\n ':active .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundPressed,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.brandBackground,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.transparentStrokeDisabled}`,\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\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 transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (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 inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : 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 && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
@@ -1 +1 @@
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/"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-switch",
3
- "version": "9.0.0-alpha.7",
3
+ "version": "9.0.0-beta.2",
4
4
  "description": "Fluent UI React Switch component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -25,14 +25,14 @@
25
25
  "storybook": "start-storybook"
26
26
  },
27
27
  "devDependencies": {
28
- "@fluentui/babel-make-styles": "9.0.0-alpha.51",
28
+ "@fluentui/babel-make-styles": "9.0.0-beta.1",
29
29
  "@fluentui/eslint-plugin": "*",
30
- "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.44",
30
+ "@fluentui/jest-serializer-make-styles": "9.0.0-beta.1",
31
31
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-make-styles": "9.0.0-alpha.13",
33
- "@fluentui/react-label": "9.0.0-alpha.42",
34
- "@fluentui/react-provider": "9.0.0-alpha.80",
35
- "@fluentui/react-theme": "9.0.0-alpha.23",
32
+ "@fluentui/react-conformance-make-styles": "9.0.0-beta.1",
33
+ "@fluentui/react-label": "9.0.0-beta.1",
34
+ "@fluentui/react-provider": "9.0.0-beta.2",
35
+ "@fluentui/react-theme": "9.0.0-beta.1",
36
36
  "@fluentui/scripts": "^1.0.0",
37
37
  "@types/enzyme": "3.10.3",
38
38
  "@types/enzyme-adapter-react-16": "1.0.3",
@@ -46,10 +46,10 @@
46
46
  "react-test-renderer": "^16.3.0"
47
47
  },
48
48
  "dependencies": {
49
- "@fluentui/react-make-styles": "9.0.0-alpha.69",
50
- "@fluentui/react-shared-contexts": "9.0.0-alpha.25",
51
- "@fluentui/react-tabster": "9.0.0-alpha.63",
52
- "@fluentui/react-utilities": "9.0.0-alpha.49",
49
+ "@fluentui/react-make-styles": "9.0.0-beta.1",
50
+ "@fluentui/react-shared-contexts": "9.0.0-beta.1",
51
+ "@fluentui/react-tabster": "9.0.0-beta.2",
52
+ "@fluentui/react-utilities": "9.0.0-beta.1",
53
53
  "tslib": "^2.1.0"
54
54
  },
55
55
  "peerDependencies": {
@@ -59,7 +59,7 @@
59
59
  "react-dom": ">=16.8.0 <18.0.0"
60
60
  },
61
61
  "beachball": {
62
- "tag": "alpha",
62
+ "tag": "beta",
63
63
  "disallowedChangeTypes": [
64
64
  "major",
65
65
  "minor",
@@ -1 +0,0 @@
1
- export * from './components/Switch/index';
package/lib-amd/Switch.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./components/Switch/index"], function (require, exports, tslib_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(index_1, exports);
5
- });
6
- //# sourceMappingURL=Switch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Switch.js","sourceRoot":"../src/","sources":["Switch.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Switch/index';\n"]}
@@ -1,4 +0,0 @@
1
- import type { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,16 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-conformance", "@fluentui/react-conformance-make-styles"], function (require, exports, react_conformance_1, react_conformance_make_styles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.isConformant = void 0;
5
- function isConformant(testInfo) {
6
- var defaultOptions = {
7
- asPropHandlesRef: true,
8
- componentPath: module.parent.filename.replace('.test', ''),
9
- extraTests: react_conformance_make_styles_1.default,
10
- skipAsPropTests: true,
11
- };
12
- react_conformance_1.isConformant(defaultOptions, testInfo);
13
- }
14
- exports.isConformant = isConformant;
15
- });
16
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,UAAU,EAAE,uCAAqC;YACjD,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAXD,oCAWC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n extraTests: makeStylesTests as TestObject<TProps>,\n skipAsPropTests: true,\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import type { SwitchProps } from './Switch.types';
3
- /**
4
- * The Switch control enables users to trigger an option on or off through pressing on the component.
5
- */
6
- export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "react", "./useSwitch", "./renderSwitch", "./useSwitchStyles"], function (require, exports, React, useSwitch_1, renderSwitch_1, useSwitchStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.Switch = void 0;
5
- /**
6
- * The Switch control enables users to trigger an option on or off through pressing on the component.
7
- */
8
- exports.Switch = React.forwardRef(function (props, ref) {
9
- var state = useSwitch_1.useSwitch(props, ref);
10
- useSwitchStyles_1.useSwitchStyles(state);
11
- return renderSwitch_1.renderSwitch(state);
12
- });
13
- exports.Switch.displayName = 'Switch';
14
- });
15
- //# sourceMappingURL=Switch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Switch.js","sourceRoot":"../src/","sources":["components/Switch/Switch.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA8B,UAAC,KAAK,EAAE,GAAG;QAC7E,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpC,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSwitch } from './useSwitch';\nimport { renderSwitch } from './renderSwitch';\nimport { useSwitchStyles } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\n\n/**\n * The Switch control enables users to trigger an option on or off through pressing on the component.\n */\nexport const Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {\n const state = useSwitch(props, ref);\n\n useSwitchStyles(state);\n\n return renderSwitch(state);\n});\n\nSwitch.displayName = 'Switch';\n"]}
@@ -1,54 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
3
- export declare type SwitchSlots = {
4
- /**
5
- * The root of the Switch.
6
- */
7
- root: IntrinsicShorthandProps<'div'>;
8
- /**
9
- * The bar indicating the status of the Switch.
10
- */
11
- track: IntrinsicShorthandProps<'div'>;
12
- /**
13
- * The wrapper around the thumb. It is used as the active area for the thumb to position itself.
14
- */
15
- thumbWrapper: IntrinsicShorthandProps<'div'>;
16
- /**
17
- * The circular icon indicating the status of the Switch.
18
- */
19
- thumb: IntrinsicShorthandProps<'div'>;
20
- /**
21
- * The hidden input that handles the Switch's internal functionality.
22
- */
23
- input: IntrinsicShorthandProps<'input'>;
24
- };
25
- export interface SwitchCommons {
26
- /**
27
- * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
28
- * Mutually exclusive with `checked` prop.
29
- *
30
- * @default false
31
- */
32
- defaultChecked?: boolean;
33
- /**
34
- * The current value for a controlled Switch. If `true` then the Switch will be enabled.
35
- * Mutually exclusive with `defaultChecked` prop.
36
- */
37
- checked?: boolean;
38
- /**
39
- * Whether the Switch should be disabled.
40
- *
41
- * @default false
42
- */
43
- disabled?: boolean;
44
- /**
45
- * Callback to be called when the `checked` value changes.
46
- */
47
- onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: {
48
- checked: boolean;
49
- }) => void;
50
- }
51
- export interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
52
- }
53
- export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
54
- }
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=Switch.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Switch.types.js","sourceRoot":"../src/","sources":["components/Switch/Switch.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n /**\n * The root of the Switch.\n */\n root: IntrinsicShorthandProps<'div'>;\n\n /**\n * The bar indicating the status of the Switch.\n */\n track: IntrinsicShorthandProps<'div'>;\n\n /**\n * The wrapper around the thumb. It is used as the active area for the thumb to position itself.\n */\n thumbWrapper: IntrinsicShorthandProps<'div'>;\n\n /**\n * The circular icon indicating the status of the Switch.\n */\n thumb: IntrinsicShorthandProps<'div'>;\n\n /**\n * The hidden input that handles the Switch's internal functionality.\n */\n input: IntrinsicShorthandProps<'input'>;\n};\n\nexport interface SwitchCommons {\n /**\n * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.\n * Mutually exclusive with `checked` prop.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * The current value for a controlled Switch. If `true` then the Switch will be enabled.\n * Mutually exclusive with `defaultChecked` prop.\n */\n checked?: boolean;\n\n /**\n * Whether the Switch should be disabled.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback to be called when the `checked` value changes.\n */\n onChange?: (\n ev: React.ChangeEvent<HTMLInputElement>,\n data: {\n checked: boolean;\n },\n ) => void;\n}\n\nexport interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {}\n\nexport interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {}\n"]}
@@ -1,5 +0,0 @@
1
- export * from './Switch';
2
- export * from './Switch.types';
3
- export * from './renderSwitch';
4
- export * from './useSwitch';
5
- export * from './useSwitchStyles';
@@ -1,10 +0,0 @@
1
- define(["require", "exports", "tslib", "./Switch", "./Switch.types", "./renderSwitch", "./useSwitch", "./useSwitchStyles"], function (require, exports, tslib_1, Switch_1, Switch_types_1, renderSwitch_1, useSwitch_1, useSwitchStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Switch_1, exports);
5
- tslib_1.__exportStar(Switch_types_1, exports);
6
- tslib_1.__exportStar(renderSwitch_1, exports);
7
- tslib_1.__exportStar(useSwitch_1, exports);
8
- tslib_1.__exportStar(useSwitchStyles_1, exports);
9
- });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Switch/index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n"]}
@@ -1,5 +0,0 @@
1
- import type { SwitchState } from './Switch.types';
2
- /**
3
- * Render the final JSX of Switch
4
- */
5
- export declare const renderSwitch: (state: SwitchState) => JSX.Element;
@@ -1,18 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useSwitch"], function (require, exports, tslib_1, React, react_utilities_1, useSwitch_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderSwitch = void 0;
5
- /**
6
- * Render the final JSX of Switch
7
- */
8
- var renderSwitch = function (state) {
9
- var _a = react_utilities_1.getSlots(state, useSwitch_1.switchShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
10
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
11
- React.createElement(slots.track, tslib_1.__assign({}, slotProps.track)),
12
- React.createElement(slots.thumbWrapper, tslib_1.__assign({}, slotProps.thumbWrapper),
13
- React.createElement(slots.thumb, tslib_1.__assign({}, slotProps.thumb))),
14
- React.createElement(slots.input, tslib_1.__assign({}, slotProps.input))));
15
- };
16
- exports.renderSwitch = renderSwitch;
17
- });
18
- //# sourceMappingURL=renderSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderSwitch.js","sourceRoot":"../src/","sources":["components/Switch/renderSwitch.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAuB,0BAAQ,CAAc,KAAK,EAAE,gCAAoB,CAAC,EAAvE,KAAK,WAAA,EAAE,SAAS,eAAuD,CAAC;QAEhF,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,YAAY,uBAAK,SAAS,CAAC,YAAY;gBAC5C,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACjB;YACrB,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACzB,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,YAAY,gBAYvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { switchShorthandProps } from './useSwitch';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render the final JSX of Switch\n */\nexport const renderSwitch = (state: SwitchState) => {\n const { slots, slotProps } = getSlots<SwitchSlots>(state, switchShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.track {...slotProps.track} />\n <slots.thumbWrapper {...slotProps.thumbWrapper}>\n <slots.thumb {...slotProps.thumb} />\n </slots.thumbWrapper>\n <slots.input {...slotProps.input} />\n </slots.root>\n );\n};\n"]}
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
3
- /**
4
- * Array of all shorthand properties listed in SwitchSlots
5
- */
6
- export declare const switchShorthandProps: (keyof SwitchSlots)[];
7
- /**
8
- * Given user props, returns state and render function for a Switch.
9
- */
10
- export declare const useSwitch: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
@@ -1,42 +0,0 @@
1
- define(["require", "exports", "tslib", "@fluentui/react-utilities", "./useSwitchState"], function (require, exports, tslib_1, react_utilities_1, useSwitchState_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useSwitch = exports.switchShorthandProps = void 0;
5
- /**
6
- * Array of all shorthand properties listed in SwitchSlots
7
- */
8
- exports.switchShorthandProps = ['root', 'track', 'thumbWrapper', 'thumb', 'input'];
9
- /**
10
- * Given user props, returns state and render function for a Switch.
11
- */
12
- var useSwitch = function (props, ref) {
13
- var track = props.track, thumbWrapper = props.thumbWrapper, thumb = props.thumb, input = props.input, defaultChecked = props.defaultChecked, checked = props.checked, disabled = props.disabled, onChange = props.onChange;
14
- var state = {
15
- defaultChecked: defaultChecked,
16
- checked: checked,
17
- disabled: disabled,
18
- onChange: onChange,
19
- root: react_utilities_1.getNativeElementProps('span', tslib_1.__assign(tslib_1.__assign({ ref: ref }, props), { id: react_utilities_1.useId('switch-', props.id) })),
20
- components: {
21
- root: 'div',
22
- track: 'div',
23
- thumbWrapper: 'div',
24
- thumb: 'div',
25
- input: 'input',
26
- },
27
- track: react_utilities_1.resolveShorthand(track, { required: true }),
28
- thumbWrapper: react_utilities_1.resolveShorthand(thumbWrapper, { required: true }),
29
- thumb: react_utilities_1.resolveShorthand(thumb, { required: true }),
30
- input: react_utilities_1.resolveShorthand(input, {
31
- required: true,
32
- defaultProps: {
33
- type: 'checkbox',
34
- },
35
- }),
36
- };
37
- useSwitchState_1.useSwitchState(state);
38
- return state;
39
- };
40
- exports.useSwitch = useSwitch;
41
- });
42
- //# sourceMappingURL=useSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSwitch.js","sourceRoot":"../src/","sources":["components/Switch/useSwitch.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,oBAAoB,GAA0B,CAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAE/G;;OAEG;IACI,IAAM,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B;QAC/D,IAAA,KAAK,GAA8E,KAAK,MAAnF,EAAE,YAAY,GAAgE,KAAK,aAArE,EAAE,KAAK,GAAyD,KAAK,MAA9D,EAAE,KAAK,GAAkD,KAAK,MAAvD,EAAE,cAAc,GAAkC,KAAK,eAAvC,EAAE,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QACjG,IAAM,KAAK,GAAgB;YACzB,cAAc,gBAAA;YACd,OAAO,SAAA;YACP,QAAQ,UAAA;YACR,QAAQ,UAAA;YACR,IAAI,EAAE,uCAAqB,CAAC,MAAM,sCAChC,GAAG,KAAA,IACA,KAAK,KACR,EAAE,EAAE,uBAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAC9B;YACF,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,YAAY,EAAE,KAAK;gBACnB,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,OAAO;aACf;YACD,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAClD,YAAY,EAAE,kCAAgB,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAChE,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAClD,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE;gBAC7B,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,IAAI,EAAE,UAAU;iBACjB;aACF,CAAC;SACH,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAjCW,QAAA,SAAS,aAiCpB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSwitchState } from './useSwitchState';\nimport type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';\n\n/**\n * Array of all shorthand properties listed in SwitchSlots\n */\nexport const switchShorthandProps: (keyof SwitchSlots)[] = ['root', 'track', 'thumbWrapper', 'thumb', 'input'];\n\n/**\n * Given user props, returns state and render function for a Switch.\n */\nexport const useSwitch = (props: SwitchProps, ref: React.Ref<HTMLElement>): SwitchState => {\n const { track, thumbWrapper, thumb, input, defaultChecked, checked, disabled, onChange } = props;\n const state: SwitchState = {\n defaultChecked,\n checked,\n disabled,\n onChange,\n root: getNativeElementProps('span', {\n ref,\n ...props,\n id: useId('switch-', props.id),\n }),\n components: {\n root: 'div',\n track: 'div',\n thumbWrapper: 'div',\n thumb: 'div',\n input: 'input',\n },\n track: resolveShorthand(track, { required: true }),\n thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n },\n }),\n };\n\n useSwitchState(state);\n\n return state;\n};\n"]}
@@ -1,2 +0,0 @@
1
- import type { SwitchState } from './Switch.types';
2
- export declare const useSwitchState: (state: SwitchState) => SwitchState;
@@ -1,44 +0,0 @@
1
- define(["require", "exports", "react", "@fluentui/react-utilities", "@fluentui/react-shared-contexts"], function (require, exports, React, react_utilities_1, react_shared_contexts_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useSwitchState = void 0;
5
- var useSwitchState = function (state) {
6
- var _a = state.defaultChecked, defaultChecked = _a === void 0 ? false : _a, checked = state.checked, _b = state.disabled, disabled = _b === void 0 ? false : _b, onChange = state.onChange;
7
- var dir = react_shared_contexts_1.useFluent().dir;
8
- var inputRef = react_utilities_1.useMergedRefs(state.input.ref);
9
- var _c = react_utilities_1.useControllableState({
10
- defaultState: defaultChecked,
11
- state: checked,
12
- initialState: false,
13
- }), internalValue = _c[0], setInternalValue = _c[1];
14
- var setChecked = React.useCallback(function (ev, incomingValue) {
15
- onChange === null || onChange === void 0 ? void 0 : onChange(ev, { checked: incomingValue });
16
- setInternalValue(incomingValue);
17
- }, [onChange, setInternalValue]);
18
- var userOnChange = state.input.onChange;
19
- var onInputChange = react_utilities_1.useEventCallback(function (ev) {
20
- ev.stopPropagation();
21
- userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(ev);
22
- setChecked(ev, ev.currentTarget.checked);
23
- });
24
- var thumbWrapperStyles = {
25
- transform: dir === 'rtl'
26
- ? internalValue
27
- ? 'translate(-100%)'
28
- : 'translate(0%)'
29
- : internalValue
30
- ? 'translate(100%)'
31
- : 'translate(0%)',
32
- };
33
- // Input Props
34
- state.input.onChange = onInputChange;
35
- state.input.checked = internalValue;
36
- state.input.disabled = disabled;
37
- state.input.ref = inputRef;
38
- // thumbContainer Props
39
- state.thumbWrapper.style = thumbWrapperStyles;
40
- return state;
41
- };
42
- exports.useSwitchState = useSwitchState;
43
- });
44
- //# sourceMappingURL=useSwitchState.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSwitchState.js","sourceRoot":"../src/","sources":["components/Switch/useSwitchState.ts"],"names":[],"mappings":";;;;IAKO,IAAM,cAAc,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAgE,KAAK,eAA/C,EAAtB,cAAc,mBAAG,KAAK,KAAA,EAAE,OAAO,GAAiC,KAAK,QAAtC,EAAE,KAA+B,KAAK,SAApB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAEtE,IAAA,GAAG,GAAK,iCAAS,EAAE,IAAhB,CAAiB;QAC5B,IAAM,QAAQ,GAAG,+BAAa,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAA,KAAoC,sCAAoB,CAAC;YAC7D,YAAY,EAAE,cAAc;YAC5B,KAAK,EAAE,OAAO;YACd,YAAY,EAAE,KAAK;SACpB,CAAC,EAJK,aAAa,QAAA,EAAE,gBAAgB,QAIpC,CAAC;QAEH,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,UAAC,EAAuC,EAAE,aAAsB;YAC9D,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE;YAC3C,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAC7B,CAAC;QAEF,IAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QAE1C,IAAM,aAAa,GAAG,kCAAgB,CAAC,UAAC,EAAuC;YAC7E,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,EAAE,EAAE;YACnB,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,IAAM,kBAAkB,GAAG;YACzB,SAAS,EACP,GAAG,KAAK,KAAK;gBACX,CAAC,CAAC,aAAa;oBACb,CAAC,CAAC,kBAAkB;oBACpB,CAAC,CAAC,eAAe;gBACnB,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,iBAAiB;oBACnB,CAAC,CAAC,eAAe;SACtB,CAAC;QAEF,cAAc;QACd,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC;QACpC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAChC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;QAE3B,uBAAuB;QACvB,KAAK,CAAC,YAAY,CAAC,KAAK,GAAG,kBAAkB,CAAC;QAE9C,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAhDW,QAAA,cAAc,kBAgDzB","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { SwitchState } from './Switch.types';\n\nexport const useSwitchState = (state: SwitchState) => {\n const { defaultChecked = false, checked, disabled = false, onChange } = state;\n\n const { dir } = useFluent();\n const inputRef = useMergedRefs(state.input.ref);\n const [internalValue, setInternalValue] = useControllableState({\n defaultState: defaultChecked,\n state: checked,\n initialState: false,\n });\n\n const setChecked = React.useCallback(\n (ev: React.ChangeEvent<HTMLInputElement>, incomingValue: boolean) => {\n onChange?.(ev, { checked: incomingValue });\n setInternalValue(incomingValue);\n },\n [onChange, setInternalValue],\n );\n\n const userOnChange = state.input.onChange;\n\n const onInputChange = useEventCallback((ev: React.ChangeEvent<HTMLInputElement>) => {\n ev.stopPropagation();\n userOnChange?.(ev);\n setChecked(ev, ev.currentTarget.checked);\n });\n\n const thumbWrapperStyles = {\n transform:\n dir === 'rtl'\n ? internalValue\n ? 'translate(-100%)'\n : 'translate(0%)'\n : internalValue\n ? 'translate(100%)'\n : 'translate(0%)',\n };\n\n // Input Props\n state.input.onChange = onInputChange;\n state.input.checked = internalValue;\n state.input.disabled = disabled;\n state.input.ref = inputRef;\n\n // thumbContainer Props\n state.thumbWrapper.style = thumbWrapperStyles;\n\n return state;\n};\n"]}
@@ -1,5 +0,0 @@
1
- import type { SwitchState } from './Switch.types';
2
- /**
3
- * Apply styling to the Switch slots based on the state
4
- */
5
- export declare const useSwitchStyles: (state: SwitchState) => SwitchState;
@@ -1,161 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-tabster"], function (require, exports, react_make_styles_1, react_tabster_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useSwitchStyles = void 0;
5
- var rootClassName = 'ms-Switch-root';
6
- var trackClassName = 'ms-Switch-track';
7
- var thumbClassName = 'ms-Switch-thumb';
8
- /**
9
- * Styles for the root slot
10
- */
11
- var useRootStyles = react_make_styles_1.makeStyles({
12
- root: function (theme) { return ({
13
- '--switch-width': '40px',
14
- '--switch-height': '20px',
15
- '--switch-thumb-size': '14px',
16
- position: 'relative',
17
- width: 'var(--switch-width)',
18
- height: 'var(--switch-height)',
19
- display: 'inline-block',
20
- userSelect: 'none',
21
- touchAction: 'none',
22
- verticalAlign: 'bottom',
23
- }); },
24
- unchecked: function (theme) { return ({
25
- ':hover .ms-Switch-thumb': {
26
- background: theme.alias.color.neutral.neutralStrokeAccessibleHover,
27
- },
28
- ':hover .ms-Switch-track': {
29
- borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,
30
- },
31
- }); },
32
- checked: function (theme) { return ({
33
- ':hover .ms-Switch-track': {
34
- background: theme.alias.color.neutral.brandBackgroundHover,
35
- },
36
- ':active .ms-Switch-track': {
37
- background: theme.alias.color.neutral.brandBackgroundPressed,
38
- },
39
- }); },
40
- focusIndicator: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
41
- ':after': {
42
- content: "''",
43
- position: 'absolute',
44
- top: '-8px',
45
- right: '-8px',
46
- bottom: '-8px',
47
- left: '-8px',
48
- boxSizing: 'border-box',
49
- border: "1px solid " + theme.alias.color.neutral.neutralForeground1,
50
- borderRadius: theme.global.borderRadius.medium,
51
- },
52
- }); }, { selector: 'focus-within' }),
53
- });
54
- /**
55
- * Styles for the track slot
56
- */
57
- var useTrackStyles = react_make_styles_1.makeStyles({
58
- track: function (theme) { return ({
59
- position: 'absolute',
60
- width: '100%',
61
- height: '100%',
62
- boxSizing: 'border-box',
63
- borderRadius: '999px',
64
- transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
65
- pointerEvents: 'none',
66
- }); },
67
- unchecked: function (theme) { return ({
68
- border: "1px solid " + theme.alias.color.neutral.neutralStrokeAccessible,
69
- background: 'none',
70
- }); },
71
- checked: function (theme) { return ({
72
- background: theme.alias.color.neutral.brandBackground,
73
- border: 'none',
74
- }); },
75
- disabledUnchecked: function (theme) { return ({
76
- border: "1px solid " + theme.alias.color.neutral.neutralStrokeDisabled,
77
- }); },
78
- disabledChecked: function (theme) { return ({
79
- border: "1px solid " + theme.alias.color.neutral.transparentStrokeDisabled,
80
- background: theme.alias.color.neutral.neutralBackgroundDisabled,
81
- }); },
82
- });
83
- /**
84
- * Styles for the thumb wrapper slot
85
- */
86
- var useThumbWrapperStyles = react_make_styles_1.makeStyles({
87
- thumbWrapper: function (theme) { return ({
88
- position: 'absolute',
89
- top: '0',
90
- bottom: '0',
91
- left: 'calc(var(--switch-thumb-size) * .7)',
92
- right: 'calc(var(--switch-thumb-size) * .7)',
93
- transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
94
- pointerEvents: 'none',
95
- }); },
96
- });
97
- /**
98
- * Styles for the thumb slot
99
- */
100
- var useThumbStyles = react_make_styles_1.makeStyles({
101
- thumb: function (theme) { return ({
102
- position: 'absolute',
103
- width: 'var(--switch-thumb-size)',
104
- height: 'var(--switch-thumb-size)',
105
- boxSizing: 'border-box',
106
- borderRadius: theme.global.borderRadius.circular,
107
- top: '50%',
108
- transform: 'translate(-50%, -50%)',
109
- pointerEvents: 'none',
110
- }); },
111
- unchecked: function (theme) { return ({
112
- background: theme.alias.color.neutral.neutralStrokeAccessible,
113
- }); },
114
- checked: function (theme) { return ({
115
- background: theme.alias.color.neutral.neutralForegroundOnBrand,
116
- }); },
117
- disabledUnchecked: function (theme) { return ({
118
- border: "1px solid " + theme.alias.color.neutral.neutralForegroundDisabled,
119
- background: theme.alias.color.neutral.neutralBackground1,
120
- }); },
121
- disabledChecked: function (theme) { return ({
122
- background: theme.alias.color.neutral.neutralForegroundDisabled,
123
- }); },
124
- });
125
- /**
126
- * Styles for the hidden input slot
127
- */
128
- var useInputStyle = react_make_styles_1.makeStyles({
129
- input: {
130
- opacity: 0,
131
- width: '100%',
132
- height: '100%',
133
- margin: 0,
134
- },
135
- enabled: {
136
- cursor: 'pointer',
137
- },
138
- disabled: {
139
- cursor: 'not-allowed',
140
- },
141
- });
142
- /**
143
- * Apply styling to the Switch slots based on the state
144
- */
145
- var useSwitchStyles = function (state) {
146
- var _a = state.input, checked = _a.checked, disabled = _a.disabled;
147
- var rootStyles = useRootStyles();
148
- var trackStyles = useTrackStyles();
149
- var thumbWrapperStyles = useThumbWrapperStyles();
150
- var thumbStyles = useThumbStyles();
151
- var inputStyles = useInputStyle();
152
- state.root.className = react_make_styles_1.mergeClasses(rootClassName + (checked ? ' checked' : ''), rootStyles.root, rootStyles.focusIndicator, !disabled && (checked ? rootStyles.checked : rootStyles.unchecked), state.root.className);
153
- state.track.className = react_make_styles_1.mergeClasses(trackClassName, trackStyles.track, !disabled && (checked ? trackStyles.checked : trackStyles.unchecked), disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked), state.track.className);
154
- state.thumbWrapper.className = react_make_styles_1.mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);
155
- state.thumb.className = react_make_styles_1.mergeClasses(thumbClassName, thumbStyles.thumb, !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked), disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked), state.thumb.className);
156
- state.input.className = react_make_styles_1.mergeClasses(inputStyles.input, disabled ? inputStyles.disabled : inputStyles.enabled, state.input.className);
157
- return state;
158
- };
159
- exports.useSwitchStyles = useSwitchStyles;
160
- });
161
- //# sourceMappingURL=useSwitchStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSwitchStyles.js","sourceRoot":"../src/","sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\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: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundHover,\n },\n\n ':active .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundPressed,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.brandBackground,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.transparentStrokeDisabled}`,\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\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 transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (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 inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : 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 && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- export * from './Switch';
package/lib-amd/index.js DELETED
@@ -1,6 +0,0 @@
1
- define(["require", "exports", "tslib", "./Switch"], function (require, exports, tslib_1, Switch_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(Switch_1, exports);
5
- });
6
- //# sourceMappingURL=index.js.map