@fluentui/react-slider 1.0.0-beta.99 → 9.0.0-alpha.12

package/lib/utils/getMarkPercent.js

@@ -0,0 +1,27 @@
+/**
+ * Gets the current percentage position for the marks with respect to adjacent marks.
+ * This is used primarily for positioning with [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
+ *
+ * Example
+ * - `Rail: width = 100px`
+ * - `Marks: [0, 25, 50, 75, 100]`
+ * - `getMarkPercent: 0%, 25%, 25%, 25%, 25%`
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ */
+export var getMarkPercent = function (markValues) {
+  var result = []; // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
+
+  if (markValues.length > 0) {
+    result.push(markValues[0] + '% ');
+    var prevPercent = markValues[0];
+
+    for (var i = 1; i < markValues.length; i++) {
+      result.push(markValues[i] - prevPercent + '% ');
+      prevPercent = markValues[i];
+    }
+  }
+
+  return result;
+};
+//# sourceMappingURL=getMarkPercent.js.map

package/lib/utils/getMarkPercent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getMarkPercent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;AAUG;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,UAAD,EAAqB;AACjD,MAAM,MAAM,GAAa,EAAzB,CADiD,CAGjD;;AACA,MAAI,UAAU,CAAC,MAAX,GAAoB,CAAxB,EAA2B;AACzB,IAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,IAA5B;AACA,QAAI,WAAW,GAAG,UAAU,CAAC,CAAD,CAA5B;;AACA,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,UAAU,CAAC,MAA/B,EAAuC,CAAC,EAAxC,EAA4C;AAC1C,MAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,WAAhB,GAA8B,IAA1C;AACA,MAAA,WAAW,GAAG,UAAU,CAAC,CAAD,CAAxB;AACD;AACF;;AAED,SAAO,MAAP;AACD,CAdM","sourceRoot":""}

package/lib/utils/getMarkValues.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Gets the current percentage position for the marks with relative to the rail.
+ *
+ * Example
+ * - `Rail: width = 100px`
+ * - `Marks: [0, 25, 50, 75, 100]`
+ * - `getMarkValue: 0%, 25%, 50%, 75%, 100%`
+ */
+export declare const getMarkValue: (marks: boolean | (number | {
+    value: number;
+    label?: string | JSX.Element;
+    mark?: JSX.Element;
+})[] | undefined, min: number, max: number, step: number) => number[];

package/lib/utils/getMarkValues.js

@@ -0,0 +1,29 @@
+import { getPercent } from './getPercent';
+/**
+ * Gets the current percentage position for the marks with relative to the rail.
+ *
+ * Example
+ * - `Rail: width = 100px`
+ * - `Marks: [0, 25, 50, 75, 100]`
+ * - `getMarkValue: 0%, 25%, 50%, 75%, 100%`
+ */
+
+export var getMarkValue = function (marks, min, max, step) {
+  var valueArray = []; // 1. We receive a boolean: mark for every step.
+
+  if (typeof marks === 'boolean' && marks === true) {
+    for (var i = 0; i < (max - min) / step + 1; i++) {
+      valueArray.push(getPercent(min + step * i, min, max));
+    }
+  } else if (Array.isArray(marks) && marks.length > 0) {
+    return marks.map(function (marksItem) {
+      return typeof marksItem === 'number' ? // 2. We receive an array with numbers: mark for every value in array.
+      getPercent(min + marksItem, min, max) : // 3. We receive an array with objects containing numbers and strings:
+      // mark and label for every value + string in each object.
+      getPercent(min + marksItem.value, min, max);
+    });
+  }
+
+  return valueArray;
+};
+//# sourceMappingURL=getMarkValues.js.map

