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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/CHANGELOG.json +528 -1
  2. package/CHANGELOG.md +150 -2
  3. package/MIGRATION.md +20 -50
  4. package/README.md +6 -14
  5. package/Spec.md +81 -0
  6. package/dist/react-slider.d.ts +35 -147
  7. package/lib/Slider.js.map +1 -1
  8. package/lib/components/Slider/Slider.js +7 -7
  9. package/lib/components/Slider/Slider.js.map +1 -1
  10. package/lib/components/Slider/Slider.types.d.ts +27 -60
  11. package/lib/components/Slider/Slider.types.js.map +1 -1
  12. package/lib/components/Slider/index.d.ts +2 -2
  13. package/lib/components/Slider/index.js +2 -2
  14. package/lib/components/Slider/index.js.map +1 -1
  15. package/lib/components/Slider/renderSlider.d.ts +1 -1
  16. package/lib/components/Slider/renderSlider.js +10 -8
  17. package/lib/components/Slider/renderSlider.js.map +1 -1
  18. package/lib/components/Slider/useSlider.d.ts +2 -6
  19. package/lib/components/Slider/useSlider.js +48 -80
  20. package/lib/components/Slider/useSlider.js.map +1 -1
  21. package/lib/components/Slider/useSliderState.d.ts +1 -2
  22. package/lib/components/Slider/useSliderState.js +55 -185
  23. package/lib/components/Slider/useSliderState.js.map +1 -1
  24. package/lib/components/Slider/useSliderStyles.d.ts +11 -40
  25. package/lib/components/Slider/useSliderStyles.js +185 -290
  26. package/lib/components/Slider/useSliderStyles.js.map +1 -1
  27. package/lib/index.d.ts +2 -2
  28. package/lib/index.js +1 -2
  29. package/lib/index.js.map +1 -1
  30. package/lib-commonjs/Slider.js +1 -1
  31. package/lib-commonjs/Slider.js.map +1 -1
  32. package/lib-commonjs/components/Slider/Slider.js +8 -8
  33. package/lib-commonjs/components/Slider/Slider.js.map +1 -1
  34. package/lib-commonjs/components/Slider/Slider.types.d.ts +27 -60
  35. package/lib-commonjs/components/Slider/Slider.types.js.map +1 -1
  36. package/lib-commonjs/components/Slider/index.d.ts +2 -2
  37. package/lib-commonjs/components/Slider/index.js +12 -6
  38. package/lib-commonjs/components/Slider/index.js.map +1 -1
  39. package/lib-commonjs/components/Slider/renderSlider.d.ts +1 -1
  40. package/lib-commonjs/components/Slider/renderSlider.js +14 -14
  41. package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
  42. package/lib-commonjs/components/Slider/useSlider.d.ts +2 -6
  43. package/lib-commonjs/components/Slider/useSlider.js +51 -84
  44. package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
  45. package/lib-commonjs/components/Slider/useSliderState.d.ts +1 -2
  46. package/lib-commonjs/components/Slider/useSliderState.js +58 -190
  47. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  48. package/lib-commonjs/components/Slider/useSliderStyles.d.ts +11 -40
  49. package/lib-commonjs/components/Slider/useSliderStyles.js +188 -293
  50. package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
  51. package/lib-commonjs/index.d.ts +2 -2
  52. package/lib-commonjs/index.js +38 -4
  53. package/lib-commonjs/index.js.map +1 -1
  54. package/package.json +20 -22
  55. package/lib/RangedSlider.d.ts +0 -1
  56. package/lib/RangedSlider.js +0 -2
  57. package/lib/RangedSlider.js.map +0 -1
  58. package/lib/common/isConformant.d.ts +0 -4
  59. package/lib/common/isConformant.js +0 -12
  60. package/lib/common/isConformant.js.map +0 -1
  61. package/lib/components/RangedSlider/RangedSlider.d.ts +0 -6
  62. package/lib/components/RangedSlider/RangedSlider.js +0 -15
  63. package/lib/components/RangedSlider/RangedSlider.js.map +0 -1
  64. package/lib/components/RangedSlider/RangedSlider.types.d.ts +0 -53
  65. package/lib/components/RangedSlider/RangedSlider.types.js +0 -2
  66. package/lib/components/RangedSlider/RangedSlider.types.js.map +0 -1
  67. package/lib/components/RangedSlider/index.d.ts +0 -6
  68. package/lib/components/RangedSlider/index.js +0 -7
  69. package/lib/components/RangedSlider/index.js.map +0 -1
  70. package/lib/components/RangedSlider/renderRangedSlider.d.ts +0 -5
  71. package/lib/components/RangedSlider/renderRangedSlider.js +0 -20
  72. package/lib/components/RangedSlider/renderRangedSlider.js.map +0 -1
  73. package/lib/components/RangedSlider/useRangedSlider.d.ts +0 -6
  74. package/lib/components/RangedSlider/useRangedSlider.js +0 -116
  75. package/lib/components/RangedSlider/useRangedSlider.js.map +0 -1
  76. package/lib/components/RangedSlider/useRangedSliderState.d.ts +0 -2
  77. package/lib/components/RangedSlider/useRangedSliderState.js +0 -271
  78. package/lib/components/RangedSlider/useRangedSliderState.js.map +0 -1
  79. package/lib/components/RangedSlider/useRangedSliderStyles.d.ts +0 -4
  80. package/lib/components/RangedSlider/useRangedSliderStyles.js +0 -92
  81. package/lib/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
  82. package/lib/utils/calculateSteps.d.ts +0 -5
  83. package/lib/utils/calculateSteps.js +0 -27
  84. package/lib/utils/calculateSteps.js.map +0 -1
  85. package/lib/utils/findClosestThumb.d.ts +0 -4
  86. package/lib/utils/findClosestThumb.js +0 -7
  87. package/lib/utils/findClosestThumb.js.map +0 -1
  88. package/lib/utils/getKeydownValue.d.ts +0 -6
  89. package/lib/utils/getKeydownValue.js +0 -35
  90. package/lib/utils/getKeydownValue.js.map +0 -1
  91. package/lib/utils/getMarkPercent.d.ts +0 -12
  92. package/lib/utils/getMarkPercent.js +0 -27
  93. package/lib/utils/getMarkPercent.js.map +0 -1
  94. package/lib/utils/getMarkValues.d.ts +0 -13
  95. package/lib/utils/getMarkValues.js +0 -29
  96. package/lib/utils/getMarkValues.js.map +0 -1
  97. package/lib/utils/getPercent.d.ts +0 -8
  98. package/lib/utils/getPercent.js +0 -11
  99. package/lib/utils/getPercent.js.map +0 -1
  100. package/lib/utils/index.d.ts +0 -9
  101. package/lib/utils/index.js +0 -10
  102. package/lib/utils/index.js.map +0 -1
  103. package/lib/utils/on.d.ts +0 -11
  104. package/lib/utils/on.js +0 -17
  105. package/lib/utils/on.js.map +0 -1
  106. package/lib/utils/renderMarks.d.ts +0 -13
  107. package/lib/utils/renderMarks.js +0 -31
  108. package/lib/utils/renderMarks.js.map +0 -1
  109. package/lib/utils/validateRangedThumbValues.d.ts +0 -4
  110. package/lib/utils/validateRangedThumbValues.js +0 -13
  111. package/lib/utils/validateRangedThumbValues.js.map +0 -1
  112. package/lib-commonjs/RangedSlider.d.ts +0 -1
  113. package/lib-commonjs/RangedSlider.js +0 -10
  114. package/lib-commonjs/RangedSlider.js.map +0 -1
  115. package/lib-commonjs/common/isConformant.d.ts +0 -4
  116. package/lib-commonjs/common/isConformant.js +0 -23
  117. package/lib-commonjs/common/isConformant.js.map +0 -1
  118. package/lib-commonjs/components/RangedSlider/RangedSlider.d.ts +0 -6
  119. package/lib-commonjs/components/RangedSlider/RangedSlider.js +0 -26
  120. package/lib-commonjs/components/RangedSlider/RangedSlider.js.map +0 -1
  121. package/lib-commonjs/components/RangedSlider/RangedSlider.types.d.ts +0 -53
  122. package/lib-commonjs/components/RangedSlider/RangedSlider.types.js +0 -6
  123. package/lib-commonjs/components/RangedSlider/RangedSlider.types.js.map +0 -1
  124. package/lib-commonjs/components/RangedSlider/index.d.ts +0 -6
  125. package/lib-commonjs/components/RangedSlider/index.js +0 -20
  126. package/lib-commonjs/components/RangedSlider/index.js.map +0 -1
  127. package/lib-commonjs/components/RangedSlider/renderRangedSlider.d.ts +0 -5
  128. package/lib-commonjs/components/RangedSlider/renderRangedSlider.js +0 -32
  129. package/lib-commonjs/components/RangedSlider/renderRangedSlider.js.map +0 -1
  130. package/lib-commonjs/components/RangedSlider/useRangedSlider.d.ts +0 -6
  131. package/lib-commonjs/components/RangedSlider/useRangedSlider.js +0 -128
  132. package/lib-commonjs/components/RangedSlider/useRangedSlider.js.map +0 -1
  133. package/lib-commonjs/components/RangedSlider/useRangedSliderState.d.ts +0 -2
  134. package/lib-commonjs/components/RangedSlider/useRangedSliderState.js +0 -286
  135. package/lib-commonjs/components/RangedSlider/useRangedSliderState.js.map +0 -1
  136. package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.d.ts +0 -4
  137. package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js +0 -104
  138. package/lib-commonjs/components/RangedSlider/useRangedSliderStyles.js.map +0 -1
  139. package/lib-commonjs/utils/calculateSteps.d.ts +0 -5
  140. package/lib-commonjs/utils/calculateSteps.js +0 -37
  141. package/lib-commonjs/utils/calculateSteps.js.map +0 -1
  142. package/lib-commonjs/utils/findClosestThumb.d.ts +0 -4
  143. package/lib-commonjs/utils/findClosestThumb.js +0 -16
  144. package/lib-commonjs/utils/findClosestThumb.js.map +0 -1
  145. package/lib-commonjs/utils/getKeydownValue.d.ts +0 -6
  146. package/lib-commonjs/utils/getKeydownValue.js +0 -45
  147. package/lib-commonjs/utils/getKeydownValue.js.map +0 -1
  148. package/lib-commonjs/utils/getMarkPercent.d.ts +0 -12
  149. package/lib-commonjs/utils/getMarkPercent.js +0 -36
  150. package/lib-commonjs/utils/getMarkPercent.js.map +0 -1
  151. package/lib-commonjs/utils/getMarkValues.d.ts +0 -13
  152. package/lib-commonjs/utils/getMarkValues.js +0 -39
  153. package/lib-commonjs/utils/getMarkValues.js.map +0 -1
  154. package/lib-commonjs/utils/getPercent.d.ts +0 -8
  155. package/lib-commonjs/utils/getPercent.js +0 -20
  156. package/lib-commonjs/utils/getPercent.js.map +0 -1
  157. package/lib-commonjs/utils/index.d.ts +0 -9
  158. package/lib-commonjs/utils/index.js +0 -26
  159. package/lib-commonjs/utils/index.js.map +0 -1
  160. package/lib-commonjs/utils/on.d.ts +0 -11
  161. package/lib-commonjs/utils/on.js +0 -26
  162. package/lib-commonjs/utils/on.js.map +0 -1
  163. package/lib-commonjs/utils/renderMarks.d.ts +0 -13
  164. package/lib-commonjs/utils/renderMarks.js +0 -42
  165. package/lib-commonjs/utils/renderMarks.js.map +0 -1
  166. package/lib-commonjs/utils/validateRangedThumbValues.d.ts +0 -4
  167. package/lib-commonjs/utils/validateRangedThumbValues.js +0 -23
  168. package/lib-commonjs/utils/validateRangedThumbValues.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n railDirectionVar: `--fui-Slider__rail--direction`,\n railOffsetVar: `--fui-Slider__rail--offset`,\n railProgressVar: `--fui-Slider__rail--progress`,\n railStepsPercentVar: `--fui-Slider__rail--steps-percent`,\n thumbPositionVar: `--fui-Slider__thumb--position`,\n};\n\nconst { railDirectionVar, railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n gridTemplateAreas: '\"slider\"',\n userSelect: 'none',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n height: `var(${thumbSizeVar})`,\n },\n\n vertical: {\n width: `var(${thumbSizeVar})`,\n minHeight: '120px',\n gridTemplateColumns: `var(${thumbSizeVar})`,\n },\n\n enabled: {\n [railColorVar]: tokens.colorNeutralStrokeAccessible,\n [progressColorVar]: tokens.colorCompoundBrandBackground,\n [thumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [thumbColorVar]: tokens.colorBrandBackgroundHover,\n [progressColorVar]: tokens.colorBrandBackgroundHover,\n },\n ':active': {\n [thumbColorVar]: tokens.colorBrandBackgroundPressed,\n [progressColorVar]: tokens.colorBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [railColorVar]: 'CanvasText',\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n ':hover': {\n [thumbColorVar]: 'Highlight',\n [progressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [railColorVar]: 'GrayText',\n [thumbColorVar]: 'GrayText',\n [progressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '6px', bottom: '6px', left: '10px', right: '10px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '10px', bottom: '10px', left: '6px', right: '6px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${railDirectionVar}),\n var(${railColorVar}) 0%,\n var(${railColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) var(${railOffsetVar}),\n var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n ':before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${railDirectionVar}),\n #0000 0%,\n #0000 calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n )`,\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${railSizeVar})`,\n ':before': {\n left: '-1px',\n right: '-1px',\n height: `var(${railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${railSizeVar})`,\n height: '100%',\n ':before': {\n width: `var(${railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n transform: 'translateX(-50%)',\n ':before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: \"''\",\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n },\n },\n disabled: {\n ':before': {\n ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n },\n },\n horizontal: {\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n opacity: 0,\n gridRowStart: 'slider',\n gridRowEnd: 'slider',\n gridColumnStart: 'slider',\n gridColumnEnd: 'slider',\n ...shorthands.padding(0),\n ...shorthands.margin(0),\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: `calc(100% + var(${thumbSizeVar}))`,\n },\n vertical: {\n height: `calc(100% + var(${thumbSizeVar}))`,\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical',\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from './Slider';
2
- export * from './RangedSlider';
1
+ export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, } from './Slider';
2
+ export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';
package/lib/index.js CHANGED
@@ -1,3 +1,2 @@
1
- export * from './Slider';
2
- export * from './RangedSlider';
1
+ export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable } from './Slider';
3
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,qBAFF,EAGE,gBAHF,EAIE,uBAJF,EAKE,wBALF,EAME,kBANF,QAOO,UAPP","sourcesContent":["export {\n Slider,\n renderSlider_unstable,\n sliderClassNames,\n useSliderState_unstable,\n useSliderStyles_unstable,\n useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n"],"sourceRoot":"../src/"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/Slider/index"), exports);
10
10
  //# sourceMappingURL=Slider.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Slider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["Slider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Slider/index';\n"],"sourceRoot":"../src/"}
@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Slider = void 0;
7
7
 
8
- var React = /*#__PURE__*/require("react");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var useSlider_1 = /*#__PURE__*/require("./useSlider");
10
+ const useSlider_1 = /*#__PURE__*/require("./useSlider");
11
11
 
12
- var renderSlider_1 = /*#__PURE__*/require("./renderSlider");
12
+ const renderSlider_1 = /*#__PURE__*/require("./renderSlider");
13
13
 
14
- var useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
14
+ const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
15
15
  /**
16
16
  * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
17
17
  */
18
18
 
19
19
 
20
- exports.Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
- var state = useSlider_1.useSlider(props, ref);
22
- useSliderStyles_1.useSliderStyles(state);
23
- return renderSlider_1.renderSlider(state);
20
+ exports.Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useSlider_1.useSlider_unstable(props, ref);
22
+ useSliderStyles_1.useSliderStyles_unstable(state);
23
+ return renderSlider_1.renderSlider_unstable(state);
24
24
  });
