@wordpress/components 18.0.0 → 19.0.3

package/src/color-picker/saturation.js

@@ -1,201 +0,0 @@
-/**
- * Parts of this source were derived and modified from react-color,
- * released under the MIT license.
- *
- * https://github.com/casesandberg/react-color/
- *
- * Copyright (c) 2015 Case Sandberg
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-/**
- * External dependencies
- */
-import { clamp, noop, throttle } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import {
-	TAB,
-	UP,
-	DOWN,
-	RIGHT,
-	LEFT,
-	PAGEUP,
-	PAGEDOWN,
-	HOME,
-	END,
-} from '@wordpress/keycodes';
-import { compose, pure, withInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { calculateSaturationChange } from './utils';
-import Button from '../button';
-import { VisuallyHidden } from '../visually-hidden';
-
-export class Saturation extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.throttle = throttle( ( fn, data, e ) => {
-			fn( data, e );
-		}, 50 );
-
-		this.container = createRef();
-		this.saturate = this.saturate.bind( this );
-		this.brighten = this.brighten.bind( this );
-		this.handleChange = this.handleChange.bind( this );
-		this.handleMouseDown = this.handleMouseDown.bind( this );
-		this.handleMouseUp = this.handleMouseUp.bind( this );
-		this.handleKeyDown = this.handleKeyDown.bind( this );
-	}
-
-	componentWillUnmount() {
-		this.throttle.cancel();
-		this.unbindEventListeners();
-	}
-
-	saturate( amount = 0.01 ) {
-		const { hsv, onChange = noop } = this.props;
-		const intSaturation = clamp(
-			hsv.s + Math.round( amount * 100 ),
-			0,
-			100
-		);
-		const change = {
-			h: hsv.h,
-			s: intSaturation,
-			v: hsv.v,
-			a: hsv.a,
-			source: 'rgb',
-		};
-
-		onChange( change );
-	}
-
-	brighten( amount = 0.01 ) {
-		const { hsv, onChange = noop } = this.props;
-		const intValue = clamp( hsv.v + Math.round( amount * 100 ), 0, 100 );
-		const change = {
-			h: hsv.h,
-			s: hsv.s,
-			v: intValue,
-			a: hsv.a,
-			source: 'rgb',
-		};
-
-		onChange( change );
-	}
-
-	handleChange( e ) {
-		const { onChange = noop } = this.props;
-		const change = calculateSaturationChange(
-			e,
-			this.props,
-			this.container.current
-		);
-		this.throttle( onChange, change, e );
-	}
-
-	handleMouseDown( e ) {
-		this.handleChange( e );
-		window.addEventListener( 'mousemove', this.handleChange );
-		window.addEventListener( 'mouseup', this.handleMouseUp );
-	}
-
-	handleMouseUp() {
-		this.unbindEventListeners();
-	}
-
-	unbindEventListeners() {
-		window.removeEventListener( 'mousemove', this.handleChange );
-		window.removeEventListener( 'mouseup', this.handleMouseUp );
-	}
-
-	handleKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
-		const shortcuts = {
-			[ UP ]: () => this.brighten( shiftKey ? 0.1 : 0.01 ),
-			[ PAGEUP ]: () => this.brighten( 1 ),
-			[ DOWN ]: () => this.brighten( shiftKey ? -0.1 : -0.01 ),
-			[ PAGEDOWN ]: () => this.brighten( -1 ),
-			[ RIGHT ]: () => this.saturate( shiftKey ? 0.1 : 0.01 ),
-			[ END ]: () => this.saturate( 1 ),
-			[ LEFT ]: () => this.saturate( shiftKey ? -0.1 : -0.01 ),
-			[ HOME ]: () => this.saturate( -1 ),
-		};
-
-		for ( const code in shortcuts ) {
-			if ( code === String( keyCode ) ) {
-				shortcuts[ keyCode ]();
-			}
-		}
-
-		if ( keyCode !== TAB ) {
-			event.preventDefault();
-		}
-	}
-
-	render() {
-		const { hsv, hsl, instanceId } = this.props;
-		const pointerLocation = {
-			top: `${ -hsv.v + 100 }%`,
-			left: `${ hsv.s }%`,
-		};
-
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-		return (
-			<div
-				style={ { background: `hsl(${ hsl.h },100%, 50%)` } }
-				className="components-color-picker__saturation-color"
-				ref={ this.container }
-				onMouseDown={ this.handleMouseDown }
-				onTouchMove={ this.handleChange }
-				onTouchStart={ this.handleChange }
-				role="application"
-			>
-				<div className="components-color-picker__saturation-white" />
-				<div className="components-color-picker__saturation-black" />
-				<Button
-					aria-label={ __( 'Choose a shade' ) }
-					aria-describedby={ `color-picker-saturation-${ instanceId }` }
-					className="components-color-picker__saturation-pointer"
-					style={ pointerLocation }
-					onKeyDown={ this.handleKeyDown }
-				/>
-				<VisuallyHidden
-					id={ `color-picker-saturation-${ instanceId }` }
-				>
-					{ __(
-						'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'
-					) }
-				</VisuallyHidden>
-			</div>
-		);
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-	}
-}
-
-export default compose( pure, withInstanceId )( Saturation );

package/src/color-picker/style.scss

