@wordpress/components 19.7.0 → 19.9.0

package/build-module/border-control/border-control/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder, sanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[ border, hadPreviousZeroWidth, onBorderChange ]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle );\n\t}, [ isCompact, width, cx ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t};\n}\n"]}

package/build-module/border-control/border-control/index.js

@@ -0,0 +1,3 @@
+export { default as BorderControl } from './component';
+export { useBorderControl } from './hook';
+//# sourceMappingURL=index.js.map

package/build-module/border-control/border-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"names":["default","BorderControl","useBorderControl"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,aAAzC;AACA,SAASC,gBAAT,QAAiC,QAAjC","sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"]}

package/build-module/border-control/border-control-dropdown/component.js

@@ -0,0 +1,174 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import BorderControlStylePicker from '../border-control-style-picker';
+import Button from '../../button';
+import ColorIndicator from '../../color-indicator';
+import ColorPalette from '../../color-palette';
+import Dropdown from '../../dropdown';
+import { HStack } from '../../h-stack';
+import { VStack } from '../../v-stack';
+import { contextConnect } from '../../ui/context';
+import { useBorderControlDropdown } from './hook';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+
+const noop = () => undefined;
+
+const getColorObject = (colorValue, colors, hasMultipleColorOrigins) => {
+  if (!colorValue || !colors) {
+    return;
+  }
+
+  if (hasMultipleColorOrigins) {
+    let matchedColor;
+    colors.some(origin => origin.colors.some(color => {
+      if (color.color === colorValue) {
+        matchedColor = color;
+        return true;
+      }
+
+      return false;
+    }));
+    return matchedColor;
+  }
+
+  return colors.find(color => color.color === colorValue);
+};
+
+const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
+  if (isStyleEnabled) {
+    if (colorObject) {
+      return style ? sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, colorObject.color, style) : sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+    }
+
+    if (colorValue) {
+      return style ? sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', colorValue, style) : sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:".
+      'Border color and style picker. The currently selected color has a value of "%1$s".', colorValue);
+    }
+
+    return __('Border color and style picker.');
+  }
+
+  if (colorObject) {
+    return sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+  }
+
+  if (colorValue) {
+    return sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:".
+    'Border color picker. The currently selected color has a value of "%1$s".', colorValue);
+  }
+
+  return __('Border color picker.');
+};
+
+const BorderControlDropdown = (props, forwardedRef) => {
+  const {
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar,
+    border,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    onReset,
+    onColorChange,
+    onStyleChange,
+    popoverClassName,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName,
+    showDropdownHeader,
+    enableStyle = true,
+    ...otherProps
+  } = useBorderControlDropdown(props);
+  const {
+    color,
+    style
+  } = border || {};
+  const colorObject = getColorObject(color, colors, !!__experimentalHasMultipleOrigins);
+  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
+  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
+
+  const renderToggle = _ref => {
+    let {
+      onToggle = noop
+    } = _ref;
+    return createElement(Button, {
+      onClick: onToggle,
+      variant: "tertiary",
+      "aria-label": toggleAriaLabel,
+      position: dropdownPosition
+    }, createElement("span", {
+      className: indicatorWrapperClassName
+    }, createElement(ColorIndicator, {
+      className: indicatorClassName,
+      colorValue: color
+    })));
+  };
+
+  const renderContent = _ref2 => {
+    let {
+      onClose
+    } = _ref2;
+    return createElement(Fragment, null, createElement(VStack, {
+      className: popoverControlsClassName,
+      spacing: 6
+    }, showDropdownHeader ? createElement(HStack, null, createElement(StyledLabel, null, __('Border color')), createElement(Button, {
+      isSmall: true,
+      label: __('Close border color'),
+      icon: closeSmall,
+      onClick: onClose
+    })) : undefined, createElement(ColorPalette, {
+      className: popoverContentClassName,
+      value: color,
+      onChange: onColorChange,
+      colors,
+      disableCustomColors,
+      __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      clearable: false,
+      enableAlpha: enableAlpha
+    }), enableStyle && createElement(BorderControlStylePicker, {
+      label: __('Style'),
+      value: style,
+      onChange: onStyleChange
+    })), createElement(Button, {
+      className: resetButtonClassName,
+      variant: "tertiary",
+      onClick: () => {
+        onReset();
+        onClose();
+      }
+    }, __('Reset to default')));
+  };
+
+  return createElement(Dropdown, _extends({
+    renderToggle: renderToggle,
+    renderContent: renderContent,
+    contentClassName: popoverClassName
+  }, otherProps, {
+    ref: forwardedRef
+  }));
+};
+
+const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
+export default ConnectedBorderControlDropdown;
+//# sourceMappingURL=component.js.map

