@fluentui/react-slider 9.0.0-beta.1 → 9.0.0-beta.10

package/dist/react-slider.d.ts

@@ -1,86 +1,22 @@
-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';
-
-export declare const lowerThumbClassName: string;
-
-/**
- * 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 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.
  */
 export declare const Slider: ForwardRefComponent<SliderProps>;
 
-export declare type SliderCommons = {
+export declare const sliderClassName = "fui-Slider";
+
+declare type SliderCommons = {
     /**
      * The starting value for an uncontrolled Slider.
      * Mutually exclusive with `value` prop.
@@ -107,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.
      *
@@ -126,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
@@ -151,89 +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;
 
-export declare const upperThumbClassName: string;
-
-/**
- * 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/Slider.js.map

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

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 var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useSlider(props, ref);
-  useSliderStyles(state);
-  return renderSlider(state);
+export const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  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,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;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n  const state = useSlider_unstable(props, ref);\n\n  useSliderStyles_unstable(state);\n\n  return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}

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/Slider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Slider.types.js","sourceRoot":"../src/","sources":["components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\ntype SliderCommons = {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether to render the Slider vertically.\n   * @default `false` (renders horizontally)\n   */\n  vertical?: boolean;\n\n  /**\n   * The starting origin point for the Slider.\n   * @default min\n   */\n  origin?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n\n  /**\n   * The Slider's current value label to be read by the screen reader.\n   */\n  getAriaValueText?: (value: number) => string;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> &\n  SliderCommons;\n\nexport type SliderState = ComponentState<SliderSlots> & SliderCommons;\n"]}

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 { 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 { 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,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassName, useSliderStyles_unstable } from './useSliderStyles';\n"]}

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,16 +1,18 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { sliderShorthandProps } from './useSlider';
 /**
  * Render the final JSX of Slider
  */
 
-export var renderSlider = function (state) {
-  var _a = getSlots(state, sliderShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.marks && /*#__PURE__*/React.createElement(slots.marksWrapper, __assign({}, slotProps.marksWrapper)), /*#__PURE__*/React.createElement(slots.sliderWrapper, __assign({}, slotProps.sliderWrapper), /*#__PURE__*/React.createElement(slots.rail, __assign({}, slotProps.rail)), /*#__PURE__*/React.createElement(slots.trackWrapper, __assign({}, slotProps.trackWrapper), /*#__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.activeRail, __assign({}, slotProps.activeRail)), /*#__PURE__*/React.createElement(slots.input, __assign({}, slotProps.input))));
+export const renderSlider_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/renderSlider.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,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,CADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,aAAf,CAApB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,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,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,CALF,eAQE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CARF,eASE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CATF,CAFF,CADF;AAgBD,CAnBM","sourceRoot":""}
+{"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHF,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n  const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.rail {...slotProps.rail} />\n      <slots.thumb {...slotProps.thumb} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { SliderProps, SliderSlots, SliderState } from './Slider.types';
-/**
- * Array of all shorthand properties listed in sliderShorthandProps
- */
-export declare const sliderShorthandProps: (keyof SliderSlots)[];
+import { SliderProps, SliderState } from './Slider.types';
 /**
  * Given user props, returns state and render function for a Slider.
  */
-export declare const useSlider: (props: SliderProps, ref: React.Ref<HTMLElement>) => SliderState;
+export declare const useSlider_unstable: (props: SliderProps, ref: React.Ref<HTMLInputElement>) => SliderState;

package/lib/components/Slider/useSlider.js

@@ -1,105 +1,75 @@
-import { __assign } from "tslib";
-import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
-import { useSliderState } from './useSliderState';
-/**
- * Array of all shorthand properties listed in sliderShorthandProps
- */
-
-export var sliderShorthandProps = ['root', 'activeRail', 'input', 'rail', 'sliderWrapper', 'thumb', 'thumbWrapper', 'track', 'trackWrapper', 'marksWrapper'];
+import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useSliderState_unstable } from './useSliderState';
 /**
  * Given user props, returns state and render function for a Slider.
  */
 
-export var useSlider = function (props, ref) {
-  var // Props
-  value = props.value,
-      defaultValue = props.defaultValue,
-      min = props.min,
-      max = props.max,
-      _a = props.step,
-      step = _a === void 0 ? 1 : _a,
-      keyboardStep = props.keyboardStep,
-      disabled = props.disabled,
-      ariaValueText = props.ariaValueText,
-      onChange = props.onChange,
-      marks = props.marks,
-      vertical = props.vertical,
-      _b = props.size,
-      size = _b === void 0 ? 'medium' : _b,
-      origin = props.origin,
-      // Slots
-  activeRail = props.activeRail,
-      input = props.input,
-      marksWrapper = props.marksWrapper,
-      rail = props.rail,
-      sliderWrapper = props.sliderWrapper,
-      thumb = props.thumb,
-      thumbWrapper = props.thumbWrapper,
-      track = props.track,
-      trackWrapper = props.trackWrapper;
-  var state = {
-    ariaValueText: ariaValueText,
-    defaultValue: defaultValue,
-    disabled: disabled,
-    keyboardStep: keyboardStep,
-    marks: marks,
-    max: max,
-    min: min,
-    onChange: onChange,
-    origin: origin,
-    size: size,
-    step: step,
-    vertical: vertical,
-    value: value,
+export const useSlider_unstable = (props, ref) => {
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['onChange', 'size']
+  });
+  const {
+    // Props
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step,
+    disabled,
+    getAriaValueText,
+    vertical,
+    size = 'medium',
+    origin,
+    onChange,
+    // Slots
+    root,
+    input,
+    rail,
+    thumb
+  } = props;
+  const state = {
+    getAriaValueText,
+    defaultValue,
+    disabled,
+    max,
+    min,
+    origin,
+    size,
+    step,
+    vertical,
+    value,
+    onChange,
     components: {
-      activeRail: 'div',
       input: 'input',
-      marksWrapper: 'div',
       rail: 'div',
       root: 'div',
-      sliderWrapper: 'div',
-      thumb: 'div',
-      thumbWrapper: 'div',
-      track: 'div',
-      trackWrapper: 'div'
+      thumb: 'div'
     },
-    root: getNativeElementProps('span', __assign(__assign({
-      ref: ref
-    }, props), {
-      id: useId('slider-', props.id)
-    })),
-    activeRail: resolveShorthand(activeRail, {
-      required: true
+    root: resolveShorthand(root, {
+      required: true,
+      defaultProps: { ...nativeProps.root
+      }
     }),
     input: resolveShorthand(input, {
       required: true,
       defaultProps: {
-        type: 'range'
+        id: useId('slider-', props.id),
+        ref,
+        ...nativeProps.primary,
+        type: 'range',
+        orient: vertical ? 'vertical' : undefined
       }
     }),
-    marksWrapper: resolveShorthand(marksWrapper, {
-      required: true
-    }),
     rail: resolveShorthand(rail, {
       required: true
     }),
-    sliderWrapper: resolveShorthand(sliderWrapper, {
-      required: true
-    }),
     thumb: resolveShorthand(thumb, {
       required: true
-    }),
-    thumbWrapper: resolveShorthand(thumbWrapper, {
-      required: true
-    }),
-    track: resolveShorthand(track, {
-      required: true
-    }),
-    trackWrapper: resolveShorthand(trackWrapper, {
-      required: true
     })
   };
-  useSliderState(state);
+  useSliderState_unstable(state);
   return state;
 };
 //# sourceMappingURL=useSlider.js.map