package/lib/utils/getMarkValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getMarkValues.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;;;;;AAOG;;AACH,OAAO,IAAM,YAAY,GAAG,UAC1B,KAD0B,EAE1B,GAF0B,EAG1B,GAH0B,EAI1B,IAJ0B,EAId;AAEZ,MAAM,UAAU,GAAa,EAA7B,CAFY,CAIZ;;AACA,MAAI,OAAO,KAAP,KAAiB,SAAjB,IAA8B,KAAK,KAAK,IAA5C,EAAkD;AAChD,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAd,GAAqB,CAAzC,EAA4C,CAAC,EAA7C,EAAiD;AAC/C,MAAA,UAAU,CAAC,IAAX,CAAgB,UAAU,CAAC,GAAG,GAAG,IAAI,GAAG,CAAd,EAAiB,GAAjB,EAAsB,GAAtB,CAA1B;AACD;AACF,GAJD,MAIO,IAAI,KAAK,CAAC,OAAN,CAAc,KAAd,KAAwB,KAAK,CAAC,MAAN,GAAe,CAA3C,EAA8C;AACnD,WAAO,KAAK,CAAC,GAAN,CAAU,UAAA,SAAA,EAAS;AACxB,aAAA,OAAO,SAAP,KAAqB,QAArB,GACI;AACA,MAAA,UAAU,CAAC,GAAG,GAAG,SAAP,EAAkB,GAAlB,EAAuB,GAAvB,CAFd,GAGI;AACA;AACA,MAAA,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,KAAjB,EAAwB,GAAxB,EAA6B,GAA7B,CALd;AAK+C,KAN1C,CAAP;AAQD;;AACD,SAAO,UAAP;AACD,CAxBM","sourceRoot":""}

package/lib/utils/getPercent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the current percent of specified value between a min and max
+ *
+ * @param value - the value to find the percent
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export declare const getPercent: (value: number, min: number, max: number) => number;

package/lib/utils/getPercent.js

@@ -0,0 +1,11 @@
+/**
+ * Gets the current percent of specified value between a min and max
+ *
+ * @param value - the value to find the percent
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export var getPercent = function (value, min, max) {
+  return max === min ? 0 : (value - min) / (max - min) * 100;
+};
+//# sourceMappingURL=getPercent.js.map

package/lib/utils/getPercent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getPercent.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAO,IAAM,UAAU,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AAChE,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFM","sourceRoot":""}

package/lib/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './calculateSteps';
+export * from './findClosestThumb';
+export * from './getKeydownValue';
+export * from './getMarkPercent';
+export * from './getMarkValues';
+export * from './getPercent';
+export * from './on';
+export * from './renderMarks';
+export * from './validateRangedThumbValues';

package/lib/utils/index.js

@@ -0,0 +1,10 @@
+export * from './calculateSteps';
+export * from './findClosestThumb';
+export * from './getKeydownValue';
+export * from './getMarkPercent';
+export * from './getMarkValues';
+export * from './getPercent';
+export * from './on';
+export * from './renderMarks';
+export * from './validateRangedThumbValues';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,MAAM,CAAC;AACrB,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC"}

package/lib/utils/on.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Adds and removes a given event listener on an element.
+ *
+ * @param element the element to listen to.
+ * @param eventName the event to watch.
+ * @param callback the callback to call when the eventName is triggered.
+ * @param useCapture whether the events should be dispatched to the callback first before other EventTargets.
+ *
+ * This should be replaced with a `useEvent` hook.
+ */
+export declare const on: <T>(element: Element | Window | Document, eventName: string, callback: (ev: T) => void, useCapture?: boolean | undefined) => () => void;

package/lib/utils/on.js

@@ -0,0 +1,17 @@
+/**
+ * Adds and removes a given event listener on an element.
+ *
+ * @param element the element to listen to.
+ * @param eventName the event to watch.
+ * @param callback the callback to call when the eventName is triggered.
+ * @param useCapture whether the events should be dispatched to the callback first before other EventTargets.
+ *
+ * This should be replaced with a `useEvent` hook.
+ */
+export var on = function (element, eventName, callback, useCapture) {
+  element.addEventListener(eventName, callback, useCapture);
+  return function () {
+    return element.removeEventListener(eventName, callback, useCapture);
+  };
+};
+//# sourceMappingURL=on.js.map

package/lib/utils/on.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/on.ts"],"names":[],"mappings":"AAAA;;;;;;;;;AASG;AACH,OAAO,IAAM,EAAE,GAAG,UAChB,OADgB,EAEhB,SAFgB,EAGhB,QAHgB,EAIhB,UAJgB,EAII;AAEpB,EAAA,OAAO,CAAC,gBAAR,CAAyB,SAAzB,EAAqC,QAArC,EAAkF,UAAlF;AACA,SAAO,YAAA;AAAM,WAAA,OAAO,CAAC,mBAAR,CAA4B,SAA5B,EAAwC,QAAxC,EAAA,UAAA,CAAA;AAAgG,GAA7G;AACD,CARM","sourceRoot":""}

package/lib/utils/renderMarks.d.ts

@@ -0,0 +1,13 @@
+export declare const markClassName = "ms-Slider-mark";
+export declare const markLabelClassName = "ms-Slider-label";
+/**
+ * Renders the marks
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ * @param marks The provided marks prop from the Slider component.
+ */
+export declare const renderMarks: (markValues: number[], marks: boolean | (number | {
+    value: number;
+    label?: string | JSX.Element;
+    mark?: JSX.Element;
+})[]) => JSX.Element[];

