@fluentui/react-switch 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

package/dist/react-switch.d.ts

@@ -1,92 +1,106 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
- * Render the final JSX of Switch
+ * Render a Switch component by passing the state defined props to the appropriate slots.
  */
-export declare const renderSwitch: (state: SwitchState) => JSX.Element;
+export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
 
 /**
- * The Switch control enables users to trigger an option on or off through pressing on the component.
+ * Switches enable users to trigger an option on or off through pressing the component.
  */
 export declare const Switch: ForwardRefComponent<SwitchProps>;
 
-export declare interface SwitchCommons {
+export declare const switchClassName: string;
+
+export declare const switchClassNames: {
+    [SlotName in keyof SwitchSlots]-?: string;
+};
+
+declare type SwitchCommons = {
     /**
-     * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
-     * Mutually exclusive with `checked` prop.
-     *
+     * Defines the controlled checked state of the Switch.
+     * If passed, Switch ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onChange` events and re-rendering.
      * @default false
      */
-    defaultChecked?: boolean;
-    /**
-     * The current value for a controlled Switch. If `true` then the Switch will be enabled.
-     * Mutually exclusive with `defaultChecked` prop.
-     */
     checked?: boolean;
     /**
-     * Whether the Switch should be disabled.
+     * The position of the label relative to the Switch.
      *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback to be called when the `checked` value changes.
+     * @default after
      */
-    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
-        checked: boolean;
-    }) => void;
-}
+    labelPosition: 'above' | 'after' | 'before';
+};
 
-export declare interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
-}
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
 
 /**
- * Array of all shorthand properties listed in SwitchSlots
+ * Switch Props
  */
-export declare const switchShorthandProps: (keyof SwitchSlots)[];
-
-export declare type SwitchSlots = {
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
     /**
-     * The root of the Switch.
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     * @default false
      */
-    root: IntrinsicShorthandProps<'div'>;
+    defaultChecked?: boolean;
     /**
-     * The bar indicating the status of the Switch.
+     * Callback to be called when the checked state value changes.
      */
-    track: IntrinsicShorthandProps<'div'>;
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+
+export declare type SwitchSlots = {
     /**
-     * The wrapper around the thumb. It is used as the active area for the thumb to position itself.
+     * The root element of the Switch.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
+     * All other native props will be applied to the primary slot: `input`.
      */
-    thumbWrapper: IntrinsicShorthandProps<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
-     * The circular icon indicating the status of the Switch.
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
      */
-    thumb: IntrinsicShorthandProps<'div'>;
+    indicator: NonNullable<Slot<'div'>>;
     /**
-     * The hidden input that handles the Switch's internal functionality.
+     * Hidden input that handles the Switch's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
+     * slot, except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
-     * The area in which the Switch's rail allows for the thumb to be dragged.
+     * The Switch's label.
      */
-    activeRail: IntrinsicShorthandProps<'div'>;
+    label?: Slot<typeof Label>;
 };
 
-export declare interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
-}
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & SwitchCommons;
 
 /**
- * Given user props, returns state and render function for a Switch.
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
  */
-export declare const useSwitch: (props: SwitchProps, ref: React_2.Ref<HTMLElement>) => SwitchState;
+export declare const useSwitch_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLInputElement>) => SwitchState;
 
 /**
  * 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;
 
 export { }

package/lib/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"../src/","sources":["Switch.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Switch/index';\n"]}

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

@@ -1,6 +1,6 @@
 import type { SwitchProps } from './Switch.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * The Switch control enables users to trigger an option on or off through pressing on the component.
+ * Switches enable users to trigger an option on or off through pressing the component.
  */
 export declare const Switch: ForwardRefComponent<SwitchProps>;

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.
+ * Switches enable users to trigger an option on or off through pressing 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 * Switches enable users to trigger an option on or off through pressing 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,58 +1,65 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type SwitchSlots = {
     /**
-     * The root of the Switch.
-     */
-    root: IntrinsicShorthandProps<'div'>;
-    /**
-     * The bar indicating the status of the Switch.
-     */
-    track: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the thumb. It is used as the active area for the thumb to position itself.
+     * The root element of the Switch.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
+     * All other native props will be applied to the primary slot: `input`.
      */
-    thumbWrapper: IntrinsicShorthandProps<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
-     * The circular icon indicating the status of the Switch.
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
      */
-    thumb: IntrinsicShorthandProps<'div'>;
+    indicator: NonNullable<Slot<'div'>>;
     /**
-     * The hidden input that handles the Switch's internal functionality.
+     * Hidden input that handles the Switch's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
+     * slot, except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
-     * The area in which the Switch's rail allows for the thumb to be dragged.
+     * The Switch's label.
      */
-    activeRail: IntrinsicShorthandProps<'div'>;
+    label?: Slot<typeof Label>;
 };
