@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.
- package/CHANGELOG.json +633 -10
- package/CHANGELOG.md +185 -11
- package/dist/react-switch.d.ts +7 -2
- package/lib/Switch.js.map +1 -1
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Switch/Switch.d.ts +2 -2
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.d.ts +5 -1
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +1 -1
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +6 -1
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchState.js +125 -19
- package/lib/components/Switch/useSwitchState.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +186 -95
- 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/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.d.ts +2 -2
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.d.ts +5 -1
- 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.js +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +6 -1
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchState.js +124 -18
- package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +185 -94
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -12
- package/lib-amd/Switch.d.ts +0 -1
- package/lib-amd/Switch.js +0 -6
- package/lib-amd/Switch.js.map +0 -1
- package/lib-amd/common/isConformant.d.ts +0 -4
- package/lib-amd/common/isConformant.js +0 -16
- package/lib-amd/common/isConformant.js.map +0 -1
- package/lib-amd/components/Switch/Switch.d.ts +0 -6
- package/lib-amd/components/Switch/Switch.js +0 -15
- package/lib-amd/components/Switch/Switch.js.map +0 -1
- package/lib-amd/components/Switch/Switch.types.d.ts +0 -54
- package/lib-amd/components/Switch/Switch.types.js +0 -5
- package/lib-amd/components/Switch/Switch.types.js.map +0 -1
- package/lib-amd/components/Switch/index.d.ts +0 -5
- package/lib-amd/components/Switch/index.js +0 -10
- package/lib-amd/components/Switch/index.js.map +0 -1
- package/lib-amd/components/Switch/renderSwitch.d.ts +0 -5
- package/lib-amd/components/Switch/renderSwitch.js +0 -18
- package/lib-amd/components/Switch/renderSwitch.js.map +0 -1
- package/lib-amd/components/Switch/useSwitch.d.ts +0 -10
- package/lib-amd/components/Switch/useSwitch.js +0 -42
- package/lib-amd/components/Switch/useSwitch.js.map +0 -1
- package/lib-amd/components/Switch/useSwitchState.d.ts +0 -2
- package/lib-amd/components/Switch/useSwitchState.js +0 -44
- package/lib-amd/components/Switch/useSwitchState.js.map +0 -1
- package/lib-amd/components/Switch/useSwitchStyles.d.ts +0 -5
- package/lib-amd/components/Switch/useSwitchStyles.js +0 -161
- package/lib-amd/components/Switch/useSwitchStyles.js.map +0 -1
- package/lib-amd/index.d.ts +0 -2
- package/lib-amd/index.js +0 -6
- package/lib-amd/index.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,IAAM,aAAa,GAAG,gBAAtB;AACA,IAAM,cAAc,GAAG,iBAAvB;AACA,IAAM,cAAc,GAAG,iBAAvB;AAEA;;AAEG;;AACH,IAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;
|
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","
|
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-
|
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-
|
28
|
+
"@fluentui/babel-make-styles": "9.0.0-beta.1",
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-
|
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-
|
33
|
-
"@fluentui/react-label": "9.0.0-
|
34
|
-
"@fluentui/react-provider": "9.0.0-
|
35
|
-
"@fluentui/react-theme": "9.0.0-
|
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-
|
50
|
-
"@fluentui/react-shared-contexts": "9.0.0-
|
51
|
-
"@fluentui/react-tabster": "9.0.0-
|
52
|
-
"@fluentui/react-utilities": "9.0.0-
|
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": "
|
62
|
+
"tag": "beta",
|
63
63
|
"disallowedChangeTypes": [
|
64
64
|
"major",
|
65
65
|
"minor",
|
package/lib-amd/Switch.d.ts
DELETED
@@ -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
|
package/lib-amd/Switch.js.map
DELETED
@@ -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,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 +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,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,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,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,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":";;;;IAIA,IAAM,aAAa,GAAG,gBAAgB,CAAC;IACvC,IAAM,cAAc,GAAG,iBAAiB,CAAC;IACzC,IAAM,cAAc,GAAG,iBAAiB,CAAC;IAEzC;;OAEG;IACH,IAAM,aAAa,GAAG,8BAAU,CAAC;QAC/B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACd,gBAAgB,EAAE,MAAM;YACxB,iBAAiB,EAAE,MAAM;YACzB,qBAAqB,EAAE,MAAM;YAE7B,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,sBAAsB;YAC9B,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,MAAM;YAClB,WAAW,EAAE,MAAM;YACnB,aAAa,EAAE,QAAQ;SACxB,CAAC,EAZa,CAYb;QAEF,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACnB,yBAAyB,EAAE;gBACzB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aACnE;YAED,yBAAyB,EAAE;gBACzB,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aACpE;SACF,CAAC,EARkB,CAQlB;QAEF,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,yBAAyB,EAAE;gBACzB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB;aAC3D;YAED,0BAA0B,EAAE;gBAC1B,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,sBAAsB;aAC7D;SACF,CAAC,EARgB,CAQhB;QAEF,cAAc,EAAE,6CAA6B,CAC3C,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,MAAM;gBACX,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE,MAAM;gBACZ,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAoB;gBACnE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;aAC/C;SACF,CAAC,EAZO,CAYP,EACF,EAAE,QAAQ,EAAE,cAAc,EAAE,CAC7B;KACF,CAAC,CAAC;IAEH;;OAEG;IACH,IAAM,cAAc,GAAG,8BAAU,CAAC;QAChC,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,YAAY;YACvB,YAAY,EAAE,OAAO;YACrB,UAAU,EAAE,mGAAmG;YAC/G,aAAa,EAAE,MAAM;SACtB,CAAC,EARc,CAQd;QAEF,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACnB,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,uBAAyB;YACxE,UAAU,EAAE,MAAM;SACnB,CAAC,EAHkB,CAGlB;QAEF,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;YACrD,MAAM,EAAE,MAAM;SACf,CAAC,EAHgB,CAGhB;QAEF,iBAAiB,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAC3B,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAuB;SACvE,CAAC,EAF0B,CAE1B;QAEF,eAAe,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACzB,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAA2B;YAC1E,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;SAChE,CAAC,EAHwB,CAGxB;KACH,CAAC,CAAC;IAEH;;OAEG;IACH,IAAM,qBAAqB,GAAG,8BAAU,CAAC;QACvC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACtB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,GAAG;YACR,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,qCAAqC;YAC3C,KAAK,EAAE,qCAAqC;YAC5C,UAAU,EAAE,iGAAiG;YAC7G,aAAa,EAAE,MAAM;SACtB,CAAC,EARqB,CAQrB;KACH,CAAC,CAAC;IAEH;;OAEG;IACH,IAAM,cAAc,GAAG,8BAAU,CAAC;QAChC,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,0BAA0B;YACjC,MAAM,EAAE,0BAA0B;YAClC,SAAS,EAAE,YAAY;YACvB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;YAChD,GAAG,EAAE,KAAK;YACV,SAAS,EAAE,uBAAuB;YAClC,aAAa,EAAE,MAAM;SACtB,CAAC,EATc,CASd;QAEF,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACnB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,uBAAuB;SAC9D,CAAC,EAFkB,CAElB;QAEF,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB;SAC/D,CAAC,EAFgB,CAEhB;QAEF,iBAAiB,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAC3B,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAA2B;YAC1E,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;SACzD,CAAC,EAH0B,CAG1B;QAEF,eAAe,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACzB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;SAChE,CAAC,EAFwB,CAExB;KACH,CAAC,CAAC;IAEH;;OAEG;IACH,IAAM,aAAa,GAAG,8BAAU,CAAC;QAC/B,KAAK,EAAE;YACL,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,CAAC;SACV;QAED,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;SAClB;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,aAAa;SACtB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,eAAe,GAAG,UAAC,KAAkB;QAC1C,IAAA,KAAwB,KAAK,CAAC,KAAK,EAAjC,OAAO,aAAA,EAAE,QAAQ,cAAgB,CAAC;QAE1C,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QACnD,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAM,WAAW,GAAG,aAAa,EAAE,CAAC;QAEpC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAY,CACjC,aAAa,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3C,UAAU,CAAC,IAAI,EACf,UAAU,CAAC,cAAc,EACzB,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,EAClE,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,gCAAY,CAClC,cAAc,EACd,WAAW,CAAC,KAAK,EACjB,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,EACpE,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,EACnF,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;QAEF,KAAK,CAAC,YAAY,CAAC,SAAS,GAAG,gCAAY,CAAC,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QAE3G,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,gCAAY,CAClC,cAAc,EACd,WAAW,CAAC,KAAK,EACjB,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,EACpE,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,EACnF,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,gCAAY,CAClC,WAAW,CAAC,KAAK,EACjB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EACrD,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA1CW,QAAA,eAAe,mBA0C1B","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"]}
|
package/lib-amd/index.d.ts
DELETED
package/lib-amd/index.js
DELETED