@fluentui/react-slider 9.0.0-alpha.8 → 9.0.0-beta.10

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":"../src/","sources":["components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   */\n  root: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The wrapper around the Slider component.\n   */\n  sliderWrapper: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The wrapper around the Slider's track. It is primarily used to handle the positioning of the track.\n   */\n  trackWrapper: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The bar showing the current selected area adjacent to the Slider's thumb.\n   */\n  track: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The wrapper holding the marks and mark labels for the Slider.\n   */\n  marksWrapper: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The wrapper around the Slider's thumb. It is primarily used to handle the dragging animation from translateX.\n   */\n  thumbWrapper: IntrinsicShorthandProps<'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: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The area in which the Slider's rail allows for the thumb to be dragged.\n   */\n  activeRail: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The hidden input for the Slider.\n   */\n  input: IntrinsicShorthandProps<'input'>;\n};\n\nexport type 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   * The number of steps that the Slider's value will change by during a key press. When provided, the `keyboardSteps`\n   * will be separated from the pointer `steps` allowing for the value to go outside of pointer related\n   * snapping values.\n   *\n   * @default `step` or 1\n   */\n  keyboardStep?: 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   * When enabled, small marks are displayed across the Slider, showing potential steps.\n   *\n   * - If `true`, marks are visible at each `step`.\n   * - If `number[]`, marks will be displayed at each provided number. Numbers must be in ascending order.\n   * - If `{}[]`, mark is shown at the value location and displays any provided custom labels and marks.\n   */\n  marks?: boolean | (number | { value: number; label?: string | JSX.Element; mark?: JSX.Element })[];\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?: (\n    ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,\n    data: { value: number },\n  ) => void;\n\n  /**\n   * The Slider's current value label to be read by the screen reader.\n   */\n  ariaValueText?: (value: number) => string;\n};\n\nexport type SliderProps = Omit<ComponentProps<SliderSlots>, 'onChange' | 'defaultValue'> & SliderCommons;\n\nexport type SliderState = ComponentState<SliderSlots> & SliderCommons;\n"]}
+{"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 * from './useSliderState';
-export * 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 * from './useSliderState';
-export * 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":"../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,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport * from './useSliderState';\nexport * from './useSliderStyles';\n"]}
+{"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":["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","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { sliderShorthandProps } from './useSlider';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider = (state: SliderState) => {\n  const { slots, slotProps } = getSlots<SliderSlots>(state, sliderShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.marks && <slots.marksWrapper {...slotProps.marksWrapper} />}\n      <slots.sliderWrapper {...slotProps.sliderWrapper}>\n        <slots.rail {...slotProps.rail} />\n        <slots.trackWrapper {...slotProps.trackWrapper}>\n          <slots.track {...slotProps.track} />\n        </slots.trackWrapper>\n        <slots.thumbWrapper {...slotProps.thumbWrapper}>\n          <slots.thumb {...slotProps.thumb} />\n        </slots.thumbWrapper>\n        <slots.activeRail {...slotProps.activeRail} />\n        <slots.input {...slotProps.input} />\n      </slots.sliderWrapper>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"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,103 +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 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,
-      input = props.input,
-      activeRail = props.activeRail,
-      thumb = props.thumb,
-      marksWrapper = props.marksWrapper,
-      thumbWrapper = props.thumbWrapper,
-      track = props.track,
-      trackWrapper = props.trackWrapper,
-      rail = props.rail,
-      sliderWrapper = props.sliderWrapper;
-  var state = {
-    value: value,
-    defaultValue: defaultValue,
-    min: min,
-    max: max,
-    step: step,
-    keyboardStep: keyboardStep,
-    disabled: disabled,
-    ariaValueText: ariaValueText,
-    onChange: onChange,
-    marks: marks,
-    vertical: vertical,
-    origin: origin,
-    size: size,
-    root: getNativeElementProps('span', __assign(__assign({
-      ref: ref
-    }, props), {
-      id: useId('slider-', props.id)
-    })),
+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: {
-      root: 'div',
+      input: 'input',
       rail: 'div',
-      sliderWrapper: 'div',
-      trackWrapper: 'div',
-      track: 'div',
-      marksWrapper: 'div',
-      thumbWrapper: 'div',
-      thumb: 'div',
-      activeRail: 'div',
-      input: 'input'
+      root: 'div',
+      thumb: 'div'
     },
-    sliderWrapper: resolveShorthand(sliderWrapper, {
-      required: true
-    }),
-    rail: resolveShorthand(rail, {
-      required: true
-    }),
-    trackWrapper: resolveShorthand(trackWrapper, {
-      required: true
-    }),
-    track: resolveShorthand(track, {
-      required: true
+    root: resolveShorthand(root, {
+      required: true,
+      defaultProps: { ...nativeProps.root
+      }
     }),
-    thumbWrapper: resolveShorthand(thumbWrapper, {
-      required: true
+    input: resolveShorthand(input, {
+      required: true,
+      defaultProps: {
+        id: useId('slider-', props.id),
+        ref,
+        ...nativeProps.primary,
+        type: 'range',
+        orient: vertical ? 'vertical' : undefined
+      }
     }),
-    marksWrapper: resolveShorthand(marksWrapper, {
+    rail: resolveShorthand(rail, {
       required: true
     }),
     thumb: resolveShorthand(thumb, {
       required: true
-    }),
-    activeRail: resolveShorthand(activeRail, {
-      required: true
-    }),
-    input: resolveShorthand(input, {
-      required: true,
-      defaultProps: {
-        type: 'range'
-      }
     })
   };
-  useSliderState(state);
+  useSliderState_unstable(state);
   return state;
 };
 //# sourceMappingURL=useSlider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSliderState } from './useSliderState';\nimport { SliderProps, SliderSlots, SliderState } from './Slider.types';\n\n/**\n * Array of all shorthand properties listed in sliderShorthandProps\n */\nexport const sliderShorthandProps: (keyof SliderSlots)[] = [\n  'root',\n  'activeRail',\n  'input',\n  'rail',\n  'sliderWrapper',\n  'thumb',\n  'thumbWrapper',\n  'track',\n  'trackWrapper',\n  'marksWrapper',\n];\n\n/**\n * Given user props, returns state and render function for a Slider.\n */\nexport const useSlider = (props: SliderProps, ref: React.Ref<HTMLElement>): SliderState => {\n  const {\n    value,\n    defaultValue,\n    min,\n    max,\n    step = 1,\n    keyboardStep,\n    disabled,\n    ariaValueText,\n    onChange,\n    marks,\n    vertical,\n    size = 'medium',\n    origin,\n    input,\n    activeRail,\n    thumb,\n    marksWrapper,\n    thumbWrapper,\n    track,\n    trackWrapper,\n    rail,\n    sliderWrapper,\n  } = props;\n\n  const state: SliderState = {\n    value,\n    defaultValue,\n    min,\n    max,\n    step,\n    keyboardStep,\n    disabled,\n    ariaValueText,\n    onChange,\n    marks,\n    vertical,\n    origin,\n    size,\n    root: getNativeElementProps('span', {\n      ref,\n      ...props,\n      id: useId('slider-', props.id),\n    }),\n    components: {\n      root: 'div',\n      rail: 'div',\n      sliderWrapper: 'div',\n      trackWrapper: 'div',\n      track: 'div',\n      marksWrapper: 'div',\n      thumbWrapper: 'div',\n      thumb: 'div',\n      activeRail: 'div',\n      input: 'input',\n    },\n    sliderWrapper: resolveShorthand(sliderWrapper, { required: true }),\n    rail: resolveShorthand(rail, { required: true }),\n    trackWrapper: resolveShorthand(trackWrapper, { required: true }),\n    track: resolveShorthand(track, { required: true }),\n    thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),\n    marksWrapper: resolveShorthand(marksWrapper, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n    activeRail: resolveShorthand(activeRail, { required: true }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        type: 'range',\n      },\n    }),\n  };\n\n  useSliderState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":"AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAAD,CAA7C;AAMA,QAAM;AACJ;AACA,IAAA,KAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAAG,GAAG,CAJF;AAKJ,IAAA,GAAG,GAAG,GALF;AAMJ,IAAA,IANI;AAOJ,IAAA,QAPI;AAQJ,IAAA,gBARI;AASJ,IAAA,QATI;AAUJ,IAAA,IAAI,GAAG,QAVH;AAWJ,IAAA,MAXI;AAYJ,IAAA,QAZI;AAaJ;AACA,IAAA,IAdI;AAeJ,IAAA,KAfI;AAgBJ,IAAA,IAhBI;AAiBJ,IAAA;AAjBI,MAkBF,KAlBJ;AAoBA,QAAM,KAAK,GAAgB;AACzB,IAAA,gBADyB;AAEzB,IAAA,YAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,GAJyB;AAKzB,IAAA,GALyB;AAMzB,IAAA,MANyB;AAOzB,IAAA,IAPyB;AAQzB,IAAA,IARyB;AASzB,IAAA,QATyB;AAUzB,IAAA,KAVyB;AAWzB,IAAA,QAXyB;AAYzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAZa;AAkBzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAP,CAlBG;AAwBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB,CADG;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAR,CAxBE;AAkCzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAP,CAlCG;AAmCzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR;AAnCE,GAA3B;AAsCA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,KAAP;AACD,CApEM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\n\n/**\n * Given user props, returns state and render function for a Slider.\n */\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'size'],\n  });\n\n  const {\n    // Props\n    value,\n    defaultValue,\n    min = 0,\n    max = 100,\n    step,\n    disabled,\n    getAriaValueText,\n    vertical,\n    size = 'medium',\n    origin,\n    onChange,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderState = {\n    getAriaValueText,\n    defaultValue,\n    disabled,\n    max,\n    min,\n    origin,\n    size,\n    step,\n    vertical,\n    value,\n    onChange,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: {\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n    }),\n    rail: resolveShorthand(rail, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n  };\n\n  useSliderState_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,2 +1,2 @@
 import type { SliderState } from './Slider.types';
-export declare const useSliderState: (state: SliderState) => SliderState;
+export declare const useSliderState_unstable: (state: SliderState) => SliderState;