-export interface SwitchCommons {
+declare type SwitchCommons = {
     /**
-     * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
-     * Mutually exclusive with `checked` prop.
-     *
+     * Defines the controlled checked state of the Switch.
+     * If passed, Switch ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onChange` events and re-rendering.
      * @default false
      */
-    defaultChecked?: boolean;
-    /**
-     * The current value for a controlled Switch. If `true` then the Switch will be enabled.
-     * Mutually exclusive with `defaultChecked` prop.
-     */
     checked?: boolean;
     /**
-     * Whether the Switch should be disabled.
+     * The position of the label relative to the Switch.
      *
+     * @default after
+     */
+    labelPosition: 'above' | 'after' | 'before';
+};
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
      * @default false
      */
-    disabled?: boolean;
+    defaultChecked?: boolean;
     /**
-     * Callback to be called when the `checked` value changes.
+     * Callback to be called when the checked state value changes.
      */
-    onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
-        checked: boolean;
-    }) => void;
-}
-export interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
-}
-export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
-}
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = 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 { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\ntype SwitchCommons = {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onChange` events and re-rendering.\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition: 'above' | 'after' | 'before';\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> &\n  Partial<SwitchCommons> & {\n    /**\n     * Defines whether the Switch is initially in a checked state or not when rendered.\n     * @default false\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Callback to be called when the checked state value changes.\n     */\n    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n  };\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = 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

@@ -1,5 +1,5 @@
 import type { SwitchState } from './Switch.types';
 /**
- * Render the final JSX of Switch
+ * Render a Switch component by passing the state defined props to the appropriate slots.
  */
-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,22 @@
-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
+ * Render a Switch component by passing the state defined props to the appropriate slots.
  */
 
-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);
+  const {
+    labelPosition
+  } = state;
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), labelPosition !== 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
+  }), labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }));
 };
 //# 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;AACA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;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,EAEG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,iBAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAF/C,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAHF,EAIG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,iBAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJ/C,CADF;AAQD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
+import type { SwitchProps, SwitchState } from './Switch.types';
 /**
- * Array of all shorthand properties listed in SwitchSlots
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
  */
-export declare const switchShorthandProps: (keyof SwitchSlots)[];
-/**
- * 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<HTMLInputElement>) => SwitchState;

package/lib/components/Switch/useSwitch.js

@@ -1,63 +1,79 @@
-import { __assign } from "tslib";
-import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
-import { useSwitchState } from './useSwitchState';
+import * as React from 'react';
+import { CircleFilled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
 /**
- * Array of all shorthand properties listed in SwitchSlots
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
  */
 
-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), {
-      id: useId('switch-', props.id)
-    })),
+export const useSwitch_unstable = (props, ref) => {
+  const {
+    checked,
+    defaultChecked,
+    disabled,
+    labelPosition = 'after',
+    onChange,
+    required
+  } = props;
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
+  });
+  const id = useId('switch-', nativeProps.primary.id);
+  const root = resolveShorthand(props.root, {
+    defaultProps: nativeProps.root,
+    required: true
+  });
+  const indicator = resolveShorthand(props.indicator, {
+    defaultProps: {
+      'aria-hidden': true,
+      children: /*#__PURE__*/React.createElement(CircleFilled, null)
+    },
+    required: true
+  });
+  const input = resolveShorthand(props.input, {
+    defaultProps: {
+      checked,
+      defaultChecked,
+      id,
+      ref,
+      role: 'switch',
+      type: 'checkbox',
+      ...nativeProps.primary
+    },
+    required: true
+  });
+  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    checked: ev.currentTarget.checked
+  }));
+  const label = resolveShorthand(props.label, {
+    defaultProps: {
+      disabled,
+      htmlFor: id,
+      required,
+      size: 'medium'
+    }
+  });
+  return {
+    labelPosition,
+    //Slots definition
     components: {
       root: 'div',
-      track: 'div',
-      thumbWrapper: 'div',
-      thumb: 'div',
-      activeRail: 'div',
-      input: 'input'
+      indicator: 'div',
+      input: 'input',
+      label: Label
     },
-    track: resolveShorthand(track, {
-      required: true
-    }),
-    thumbWrapper: resolveShorthand(thumbWrapper, {
-      required: true
-    }),
-    thumb: resolveShorthand(thumb, {
-      required: true
-    }),
-    activeRail: resolveShorthand(activeRail, {
-      required: true
-    }),
-    input: resolveShorthand(input, {
-      required: true,
-      defaultProps: {
-        type: 'checkbox'
-      }
-    })
+    root,
+    indicator,
+    input,
+    label
   };
-  useSwitchState(state);
-  return state;
 };
 //# sourceMappingURL=useSwitch.js.map

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.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,cAAX;AAA2B,IAAA,QAA3B;AAAqC,IAAA,aAAa,GAAG,OAArD;AAA8D,IAAA,QAA9D;AAAwE,IAAA;AAAxE,MAAqF,KAA3F;AAEA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,EAAE,GAAG,KAAK,CAAC,SAAD,EAAY,WAAW,CAAC,OAAZ,CAAoB,EAAhC,CAAhB;AAEA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,YAAY,EAAE,WAAW,CAAC,IADc;AAExC,IAAA,QAAQ,EAAE;AAF8B,GAAb,CAA7B;AAKA,QAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAClD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;AAFE,KADoC;AAKlD,IAAA,QAAQ,EAAE;AALwC,GAAlB,CAAlC;AAQA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OADY;AAEZ,MAAA,cAFY;AAGZ,MAAA,EAHY;AAIZ,MAAA,GAJY;AAKZ,MAAA,IAAI,EAAE,QALM;AAMZ,MAAA,IAAI,EAAE,UANM;AAOZ,SAAG,WAAW,CAAC;AAPH,KAD4B;AAU1C,IAAA,QAAQ,EAAE;AAVgC,GAAd,CAA9B;AAYA,EAAA,KAAK,CAAC,QAAN,GAAiB,uBAAuB,CAAC,KAAK,CAAC,QAAP,EAAiB,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,IAAA,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;AAA5B,GAAP,CAA/B,CAAxC;AAEA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,QADY;AAEZ,MAAA,OAAO,EAAE,EAFG;AAGZ,MAAA,QAHY;AAIZ,MAAA,IAAI,EAAE;AAJM;AAD4B,GAAd,CAA9B;AASA,SAAO;AACL,IAAA,aADK;AAGL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,SAAS,EAAE,KAFD;AAGV,MAAA,KAAK,EAAE,OAHG;AAIV,MAAA,KAAK,EAAE;AAJG,KAJP;AAWL,IAAA,IAXK;AAYL,IAAA,SAZK;AAaL,IAAA,KAbK;AAcL,IAAA;AAdK,GAAP;AAgBD,CA/DM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = resolveShorthand(props.root, {\n    defaultProps: nativeProps.root,\n    required: true,\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n    required: true,\n  });\n\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n    },\n    required: true,\n  });\n  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium',\n    },\n  });\n\n  return {\n    labelPosition,\n\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label,\n    },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,9 @@
-import type { SwitchState } from './Switch.types';
+import type { SwitchSlots, SwitchState } from './Switch.types';
+export declare const switchClassNames: {
+    [SlotName in keyof SwitchSlots]-?: string;
+};
+export declare const switchClassName: string;
 /**
  * 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;