@fluentui/react-switch 9.0.0-beta.1 → 9.0.0-beta.5
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 +225 -1
- package/CHANGELOG.md +63 -2
- package/Spec.md +4 -4
- package/dist/react-switch.d.ts +2 -0
- package/lib/common/isConformant.js +1 -1
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Switch/Switch.js +2 -2
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +6 -7
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +22 -21
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchState.js +51 -59
- package/lib/components/Switch/useSwitchState.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +1 -0
- package/lib/components/Switch/useSwitchStyles.js +30 -29
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/Switch.js +1 -1
- package/lib-commonjs/common/isConformant.js +3 -3
- package/lib-commonjs/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +6 -6
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +9 -11
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +23 -23
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchState.js +54 -62
- package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +1 -0
- package/lib-commonjs/components/Switch/useSwitchStyles.js +33 -32
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/package.json +8 -12
@@ -5,59 +5,51 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useSwitchState = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
11
|
|
12
|
-
|
12
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts"); // TODO: This should be replaced with a useEvent hook
|
13
13
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
14
14
|
|
15
15
|
|
16
|
-
|
16
|
+
const on = (element, eventName, callback) => {
|
17
17
|
element.addEventListener(eventName, callback);
|
18
|
-
return
|
19
|
-
return element.removeEventListener(eventName, callback);
|
20
|
-
};
|
18
|
+
return () => element.removeEventListener(eventName, callback);
|
21
19
|
};
|
22
20
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
21
|
+
const useSwitchState = state => {
|
22
|
+
const {
|
23
|
+
defaultChecked = false,
|
24
|
+
checked,
|
25
|
+
disabled = false,
|
26
|
+
onChange
|
27
|
+
} = state;
|
28
|
+
const {
|
29
|
+
onPointerDown: onPointerDownCallback,
|
30
|
+
onKeyUp: onKeyUpCallback
|
31
|
+
} = state.root;
|
32
|
+
const {
|
33
|
+
dir
|
34
|
+
} = react_shared_contexts_1.useFluent();
|
35
|
+
const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
|
36
|
+
const railRef = React.useRef(null);
|
37
|
+
const internalState = React.useRef({
|
37
38
|
internalValue: checked ? checked : defaultChecked,
|
38
39
|
thumbIsDragging: false,
|
39
40
|
disposables: []
|
40
41
|
});
|
41
|
-
|
42
|
-
var _d = react_utilities_1.useControllableState({
|
42
|
+
const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
|
43
43
|
defaultState: defaultChecked,
|
44
44
|
state: checked,
|
45
45
|
initialState: false
|
46
|
-
})
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
showThumbAnimation = _f.setTrue,
|
54
|
-
hideThumbAnimation = _f.setFalse;
|
55
|
-
|
56
|
-
var _g = React.useState(currentValue === true ? 100 : 0),
|
57
|
-
renderedPosition = _g[0],
|
58
|
-
setRenderedPosition = _g[1];
|
59
|
-
|
60
|
-
var setChecked = react_utilities_1.useEventCallback(function (ev, incomingValue) {
|
46
|
+
});
|
47
|
+
const [thumbAnimation, {
|
48
|
+
setTrue: showThumbAnimation,
|
49
|
+
setFalse: hideThumbAnimation
|
50
|
+
}] = react_utilities_1.useBoolean(true);
|
51
|
+
const [renderedPosition, setRenderedPosition] = React.useState(currentValue === true ? 100 : 0);
|
52
|
+
const setChecked = react_utilities_1.useEventCallback((ev, incomingValue) => {
|
61
53
|
ev.stopPropagation();
|
62
54
|
ev.preventDefault();
|
63
55
|
internalState.current.internalValue = incomingValue;
|
@@ -67,17 +59,17 @@ var useSwitchState = function (state) {
|
|
67
59
|
setCurrentValue(incomingValue);
|
68
60
|
setRenderedPosition(undefined);
|
69
61
|
});
|
70
|
-
|
62
|
+
const calculatePosition = React.useCallback(ev => {
|
71
63
|
var _a;
|
72
64
|
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
65
|
+
const currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
66
|
+
const railWidth = currentBounds.width;
|
67
|
+
const railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
|
68
|
+
const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
|
77
69
|
return react_utilities_1.clamp(distance / railWidth * 100, 0, 100);
|
78
70
|
}, [dir]);
|
79
|
-
|
80
|
-
|
71
|
+
const onPointerMove = React.useCallback(ev => {
|
72
|
+
const incomingPosition = calculatePosition(ev);
|
81
73
|
internalState.current.thumbIsDragging = true;
|
82
74
|
hideThumbAnimation();
|
83
75
|
setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
|
@@ -88,15 +80,13 @@ var useSwitchState = function (state) {
|
|
88
80
|
setChecked(ev, false);
|
89
81
|
}
|
90
82
|
}, [calculatePosition, hideThumbAnimation, setChecked]);
|
91
|
-
|
92
|
-
internalState.current.disposables.forEach(
|
93
|
-
return dispose();
|
94
|
-
});
|
83
|
+
const onPointerUp = React.useCallback(ev => {
|
84
|
+
internalState.current.disposables.forEach(dispose => dispose());
|
95
85
|
internalState.current.disposables = [];
|
96
86
|
inputRef.current.focus();
|
97
87
|
|
98
88
|
if (internalState.current.thumbIsDragging) {
|
99
|
-
|
89
|
+
const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
|
100
90
|
showThumbAnimation();
|
101
91
|
|
102
92
|
if (roundedPosition === 100) {
|
@@ -108,35 +98,37 @@ var useSwitchState = function (state) {
|
|
108
98
|
setChecked(ev, !internalState.current.internalValue);
|
109
99
|
}
|
110
100
|
}, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
|
111
|
-
|
101
|
+
const onPointerDown = React.useCallback(ev => {
|
112
102
|
var _a;
|
113
103
|
|
114
|
-
|
115
|
-
|
104
|
+
const {
|
105
|
+
pointerId
|
106
|
+
} = ev;
|
107
|
+
const target = ev.target;
|
116
108
|
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
|
117
109
|
showThumbAnimation();
|
118
110
|
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
119
111
|
internalState.current.thumbIsDragging = false;
|
120
|
-
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp),
|
112
|
+
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {
|
121
113
|
var _a;
|
122
114
|
|
123
115
|
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
124
116
|
});
|
125
117
|
}, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
|
126
|
-
|
127
|
-
|
118
|
+
const onKeyUp = React.useCallback(ev => {
|
119
|
+
onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
|
128
120
|
|
129
121
|
if (ev.key === ' ') {
|
130
122
|
setChecked(ev, !internalState.current.internalValue);
|
131
123
|
}
|
132
|
-
}, [
|
133
|
-
|
134
|
-
|
124
|
+
}, [onKeyUpCallback, setChecked]);
|
125
|
+
const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
|
126
|
+
const rootStyles = {
|
135
127
|
'--switch-checked-opacity': currentPosition / 100,
|
136
128
|
'--switch-unchecked-opacity': (100 - currentPosition) / 100
|
137
129
|
};
|
138
|
-
|
139
|
-
transform:
|
130
|
+
const thumbWrapperStyles = {
|
131
|
+
transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,
|
140
132
|
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'
|
141
133
|
}; // Root Props
|
142
134
|
|
@@ -144,7 +136,7 @@ var useSwitchState = function (state) {
|
|
144
136
|
|
145
137
|
if (!disabled) {
|
146
138
|
state.root.onPointerDown = onPointerDown;
|
147
|
-
state.root.
|
139
|
+
state.root.onKeyUp = onKeyUp;
|
148
140
|
} // Input Props
|
149
141
|
|
150
142
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -3,20 +3,20 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useSwitchStyles = void 0;
|
6
|
+
exports.useSwitchStyles = exports.switchClassName = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
|
9
9
|
|
10
|
-
|
10
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
11
11
|
|
12
|
-
|
13
|
-
|
14
|
-
|
12
|
+
exports.switchClassName = 'fui-Switch';
|
13
|
+
const trackClassName = `${exports.switchClassName}-track`;
|
14
|
+
const thumbClassName = `${exports.switchClassName}-thumb`;
|
15
15
|
/**
|
16
16
|
* Styles for the root slot
|
17
17
|
*/
|
18
18
|
|
19
|
-
|
19
|
+
const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
20
20
|
"root": {
|
21
21
|
"B64q66w": "frxo1y7",
|
22
22
|
"yvbau0": "fe5s2ct",
|
@@ -32,15 +32,15 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
32
32
|
"ha4doy": "f1qdqbpl"
|
33
33
|
},
|
34
34
|
"unchecked": {
|
35
|
-
"
|
36
|
-
"
|
37
|
-
"
|
38
|
-
"
|
39
|
-
"
|
35
|
+
"C1ct7f": "f1576je",
|
36
|
+
"B638aae": "fhwgkv7",
|
37
|
+
"Hdeks4": ["f1cjufhn", "f1395m7v"],
|
38
|
+
"sn1se1": "fyo9fdn",
|
39
|
+
"Bspkfwm": ["f1395m7v", "f1cjufhn"]
|
40
40
|
},
|
41
41
|
"checked": {
|
42
|
-
"
|
43
|
-
"
|
42
|
+
"B0mj7kb": "fj7b6zc",
|
43
|
+
"B64bwki": "fykva8d"
|
44
44
|
},
|
45
45
|
"enabled": {
|
46
46
|
"H36rlo": "felqjlh",
|
@@ -81,8 +81,8 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
81
81
|
}
|
82
82
|
}, {
|
83
83
|
"d": [".frxo1y7{--switch-width:40px;}", ".fe5s2ct{--switch-height:20px;}", ".f1n6k660{--switch-thumb-size:14px;}", ".f17m95gg{--switch-checked-opacity:0;}", ".fp7zjh8{--switch-unchecked-opacity:0;}", ".f10pi13n{position:relative;}", ".fnceurk{width:var(--switch-width);}", ".f15da5dy{height:var(--switch-height);}", ".f14t3ns0{display:inline-block;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f1qdqbpl{vertical-align:bottom;}", ".felqjlh{-webkit-tap-highlight-color:rgba(0,0,0,0);}", ".f1k6fduh{cursor:pointer;}", ".fdrzuqr{cursor:not-allowed;}", ".f1aehjj5{pointer-events:none;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1rh66yx:focus-within:after{top:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f19ibq92:focus-within:after{bottom:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .fc3tncn:focus-within:after{left:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1veb610:focus-within:after{right:calc(0px - 2px - 8px);}"],
|
84
|
-
"h": [".
|
85
|
-
"a": [".
|
84
|
+
"h": [".f1576je:hover .fui-Switch-thumb:before{background:var(--colorNeutralStrokeAccessibleHover);}", ".fhwgkv7:hover .fui-Switch-track:before{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1cjufhn:hover .fui-Switch-track:before{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1395m7v:hover .fui-Switch-track:before{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fyo9fdn:hover .fui-Switch-track:before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".fj7b6zc:hover .fui-Switch-track:after{background:var(--colorBrandBackgroundHover);}"],
|
85
|
+
"a": [".fykva8d:active .fui-Switch-track:after{background:var(--colorBrandBackgroundPressed);}"],
|
86
86
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
87
87
|
});
|
88
88
|
/**
|
@@ -90,7 +90,7 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
90
90
|
*/
|
91
91
|
|
92
92
|
|
93
|
-
|
93
|
+
const useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
94
94
|
"track": {
|
95
95
|
"qhf8xq": "f1euv43f",
|
96
96
|
"a9b677": "fly5x3f",
|
@@ -176,7 +176,7 @@ var useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
176
176
|
*/
|
177
177
|
|
178
178
|
|
179
|
-
|
179
|
+
const useThumbWrapperStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
180
180
|
"thumbWrapper": {
|
181
181
|
"qhf8xq": "f1euv43f",
|
182
182
|
"Bhzewxz": "f15twtuk",
|
@@ -194,7 +194,7 @@ var useThumbWrapperStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
194
194
|
*/
|
195
195
|
|
196
196
|
|
197
|
-
|
197
|
+
const useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
198
198
|
"thumb": {
|
199
199
|
"qhf8xq": "f1euv43f",
|
200
200
|
"a9b677": "fcjrtee",
|
@@ -255,7 +255,7 @@ var useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
255
255
|
*/
|
256
256
|
|
257
257
|
|
258
|
-
|
258
|
+
const useActiveRailStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
259
259
|
"activeRail": {
|
260
260
|
"qhf8xq": "f1euv43f",
|
261
261
|
"oyh7mz": ["fhpx7ww", "f1kctpth"],
|
@@ -269,7 +269,7 @@ var useActiveRailStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
269
269
|
*/
|
270
270
|
|
271
271
|
|
272
|
-
|
272
|
+
const useInputStyle = /*#__PURE__*/react_make_styles_1.__styles({
|
273
273
|
"input": {
|
274
274
|
"abs64n": "fk73vx1",
|
275
275
|
"qhf8xq": "f1euv43f",
|
@@ -294,17 +294,18 @@ var useInputStyle = /*#__PURE__*/react_make_styles_1.__styles({
|
|
294
294
|
*/
|
295
295
|
|
296
296
|
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
297
|
+
const useSwitchStyles = state => {
|
298
|
+
const {
|
299
|
+
checked,
|
300
|
+
disabled
|
301
|
+
} = state.input;
|
302
|
+
const rootStyles = useRootStyles();
|
303
|
+
const trackStyles = useTrackStyles();
|
304
|
+
const thumbWrapperStyles = useThumbWrapperStyles();
|
305
|
+
const thumbStyles = useThumbStyles();
|
306
|
+
const activeRailStyles = useActiveRailStyles();
|
307
|
+
const inputStyles = useInputStyle();
|
308
|
+
state.root.className = react_make_styles_1.mergeClasses(exports.switchClassName + (checked ? ' checked' : ''), rootStyles.root, rootStyles.focusIndicator, !disabled && rootStyles.checked, !disabled && rootStyles.unchecked, disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
|
308
309
|
state.track.className = react_make_styles_1.mergeClasses(trackClassName, trackStyles.track, !disabled && trackStyles.checked, !disabled && trackStyles.unchecked, disabled && trackStyles.disabledChecked, disabled && trackStyles.disabledUnchecked, state.track.className);
|
309
310
|
state.thumbWrapper.className = react_make_styles_1.mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);
|
310
311
|
state.thumb.className = react_make_styles_1.mergeClasses(thumbClassName, thumbStyles.thumb, !disabled && thumbStyles.checked, !disabled && thumbStyles.unchecked, disabled && thumbStyles.disabledChecked, disabled && thumbStyles.disabledUnchecked, state.thumb.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
package/lib-commonjs/index.js
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "9.0.0-beta.
|
3
|
+
"version": "9.0.0-beta.5",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -25,14 +25,11 @@
|
|
25
25
|
"storybook": "start-storybook"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
|
-
"@fluentui/babel-make-styles": "9.0.0-beta.
|
28
|
+
"@fluentui/babel-make-styles": "9.0.0-beta.4",
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-beta.
|
30
|
+
"@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
|
31
31
|
"@fluentui/react-conformance": "*",
|
32
|
-
"@fluentui/react-conformance-make-styles": "9.0.0-beta.
|
33
|
-
"@fluentui/react-label": "9.0.0-beta.1",
|
34
|
-
"@fluentui/react-provider": "9.0.0-beta.1",
|
35
|
-
"@fluentui/react-theme": "9.0.0-beta.1",
|
32
|
+
"@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
|
36
33
|
"@fluentui/scripts": "^1.0.0",
|
37
34
|
"@types/enzyme": "3.10.3",
|
38
35
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
@@ -46,10 +43,10 @@
|
|
46
43
|
"react-test-renderer": "^16.3.0"
|
47
44
|
},
|
48
45
|
"dependencies": {
|
49
|
-
"@fluentui/react-make-styles": "9.0.0-beta.
|
50
|
-
"@fluentui/react-shared-contexts": "9.0.0-beta.
|
51
|
-
"@fluentui/react-tabster": "9.0.0-beta.
|
52
|
-
"@fluentui/react-utilities": "9.0.0-beta.
|
46
|
+
"@fluentui/react-make-styles": "9.0.0-beta.4",
|
47
|
+
"@fluentui/react-shared-contexts": "9.0.0-beta.4",
|
48
|
+
"@fluentui/react-tabster": "9.0.0-beta.5",
|
49
|
+
"@fluentui/react-utilities": "9.0.0-beta.4",
|
53
50
|
"tslib": "^2.1.0"
|
54
51
|
},
|
55
52
|
"peerDependencies": {
|
@@ -59,7 +56,6 @@
|
|
59
56
|
"react-dom": ">=16.8.0 <18.0.0"
|
60
57
|
},
|
61
58
|
"beachball": {
|
62
|
-
"tag": "beta",
|
63
59
|
"disallowedChangeTypes": [
|
64
60
|
"major",
|
65
61
|
"minor",
|