@fluentui/react-switch 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

package/lib/components/Switch/Switch.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useSwitch } from './useSwitch';
-import { renderSwitch } from './renderSwitch';
-import { useSwitchStyles } from './useSwitchStyles';
+import { useSwitch_unstable } from './useSwitch';
+import { renderSwitch_unstable } from './renderSwitch';
+import { useSwitchStyles_unstable } from './useSwitchStyles';
 /**
  * The Switch control enables users to trigger an option on or off through pressing on the component.
  */
 
-export var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useSwitch(props, ref);
-  useSwitchStyles(state);
-  return renderSwitch(state);
+export const Switch = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSwitch_unstable(props, ref);
+  useSwitchStyles_unstable(state);
+  return renderSwitch_unstable(state);
 });
 Switch.displayName = 'Switch';
 //# sourceMappingURL=Switch.js.map

package/lib/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAIA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}
+{"version":3,"sources":["components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Switch control enables users to trigger an option on or off through pressing on the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}

package/lib/components/Switch/Switch.types.d.ts

@@ -1,32 +1,32 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type SwitchSlots = {
     /**
      * The root of the Switch.
      */
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
     /**
      * The bar indicating the status of the Switch.
      */
-    track: IntrinsicShorthandProps<'div'>;
+    track: NonNullable<Slot<'div'>>;
     /**
      * The wrapper around the thumb. It is used as the active area for the thumb to position itself.
      */
-    thumbWrapper: IntrinsicShorthandProps<'div'>;
+    thumbWrapper: NonNullable<Slot<'div'>>;
     /**
      * The circular icon indicating the status of the Switch.
      */
-    thumb: IntrinsicShorthandProps<'div'>;
+    thumb: NonNullable<Slot<'div'>>;
     /**
      * The hidden input that handles the Switch's internal functionality.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
      * The area in which the Switch's rail allows for the thumb to be dragged.
      */
-    activeRail: IntrinsicShorthandProps<'div'>;
+    activeRail: NonNullable<Slot<'div'>>;
 };
-export interface SwitchCommons {
+interface SwitchCommons {
     /**
      * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
      * Mutually exclusive with `checked` prop.
@@ -52,7 +52,8 @@ export interface SwitchCommons {
         checked: boolean;
     }) => void;
 }
-export interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
+export interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {
 }
 export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
 }
+export {};

package/lib/components/Switch/Switch.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.types.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":""}
+{"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, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root of the Switch.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * The bar indicating the status of the Switch.\n   */\n  track: NonNullable<Slot<'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: NonNullable<Slot<'div'>>;\n\n  /**\n   * The circular icon indicating the status of the Switch.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input that handles the Switch's internal functionality.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The area in which the Switch's rail allows for the thumb to be dragged.\n   */\n  activeRail: NonNullable<Slot<'div'>>;\n};\n\ninterface 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.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,\n    data: {\n      checked: boolean;\n    },\n  ) => void;\n}\n\nexport interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {}\n\nexport interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {}\n"]}

package/lib/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n"]}

package/lib/components/Switch/renderSwitch.d.ts

@@ -2,4 +2,4 @@ import type { SwitchState } from './Switch.types';
 /**
  * Render the final JSX of Switch
  */
-export declare const renderSwitch: (state: SwitchState) => JSX.Element;
+export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;

package/lib/components/Switch/renderSwitch.js

@@ -1,16 +1,20 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { switchShorthandProps } from './useSwitch';
 /**
  * Render the final JSX of Switch
  */
 
-export var renderSwitch = function (state) {
-  var _a = getSlots(state, switchShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.track, __assign({}, slotProps.track)), /*#__PURE__*/React.createElement(slots.thumbWrapper, __assign({}, slotProps.thumbWrapper), /*#__PURE__*/React.createElement(slots.thumb, __assign({}, slotProps.thumb))), /*#__PURE__*/React.createElement(slots.input, __assign({}, slotProps.input)), /*#__PURE__*/React.createElement(slots.activeRail, __assign({}, slotProps.activeRail)));
+export const renderSwitch_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.track, { ...slotProps.track
+  }), /*#__PURE__*/React.createElement(slots.thumbWrapper, { ...slotProps.thumbWrapper
+  }, /*#__PURE__*/React.createElement(slots.thumb, { ...slotProps.thumb
+  })), /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), /*#__PURE__*/React.createElement(slots.activeRail, { ...slotProps.activeRail
+  }));
 };
 //# sourceMappingURL=renderSwitch.js.map

