@fluentui/react-switch 9.0.0-rc.3 → 9.0.0-rc.6

package/lib-commonjs/index.js

@@ -3,8 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useSwitch_unstable = exports.useSwitchStyles_unstable = exports.switchClassNames = exports.switchClassName = exports.renderSwitch_unstable = exports.Switch = void 0;
 
-const tslib_1 = /*#__PURE__*/require("tslib");
+var Switch_1 = /*#__PURE__*/require("./Switch");
 
-tslib_1.__exportStar(require("./Switch"), exports);
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.Switch;
+  }
+});
+Object.defineProperty(exports, "renderSwitch_unstable", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.renderSwitch_unstable;
+  }
+}); // eslint-disable-next-line deprecation/deprecation
+
+Object.defineProperty(exports, "switchClassName", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.switchClassName;
+  }
+});
+Object.defineProperty(exports, "switchClassNames", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.switchClassNames;
+  }
+});
+Object.defineProperty(exports, "useSwitchStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.useSwitchStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useSwitch_unstable", {
+  enumerable: true,
+  get: function () {
+    return Switch_1.useSwitch_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourcesContent":["export {};\nexport * from './Switch';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA","sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line deprecation/deprecation\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0-rc.6",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,24 +28,16 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "9.0.0-rc.3",
-    "@fluentui/react-tabster": "9.0.0-rc.3",
-    "@fluentui/react-utilities": "9.0.0-rc.3",
-    "@griffel/react": "1.0.0",
+    "@fluentui/react-icons": "^2.0.166-rc.3",
+    "@fluentui/react-label": "9.0.0-beta.10",
+    "@fluentui/react-tabster": "9.0.0-rc.6",
+    "@fluentui/react-theme": "9.0.0-rc.5",
+    "@fluentui/react-utilities": "9.0.0-rc.6",
+    "@griffel/react": "1.0.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -60,5 +52,12 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }

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

@@ -1,2 +0,0 @@
-import type { SwitchState } from './Switch.types';
-export declare const useSwitchState: (state: SwitchState) => SwitchState;

package/lib/components/Switch/useSwitchState.js

@@ -1,144 +0,0 @@
-import * as React from 'react';
-import { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-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
-
-const on = (element, eventName, callback) => {
-  element.addEventListener(eventName, callback);
-  return () => element.removeEventListener(eventName, callback);
-};
-
-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: []
-  });
-  const [currentValue, setCurrentValue] = useControllableState({
-    defaultState: defaultChecked,
-    state: checked,
-    initialState: false
-  });
-  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;
-    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
-      checked: incomingValue
-    });
-    setCurrentValue(incomingValue);
-    setRenderedPosition(undefined);
-  });
-  const calculatePosition = React.useCallback(ev => {
-    var _a;
-
-    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]);
-  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.
-
-    if (incomingPosition === 100 && internalState.current.internalValue !== true) {
-      setChecked(ev, true);
-    } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
-      setChecked(ev, false);
-    }
-  }, [calculatePosition, hideThumbAnimation, setChecked]);
-  const onPointerUp = React.useCallback(ev => {
-    internalState.current.disposables.forEach(dispose => dispose());
-    internalState.current.disposables = [];
-    inputRef.current.focus();
-
-    if (internalState.current.thumbIsDragging) {
-      const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
-      showThumbAnimation();
-
-      if (roundedPosition === 100) {
-        setChecked(ev, true);
-      } else if (roundedPosition === 0) {
-        setChecked(ev, false);
-      }
-    } else {
-      setChecked(ev, !internalState.current.internalValue);
-    }
-  }, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
-  const onPointerDown = React.useCallback(ev => {
-    var _a;
-
-    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), () => {
-      var _a;
-
-      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    });
-  }, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
-  const onKeyUp = React.useCallback(ev => {
-    onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
-
-    if (ev.key === ' ') {
-      setChecked(ev, !internalState.current.internalValue);
-    }
-  }, [onKeyUpCallback, setChecked]);
-  const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
-  const rootStyles = {
-    '--switch-checked-opacity': currentPosition / 100,
-    '--switch-unchecked-opacity': (100 - currentPosition) / 100
-  };
-  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
-
-  state.root.style = rootStyles;
-
-  if (!disabled) {
-    state.root.onPointerDown = onPointerDown;
-    state.root.onKeyUp = onKeyUp;
-  } // Input Props
-
-
-  state.input.checked = currentValue;
-  state.input.disabled = disabled;
-  state.input.ref = inputRef;
-  state.input.readOnly = true;
-  state.input.role = 'switch'; // Thumb Container Props
-
-  state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
-
-  state.activeRail.ref = railRef;
-  return state;
-};
-//# sourceMappingURL=useSwitchState.js.map

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