package/lib/utils/renderMarks.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { mergeClasses } from '@fluentui/react-make-styles'; // The mark related classNames are needed since they are used in a JSX element that is dynamically generated.
+
+var markContainerClassName = 'ms-Slider-markItemContainer';
+var firstMarkClassName = 'ms-Slider-firstMark';
+var lastMarkClassName = 'ms-Slider-lastMark';
+export var markClassName = 'ms-Slider-mark';
+export var markLabelClassName = 'ms-Slider-label';
+/**
+ * Renders the marks
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ * @param marks The provided marks prop from the Slider component.
+ */
+
+export var renderMarks = function (markValues, marks) {
+  return markValues.map(function (value, i) {
+    var marksItem = typeof marks === 'boolean' ? undefined : marks[i];
+    return /*#__PURE__*/React.createElement("div", {
+      className: markContainerClassName,
+      key: "markItemContainer-" + i
+    }, marksItem !== undefined && typeof marksItem === 'object' && marksItem.mark ? marksItem.mark : /*#__PURE__*/React.createElement("div", {
+      className: mergeClasses(markClassName, markValues[i] === 0 && firstMarkClassName, markValues[i] === 100 && lastMarkClassName),
+      key: "mark-" + i
+    }), marksItem !== undefined && typeof marksItem === 'object' && marksItem.label && /*#__PURE__*/React.createElement("div", {
+      className: markLabelClassName,
+      key: "markLabel-" + i
+    }, marksItem.label));
+  });
+};
+//# sourceMappingURL=renderMarks.js.map

package/lib/utils/renderMarks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/renderMarks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,6BAA7B,C,CAEA;;AACA,IAAM,sBAAsB,GAAG,6BAA/B;AACA,IAAM,kBAAkB,GAAG,qBAA3B;AACA,IAAM,iBAAiB,GAAG,oBAA1B;AACA,OAAO,IAAM,aAAa,GAAG,gBAAtB;AACP,OAAO,IAAM,kBAAkB,GAAG,iBAA3B;AAEP;;;;;AAKG;;AACH,OAAO,IAAM,WAAW,GAAG,UACzB,UADyB,EAEzB,KAFyB,EAEwE;AAEjG,SAAA,UAAU,CAAC,GAAX,CAAe,UAAC,KAAD,EAAQ,CAAR,EAAS;AACtB,QAAM,SAAS,GAAG,OAAO,KAAP,KAAiB,SAAjB,GAA6B,SAA7B,GAAyC,KAAK,CAAC,CAAD,CAAhE;AAEA,wBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE,sBAAhB;AAAwC,MAAA,GAAG,EAAE,uBAAqB;AAAlE,KAAA,EACG,SAAS,KAAK,SAAd,IAA2B,OAAO,SAAP,KAAqB,QAAhD,IAA4D,SAAS,CAAC,IAAtE,GACC,SAAS,CAAC,IADX,gBAGC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,MAAA,SAAS,EAAE,YAAY,CACrB,aADqB,EAErB,UAAU,CAAC,CAAD,CAAV,KAAkB,CAAlB,IAAuB,kBAFF,EAGrB,UAAU,CAAC,CAAD,CAAV,KAAkB,GAAlB,IAAyB,iBAHJ,CADzB;AAME,MAAA,GAAG,EAAE,UAAQ;AANf,KAAA,CAJJ,EAaG,SAAS,KAAK,SAAd,IAA2B,OAAO,SAAP,KAAqB,QAAhD,IAA4D,SAAS,CAAC,KAAtE,iBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE,kBAAhB;AAAoC,MAAA,GAAG,EAAE,eAAa;AAAtD,KAAA,EACG,SAAS,CAAC,KADb,CAdJ,CADF;AAqBD,GAxBD,CAAA;AAwBE,CA5BG","sourceRoot":""}

package/lib/utils/validateRangedThumbValues.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Clamps and sorts the values in RangedSlider to a given min and max
+ */
+export declare const validateRangedThumbValues: (thumbValues: [number, number], min: number, max: number) => [number, number];

package/lib/utils/validateRangedThumbValues.js

