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

package/Spec.md

@@ -1,134 +1,229 @@
 # @fluentui/react-switch Spec
 
+**GitHub Epic issue** - [Switch Convergence #19409](https://github.com/microsoft/fluentui/issues/19409)
+
 ## Background
 
-Previously called Toggle in OUFR and Checkbox in Stardust, the Switch component
-introduces a quick way of switching between Boolean values by pressing the thumb.
+Previously called `Toggle` in v8 and `Checkbox` in v0, the `Switch` component introduces a quick way of switching between on/off states by clicking/tapping the thumb.
 
 ## Prior Art
 
-Upon investigating other component libraries, it was decided to:
+### Open UI
+
+The Open UI [Switch Research](https://open-ui.org/components/switch) page shows that the component is used in UI platforms across the web, with the `Switch` moniker being the most prominently used across major component libraries.
+
+### Comparison of v8 and v0
+
+The existing components are:
+
+- v8 - [Toggle](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
+- v0 - [Checkbox](https://fluentsite.z22.web.core.windows.net/0.52.2/components/checkbox/definition)
 
-1. Change the name to Switch
+### [Toggle in v8/Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
 
-Amongst other major component libraries (`Material UI`, `Ant Design`, `Evergreen`, and `Fast`) Switch appears to be a more prominently used name.
+The v8 `Toggle` component
 
-[Open UI](https://open-ui.org/components/switch)
-[Epic Issue](https://github.com/microsoft/fluentui/issues/19409)
+supports both `indeterminate` and `checked` states. In this case, an input tag is used and its opacity is set to 0. This allows for the logic to be performed by the native element while a div is rendered to show the styled checkbox.
+
+Example
+
+```tsx
+<Checkbox
+  label="Indeterminate checkbox (controlled)"
+  indeterminate={isIndeterminate}
+  checked={isChecked}
+  onChange={onChange}
+/>
+```
+
+Component props:
+
+| Prop             | Description                                                                                                                                  |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ariaLabel`      | Text for screen-reader to announce as the name of the toggle.                                                                                |
+| `as`             | Render the root element as another type.                                                                                                     |
+| `checked`        | Checked state of the toggle. If you are maintaining state yourself, use this property. Otherwise use `defaultChecked`.                       |
+| `componentRef`   | Optional callback to access the IToggle interface. Use this instead of ref for accessing the public methods and properties of the component. |
+| `defaultChecked` | Initial state of the toggle. If you want the toggle to maintain its own state, use this. Otherwise use `checked`.                            |
+| `disabled`       | Optional disabled flag.                                                                                                                      |
+| `inlineLabel`    | Whether the label (not the onText/offText) should bbe positioned inline with the toggle control.                                             |
+| `label`          | A label for the toggle.                                                                                                                      |
+| `offText`        | Text to display when toggle is OFF.                                                                                                          |
+| `onChange`       | Callback issued when the value changes.                                                                                                      |
+| `onText`         | Text to display when toggle is ON.                                                                                                           |
+| `role`           | Whether to use the 'switch' role (ARIA 1.1) or the 'checkbox' role (ARIA 1.0).                                                               |
+| `styles`         | Optional styles for the component.                                                                                                           |
+| `theme`          | Theme provided by HOC.                                                                                                                       |
+
+### [Checkbox in v0/Northstar](https://fluentsite.z22.web.core.windows.net/0.56.0/components/checkbox/definition)
+
+The v0 `Checkbox` component
+
+supports a mixed state, which is the same as indeterminate in v8. It is rendered as a `div` with `role="checkbox"` and does not use the native input element.
+
+```tsx
+// string
+<Checkbox label="Make my profile visible" />
+
+// jsx
+<Checkbox
+  label={
+    <span>
+      Long labels will wrap and the indicator <br /> should remain top-aligned.
+    </span>
+  }
+/>
+```
+
+Component props:
+
+| Prop             | Description                                                        |
+| ---------------- | ------------------------------------------------------------------ |
+| `accessibility`  | Accessibility behavior if overridden by the user.                  |
+| `as`             | Render as given string or component.                               |
+| `checked`        | Checkbox's checked state.                                          |
+| `className`      | Additional styles.                                                 |
+| `defaultChecked` | Whether the checkbox should be set to checked by default.          |
+| `design`         | ...                                                                |
+| `disabled`       | Whether the checkbox is disabled or not.                           |
+| `indicator`      | Checkbox's icon indicator.                                         |
+| `label`          | Label text or jsx to be rendered in the label.                     |
+| `labelPosition`  | Whether the label is rendered on left or right (`start` or `end`). |
+| `onChange`       | Event handler to be called after checked state has changed.        |
+| `onClick`        | Event handler to be called after the checkbox is clicked.          |
+| `styles`         | Additional styles.                                                 |
+| `toggle`         | Render a toggle style checkbox with on and off choices.            |
+| `variables`      | Additional styles.                                                 |
 
 ## Sample Code
 
-```jsx=
+```tsx
 <Switch checked />
 <Switch checked disabled/>
 <Switch checked onChange={onChange}/>
 ```
 
+https://github.com/microsoft/fluentui/blob/master/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts
+
 ## API
 
-| Name           | V0      | V8      | Description                                                                 |
-| -------------- | ------- | ------- | --------------------------------------------------------------------------- |
-| checked        | &check; | &check; | The value of the Switch. If `true` then the Switch will be enabled.         |
-| defaultChecked | &check; | &check; | The default value of the Switch. If `true` then the Switch will be enabled. |
-| disabled       | &check; | &check; | Whether the Switch should be disabled.                                      |
-| onChange       | &check; | &check; | Callback to be called when the checked state value changes.                 |
+### Switch Props
 
-## Migration
-
-<img src="https://img.shields.io/badge/Used%20in-v0-orange" alt="drawing" width="100"/>
-
-| Name          | Description                                                                   | Reason                                                             |
-| ------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ |
-| indicator     | A checkbox's indicator icon can be customized.                                | Toggle will have a slot for the thumb.                             |
-| label         | A checkbox can render a label next to its indicator.                          | To be decided on how it is handled                                 |
-| labelPosition | Determines whether the label should be positioned before or after the Switch. | To be decided on how it is handled                                 |
-| onClick       | Called after a checkbox is clicked.                                           | The native input element handles onClick.                          |
-| toggle        | A checkbox can be formatted to show an "on or off" choice.                    | Toggle is separated from checkbox due to vast styling differences. |
-
-<img src="https://img.shields.io/badge/Used%20in-v8-blue" alt="drawing" width="120"/>
-
-| Name          | Description                                                                                     | Reason                              |
-| ------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------- |
-| componentRef  | Optional callback to access the IToggle interface.                                              | Not used in converged components    |
-| label         | A label for the toggle.                                                                         | To be decided on how it is handled. |
-| labelPosition | Determines whether the label should be positioned before or after the Switch.                   | To be decided on how it is handled  |
-| onText        | Text to display when toggle is ON.                                                              | To be decided.                      |
-| offText       | Text to display when toggle is OFF.                                                             | To be decided.                      |
-| ariaLabel     | Text for screen-reader to announce as the name of the toggle.                                   | Toggle has a hidden input element.  |
-| onAriaLabel   | @deprecated Use `ariaLabel` for name, and let the metadata convey state                         | deprecated                          |
-| offAriaLabel  | @deprecated Use `ariaLabel` for name, and let the metadata convey state                         | deprecated                          |
-| inlineLabel   | Whether the label (not the onText/offText) should be positioned inline with the toggle control. | It can be manually styled           |
-| onChanged     | @deprecated Use `onChange` instead.                                                             | deprecated                          |
-| theme         | Theme provided by HOC.                                                                          | Not used in converged components    |
-| styles        | Optional styles for the component.                                                              | Not used in converged components    |
-| role          | Whether to use the 'switch' role (ARIA 1.1) or the 'checkbox' role (ARIA 1.0).                  | Toggle has a hidden input element.  |
+See [Switch.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-switch/src/components/Switch/Switch.types.ts).
 
 ## Structure
 
-- _**Public**_
+### Slots
+
+- `root` - The outer `<div>` wrapping the `indicator`, `input` and `label` to provide the correct layout styling.
+- `indicator` - The track and the thumb sliding over it indicating the on and off status of the Switch.
+- `input` - The visually hidden `<input type="checkbox">` that handles the `Switch`'s functionality. This is the **primary** slot: it receives all of the native props passed to the `Switch` component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
+- `label` - (optional) The `<label>` describing this `Switch`.
 
-```jsx=
-<Switch checked={true}/>
+### Public
+
+```tsx
+<Switch checked={true} />
 ```
 
-- _**Internal**_
+### Internal
 
-```jsx=
+```tsx
 <slots.root {...slotProps.root}>
-  <slots.track {...slotProps.track} />
-  <slots.thumbWrapper {...slotProps.thumbWrapper}>
-    <slots.thumb {...slotProps.thumb} />
-  </slots.thumbWrapper>
-  <input type="checkbox" />
-</slots.root>;
+  <slots.input {...slotProps.input} />
+  {labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}
+  <slots.indicator {...slotProps.indicator} />
+  {labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}
+</slots.root>
+```
+
+### DOM
+
+_With label before the track thumb indicator:_
+
+```tsx
+<div class="fui-Switch">
+  <input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
+  <label class="fui-Switch__label" for="switch-1" />
+  <div aria-hidden="true" class="fui-Switch__indicator">
+    <CircleFilled />
+  </div>
+</div>
 ```
 
-- _**DOM**_
+_With label after the track thumb indicator:_
 
-```jsx=
-<div className="ms-switch-root">
-  <div className="ms-switch-track" />
-  <div className="ms-switch-thumbWrapper">
-    <div className="ms-switch-thumb" />
+```tsx
+<div class="fui-Switch">
+  <input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
+  <div aria-hidden="true" class="fui-Switch__indicator">
+    <CircleFilled />
   </div>
-  <input type="checkbox" />
-</div>;
+  <label class="fui-Switch__label" for="switch-1" />
+</div>
 ```
 
+## Migration
+
+See [MIGRATION.md](MIGRATION.md).
+
 ## Behaviors
 
-### Component States
+### States
+
+The following section describes the different states in which a `Switch` can be throughout the course of interaction with it.
+
+#### Enabled state
+
+An enabled `Switch` communicates interaction by having styling that invites the user to click/tap on it to toggle between on/off states.
+
+#### Disabled state
+
+A disabled `Switch` is non-interactive, ignoring all events and never updating its value. It does not allow focus and changes its styling to indicates this lack of interaction.
 
-- **Disabled**
-  - When disabled, all events are ignored, and the Switch's value never updates.
-  - Does not allow focus.
-  - The cursor changes to `not-allowed`.
-- **Checked**
-  - Switch is off when the “thumb” is indicated on the left.
-  - Switch is on when the thumb is indicated on the right.
-  - This is switched in RTL.
-  - When toggling switches on and off, the on state should change using the checked state appearance styles.
+#### Hovered state
 
-### Hover
+A hovered `Switch` changes styling to communicate that the user has placed a cursor above it.
 
-The cursor changes to the hand icon. The outline of the Switch and thumb should also darken. This helps reinforce that the area is interactive.
+#### Pressed state
 
-### Keyboard
+A pressed `Switch` changes styling to communicate that the user is currently pressing it.
 
-Since the Switch is an interactive component, it must be focusable and keyboard accessible.
-The expected keyboard shortcut for activating a Switch is the spacebar key.
+#### Unchecked state
 
-1. Use the spacebar to switch off
-2. Use the spacebar to switch on
+An unchecked `Switch` has the thumb on the left (right in RTL) and styling to indicate that it is off.
 
-### Cursor
+#### Checked state
 
-Clicking triggers toggling the state change. The thumb animates from right to left [on > off] and left to right [off > on]
+A checked `Switch` has the thumb on the right (left in RTL) and styling to indicate that it is on.
 
-### Touch
+### Interaction
 
-Touch follows the same behavior as the cursor.
+### Keyboard interaction
+
+The following is a set of keys that interact with the `Switch` component:
+
+| Key     | Description                     |
+| ------- | ------------------------------- |
+| `Space` | Switches between on/off states. |
+
+### Cursor interaction
+
+- `click`: Triggers a toggle between on and off values. The thumb animates from left to right [off > on] and right to left [on > off] to reflect this change (the directions are reversed in RTL).
+
+### Touch interaction
+
+The same behavior as above is traslated for touch events.
 
 ## Accessibility
 
-Accessibility will be handled by the hidden `<input type="checkbox" />` element and follows the same pattern.
+### Relevant documents
+
+- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#switch)
+- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#switch)
+- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#switch)
+
+### Expected behavior
+
+- Switch uses a standard HTML `<input type="checkbox">` with `role="switch"` set and does not require any additional handling for aria on the input element.
+- The track and thumb indicator has `aria-hidden="true"` as it is a purely visual representation of the state of the underlying input.

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
+
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export declare const Switch: ForwardRefComponent<SwitchProps>;
+
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export declare const switchClassName: string;
+
+export declare const switchClassNames: SlotClassNames<SwitchSlots>;
+
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {
+    /**
+     * 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
+     */
+    checked?: boolean;
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The position of the label relative to the Switch.
+     *
+     * @default after
+     */
+    labelPosition?: 'above' | 'after' | 'before';
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+
+export declare type SwitchSlots = {
+    /**
+     * 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`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
+     */
+    indicator: NonNullable<Slot<'div'>>;
+    /**
+     * 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: NonNullable<Slot<'input'>>;
+    /**
+     * The Switch's label.
+     */
+    label?: Slot<typeof Label>;
+};
+
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;
+
+/**
+ * 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_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLInputElement>) => SwitchState;
+
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+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.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.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\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {\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   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: 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  /**\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> & Required<Pick<SwitchProps, 'labelPosition'>>;\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.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/"}