@fluentui/react-slider 9.0.0-beta.14 → 9.0.0-beta.17

package/CHANGELOG.json

@@ -2,7 +2,154 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Thu, 05 May 2022 18:24:37 GMT",
+      "date": "Thu, 26 May 2022 21:00:04 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-beta.17",
+      "version": "9.0.0-beta.17",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "c17653d2a37e0bbe0fd84298221db3738cb43a23",
+            "comment": "new high contrast styles for slider steps"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "5c6366a3d97cdc612535c299f8dd27bf79c4c842",
+            "comment": "BREAKING: Remove slider origin to align with design and avoid inaccessible design"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
+            "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.4",
+            "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:51 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-beta.16",
+      "version": "9.0.0-beta.16",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.3",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:13:38 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "4a05a4a5a3f0b7724ac81be01795e1572b048fd9",
+            "comment": "move slider commons into props and pick into state"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-slider",
+            "commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
+            "comment": "Updated react-label package version to RC."
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-slider",
+            "commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
+            "comment": "feat: ship rolluped only dts"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.2",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:30 GMT",
       "tag": "@fluentui/react-slider_v9.0.0-beta.14",
       "version": "9.0.0-beta.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,56 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Thu, 05 May 2022 18:24:37 GMT and should not be manually modified.
