@automattic/jetpack-components 1.12.17 → 2.0.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [2.0.1] - 2026-07-27
+### Changed
+- Update package dependencies.
+
+## [2.0.0] - 2026-07-22
+### Removed
+- Number Slider: remove the NumberSlider component. It wrapped the unmaintained react-slider dependency (which blocked React 19) and had a single consumer; use the WordPress RangeControl component from @wordpress/components directly instead. [#50289]
+
 ## [1.12.17] - 2026-07-20
 ### Changed
 - PricingTable: Add optional `breakpoint` prop to control the viewport width at which offers switch from columns to stacked blocks (defaults to 'large'). [#50567]
@@ -1885,6 +1893,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[2.0.1]: https://github.com/Automattic/jetpack-components/compare/2.0.0...2.0.1
+[2.0.0]: https://github.com/Automattic/jetpack-components/compare/1.12.17...2.0.0
 [1.12.17]: https://github.com/Automattic/jetpack-components/compare/1.12.16...1.12.17
 [1.12.16]: https://github.com/Automattic/jetpack-components/compare/1.12.15...1.12.16
 [1.12.15]: https://github.com/Automattic/jetpack-components/compare/1.12.14...1.12.15

package/build/index.d.ts

@@ -15,7 +15,6 @@ export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
-export { default as NumberSlider } from './components/number-slider/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';

package/build/index.js

@@ -28,7 +28,6 @@ export { default as Gravatar } from './components/gravatar/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
 export { default as PricingCard } from './components/pricing-card/index.js';
-export { default as NumberSlider } from './components/number-slider/index.js';
 export { default as AdminSection } from './components/admin-section/basic/index.js';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
 export { default as AdminPage } from './components/admin-page/index.js';

package/index.ts

@@ -30,7 +30,6 @@ export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
-export { default as NumberSlider } from './components/number-slider/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.17",
+	"version": "2.0.1",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -95,7 +95,6 @@
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"react-slider": "2.0.5",
 		"social-logos": "^3.3.18",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
@@ -112,7 +111,6 @@
 		"@types/jest": "30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
-		"@types/react-slider": "1.3.6",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.4.2",
 		"react": "18.3.1",
@@ -122,7 +120,7 @@
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
 		"webpack": "5.107.2",
-		"webpack-cli": "6.0.1"
+		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

package/build/components/number-slider/index.d.ts

@@ -1,12 +0,0 @@
-import { NumberSliderProps } from './types.ts';
-import type { FC } from 'react';
-import './style.scss';
-/**
- * Generate Number Slider
- * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
- *
- * @param {NumberSliderProps} props - Props
- * @return {ReactElement} - JSX element
- */
-declare const NumberSlider: FC<NumberSliderProps>;
-export default NumberSlider;

package/build/components/number-slider/index.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState } from 'react';
-import ReactSlider from 'react-slider';
-import './style.scss';
-/**
- * Generate Number Slider
- * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
- *
- * @param {NumberSliderProps} props - Props
- * @return {ReactElement} - JSX element
- */
-const NumberSlider = ({ className, maxValue = 100, minValue = 0, step = 1, value, onChange, onBeforeChange, onAfterChange, renderThumb, }) => {
-    const [isThumbHolding, setIsThumbHolding] = useState(false);
-    const componentClassName = clsx('jp-components-number-slider', className, {
-        'jp-components-number-slider--is-holding': isThumbHolding,
-    });
-    const onBeforeChangeCallback = beforeValue => {
-        setIsThumbHolding(true);
-        if (typeof onBeforeChange === 'function') {
-            onBeforeChange(beforeValue);
-        }
-    };
-    const onAfterChangeCallback = afterValue => {
-        setIsThumbHolding(false);
-        if (typeof onAfterChange === 'function') {
-            onAfterChange(afterValue);
-        }
-    };
-    const renderThumbCallback = renderThumb
-        ? renderThumb
-        : (props, state) => {
-            const { key, ...otherProps } = props;
-            return (_jsx("div", { ...otherProps, children: state.valueNow }, key));
-        };
-    /**
-     * Type casting to prevent TypeScript error:
-     * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
-     */
-    const TypedReactSlider = ReactSlider;
-    return (_jsx("div", { className: componentClassName, "data-testid": "number-slider", children: _jsx(TypedReactSlider, { className: "jp-components-number-slider__control", thumbClassName: "jp-components-number-slider__thumb", thumbActiveClassName: "jp-components-number-slider__thumb--is-active", trackClassName: "jp-components-number-slider__track", value: value, max: maxValue, min: minValue, step: step, renderThumb: renderThumbCallback, onChange: onChange, onBeforeChange: onBeforeChangeCallback, onAfterChange: onAfterChangeCallback }) }));
-};
-export default NumberSlider;

package/build/components/number-slider/style.scss

@@ -1,68 +0,0 @@
-@use "@automattic/jetpack-base-styles/style";
-
-$thumb-height: 40px;
-$track-height: 8px;
-
-@mixin adjust-track-rail-styles {
-	height: $track-height;
-	border-radius: 8px;
-}
-
-// On holding thumb styling
-.jp-components-number-slider--is-holding {
-
-	.jp-components-number-slider__thumb {
-		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
-	}
-}
-
-// Base styles
-.jp-components-number-slider__control {
-	width: 100%;
-	height: $thumb-height;
-}
-
-.jp-components-number-slider__track {
-
-	@include adjust-track-rail-styles;
-	top: calc(($thumb-height / 2) - ($track-height / 2));
-	background: var(--jp-gray);
-
-	&.jp-components-number-slider__track-0 {
-		background: var(--jp-green-40);
-	}
-
-	&.jp-components-number-slider__track-1 {
-		background: var(--jp-gray);
-	}
-}
-
-.jp-components-number-slider__thumb {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 16px;
-	height: $thumb-height;
-	background-color: var(--jp-white);
-	border: 1.5px solid var(--jp-green-50);
-	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	border-radius: 4px;
-	color: var(--jp-black);
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-style: normal;
-	font-weight: 600;
-	font-size: var(--font-body);
-	line-height: 24px;
-	letter-spacing: -0.02em;
-	white-space: nowrap;
-	cursor: pointer;
-
-	// On focus thumb styling
-	&.jp-components-number-slider__thumb--is-active {
-		outline: none;
-	}
-
-	&[aria-valuenow="0"] {
-		border-color: var(--jp-gray);
-	}
-}

package/build/components/number-slider/types.d.ts

@@ -1,50 +0,0 @@
-import type { HTMLProps, RefCallback, JSX } from 'react';
-interface HTMLPropsWithRefCallback<T> extends HTMLProps<T> {
-    ref: RefCallback<T>;
-}
-export type NumberSliderProps = {
-    /**
-     * The wrapper class name of this NumberSlider component.
-     */
-    className?: string;
-    /**
-     * The maximum value of the slider.
-     */
-    maxValue?: number;
-    /**
-     * The minimum value of the slider.
-     */
-    minValue?: number;
-    /**
-     * The initial value of the slider.
-     */
-    value?: number;
-    /**
-     * The step value of the slider.
-     */
-    step?: number;
-    /**
-     * Callback called on every value change.
-     * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
-     */
-    onChange?: (value: number) => void;
-    /**
-     * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
-     * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
-     */
-    onBeforeChange?: (value: number) => void;
-    /**
-     * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
-     * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
-     */
-    onAfterChange?: (value: number) => void;
-    /**
-     * Node to render on the slider.
-     */
-    renderThumb?: (props: HTMLPropsWithRefCallback<HTMLDivElement>, state: {
-        index: number;
-        value: number | ReadonlyArray<number>;
-        valueNow: number;
-    }) => JSX.Element | null;
-};
-export {};

package/build/components/number-slider/types.js

@@ -1 +0,0 @@
-export {};

package/components/number-slider/index.tsx

@@ -1,86 +0,0 @@
-import clsx from 'clsx';
-import { useState } from 'react';
-import ReactSlider, { ReactSliderProps } from 'react-slider';
-import { NumberSliderProps } from './types.ts';
-import type { ComponentType, FC, ReactElement } from 'react';
-import './style.scss';
-
-/**
- * Generate Number Slider
- * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
- *
- * @param {NumberSliderProps} props - Props
- * @return {ReactElement} - JSX element
- */
-const NumberSlider: FC< NumberSliderProps > = ( {
-	className,
-	maxValue = 100,
-	minValue = 0,
-	step = 1,
-	value,
-	onChange,
-	onBeforeChange,
-	onAfterChange,
-	renderThumb,
-} ) => {
-	const [ isThumbHolding, setIsThumbHolding ] = useState( false );
-
-	const componentClassName = clsx( 'jp-components-number-slider', className, {
-		'jp-components-number-slider--is-holding': isThumbHolding,
-	} );
-
-	const onBeforeChangeCallback = beforeValue => {
-		setIsThumbHolding( true );
-
-		if ( typeof onBeforeChange === 'function' ) {
-			onBeforeChange( beforeValue );
-		}
-	};
-
-	const onAfterChangeCallback = afterValue => {
-		setIsThumbHolding( false );
-
-		if ( typeof onAfterChange === 'function' ) {
-			onAfterChange( afterValue );
-		}
-	};
-
-	const renderThumbCallback = renderThumb
-		? renderThumb
-		: ( props, state ) => {
-				const { key, ...otherProps } = props;
-
-				return (
-					<div key={ key } { ...otherProps }>
-						{ state.valueNow }
-					</div>
-				);
-		  };
-
-	/**
-	 * Type casting to prevent TypeScript error:
-	 * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
-	 */
-	const TypedReactSlider = ReactSlider as unknown as ComponentType< ReactSliderProps >;
-
-	return (
-		<div className={ componentClassName } data-testid="number-slider">
-			<TypedReactSlider
-				className="jp-components-number-slider__control"
-				thumbClassName="jp-components-number-slider__thumb"
-				thumbActiveClassName="jp-components-number-slider__thumb--is-active"
-				trackClassName="jp-components-number-slider__track"
-				value={ value }
-				max={ maxValue }
-				min={ minValue }
-				step={ step }
-				renderThumb={ renderThumbCallback } // eslint-disable-line react/jsx-no-bind
-				onChange={ onChange }
-				onBeforeChange={ onBeforeChangeCallback } // eslint-disable-line react/jsx-no-bind
-				onAfterChange={ onAfterChangeCallback } // eslint-disable-line react/jsx-no-bind
-			/>
-		</div>
-	);
-};
-
-export default NumberSlider;

package/components/number-slider/style.scss

@@ -1,68 +0,0 @@
-@use "@automattic/jetpack-base-styles/style";
-
-$thumb-height: 40px;
-$track-height: 8px;
-
-@mixin adjust-track-rail-styles {
-	height: $track-height;
-	border-radius: 8px;
-}
-
-// On holding thumb styling
-.jp-components-number-slider--is-holding {
-
-	.jp-components-number-slider__thumb {
-		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
-	}
-}
-
-// Base styles
-.jp-components-number-slider__control {
-	width: 100%;
-	height: $thumb-height;
-}
-
-.jp-components-number-slider__track {
-
-	@include adjust-track-rail-styles;
-	top: calc(($thumb-height / 2) - ($track-height / 2));
-	background: var(--jp-gray);
-
-	&.jp-components-number-slider__track-0 {
-		background: var(--jp-green-40);
-	}
-
-	&.jp-components-number-slider__track-1 {
-		background: var(--jp-gray);
-	}
-}
-
-.jp-components-number-slider__thumb {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 16px;
-	height: $thumb-height;
-	background-color: var(--jp-white);
-	border: 1.5px solid var(--jp-green-50);
-	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	border-radius: 4px;
-	color: var(--jp-black);
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-style: normal;
-	font-weight: 600;
-	font-size: var(--font-body);
-	line-height: 24px;
-	letter-spacing: -0.02em;
-	white-space: nowrap;
-	cursor: pointer;
-
-	// On focus thumb styling
-	&.jp-components-number-slider__thumb--is-active {
-		outline: none;
-	}
-
-	&[aria-valuenow="0"] {
-		border-color: var(--jp-gray);
-	}
-}

package/components/number-slider/types.ts

@@ -1,58 +0,0 @@
-import type { HTMLProps, RefCallback, JSX } from 'react';
-
-interface HTMLPropsWithRefCallback< T > extends HTMLProps< T > {
-	ref: RefCallback< T >;
-}
-
-export type NumberSliderProps = {
-	/**
-	 * The wrapper class name of this NumberSlider component.
-	 */
-	className?: string;
-
-	/**
-	 * The maximum value of the slider.
-	 */
-	maxValue?: number;
-
-	/**
-	 * The minimum value of the slider.
-	 */
-	minValue?: number;
-
-	/**
-	 * The initial value of the slider.
-	 */
-	value?: number;
-
-	/**
-	 * The step value of the slider.
-	 */
-	step?: number;
-
-	/**
-	 * Callback called on every value change.
-	 * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
-	 */
-	onChange?: ( value: number ) => void;
-
-	/**
-	 * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
-	 * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
-	 */
-	onBeforeChange?: ( value: number ) => void;
-
-	/**
-	 * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
-	 * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
-	 */
-	onAfterChange?: ( value: number ) => void;
-
-	/**
-	 * Node to render on the slider.
-	 */
-	renderThumb?: (
-		props: HTMLPropsWithRefCallback< HTMLDivElement >,
-		state: { index: number; value: number | ReadonlyArray< number >; valueNow: number }
-	) => JSX.Element | null;
-};