25
25
  exports.Slider.displayName = 'Slider';
26
26
  //# sourceMappingURL=Slider.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP;AACD,CANuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
1
+ {"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n const state = useSlider_unstable(props, ref);\n\n useSliderStyles_unstable(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}
@@ -1,49 +1,38 @@
1
1
  import * as React from 'react';
2
- import { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
2
+ import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
3
3
  export declare type SliderSlots = {
4
4
  /**
5
5
  * The root of the Slider.
6
+ * The root slot receives the `className` and `style` specified directly on the `<Slider>`.
7
+ * All other native props will be applied to the primary slot, `input`.
6
8
  */
7
- root: IntrinsicShorthandProps<'div'>;
9
+ root: NonNullable<Slot<'div'>>;
8
10
  /**
9
11
  * The Slider's base. It is used to visibly display the min and max selectable values.
10
12
  */
11
- rail: IntrinsicShorthandProps<'div'>;
12
- /**
13
- * The wrapper around the Slider component.
14
- */
15
- sliderWrapper: IntrinsicShorthandProps<'div'>;
16
- /**
17
- * The wrapper around the Slider's track. It is primarily used to handle the positioning of the track.
18
- */
19
- trackWrapper: IntrinsicShorthandProps<'div'>;
20
- /**
21
- * The bar showing the current selected area adjacent to the Slider's thumb.
22
- */
23
- track: IntrinsicShorthandProps<'div'>;
24
- /**
25
- * The wrapper holding the marks and mark labels for the Slider.
26
- */
27
- marksWrapper: IntrinsicShorthandProps<'div'>;
28
- /**
29
- * The wrapper around the Slider's thumb. It is primarily used to handle the dragging animation from translateX.
30
- */
31
- thumbWrapper: IntrinsicShorthandProps<'div'>;
13
+ rail: NonNullable<Slot<'div'>>;
32
14
  /**
33
15
  * The draggable icon used to select a given value from the Slider.
34
16
  * This is the element containing `role = 'slider'`.
35
17
  */
36
- thumb: IntrinsicShorthandProps<'div'>;
37
- /**
38
- * The area in which the Slider's rail allows for the thumb to be dragged.
39
- */
40
- activeRail: IntrinsicShorthandProps<'div'>;
18
+ thumb: NonNullable<Slot<'div'>>;
41
19
  /**
42
20
  * The hidden input for the Slider.
21
+ * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
22
+ * except `className` and `style`, which remain on the root slot.
23
+ *
43
24
  */
44
- input: IntrinsicShorthandProps<'input'>;
25
+ input: NonNullable<Slot<'input'>> & {
26
+ /**
27
+ * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
28
+ * when `vertical` is set to true.
29
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
30
+ * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
31
+ */
32
+ orient?: 'horizontal' | 'vertical';
33
+ };
45
34
  };
46
- export declare type SliderCommons = {
35
+ declare type SliderCommons = {
47
36
  /**
48
37
  * The starting value for an uncontrolled Slider.
49
38
  * Mutually exclusive with `value` prop.
@@ -70,14 +59,6 @@ export declare type SliderCommons = {
70
59
  * @default 1
71
60
  */
72
61
  step?: number;
73
- /**
74
- * The number of steps that the Slider's value will change by during a key press. When provided, the `keyboardSteps`
75
- * will be separated from the pointer `steps` allowing for the value to go outside of pointer related
76
- * snapping values.
77
- *
78
- * @default `step` or 1
79
- */
80
- keyboardStep?: number;
81
62
  /**
82
63
  * Whether to render the Slider as disabled.
83
64
  *
@@ -85,22 +66,10 @@ export declare type SliderCommons = {
85
66
  */
86
67
  disabled?: boolean;
87
68
  /**
88
- * Whether to render the Slider vertically.
89
- * @default `false` (renders horizontally)
69
+ * Render the Slider in a vertical orientation, smallest value on the bottom.
70
+ * @default `false`
90
71
  */
91
72
  vertical?: boolean;
92
- /**
93
- * When enabled, small marks are displayed across the Slider, showing potential steps.
94
- *
95
- * - If `true`, marks are visible at each `step`.
96
- * - If `number[]`, marks will be displayed at each provided number. Numbers must be in ascending order.
97
- * - If `{}[]`, mark is shown at the value location and displays any provided custom labels and marks.
98
- */
99
- marks?: boolean | (number | {
100
- value: number;
101
- label?: string | JSX.Element;
102
- mark?: JSX.Element;
103
- })[];
104
73
  /**
105
74
  * The starting origin point for the Slider.
106
75
  * @default min
@@ -114,13 +83,11 @@ export declare type SliderCommons = {
114
83
  /**
115
84
  * Triggers a callback when the value has been changed. This will be called on every individual step.
116
85
  */
117
- onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
118
- value: number;
119
- }) => void;
120
- /**
121
- * The Slider's current value label to be read by the screen reader.
122
- */
123
- ariaValueText?: (value: number) => string;
86
+ onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
87
+ };
88
+ export declare type SliderOnChangeData = {
89
+ value: number;
124
90
  };
125
- export declare type SliderProps = Omit<ComponentProps<SliderSlots>, 'onChange' | 'defaultValue'> & SliderCommons;
91
+ export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
126
92
  export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
93
+ export {};
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
@@ -2,5 +2,5 @@ export * from './Slider';
2
2
  export * from './Slider.types';
3
3
  export * from './renderSlider';
4
4
  export * from './useSlider';
5
- export { useSliderState } from './useSliderState';
6
- export { useSliderStyles } from './useSliderStyles';
5
+ export { useSliderState_unstable } from './useSliderState';
6
+ export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
@@ -3,9 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useSliderStyles = exports.useSliderState = void 0;
6
+ exports.useSliderStyles_unstable = exports.sliderClassNames = exports.useSliderState_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
9
 
10
10
  tslib_1.__exportStar(require("./Slider"), exports);
11
11
 
@@ -17,19 +17,25 @@ tslib_1.__exportStar(require("./useSlider"), exports);
17
17
 
18
18
  var useSliderState_1 = /*#__PURE__*/require("./useSliderState");
19
19
 
20
- Object.defineProperty(exports, "useSliderState", {
20
+ Object.defineProperty(exports, "useSliderState_unstable", {
21
21
  enumerable: true,
22
22
  get: function () {
23
- return useSliderState_1.useSliderState;
23
+ return useSliderState_1.useSliderState_unstable;
24
24
  }
25
25
  });
26
26
 
27
27
  var useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
28
28
 
29
- Object.defineProperty(exports, "useSliderStyles", {
29
+ Object.defineProperty(exports, "sliderClassNames", {
30
30
  enumerable: true,
31
31
  get: function () {
32
- return useSliderStyles_1.useSliderStyles;
32
+ return useSliderStyles_1.sliderClassNames;
33
+ }
34
+ });
35
+ Object.defineProperty(exports, "useSliderStyles_unstable", {
36
+ enumerable: true,
37
+ get: function () {
38
+ return useSliderStyles_1.useSliderStyles_unstable;
33
39
  }
34
40
  });
35
41
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,cAAA;AAAc;AAAd,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA","sourceRoot":""}
1
+ {"version":3,"sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","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"],"sourceRoot":"../src/"}
@@ -2,4 +2,4 @@ import type { SliderState } from './Slider.types';
2
2
  /**
3
3
  * Render the final JSX of Slider
4
4
  */
5
- export declare const renderSlider: (state: SliderState) => JSX.Element;
5
+ export declare const renderSlider_unstable: (state: SliderState) => JSX.Element;
@@ -3,27 +3,27 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderSlider = void 0;
6
+ exports.renderSlider_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var React = /*#__PURE__*/require("react");
11
-
12
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
-
14
- var useSlider_1 = /*#__PURE__*/require("./useSlider");
10
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
15
11
  /**
16
12
  * Render the final JSX of Slider
17
13
  */
18
14
 
19
15
 
20
- var renderSlider = function (state) {
21
- var _a = react_utilities_1.getSlots(state, useSlider_1.sliderShorthandProps),
22
- slots = _a.slots,
23
- slotProps = _a.slotProps;
24
-
25
- 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.thumbWrapper, tslib_1.__assign({}, slotProps.thumbWrapper), React.createElement(slots.thumb, tslib_1.__assign({}, slotProps.thumb))), React.createElement(slots.activeRail, tslib_1.__assign({}, slotProps.activeRail)), React.createElement(slots.input, tslib_1.__assign({}, slotProps.input))));
16
+ const renderSlider_unstable = state => {
17
+ const {
18
+ slots,
19
+ slotProps
20
+ } = react_utilities_1.getSlots(state);
21
+ return React.createElement(slots.root, { ...slotProps.root
22
+ }, React.createElement(slots.input, { ...slotProps.input
23
+ }), React.createElement(slots.rail, { ...slotProps.rail
24
+ }), React.createElement(slots.thumb, { ...slotProps.thumb
25
+ }));
26
26
  };
27
27
 
28
- exports.renderSlider = renderSlider;
28
+ exports.renderSlider_unstable = renderSlider_unstable;
29
29
  //# sourceMappingURL=renderSlider.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Slider/renderSlider.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,EAA6B,WAAA,CAAA,oBAA7B,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,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,CALF,EAQE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CARF,EASE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CATF,CAFF,CADF;AAgBD,CAnBM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourceRoot":""}
1
+ {"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AAEA,SACE,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;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","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/"}
@@ -1,10 +1,6 @@
1
1
  import * as React from 'react';
2
- import { SliderProps, SliderSlots, SliderState } from './Slider.types';
3
- /**
4
- * Array of all shorthand properties listed in sliderShorthandProps
5
- */
6
- export declare const sliderShorthandProps: (keyof SliderSlots)[];
2
+ import { SliderProps, SliderState } from './Slider.types';
7
3
  /**
8
4
  * Given user props, returns state and render function for a Slider.
9
5
  */
10
- export declare const useSlider: (props: SliderProps, ref: React.Ref<HTMLElement>) => SliderState;
6
+ export declare const useSlider_unstable: (props: SliderProps, ref: React.Ref<HTMLInputElement>) => SliderState;
@@ -3,115 +3,82 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useSlider = exports.sliderShorthandProps = void 0;
6
+ exports.useSlider_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
 
10
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
- var useSliderState_1 = /*#__PURE__*/require("./useSliderState");
13
- /**
14
- * Array of all shorthand properties listed in sliderShorthandProps
15
- */
16
-
17
-
18
- exports.sliderShorthandProps = ['root', 'activeRail', 'input', 'rail', 'sliderWrapper', 'thumb', 'thumbWrapper', 'track', 'trackWrapper', 'marksWrapper'];
10
+ const useSliderState_1 = /*#__PURE__*/require("./useSliderState");
19
11
  /**
20
12
  * Given user props, returns state and render function for a Slider.
21
13
  */
22
14
 
23
- var useSlider = function (props, ref) {
24
- var // Props
25
- value = props.value,
26
- defaultValue = props.defaultValue,
27
- min = props.min,
28
- max = props.max,
29
- _a = props.step,
30
- step = _a === void 0 ? 1 : _a,
31
- keyboardStep = props.keyboardStep,
32
- disabled = props.disabled,
33
- ariaValueText = props.ariaValueText,
34
- onChange = props.onChange,
35
- marks = props.marks,
36
- vertical = props.vertical,
37
- _b = props.size,
38
- size = _b === void 0 ? 'medium' : _b,
39
- origin = props.origin,
40
- // Slots
41
- activeRail = props.activeRail,
42
- input = props.input,
43
- marksWrapper = props.marksWrapper,
44
- rail = props.rail,
45
- sliderWrapper = props.sliderWrapper,
46
- thumb = props.thumb,
47
- thumbWrapper = props.thumbWrapper,
48
- track = props.track,
49
- trackWrapper = props.trackWrapper;
50
- var state = {
51
- ariaValueText: ariaValueText,
52
- defaultValue: defaultValue,
53
- disabled: disabled,
54
- keyboardStep: keyboardStep,
55
- marks: marks,
56
- max: max,
57
- min: min,
58
- onChange: onChange,
59
- origin: origin,
60
- size: size,
61
- step: step,
62
- vertical: vertical,
63
- value: value,
15
+
16
+ const useSlider_unstable = (props, ref) => {
17
+ const nativeProps = react_utilities_1.getPartitionedNativeProps({
18
+ props,
19
+ primarySlotTagName: 'input',
20
+ excludedPropNames: ['onChange', 'size']
21
+ });
22
+ const {
23
+ // Props
24
+ value,
25
+ defaultValue,
26
+ min = 0,
27
+ max = 100,
28
+ step,
29
+ disabled,
30
+ vertical,
31
+ size = 'medium',
32
+ origin,
33
+ onChange,
34
+ // Slots
35
+ root,
36
+ input,
37
+ rail,
38
+ thumb
39
+ } = props;
40
+ const state = {
41
+ defaultValue,
42
+ disabled,
43
+ max,
44
+ min,
45
+ origin,
46
+ size,
47
+ step,
48
+ vertical,
49
+ value,
50
+ onChange,
64
51
  components: {
65
- activeRail: 'div',
66
52
  input: 'input',
67
- marksWrapper: 'div',
68
53
  rail: 'div',
69
54
  root: 'div',
70
- sliderWrapper: 'div',
71
- thumb: 'div',
72
- thumbWrapper: 'div',
73
- track: 'div',
74
- trackWrapper: 'div'
55
+ thumb: 'div'
75
56
  },
76
- root: react_utilities_1.getNativeElementProps('span', tslib_1.__assign(tslib_1.__assign({
77
- ref: ref
78
- }, props), {
79
- id: react_utilities_1.useId('slider-', props.id)
80
- })),
81
- activeRail: react_utilities_1.resolveShorthand(activeRail, {
82
- required: true
57
+ root: react_utilities_1.resolveShorthand(root, {
58
+ required: true,
59
+ defaultProps: { ...nativeProps.root
60
+ }
83
61
  }),
84
62
  input: react_utilities_1.resolveShorthand(input, {
85
63
  required: true,
86
64
  defaultProps: {
87
- type: 'range'
65
+ id: react_utilities_1.useId('slider-', props.id),
66
+ ref,
67
+ ...nativeProps.primary,
68
+ type: 'range',
69
+ orient: vertical ? 'vertical' : undefined
88
70
  }
89
71
  }),
90
- marksWrapper: react_utilities_1.resolveShorthand(marksWrapper, {
91
- required: true
92
- }),
93
72
  rail: react_utilities_1.resolveShorthand(rail, {
94
73
  required: true
95
74
  }),
96
- sliderWrapper: react_utilities_1.resolveShorthand(sliderWrapper, {
97
- required: true
98
- }),
99
75
  thumb: react_utilities_1.resolveShorthand(thumb, {
100
76
  required: true
101
- }),
102
- thumbWrapper: react_utilities_1.resolveShorthand(thumbWrapper, {
103
- required: true
104
- }),
105
- track: react_utilities_1.resolveShorthand(track, {
106
- required: true
107
- }),
108
- trackWrapper: react_utilities_1.resolveShorthand(trackWrapper, {
109
- required: true
110
77
  })
111
78
  };
112
- useSliderState_1.useSliderState(state);
79
+ useSliderState_1.useSliderState_unstable(state);
113
80
  return state;
114
81
  };
115
82
 
116
- exports.useSlider = useSlider;
83
+ exports.useSlider_unstable = useSlider_unstable;
117
84
  //# sourceMappingURL=useSlider.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Slider/useSlider.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAA1B,CAApB;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,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAvB,CAjBmB;AAuBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB,CADQ;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAxB,CAvBkB;AAiCzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAvB,CAjCmB;AAkCzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB;AAlCkB,GAA3B;AAqCA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,KAAP;AACD,CAlEM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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/"}
@@ -1,3 +1,2 @@
1
1
  import type { SliderState } from './Slider.types';
2
- export declare const animationTime = "0.1s";
3
- export declare const useSliderState: (state: SliderState) => SliderState;
2
+ export declare const useSliderState_unstable: (state: SliderState) => SliderState;