+This log was last generated on Thu, 26 May 2022 21:00:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.17)
+
+Thu, 26 May 2022 21:00:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.16..@fluentui/react-slider_v9.0.0-beta.17)
+
+### Changes
+
+- new high contrast styles for slider steps ([PR #23253](https://github.com/microsoft/fluentui/pull/23253) by mgodbolt@microsoft.com)
+- BREAKING: Remove slider origin to align with design and avoid inaccessible design ([PR #23257](https://github.com/microsoft/fluentui/pull/23257) by mgodbolt@microsoft.com)
+- Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
+## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.16)
+
+Mon, 23 May 2022 18:56:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.15..@fluentui/react-slider_v9.0.0-beta.16)
+
+### Changes
+
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.15)
+
+Mon, 23 May 2022 12:13:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.14..@fluentui/react-slider_v9.0.0-beta.15)
+
+### Changes
+
+- move slider commons into props and pick into state ([PR #22879](https://github.com/microsoft/fluentui/pull/22879) by mgodbolt@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
+- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+
 ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.14)
 
-Thu, 05 May 2022 18:24:37 GMT 
+Thu, 05 May 2022 18:26:30 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.13..@fluentui/react-slider_v9.0.0-beta.14)
 
 ### Changes

package/MIGRATION.md

@@ -12,6 +12,7 @@ The Slider control is a thin wrapper around an `<input type="range"/>`. Addition
 - `showValue` and `valueFormat` => use explicitly rendered value instead
 - `onChanged` => use onChange and onMouse events
 - `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
+- `origin` => no longer supported
 - `snapToStep` => use `step` instead
 - `originFromZero` => `origin`
 - `buttonProps` => Slider props, other than className and id, are passed to `input` element

package/Spec.md

@@ -79,3 +79,4 @@ https://open-ui.org/components/slider.research
 
 - built in marks
 - dual thumb 'ranged' slider
+- origin

package/dist/index.d.ts

@@ -17,27 +17,43 @@ export declare const Slider: ForwardRefComponent<SliderProps>;
 
 export declare const sliderClassNames: SlotClassNames<SliderSlots>;
 
-declare type SliderCommons = {
+export declare const sliderCSSVars: {
+    sliderDirectionVar: string;
+    sliderProgressVar: string;
+    sliderStepsPercentVar: string;
+};
+
+export declare type SliderOnChangeData = {
+    value: number;
+};
+
+export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
     /**
      * The starting value for an uncontrolled Slider.
      * Mutually exclusive with `value` prop.
      */
     defaultValue?: number;
     /**
-     * The current value of the controlled Slider.
-     * Mutually exclusive with `defaultValue` prop.
+     *  Whether to render the Slider as disabled.
+     *
+     * @default `false` (renders enabled)
      */
-    value?: number;
+    disabled?: boolean;
+    /**
+     * The max value of the Slider.
+     * @default 100
+     */
+    max?: number;
     /**
      * The min value of the Slider.
      * @default 0
      */
     min?: number;
     /**
-     * The max value of the Slider.
-     * @default 100
+     * The size of the Slider.
+     * @default 'medium'
      */
-    max?: number;
+    size?: 'small' | 'medium';
     /**
      * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
      * will snap to the closest available value. This must be a positive value.
@@ -45,38 +61,21 @@ declare type SliderCommons = {
      */
     step?: number;
     /**
-     *  Whether to render the Slider as disabled.
-     *
-     * @default `false` (renders enabled)
+     * The current value of the controlled Slider.
+     * Mutually exclusive with `defaultValue` prop.
      */
-    disabled?: boolean;
+    value?: number;
     /**
      * Render the Slider in a vertical orientation, smallest value on the bottom.
      * @default `false`
      */
     vertical?: boolean;
-    /**
-     * The starting origin point for the Slider.
-     * @default min
-     */
-    origin?: number;
-    /**
-     * The size of the Slider.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium';
     /**
      * Triggers a callback when the value has been changed. This will be called on every individual step.
      */
     onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
 };
 
-export declare type SliderOnChangeData = {
-    value: number;
-};
-
-export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
-
 export declare type SliderSlots = {
     /**
      * The root of the Slider.
@@ -110,14 +109,11 @@ export declare type SliderSlots = {
     };
 };
 
-export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
+export declare type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;
 
-/**
- * Given user props, returns state and render function for a Slider.
- */
 export declare const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;
 
-export declare const useSliderState_unstable: (state: SliderState) => SliderState;
+export declare const useSliderState_unstable: (state: SliderState, props: SliderProps) => SliderState;
 
 /**
  * Apply styling to the Slider slots based on the state

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 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   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\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\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"]}
+{"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\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\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 current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\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\nexport type SliderOnChangeData = {\n  value: number;\n};\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n"]}

package/lib/components/Slider/index.js

@@ -3,5 +3,5 @@ export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
 export { useSliderState_unstable } from './useSliderState';
-export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
+export { sliderClassNames, sliderCSSVars, 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,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,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 { sliderClassNames, useSliderStyles_unstable } 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,gBAAgB,EAAE,aAAa,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 { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles';\n"]}

package/lib/components/Slider/useSlider.js

@@ -1,9 +1,5 @@
 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 const useSlider_unstable = (props, ref) => {
   const nativeProps = getPartitionedNativeProps({
     props,
@@ -11,17 +7,9 @@ export const useSlider_unstable = (props, ref) => {
     excludedPropNames: ['onChange', 'size']
   });
   const {
-    // Props
-    value,
-    defaultValue,
-    min = 0,
-    max = 100,
-    step,
     disabled,
     vertical,
     size = 'medium',
-    origin,
-    onChange,
     // Slots
     root,
     input,
@@ -29,16 +17,9 @@ export const useSlider_unstable = (props, ref) => {
     thumb
   } = props;
   const state = {
-    defaultValue,
     disabled,
-    max,
-    min,
-    origin,
     size,
-    step,
     vertical,
-    value,
-    onChange,
     components: {
       input: 'input',
       rail: 'div',
@@ -67,7 +48,7 @@ export const useSlider_unstable = (props, ref) => {
       required: true
     })
   };
-  useSliderState_unstable(state);
+  useSliderState_unstable(state, props);
   return state;
 };
 //# sourceMappingURL=useSlider.js.map

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

@@ -1 +1 @@
-{"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,QARI;AASJ,IAAA,IAAI,GAAG,QATH;AAUJ,IAAA,MAVI;AAWJ,IAAA,QAXI;AAYJ;AACA,IAAA,IAbI;AAcJ,IAAA,KAdI;AAeJ,IAAA,IAfI;AAgBJ,IAAA;AAhBI,MAiBF,KAjBJ;AAmBA,QAAM,KAAK,GAAgB;AACzB,IAAA,YADyB;AAEzB,IAAA,QAFyB;AAGzB,IAAA,GAHyB;AAIzB,IAAA,GAJyB;AAKzB,IAAA,MALyB;AAMzB,IAAA,IANyB;AAOzB,IAAA,IAPyB;AAQzB,IAAA,QARyB;AASzB,IAAA,KATyB;AAUzB,IAAA,QAVyB;AAWzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAXa;AAiBzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAP,CAjBG;AAuBzB,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,CAvBE;AAiCzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAP,CAjCG;AAkCzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR;AAlCE,GAA3B;AAqCA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,KAAP;AACD,CAlEM","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    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    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/"}
+{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":"AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAGA,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,IAAA,QADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,IAAI,GAAG,QAHH;AAIJ;AACA,IAAA,IALI;AAMJ,IAAA,KANI;AAOJ,IAAA,IAPI;AAQJ,IAAA;AARI,MASF,KATJ;AAWA,QAAM,KAAK,GAAgB;AACzB,IAAA,QADyB;AAEzB,IAAA,IAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAJa;AAUzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAP,CAVG;AAgBzB,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,CAhBE;AA0BzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAP,CA1BG;AA2BzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR;AA3BE,GAA3B;AA8BA,EAAA,uBAAuB,CAAC,KAAD,EAAQ,KAAR,CAAvB;AAEA,SAAO,KAAP;AACD,CAnDM","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\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    disabled,\n    vertical,\n    size = 'medium',\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderState = {\n    disabled,\n    size,\n    vertical,\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, props);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Slider/useSliderState.js

@@ -1,28 +1,24 @@
-import * as React from 'react';
 import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { sliderCSSVars } from './useSliderStyles';
 const {
-  railOffsetVar,
-  railStepsPercentVar,
-  railProgressVar,
-  thumbPositionVar,
-  railDirectionVar
+  sliderStepsPercentVar,
+  sliderProgressVar,
+  sliderDirectionVar
 } = sliderCSSVars;
 
 const getPercent = (value, min, max) => {
   return max === min ? 0 : (value - min) / (max - min) * 100;
 };
 
-export const useSliderState_unstable = state => {
+export const useSliderState_unstable = (state, props) => {
   const {
-    value,
     defaultValue = 0,
     min = 0,
     max = 100,
-    step = 1,
-    origin
-  } = state;
+    step,
+    value
+  } = props;
   const {
     dir
   } = useFluent();
@@ -32,11 +28,8 @@ export const useSliderState_unstable = state => {
     initialState: 0
   });
   const valuePercent = getPercent(currentValue, min, max);
-  const originPercent = React.useMemo(() => {
-    return origin !== undefined ? getPercent(origin, min, max) : 0;
-  }, [max, min, origin]);
   const inputOnChange = state.input.onChange;
-  const propsOnChange = state.onChange;
+  const propsOnChange = props.onChange;
   const onChange = useEventCallback(ev => {
     const newValue = Number(ev.target.value);
     setCurrentValue(clamp(newValue, min, max));
@@ -50,11 +43,9 @@ export const useSliderState_unstable = state => {
     }
   });
   const rootVariables = {
-    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
-    [thumbPositionVar]: valuePercent + '%',
-    [railStepsPercentVar]: state.step && state.step > 0 ? `${step * 100 / (max - min)}%` : '',
-    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
-    [railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
+    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
+    [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
+    [sliderProgressVar]: `${valuePercent}%`
   }; // Root props
 
   state.root.style = { ...rootVariables,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState) => {\n  const { value, defaultValue = 0, min = 0, max = 100, step = 1, origin } = state;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value !== undefined ? clamp(value, min, max) : undefined,\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n  const valuePercent = getPercent(currentValue, min, max);\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = state.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const rootVariables = {\n    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [thumbPositionVar]: valuePercent + '%',\n    [railStepsPercentVar]: state.step && state.step > 0 ? `${(step * 100) / (max - min)}%` : '',\n    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n    [railProgressVar]:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = currentValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;AAAE,EAAA,qBAAF;AAAyB,EAAA,iBAAzB;AAA4C,EAAA;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;AAChF,QAAM;AAAE,IAAA,YAAY,GAAG,CAAjB;AAAoB,IAAA,GAAG,GAAG,CAA1B;AAA6B,IAAA,GAAG,GAAG,GAAnC;AAAwC,IAAA,IAAxC;AAA8C,IAAA;AAA9C,MAAwD,KAA9D;AACA,QAAM;AAAE,IAAA;AAAF,MAAU,SAAS,EAAzB;AACA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;AAE3D,IAAA,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAKA,QAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;AAEA,QAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;AACjF,UAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;AACA,IAAA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;AAEA,QAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;AACpD,MAAA,aAAa,CAAC,EAAD,CAAb;AACD,KAFD,MAEO,IAAI,aAAJ,EAAmB;AACxB,MAAA,aAAa,CAAC,EAAD,EAAK;AAAE,QAAA,KAAK,EAAE;AAAT,OAAL,CAAb;AACD;AACF,GAT4E,CAA7E;AAWA,QAAM,aAAa,GAAG;AACpB,KAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;AAEpB,KAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;AAGpB,KAAC,iBAAD,GAAqB,GAAG,YAAY;AAHhB,GAAtB,CAxBgF,CA8BhF;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;AAEjB,OAAG,KAAK,CAAC,IAAN,CAAW;AAFG,GAAnB,CA/BgF,CAoChF;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AAEA,SAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n  const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value !== undefined ? clamp(value, min, max) : undefined,\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n  const valuePercent = getPercent(currentValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n    [sliderProgressVar]: `${valuePercent}%`,\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = currentValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}