package/lib/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/renderSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,oBAAT,QAAqC,aAArC;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,QAAQ,CAAc,KAAd,EAAqB,oBAArB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,CAFF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CALF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CANF,CADF;AAUD,CAbM","sourceRoot":""}
+{"version":3,"sources":["components/Switch/renderSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAnB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,CAFF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CALF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CANF,CADF;AAUD,CAbM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render the final JSX of Switch\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state);\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.activeRail {...slotProps.activeRail} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Switch/useSwitch.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
-/**
- * Array of all shorthand properties listed in SwitchSlots
- */
-export declare const switchShorthandProps: (keyof SwitchSlots)[];
+import type { SwitchProps, SwitchState } from './Switch.types';
 /**
  * Given user props, returns state and render function for a Switch.
  */
-export declare const useSwitch: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
+export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;

package/lib/components/Switch/useSwitch.js

@@ -1,35 +1,31 @@
-import { __assign } from "tslib";
 import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 import { useSwitchState } from './useSwitchState';
-/**
- * Array of all shorthand properties listed in SwitchSlots
- */
-
-export var switchShorthandProps = ['root', 'track', 'thumbWrapper', 'thumb', 'activeRail', 'input'];
 /**
  * Given user props, returns state and render function for a Switch.
  */
 
-export var useSwitch = function (props, ref) {
-  var track = props.track,
-      thumbWrapper = props.thumbWrapper,
-      thumb = props.thumb,
-      activeRail = props.activeRail,
-      input = props.input,
-      defaultChecked = props.defaultChecked,
-      checked = props.checked,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var state = {
-    defaultChecked: defaultChecked,
-    checked: checked,
-    disabled: disabled,
-    onChange: onChange,
-    root: getNativeElementProps('span', __assign(__assign({
-      ref: ref
-    }, props), {
+export const useSwitch_unstable = (props, ref) => {
+  const {
+    track,
+    thumbWrapper,
+    thumb,
+    activeRail,
+    input,
+    defaultChecked,
+    checked,
+    disabled,
+    onChange
+  } = props;
+  const state = {
+    defaultChecked,
+    checked,
+    disabled,
+    onChange,
+    root: getNativeElementProps('span', {
+      ref,
+      ...props,
       id: useId('switch-', props.id)
-    })),
+    }),
     components: {
       root: 'div',
       track: 'div',

package/lib/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/useSwitch.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAA0B,CACzD,MADyD,EAEzD,OAFyD,EAGzD,cAHyD,EAIzD,OAJyD,EAKzD,YALyD,EAMzD,OANyD,CAApD;AASP;;AAEG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAgD;AAC/D,MAAA,KAAK,GAA0F,KAAK,CAA/F,KAAL;AAAA,MAAO,YAAY,GAA4E,KAAK,CAAjF,YAAnB;AAAA,MAAqB,KAAK,GAAqE,KAAK,CAA1E,KAA1B;AAAA,MAA4B,UAAU,GAAyD,KAAK,CAA9D,UAAtC;AAAA,MAAwC,KAAK,GAAkD,KAAK,CAAvD,KAA7C;AAAA,MAA+C,cAAc,GAAkC,KAAK,CAAvC,cAA7D;AAAA,MAA+D,OAAO,GAAyB,KAAK,CAA9B,OAAtE;AAAA,MAAwE,QAAQ,GAAe,KAAK,CAApB,QAAhF;AAAA,MAAkF,QAAQ,GAAK,KAAK,CAAV,QAA1F;AACR,MAAM,KAAK,GAAgB;AACzB,IAAA,cAAc,EAAA,cADW;AAEzB,IAAA,OAAO,EAAA,OAFkB;AAGzB,IAAA,QAAQ,EAAA,QAHiB;AAIzB,IAAA,QAAQ,EAAA,QAJiB;AAKzB,IAAA,IAAI,EAAE,qBAAqB,CAAC,MAAD,EAAO,QAAA,CAAA,QAAA,CAAA;AAChC,MAAA,GAAG,EAAA;AAD6B,KAAA,EAE7B,KAF6B,CAAA,EAExB;AACR,MAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB;AADD,KAFwB,CAAP,CALF;AAUzB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,YAAY,EAAE,KAHJ;AAIV,MAAA,KAAK,EAAE,KAJG;AAKV,MAAA,UAAU,EAAE,KALF;AAMV,MAAA,KAAK,EAAE;AANG,KAVa;AAkBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CAlBE;AAmBzB,IAAA,YAAY,EAAE,gBAAgB,CAAC,YAAD,EAAe;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAf,CAnBL;AAoBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CApBE;AAqBzB,IAAA,UAAU,EAAE,gBAAgB,CAAC,UAAD,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CArBH;AAsBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM;AAFe,KAAR;AAtBE,GAA3B;AA8BA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAnCM","sourceRoot":""}
+{"version":3,"sources":["components/Switch/useSwitch.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;AACjG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,YAAT;AAAuB,IAAA,KAAvB;AAA8B,IAAA,UAA9B;AAA0C,IAAA,KAA1C;AAAiD,IAAA,cAAjD;AAAiE,IAAA,OAAjE;AAA0E,IAAA,QAA1E;AAAoF,IAAA;AAApF,MAAiG,KAAvG;AACA,QAAM,KAAK,GAAgB;AACzB,IAAA,cADyB;AAEzB,IAAA,OAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,QAJyB;AAKzB,IAAA,IAAI,EAAE,qBAAqB,CAAC,MAAD,EAAS;AAClC,MAAA,GADkC;AAElC,SAAG,KAF+B;AAGlC,MAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB;AAHyB,KAAT,CALF;AAUzB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,YAAY,EAAE,KAHJ;AAIV,MAAA,KAAK,EAAE,KAJG;AAKV,MAAA,UAAU,EAAE,KALF;AAMV,MAAA,KAAK,EAAE;AANG,KAVa;AAkBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CAlBE;AAmBzB,IAAA,YAAY,EAAE,gBAAgB,CAAC,YAAD,EAAe;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAf,CAnBL;AAoBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CApBE;AAqBzB,IAAA,UAAU,EAAE,gBAAgB,CAAC,UAAD,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CArBH;AAsBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM;AAFe,KAAR;AAtBE,GAA3B;AA8BA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAnCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSwitchState } from './useSwitchState';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Given user props, returns state and render function for a Switch.\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLElement>): SwitchState => {\n  const { track, thumbWrapper, thumb, activeRail, 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      activeRail: 'div',\n      input: 'input',\n    },\n    track: resolveShorthand(track, { required: true }),\n    thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n    activeRail: resolveShorthand(activeRail, { 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"],"sourceRoot":"../src/"}

package/lib/components/Switch/useSwitchState.js

@@ -3,51 +3,43 @@ import { clamp, useBoolean, useControllableState, useEventCallback, useMergedRef
 import { useFluent } from '@fluentui/react-shared-contexts'; // TODO: This should be replaced with a useEvent hook
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var on = function (element, eventName, callback) {
+const on = (element, eventName, callback) => {
   element.addEventListener(eventName, callback);
-  return function () {
-    return element.removeEventListener(eventName, callback);
-  };
+  return () => element.removeEventListener(eventName, callback);
 };
 
-export var useSwitchState = function (state) {
-  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;
-  var _c = state.root,
-      onPointerDownCallback = _c.onPointerDown,
-      onKeyUpCallback = _c.onKeyUp;
-  var dir = useFluent().dir;
-  var inputRef = useMergedRefs(state.input.ref);
-  var railRef = React.useRef(null);
-  var internalState = React.useRef({
+export const useSwitchState = state => {
+  const {
+    defaultChecked = false,
+    checked,
+    disabled = false,
+    onChange
+  } = state;
+  const {
+    onPointerDown: onPointerDownCallback,
+    onKeyUp: onKeyUpCallback
+  } = state.root;
+  const {
+    dir
+  } = useFluent();
+  const inputRef = useMergedRefs(state.input.ref);
+  const railRef = React.useRef(null);
+  const internalState = React.useRef({
     internalValue: checked ? checked : defaultChecked,
     thumbIsDragging: false,
     disposables: []
   });
-
-  var _d = useControllableState({
+  const [currentValue, setCurrentValue] = useControllableState({
     defaultState: defaultChecked,
     state: checked,
     initialState: false
-  }),
-      currentValue = _d[0],
-      setCurrentValue = _d[1];
-
-  var _e = useBoolean(true),
-      thumbAnimation = _e[0],
-      _f = _e[1],
-      showThumbAnimation = _f.setTrue,
-      hideThumbAnimation = _f.setFalse;
-
-  var _g = React.useState(currentValue === true ? 100 : 0),
-      renderedPosition = _g[0],
-      setRenderedPosition = _g[1];
-
-  var setChecked = useEventCallback(function (ev, incomingValue) {
+  });
+  const [thumbAnimation, {
+    setTrue: showThumbAnimation,
+    setFalse: hideThumbAnimation
+  }] = useBoolean(true);
+  const [renderedPosition, setRenderedPosition] = React.useState(undefined);
+  const setChecked = useEventCallback((ev, incomingValue) => {
     ev.stopPropagation();
     ev.preventDefault();
     internalState.current.internalValue = incomingValue;
@@ -57,17 +49,17 @@ export var useSwitchState = function (state) {
     setCurrentValue(incomingValue);
     setRenderedPosition(undefined);
   });
-  var calculatePosition = React.useCallback(function (ev) {
+  const calculatePosition = React.useCallback(ev => {
     var _a;
 
-    var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    var railWidth = currentBounds.width;
-    var railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
-    var distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
+    const currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const railWidth = currentBounds.width;
+    const railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
+    const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
     return clamp(distance / railWidth * 100, 0, 100);
   }, [dir]);
-  var onPointerMove = React.useCallback(function (ev) {
-    var incomingPosition = calculatePosition(ev);
+  const onPointerMove = React.useCallback(ev => {
+    const incomingPosition = calculatePosition(ev);
     internalState.current.thumbIsDragging = true;
     hideThumbAnimation();
     setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
@@ -78,15 +70,13 @@ export var useSwitchState = function (state) {
       setChecked(ev, false);
     }
   }, [calculatePosition, hideThumbAnimation, setChecked]);
-  var onPointerUp = React.useCallback(function (ev) {
-    internalState.current.disposables.forEach(function (dispose) {
-      return dispose();
-    });
+  const onPointerUp = React.useCallback(ev => {
+    internalState.current.disposables.forEach(dispose => dispose());
     internalState.current.disposables = [];
     inputRef.current.focus();
 
     if (internalState.current.thumbIsDragging) {
-      var roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
+      const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
       showThumbAnimation();
 
       if (roundedPosition === 100) {
@@ -98,35 +88,37 @@ export var useSwitchState = function (state) {
       setChecked(ev, !internalState.current.internalValue);
     }
   }, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
-  var onPointerDown = React.useCallback(function (ev) {
+  const onPointerDown = React.useCallback(ev => {
     var _a;
 
-    var pointerId = ev.pointerId;
-    var target = ev.target;
+    const {
+      pointerId
+    } = ev;
+    const target = ev.target;
     onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
     showThumbAnimation();
     (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
     internalState.current.thumbIsDragging = false;
-    internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), function () {
+    internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {
       var _a;
 
       (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
     });
   }, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
-  var onKeyUp = React.useCallback(function (ev) {
+  const onKeyUp = React.useCallback(ev => {
     onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
 
     if (ev.key === ' ') {
       setChecked(ev, !internalState.current.internalValue);
     }
   }, [onKeyUpCallback, setChecked]);
-  var currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
-  var rootStyles = {
+  const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
+  const rootStyles = {
     '--switch-checked-opacity': currentPosition / 100,
     '--switch-unchecked-opacity': (100 - currentPosition) / 100
   };
-  var thumbWrapperStyles = {
-    transform: "translate(" + (dir === 'rtl' ? -currentPosition : currentPosition) + "%)",
+  const thumbWrapperStyles = {
+    transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,
     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'
   }; // Root Props
 

package/lib/components/Switch/useSwitchState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { SwitchState } from './Switch.types';\n\ntype SwitchInternalState = {\n  /**\n   * The internal rendered value of the Switch.\n   */\n  internalValue: boolean;\n\n  /**\n   * Whether the thumb is currently being dragged.\n   */\n  thumbIsDragging: boolean;\n\n  /**\n   * Disposable events for the Switch.\n   */\n  disposables: (() => void)[];\n};\n\n// TODO: This should be replaced with a useEvent hook\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst on = (element: Element, eventName: string, callback: (ev: any) => void) => {\n  element.addEventListener(eventName, callback);\n  return () => element.removeEventListener(eventName, callback);\n};\n\nexport const useSwitchState = (state: SwitchState) => {\n  const { defaultChecked = false, checked, disabled = false, onChange } = state;\n  const { onPointerDown: onPointerDownCallback, onKeyUp: onKeyUpCallback } = state.root;\n\n  const { dir } = useFluent();\n  const inputRef = useMergedRefs(state.input.ref);\n  const railRef = React.useRef<HTMLDivElement>(null);\n  const internalState = React.useRef<SwitchInternalState>({\n    internalValue: checked ? checked : defaultChecked,\n    thumbIsDragging: false,\n    disposables: [],\n  });\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    defaultState: defaultChecked,\n    state: checked,\n    initialState: false,\n  });\n  const [thumbAnimation, { setTrue: showThumbAnimation, setFalse: hideThumbAnimation }] = useBoolean(true);\n  const [renderedPosition, setRenderedPosition] = React.useState<number | undefined>(undefined);\n\n  const setChecked = useEventCallback(\n    (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, incomingValue: boolean) => {\n      ev.stopPropagation();\n      ev.preventDefault();\n      internalState.current.internalValue = incomingValue;\n      onChange?.(ev, { checked: incomingValue });\n      setCurrentValue(incomingValue);\n      setRenderedPosition(undefined);\n    },\n  );\n\n  const calculatePosition = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): number => {\n      const currentBounds = railRef?.current?.getBoundingClientRect();\n      const railWidth = currentBounds!.width;\n      const railPosition = dir === 'rtl' ? currentBounds!.right : currentBounds!.left;\n      const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;\n      return clamp((distance / railWidth) * 100, 0, 100);\n    },\n    [dir],\n  );\n\n  const onPointerMove = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const incomingPosition = calculatePosition(ev);\n\n      internalState.current.thumbIsDragging = true;\n      hideThumbAnimation();\n      setRenderedPosition(incomingPosition);\n\n      // If the Switch reaches a new position of 0% or 100%, update the state and fire change.\n      if (incomingPosition === 100 && internalState.current.internalValue !== true) {\n        setChecked(ev, true);\n      } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {\n        setChecked(ev, false);\n      }\n    },\n    [calculatePosition, hideThumbAnimation, setChecked],\n  );\n\n  const onPointerUp = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      internalState.current.disposables.forEach(dispose => dispose());\n      internalState.current.disposables = [];\n      inputRef.current!.focus();\n\n      if (internalState.current.thumbIsDragging) {\n        const roundedPosition = Math.round(calculatePosition(ev)! / 100) * 100;\n\n        showThumbAnimation();\n        if (roundedPosition === 100) {\n          setChecked(ev, true);\n        } else if (roundedPosition === 0) {\n          setChecked(ev, false);\n        }\n      } else {\n        setChecked(ev, !internalState.current.internalValue);\n      }\n    },\n    [calculatePosition, inputRef, setChecked, showThumbAnimation],\n  );\n\n  const onPointerDown = React.useCallback(\n    (ev: React.PointerEvent<HTMLDivElement>): void => {\n      const { pointerId } = ev;\n      const target = ev.target as HTMLElement;\n\n      onPointerDownCallback?.(ev);\n      showThumbAnimation();\n      target.setPointerCapture?.(pointerId);\n      internalState.current.thumbIsDragging = false;\n\n      internalState.current.disposables.push(\n        on(target, 'pointermove', onPointerMove),\n        on(target, 'pointerup', onPointerUp),\n        () => {\n          target.releasePointerCapture?.(pointerId);\n        },\n      );\n    },\n    [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation],\n  );\n\n  const onKeyUp = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLDivElement>): void => {\n      onKeyUpCallback?.(ev);\n      if (ev.key === ' ') {\n        setChecked(ev, !internalState.current.internalValue);\n      }\n    },\n    [onKeyUpCallback, setChecked],\n  );\n\n  const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;\n\n  const rootStyles = {\n    '--switch-checked-opacity': currentPosition / 100,\n    '--switch-unchecked-opacity': (100 - currentPosition) / 100,\n  } as React.CSSProperties;\n\n  const thumbWrapperStyles = {\n    transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,\n    transition: thumbAnimation\n      ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)'\n      : 'none',\n  };\n\n  // Root Props\n  state.root.style = rootStyles;\n  if (!disabled) {\n    state.root.onPointerDown = onPointerDown;\n    state.root.onKeyUp = onKeyUp;\n  }\n\n  // Input Props\n  state.input.checked = currentValue;\n  state.input.disabled = disabled;\n  state.input.ref = inputRef;\n  state.input.readOnly = true;\n  state.input.role = 'switch';\n\n  // Thumb Container Props\n  state.thumbWrapper.style = thumbWrapperStyles;\n\n  // Active Rail Props\n  state.activeRail.ref = railRef;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Switch/useSwitchStyles.d.ts

@@ -1,5 +1,6 @@
 import type { SwitchState } from './Switch.types';
+export declare const switchClassName = "fui-Switch";
 /**
  * Apply styling to the Switch slots based on the state
  */
-export declare const useSwitchStyles: (state: SwitchState) => SwitchState;
+export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;