npm - @wordpress/components - Versions diffs - 19.4.1 → 19.7.0-next.e230fbab09.0 - Mend

@wordpress/components 19.4.1 → 19.7.0-next.e230fbab09.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (929) hide show

package/build-module/button/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","isArray","Children","cloneElement","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","length","newIcon","element"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { isArray } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { Children, cloneElement } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled \|\| disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// an explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) \|\|\n\t\t\t// there's a shortcut or...\n\t\t\tshortcut \|\|\n\t\t\t// there's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// the children are empty and...\n\t\t\t\t( ! children \|\|\n\t\t\t\t\t( isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// the tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t } )\n\t\t: null;\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tonLongPress={ onLongPress }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t{ newIcon }\n\t\t\t\t\t{ newChildren }\n\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/button/index.native.js"],"names":["StyleSheet","TouchableOpacity","Text","View","Platform","isArray","Children","cloneElement","usePreferredColorScheme","usePreferredColorSchemeStyle","Tooltip","Icon","isAndroid","OS","marginBottom","marginLeft","styles","create","container","flex","padding","justifyContent","alignItems","buttonInactive","flexDirection","fixedRatio","aspectRatio","buttonActive","borderRadius","borderColor","backgroundColor","subscriptInactive","color","fontWeight","fontSize","alignSelf","subscriptInactiveDark","subscriptActive","Button","props","children","onClick","onLongPress","disabled","hint","isPressed","ariaDisabled","subscript","testID","icon","iconSize","showTooltip","label","shortcut","tooltipPosition","isActiveStyle","customContainerStyles","preferredColorScheme","isDisabled","containerStyle","buttonViewStyle","opacity","states","push","newChildren","map","child","colorScheme","shouldShowTooltip","length","newIcon","element"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tStyleSheet,\n\tTouchableOpacity,\n\tText,\n\tView,\n\tPlatform,\n} from 'react-native';\nimport { isArray } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { Children, cloneElement } from '@wordpress/element';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\n\nconst isAndroid = Platform.OS === 'android';\nconst marginBottom = isAndroid ? -0.5 : 0;\nconst marginLeft = -3;\n\nconst styles = StyleSheet.create( {\n\tcontainer: {\n\t\tflex: 1,\n\t\tpadding: 3,\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tbuttonInactive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\tfixedRatio: {\n\t\taspectRatio: 1,\n\t},\n\tbuttonActive: {\n\t\tflex: 1,\n\t\tflexDirection: 'row',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\tborderRadius: 6,\n\t\tborderColor: '#2e4453',\n\t\tbackgroundColor: '#2e4453',\n\t},\n\tsubscriptInactive: {\n\t\tcolor: '#7b9ab1', // $toolbar-button.\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n\tsubscriptInactiveDark: {\n\t\tcolor: '#a7aaad', // $gray_20.\n\t},\n\tsubscriptActive: {\n\t\tcolor: 'white',\n\t\tfontWeight: 'bold',\n\t\tfontSize: 13,\n\t\talignSelf: 'flex-end',\n\t\tmarginLeft,\n\t\tmarginBottom,\n\t},\n} );\n\nexport function Button( props ) {\n\tconst {\n\t\tchildren,\n\t\tonClick,\n\t\tonLongPress,\n\t\tdisabled,\n\t\thint,\n\t\tfixedRatio = true,\n\t\tisPressed,\n\t\t'aria-disabled': ariaDisabled,\n\t\t'data-subscript': subscript,\n\t\ttestID,\n\t\ticon,\n\t\ticonSize,\n\t\tshowTooltip,\n\t\tlabel,\n\t\tshortcut,\n\t\ttooltipPosition,\n\t\tisActiveStyle,\n\t\tcustomContainerStyles,\n\t} = props;\n\tconst preferredColorScheme = usePreferredColorScheme();\n\n\tconst isDisabled = ariaDisabled \|\| disabled;\n\n\tconst containerStyle = [\n\t\tstyles.container,\n\t\tcustomContainerStyles && { ...customContainerStyles },\n\t];\n\n\tconst buttonViewStyle = {\n\t\topacity: isDisabled ? 0.3 : 1,\n\t\t...( fixedRatio && styles.fixedRatio ),\n\t\t...( isPressed ? styles.buttonActive : styles.buttonInactive ),\n\t\t...( isPressed &&\n\t\t\tisActiveStyle?.borderRadius && {\n\t\t\t\tborderRadius: isActiveStyle.borderRadius,\n\t\t\t} ),\n\t\t...( isActiveStyle?.backgroundColor && {\n\t\t\tbackgroundColor: isActiveStyle.backgroundColor,\n\t\t} ),\n\t};\n\n\tconst states = [];\n\tif ( isPressed ) {\n\t\tstates.push( 'selected' );\n\t}\n\n\tif ( isDisabled ) {\n\t\tstates.push( 'disabled' );\n\t}\n\n\tconst subscriptInactive = usePreferredColorSchemeStyle(\n\t\tstyles.subscriptInactive,\n\t\tstyles.subscriptInactiveDark\n\t);\n\n\tconst newChildren = Children.map( children, ( child ) => {\n\t\treturn child\n\t\t\t? cloneElement( child, {\n\t\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\t\tisPressed,\n\t\t\t } )\n\t\t\t: child;\n\t} );\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! isDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && label ) \|\|\n\t\t\t// There's a shortcut or...\n\t\t\tshortcut \|\|\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t( ! children \|\|\n\t\t\t\t\t( isArray( children ) && ! children.length ) ) &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst newIcon = icon\n\t\t? cloneElement( <Icon icon={ icon } size={ iconSize } />, {\n\t\t\t\tcolorScheme: preferredColorScheme,\n\t\t\t\tisPressed,\n\t\t } )\n\t\t: null;\n\n\tconst element = (\n\t\t<TouchableOpacity\n\t\t\tactiveOpacity={ 0.7 }\n\t\t\taccessible={ true }\n\t\t\taccessibilityLabel={ label }\n\t\t\taccessibilityStates={ states }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={ hint }\n\t\t\tonPress={ onClick }\n\t\t\tonLongPress={ onLongPress }\n\t\t\tstyle={ containerStyle }\n\t\t\tdisabled={ isDisabled }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t<View style={ buttonViewStyle }>\n\t\t\t\t<View style={ { flexDirection: 'row' } }>\n\t\t\t\t\t{ newIcon }\n\t\t\t\t\t{ newChildren }\n\t\t\t\t\t{ subscript && (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tisPressed\n\t\t\t\t\t\t\t\t\t? styles.subscriptActive\n\t\t\t\t\t\t\t\t\t: subscriptInactive\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subscript }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t</TouchableOpacity>\n\t);\n\n\tif ( ! shouldShowTooltip ) {\n\t\treturn element;\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\ttext={ label }\n\t\t\tshortcut={ shortcut }\n\t\t\tposition={ tooltipPosition }\n\t\t\tvisible={ showTooltip === true }\n\t\t>\n\t\t\t{ element }\n\t\t</Tooltip>\n\t);\n}\n\nexport default Button;\n"]}

package/build-module/card/card/component.js CHANGED Viewed

@@ -23,7 +23,7 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                            forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
 function Card(props, forwardedRef) {
@@ -39,7 +39,7 @@ function Card(props, forwardedRef) {
   const cx = useCx();
   const elevationClassName = useMemo(() => cx( /*#__PURE__*/css({
     borderRadius: elevationBorderRadius
-  }, process.env.NODE_ENV === "production" ? "" : ";label:elevationClassName;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY2FyZC9jYXJkL2NvbXBvbmVudC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jYXJkL2NhcmQvY29tcG9uZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNvbnRleHRDb25uZWN0LCBDb250ZXh0U3lzdGVtUHJvdmlkZXIgfSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gJy4uLy4uL2VsZXZhdGlvbic7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgKiBhcyBzdHlsZXMgZnJvbSAnLi4vc3R5bGVzJztcbmltcG9ydCB7IHVzZUNhcmQgfSBmcm9tICcuL2hvb2snO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcblxuLyoqXG4gKiBAcGFyYW0ge2ltcG9ydCgnLi4vLi4vdWkvY29udGV4dCcpLldvcmRQcmVzc0NvbXBvbmVudFByb3BzPGltcG9ydCgnLi4vdHlwZXMnKS5Qcm9wcywgJ2Rpdic+fSBwcm9wc1xuICogQHBhcmFtIHtpbXBvcnQoJ3JlYWN0JykuUmVmPGFueT59ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9yd2FyZGVkUmVmXG4gKi9cbmZ1bmN0aW9uIENhcmQoIHByb3BzLCBmb3J3YXJkZWRSZWYgKSB7XG5cdGNvbnN0IHtcblx0XHRjaGlsZHJlbixcblx0XHRlbGV2YXRpb24sXG5cdFx0aXNCb3JkZXJsZXNzLFxuXHRcdGlzUm91bmRlZCxcblx0XHRzaXplLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNhcmQoIHByb3BzICk7XG5cdGNvbnN0IGVsZXZhdGlvbkJvcmRlclJhZGl1cyA9IGlzUm91bmRlZCA/IENPTkZJRy5jYXJkQm9yZGVyUmFkaXVzIDogMDtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgZWxldmF0aW9uQ2xhc3NOYW1lID0gdXNlTWVtbyhcblx0XHQoKSA9PiBjeCggY3NzKCB7IGJvcmRlclJhZGl1czogZWxldmF0aW9uQm9yZGVyUmFkaXVzIH0gKSApLFxuXHRcdFsgY3gsIGVsZXZhdGlvbkJvcmRlclJhZGl1cyBdXG5cdCk7XG5cblx0Y29uc3QgY29udGV4dFByb3ZpZGVyVmFsdWUgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgY29udGV4dFByb3BzID0ge1xuXHRcdFx0c2l6ZSxcblx0XHRcdGlzQm9yZGVybGVzcyxcblx0XHR9O1xuXHRcdHJldHVybiB7XG5cdFx0XHRDYXJkQm9keTogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEhlYWRlcjogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEZvb3RlcjogY29udGV4dFByb3BzLFxuXHRcdH07XG5cdH0sIFsgaXNCb3JkZXJsZXNzLCBzaXplIF0gKTtcblxuXHRyZXR1cm4gKFxuXHRcdDxDb250ZXh0U3lzdGVtUHJvdmlkZXIgdmFsdWU9eyBjb250ZXh0UHJvdmlkZXJWYWx1ZSB9PlxuXHRcdFx0PFZpZXcgeyAuLi5vdGhlclByb3BzIH0gcmVmPXsgZm9yd2FyZGVkUmVmIH0+XG5cdFx0XHRcdDxWaWV3IGNsYXNzTmFtZT17IGN4KCBzdHlsZXMuQ29udGVudCApIH0+eyBjaGlsZHJlbiB9PC9WaWV3PlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uID8gMSA6IDAgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uIH1cblx0XHRcdFx0Lz5cblx0XHRcdDwvVmlldz5cblx0XHQ8L0NvbnRleHRTeXN0ZW1Qcm92aWRlcj5cblx0KTtcbn1cblxuLyoqXG4gKiBgQ2FyZGAgcHJvdmlkZXMgYSBmbGV4aWJsZSBhbmQgZXh0ZW5zaWJsZSBjb250ZW50IGNvbnRhaW5lci5cbiAqIGBDYXJkYCBhbHNvIHByb3ZpZGVzIGEgY29udmVuaWVudCBzZXQgb2Ygc3ViLWNvbXBvbmVudHMgc3VjaCBhcyBgQ2FyZEJvZHlgLFxuICogYENhcmRIZWFkZXJgLCBgQ2FyZEZvb3RlcmAsIGFuZCBtb3JlLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7XG4gKiAgIENhcmQsXG4gKiAgIENhcmRIZWFkZXIsXG4gKiAgIENhcmRCb2R5LFxuICogICBDYXJkRm9vdGVyLFxuICogICBUZXh0LFxuICogICBIZWFkaW5nLFxuICogfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiAgIHJldHVybiAoXG4gKiAgICAgPENhcmQ+XG4gKiAgICAgICA8Q2FyZEhlYWRlcj5cbiAqICAgICAgICAgPEhlYWRpbmcgc2l6ZT17IDQgfT5DYXJkIFRpdGxlPC9IZWFkaW5nPlxuICogICAgICAgPC9DYXJkSGVhZGVyPlxuICogICAgICAgPENhcmRCb2R5PlxuICogICAgICAgICA8VGV4dD5DYXJkIENvbnRlbnQ8L1RleHQ+XG4gKiAgICAgICA8L0NhcmRCb2R5PlxuICogICAgICAgPENhcmRGb290ZXI+XG4gKiAgICAgICAgIDxUZXh0PkNhcmQgRm9vdGVyPC9UZXh0PlxuICogICAgICAgPC9DYXJkRm9vdGVyPlxuICogICAgIDwvQ2FyZD5cbiAqICAgKTtcbiAqIH1cbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWRDYXJkID0gY29udGV4dENvbm5lY3QoIENhcmQsICdDYXJkJyApO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWRDYXJkO1xuIl19 */")), [cx, elevationBorderRadius]);
+  }, process.env.NODE_ENV === "production" ? "" : ";label:elevationClassName;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY2FyZC9jYXJkL2NvbXBvbmVudC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jYXJkL2NhcmQvY29tcG9uZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNvbnRleHRDb25uZWN0LCBDb250ZXh0U3lzdGVtUHJvdmlkZXIgfSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gJy4uLy4uL2VsZXZhdGlvbic7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgKiBhcyBzdHlsZXMgZnJvbSAnLi4vc3R5bGVzJztcbmltcG9ydCB7IHVzZUNhcmQgfSBmcm9tICcuL2hvb2snO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcblxuLyoqXG4gKiBAcGFyYW0ge2ltcG9ydCgnLi4vLi4vdWkvY29udGV4dCcpLldvcmRQcmVzc0NvbXBvbmVudFByb3BzPGltcG9ydCgnLi4vdHlwZXMnKS5Qcm9wcywgJ2Rpdic+fSBwcm9wc1xuICogQHBhcmFtIHtpbXBvcnQoJ3JlYWN0JykuRm9yd2FyZGVkUmVmPGFueT59ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9yd2FyZGVkUmVmXG4gKi9cbmZ1bmN0aW9uIENhcmQoIHByb3BzLCBmb3J3YXJkZWRSZWYgKSB7XG5cdGNvbnN0IHtcblx0XHRjaGlsZHJlbixcblx0XHRlbGV2YXRpb24sXG5cdFx0aXNCb3JkZXJsZXNzLFxuXHRcdGlzUm91bmRlZCxcblx0XHRzaXplLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNhcmQoIHByb3BzICk7XG5cdGNvbnN0IGVsZXZhdGlvbkJvcmRlclJhZGl1cyA9IGlzUm91bmRlZCA/IENPTkZJRy5jYXJkQm9yZGVyUmFkaXVzIDogMDtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgZWxldmF0aW9uQ2xhc3NOYW1lID0gdXNlTWVtbyhcblx0XHQoKSA9PiBjeCggY3NzKCB7IGJvcmRlclJhZGl1czogZWxldmF0aW9uQm9yZGVyUmFkaXVzIH0gKSApLFxuXHRcdFsgY3gsIGVsZXZhdGlvbkJvcmRlclJhZGl1cyBdXG5cdCk7XG5cblx0Y29uc3QgY29udGV4dFByb3ZpZGVyVmFsdWUgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgY29udGV4dFByb3BzID0ge1xuXHRcdFx0c2l6ZSxcblx0XHRcdGlzQm9yZGVybGVzcyxcblx0XHR9O1xuXHRcdHJldHVybiB7XG5cdFx0XHRDYXJkQm9keTogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEhlYWRlcjogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEZvb3RlcjogY29udGV4dFByb3BzLFxuXHRcdH07XG5cdH0sIFsgaXNCb3JkZXJsZXNzLCBzaXplIF0gKTtcblxuXHRyZXR1cm4gKFxuXHRcdDxDb250ZXh0U3lzdGVtUHJvdmlkZXIgdmFsdWU9eyBjb250ZXh0UHJvdmlkZXJWYWx1ZSB9PlxuXHRcdFx0PFZpZXcgeyAuLi5vdGhlclByb3BzIH0gcmVmPXsgZm9yd2FyZGVkUmVmIH0+XG5cdFx0XHRcdDxWaWV3IGNsYXNzTmFtZT17IGN4KCBzdHlsZXMuQ29udGVudCApIH0+eyBjaGlsZHJlbiB9PC9WaWV3PlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uID8gMSA6IDAgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uIH1cblx0XHRcdFx0Lz5cblx0XHRcdDwvVmlldz5cblx0XHQ8L0NvbnRleHRTeXN0ZW1Qcm92aWRlcj5cblx0KTtcbn1cblxuLyoqXG4gKiBgQ2FyZGAgcHJvdmlkZXMgYSBmbGV4aWJsZSBhbmQgZXh0ZW5zaWJsZSBjb250ZW50IGNvbnRhaW5lci5cbiAqIGBDYXJkYCBhbHNvIHByb3ZpZGVzIGEgY29udmVuaWVudCBzZXQgb2Ygc3ViLWNvbXBvbmVudHMgc3VjaCBhcyBgQ2FyZEJvZHlgLFxuICogYENhcmRIZWFkZXJgLCBgQ2FyZEZvb3RlcmAsIGFuZCBtb3JlLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7XG4gKiAgIENhcmQsXG4gKiAgIENhcmRIZWFkZXIsXG4gKiAgIENhcmRCb2R5LFxuICogICBDYXJkRm9vdGVyLFxuICogICBUZXh0LFxuICogICBIZWFkaW5nLFxuICogfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiAgIHJldHVybiAoXG4gKiAgICAgPENhcmQ+XG4gKiAgICAgICA8Q2FyZEhlYWRlcj5cbiAqICAgICAgICAgPEhlYWRpbmcgc2l6ZT17IDQgfT5DYXJkIFRpdGxlPC9IZWFkaW5nPlxuICogICAgICAgPC9DYXJkSGVhZGVyPlxuICogICAgICAgPENhcmRCb2R5PlxuICogICAgICAgICA8VGV4dD5DYXJkIENvbnRlbnQ8L1RleHQ+XG4gKiAgICAgICA8L0NhcmRCb2R5PlxuICogICAgICAgPENhcmRGb290ZXI+XG4gKiAgICAgICAgIDxUZXh0PkNhcmQgRm9vdGVyPC9UZXh0PlxuICogICAgICAgPC9DYXJkRm9vdGVyPlxuICogICAgIDwvQ2FyZD5cbiAqICAgKTtcbiAqIH1cbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWRDYXJkID0gY29udGV4dENvbm5lY3QoIENhcmQsICdDYXJkJyApO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWRDYXJkO1xuIl19 */")), [cx, elevationBorderRadius]);
   const contextProviderValue = useMemo(() => {
     const contextProps = {
       size,

package/build-module/card/card/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card/component.js"],"names":["css","useMemo","contextConnect","ContextSystemProvider","Elevation","View","styles","useCard","CONFIG","useCx","Card","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","cardBorderRadius","cx","elevationClassName","borderRadius","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","Content","ConnectedCard"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,qBAAzB,QAAsD,kBAAtD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;AACA;;AACA,SAASC,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,IALK;AAML,OAAGC;AANE,MAOFX,OAAO,CAAEI,KAAF,CAPX;AAQA,QAAMQ,qBAAqB,GAAGH,SAAS,GAAGR,MAAM,CAACY,gBAAV,GAA6B,CAApE;AAEA,QAAMC,EAAE,GAAGZ,KAAK,EAAhB;AAEA,QAAMa,kBAAkB,GAAGrB,OAAO,CACjC,MAAMoB,EAAE,eAAErB,GAAG,CAAE;AAAEuB,IAAAA,YAAY,EAAEJ;AAAhB,GAAF,olIAAL,CADyB,EAEjC,CAAEE,EAAF,EAAMF,qBAAN,CAFiC,CAAlC;AAKA,QAAMK,oBAAoB,GAAGvB,OAAO,CAAE,MAAM;AAC3C,UAAMwB,YAAY,GAAG;AACpBR,MAAAA,IADoB;AAEpBF,MAAAA;AAFoB,KAArB;AAIA,WAAO;AACNW,MAAAA,QAAQ,EAAED,YADJ;AAENE,MAAAA,UAAU,EAAEF,YAFN;AAGNG,MAAAA,UAAU,EAAEH;AAHN,KAAP;AAKA,GAVmC,EAUjC,CAAEV,YAAF,EAAgBE,IAAhB,CAViC,CAApC;AAYA,SACC,cAAC,qBAAD;AAAuB,IAAA,KAAK,EAAGO;AAA/B,KACC,cAAC,IAAD,eAAWN,UAAX;AAAwB,IAAA,GAAG,EAAGN;AAA9B,MACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGS,EAAE,CAAEf,MAAM,CAACuB,OAAT;AAApB,KAA2ChB,QAA3C,CADD,EAEC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGS,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGR,SAAS,GAAG,CAAH,GAAO;AAHzB,IAFD,EAOC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGQ,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGR;AAHT,IAPD,CADD,CADD;AAiBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMgB,aAAa,GAAG5B,cAAc,CAAEQ,IAAF,EAAQ,MAAR,CAApC;AAEA,eAAeoB,aAAf","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { contextConnect, ContextSystemProvider } from '../../ui/context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/*\n @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction Card( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/\n `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n \n @example\n * ```jsx\n * import {\n * Card,\n * CardHeader,\n * CardBody,\n * CardFooter,\n * Text,\n * Heading,\n * } from `@wordpress/components`;\n \n function Example() {\n * return (\n * <Card>\n * <CardHeader>\n * <Heading size={ 4 }>Card Title</Heading>\n * </CardHeader>\n * <CardBody>\n * <Text>Card Content</Text>\n * </CardBody>\n * <CardFooter>\n * <Text>Card Footer</Text>\n * </CardFooter>\n * </Card>\n * );\n * }\n * ```\n */\nconst ConnectedCard = contextConnect( Card, 'Card' );\n\nexport default ConnectedCard;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card/component.js"],"names":["css","useMemo","contextConnect","ContextSystemProvider","Elevation","View","styles","useCard","CONFIG","useCx","Card","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","cardBorderRadius","cx","elevationClassName","borderRadius","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","Content","ConnectedCard"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,qBAAzB,QAAsD,kBAAtD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;AACA;;AACA,SAASC,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,IALK;AAML,OAAGC;AANE,MAOFX,OAAO,CAAEI,KAAF,CAPX;AAQA,QAAMQ,qBAAqB,GAAGH,SAAS,GAAGR,MAAM,CAACY,gBAAV,GAA6B,CAApE;AAEA,QAAMC,EAAE,GAAGZ,KAAK,EAAhB;AAEA,QAAMa,kBAAkB,GAAGrB,OAAO,CACjC,MAAMoB,EAAE,eAAErB,GAAG,CAAE;AAAEuB,IAAAA,YAAY,EAAEJ;AAAhB,GAAF,olIAAL,CADyB,EAEjC,CAAEE,EAAF,EAAMF,qBAAN,CAFiC,CAAlC;AAKA,QAAMK,oBAAoB,GAAGvB,OAAO,CAAE,MAAM;AAC3C,UAAMwB,YAAY,GAAG;AACpBR,MAAAA,IADoB;AAEpBF,MAAAA;AAFoB,KAArB;AAIA,WAAO;AACNW,MAAAA,QAAQ,EAAED,YADJ;AAENE,MAAAA,UAAU,EAAEF,YAFN;AAGNG,MAAAA,UAAU,EAAEH;AAHN,KAAP;AAKA,GAVmC,EAUjC,CAAEV,YAAF,EAAgBE,IAAhB,CAViC,CAApC;AAYA,SACC,cAAC,qBAAD;AAAuB,IAAA,KAAK,EAAGO;AAA/B,KACC,cAAC,IAAD,eAAWN,UAAX;AAAwB,IAAA,GAAG,EAAGN;AAA9B,MACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGS,EAAE,CAAEf,MAAM,CAACuB,OAAT;AAApB,KAA2ChB,QAA3C,CADD,EAEC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGS,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGR,SAAS,GAAG,CAAH,GAAO;AAHzB,IAFD,EAOC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGQ,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGR;AAHT,IAPD,CADD,CADD;AAiBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMgB,aAAa,GAAG5B,cAAc,CAAEQ,IAAF,EAAQ,MAAR,CAApC;AAEA,eAAeoB,aAAf","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { contextConnect, ContextSystemProvider } from '../../ui/context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/*\n @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction Card( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/\n `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n \n @example\n * ```jsx\n * import {\n * Card,\n * CardHeader,\n * CardBody,\n * CardFooter,\n * Text,\n * Heading,\n * } from `@wordpress/components`;\n \n function Example() {\n * return (\n * <Card>\n * <CardHeader>\n * <Heading size={ 4 }>Card Title</Heading>\n * </CardHeader>\n * <CardBody>\n * <Text>Card Content</Text>\n * </CardBody>\n * <CardFooter>\n * <Text>Card Footer</Text>\n * </CardFooter>\n * </Card>\n * );\n * }\n * ```\n */\nconst ConnectedCard = contextConnect( Card, 'Card' );\n\nexport default ConnectedCard;\n"]}

package/build-module/card/card-body/component.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function CardBody(props, forwardedRef) {

package/build-module/card/card-body/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card-body/component.js"],"names":["contextConnect","Scrollable","View","useCardBody","CardBody","props","forwardedRef","isScrollable","otherProps","ConnectedCardBody"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAM;AAAEC,IAAAA,YAAF;AAAgB,OAAGC;AAAnB,MAAkCL,WAAW,CAAEE,KAAF,CAAnD;;AAEA,MAAKE,YAAL,EAAoB;AACnB,WAAO,cAAC,UAAD,eAAiBC,UAAjB;AAA8B,MAAA,GAAG,EAAGF;AAApC,OAAP;AACA;;AAED,SAAO,cAAC,IAAD,eAAWE,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,iBAAiB,GAAGT,cAAc,CAAEI,QAAF,EAAY,UAAZ,CAAxC;AAEA,eAAeK,iBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction CardBody( props, forwardedRef ) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/\n `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n \n @example\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n \n <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardBody = contextConnect( CardBody, 'CardBody' );\n\nexport default ConnectedCardBody;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card-body/component.js"],"names":["contextConnect","Scrollable","View","useCardBody","CardBody","props","forwardedRef","isScrollable","otherProps","ConnectedCardBody"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAM;AAAEC,IAAAA,YAAF;AAAgB,OAAGC;AAAnB,MAAkCL,WAAW,CAAEE,KAAF,CAAnD;;AAEA,MAAKE,YAAL,EAAoB;AACnB,WAAO,cAAC,UAAD,eAAiBC,UAAjB;AAA8B,MAAA,GAAG,EAAGF;AAApC,OAAP;AACA;;AAED,SAAO,cAAC,IAAD,eAAWE,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,iBAAiB,GAAGT,cAAc,CAAEI,QAAF,EAAY,UAAZ,CAAxC;AAEA,eAAeK,iBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction CardBody( props, forwardedRef ) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/\n `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n \n @example\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n \n <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardBody = contextConnect( CardBody, 'CardBody' );\n\nexport default ConnectedCardBody;\n"]}

package/build-module/card/card-divider/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').Ref<any>}                                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
  */
 function CardDivider(props, forwardedRef) {

package/build-module/card/card-divider/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card-divider/component.js"],"names":["contextConnect","Divider","useCardDivider","CardDivider","props","forwardedRef","dividerProps","ConnectedCardDivider"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,cAAT,QAA+B,QAA/B;AAEA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA4C;AAC3C,QAAMC,YAAY,GAAGJ,cAAc,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,OAAD,eAAcE,YAAd;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,oBAAoB,GAAGP,cAAc,CAAEG,WAAF,EAAe,aAAf,CAA3C;AAEA,eAAeI,oBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction CardDivider( props, forwardedRef ) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n \n <Card>\n * <CardBody>...</CardBody>\n * <CardDivider />\n * <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );\n\nexport default ConnectedCardDivider;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card-divider/component.js"],"names":["contextConnect","Divider","useCardDivider","CardDivider","props","forwardedRef","dividerProps","ConnectedCardDivider"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,cAAT,QAA+B,QAA/B;AAEA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA4C;AAC3C,QAAMC,YAAY,GAAGJ,cAAc,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,OAAD,eAAcE,YAAd;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,oBAAoB,GAAGP,cAAc,CAAEG,WAAF,EAAe,aAAf,CAA3C;AAEA,eAAeI,oBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction CardDivider( props, forwardedRef ) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n \n <Card>\n * <CardBody>...</CardBody>\n * <CardDivider />\n * <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );\n\nexport default ConnectedCardDivider;\n"]}

package/build-module/card/card-footer/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardFooter(props, forwardedRef) {

package/build-module/card/card-footer/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card-footer/component.js"],"names":["contextConnect","Flex","useCardFooter","CardFooter","props","forwardedRef","footerProps","ConnectedCardFooter"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,aAAT,QAA8B,QAA9B;AAEA;AACA;AACA;AACA;;AACA,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAGP,cAAc,CAAEG,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeI,mBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction CardFooter( props, forwardedRef ) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardFooter` renders an optional footer within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n \n <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nconst ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );\n\nexport default ConnectedCardFooter;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card-footer/component.js"],"names":["contextConnect","Flex","useCardFooter","CardFooter","props","forwardedRef","footerProps","ConnectedCardFooter"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,aAAT,QAA8B,QAA9B;AAEA;AACA;AACA;AACA;;AACA,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAGP,cAAc,CAAEG,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeI,mBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction CardFooter( props, forwardedRef ) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardFooter` renders an optional footer within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n \n <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nconst ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );\n\nexport default ConnectedCardFooter;\n"]}

package/build-module/card/card-header/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardHeader(props, forwardedRef) {

package/build-module/card/card-header/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card-header/component.js"],"names":["contextConnect","Flex","useCardHeader","CardHeader","props","forwardedRef","headerProps","ConnectedCardHeader"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,aAAT,QAA8B,QAA9B;AAEA;AACA;AACA;AACA;;AACA,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAGP,cAAc,CAAEG,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeI,mBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction CardHeader( props, forwardedRef ) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardHeader` renders an optional header within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n \n <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );\n\nexport default ConnectedCardHeader;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card-header/component.js"],"names":["contextConnect","Flex","useCardHeader","CardHeader","props","forwardedRef","headerProps","ConnectedCardHeader"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,aAAT,QAA8B,QAA9B;AAEA;AACA;AACA;AACA;;AACA,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAGJ,aAAa,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAGP,cAAc,CAAEG,UAAF,EAAc,YAAd,CAA1C;AAEA,eAAeI,mBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction CardHeader( props, forwardedRef ) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/\n `CardHeader` renders an optional header within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n \n <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );\n\nexport default ConnectedCardHeader;\n"]}

package/build-module/card/card-media/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { View } from '../../view';
 import { useCardMedia } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                           forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
  */
 function CardMedia(props, forwardedRef) {

package/build-module/card/card-media/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/card/card-media/component.js"],"names":["contextConnect","View","useCardMedia","CardMedia","props","forwardedRef","cardMediaProps","ConnectedCardMedia"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction CardMedia( props, forwardedRef ) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/\n `CardMedia` provides a container for media elements within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n \n const Example = () => (\n * <Card>\n \t <CardMedia>\n \t\t <img src=\"...\" />\n * </CardMedia>\n * <CardBody>...</CardBody>\n * </Card>\n * );\n * ```\n */\nconst ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );\n\nexport default ConnectedCardMedia;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/card/card-media/component.js"],"names":["contextConnect","View","useCardMedia","CardMedia","props","forwardedRef","cardMediaProps","ConnectedCardMedia"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction CardMedia( props, forwardedRef ) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/\n `CardMedia` provides a container for media elements within a `Card`.\n \n @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n \n const Example = () => (\n * <Card>\n \t <CardMedia>\n \t\t <img src=\"...\" />\n * </CardMedia>\n * <CardBody>...</CardBody>\n * </Card>\n * );\n * ```\n */\nconst ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );\n\nexport default ConnectedCardMedia;\n"]}

package/build-module/color-palette/index.native.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
@@ -26,6 +26,7 @@ let customIndicatorWidth = 0;
 function ColorPalette(_ref) {
   let {
+    enableCustomColor = true,
     setColor,
     activeColor,
     isGradientColor,
@@ -37,7 +38,8 @@ function ColorPalette(_ref) {
     shouldShowCustomLabel = true,
     shouldShowCustomVerticalSeparator = true,
     customColorIndicatorStyles,
-    customIndicatorWrapperStyles
+    customIndicatorWrapperStyles,
+    label
   } = _ref;
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = useRef();
@@ -46,11 +48,12 @@ function ColorPalette(_ref) {
   const scale = useRef(new Animated.Value(1)).current;
   const opacity = useRef(new Animated.Value(1)).current;
   const defaultColors = uniq(map(defaultSettings.colors, 'color'));
+  const mergedColors = uniq(map(defaultSettings.allColors, 'color'));
   const defaultGradientColors = uniq(map(defaultSettings.gradients, 'gradient'));
   const colors = isGradientSegment ? defaultGradientColors : defaultColors;
   const customIndicatorColor = isGradientSegment ? activeColor : customSwatchGradients;
   const isCustomGradientColor = isGradientColor && isSelectedCustom();
-  const shouldShowCustomIndicator = shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
+  const shouldShowCustomIndicator = enableCustomColor && shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
   const accessibilityHint = isGradientSegment ? __('Navigates to customize the gradient') : __('Navigates to custom color picker');
   const customText = __('Custom');
@@ -69,9 +72,9 @@ function ColorPalette(_ref) {
   }, [currentSegment]);
   function isSelectedCustom() {
-    const isWithinColors = activeColor && colors && colors.includes(activeColor);
+    const isWithinColors = activeColor && mergedColors && mergedColors.includes(activeColor);
-    if (activeColor) {
+    if (enableCustomColor && activeColor) {
       if (isGradientSegment) {
         return isGradientColor && !isWithinColors;
       }
@@ -177,9 +180,11 @@ function ColorPalette(_ref) {
   const verticalSeparatorStyle = usePreferredColorSchemeStyle(styles.verticalSeparator, styles.verticalSeparatorDark);
   const customTextStyle = usePreferredColorSchemeStyle([styles.customText, !isIOS && styles.customTextAndroid], styles.customTextDark);
   const customIndicatorWrapperStyle = [styles.customIndicatorWrapper, customIndicatorWrapperStyles];
-  return createElement(ScrollView, {
+  return createElement(Fragment, null, label && createElement(Text, {
+    accessibilityRole: "header",
+    style: styles.headerText
+  }, label), createElement(ScrollView, {
     contentContainerStyle: styles.contentContainer,
-    style: styles.container,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     keyboardShouldPersistTaps: "always",
@@ -190,29 +195,8 @@ function ColorPalette(_ref) {
     onScrollBeginDrag: () => shouldEnableBottomSheetScroll(false),
     onScrollEndDrag: () => shouldEnableBottomSheetScroll(true),
     ref: scrollViewRef,
-    testID: "color-palette"
-  }, shouldShowCustomIndicator && createElement(View, {
-    style: customIndicatorWrapperStyle,
-    onLayout: onCustomIndicatorLayout
-  }, shouldShowCustomVerticalSeparator && createElement(View, {
-    style: verticalSeparatorStyle
-  }), createElement(TouchableWithoutFeedback, {
-    onPress: onCustomPress,
-    accessibilityRole: 'button',
-    accessibilityState: {
-      selected: isSelectedCustom()
-    },
-    accessibilityHint: accessibilityHint
-  }, createElement(View, {
-    style: customIndicatorWrapperStyle
-  }, createElement(ColorIndicator, {
-    withCustomPicker: !isGradientSegment,
-    color: customIndicatorColor,
-    isSelected: isSelectedCustom(),
-    style: [styles.colorIndicator, customColorIndicatorStyles]
-  }), shouldShowCustomLabel && createElement(Text, {
-    style: customTextStyle
-  }, isIOS ? customText : customText.toUpperCase())))), colors.map(color => {
+    testID: `color-palette${label ? '-' + label : ''}`
+  }, colors.map(color => {
     const scaleValue = isSelected(color) ? scaleInterpolation : 1;
     return createElement(View, {
       key: `${color}-${isSelected(color)}`
@@ -236,7 +220,28 @@ function ColorPalette(_ref) {
       opacity: opacity,
       style: [styles.colorIndicator, customColorIndicatorStyles]
     }))));
-  }));
+  }), shouldShowCustomIndicator && createElement(View, {
+    style: customIndicatorWrapperStyle,
+    onLayout: onCustomIndicatorLayout
+  }, shouldShowCustomVerticalSeparator && createElement(View, {
+    style: verticalSeparatorStyle
+  }), createElement(TouchableWithoutFeedback, {
+    onPress: onCustomPress,
+    accessibilityRole: 'button',
+    accessibilityState: {
+      selected: isSelectedCustom()
+    },
+    accessibilityHint: accessibilityHint
+  }, createElement(View, {
+    style: customIndicatorWrapperStyle
+  }, createElement(ColorIndicator, {
+    withCustomPicker: !isGradientSegment,
+    color: customIndicatorColor,
+    isSelected: isSelectedCustom(),
+    style: [styles.colorIndicator, customColorIndicatorStyles]
+  }), shouldShowCustomLabel && createElement(Text, {
+    style: customTextStyle
+  }, isIOS ? customText : customText.toUpperCase()))))));
 }
 export default ColorPalette;

package/build-module/color-palette/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","scaleValue","transform"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment \|\| isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t\ttestID=\"color-palette\"\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment \|\| isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build-module/color-picker/color-display.js CHANGED Viewed

@@ -147,7 +147,7 @@ export const ColorDisplay = _ref6 => {
     }, 3000);
   });
   useEffect(() => {
-    // clear copyTimer on component unmount.
+    // Clear copyTimer on component unmount.
     return () => {
       if (copyTimer.current) {
         clearTimeout(copyTimer.current);

package/build-module/color-picker/color-display.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { Colord } from 'colord';\n\n/\n WordPress dependencies\n /\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string \| null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > \| undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// ~~clear~~ copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { Colord } from 'colord';\n\n/\n WordPress dependencies\n /\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string \| null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > \| undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}

package/build-module/color-picker/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ~~Ref~~ } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ~~Ref~~< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color \|\| '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat \|\| 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat \|\| colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color \|\| '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat \|\| 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat \|\| colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build-module/color-picker/hex-input.js CHANGED Viewed

@@ -25,10 +25,10 @@ export const HexInput = _ref => {
     enableAlpha
   } = _ref;
-  const handleValidate = value => {
-    if (!colord('#' + value).isValid()) {
-      throw new Error('Invalid hex color input');
-    }
+  const handleChange = nextValue => {
+    if (!nextValue) return;
+    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
+    onChange(colord(hexValue));
   };
   return createElement(ColorHexInputControl, {
@@ -39,11 +39,8 @@ export const HexInput = _ref => {
       lineHeight: 1
     }, "#"),
     value: color.toHex().slice(1).toUpperCase(),
-    onChange: nextValue => {
-      onChange(colord('#' + nextValue));
-    },
-    onValidate: handleValidate,
-    maxLength: enableAlpha ? 8 : 6,
+    onChange: handleChange,
+    maxLength: enableAlpha ? 9 : 7,
     label: __('Hex color'),
     hideLabelFromVision: true
   });