@fluentui/react-switch 9.0.0-rc.1 → 9.0.0-rc.10
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 +395 -1
- package/CHANGELOG.md +145 -31
- package/MIGRATION.md +89 -22
- package/Spec.md +179 -84
- package/dist/index.d.ts +107 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.js +1 -1
- package/lib/components/Switch/Switch.js.map +1 -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 +8 -6
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +63 -43
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +170 -268
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +1 -1
- package/lib-commonjs/components/Switch/Switch.js.map +1 -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 +8 -6
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +65 -43
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +172 -270
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +19 -20
- package/dist/react-switch.d.ts +0 -89
- package/lib/Switch.d.ts +0 -1
- package/lib/components/Switch/Switch.d.ts +0 -6
- package/lib/components/Switch/Switch.types.d.ts +0 -59
- package/lib/components/Switch/index.d.ts +0 -5
- package/lib/components/Switch/renderSwitch.d.ts +0 -5
- package/lib/components/Switch/useSwitch.d.ts +0 -6
- package/lib/components/Switch/useSwitchState.d.ts +0 -2
- package/lib/components/Switch/useSwitchState.js +0 -144
- package/lib/components/Switch/useSwitchState.js.map +0 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +0 -6
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Switch.d.ts +0 -1
- package/lib-commonjs/components/Switch/Switch.d.ts +0 -6
- package/lib-commonjs/components/Switch/Switch.types.d.ts +0 -59
- package/lib-commonjs/components/Switch/index.d.ts +0 -5
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +0 -5
- package/lib-commonjs/components/Switch/useSwitch.d.ts +0 -6
- package/lib-commonjs/components/Switch/useSwitchState.d.ts +0 -2
- package/lib-commonjs/components/Switch/useSwitchState.js +0 -156
- package/lib-commonjs/components/Switch/useSwitchState.js.map +0 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +0 -6
- package/lib-commonjs/index.d.ts +0 -2
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "9.0.0-rc.
|
3
|
+
"version": "9.0.0-rc.10",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -21,31 +21,23 @@
|
|
21
21
|
"start": "yarn storybook",
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
25
|
-
"storybook": "node
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-switch/src && yarn docs",
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
27
27
|
},
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
32
|
-
"@fluentui/scripts": "^1.0.0"
|
33
|
-
"@types/enzyme": "3.10.3",
|
34
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
35
|
-
"@types/react": "16.9.42",
|
36
|
-
"@types/react-dom": "16.9.10",
|
37
|
-
"@types/react-test-renderer": "^16.0.0",
|
38
|
-
"enzyme": "~3.10.0",
|
39
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
40
|
-
"react": "16.8.6",
|
41
|
-
"react-dom": "16.8.6",
|
42
|
-
"react-test-renderer": "^16.3.0"
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.6",
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
43
33
|
},
|
44
34
|
"dependencies": {
|
45
|
-
"@fluentui/react-
|
46
|
-
"@fluentui/react-
|
47
|
-
"@fluentui/react-
|
48
|
-
"@
|
35
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
36
|
+
"@fluentui/react-label": "9.0.0-rc.2",
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.10",
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
40
|
+
"@griffel/react": "1.0.5",
|
49
41
|
"tslib": "^2.1.0"
|
50
42
|
},
|
51
43
|
"peerDependencies": {
|
@@ -60,5 +52,12 @@
|
|
60
52
|
"minor",
|
61
53
|
"patch"
|
62
54
|
]
|
55
|
+
},
|
56
|
+
"exports": {
|
57
|
+
".": {
|
58
|
+
"types": "./lib/index.d.ts",
|
59
|
+
"import": "./lib/index.js",
|
60
|
+
"require": "./lib-commonjs/index.js"
|
61
|
+
}
|
63
62
|
}
|
64
63
|
}
|
package/dist/react-switch.d.ts
DELETED
@@ -1,89 +0,0 @@
|
|
1
|
-
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
-
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
-
import * as React_2 from 'react';
|
5
|
-
import type { Slot } from '@fluentui/react-utilities';
|
6
|
-
|
7
|
-
/**
|
8
|
-
* Render the final JSX of Switch
|
9
|
-
*/
|
10
|
-
export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
|
11
|
-
|
12
|
-
/**
|
13
|
-
* The Switch control enables users to trigger an option on or off through pressing on the component.
|
14
|
-
*/
|
15
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
16
|
-
|
17
|
-
export declare const switchClassName = "fui-Switch";
|
18
|
-
|
19
|
-
declare interface SwitchCommons {
|
20
|
-
/**
|
21
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
22
|
-
* Mutually exclusive with `checked` prop.
|
23
|
-
*
|
24
|
-
* @default false
|
25
|
-
*/
|
26
|
-
defaultChecked?: boolean;
|
27
|
-
/**
|
28
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
29
|
-
* Mutually exclusive with `defaultChecked` prop.
|
30
|
-
*/
|
31
|
-
checked?: boolean;
|
32
|
-
/**
|
33
|
-
* Whether the Switch should be disabled.
|
34
|
-
*
|
35
|
-
* @default false
|
36
|
-
*/
|
37
|
-
disabled?: boolean;
|
38
|
-
/**
|
39
|
-
* Callback to be called when the `checked` value changes.
|
40
|
-
*/
|
41
|
-
onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
|
42
|
-
checked: boolean;
|
43
|
-
}) => void;
|
44
|
-
}
|
45
|
-
|
46
|
-
export declare interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {
|
47
|
-
}
|
48
|
-
|
49
|
-
export declare type SwitchSlots = {
|
50
|
-
/**
|
51
|
-
* The root of the Switch.
|
52
|
-
*/
|
53
|
-
root: Slot<'div'>;
|
54
|
-
/**
|
55
|
-
* The bar indicating the status of the Switch.
|
56
|
-
*/
|
57
|
-
track: NonNullable<Slot<'div'>>;
|
58
|
-
/**
|
59
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
60
|
-
*/
|
61
|
-
thumbWrapper: NonNullable<Slot<'div'>>;
|
62
|
-
/**
|
63
|
-
* The circular icon indicating the status of the Switch.
|
64
|
-
*/
|
65
|
-
thumb: NonNullable<Slot<'div'>>;
|
66
|
-
/**
|
67
|
-
* The hidden input that handles the Switch's internal functionality.
|
68
|
-
*/
|
69
|
-
input: NonNullable<Slot<'input'>>;
|
70
|
-
/**
|
71
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
72
|
-
*/
|
73
|
-
activeRail: NonNullable<Slot<'div'>>;
|
74
|
-
};
|
75
|
-
|
76
|
-
export declare interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
77
|
-
}
|
78
|
-
|
79
|
-
/**
|
80
|
-
* Given user props, returns state and render function for a Switch.
|
81
|
-
*/
|
82
|
-
export declare const useSwitch_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLElement>) => SwitchState;
|
83
|
-
|
84
|
-
/**
|
85
|
-
* Apply styling to the Switch slots based on the state
|
86
|
-
*/
|
87
|
-
export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
|
88
|
-
|
89
|
-
export { }
|
package/lib/Switch.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Switch/index';
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
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: ForwardRefComponent<SwitchProps>;
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
3
|
-
export declare type SwitchSlots = {
|
4
|
-
/**
|
5
|
-
* The root of the Switch.
|
6
|
-
*/
|
7
|
-
root: Slot<'div'>;
|
8
|
-
/**
|
9
|
-
* The bar indicating the status of the Switch.
|
10
|
-
*/
|
11
|
-
track: NonNullable<Slot<'div'>>;
|
12
|
-
/**
|
13
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
14
|
-
*/
|
15
|
-
thumbWrapper: NonNullable<Slot<'div'>>;
|
16
|
-
/**
|
17
|
-
* The circular icon indicating the status of the Switch.
|
18
|
-
*/
|
19
|
-
thumb: NonNullable<Slot<'div'>>;
|
20
|
-
/**
|
21
|
-
* The hidden input that handles the Switch's internal functionality.
|
22
|
-
*/
|
23
|
-
input: NonNullable<Slot<'input'>>;
|
24
|
-
/**
|
25
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
26
|
-
*/
|
27
|
-
activeRail: NonNullable<Slot<'div'>>;
|
28
|
-
};
|
29
|
-
interface SwitchCommons {
|
30
|
-
/**
|
31
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
32
|
-
* Mutually exclusive with `checked` prop.
|
33
|
-
*
|
34
|
-
* @default false
|
35
|
-
*/
|
36
|
-
defaultChecked?: boolean;
|
37
|
-
/**
|
38
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
39
|
-
* Mutually exclusive with `defaultChecked` prop.
|
40
|
-
*/
|
41
|
-
checked?: boolean;
|
42
|
-
/**
|
43
|
-
* Whether the Switch should be disabled.
|
44
|
-
*
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
disabled?: boolean;
|
48
|
-
/**
|
49
|
-
* Callback to be called when the `checked` value changes.
|
50
|
-
*/
|
51
|
-
onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
|
52
|
-
checked: boolean;
|
53
|
-
}) => void;
|
54
|
-
}
|
55
|
-
export interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {
|
56
|
-
}
|
57
|
-
export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
58
|
-
}
|
59
|
-
export {};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { SwitchProps, SwitchState } from './Switch.types';
|
3
|
-
/**
|
4
|
-
* Given user props, returns state and render function for a Switch.
|
5
|
-
*/
|
6
|
-
export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
|
@@ -1,144 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
3
|
-
import { useFluent } from '@fluentui/react-shared-contexts'; // TODO: This should be replaced with a useEvent hook
|
4
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
5
|
-
|
6
|
-
const on = (element, eventName, callback) => {
|
7
|
-
element.addEventListener(eventName, callback);
|
8
|
-
return () => element.removeEventListener(eventName, callback);
|
9
|
-
};
|
10
|
-
|
11
|
-
export const useSwitchState = state => {
|
12
|
-
const {
|
13
|
-
defaultChecked = false,
|
14
|
-
checked,
|
15
|
-
disabled = false,
|
16
|
-
onChange
|
17
|
-
} = state;
|
18
|
-
const {
|
19
|
-
onPointerDown: onPointerDownCallback,
|
20
|
-
onKeyUp: onKeyUpCallback
|
21
|
-
} = state.root;
|
22
|
-
const {
|
23
|
-
dir
|
24
|
-
} = useFluent();
|
25
|
-
const inputRef = useMergedRefs(state.input.ref);
|
26
|
-
const railRef = React.useRef(null);
|
27
|
-
const internalState = React.useRef({
|
28
|
-
internalValue: checked ? checked : defaultChecked,
|
29
|
-
thumbIsDragging: false,
|
30
|
-
disposables: []
|
31
|
-
});
|
32
|
-
const [currentValue, setCurrentValue] = useControllableState({
|
33
|
-
defaultState: defaultChecked,
|
34
|
-
state: checked,
|
35
|
-
initialState: false
|
36
|
-
});
|
37
|
-
const [thumbAnimation, {
|
38
|
-
setTrue: showThumbAnimation,
|
39
|
-
setFalse: hideThumbAnimation
|
40
|
-
}] = useBoolean(true);
|
41
|
-
const [renderedPosition, setRenderedPosition] = React.useState(currentValue === true ? 100 : 0);
|
42
|
-
const setChecked = useEventCallback((ev, incomingValue) => {
|
43
|
-
ev.stopPropagation();
|
44
|
-
ev.preventDefault();
|
45
|
-
internalState.current.internalValue = incomingValue;
|
46
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
47
|
-
checked: incomingValue
|
48
|
-
});
|
49
|
-
setCurrentValue(incomingValue);
|
50
|
-
setRenderedPosition(undefined);
|
51
|
-
});
|
52
|
-
const calculatePosition = React.useCallback(ev => {
|
53
|
-
var _a;
|
54
|
-
|
55
|
-
const currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
56
|
-
const railWidth = currentBounds.width;
|
57
|
-
const railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
|
58
|
-
const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
|
59
|
-
return clamp(distance / railWidth * 100, 0, 100);
|
60
|
-
}, [dir]);
|
61
|
-
const onPointerMove = React.useCallback(ev => {
|
62
|
-
const incomingPosition = calculatePosition(ev);
|
63
|
-
internalState.current.thumbIsDragging = true;
|
64
|
-
hideThumbAnimation();
|
65
|
-
setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
|
66
|
-
|
67
|
-
if (incomingPosition === 100 && internalState.current.internalValue !== true) {
|
68
|
-
setChecked(ev, true);
|
69
|
-
} else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
|
70
|
-
setChecked(ev, false);
|
71
|
-
}
|
72
|
-
}, [calculatePosition, hideThumbAnimation, setChecked]);
|
73
|
-
const onPointerUp = React.useCallback(ev => {
|
74
|
-
internalState.current.disposables.forEach(dispose => dispose());
|
75
|
-
internalState.current.disposables = [];
|
76
|
-
inputRef.current.focus();
|
77
|
-
|
78
|
-
if (internalState.current.thumbIsDragging) {
|
79
|
-
const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
|
80
|
-
showThumbAnimation();
|
81
|
-
|
82
|
-
if (roundedPosition === 100) {
|
83
|
-
setChecked(ev, true);
|
84
|
-
} else if (roundedPosition === 0) {
|
85
|
-
setChecked(ev, false);
|
86
|
-
}
|
87
|
-
} else {
|
88
|
-
setChecked(ev, !internalState.current.internalValue);
|
89
|
-
}
|
90
|
-
}, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
|
91
|
-
const onPointerDown = React.useCallback(ev => {
|
92
|
-
var _a;
|
93
|
-
|
94
|
-
const {
|
95
|
-
pointerId
|
96
|
-
} = ev;
|
97
|
-
const target = ev.target;
|
98
|
-
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
|
99
|
-
showThumbAnimation();
|
100
|
-
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
101
|
-
internalState.current.thumbIsDragging = false;
|
102
|
-
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {
|
103
|
-
var _a;
|
104
|
-
|
105
|
-
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
106
|
-
});
|
107
|
-
}, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
|
108
|
-
const onKeyUp = React.useCallback(ev => {
|
109
|
-
onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
|
110
|
-
|
111
|
-
if (ev.key === ' ') {
|
112
|
-
setChecked(ev, !internalState.current.internalValue);
|
113
|
-
}
|
114
|
-
}, [onKeyUpCallback, setChecked]);
|
115
|
-
const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
|
116
|
-
const rootStyles = {
|
117
|
-
'--switch-checked-opacity': currentPosition / 100,
|
118
|
-
'--switch-unchecked-opacity': (100 - currentPosition) / 100
|
119
|
-
};
|
120
|
-
const thumbWrapperStyles = {
|
121
|
-
transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,
|
122
|
-
transition: thumbAnimation ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)' : 'none'
|
123
|
-
}; // Root Props
|
124
|
-
|
125
|
-
state.root.style = rootStyles;
|
126
|
-
|
127
|
-
if (!disabled) {
|
128
|
-
state.root.onPointerDown = onPointerDown;
|
129
|
-
state.root.onKeyUp = onKeyUp;
|
130
|
-
} // Input Props
|
131
|
-
|
132
|
-
|
133
|
-
state.input.checked = currentValue;
|
134
|
-
state.input.disabled = disabled;
|
135
|
-
state.input.ref = inputRef;
|
136
|
-
state.input.readOnly = true;
|
137
|
-
state.input.role = 'switch'; // Thumb Container Props
|
138
|
-
|
139
|
-
state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
|
140
|
-
|
141
|
-
state.activeRail.ref = railRef;
|
142
|
-
return state;
|
143
|
-
};
|
144
|
-
//# sourceMappingURL=useSwitchState.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
package/lib/index.d.ts
DELETED
package/lib-commonjs/Switch.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Switch/index';
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
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: ForwardRefComponent<SwitchProps>;
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
3
|
-
export declare type SwitchSlots = {
|
4
|
-
/**
|
5
|
-
* The root of the Switch.
|
6
|
-
*/
|
7
|
-
root: Slot<'div'>;
|
8
|
-
/**
|
9
|
-
* The bar indicating the status of the Switch.
|
10
|
-
*/
|
11
|
-
track: NonNullable<Slot<'div'>>;
|
12
|
-
/**
|
13
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
14
|
-
*/
|
15
|
-
thumbWrapper: NonNullable<Slot<'div'>>;
|
16
|
-
/**
|
17
|
-
* The circular icon indicating the status of the Switch.
|
18
|
-
*/
|
19
|
-
thumb: NonNullable<Slot<'div'>>;
|
20
|
-
/**
|
21
|
-
* The hidden input that handles the Switch's internal functionality.
|
22
|
-
*/
|
23
|
-
input: NonNullable<Slot<'input'>>;
|
24
|
-
/**
|
25
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
26
|
-
*/
|
27
|
-
activeRail: NonNullable<Slot<'div'>>;
|
28
|
-
};
|
29
|
-
interface SwitchCommons {
|
30
|
-
/**
|
31
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
32
|
-
* Mutually exclusive with `checked` prop.
|
33
|
-
*
|
34
|
-
* @default false
|
35
|
-
*/
|
36
|
-
defaultChecked?: boolean;
|
37
|
-
/**
|
38
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
39
|
-
* Mutually exclusive with `defaultChecked` prop.
|
40
|
-
*/
|
41
|
-
checked?: boolean;
|
42
|
-
/**
|
43
|
-
* Whether the Switch should be disabled.
|
44
|
-
*
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
disabled?: boolean;
|
48
|
-
/**
|
49
|
-
* Callback to be called when the `checked` value changes.
|
50
|
-
*/
|
51
|
-
onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
|
52
|
-
checked: boolean;
|
53
|
-
}) => void;
|
54
|
-
}
|
55
|
-
export interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {
|
56
|
-
}
|
57
|
-
export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
58
|
-
}
|
59
|
-
export {};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { SwitchProps, SwitchState } from './Switch.types';
|
3
|
-
/**
|
4
|
-
* Given user props, returns state and render function for a Switch.
|
5
|
-
*/
|
6
|
-
export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
|