@fluentui/react-slider 9.0.0-beta.5 → 9.0.0-beta.6

package/CHANGELOG.json

@@ -2,7 +2,90 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Thu, 25 Nov 2021 08:31:35 GMT",
+      "date": "Thu, 10 Feb 2022 08:44:03 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
+            "comment": "Using ComponentSlotProps instead of ObjectShorthandProps."
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "0a220897d7f6b3029b7c7f18b6ecc28a3131345f",
+            "comment": "move slider to unstable"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "839ec14849e112b85aa321d034739ec421199141",
+            "comment": "remove export of commons types"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
+            "comment": "Refactor component Slot typings"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-slider",
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI dependencies to 9.0.0-rc"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.5",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          }
+        ],
+        "none": [
+          {
+            "author": "me@levithomason.com",
+            "package": "@fluentui/react-slider",
+            "commit": "4bd15194a66379b165043141c266faa0c1ea1502",
+            "comment": "document how to import preview components"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 Nov 2021 08:34:17 GMT",
       "tag": "@fluentui/react-slider_v9.0.0-beta.5",
       "version": "9.0.0-beta.5",
       "comments": {
@@ -11,49 +94,49 @@
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-tabster to v9.0.0-beta.5",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/react-label to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-slider",
             "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,24 +1,43 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Thu, 25 Nov 2021 08:31:35 GMT and should not be manually modified.
+This log was last generated on Thu, 10 Feb 2022 08:44:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.6)
+
+Thu, 10 Feb 2022 08:44:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.5..@fluentui/react-slider_v9.0.0-beta.6)
+
+### Changes
+
+- Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- move slider to unstable ([PR #21506](https://github.com/microsoft/fluentui/pull/21506) by mgodbolt@microsoft.com)
+- remove export of commons types ([PR #21660](https://github.com/microsoft/fluentui/pull/21660) by mgodbolt@microsoft.com)
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
+- Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.5 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+
 ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.5)
 
-Thu, 25 Nov 2021 08:31:35 GMT 
+Thu, 25 Nov 2021 08:34:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.4..@fluentui/react-slider_v9.0.0-beta.5)
 
 ### Changes
 
-- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-label to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.4)
 

package/dist/react-slider.d.ts

@@ -1,79 +1,13 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-
-/**
- * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
- */
-export declare const RangedSlider: ForwardRefComponent<RangedSliderProps>;
-
-export declare const rangedSliderClassName = "fui-RangedSlider";
-
-export declare interface RangedSliderCommons extends Omit<SliderCommons, 'value' | 'defaultValue' | 'origin' | 'onChange'> {
-    /**
-     * The starting value for an uncontrolled RangedSlider. The first value is always lower than the second value.
-     * Mutually exclusive with `value` prop.
-     */
-    defaultValue?: [number, number];
-    /**
-     * The current value of the controlled RangedSlider. The first value is always lower than the second value.
-     * Mutually exclusive with `defaultValue` prop.
-     */
-    value?: [number, number];
-    /**
-     * Triggers a callback when the value has been changed. This will be called on every individual step.
-     */
-    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
-        value: [number, number];
-    }) => void;
-}
-
-export declare interface RangedSliderProps extends Omit<ComponentProps<RangedSliderSlots>, 'onChange' | 'defaultValue'>, RangedSliderCommons {
-}
-
-export declare type RangedSliderSlots = Omit<SliderSlots, 'thumb' | 'thumbWrapper' | 'input'> & {
-    /**
-     * The lower draggable icon used to select a given value in the RangedSlider.
-     */
-    lowerThumb: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the RangedSlider's lower thumb.
-     * It is primarily used to handle the dragging animation from translateX.
-     */
-    lowerThumbWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The upper draggable icon used to select a given value in the RangedSlider.
-     */
-    upperThumb: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the RangedSlider's upper thumb.
-     * It is primarily used to handle the dragging animation from translateX.
-     */
-    upperThumbWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The hidden input for the Slider's lower thumb.
-     */
-    lowerInput: IntrinsicShorthandProps<'input'>;
-    /**
-     * The hidden input for the Slider's upper thumb.
-     */
-    upperInput: IntrinsicShorthandProps<'input'>;
-};
-
-export declare interface RangedSliderState extends ComponentState<RangedSliderSlots>, RangedSliderCommons {
-}
-
-/**
- * Render the final JSX of RangedSlider
- */
-export declare const renderRangedSlider: (state: RangedSliderState) => JSX.Element;
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
  * Render the final JSX of Slider
  */