package/build-module/border-control/border-control-dropdown/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverClassName","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","enableStyle","otherProps","toggleAriaLabel","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\n\nimport type {\n\tColor,\n\tColorOrigin,\n\tColors,\n\tDropdownProps,\n\tPopoverProps,\n} from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: Colors | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as ColorOrigin[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as Color[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: Color | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tenableStyle = true,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent = ( { onClose }: PopoverProps ) => (\n\t\t<>\n\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) : undefined }\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\tvalue={ color }\n\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t}\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t\t{ enableStyle && (\n\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t<Button\n\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonReset();\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t</Button>\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tcontentClassName={ popoverClassName }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}

package/build-module/border-control/border-control-dropdown/hook.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
+import { useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+export function useBorderControlDropdown(props) {
+  const {
+    border,
+    className,
+    colors,
+    contentClassName,
+    onChange,
+    previousStyleSelection,
+    ...otherProps
+  } = useContextSystem(props, 'BorderControlDropdown');
+  const [widthValue] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width);
+  const hasZeroWidth = widthValue === 0;
+
+  const onColorChange = color => {
+    const style = (border === null || border === void 0 ? void 0 : border.style) === 'none' ? previousStyleSelection : border === null || border === void 0 ? void 0 : border.style;
+    const width = hasZeroWidth && !!color ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    onChange({
+      color,
+      style,
+      width
+    });
+  };
+
+  const onStyleChange = style => {
+    const width = hasZeroWidth && !!style ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    onChange({ ...border,
+      style,
+      width
+    });
+  };
+
+  const onReset = () => {
+    onChange({ ...border,
+      color: undefined,
+      style: undefined
+    });
+  }; // Generate class names.
+
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.borderControlDropdown(), className);
+  }, [className, cx]);
+  const indicatorClassName = useMemo(() => {
+    return cx(styles.borderColorIndicator);
+  }, [cx]);
+  const indicatorWrapperClassName = useMemo(() => {
+    return cx(styles.colorIndicatorWrapper(border));
+  }, [border, cx]);
+  const popoverClassName = useMemo(() => {
+    return cx(styles.borderControlPopover, contentClassName);
+  }, [cx, contentClassName]);
+  const popoverControlsClassName = useMemo(() => {
+    return cx(styles.borderControlPopoverControls);
+  }, [cx]);
+  const popoverContentClassName = useMemo(() => {
+    return cx(styles.borderControlPopoverContent);
+  }, [cx]);
+  const resetButtonClassName = useMemo(() => {
+    return cx(styles.resetButton);
+  }, [cx]);
+  return { ...otherProps,
+    border,
+    className: classes,
+    colors,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    onColorChange,
+    onStyleChange,
+    onReset,
+    popoverClassName,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName
+  };
+}
+//# sourceMappingURL=hook.js.map

package/build-module/border-control/border-control-dropdown/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","contentClassName","onChange","previousStyleSelection","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverClassName","borderControlPopover","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors,\n\t\tcontentClassName,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown(), className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border ) );\n\t}, [ border, cx ] );\n\n\tconst popoverClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopover, contentClassName );\n\t}, [ cx, contentClassName ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t};\n}\n"]}

package/build-module/border-control/border-control-dropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

package/build-module/border-control/border-control-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