@@ -0,0 +1,13 @@
+import { clamp } from '@fluentui/react-utilities';
+/**
+ * Clamps and sorts the values in RangedSlider to a given min and max
+ */
+
+export var validateRangedThumbValues = function (thumbValues, min, max) {
+  return thumbValues.map(function (value) {
+    return clamp(value, min, max);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+};
+//# sourceMappingURL=validateRangedThumbValues.js.map

package/lib/utils/validateRangedThumbValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/validateRangedThumbValues.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,QAAsB,2BAAtB;AAEA;;AAEG;;AACH,OAAO,IAAM,yBAAyB,GAAG,UAAC,WAAD,EAAgC,GAAhC,EAA6C,GAA7C,EAAwD;AAC/F,SAAA,WAAW,CAAC,GAAZ,CAAgB,UAAA,KAAA,EAAK;AAAI,WAAA,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAL,GAAK,CAAL;AAAsB,GAA/C,EAAiD,IAAjD,CAAsD,UAAC,CAAD,EAAI,CAAJ,EAAK;AAAK,WAAA,CAAC,GAAD,CAAA;AAAK,GAArE,CAAA;AAA0F,CADrF","sourceRoot":""}

package/lib-commonjs/RangedSlider.d.ts

@@ -0,0 +1 @@
+export * from './components/RangedSlider/index';

package/lib-commonjs/RangedSlider.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/RangedSlider/index"), exports);
+//# sourceMappingURL=RangedSlider.js.map

package/lib-commonjs/RangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RangedSlider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/Slider.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/Slider/index"), exports);
 //# sourceMappingURL=Slider.js.map

package/lib-commonjs/Slider.js.map

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

package/lib-commonjs/common/isConformant.d.ts

@@ -1,4 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
+import type { IsConformantOptions } from '@fluentui/react-conformance';
 export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
     componentPath?: string;
 }): void;

package/lib-commonjs/common/isConformant.js

@@ -1,13 +1,23 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.isConformant = void 0;
-var react_conformance_1 = require("@fluentui/react-conformance");
+
+var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
+
+var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
+
 function isConformant(testInfo) {
-    var defaultOptions = {
-        disabledTests: ['has-docblock', 'kebab-aria-attributes'],
-        componentPath: module.parent.filename.replace('.test', ''),
-    };
-    react_conformance_1.isConformant(defaultOptions, testInfo);
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    extraTests: react_conformance_make_styles_1.default,
+    skipAsPropTests: true
+  };
+  react_conformance_1.isConformant(defaultOptions, testInfo);
 }
+
 exports.isConformant = isConformant;
 //# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;AAAA,iEAAoG;AAEpG,SAAgB,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;QACxD,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAH+C;AAI3D,IAAA,eAAe,EAAE;AAJ0C,GAA7D;AAOA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAXD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

package/lib-commonjs/components/RangedSlider/RangedSlider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { RangedSliderProps } from './RangedSlider.types';
+/**
+ * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
+ */
+export declare const RangedSlider: React.ForwardRefExoticComponent<RangedSliderProps & React.RefAttributes<HTMLDivElement>>;

package/lib-commonjs/components/RangedSlider/RangedSlider.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangedSlider = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderRangedSlider_1 = /*#__PURE__*/require("./renderRangedSlider");
+
+var useRangedSlider_1 = /*#__PURE__*/require("./useRangedSlider");
+
+var useRangedSliderStyles_1 = /*#__PURE__*/require("./useRangedSliderStyles");
+/**
+ * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
+ */
+
+
+exports.RangedSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useRangedSlider_1.useRangedSlider(props, ref);
+  useRangedSliderStyles_1.useRangedSliderStyles(state);
+  return renderRangedSlider_1.renderRangedSlider(state);
+});
+exports.RangedSlider.displayName = 'RangedSlider';
+//# sourceMappingURL=RangedSlider.js.map

package/lib-commonjs/components/RangedSlider/RangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/RangedSlider.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAoD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACzF,MAAM,KAAK,GAAG,iBAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,GAAvB,CAAd;AAEA,EAAA,uBAAA,CAAA,qBAAA,CAAsB,KAAtB;AAEA,SAAO,oBAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAP;AACD,CAN2B,CAAf;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourceRoot":""}

package/lib-commonjs/components/RangedSlider/RangedSlider.types.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { SliderSlots, SliderCommons } from '../Slider/Slider.types';
+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 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.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
+        value: [number, number];
+    }) => void;
+}
+export interface RangedSliderProps extends Omit<ComponentProps<RangedSliderSlots>, 'onChange' | 'defaultValue'>, RangedSliderCommons {
+}
+export interface RangedSliderState extends ComponentState<RangedSliderSlots>, RangedSliderCommons {
+}