-export declare const renderSlider: (state: SliderState) => JSX.Element;
+export declare const renderSlider_unstable: (state: SliderState) => JSX.Element;
 
 /**
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
@@ -82,7 +16,7 @@ export declare const Slider: ForwardRefComponent<SliderProps>;
 
 export declare const sliderClassName = "fui-Slider";
 
-export declare type SliderCommons = {
+declare type SliderCommons = {
     /**
      * The starting value for an uncontrolled Slider.
      * Mutually exclusive with `value` prop.
@@ -109,14 +43,6 @@ export declare type SliderCommons = {
      * @default 1
      */
     step?: number;
-    /**
-     * The number of steps that the Slider's value will change by during a key press. When provided, the `keyboardSteps`
-     * will be separated from the pointer `steps` allowing for the value to go outside of pointer related
-     * snapping values.
-     *
-     * @default `step` or 1
-     */
-    keyboardStep?: number;
     /**
      *  Whether to render the Slider as disabled.
      *
@@ -128,18 +54,6 @@ export declare type SliderCommons = {
      * @default `false` (renders horizontally)
      */
     vertical?: boolean;
-    /**
-     * When enabled, small marks are displayed across the Slider, showing potential steps.
-     *
-     * - If `true`, marks are visible at each `step`.
-     * - If `number[]`, marks will be displayed at each provided number. Numbers must be in ascending order.
-     * - If `{}[]`, mark is shown at the value location and displays any provided custom labels and marks.
-     */
-    marks?: boolean | (number | {
-        value: number;
-        label?: string | JSX.Element;
-        mark?: JSX.Element;
-    })[];
     /**
      * The starting origin point for the Slider.
      * @default min
@@ -153,87 +67,64 @@ export declare type SliderCommons = {
     /**
      * Triggers a callback when the value has been changed. This will be called on every individual step.
      */
-    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
-        value: number;
-    }) => void;
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
     /**
      * The Slider's current value label to be read by the screen reader.
      */
-    ariaValueText?: (value: number) => string;
+    getAriaValueText?: (value: number) => string;
 };
 
-export declare type SliderProps = Omit<ComponentProps<SliderSlots>, 'onChange' | 'defaultValue'> & SliderCommons;
+export declare type SliderOnChangeData = {
+    value: number;
+};
 
-/**
- * Array of all shorthand properties listed in sliderShorthandProps
- */
-export declare const sliderShorthandProps: (keyof SliderSlots)[];
+export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
 
 export declare type SliderSlots = {
     /**
      * The root of the Slider.
+     * The root slot receives the `className` and `style` specified directly on the `<Slider>`.
+     * All other native props will be applied to the primary slot, `input`.
      */
-    root: IntrinsicShorthandProps<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * The Slider's base. It is used to visibly display the min and max selectable values.
      */
-    rail: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider component.
-     */
-    sliderWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider's track. It is primarily used to handle the positioning of the track.
-     */
-    trackWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The bar showing the current selected area adjacent to the Slider's thumb.
-     */
-    track: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper holding the marks and mark labels for the Slider.
-     */
-    marksWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider's thumb. It is primarily used to handle the dragging animation from translateX.
-     */
-    thumbWrapper: IntrinsicShorthandProps<'div'>;
+    rail: NonNullable<Slot<'div'>>;
     /**
      * The draggable icon used to select a given value from the Slider.
      * This is the element containing `role = 'slider'`.
      */
-    thumb: IntrinsicShorthandProps<'div'>;
-    /**
-     * The area in which the Slider's rail allows for the thumb to be dragged.
-     */
-    activeRail: IntrinsicShorthandProps<'div'>;
+    thumb: NonNullable<Slot<'div'>>;
     /**
      * The hidden input for the Slider.
+     * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     *
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>> & {
+        /**
+         * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
+         * when `vertical` is set to true.
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
+         * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
+         */
+        orient?: 'horizontal' | 'vertical';
+    };
 };
 
 export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
 