package/build-module/border-control/border-control-style-picker/component.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import Button from '../../button';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import { View } from '../../view';
+import { Flex } from '../../flex';
+import { VisuallyHidden } from '../../visually-hidden';
+import { contextConnect } from '../../ui/context';
+import { useBorderControlStylePicker } from './hook';
+const BORDER_STYLES = [{
+  label: __('Solid'),
+  icon: lineSolid,
+  value: 'solid'
+}, {
+  label: __('Dashed'),
+  icon: lineDashed,
+  value: 'dashed'
+}, {
+  label: __('Dotted'),
+  icon: lineDotted,
+  value: 'dotted'
+}];
+
+const Label = props => {
+  const {
+    label,
+    hideLabelFromVision
+  } = props;
+
+  if (!label) {
+    return null;
+  }
+
+  return hideLabelFromVision ? createElement(VisuallyHidden, {
+    as: "label"
+  }, label) : createElement(StyledLabel, null, label);
+};
+
+const BorderControlStylePicker = (props, forwardedRef) => {
+  const {
+    buttonClassName,
+    hideLabelFromVision,
+    label,
+    onChange,
+    value,
+    ...otherProps
+  } = useBorderControlStylePicker(props);
+  return createElement(View, _extends({}, otherProps, {
+    ref: forwardedRef
+  }), createElement(Label, {
+    label: label,
+    hideLabelFromVision: hideLabelFromVision
+  }), createElement(Flex, {
+    justify: "flex-start",
+    gap: 1
+  }, BORDER_STYLES.map(borderStyle => createElement(Button, {
+    key: borderStyle.value,
+    className: buttonClassName,
+    icon: borderStyle.icon,
+    isSmall: true,
+    isPressed: borderStyle.value === value,
+    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
+    "aria-label": borderStyle.label,
+    label: borderStyle.label,
+    showTooltip: true
+  }))));
+};
+
+const ConnectedBorderControlStylePicker = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker');
+export default ConnectedBorderControlStylePicker;
+//# sourceMappingURL=component.js.map

package/build-module/border-control/border-control-style-picker/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"names":["lineDashed","lineDotted","lineSolid","__","Button","StyledLabel","View","Flex","VisuallyHidden","contextConnect","useBorderControlStylePicker","BORDER_STYLES","label","icon","value","Label","props","hideLabelFromVision","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","map","borderStyle","undefined","ConnectedBorderControlStylePicker"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,EAAiCC,SAAjC,QAAkD,kBAAlD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,WAAT,QAA4B,+CAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAA+B,uBAA/B;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,2BAAT,QAA4C,QAA5C;AAIA,MAAMC,aAAa,GAAG,CACrB;AAAEC,EAAAA,KAAK,EAAET,EAAE,CAAE,OAAF,CAAX;AAAwBU,EAAAA,IAAI,EAAEX,SAA9B;AAAyCY,EAAAA,KAAK,EAAE;AAAhD,CADqB,EAErB;AAAEF,EAAAA,KAAK,EAAET,EAAE,CAAE,QAAF,CAAX;AAAyBU,EAAAA,IAAI,EAAEb,UAA/B;AAA2Cc,EAAAA,KAAK,EAAE;AAAlD,CAFqB,EAGrB;AAAEF,EAAAA,KAAK,EAAET,EAAE,CAAE,QAAF,CAAX;AAAyBU,EAAAA,IAAI,EAAEZ,UAA/B;AAA2Ca,EAAAA,KAAK,EAAE;AAAlD,CAHqB,CAAtB;;AAMA,MAAMC,KAAK,GAAKC,KAAF,IAAyB;AACtC,QAAM;AAAEJ,IAAAA,KAAF;AAASK,IAAAA;AAAT,MAAiCD,KAAvC;;AAEA,MAAK,CAAEJ,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOK,mBAAmB,GACzB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BL,KAA7B,CADyB,GAGzB,cAAC,WAAD,QAAeA,KAAf,CAHD;AAKA,CAZD;;AAcA,MAAMM,wBAAwB,GAAG,CAChCF,KADgC,EAEhCG,YAFgC,KAG5B;AACJ,QAAM;AACLC,IAAAA,eADK;AAELH,IAAAA,mBAFK;AAGLL,IAAAA,KAHK;AAILS,IAAAA,QAJK;AAKLP,IAAAA,KALK;AAML,OAAGQ;AANE,MAOFZ,2BAA2B,CAAEM,KAAF,CAP/B;AASA,SACC,cAAC,IAAD,eAAWM,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACC,cAAC,KAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,mBAAmB,EAAGK;AAFvB,IADD,EAKC,cAAC,IAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,GAAG,EAAG;AAAjC,KACGN,aAAa,CAACY,GAAd,CAAqBC,WAAF,IACpB,cAAC,MAAD;AACC,IAAA,GAAG,EAAGA,WAAW,CAACV,KADnB;AAEC,IAAA,SAAS,EAAGM,eAFb;AAGC,IAAA,IAAI,EAAGI,WAAW,CAACX,IAHpB;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,SAAS,EAAGW,WAAW,CAACV,KAAZ,KAAsBA,KALnC;AAMC,IAAA,OAAO,EAAG,MACTO,QAAQ,CACPG,WAAW,CAACV,KAAZ,KAAsBA,KAAtB,GACGW,SADH,GAEGD,WAAW,CAACV,KAHR,CAPV;AAaC,kBAAaU,WAAW,CAACZ,KAb1B;AAcC,IAAA,KAAK,EAAGY,WAAW,CAACZ,KAdrB;AAeC,IAAA,WAAW,EAAG;AAff,IADC,CADH,CALD,CADD;AA6BA,CA1CD;;AA4CA,MAAMc,iCAAiC,GAAGjB,cAAc,CACvDS,wBADuD,EAEvD,0BAFuD,CAAxD;AAKA,eAAeQ,iCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"]}

package/build-module/border-control/border-control-style-picker/hook.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+export function useBorderControlStylePicker(props) {
+  const {
+    className,
+    ...otherProps
+  } = useContextSystem(props, 'BorderControlStylePicker'); // Generate class names.
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.borderControlStylePicker, className);
+  }, [className, cx]);
+  const buttonClassName = useMemo(() => {
+    return cx(styles.borderStyleButton);
+  }, [cx]);
+  return { ...otherProps,
+    className: classes,
+    buttonClassName
+  };
+}
+//# sourceMappingURL=hook.js.map

