@wordpress/components 21.2.0 → 22.0.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/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/navigator/stories/index.js

@@ -1,194 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Card, CardBody, CardFooter, CardHeader } from '../../card';
-import { HStack } from '../../h-stack';
-import Dropdown from '../../dropdown';
-import { useCx } from '../../utils/hooks/use-cx';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-} from '../';
-
-export default {
-	title: 'Components (Experimental)/Navigator',
-	component: NavigatorProvider,
-};
-
-const MyNavigation = () => {
-	const cx = useCx();
-	return (
-		<NavigatorProvider
-			initialPath="/"
-			className={ cx( css( `height: 100vh; max-height: 450px;` ) ) }
-		>
-			<NavigatorScreen path="/">
-				<Card>
-					<CardBody>
-						<p>This is the home screen.</p>
-
-						<HStack justify="flex-start" wrap>
-							<NavigatorButton variant="secondary" path="/child">
-								Navigate to child screen.
-							</NavigatorButton>
-
-							<NavigatorButton
-								variant="secondary"
-								path="/overflow-child"
-							>
-								Navigate to screen with horizontal overflow.
-							</NavigatorButton>
-
-							<NavigatorButton
-								variant="secondary"
-								path="/stickies"
-							>
-								Navigate to screen with sticky content.
-							</NavigatorButton>
-
-							<Dropdown
-								renderToggle={ ( { isOpen, onToggle } ) => (
-									<Button
-										onClick={ onToggle }
-										aria-expanded={ isOpen }
-										variant="primary"
-									>
-										Open test dialog
-									</Button>
-								) }
-								renderContent={ () => (
-									<Card>
-										<CardHeader>Go</CardHeader>
-										<CardBody>Stuff</CardBody>
-									</Card>
-								) }
-							/>
-						</HStack>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/child">
-				<Card>
-					<CardBody>
-						<p>This is the child screen.</p>
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/overflow-child">
-				<Card>
-					<CardBody>
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-						<div
-							className={ cx(
-								css( `
-									display: inline-block;
-									background: papayawhip;
-								` )
-							) }
-						>
-							<span
-								className={ cx(
-									css( `
-										color: palevioletred;
-										white-space: nowrap;
-										font-size: 42vw;
-									` )
-								) }
-							>
-								¯\_(ツ)_/¯
-							</span>
-						</div>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/stickies">
-				<Card>
-					<Sticky as={ CardHeader } z="2">
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-					</Sticky>
-					<CardBody>
-						<Sticky top="69px" colors="papayawhip/peachpuff">
-							<h2>A wild sticky element appears</h2>
-						</Sticky>
-						<MetaphorIpsum quantity={ 3 } />
-					</CardBody>
-					<CardBody>
-						<Sticky top="69px" colors="azure/paleturquoise">
-							<h2>Another wild sticky element appears</h2>
-						</Sticky>
-						<MetaphorIpsum quantity={ 3 } />
-					</CardBody>
-					<Sticky as={ CardFooter } colors="mistyrose/pink">
-						<Button variant="primary">Primary noop</Button>
-					</Sticky>
-				</Card>
-			</NavigatorScreen>
-		</NavigatorProvider>
-	);
-};
-
-export const _default = () => {
-	return <MyNavigation />;
-};
-
-function Sticky( {
-	as: Tag = 'div',
-	bottom = 0,
-	colors = 'whitesmoke/lightgrey',
-	top = 0,
-	z: zIndex = 1,
-	...props
-} ) {
-	const cx = useCx();
-	const [ bgColor, dotColor ] = colors.split( '/' );
-	const className = cx(
-		css( {
-			top,
-			bottom,
-			zIndex,
-			display: 'flex',
-			position: 'sticky',
-			background: `radial-gradient(${ dotColor } 1px, ${ bgColor } 2px) 50%/1em 1em`,
-		} ),
-		props.className
-	);
-	const propsOut = { ...props, className };
-	return <Tag { ...propsOut } />;
-}
-
-function MetaphorIpsum( { quantity } ) {
-	const cx = useCx();
-	const list = [
-		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
-		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
-		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
-	];
-	quantity = Math.min( list.length, quantity );
-	return (
-		<>
-			{ list.slice( 0, quantity ).map( ( text, key ) => (
-				<p className={ cx( css( `max-width: 20em;` ) ) } key={ key }>
-					{ text }
-				</p>
-			) ) }
-		</>
-	);
-}