@wordpress/components 21.3.0 → 22.1.0

package/build/radio/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/radio/index.js"],"names":["Radio","ref","children","value","props","radioContext","RadioContext","checked","state","Button"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,KAAT,OAA+CC,GAA/C,EAAqD;AAAA,MAArC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmB,OAAGC;AAAtB,GAAqC;AACpD,QAAMC,YAAY,GAAG,yBAAYC,qBAAZ,CAArB;AACA,QAAMC,OAAO,GAAGF,YAAY,CAACG,KAAb,KAAuBL,KAAvC;AAEA,SACC,4BAAC,YAAD;AACC,IAAA,GAAG,EAAGF,GADP;AAEC,IAAA,EAAE,EAAGQ,eAFN;AAGC,IAAA,OAAO,EAAGF,OAAO,GAAG,SAAH,GAAe,WAHjC;AAIC,IAAA,KAAK,EAAGJ;AAJT,KAKME,YALN,EAMMD,KANN,GAQGF,QAAQ,IAAIC,KARf,CADD;AAYA;;eAEc,yBAAYH,KAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport { Radio as ReakitRadio } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RadioContext from '../radio-context';\n\nfunction Radio( { children, value, ...props }, ref ) {\n\tconst radioContext = useContext( RadioContext );\n\tconst checked = radioContext.state === value;\n\n\treturn (\n\t\t<ReakitRadio\n\t\t\tref={ ref }\n\t\t\tas={ Button }\n\t\t\tvariant={ checked ? 'primary' : 'secondary' }\n\t\t\tvalue={ value }\n\t\t\t{ ...radioContext }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children || value }\n\t\t</ReakitRadio>\n\t);\n}\n\nexport default forwardRef( Radio );\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/radio-context/index.js"],"names":["RadioContext","state","setState"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,YAAY,GAAG,4BAAe;AACnCC,EAAAA,KAAK,EAAE,IAD4B;AAEnCC,EAAAA,QAAQ,EAAE,MAAM,CAAE;AAFiB,CAAf,CAArB;eAKeF,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst RadioContext = createContext( {\n\tstate: null,\n\tsetState: () => {},\n} );\n\nexport default RadioContext;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/radio/index.js"],"names":["Radio","ReakitRadio","useContext","forwardRef","Button","RadioContext","ref","children","value","props","radioContext","checked","state"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAlB,QAAqC,cAArC;AAEA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASL,KAAT,OAA+CM,GAA/C,EAAqD;AAAA,MAArC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmB,OAAGC;AAAtB,GAAqC;AACpD,QAAMC,YAAY,GAAGR,UAAU,CAAEG,YAAF,CAA/B;AACA,QAAMM,OAAO,GAAGD,YAAY,CAACE,KAAb,KAAuBJ,KAAvC;AAEA,SACC,cAAC,WAAD;AACC,IAAA,GAAG,EAAGF,GADP;AAEC,IAAA,EAAE,EAAGF,MAFN;AAGC,IAAA,OAAO,EAAGO,OAAO,GAAG,SAAH,GAAe,WAHjC;AAIC,IAAA,KAAK,EAAGH;AAJT,KAKME,YALN,EAMMD,KANN,GAQGF,QAAQ,IAAIC,KARf,CADD;AAYA;;AAED,eAAeL,UAAU,CAAEH,KAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport { Radio as ReakitRadio } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RadioContext from '../radio-context';\n\nfunction Radio( { children, value, ...props }, ref ) {\n\tconst radioContext = useContext( RadioContext );\n\tconst checked = radioContext.state === value;\n\n\treturn (\n\t\t<ReakitRadio\n\t\t\tref={ ref }\n\t\t\tas={ Button }\n\t\t\tvariant={ checked ? 'primary' : 'secondary' }\n\t\t\tvalue={ value }\n\t\t\t{ ...radioContext }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children || value }\n\t\t</ReakitRadio>\n\t);\n}\n\nexport default forwardRef( Radio );\n"]}

package/build-module/radio-context/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/radio-context/index.js"],"names":["createContext","RadioContext","state","setState"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA,MAAMC,YAAY,GAAGD,aAAa,CAAE;AACnCE,EAAAA,KAAK,EAAE,IAD4B;AAEnCC,EAAAA,QAAQ,EAAE,MAAM,CAAE;AAFiB,CAAF,CAAlC;AAKA,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst RadioContext = createContext( {\n\tstate: null,\n\tsetState: () => {},\n} );\n\nexport default RadioContext;\n"]}

package/build-types/radio-context/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radio-context/index.js"],"names":[],"mappings":";AAKA;;;GAGI"}

package/src/border-box-control/stories/index.js