@@ -1,269 +0,0 @@
-/**
- * Parts of this source were derived and modified from react-color,
- * released under the MIT license.
- *
- * https://github.com/casesandberg/react-color/
- *
- * Copyright (c) 2015 Case Sandberg
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-.components-color-picker {
-	width: 100%;
-
-	* {
-		box-sizing: border-box;
-	}
-}
-
-.components-color-picker__saturation {
-	width: 100%;
-	padding-bottom: 55%;
-	position: relative;
-}
-
-.components-color-picker__body {
-	padding: $grid-unit-20 $grid-unit-20 #{ $grid-unit-05 * 3 };
-}
-
-.components-color-picker__controls {
-	display: flex;
-}
-
-.components-color-picker__saturation-pointer,
-.components-color-picker__hue-pointer,
-.components-color-picker__alpha-pointer {
-	padding: 0;
-	position: absolute;
-	cursor: pointer;
-	box-shadow: none;
-	border: none;
-}
-
-/* CURRENT COLOR COMPONENT */
-.components-color-picker__swatch {
-	margin-right: 8px;
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	position: relative;
-	overflow: hidden;
-	background-image:
-		linear-gradient(45deg, #ddd 25%, transparent 25%),
-		linear-gradient(-45deg, #ddd 25%, transparent 25%),
-		linear-gradient(45deg, transparent 75%, #ddd 75%),
-		linear-gradient(-45deg, transparent 75%, #ddd 75%);
-	background-size: 10px 10px;
-	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
-
-	.is-alpha-disabled & {
-		width: 12px;
-		height: 12px;
-		margin-top: 0;
-	}
-}
-
-.components-color-picker__active {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-	z-index: 2;
-}
-
-/* SATURATION COMPONENT */
-.components-color-picker__saturation-color,
-.components-color-picker__saturation-white,
-.components-color-picker__saturation-black {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.components-color-picker__saturation-color {
-	overflow: visible;
-}
-
-.components-color-picker__saturation-white {
-	/*rtl:ignore*/
-	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-
-.components-color-picker__saturation-black {
-	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
-}
-
-// Needs specificity.
-.components-button.components-color-picker__saturation-pointer {
-	width: 14px;
-	height: 14px;
-	padding: 0;
-	border-radius: 50%;
-	background-color: transparent;
-	transform: translate(-50%, -50%);
-
-	box-shadow:
-		0 0 0 1px $white,
-		inset 0 0 0 1px $black,
-		0 0 0 2px $black;
-
-	&:focus:not(:disabled) {
-		box-shadow:
-			0 0 0 2px $white,
-			inset 0 0 0 1px $black,
-			0 0 0 3px $black;
-	}
-}
-
-/* HUE & ALPHA BARS */
-.components-color-picker__toggles {
-	flex: 1;
-}
-
-.components-color-picker__alpha {
-	background-image:
-		linear-gradient(45deg, #ddd 25%, transparent 25%),
-		linear-gradient(-45deg, #ddd 25%, transparent 25%),
-		linear-gradient(45deg, transparent 75%, #ddd 75%),
-		linear-gradient(-45deg, transparent 75%, #ddd 75%);
-	background-size: 10px 10px;
-	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
-}
-
-.components-color-picker__hue-gradient,
-.components-color-picker__alpha-gradient {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.components-color-picker__hue,
-.components-color-picker__alpha {
-	height: 12px;
-	position: relative;
-}
-
-.is-alpha-enabled .components-color-picker__hue {
-	margin-bottom: 8px;
-}
-
-.components-color-picker__hue-bar,
-.components-color-picker__alpha-bar {
-	position: relative;
-	margin: 0 3px;
-	height: 100%;
-	padding: 0 2px;
-}
-
-.components-color-picker__hue-gradient {
-	/*rtl:ignore*/
-	background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-}
-
-.components-color-picker__hue-pointer,
-.components-color-picker__alpha-pointer {
-	/*rtl:ignore*/
-	left: 0;
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-	background: #fff;
-	transform: translate(-7px, -1px);
-}
-
-.components-color-picker__hue-pointer,
-.components-color-picker__saturation-pointer {
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
-}
-
-.components-color-picker__saturation-pointer:focus {
-	box-shadow:
-		0 0 0 2px #fff,
-		0 0 0 4px var(--wp-admin-theme-color),
-		0 0 5px 0 var(--wp-admin-theme-color),
-		inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
-		0 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-.components-color-picker__hue-pointer:focus,
-.components-color-picker__alpha-pointer:focus {
-	border-color: var(--wp-admin-theme-color);
-	box-shadow:
-		0 0 0 2px var(--wp-admin-theme-color),
-		0 0 3px 0 var(--wp-admin-theme-color);
-	outline: 2px solid transparent;
-	outline-offset: -2px;
-}
-
-/* INPUTS COMPONENT */
-.components-color-picker__inputs-wrapper {
-	margin: 0 -4px;
-	padding-top: 16px;
-	display: flex;
-	align-items: flex-end;
-	min-width: 255px;
-
-	fieldset {
-		flex: 1;
-		border: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	.components-color-picker__inputs-fields .components-text-control__input[type="number"] {
-		padding: 6px 3px;
-		margin: 0;
-	}
-}
-
-.components-color-picker__inputs-field {
-	width: 100%;
-}
-
-.components-color-picker__inputs-fields {
-	display: flex;
-	/*rtl:ignore*/
-	direction: ltr;
-	flex-grow: 1;
-	margin-right: 4px;
-
-	.components-base-control + .components-base-control {
-		margin-top: 0;
-	}
-
-	.components-base-control__field {
-		margin: 0 2px;
-	}
-}
-
-
-.components-color-picker__inputs-toggle {
-	height: 30px;
-	padding: 0 5px;
-}