package/lib-commonjs/components/RangedSlider/RangedSlider.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=RangedSlider.types.js.map

package/lib-commonjs/components/RangedSlider/RangedSlider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/components/RangedSlider/index.d.ts

@@ -0,0 +1,6 @@
+export * from './RangedSlider';
+export * from './RangedSlider.types';
+export * from './renderRangedSlider';
+export * from './useRangedSlider';
+export * from './useRangedSliderState';
+export * from './useRangedSliderStyles';

package/lib-commonjs/components/RangedSlider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./RangedSlider"), exports);
+
+tslib_1.__exportStar(require("./RangedSlider.types"), exports);
+
+tslib_1.__exportStar(require("./renderRangedSlider"), exports);
+
+tslib_1.__exportStar(require("./useRangedSlider"), exports);
+
+tslib_1.__exportStar(require("./useRangedSliderState"), exports);
+
+tslib_1.__exportStar(require("./useRangedSliderStyles"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/RangedSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/RangedSlider/renderRangedSlider.d.ts

@@ -0,0 +1,5 @@
+import type { RangedSliderState } from './RangedSlider.types';
+/**
+ * Render the final JSX of RangedSlider
+ */
+export declare const renderRangedSlider: (state: RangedSliderState) => JSX.Element;

package/lib-commonjs/components/RangedSlider/renderRangedSlider.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderRangedSlider = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Array of all shorthand properties listed in RangedSliderSlots.
+ */
+
+
+var rangedSliderShorthandProps = ['activeRail', 'lowerInput', 'lowerThumb', 'lowerThumbWrapper', 'marksWrapper', 'rail', 'root', 'sliderWrapper', 'track', 'trackWrapper', 'upperInput', 'upperThumb', 'upperThumbWrapper'];
+/**
+ * Render the final JSX of RangedSlider
+ */
+
+var renderRangedSlider = function (state) {
+  var _a = react_utilities_1.getSlots(state, rangedSliderShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.marks && React.createElement(slots.marksWrapper, tslib_1.__assign({}, slotProps.marksWrapper)), React.createElement(slots.sliderWrapper, tslib_1.__assign({}, slotProps.sliderWrapper), React.createElement(slots.rail, tslib_1.__assign({}, slotProps.rail)), React.createElement(slots.trackWrapper, tslib_1.__assign({}, slotProps.trackWrapper), React.createElement(slots.track, tslib_1.__assign({}, slotProps.track))), React.createElement(slots.lowerThumbWrapper, tslib_1.__assign({}, slotProps.lowerThumbWrapper), React.createElement(slots.lowerInput, tslib_1.__assign({}, slotProps.lowerInput)), React.createElement(slots.lowerThumb, tslib_1.__assign({}, slotProps.lowerThumb))), React.createElement(slots.upperThumbWrapper, tslib_1.__assign({}, slotProps.upperThumbWrapper), React.createElement(slots.upperInput, tslib_1.__assign({}, slotProps.upperInput)), React.createElement(slots.upperThumb, tslib_1.__assign({}, slotProps.upperThumb))), React.createElement(slots.activeRail, tslib_1.__assign({}, slotProps.activeRail))));
+};
+
+exports.renderRangedSlider = renderRangedSlider;
+//# sourceMappingURL=renderRangedSlider.js.map

package/lib-commonjs/components/RangedSlider/renderRangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/renderRangedSlider.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,0BAA0B,GAAgC,CAC9D,YAD8D,EAE9D,YAF8D,EAG9D,YAH8D,EAI9D,mBAJ8D,EAK9D,cAL8D,EAM9D,MAN8D,EAO9D,MAP8D,EAQ9D,eAR8D,EAS9D,OAT8D,EAU9D,cAV8D,EAW9D,YAX8D,EAY9D,YAZ8D,EAa9D,mBAb8D,CAAhE;AAgBA;;AAEG;;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAyB;AACnD,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA4B,KAA5B,EAAmC,0BAAnC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,CADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,aAAf,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,CAFF,EAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,iBAAf,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CALF,EASE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,iBAAf,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CATF,EAaE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAbF,CAFF,CADF;AAoBD,CAvBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}

package/lib-commonjs/components/RangedSlider/useRangedSlider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { RangedSliderProps, RangedSliderState } from './RangedSlider.types';
+/**
+ * Given user props, returns state and render function for a RangedSlider.
+ */
+export declare const useRangedSlider: (props: RangedSliderProps, ref: React.Ref<HTMLElement>) => RangedSliderState;