@wordpress/components 19.13.0 → 19.16.0

package/build/radio-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/radio-control/index.tsx"],"names":["RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","map","option","index","undefined"],"mappings":";;;;;;;;;;;;;;AAGA;;AACA;;AAMA;;AAKA;;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,EACN;AACA;AACAC,KAHM,EAOL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,mBANK;AAOLC,IAAAA,OAAO,GAAG,EAPL;AAQL,OAAGC;AARE,MASFR,KATJ;AAUA,QAAMS,UAAU,GAAG,4BAAeV,YAAf,CAAnB;AACA,QAAMW,EAAE,GAAI,2BAA2BD,UAAY,EAAnD;;AACA,QAAME,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaC,KAAf,CADT;;AAGA,MAAK,qBAASP,OAAT,CAAL,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGN,KADT;AAEC,IAAA,EAAE,EAAGS,EAFN;AAGC,IAAA,mBAAmB,EAAGJ,mBAHvB;AAIC,IAAA,IAAI,EAAGF,IAJR;AAKC,IAAA,SAAS,EAAG,yBAAYF,SAAZ,EAAuB,0BAAvB;AALb,KAOGK,OAAO,CAACQ,GAAR,CAAa,CAAEC,MAAF,EAAUC,KAAV,KACd;AACC,IAAA,GAAG,EAAI,GAAGP,EAAI,IAAIO,KAAO,EAD1B;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC;AACC,IAAA,EAAE,EAAI,GAAGP,EAAI,IAAIO,KAAO,EADzB;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,IAAI,EAAC,OAHN;AAIC,IAAA,IAAI,EAAGP,EAJR;AAKC,IAAA,KAAK,EAAGM,MAAM,CAACF,KALhB;AAMC,IAAA,QAAQ,EAAGH,aANZ;AAOC,IAAA,OAAO,EAAGK,MAAM,CAACF,KAAP,KAAiBX,QAP5B;AAQC,wBACC,CAAC,CAAEC,IAAH,GAAW,GAAGM,EAAI,QAAlB,GAA4BQ;AAT9B,KAWMV,eAXN,EAJD,EAiBC;AAAO,IAAA,OAAO,EAAI,GAAGE,EAAI,IAAIO,KAAO;AAApC,KACGD,MAAM,CAACf,KADV,CAjBD,CADC,CAPH,CADD;AAiCA;;eAEcF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { RadioControlProps } from './types';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(\n\t// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add\n\t// ref forwarding to RadioControl.\n\tprops: Omit<\n\t\tWordPressComponentProps< RadioControlProps, 'input', false >,\n\t\t'ref'\n\t>\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( isEmpty( options ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t<label htmlFor={ `${ id }-${ index }` }>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/radio-control/index.tsx"],"names":["RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","length","map","option","index","undefined"],"mappings":";;;;;;;;;;;;;;AAGA;;AAMA;;AAKA;;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,EACN;AACA;AACAC,KAHM,EAOL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,mBANK;AAOLC,IAAAA,OAAO,GAAG,EAPL;AAQL,OAAGC;AARE,MASFR,KATJ;AAUA,QAAMS,UAAU,GAAG,4BAAeV,YAAf,CAAnB;AACA,QAAMW,EAAE,GAAI,2BAA2BD,UAAY,EAAnD;;AACA,QAAME,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaC,KAAf,CADT;;AAGA,MAAK,EAAEP,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAEQ,MAAX,CAAL,EAAyB;AACxB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGd,KADT;AAEC,IAAA,EAAE,EAAGS,EAFN;AAGC,IAAA,mBAAmB,EAAGJ,mBAHvB;AAIC,IAAA,IAAI,EAAGF,IAJR;AAKC,IAAA,SAAS,EAAG,yBAAYF,SAAZ,EAAuB,0BAAvB;AALb,KAOGK,OAAO,CAACS,GAAR,CAAa,CAAEC,MAAF,EAAUC,KAAV,KACd;AACC,IAAA,GAAG,EAAI,GAAGR,EAAI,IAAIQ,KAAO,EAD1B;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC;AACC,IAAA,EAAE,EAAI,GAAGR,EAAI,IAAIQ,KAAO,EADzB;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,IAAI,EAAC,OAHN;AAIC,IAAA,IAAI,EAAGR,EAJR;AAKC,IAAA,KAAK,EAAGO,MAAM,CAACH,KALhB;AAMC,IAAA,QAAQ,EAAGH,aANZ;AAOC,IAAA,OAAO,EAAGM,MAAM,CAACH,KAAP,KAAiBX,QAP5B;AAQC,wBACC,CAAC,CAAEC,IAAH,GAAW,GAAGM,EAAI,QAAlB,GAA4BS;AAT9B,KAWMX,eAXN,EAJD,EAiBC;AAAO,IAAA,OAAO,EAAI,GAAGE,EAAI,IAAIQ,KAAO;AAApC,KACGD,MAAM,CAAChB,KADV,CAjBD,CADC,CAPH,CADD;AAiCA;;eAEcF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { RadioControlProps } from './types';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(\n\t// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add\n\t// ref forwarding to RadioControl.\n\tprops: Omit<\n\t\tWordPressComponentProps< RadioControlProps, 'input', false >,\n\t\t'ref'\n\t>\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t<label htmlFor={ `${ id }-${ index }` }>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"]}

package/build/range-control/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.RangeControl = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
@@ -29,6 +27,8 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
+var _math = require("../utils/math");
+
 var _inputRange = _interopRequireDefault(require("./input-range"));
 
 var _rail = _interopRequireDefault(require("./rail"));
@@ -37,8 +37,6 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 
 var _rangeControlStyles = require("./styles/range-control-styles");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -52,82 +50,74 @@ var _rangeControlStyles = require("./styles/range-control-styles");
  */
 const noop = () => {};
 
-function RangeControl(_ref, ref) {
+function UnforwardedRangeControl(props, forwardedRef) {
   var _inputRef$current;
 
-  let {
+  const {
     afterIcon,
     allowReset = false,
     beforeIcon,
     className,
-    currentInput,
     color: colorProp = _utils.COLORS.ui.theme,
+    currentInput,
     disabled = false,
     help,
+    hideLabelFromVision = false,
     initialPosition,
     isShiftStepEnabled = true,
     label,
-    hideLabelFromVision = false,
     marks = false,
     max = 100,
     min = 0,
     onBlur = noop,
     onChange = noop,
     onFocus = noop,
-    onMouseMove = noop,
     onMouseLeave = noop,
+    onMouseMove = noop,
     railColor,
-    resetFallbackValue,
     renderTooltipContent = v => v,
-    showTooltip: showTooltipProp,
+    resetFallbackValue,
     shiftStep = 10,
+    showTooltip: showTooltipProp,
     step = 1,
     trackColor,
     value: valueProp,
     withInputField = true,
-    ...props
-  } = _ref;
+    ...otherProps
+  } = props;
   const [value, setValue] = (0, _utils2.useControlledRangeValue)({
     min,
     max,
-    value: valueProp,
+    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,
     initial: initialPosition
   });
   const isResetPendent = (0, _element.useRef)(false);
+  let hasTooltip = showTooltipProp;
+  let hasInputField = withInputField;
 
   if (step === 'any') {
     // The tooltip and number input field are hidden when the step is "any"
     // because the decimals get too lengthy to fit well.
-    showTooltipProp = false;
-    withInputField = false;
+    hasTooltip = false;
+    hasInputField = false;
   }
 
-  const [showTooltip, setShowTooltip] = (0, _element.useState)(showTooltipProp);
+  const [showTooltip, setShowTooltip] = (0, _element.useState)(hasTooltip);
   const [isFocused, setIsFocused] = (0, _element.useState)(false);
   const inputRef = (0, _element.useRef)();
-
-  const setRef = nodeRef => {
-    inputRef.current = nodeRef;
-
-    if (ref) {
-      ref(nodeRef);
-    }
-  };
-
   const isCurrentlyFocused = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.matches(':focus');
   const isThumbFocused = !disabled && isFocused;
   const isValueReset = value === null;
   const currentValue = value !== undefined ? value : currentInput;
   const inputSliderValue = isValueReset ? '' : currentValue;
   const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;
-  const calculatedFillValue = (value - min) / (max - min) * 100;
-  const fillValue = isValueReset ? 50 : calculatedFillValue;
-  const fillValueOffset = `${(0, _lodash.clamp)(fillValue, 0, 100)}%`;
+  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;
+  const fillValueOffset = `${(0, _math.clamp)(fillValue, 0, 100)}%`;
   const classes = (0, _classnames.default)('components-range-control', className);
   const wrapperClasses = (0, _classnames.default)('components-range-control__wrapper', !!marks && 'is-marked');
-  const id = (0, _compose.useInstanceId)(RangeControl, 'inspector-range-control');
+  const id = (0, _compose.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control');
   const describedBy = !!help ? `${id}__help` : undefined;
-  const enableTooltip = showTooltipProp !== false && Number.isFinite(value);
+  const enableTooltip = hasTooltip !== false && Number.isFinite(value);
 
   const handleOnRangeChange = event => {
     const nextValue = parseFloat(event.target.value);
@@ -135,8 +125,8 @@ function RangeControl(_ref, ref) {
     onChange(nextValue);
   };
 
-  const handleOnChange = nextValue => {
-    nextValue = parseFloat(nextValue);
+  const handleOnChange = next => {
+    let nextValue = parseFloat(next);
     setValue(nextValue);
     /*
      * Calls onChange only when nextValue is numeric
@@ -163,7 +153,7 @@ function RangeControl(_ref, ref) {
   };
 
   const handleOnReset = () => {
-    let resetValue = parseFloat(resetFallbackValue);
+    let resetValue = parseFloat(`${resetFallbackValue}`);
     let onChangeResetValue = resetValue;
 
     if (isNaN(resetValue)) {
@@ -212,7 +202,7 @@ function RangeControl(_ref, ref) {
     className: classes,
     label: label,
     hideLabelFromVision: hideLabelFromVision,
-    id: id,
+    id: `${id}`,
     help: help
   }, (0, _element.createElement)(_rangeControlStyles.Root, {
     className: "components-range-control__root"
@@ -222,11 +212,11 @@ function RangeControl(_ref, ref) {
     className: wrapperClasses,
     color: colorProp,
     marks: !!marks
-  }, (0, _element.createElement)(_inputRange.default, (0, _extends2.default)({}, props, {
+  }, (0, _element.createElement)(_inputRange.default, (0, _extends2.default)({}, otherProps, {
     className: "components-range-control__slider",
     describedBy: describedBy,
     disabled: disabled,
-    id: id,
+    id: `${id}`,
     label: label,
     max: max,
     min: min,
@@ -235,9 +225,9 @@ function RangeControl(_ref, ref) {
     onFocus: handleOnFocus,
     onMouseMove: onMouseMove,
     onMouseLeave: onMouseLeave,
-    ref: setRef,
+    ref: (0, _compose.useMergeRefs)([inputRef, forwardedRef]),
     step: step,
-    value: inputSliderValue
+    value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined
   })), (0, _element.createElement)(_rail.default, {
     "aria-hidden": true,
     disabled: disabled,
@@ -272,7 +262,7 @@ function RangeControl(_ref, ref) {
     value: value
   })), afterIcon && (0, _element.createElement)(_rangeControlStyles.AfterIconWrapper, null, (0, _element.createElement)(_icon.default, {
     icon: afterIcon
-  })), withInputField && (0, _element.createElement)(_rangeControlStyles.InputNumber, {
+  })), hasInputField && (0, _element.createElement)(_rangeControlStyles.InputNumber, {
     "aria-label": label,
     className: "components-range-control__number",
     disabled: disabled,
@@ -293,8 +283,32 @@ function RangeControl(_ref, ref) {
     onClick: handleOnReset
   }, (0, _i18n.__)('Reset')))));
 }
+/**
+ * RangeControls are used to make selections from a range of incremental values.
+ *
+ * ```jsx
+ * import { RangeControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyRangeControl = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *   return (
+ *     <RangeControl
+ *       help="Please select how transparent you would like this."
+ *       initialPosition={50}
+ *       label="Opacity"
+ *       max={100}
+ *       min={0}
+ *       onChange={() => {}}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
 
-const ForwardedComponent = (0, _element.forwardRef)(RangeControl);
-var _default = ForwardedComponent;
+const RangeControl = (0, _element.forwardRef)(UnforwardedRangeControl);
+exports.RangeControl = RangeControl;
+var _default = RangeControl;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/range-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/index.js"],"names":["noop","RangeControl","ref","afterIcon","allowReset","beforeIcon","className","currentInput","color","colorProp","COLORS","ui","theme","disabled","help","initialPosition","isShiftStepEnabled","label","hideLabelFromVision","marks","max","min","onBlur","onChange","onFocus","onMouseMove","onMouseLeave","railColor","resetFallbackValue","renderTooltipContent","v","showTooltip","showTooltipProp","shiftStep","step","trackColor","value","valueProp","withInputField","props","setValue","initial","isResetPendent","setShowTooltip","isFocused","setIsFocused","inputRef","setRef","nodeRef","current","isCurrentlyFocused","matches","isThumbFocused","isValueReset","currentValue","undefined","inputSliderValue","rangeFillValue","calculatedFillValue","fillValue","fillValueOffset","classes","wrapperClasses","id","describedBy","enableTooltip","Number","isFinite","handleOnRangeChange","event","nextValue","parseFloat","target","handleOnChange","isNaN","handleOnInputNumberBlur","handleOnReset","resetValue","onChangeResetValue","handleShowTooltip","handleHideTooltip","handleOnBlur","handleOnFocus","offsetStyle","width","ForwardedComponent"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { clamp } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport {\n\tActionRightWrapper,\n\tAfterIconWrapper,\n\tBeforeIconWrapper,\n\tInputNumber,\n\tRoot,\n\tTrack,\n\tThumbWrapper,\n\tThumb,\n\tWrapper,\n} from './styles/range-control-styles';\n\nconst noop = () => {};\n\nfunction RangeControl(\n\t{\n\t\tafterIcon,\n\t\tallowReset = false,\n\t\tbeforeIcon,\n\t\tclassName,\n\t\tcurrentInput,\n\t\tcolor: colorProp = COLORS.ui.theme,\n\t\tdisabled = false,\n\t\thelp,\n\t\tinitialPosition,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\tmarks = false,\n\t\tmax = 100,\n\t\tmin = 0,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonFocus = noop,\n\t\tonMouseMove = noop,\n\t\tonMouseLeave = noop,\n\t\trailColor,\n\t\tresetFallbackValue,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tshowTooltip: showTooltipProp,\n\t\tshiftStep = 10,\n\t\tstep = 1,\n\t\ttrackColor,\n\t\tvalue: valueProp,\n\t\twithInputField = true,\n\t\t...props\n\t},\n\tref\n) {\n\tconst [ value, setValue ] = useControlledRangeValue( {\n\t\tmin,\n\t\tmax,\n\t\tvalue: valueProp,\n\t\tinitial: initialPosition,\n\t} );\n\tconst isResetPendent = useRef( false );\n\n\tif ( step === 'any' ) {\n\t\t// The tooltip and number input field are hidden when the step is \"any\"\n\t\t// because the decimals get too lengthy to fit well.\n\t\tshowTooltipProp = false;\n\t\twithInputField = false;\n\t}\n\n\tconst [ showTooltip, setShowTooltip ] = useState( showTooltipProp );\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst inputRef = useRef();\n\n\tconst setRef = ( nodeRef ) => {\n\t\tinputRef.current = nodeRef;\n\n\t\tif ( ref ) {\n\t\t\tref( nodeRef );\n\t\t}\n\t};\n\n\tconst isCurrentlyFocused = inputRef.current?.matches( ':focus' );\n\tconst isThumbFocused = ! disabled && isFocused;\n\n\tconst isValueReset = value === null;\n\tconst currentValue = value !== undefined ? value : currentInput;\n\n\tconst inputSliderValue = isValueReset ? '' : currentValue;\n\n\tconst rangeFillValue = isValueReset ? ( max - min ) / 2 + min : value;\n\n\tconst calculatedFillValue = ( ( value - min ) / ( max - min ) ) * 100;\n\tconst fillValue = isValueReset ? 50 : calculatedFillValue;\n\tconst fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;\n\n\tconst classes = classnames( 'components-range-control', className );\n\n\tconst wrapperClasses = classnames(\n\t\t'components-range-control__wrapper',\n\t\t!! marks && 'is-marked'\n\t);\n\n\tconst id = useInstanceId( RangeControl, 'inspector-range-control' );\n\tconst describedBy = !! help ? `${ id }__help` : undefined;\n\tconst enableTooltip = showTooltipProp !== false && Number.isFinite( value );\n\n\tconst handleOnRangeChange = ( event ) => {\n\t\tconst nextValue = parseFloat( event.target.value );\n\t\tsetValue( nextValue );\n\t\tonChange( nextValue );\n\t};\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tnextValue = parseFloat( nextValue );\n\t\tsetValue( nextValue );\n\t\t/*\n\t\t * Calls onChange only when nextValue is numeric\n\t\t * otherwise may queue a reset for the blur event.\n\t\t */\n\t\tif ( ! isNaN( nextValue ) ) {\n\t\t\tif ( nextValue < min || nextValue > max ) {\n\t\t\t\tnextValue = floatClamp( nextValue, min, max );\n\t\t\t}\n\t\t\tonChange( nextValue );\n\t\t\tisResetPendent.current = false;\n\t\t} else if ( allowReset ) {\n\t\t\tisResetPendent.current = true;\n\t\t}\n\t};\n\n\tconst handleOnInputNumberBlur = () => {\n\t\tif ( isResetPendent.current ) {\n\t\t\thandleOnReset();\n\t\t\tisResetPendent.current = false;\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tlet resetValue = parseFloat( resetFallbackValue );\n\t\tlet onChangeResetValue = resetValue;\n\n\t\tif ( isNaN( resetValue ) ) {\n\t\t\tresetValue = null;\n\t\t\tonChangeResetValue = undefined;\n\t\t}\n\n\t\tsetValue( resetValue );\n\n\t\t/**\n\t\t * Previously, this callback would always receive undefined as\n\t\t * an argument. This behavior is unexpected, specifically\n\t\t * when resetFallbackValue is defined.\n\t\t *\n\t\t * The value of undefined is not ideal. Passing it through\n\t\t * to internal <input /> elements would change it from a\n\t\t * controlled component to an uncontrolled component.\n\t\t *\n\t\t * For now, to minimize unexpected regressions, we're going to\n\t\t * preserve the undefined callback argument, except when a\n\t\t * resetFallbackValue is defined.\n\t\t */\n\t\tonChange( onChangeResetValue );\n\t};\n\n\tconst handleShowTooltip = () => setShowTooltip( true );\n\tconst handleHideTooltip = () => setShowTooltip( false );\n\n\tconst handleOnBlur = ( event ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t\thandleHideTooltip();\n\t};\n\n\tconst handleOnFocus = ( event ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t\thandleShowTooltip();\n\t};\n\n\tconst offsetStyle = {\n\t\t[ isRTL() ? 'right' : 'left' ]: fillValueOffset,\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classes }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t>\n\t\t\t<Root className=\"components-range-control__root\">\n\t\t\t\t{ beforeIcon && (\n\t\t\t\t\t<BeforeIconWrapper>\n\t\t\t\t\t\t<Icon icon={ beforeIcon } />\n\t\t\t\t\t</BeforeIconWrapper>\n\t\t\t\t) }\n\t\t\t\t<Wrapper\n\t\t\t\t\tclassName={ wrapperClasses }\n\t\t\t\t\tcolor={ colorProp }\n\t\t\t\t\tmarks={ !! marks }\n\t\t\t\t>\n\t\t\t\t\t<InputRange\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tclassName=\"components-range-control__slider\"\n\t\t\t\t\t\tdescribedBy={ describedBy }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\t\tonChange={ handleOnRangeChange }\n\t\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\t\tonMouseMove={ onMouseMove }\n\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\tref={ setRef }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ inputSliderValue }\n\t\t\t\t\t/>\n\t\t\t\t\t<RangeRail\n\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tmarks={ marks }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\trailColor={ railColor }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ rangeFillValue }\n\t\t\t\t\t/>\n\t\t\t\t\t<Track\n\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\tclassName=\"components-range-control__track\"\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tstyle={ { width: fillValueOffset } }\n\t\t\t\t\t\ttrackColor={ trackColor }\n\t\t\t\t\t/>\n\t\t\t\t\t<ThumbWrapper style={ offsetStyle } disabled={ disabled }>\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\t\tisFocused={ isThumbFocused }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ThumbWrapper>\n\t\t\t\t\t{ enableTooltip && (\n\t\t\t\t\t\t<SimpleTooltip\n\t\t\t\t\t\t\tclassName=\"components-range-control__tooltip\"\n\t\t\t\t\t\t\tinputRef={ inputRef }\n\t\t\t\t\t\t\ttooltipPosition=\"bottom\"\n\t\t\t\t\t\t\trenderTooltipContent={ renderTooltipContent }\n\t\t\t\t\t\t\tshow={ isCurrentlyFocused || showTooltip }\n\t\t\t\t\t\t\tstyle={ offsetStyle }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Wrapper>\n\t\t\t\t{ afterIcon && (\n\t\t\t\t\t<AfterIconWrapper>\n\t\t\t\t\t\t<Icon icon={ afterIcon } />\n\t\t\t\t\t</AfterIconWrapper>\n\t\t\t\t) }\n\t\t\t\t{ withInputField && (\n\t\t\t\t\t<InputNumber\n\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\tclassName=\"components-range-control__number\"\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tinputMode=\"decimal\"\n\t\t\t\t\t\tisShiftStepEnabled={ isShiftStepEnabled }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\tonBlur={ handleOnInputNumberBlur }\n\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\tshiftStep={ shiftStep }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ inputSliderValue }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<ActionRightWrapper>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-range-control__reset\"\n\t\t\t\t\t\t\tdisabled={ disabled || value === undefined }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</ActionRightWrapper>\n\t\t\t\t) }\n\t\t\t</Root>\n\t\t</BaseControl>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( RangeControl );\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/index.tsx"],"names":["noop","UnforwardedRangeControl","props","forwardedRef","afterIcon","allowReset","beforeIcon","className","color","colorProp","COLORS","ui","theme","currentInput","disabled","help","hideLabelFromVision","initialPosition","isShiftStepEnabled","label","marks","max","min","onBlur","onChange","onFocus","onMouseLeave","onMouseMove","railColor","renderTooltipContent","v","resetFallbackValue","shiftStep","showTooltip","showTooltipProp","step","trackColor","value","valueProp","withInputField","otherProps","setValue","initial","isResetPendent","hasTooltip","hasInputField","setShowTooltip","isFocused","setIsFocused","inputRef","isCurrentlyFocused","current","matches","isThumbFocused","isValueReset","currentValue","undefined","inputSliderValue","rangeFillValue","fillValue","fillValueOffset","classes","wrapperClasses","id","describedBy","enableTooltip","Number","isFinite","handleOnRangeChange","event","nextValue","parseFloat","target","handleOnChange","next","isNaN","handleOnInputNumberBlur","handleOnReset","resetValue","onChangeResetValue","handleShowTooltip","handleHideTooltip","handleOnBlur","handleOnFocus","offsetStyle","width","RangeControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport { clamp } from '../utils/math';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport {\n\tActionRightWrapper,\n\tAfterIconWrapper,\n\tBeforeIconWrapper,\n\tInputNumber,\n\tRoot,\n\tTrack,\n\tThumbWrapper,\n\tThumb,\n\tWrapper,\n} from './styles/range-control-styles';\n\nimport type { RangeControlProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst noop = () => {};\n\nfunction UnforwardedRangeControl< IconProps = unknown >(\n\tprops: WordPressComponentProps<\n\t\tRangeControlProps< IconProps >,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tafterIcon,\n\t\tallowReset = false,\n\t\tbeforeIcon,\n\t\tclassName,\n\t\tcolor: colorProp = COLORS.ui.theme,\n\t\tcurrentInput,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision = false,\n\t\tinitialPosition,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\tmarks = false,\n\t\tmax = 100,\n\t\tmin = 0,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonFocus = noop,\n\t\tonMouseLeave = noop,\n\t\tonMouseMove = noop,\n\t\trailColor,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tresetFallbackValue,\n\t\tshiftStep = 10,\n\t\tshowTooltip: showTooltipProp,\n\t\tstep = 1,\n\t\ttrackColor,\n\t\tvalue: valueProp,\n\t\twithInputField = true,\n\t\t...otherProps\n\t} = props;\n\n\tconst [ value, setValue ] = useControlledRangeValue( {\n\t\tmin,\n\t\tmax,\n\t\tvalue: valueProp ?? null,\n\t\tinitial: initialPosition,\n\t} );\n\tconst isResetPendent = useRef( false );\n\n\tlet hasTooltip = showTooltipProp;\n\tlet hasInputField = withInputField;\n\n\tif ( step === 'any' ) {\n\t\t// The tooltip and number input field are hidden when the step is \"any\"\n\t\t// because the decimals get too lengthy to fit well.\n\t\thasTooltip = false;\n\t\thasInputField = false;\n\t}\n\n\tconst [ showTooltip, setShowTooltip ] = useState( hasTooltip );\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst inputRef = useRef< HTMLInputElement >();\n\tconst isCurrentlyFocused = inputRef.current?.matches( ':focus' );\n\tconst isThumbFocused = ! disabled && isFocused;\n\n\tconst isValueReset = value === null;\n\tconst currentValue = value !== undefined ? value : currentInput;\n\n\tconst inputSliderValue = isValueReset ? '' : currentValue;\n\tconst rangeFillValue = isValueReset ? ( max - min ) / 2 + min : value;\n\n\tconst fillValue = isValueReset\n\t\t? 50\n\t\t: ( ( value - min ) / ( max - min ) ) * 100;\n\tconst fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;\n\n\tconst classes = classnames( 'components-range-control', className );\n\n\tconst wrapperClasses = classnames(\n\t\t'components-range-control__wrapper',\n\t\t!! marks && 'is-marked'\n\t);\n\n\tconst id = useInstanceId(\n\t\tUnforwardedRangeControl,\n\t\t'inspector-range-control'\n\t);\n\tconst describedBy = !! help ? `${ id }__help` : undefined;\n\tconst enableTooltip = hasTooltip !== false && Number.isFinite( value );\n\n\tconst handleOnRangeChange = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = parseFloat( event.target.value );\n\t\tsetValue( nextValue );\n\t\tonChange( nextValue );\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tlet nextValue = parseFloat( next );\n\t\tsetValue( nextValue );\n\n\t\t/*\n\t\t * Calls onChange only when nextValue is numeric\n\t\t * otherwise may queue a reset for the blur event.\n\t\t */\n\t\tif ( ! isNaN( nextValue ) ) {\n\t\t\tif ( nextValue < min || nextValue > max ) {\n\t\t\t\tnextValue = floatClamp( nextValue, min, max ) as number;\n\t\t\t}\n\n\t\t\tonChange( nextValue );\n\t\t\tisResetPendent.current = false;\n\t\t} else if ( allowReset ) {\n\t\t\tisResetPendent.current = true;\n\t\t}\n\t};\n\n\tconst handleOnInputNumberBlur = () => {\n\t\tif ( isResetPendent.current ) {\n\t\t\thandleOnReset();\n\t\t\tisResetPendent.current = false;\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tlet resetValue: number | null = parseFloat( `${ resetFallbackValue }` );\n\t\tlet onChangeResetValue: number | undefined = resetValue;\n\n\t\tif ( isNaN( resetValue ) ) {\n\t\t\tresetValue = null;\n\t\t\tonChangeResetValue = undefined;\n\t\t}\n\n\t\tsetValue( resetValue );\n\n\t\t/**\n\t\t * Previously, this callback would always receive undefined as\n\t\t * an argument. This behavior is unexpected, specifically\n\t\t * when resetFallbackValue is defined.\n\t\t *\n\t\t * The value of undefined is not ideal. Passing it through\n\t\t * to internal <input /> elements would change it from a\n\t\t * controlled component to an uncontrolled component.\n\t\t *\n\t\t * For now, to minimize unexpected regressions, we're going to\n\t\t * preserve the undefined callback argument, except when a\n\t\t * resetFallbackValue is defined.\n\t\t */\n\t\tonChange( onChangeResetValue );\n\t};\n\n\tconst handleShowTooltip = () => setShowTooltip( true );\n\tconst handleHideTooltip = () => setShowTooltip( false );\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t\thandleHideTooltip();\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t\thandleShowTooltip();\n\t};\n\n\tconst offsetStyle = {\n\t\t[ isRTL() ? 'right' : 'left' ]: fillValueOffset,\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classes }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ `${ id }` }\n\t\t\thelp={ help }\n\t\t>\n\t\t\t<Root className=\"components-range-control__root\">\n\t\t\t\t{ beforeIcon && (\n\t\t\t\t\t<BeforeIconWrapper>\n\t\t\t\t\t\t<Icon icon={ beforeIcon } />\n\t\t\t\t\t</BeforeIconWrapper>\n\t\t\t\t) }\n\t\t\t\t<Wrapper\n\t\t\t\t\tclassName={ wrapperClasses }\n\t\t\t\t\tcolor={ colorProp }\n\t\t\t\t\tmarks={ !! marks }\n\t\t\t\t>\n\t\t\t\t\t<InputRange\n\t\t\t\t\t\t{ ...otherProps }\n\t\t\t\t\t\tclassName=\"components-range-control__slider\"\n\t\t\t\t\t\tdescribedBy={ describedBy }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tid={ `${ id }` }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\t\tonChange={ handleOnRangeChange }\n\t\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\t\tonMouseMove={ onMouseMove }\n\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\tref={ useMergeRefs( [ inputRef, forwardedRef ] ) }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ inputSliderValue ?? undefined }\n\t\t\t\t\t/>\n\t\t\t\t\t<RangeRail\n\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tmarks={ marks }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\trailColor={ railColor }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ rangeFillValue }\n\t\t\t\t\t/>\n\t\t\t\t\t<Track\n\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\tclassName=\"components-range-control__track\"\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tstyle={ { width: fillValueOffset } }\n\t\t\t\t\t\ttrackColor={ trackColor }\n\t\t\t\t\t/>\n\t\t\t\t\t<ThumbWrapper style={ offsetStyle } disabled={ disabled }>\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\taria-hidden={ true }\n\t\t\t\t\t\t\tisFocused={ isThumbFocused }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ThumbWrapper>\n\t\t\t\t\t{ enableTooltip && (\n\t\t\t\t\t\t<SimpleTooltip\n\t\t\t\t\t\t\tclassName=\"components-range-control__tooltip\"\n\t\t\t\t\t\t\tinputRef={ inputRef }\n\t\t\t\t\t\t\ttooltipPosition=\"bottom\"\n\t\t\t\t\t\t\trenderTooltipContent={ renderTooltipContent }\n\t\t\t\t\t\t\tshow={ isCurrentlyFocused || showTooltip }\n\t\t\t\t\t\t\tstyle={ offsetStyle }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Wrapper>\n\t\t\t\t{ afterIcon && (\n\t\t\t\t\t<AfterIconWrapper>\n\t\t\t\t\t\t<Icon icon={ afterIcon } />\n\t\t\t\t\t</AfterIconWrapper>\n\t\t\t\t) }\n\t\t\t\t{ hasInputField && (\n\t\t\t\t\t<InputNumber\n\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\tclassName=\"components-range-control__number\"\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tinputMode=\"decimal\"\n\t\t\t\t\t\tisShiftStepEnabled={ isShiftStepEnabled }\n\t\t\t\t\t\tmax={ max }\n\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\tonBlur={ handleOnInputNumberBlur }\n\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\tshiftStep={ shiftStep }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\tvalue={ inputSliderValue }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<ActionRightWrapper>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-range-control__reset\"\n\t\t\t\t\t\t\tdisabled={ disabled || value === undefined }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</ActionRightWrapper>\n\t\t\t\t) }\n\t\t\t</Root>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * RangeControls are used to make selections from a range of incremental values.\n *\n * ```jsx\n * import { RangeControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRangeControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <RangeControl\n *       help=\"Please select how transparent you would like this.\"\n *       initialPosition={50}\n *       label=\"Opacity\"\n *       max={100}\n *       min={0}\n *       onChange={() => {}}\n *     />\n *   );\n * };\n * ```\n */\nexport const RangeControl = forwardRef( UnforwardedRangeControl );\n\nexport default RangeControl;\n"]}

package/build/range-control/input-range.js

@@ -15,8 +15,6 @@ var _rangeControlStyles = require("./styles/range-control-styles");
 
 var _utils = require("./utils");
 
-// @ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -26,8 +24,8 @@ var _utils = require("./utils");
  */
 const noop = () => {};
 
-function InputRange(_ref, ref) {
-  let {
+function InputRange(props, ref) {
+  const {
     describedBy,
     label,
     onHideTooltip = noop,
@@ -35,15 +33,15 @@ function InputRange(_ref, ref) {
     onMouseMove = noop,
     onShowTooltip = noop,
     value,
-    ...props
-  } = _ref;
+    ...otherProps
+  } = props;
   const hoverInteractions = (0, _utils.useDebouncedHoverInteraction)({
     onHide: onHideTooltip,
     onMouseLeave,
     onMouseMove,
     onShow: onShowTooltip
   });
-  return (0, _element.createElement)(_rangeControlStyles.InputRange, (0, _extends2.default)({}, props, hoverInteractions, {
+  return (0, _element.createElement)(_rangeControlStyles.InputRange, (0, _extends2.default)({}, otherProps, hoverInteractions, {
     "aria-describedby": describedBy,
     "aria-label": label,
     "aria-hidden": false,

package/build/range-control/input-range.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/input-range.js"],"names":["noop","InputRange","ref","describedBy","label","onHideTooltip","onMouseLeave","onMouseMove","onShowTooltip","value","props","hoverInteractions","onHide","onShow","ForwardedComponent"],"mappings":";;;;;;;;;AAIA;;;;AAKA;;AACA;;AAVA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,UAAT,OAWCC,GAXD,EAYE;AAAA,MAXD;AACCC,IAAAA,WADD;AAECC,IAAAA,KAFD;AAGCC,IAAAA,aAAa,GAAGL,IAHjB;AAICM,IAAAA,YAAY,GAAGN,IAJhB;AAKCO,IAAAA,WAAW,GAAGP,IALf;AAMCQ,IAAAA,aAAa,GAAGR,IANjB;AAOCS,IAAAA,KAPD;AAQC,OAAGC;AARJ,GAWC;AACD,QAAMC,iBAAiB,GAAG,yCAA8B;AACvDC,IAAAA,MAAM,EAAEP,aAD+C;AAEvDC,IAAAA,YAFuD;AAGvDC,IAAAA,WAHuD;AAIvDM,IAAAA,MAAM,EAAEL;AAJ+C,GAA9B,CAA1B;AAOA,SACC,4BAAC,8BAAD,6BACME,KADN,EAEMC,iBAFN;AAGC,wBAAmBR,WAHpB;AAIC,kBAAaC,KAJd;AAKC,mBAAc,KALf;AAMC,IAAA,GAAG,EAAGF,GANP;AAOC,IAAA,QAAQ,EAAG,CAPZ;AAQC,IAAA,IAAI,EAAC,OARN;AASC,IAAA,KAAK,EAAGO;AATT,KADD;AAaA;;AAED,MAAMK,kBAAkB,GAAG,yBAAYb,UAAZ,CAA3B;eAEea,kB","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputRange as BaseInputRange } from './styles/range-control-styles';\nimport { useDebouncedHoverInteraction } from './utils';\n\nconst noop = () => {};\n\nfunction InputRange(\n\t{\n\t\tdescribedBy,\n\t\tlabel,\n\t\tonHideTooltip = noop,\n\t\tonMouseLeave = noop,\n\t\tonMouseMove = noop,\n\t\tonShowTooltip = noop,\n\t\tvalue,\n\t\t...props\n\t},\n\tref\n) {\n\tconst hoverInteractions = useDebouncedHoverInteraction( {\n\t\tonHide: onHideTooltip,\n\t\tonMouseLeave,\n\t\tonMouseMove,\n\t\tonShow: onShowTooltip,\n\t} );\n\n\treturn (\n\t\t<BaseInputRange\n\t\t\t{ ...props }\n\t\t\t{ ...hoverInteractions }\n\t\t\taria-describedby={ describedBy }\n\t\t\taria-label={ label }\n\t\t\taria-hidden={ false }\n\t\t\tref={ ref }\n\t\t\ttabIndex={ 0 }\n\t\t\ttype=\"range\"\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputRange );\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/input-range.tsx"],"names":["noop","InputRange","props","ref","describedBy","label","onHideTooltip","onMouseLeave","onMouseMove","onShowTooltip","value","otherProps","hoverInteractions","onHide","onShow","ForwardedComponent"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,UAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,WADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,aAAa,GAAGN,IAHX;AAILO,IAAAA,YAAY,GAAGP,IAJV;AAKLQ,IAAAA,WAAW,GAAGR,IALT;AAMLS,IAAAA,aAAa,GAAGT,IANX;AAOLU,IAAAA,KAPK;AAQL,OAAGC;AARE,MASFT,KATJ;AAWA,QAAMU,iBAAiB,GAAG,yCAA8B;AACvDC,IAAAA,MAAM,EAAEP,aAD+C;AAEvDC,IAAAA,YAFuD;AAGvDC,IAAAA,WAHuD;AAIvDM,IAAAA,MAAM,EAAEL;AAJ+C,GAA9B,CAA1B;AAOA,SACC,4BAAC,8BAAD,6BACME,UADN,EAEMC,iBAFN;AAGC,wBAAmBR,WAHpB;AAIC,kBAAaC,KAJd;AAKC,mBAAc,KALf;AAMC,IAAA,GAAG,EAAGF,GANP;AAOC,IAAA,QAAQ,EAAG,CAPZ;AAQC,IAAA,IAAI,EAAC,OARN;AASC,IAAA,KAAK,EAAGO;AATT,KADD;AAaA;;AAED,MAAMK,kBAAkB,GAAG,yBAAYd,UAAZ,CAA3B;eAEec,kB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputRange as BaseInputRange } from './styles/range-control-styles';\nimport { useDebouncedHoverInteraction } from './utils';\n\nimport type { InputRangeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst noop = () => {};\n\nfunction InputRange(\n\tprops: WordPressComponentProps< InputRangeProps, 'input' >,\n\tref: React.ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tdescribedBy,\n\t\tlabel,\n\t\tonHideTooltip = noop,\n\t\tonMouseLeave = noop,\n\t\tonMouseMove = noop,\n\t\tonShowTooltip = noop,\n\t\tvalue,\n\t\t...otherProps\n\t} = props;\n\n\tconst hoverInteractions = useDebouncedHoverInteraction( {\n\t\tonHide: onHideTooltip,\n\t\tonMouseLeave,\n\t\tonMouseMove,\n\t\tonShow: onShowTooltip,\n\t} );\n\n\treturn (\n\t\t<BaseInputRange\n\t\t\t{ ...otherProps }\n\t\t\t{ ...hoverInteractions }\n\t\t\taria-describedby={ describedBy }\n\t\t\taria-label={ label }\n\t\t\taria-hidden={ false }\n\t\t\tref={ ref }\n\t\t\ttabIndex={ 0 }\n\t\t\ttype=\"range\"\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputRange );\n\nexport default ForwardedComponent;\n"]}

package/build/range-control/mark.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _rangeControlStyles = require("./styles/range-control-styles");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -24,17 +22,17 @@ var _rangeControlStyles = require("./styles/range-control-styles");
 /**
  * Internal dependencies
  */
-function RangeMark(_ref) {
-  let {
+function RangeMark(props) {
+  const {
     className,
     isFilled = false,
     label,
     style = {},
-    ...props
-  } = _ref;
+    ...otherProps
+  } = props;
   const classes = (0, _classnames.default)('components-range-control__mark', isFilled && 'is-filled', className);
   const labelClasses = (0, _classnames.default)('components-range-control__mark-label', isFilled && 'is-filled');
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_rangeControlStyles.Mark, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_rangeControlStyles.Mark, (0, _extends2.default)({}, otherProps, {
     "aria-hidden": "true",
     className: classes,
     isFilled: isFilled,

package/build/range-control/mark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/mark.js"],"names":["RangeMark","className","isFilled","label","style","props","classes","labelClasses"],"mappings":";;;;;;;;;;;;;AAIA;;AAKA;;AATA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,SAAT,OAMX;AAAA,MAN+B;AAClCC,IAAAA,SADkC;AAElCC,IAAAA,QAAQ,GAAG,KAFuB;AAGlCC,IAAAA,KAHkC;AAIlCC,IAAAA,KAAK,GAAG,EAJ0B;AAKlC,OAAGC;AAL+B,GAM/B;AACH,QAAMC,OAAO,GAAG,yBACf,gCADe,EAEfJ,QAAQ,IAAI,WAFG,EAGfD,SAHe,CAAhB;AAKA,QAAMM,YAAY,GAAG,yBACpB,sCADoB,EAEpBL,QAAQ,IAAI,WAFQ,CAArB;AAKA,SACC,qDACC,4BAAC,wBAAD,6BACMG,KADN;AAEC,mBAAY,MAFb;AAGC,IAAA,SAAS,EAAGC,OAHb;AAIC,IAAA,QAAQ,EAAGJ,QAJZ;AAKC,IAAA,KAAK,EAAGE;AALT,KADD,EAQGD,KAAK,IACN,4BAAC,6BAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAGI,YAFb;AAGC,IAAA,QAAQ,EAAGL,QAHZ;AAIC,IAAA,KAAK,EAAGE;AAJT,KAMGD,KANH,CATF,CADD;AAqBA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { Mark, MarkLabel } from './styles/range-control-styles';\n\nexport default function RangeMark( {\n\tclassName,\n\tisFilled = false,\n\tlabel,\n\tstyle = {},\n\t...props\n} ) {\n\tconst classes = classnames(\n\t\t'components-range-control__mark',\n\t\tisFilled && 'is-filled',\n\t\tclassName\n\t);\n\tconst labelClasses = classnames(\n\t\t'components-range-control__mark-label',\n\t\tisFilled && 'is-filled'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Mark\n\t\t\t\t{ ...props }\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={ classes }\n\t\t\t\tisFilled={ isFilled }\n\t\t\t\tstyle={ style }\n\t\t\t/>\n\t\t\t{ label && (\n\t\t\t\t<MarkLabel\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ labelClasses }\n\t\t\t\t\tisFilled={ isFilled }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</MarkLabel>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/mark.tsx"],"names":["RangeMark","props","className","isFilled","label","style","otherProps","classes","labelClasses"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,SAAT,CACdC,KADc,EAEb;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAAQ,GAAG,KAFN;AAGLC,IAAAA,KAHK;AAILC,IAAAA,KAAK,GAAG,EAJH;AAKL,OAAGC;AALE,MAMFL,KANJ;AAQA,QAAMM,OAAO,GAAG,yBACf,gCADe,EAEfJ,QAAQ,IAAI,WAFG,EAGfD,SAHe,CAAhB;AAKA,QAAMM,YAAY,GAAG,yBACpB,sCADoB,EAEpBL,QAAQ,IAAI,WAFQ,CAArB;AAKA,SACC,qDACC,4BAAC,wBAAD,6BACMG,UADN;AAEC,mBAAY,MAFb;AAGC,IAAA,SAAS,EAAGC,OAHb;AAIC,IAAA,QAAQ,EAAGJ,QAJZ;AAKC,IAAA,KAAK,EAAGE;AALT,KADD,EAQGD,KAAK,IACN,4BAAC,6BAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAGI,YAFb;AAGC,IAAA,QAAQ,EAAGL,QAHZ;AAIC,IAAA,KAAK,EAAGE;AAJT,KAMGD,KANH,CATF,CADD;AAqBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { Mark, MarkLabel } from './styles/range-control-styles';\n\nimport type { RangeMarkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function RangeMark(\n\tprops: WordPressComponentProps< RangeMarkProps, 'span' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisFilled = false,\n\t\tlabel,\n\t\tstyle = {},\n\t\t...otherProps\n\t} = props;\n\n\tconst classes = classnames(\n\t\t'components-range-control__mark',\n\t\tisFilled && 'is-filled',\n\t\tclassName\n\t);\n\tconst labelClasses = classnames(\n\t\t'components-range-control__mark-label',\n\t\tisFilled && 'is-filled'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Mark\n\t\t\t\t{ ...otherProps }\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={ classes }\n\t\t\t\tisFilled={ isFilled }\n\t\t\t\tstyle={ style }\n\t\t\t/>\n\t\t\t{ label && (\n\t\t\t\t<MarkLabel\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ labelClasses }\n\t\t\t\t\tisFilled={ isFilled }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</MarkLabel>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/range-control/rail.js

@@ -17,8 +17,6 @@ var _mark = _interopRequireDefault(require("./mark"));
 
 var _rangeControlStyles = require("./styles/range-control-styles");
 
-// @ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -26,8 +24,8 @@ var _rangeControlStyles = require("./styles/range-control-styles");
 /**
  * Internal dependencies
  */
-function RangeRail(_ref) {
-  let {
+function RangeRail(props) {
+  const {
     disabled = false,
     marks = false,
     min = 0,
@@ -35,7 +33,7 @@ function RangeRail(_ref) {
     step = 1,
     value = 0,
     ...restProps
-  } = _ref;
+  } = props;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_rangeControlStyles.Rail, (0, _extends2.default)({
     disabled: disabled
   }, restProps)), marks && (0, _element.createElement)(Marks, {
@@ -48,20 +46,16 @@ function RangeRail(_ref) {
   }));
 }
 
-function Marks(_ref2) {
-  let {
+function Marks(props) {
+  const {
     disabled = false,
     marks = false,
     min = 0,
     max = 100,
-    step = 1,
+    step: stepProp = 1,
     value = 0
-  } = _ref2;
-
-  if (step === 'any') {
-    step = 1;
-  }
-
+  } = props;
+  const step = stepProp === 'any' ? 1 : stepProp;
   const marksData = useMarks({
     marks,
     min,
@@ -79,14 +73,14 @@ function Marks(_ref2) {
   }))));
 }
 
-function useMarks(_ref3) {
+function useMarks(_ref) {
   let {
     marks,
     min = 0,
     max = 100,
     step = 1,
     value = 0
-  } = _ref3;
+  } = _ref;
 
   if (!marks) {
     return [];

package/build/range-control/rail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/rail.js"],"names":["RangeRail","disabled","marks","min","max","step","value","restProps","Marks","marksData","useMarks","map","mark","key","range","Array","isArray","count","Math","round","push","length","placedMarks","forEach","index","isFilled","offset","offsetStyle","style"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport RangeMark from './mark';\nimport { MarksWrapper, Rail } from './styles/range-control-styles';\n\nexport default function RangeRail( {\n\tdisabled = false,\n\tmarks = false,\n\tmin = 0,\n\tmax = 100,\n\tstep = 1,\n\tvalue = 0,\n\t...restProps\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<Rail disabled={ disabled } { ...restProps } />\n\t\t\t{ marks && (\n\t\t\t\t<Marks\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction Marks( {\n\tdisabled = false,\n\tmarks = false,\n\tmin = 0,\n\tmax = 100,\n\tstep = 1,\n\tvalue = 0,\n} ) {\n\tif ( step === 'any' ) {\n\t\tstep = 1;\n\t}\n\tconst marksData = useMarks( { marks, min, max, step, value } );\n\n\treturn (\n\t\t<MarksWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-range-control__marks\"\n\t\t>\n\t\t\t{ marksData.map( ( mark ) => (\n\t\t\t\t<RangeMark\n\t\t\t\t\t{ ...mark }\n\t\t\t\t\tkey={ mark.key }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</MarksWrapper>\n\t);\n}\n\nfunction useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) {\n\tif ( ! marks ) {\n\t\treturn [];\n\t}\n\n\tconst range = max - min;\n\tif ( ! Array.isArray( marks ) ) {\n\t\tmarks = [];\n\t\tconst count = 1 + Math.round( range / step );\n\t\twhile ( count > marks.push( { value: step * marks.length + min } ) );\n\t}\n\n\tconst placedMarks = [];\n\tmarks.forEach( ( mark, index ) => {\n\t\tif ( mark.value < min || mark.value > max ) {\n\t\t\treturn;\n\t\t}\n\t\tconst key = `mark-${ index }`;\n\t\tconst isFilled = mark.value <= value;\n\t\tconst offset = `${ ( ( mark.value - min ) / range ) * 100 }%`;\n\n\t\tconst offsetStyle = {\n\t\t\t[ isRTL() ? 'right' : 'left' ]: offset,\n\t\t};\n\n\t\tplacedMarks.push( {\n\t\t\t...mark,\n\t\t\tisFilled,\n\t\t\tkey,\n\t\t\tstyle: offsetStyle,\n\t\t} );\n\t} );\n\n\treturn placedMarks;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/rail.tsx"],"names":["RangeRail","props","disabled","marks","min","max","step","value","restProps","Marks","stepProp","marksData","useMarks","map","mark","key","range","Array","isArray","count","Math","round","push","length","placedMarks","forEach","index","isFilled","offset","offsetStyle","style"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport RangeMark from './mark';\nimport { MarksWrapper, Rail } from './styles/range-control-styles';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type {\n\tMarksProps,\n\tRangeMarkProps,\n\tRailProps,\n\tUseMarksArgs,\n} from './types';\n\nexport default function RangeRail(\n\tprops: WordPressComponentProps< RailProps, 'span' >\n) {\n\tconst {\n\t\tdisabled = false,\n\t\tmarks = false,\n\t\tmin = 0,\n\t\tmax = 100,\n\t\tstep = 1,\n\t\tvalue = 0,\n\t\t...restProps\n\t} = props;\n\n\treturn (\n\t\t<>\n\t\t\t<Rail disabled={ disabled } { ...restProps } />\n\t\t\t{ marks && (\n\t\t\t\t<Marks\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction Marks( props: WordPressComponentProps< MarksProps, 'span' > ) {\n\tconst {\n\t\tdisabled = false,\n\t\tmarks = false,\n\t\tmin = 0,\n\t\tmax = 100,\n\t\tstep: stepProp = 1,\n\t\tvalue = 0,\n\t} = props;\n\n\tconst step = stepProp === 'any' ? 1 : stepProp;\n\tconst marksData = useMarks( { marks, min, max, step, value } );\n\n\treturn (\n\t\t<MarksWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-range-control__marks\"\n\t\t>\n\t\t\t{ marksData.map( ( mark ) => (\n\t\t\t\t<RangeMark\n\t\t\t\t\t{ ...mark }\n\t\t\t\t\tkey={ mark.key }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</MarksWrapper>\n\t);\n}\n\nfunction useMarks( {\n\tmarks,\n\tmin = 0,\n\tmax = 100,\n\tstep = 1,\n\tvalue = 0,\n}: UseMarksArgs ) {\n\tif ( ! marks ) {\n\t\treturn [];\n\t}\n\n\tconst range = max - min;\n\tif ( ! Array.isArray( marks ) ) {\n\t\tmarks = [];\n\t\tconst count = 1 + Math.round( range / step );\n\t\twhile ( count > marks.push( { value: step * marks.length + min } ) );\n\t}\n\n\tconst placedMarks: RangeMarkProps[] = [];\n\tmarks.forEach( ( mark, index ) => {\n\t\tif ( mark.value < min || mark.value > max ) {\n\t\t\treturn;\n\t\t}\n\t\tconst key = `mark-${ index }`;\n\t\tconst isFilled = mark.value <= value;\n\t\tconst offset = `${ ( ( mark.value - min ) / range ) * 100 }%`;\n\n\t\tconst offsetStyle = {\n\t\t\t[ isRTL() ? 'right' : 'left' ]: offset,\n\t\t};\n\n\t\tplacedMarks.push( {\n\t\t\t...mark,\n\t\t\tisFilled,\n\t\t\tkey,\n\t\t\tstyle: offsetStyle,\n\t\t} );\n\t} );\n\n\treturn placedMarks;\n}\n"]}