-/**
- * Given user props, returns state and render function for a RangedSlider.
- */
-export declare const useRangedSlider: (props: RangedSliderProps, ref: React_2.Ref<HTMLElement>) => RangedSliderState;
-
-export declare const useRangedSliderState: (state: RangedSliderState) => RangedSliderState;
-
-export declare const useRangedSliderStyles: (state: RangedSliderState) => RangedSliderState;
-
 /**
  * Given user props, returns state and render function for a Slider.
  */
-export declare const useSlider: (props: SliderProps, ref: React_2.Ref<HTMLElement>) => SliderState;
+export declare const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;
 
-export declare const useSliderState: (state: SliderState) => SliderState;
+export declare const useSliderState_unstable: (state: SliderState) => SliderState;
 
 /**
  * Apply styling to the Slider slots based on the state
  */
-export declare const useSliderStyles: (state: SliderState) => SliderState;
+export declare const useSliderStyles_unstable: (state: SliderState) => SliderState;
 
 export { }

package/lib/components/Slider/Slider.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useSlider } from './useSlider';
-import { renderSlider } from './renderSlider';
-import { useSliderStyles } from './useSliderStyles';
+import { useSlider_unstable } from './useSlider';
+import { renderSlider_unstable } from './renderSlider';
+import { useSliderStyles_unstable } from './useSliderStyles';
 /**
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
  */
 
 export const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useSlider(props, ref);
-  useSliderStyles(state);
-  return renderSlider(state);
+  const state = useSlider_unstable(props, ref);
+  useSliderStyles_unstable(state);
+  return renderSlider_unstable(state);
 });
 Slider.displayName = 'Slider';
 //# sourceMappingURL=Slider.js.map

package/lib/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.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,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Slider/Slider.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;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}

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

@@ -1,49 +1,38 @@
 import * as React from 'react';
-import { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
 export declare type SliderSlots = {
     /**
      * The root of the Slider.
+     * The root slot receives the `className` and `style` specified directly on the `<Slider>`.
+     * All other native props will be applied to the primary slot, `input`.
      */
-    root: IntrinsicShorthandProps<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * The Slider's base. It is used to visibly display the min and max selectable values.
      */
-    rail: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider component.
-     */
-    sliderWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider's track. It is primarily used to handle the positioning of the track.
-     */
-    trackWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The bar showing the current selected area adjacent to the Slider's thumb.
-     */
-    track: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper holding the marks and mark labels for the Slider.
-     */
-    marksWrapper: IntrinsicShorthandProps<'div'>;
-    /**
-     * The wrapper around the Slider's thumb. It is primarily used to handle the dragging animation from translateX.
-     */
-    thumbWrapper: IntrinsicShorthandProps<'div'>;
+    rail: NonNullable<Slot<'div'>>;
     /**
      * The draggable icon used to select a given value from the Slider.
      * This is the element containing `role = 'slider'`.
      */
-    thumb: IntrinsicShorthandProps<'div'>;
-    /**
-     * The area in which the Slider's rail allows for the thumb to be dragged.
-     */
-    activeRail: IntrinsicShorthandProps<'div'>;
+    thumb: NonNullable<Slot<'div'>>;
     /**
      * The hidden input for the Slider.
+     * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     *
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>> & {
+        /**
+         * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
+         * when `vertical` is set to true.
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
+         * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
+         */
+        orient?: 'horizontal' | 'vertical';
+    };
 };