@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import Popover from '../../popover';
-import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-export default {
-	title: 'Components (Experimental)/BorderBoxControl',
-	component: BorderBoxControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const _default = ( props ) => {
-	const { defaultBorder } = props;
-	const [ borders, setBorders ] = useState( defaultBorder );
-
-	useEffect( () => setBorders( defaultBorder ), [ defaultBorder ] );
-
-	return (
-		<SlotFillProvider>
-			<WrapperView>
-				<BorderBoxControl
-					colors={ colors }
-					label="Borders"
-					onChange={ ( newBorders ) => setBorders( newBorders ) }
-					value={ borders }
-					{ ...props }
-				/>
-			</WrapperView>
-			<Separator />
-			<HelpText>
-				The BorderBoxControl is intended to be used within a component
-				that will provide reset controls. The button below is only for
-				convenience.
-			</HelpText>
-			<Button variant="primary" onClick={ () => setBorders( undefined ) }>
-				Reset
-			</Button>
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	disableCustomColors: false,
-	enableAlpha: true,
-	enableStyle: true,
-	defaultBorder: {
-		color: '#72aee6',
-		style: 'dashed',
-		width: '1px',
-	},
-	__next36pxDefaultSize: false,
-	popoverPlacement: 'right-start',
-};
-
-const WrapperView = styled.div`
-	max-width: 280px;
-	padding: 16px;
-`;
-
-const Separator = styled.hr`
-	margin-top: 100px;
-	border-color: #ddd;
-	border-style: solid;
-	border-bottom: none;
-`;
-
-const HelpText = styled.p`
-	color: #aaa;
-	font-size: 0.9em;
-`;

package/src/draggable/stories/index.js

@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, more } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Draggable from '../';
-
-export default { title: 'Components/Draggable', component: Draggable };
-
-const Box = ( props ) => {
-	return (
-		<div
-			{ ...props }
-			style={ {
-				alignItems: 'center',
-				display: 'flex',
-				justifyContent: 'center',
-				width: 100,
-				height: 100,
-				background: '#ddd',
-			} }
-		/>
-	);
-};
-
-const DraggalbeExample = () => {
-	const [ isDragging, setDragging ] = useState( false );
-
-	// Allow for the use of ID in the example.
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<div>
-			<p>Is Dragging? { isDragging ? 'Yes' : 'No' }</p>
-			<div
-				id="draggable-example-box"
-				style={ { display: 'inline-flex' } }
-			>
-				<Draggable elementId="draggable-example-box">
-					{ ( { onDraggableStart, onDraggableEnd } ) => {
-						const handleOnDragStart = ( event ) => {
-							setDragging( true );
-							onDraggableStart( event );
-						};
-						const handleOnDragEnd = ( event ) => {
-							setDragging( false );
-							onDraggableEnd( event );
-						};
-
-						return (
-							<Box
-								onDragStart={ handleOnDragStart }
-								onDragEnd={ handleOnDragEnd }
-								draggable
-							>
-								<Icon icon={ more } />
-							</Box>
-						);
-					} }
-				</Draggable>
-			</div>
-		</div>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const _default = () => {
-	return <DraggalbeExample />;
-};

package/src/form-file-upload/stories/index.js

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { upload as uploadIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import FormFileUpload from '../';
-
-export default {
-	title: 'Components/FormFileUpload',
-	component: FormFileUpload,
-};
-
-export const Default = FormFileUpload.bind( {} );
-Default.args = {
-	accept: '',
-	children: 'Select file',
-	multiple: false,
-};
-
-export const RestrictFileTypes = FormFileUpload.bind( {} );
-RestrictFileTypes.args = {
-	...Default.args,
-	accept: 'image/*',
-	children: 'Select image',
-	multiple: false,
-};
-
-export const AllowMultipleFiles = FormFileUpload.bind( {} );
-AllowMultipleFiles.args = {
-	...Default.args,
-	children: 'Select files',
-	multiple: true,
-};
-
-export const WithIcon = FormFileUpload.bind( {} );
-WithIcon.args = {
-	...Default.args,
-	children: 'Upload',
-	icon: uploadIcon,
-};
-
-export const WithCustomRender = FormFileUpload.bind( {} );
-WithCustomRender.args = {
-	...Default.args,
-	render: ( { openFileDialog } ) => (
-		<button onClick={ openFileDialog }>Custom Upload Button</button>
-	),
-};

package/src/isolated-event-container/index.js

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * @type {import('react').MouseEventHandler<HTMLDivElement>}
- */
-function stopPropagation( event ) {
-	event.stopPropagation();
-}
-
-export default forwardRef( ( { children, ...props }, ref ) => {
-	deprecated( 'wp.components.IsolatedEventContainer', {
-		since: '5.7',
-	} );
-
-	// Disable reason: this stops certain events from propagating outside of the component.
-	// - onMouseDown is disabled as this can cause interactions with other DOM elements.
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
-	return (
-		<div { ...props } ref={ ref } onMouseDown={ stopPropagation }>
-			{ children }
-		</div>
-	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
-} );

package/src/radio/stories/index.js

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import RadioGroup from '../../radio-group';
-import Radio from '../';
-
-export default { title: 'Components (Experimental)/Radio', component: Radio };
-
-export const _default = () => {
-	// Radio components must be a descendent of a RadioGroup component.
-	/* eslint-disable no-restricted-syntax */
-	return (
-		// id is required for server side rendering
-		<RadioGroup id="default-radiogroup" label="options">
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};