Diffusion Open Access Compliance Check Tool (OACCT) (paginated-inlines) Browse

rOACCT/node_modules/@mui/base/modern/SliderUnstyled/SliderUnstyled.js
f646e1f695a7paginated-inlines

SliderUnstyled.js
View Options

			import _extends from "@babel/runtime/helpers/esm/extends";
			import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
			const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "slotProps", "slots"];
			import * as React from 'react';
			import PropTypes from 'prop-types';
			import clsx from 'clsx';
			import { chainPropTypes } from '@mui/utils';
			import isHostComponent from '../utils/isHostComponent';
			import composeClasses from '../composeClasses';
			import { getSliderUtilityClass } from './sliderUnstyledClasses';
			import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
			import useSlider, { valueToPercent } from './useSlider';
			import useSlotProps from '../utils/useSlotProps';
			import { jsx as _jsx } from "react/jsx-runtime";
			import { jsxs as _jsxs } from "react/jsx-runtime";
			const Identity = x => x;
			const useUtilityClasses = ownerState => {
			const {
			disabled,
			dragging,
			marked,
			orientation,
			track,
			classes
			} = ownerState;
			const slots = {
			root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
			rail: ['rail'],
			track: ['track'],
			mark: ['mark'],
			markActive: ['markActive'],
			markLabel: ['markLabel'],
			markLabelActive: ['markLabelActive'],
			valueLabel: ['valueLabel'],
			thumb: ['thumb', disabled && 'disabled'],
			active: ['active'],
			disabled: ['disabled'],
			focusVisible: ['focusVisible']
			};
			return composeClasses(slots, getSliderUtilityClass, classes);
			};
			const Forward = ({
			children
			}) => children;
			const SliderUnstyled = /#__PURE__/React.forwardRef(function SliderUnstyled(props, ref) {
			const {
			'aria-label': ariaLabel,
			'aria-valuetext': ariaValuetext,
			'aria-labelledby': ariaLabelledby,
			className,
			component,
			classes: classesProp,
			disableSwap = false,
			disabled = false,
			getAriaLabel,
			getAriaValueText,
			marks: marksProp = false,
			max = 100,
			min = 0,
			orientation = 'horizontal',
			scale = Identity,
			step = 1,
			track = 'normal',
			valueLabelDisplay = 'off',
			valueLabelFormat = Identity,
			isRtl = false,
			slotProps = {},
			slots = {}
			} = props,
			other = _objectWithoutPropertiesLoose(props, _excluded);

			// all props with defaults
			// consider extracting to hook an reusing the lint rule for the variants
			const ownerState = _extends({}, props, {
			marks: marksProp,
			classes: classesProp,
			disabled,
			isRtl,
			max,
			min,
			orientation,
			scale,
			step,
			track,
			valueLabelDisplay,
			valueLabelFormat
			});
			const {
			axisProps,
			getRootProps,
			getHiddenInputProps,
			getThumbProps,
			open,
			active,
			axis,
			range,
			focusedThumbIndex,
			dragging,
			marks,
			values,
			trackOffset,
			trackLeap
			} = useSlider(_extends({}, ownerState, {
			ref
			}));
			ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
			ownerState.dragging = dragging;
			ownerState.focusedThumbIndex = focusedThumbIndex;
			const classes = useUtilityClasses(ownerState);
			const Root = component ?? slots.root ?? 'span';
			const rootProps = useSlotProps({
			elementType: Root,
			getSlotProps: getRootProps,
			externalSlotProps: slotProps.root,
			externalForwardedProps: other,
			ownerState,
			className: [classes.root, className]
			});
			const Rail = slots.rail ?? 'span';
			const railProps = useSlotProps({
			elementType: Rail,
			externalSlotProps: slotProps.rail,
			ownerState,
			className: classes.rail
			});
			const Track = slots.track ?? 'span';
			const trackProps = useSlotProps({
			elementType: Track,
			externalSlotProps: slotProps.track,
			additionalProps: {
			style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
			},
			ownerState,
			className: classes.track
			});
			const Thumb = slots.thumb ?? 'span';
			const thumbProps = useSlotProps({
			elementType: Thumb,
			getSlotProps: getThumbProps,
			externalSlotProps: slotProps.thumb,
			ownerState
			});
			const ValueLabel = slots.valueLabel ?? SliderValueLabelUnstyled;
			const valueLabelProps = useSlotProps({
			elementType: ValueLabel,
			externalSlotProps: slotProps.valueLabel,
			ownerState
			});
			const Mark = slots.mark ?? 'span';
			const markProps = useSlotProps({
			elementType: Mark,
			externalSlotProps: slotProps.mark,
			ownerState,
			className: classes.mark
			});
			const MarkLabel = slots.markLabel ?? 'span';
			const markLabelProps = useSlotProps({
			elementType: MarkLabel,
			externalSlotProps: slotProps.markLabel,
			ownerState
			});
			const Input = slots.input \|\| 'input';
			const inputProps = useSlotProps({
			elementType: Input,
			getSlotProps: getHiddenInputProps,
			externalSlotProps: slotProps.input,
			ownerState
			});
			return /#__PURE__/_jsxs(Root, _extends({}, rootProps, {
			children: [/#__PURE__/_jsx(Rail, _extends({}, railProps)), /#__PURE__/_jsx(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
			const percent = valueToPercent(mark.value, min, max);
			const style = axisProps[axis].offset(percent);
			let markActive;
			if (track === false) {
			markActive = values.indexOf(mark.value) !== -1;
			} else {
			markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) \|\| track === 'inverted' && (range ? mark.value <= values[0] \|\| mark.value >= values[values.length - 1] : mark.value >= values[0]);
			}
			return /#__PURE__/_jsxs(React.Fragment, {
			children: [/#__PURE__/_jsx(Mark, _extends({
			"data-index": index
			}, markProps, !isHostComponent(Mark) && {
			markActive
			}, {
			style: _extends({}, style, markProps.style),
			className: clsx(markProps.className, markActive && classes.markActive)
			})), mark.label != null ? /#__PURE__/_jsx(MarkLabel, _extends({
			"aria-hidden": true,
			"data-index": index
			}, markLabelProps, !isHostComponent(MarkLabel) && {
			markLabelActive: markActive
			}, {
			style: _extends({}, style, markLabelProps.style),
			className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
			children: mark.label
			})) : null]
			}, index);
			}), values.map((value, index) => {
			const percent = valueToPercent(value, min, max);
			const style = axisProps[axis].offset(percent);
			const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabel;
			return /#__PURE__/_jsx(React.Fragment, {
			children: /#__PURE__/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
			valueLabelFormat,
			valueLabelDisplay,
			value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
			index,
			open: open === index \|\| active === index \|\| valueLabelDisplay === 'on',
			disabled
			}, valueLabelProps, {
			className: clsx(classes.valueLabel, valueLabelProps.className),
			children: /#__PURE__/_jsx(Thumb, _extends({
			"data-index": index,
			"data-focusvisible": focusedThumbIndex === index
			}, thumbProps, {
			className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
			style: _extends({}, style, {
			pointerEvents: disableSwap && active !== index ? 'none' : undefined
			}, thumbProps.style),
			children: /#__PURE__/_jsx(Input, _extends({
			"data-index": index,
			"aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
			"aria-valuenow": scale(value),
			"aria-labelledby": ariaLabelledby,
			"aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
			value: values[index]
			}, inputProps))
			}))
			}))
			}, index);
			})]
			}));
			});
			process.env.NODE_ENV !== "production" ? SliderUnstyled.propTypes /* remove-proptypes */ = {
			// ----------------------------- Warning --------------------------------
			// \| These PropTypes are generated from the TypeScript type definitions \|
			// \| To update them edit the d.ts file and run "yarn proptypes" \|
			// ----------------------------------------------------------------------
			/**
			* The label of the slider.
			*/
			'aria-label': chainPropTypes(PropTypes.string, props => {
			const range = Array.isArray(props.value \|\| props.defaultValue);
			if (range && props['aria-label'] != null) {
			return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
			}
			return null;
			}),
			/**
			* The id of the element containing a label for the slider.
			*/
			'aria-labelledby': PropTypes.string,
			/**
			* A string value that provides a user-friendly name for the current value of the slider.
			*/
			'aria-valuetext': chainPropTypes(PropTypes.string, props => {
			const range = Array.isArray(props.value \|\| props.defaultValue);
			if (range && props['aria-valuetext'] != null) {
			return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
			}
			return null;
			}),
			/**
			* @ignore
			*/
			children: PropTypes.node,
			/**
			* Override or extend the styles applied to the component.
			*/
			classes: PropTypes.object,
			/**
			* @ignore
			*/
			className: PropTypes.string,
			/**
			* The component used for the root node.
			* Either a string to use a HTML element or a component.
			*/
			component: PropTypes.elementType,
			/**
			* The default value. Use when the component is not controlled.
			*/
			defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
			/**
			* If `true`, the component is disabled.
			* @default false
			*/
			disabled: PropTypes.bool,
			/**
			* If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
			* @default false
			*/
			disableSwap: PropTypes.bool,
			/**
			* Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
			* This is important for screen reader users.
			* @param {number} index The thumb label's index to format.
			* @returns {string}
			*/
			getAriaLabel: PropTypes.func,
			/**
			* Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
			* This is important for screen reader users.
			* @param {number} value The thumb label's value to format.
			* @param {number} index The thumb label's index to format.
			* @returns {string}
			*/
			getAriaValueText: PropTypes.func,
			/**
			* If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
			* @default false
			*/
			isRtl: PropTypes.bool,
			/**
			* Marks indicate predetermined values to which the user can move the slider.
			* If `true` the marks are spaced according the value of the `step` prop.
			* If an array, it should contain objects with `value` and an optional `label` keys.
			* @default false
			*/
			marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
			label: PropTypes.node,
			value: PropTypes.number.isRequired
			})), PropTypes.bool]),
			/**
			* The maximum allowed value of the slider.
			* Should not be equal to min.
			* @default 100
			*/
			max: PropTypes.number,
			/**
			* The minimum allowed value of the slider.
			* Should not be equal to max.
			* @default 0
			*/
			min: PropTypes.number,
			/**
			* Name attribute of the hidden `input` element.
			*/
			name: PropTypes.string,
			/**
			* Callback function that is fired when the slider's value changed.
			*
			* @param {Event} event The event source of the callback.
			* You can pull out the new value by accessing `event.target.value` (any).
			* Warning: This is a generic event not a change event.
			* @param {number \| number[]} value The new value.
			* @param {number} activeThumb Index of the currently moved thumb.
			*/
			onChange: PropTypes.func,
			/**
			* Callback function that is fired when the `mouseup` is triggered.
			*
			* @param {React.SyntheticEvent \| Event} event The event source of the callback. Warning: This is a generic event not a change event.
			* @param {number \| number[]} value The new value.
			*/
			onChangeCommitted: PropTypes.func,
			/**
			* The component orientation.
			* @default 'horizontal'
			*/
			orientation: PropTypes.oneOf(['horizontal', 'vertical']),
			/**
			* A transformation function, to change the scale of the slider.
			* @default (x) => x
			*/
			scale: PropTypes.func,
			/**
			* The props used for each slot inside the Slider.
			* @default {}
			*/
			slotProps: PropTypes.shape({
			input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
			children: PropTypes.element,
			className: PropTypes.string,
			open: PropTypes.bool,
			style: PropTypes.object,
			value: PropTypes.number,
			valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
			})])
			}),
			/**
			* The components used for each slot inside the Slider.
			* Either a string to use a HTML element or a component.
			* @default {}
			*/
			slots: PropTypes.shape({
			input: PropTypes.elementType,
			mark: PropTypes.elementType,
			markLabel: PropTypes.elementType,
			rail: PropTypes.elementType,
			root: PropTypes.elementType,
			thumb: PropTypes.elementType,
			track: PropTypes.elementType,
			valueLabel: PropTypes.elementType
			}),
			/**
			* The granularity with which the slider can step through values. (A "discrete" slider.)
			* The `min` prop serves as the origin for the valid values.
			* We recommend (max - min) to be evenly divisible by the step.
			*
			* When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
			* @default 1
			*/
			step: PropTypes.number,
			/**
			* Tab index attribute of the hidden `input` element.
			*/
			tabIndex: PropTypes.number,
			/**
			* The track presentation:
			*
			* - `normal` the track will render a bar representing the slider value.
			* - `inverted` the track will render a bar representing the remaining slider value.
			* - `false` the track will render without a bar.
			* @default 'normal'
			*/
			track: PropTypes.oneOf(['inverted', 'normal', false]),
			/**
			* The value of the slider.
			* For ranged sliders, provide an array with two values.
			*/
			value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
			/**
			* Controls when the value label is displayed:
			*
			* - `auto` the value label will display when the thumb is hovered or focused.
			* - `on` will display persistently.
			* - `off` will never display.
			* @default 'off'
			*/
			valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
			/**
			* The format function the value label's value.
			*
			* When a function is provided, it should have the following signature:
			*
			* - {number} value The value label's value to format
			* - {number} index The value label's index to format
			* @default (x) => x
			*/
			valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
			} : void 0;
			export default SliderUnstyled;