-export declare type SliderCommons = {
+declare type SliderCommons = {
     /**
      * The starting value for an uncontrolled Slider.
      * Mutually exclusive with `value` prop.
@@ -70,14 +59,6 @@ export declare type SliderCommons = {
      * @default 1
      */
     step?: number;
-    /**
-     * The number of steps that the Slider's value will change by during a key press. When provided, the `keyboardSteps`
-     * will be separated from the pointer `steps` allowing for the value to go outside of pointer related
-     * snapping values.
-     *
-     * @default `step` or 1
-     */
-    keyboardStep?: number;
     /**
      *  Whether to render the Slider as disabled.
      *
@@ -89,18 +70,6 @@ export declare type SliderCommons = {
      * @default `false` (renders horizontally)
      */
     vertical?: boolean;
-    /**
-     * When enabled, small marks are displayed across the Slider, showing potential steps.
-     *
-     * - If `true`, marks are visible at each `step`.
-     * - If `number[]`, marks will be displayed at each provided number. Numbers must be in ascending order.
-     * - If `{}[]`, mark is shown at the value location and displays any provided custom labels and marks.
-     */
-    marks?: boolean | (number | {
-        value: number;
-        label?: string | JSX.Element;
-        mark?: JSX.Element;
-    })[];
     /**
      * The starting origin point for the Slider.
      * @default min
@@ -114,13 +83,15 @@ export declare type SliderCommons = {
     /**
      * Triggers a callback when the value has been changed. This will be called on every individual step.
      */
-    onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
-        value: number;
-    }) => void;
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
     /**
      * The Slider's current value label to be read by the screen reader.
      */
-    ariaValueText?: (value: number) => string;
+    getAriaValueText?: (value: number) => string;
+};
+export declare type SliderOnChangeData = {
+    value: number;
 };
-export declare type SliderProps = Omit<ComponentProps<SliderSlots>, 'onChange' | 'defaultValue'> & SliderCommons;
+export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
 export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
+export {};

package/lib/components/Slider/index.d.ts

@@ -2,5 +2,5 @@ export * from './Slider';
 export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
-export { useSliderState } from './useSliderState';
-export { sliderClassName, useSliderStyles } from './useSliderStyles';
+export { useSliderState_unstable } from './useSliderState';
+export { sliderClassName, useSliderStyles_unstable } from './useSliderStyles';

package/lib/components/Slider/index.js

@@ -2,6 +2,6 @@ export * from './Slider';
 export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
-export { useSliderState } from './useSliderState';
-export { sliderClassName, useSliderStyles } from './useSliderStyles';
+export { useSliderState_unstable } from './useSliderState';
+export { sliderClassName, useSliderStyles_unstable } from './useSliderStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Slider/renderSlider.d.ts

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

package/lib/components/Slider/renderSlider.js

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { sliderShorthandProps } from './useSlider';
 /**
  * Render the final JSX of Slider
  */
 
-export const renderSlider = state => {
+export const renderSlider_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, sliderShorthandProps);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), state.marks && /*#__PURE__*/React.createElement(slots.marksWrapper, Object.assign({}, slotProps.marksWrapper)), /*#__PURE__*/React.createElement(slots.sliderWrapper, Object.assign({}, slotProps.sliderWrapper), /*#__PURE__*/React.createElement(slots.rail, Object.assign({}, slotProps.rail)), /*#__PURE__*/React.createElement(slots.trackWrapper, Object.assign({}, slotProps.trackWrapper), /*#__PURE__*/React.createElement(slots.track, Object.assign({}, slotProps.track))), /*#__PURE__*/React.createElement(slots.thumbWrapper, Object.assign({}, slotProps.thumbWrapper), /*#__PURE__*/React.createElement(slots.thumb, Object.assign({}, slotProps.thumb))), /*#__PURE__*/React.createElement(slots.activeRail, Object.assign({}, slotProps.activeRail)), /*#__PURE__*/React.createElement(slots.input, Object.assign({}, slotProps.input))));
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), /*#__PURE__*/React.createElement(slots.rail, { ...slotProps.rail
+  }), /*#__PURE__*/React.createElement(slots.thumb, { ...slotProps.thumb
+  }));
 };
 //# sourceMappingURL=renderSlider.js.map