package/build-module/border-control/border-control-style-picker/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderControlStylePicker","props","className","otherProps","cx","classes","borderControlStylePicker","buttonClassName","borderStyleButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,2BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BL,gBAAgB,CACpDG,KADoD,EAEpD,0BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AACA,QAAMM,OAAO,GAAGT,OAAO,CAAE,MAAM;AAC9B,WAAOQ,EAAE,CAAEP,MAAM,CAACS,wBAAT,EAAmCJ,SAAnC,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaE,EAAb,CAFoB,CAAvB;AAIA,QAAMG,eAAe,GAAGX,OAAO,CAAE,MAAM;AACtC,WAAOQ,EAAE,CAAEP,MAAM,CAACW,iBAAT,CAAT;AACA,GAF8B,EAE5B,CAAEJ,EAAF,CAF4B,CAA/B;AAIA,SAAO,EAAE,GAAGD,UAAL;AAAiBD,IAAAA,SAAS,EAAEG,OAA5B;AAAqCE,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { StylePickerProps } from '../types';\n\nexport function useBorderControlStylePicker(\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderControlStylePicker'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlStylePicker, className );\n\t}, [ className, cx ] );\n\n\tconst buttonClassName = useMemo( () => {\n\t\treturn cx( styles.borderStyleButton );\n\t}, [ cx ] );\n\n\treturn { ...otherProps, className: classes, buttonClassName };\n}\n"]}

package/build-module/border-control/border-control-style-picker/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

package/build-module/border-control/border-control-style-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

package/build-module/border-control/index.js

@@ -0,0 +1,3 @@
+export { default as BorderControl } from './border-control/component';
+export { useBorderControl } from './border-control/hook';
+//# sourceMappingURL=index.js.map

package/build-module/border-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/index.ts"],"names":["default","BorderControl","useBorderControl"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,4BAAzC;AACA,SAASC,gBAAT,QAAiC,uBAAjC","sourcesContent":["export { default as BorderControl } from './border-control/component';\nexport { useBorderControl } from './border-control/hook';\n"]}