@@ -1 +0,0 @@
-{"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-commonjs/components/Switch/useSwitchState.d.ts

@@ -1,2 +0,0 @@
-import type { SwitchState } from './Switch.types';
-export declare const useSwitchState: (state: SwitchState) => SwitchState;

package/lib-commonjs/components/Switch/useSwitchState.js

@@ -1,156 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSwitchState = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts"); // TODO: This should be replaced with a useEvent hook
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-const on = (element, eventName, callback) => {
-  element.addEventListener(eventName, callback);
-  return () => element.removeEventListener(eventName, callback);
-};
-
-const useSwitchState = state => {
-  const {
-    defaultChecked = false,
-    checked,
-    disabled = false,
-    onChange
-  } = state;
-  const {
-    onPointerDown: onPointerDownCallback,
-    onKeyUp: onKeyUpCallback
-  } = state.root;
-  const {
-    dir
-  } = react_shared_contexts_1.useFluent();
-  const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
-  const railRef = React.useRef(null);
-  const internalState = React.useRef({
-    internalValue: checked ? checked : defaultChecked,
-    thumbIsDragging: false,
-    disposables: []
-  });
-  const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
-    defaultState: defaultChecked,
-    state: checked,
-    initialState: false
-  });
-  const [thumbAnimation, {
-    setTrue: showThumbAnimation,
-    setFalse: hideThumbAnimation
-  }] = react_utilities_1.useBoolean(true);
-  const [renderedPosition, setRenderedPosition] = React.useState(undefined);
-  const setChecked = react_utilities_1.useEventCallback((ev, incomingValue) => {
-    ev.stopPropagation();
-    ev.preventDefault();
-    internalState.current.internalValue = incomingValue;
-    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
-      checked: incomingValue
-    });
-    setCurrentValue(incomingValue);
-    setRenderedPosition(undefined);
-  });
-  const calculatePosition = React.useCallback(ev => {
-    var _a;
-
-    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 react_utilities_1.clamp(distance / railWidth * 100, 0, 100);
-  }, [dir]);
-  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.
-
-    if (incomingPosition === 100 && internalState.current.internalValue !== true) {
-      setChecked(ev, true);
-    } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
-      setChecked(ev, false);
-    }
-  }, [calculatePosition, hideThumbAnimation, setChecked]);
-  const onPointerUp = React.useCallback(ev => {
-    internalState.current.disposables.forEach(dispose => dispose());
-    internalState.current.disposables = [];
-    inputRef.current.focus();
-
-    if (internalState.current.thumbIsDragging) {
-      const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
-      showThumbAnimation();
-
-      if (roundedPosition === 100) {
-        setChecked(ev, true);
-      } else if (roundedPosition === 0) {
-        setChecked(ev, false);
-      }
-    } else {
-      setChecked(ev, !internalState.current.internalValue);
-    }
-  }, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
-  const onPointerDown = React.useCallback(ev => {
-    var _a;
-
-    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), () => {
-      var _a;
-
-      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    });
-  }, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
-  const onKeyUp = React.useCallback(ev => {
-    onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
-
-    if (ev.key === ' ') {
-      setChecked(ev, !internalState.current.internalValue);
-    }
-  }, [onKeyUpCallback, setChecked]);
-  const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
-  const rootStyles = {
-    '--switch-checked-opacity': currentPosition / 100,
-    '--switch-unchecked-opacity': (100 - currentPosition) / 100
-  };
-  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
-
-  state.root.style = rootStyles;
-
-  if (!disabled) {
-    state.root.onPointerDown = onPointerDown;
-    state.root.onKeyUp = onKeyUp;
-  } // Input Props
-
-
-  state.input.checked = currentValue;
-  state.input.disabled = disabled;
-  state.input.ref = inputRef;
-  state.input.readOnly = true;
-  state.input.role = 'switch'; // Thumb Container Props
-
-  state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
-
-  state.activeRail.ref = railRef;
-  return state;
-};
-
-exports.useSwitchState = useSwitchState;
-//# sourceMappingURL=useSwitchState.js.map

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

@@ -1 +0,0 @@
-{"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/"}