@wordpress/components 23.0.0 → 23.1.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.
- package/CHANGELOG.md +10 -0
- package/CONTRIBUTING.md +0 -21
- package/build/autocomplete/index.js +1 -3
- package/build/autocomplete/index.js.map +1 -1
- package/build/border-box-control/border-box-control/component.js +0 -3
- package/build/border-box-control/border-box-control/component.js.map +1 -1
- package/build/border-box-control/border-box-control/hook.js +0 -2
- package/build/border-box-control/border-box-control/hook.js.map +1 -1
- package/build/border-box-control/border-box-control-split-controls/component.js +0 -2
- package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build/border-box-control/border-box-control-split-controls/hook.js +0 -2
- package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
- package/build/border-control/border-control/component.js +0 -2
- package/build/border-control/border-control/component.js.map +1 -1
- package/build/border-control/border-control/hook.js +0 -2
- package/build/border-control/border-control/hook.js.map +1 -1
- package/build/border-control/border-control-dropdown/component.js +6 -11
- package/build/border-control/border-control-dropdown/component.js.map +1 -1
- package/build/border-control/border-control-dropdown/hook.js +0 -2
- package/build/border-control/border-control-dropdown/hook.js.map +1 -1
- package/build/color-palette/index.js +5 -8
- package/build/color-palette/index.js.map +1 -1
- package/build/dimension-control/index.js.map +1 -1
- package/build/dropdown/index.js +45 -10
- package/build/dropdown/index.js.map +1 -1
- package/build/gradient-picker/index.js +1 -2
- package/build/gradient-picker/index.js.map +1 -1
- package/build/higher-order/navigate-regions/index.js +4 -3
- package/build/higher-order/navigate-regions/index.js.map +1 -1
- package/build/index.js +0 -8
- package/build/index.js.map +1 -1
- package/build/mobile/bottom-sheet/picker-cell.native.js +1 -9
- package/build/mobile/bottom-sheet/picker-cell.native.js.map +1 -1
- package/build/mobile/global-styles-context/utils.native.js +30 -12
- package/build/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build/tab-panel/index.js +5 -4
- package/build/tab-panel/index.js.map +1 -1
- package/build-module/autocomplete/index.js +1 -2
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/border-box-control/border-box-control/component.js +0 -3
- package/build-module/border-box-control/border-box-control/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control/hook.js +0 -2
- package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/component.js +0 -2
- package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
- package/build-module/border-box-control/border-box-control-split-controls/hook.js +0 -2
- package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
- package/build-module/border-control/border-control/component.js +0 -2
- package/build-module/border-control/border-control/component.js.map +1 -1
- package/build-module/border-control/border-control/hook.js +0 -2
- package/build-module/border-control/border-control/hook.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/component.js +6 -11
- package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
- package/build-module/border-control/border-control-dropdown/hook.js +0 -2
- package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
- package/build-module/color-palette/index.js +5 -8
- package/build-module/color-palette/index.js.map +1 -1
- package/build-module/dimension-control/index.js +1 -2
- package/build-module/dimension-control/index.js.map +1 -1
- package/build-module/dropdown/index.js +44 -10
- package/build-module/dropdown/index.js.map +1 -1
- package/build-module/gradient-picker/index.js +1 -2
- package/build-module/gradient-picker/index.js.map +1 -1
- package/build-module/higher-order/navigate-regions/index.js +4 -3
- package/build-module/higher-order/navigate-regions/index.js.map +1 -1
- package/build-module/index.js +0 -1
- package/build-module/index.js.map +1 -1
- package/build-module/mobile/bottom-sheet/picker-cell.native.js +1 -8
- package/build-module/mobile/bottom-sheet/picker-cell.native.js.map +1 -1
- package/build-module/mobile/global-styles-context/utils.native.js +31 -13
- package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
- package/build-module/tab-panel/index.js +5 -3
- package/build-module/tab-panel/index.js.map +1 -1
- package/build-style/style-rtl.css +18 -31
- package/build-style/style.css +18 -31
- package/build-types/border-box-control/border-box-control/component.d.ts +1 -1
- package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control/hook.d.ts +0 -1
- package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +0 -1
- package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
- package/build-types/border-box-control/stories/index.d.ts +1 -1
- package/build-types/border-control/border-control/component.d.ts +1 -1
- package/build-types/border-control/border-control/component.d.ts.map +1 -1
- package/build-types/border-control/border-control/hook.d.ts +0 -1
- package/build-types/border-control/border-control/hook.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts +1 -1
- package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
- package/build-types/border-control/border-control-dropdown/hook.d.ts +0 -1
- package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
- package/build-types/border-control/stories/index.d.ts +6 -6
- package/build-types/border-control/stories/index.d.ts.map +1 -1
- package/build-types/border-control/types.d.ts +1 -1
- package/build-types/border-control/types.d.ts.map +1 -1
- package/build-types/color-palette/index.d.ts +2 -3
- package/build-types/color-palette/index.d.ts.map +1 -1
- package/build-types/color-palette/stories/index.d.ts +2 -9
- package/build-types/color-palette/stories/index.d.ts.map +1 -1
- package/build-types/color-palette/types.d.ts +3 -16
- package/build-types/color-palette/types.d.ts.map +1 -1
- package/build-types/disabled/stories/index.d.ts.map +1 -1
- package/build-types/dropdown/index.d.ts +29 -1
- package/build-types/dropdown/index.d.ts.map +1 -1
- package/build-types/dropdown/stories/index.d.ts +23 -0
- package/build-types/dropdown/stories/index.d.ts.map +1 -0
- package/build-types/dropdown/test/index.d.ts +2 -0
- package/build-types/dropdown/test/index.d.ts.map +1 -0
- package/build-types/dropdown/types.d.ts +101 -0
- package/build-types/dropdown/types.d.ts.map +1 -1
- package/build-types/icon/stories/index.d.ts +22 -0
- package/build-types/icon/stories/index.d.ts.map +1 -0
- package/build-types/tab-panel/index.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/autocomplete/index.js +1 -3
- package/src/autocomplete/test/index.js +2 -0
- package/src/base-control/test/index.tsx +1 -0
- package/src/border-box-control/border-box-control/component.tsx +0 -7
- package/src/border-box-control/border-box-control/hook.ts +0 -2
- package/src/border-box-control/border-box-control-split-controls/component.tsx +0 -2
- package/src/border-box-control/border-box-control-split-controls/hook.ts +0 -2
- package/src/border-box-control/test/index.js +2 -0
- package/src/border-control/border-control/component.tsx +0 -4
- package/src/border-control/border-control/hook.ts +0 -2
- package/src/border-control/border-control-dropdown/component.tsx +11 -17
- package/src/border-control/border-control-dropdown/hook.ts +0 -2
- package/src/border-control/stories/index.tsx +0 -1
- package/src/border-control/test/index.js +70 -67
- package/src/border-control/types.ts +1 -4
- package/src/box-control/test/index.js +2 -0
- package/src/checkbox-control/test/index.tsx +2 -0
- package/src/color-palette/index.tsx +12 -12
- package/src/color-palette/stories/index.tsx +0 -13
- package/src/color-palette/test/index.tsx +2 -0
- package/src/color-palette/types.ts +3 -17
- package/src/color-picker/test/index.js +2 -0
- package/src/combobox-control/test/index.js +2 -0
- package/src/confirm-dialog/test/index.js +2 -0
- package/src/date-time/date/test/index.tsx +2 -0
- package/src/date-time/time/test/index.tsx +2 -0
- package/src/dimension-control/index.js +2 -3
- package/src/dimension-control/test/index.test.js +2 -0
- package/src/disabled/stories/index.tsx +6 -2
- package/src/disabled/test/index.tsx +2 -0
- package/src/dropdown/README.md +41 -46
- package/src/dropdown/{index.js → index.tsx} +57 -13
- package/src/dropdown/stories/{index.js → index.tsx} +21 -8
- package/src/dropdown/test/{index.js → index.tsx} +9 -9
- package/src/dropdown/types.ts +107 -0
- package/src/dropdown-menu/README.md +2 -3
- package/src/dropdown-menu/test/index.js +2 -0
- package/src/external-link/test/index.tsx +2 -0
- package/src/focal-point-picker/test/index.js +2 -0
- package/src/font-size-picker/test/index.tsx +2 -0
- package/src/form-file-upload/test/index.tsx +2 -0
- package/src/form-toggle/test/index.tsx +2 -0
- package/src/form-token-field/test/index.tsx +3 -0
- package/src/gradient-picker/index.js +1 -2
- package/src/gradient-picker/stories/index.js +0 -1
- package/src/guide/test/index.js +2 -0
- package/src/higher-order/navigate-regions/index.js +5 -2
- package/src/higher-order/navigate-regions/style.scss +13 -39
- package/src/higher-order/with-filters/test/index.js +70 -74
- package/src/higher-order/with-focus-outside/test/index.js +2 -0
- package/src/higher-order/with-focus-return/test/index.js +2 -0
- package/src/higher-order/with-notices/test/index.js +1 -0
- package/src/icon/stories/index.tsx +103 -0
- package/src/index.js +0 -1
- package/src/input-control/test/index.js +3 -0
- package/src/isolated-event-container/test/index.js +2 -0
- package/src/mobile/bottom-sheet/picker-cell.native.js +1 -6
- package/src/mobile/global-styles-context/utils.native.js +17 -16
- package/src/modal/test/index.tsx +1 -3
- package/src/navigable-container/test/navigable-menu.js +2 -0
- package/src/navigable-container/test/tababble-container.js +2 -0
- package/src/navigation/test/index.js +2 -0
- package/src/navigator/test/index.tsx +2 -0
- package/src/notice/test/index.js +8 -3
- package/src/number-control/test/index.tsx +2 -0
- package/src/panel/test/__snapshots__/body.js.snap +9 -0
- package/src/panel/test/body.js +71 -62
- package/src/placeholder/test/index.tsx +3 -0
- package/src/select-control/test/select-control.tsx +2 -0
- package/src/tab-panel/index.tsx +1 -2
- package/src/tab-panel/test/index.tsx +2 -0
- package/src/text-highlight/test/index.tsx +1 -0
- package/src/toggle-group-control/test/index.tsx +2 -0
- package/src/toolbar/style.scss +1 -1
- package/src/toolbar-group/test/index.js +2 -0
- package/src/tooltip/stories/index.js +68 -78
- package/src/tooltip/test/index.js +2 -0
- package/src/unit-control/test/index.tsx +3 -0
- package/src/utils/hooks/test/use-latest-ref.js +2 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/src/icon/stories/index.js +0 -128
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","BorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","BorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"]}
|
|
@@ -19,7 +19,6 @@ export function useBorderBoxControl(props) {
|
|
|
19
19
|
enableStyle = true,
|
|
20
20
|
size = 'default',
|
|
21
21
|
value,
|
|
22
|
-
__experimentalHasMultipleOrigins = false,
|
|
23
22
|
__experimentalIsRenderedInSidebar = false,
|
|
24
23
|
...otherProps
|
|
25
24
|
} = useContextSystem(props, 'BorderBoxControl');
|
|
@@ -109,7 +108,6 @@ export function useBorderBoxControl(props) {
|
|
|
109
108
|
size,
|
|
110
109
|
splitValue,
|
|
111
110
|
wrapperClassName,
|
|
112
|
-
__experimentalHasMultipleOrigins,
|
|
113
111
|
__experimentalIsRenderedInSidebar
|
|
114
112
|
};
|
|
115
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
|
|
@@ -30,7 +30,6 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
|
|
|
30
30
|
rightAlignedClassName,
|
|
31
31
|
size = 'default',
|
|
32
32
|
value,
|
|
33
|
-
__experimentalHasMultipleOrigins,
|
|
34
33
|
__experimentalIsRenderedInSidebar,
|
|
35
34
|
...otherProps
|
|
36
35
|
} = useBorderBoxControlSplitControls(props); // Use internal state instead of a ref to make sure that the component
|
|
@@ -50,7 +49,6 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
|
|
|
50
49
|
enableAlpha,
|
|
51
50
|
enableStyle,
|
|
52
51
|
isCompact: true,
|
|
53
|
-
__experimentalHasMultipleOrigins,
|
|
54
52
|
__experimentalIsRenderedInSidebar,
|
|
55
53
|
size
|
|
56
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlVisualizer","BorderControl","Grid","contextConnect","useBorderBoxControlSplitControls","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlVisualizer","BorderControl","Grid","contextConnect","useBorderBoxControlSplitControls","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","sharedBorderControlProps","isCompact","mergedRef","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { BorderControlProps } from '../../border-control/types';\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\trightAlignedClassName,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tsize,\n\t};\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } size={ size } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ rightAlignedClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}
|
|
@@ -16,7 +16,6 @@ export function useBorderBoxControlSplitControls(props) {
|
|
|
16
16
|
enableAlpha = false,
|
|
17
17
|
enableStyle = true,
|
|
18
18
|
size = 'default',
|
|
19
|
-
__experimentalHasMultipleOrigins = false,
|
|
20
19
|
__experimentalIsRenderedInSidebar = false,
|
|
21
20
|
...otherProps
|
|
22
21
|
} = useContextSystem(props, 'BorderBoxControlSplitControls'); // Generate class names.
|
|
@@ -39,7 +38,6 @@ export function useBorderBoxControlSplitControls(props) {
|
|
|
39
38
|
enableStyle,
|
|
40
39
|
rightAlignedClassName,
|
|
41
40
|
size,
|
|
42
|
-
__experimentalHasMultipleOrigins,
|
|
43
41
|
__experimentalIsRenderedInSidebar
|
|
44
42
|
};
|
|
45
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlSplitControls","props","className","colors","enableAlpha","enableStyle","size","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlSplitControls","props","className","colors","enableAlpha","enableStyle","size","__experimentalIsRenderedInSidebar","otherProps","cx","classes","borderBoxControlSplitControls","centeredClassName","centeredBorderControl","rightAlignedClassName","rightBorderControl"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,cAAtB;AAIA,OAAO,SAASC,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,MAAM,GAAG,EAFJ;AAGLC,IAAAA,WAAW,GAAG,KAHT;AAILC,IAAAA,WAAW,GAAG,IAJT;AAKLC,IAAAA,IAAI,GAAG,SALF;AAMLC,IAAAA,iCAAiC,GAAG,KAN/B;AAOL,OAAGC;AAPE,MAQFV,gBAAgB,CAAEG,KAAF,EAAS,+BAAT,CARpB,CADC,CAWD;;AACA,QAAMQ,EAAE,GAAGV,KAAK,EAAhB;AACA,QAAMW,OAAO,GAAGd,OAAO,CAAE,MAAM;AAC9B,WAAOa,EAAE,CAAEZ,MAAM,CAACc,6BAAP,CAAsCL,IAAtC,CAAF,EAAgDJ,SAAhD,CAAT;AACA,GAFsB,EAEpB,CAAEO,EAAF,EAAMP,SAAN,EAAiBI,IAAjB,CAFoB,CAAvB;AAIA,QAAMM,iBAAiB,GAAGhB,OAAO,CAAE,MAAM;AACxC,WAAOa,EAAE,CAAEZ,MAAM,CAACgB,qBAAT,EAAgCX,SAAhC,CAAT;AACA,GAFgC,EAE9B,CAAEO,EAAF,EAAMP,SAAN,CAF8B,CAAjC;AAIA,QAAMY,qBAAqB,GAAGlB,OAAO,CAAE,MAAM;AAC5C,WAAOa,EAAE,CAAEZ,MAAM,CAACkB,kBAAP,EAAF,EAA+Bb,SAA/B,CAAT;AACA,GAFoC,EAElC,CAAEO,EAAF,EAAMP,SAAN,CAFkC,CAArC;AAIA,SAAO,EACN,GAAGM,UADG;AAENI,IAAAA,iBAFM;AAGNV,IAAAA,SAAS,EAAEQ,OAHL;AAINP,IAAAA,MAJM;AAKNC,IAAAA,WALM;AAMNC,IAAAA,WANM;AAONS,IAAAA,qBAPM;AAQNR,IAAAA,IARM;AASNC,IAAAA;AATM,GAAP;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlSplitControls' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls( size ), className );\n\t}, [ cx, className, size ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.centeredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t}, [ cx, className ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\trightAlignedClassName,\n\t\tsize,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
|
|
@@ -60,7 +60,6 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
|
|
|
60
60
|
widthUnit,
|
|
61
61
|
widthValue,
|
|
62
62
|
withSlider,
|
|
63
|
-
__experimentalHasMultipleOrigins,
|
|
64
63
|
__experimentalIsRenderedInSidebar,
|
|
65
64
|
...otherProps
|
|
66
65
|
} = useBorderControl(props);
|
|
@@ -85,7 +84,6 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
|
|
|
85
84
|
onChange: onBorderChange,
|
|
86
85
|
previousStyleSelection: previousStyleSelection,
|
|
87
86
|
showDropdownHeader: showDropdownHeader,
|
|
88
|
-
__experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
|
|
89
87
|
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
|
|
90
88
|
size: size
|
|
91
89
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}
|
|
@@ -34,7 +34,6 @@ export function useBorderControl(props) {
|
|
|
34
34
|
size = 'default',
|
|
35
35
|
value: border,
|
|
36
36
|
width,
|
|
37
|
-
__experimentalHasMultipleOrigins = false,
|
|
38
37
|
__experimentalIsRenderedInSidebar = false,
|
|
39
38
|
...otherProps
|
|
40
39
|
} = useContextSystem(props, 'BorderControl');
|
|
@@ -125,7 +124,6 @@ export function useBorderControl(props) {
|
|
|
125
124
|
widthUnit,
|
|
126
125
|
widthValue,
|
|
127
126
|
size,
|
|
128
|
-
__experimentalHasMultipleOrigins,
|
|
129
127
|
__experimentalIsRenderedInSidebar
|
|
130
128
|
};
|
|
131
129
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( size );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, size ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
|
|
@@ -26,14 +26,12 @@ import { useBorderControlDropdown } from './hook';
|
|
|
26
26
|
import { StyledLabel } from '../../base-control/styles/base-control-styles';
|
|
27
27
|
import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
|
|
28
28
|
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
const getColorObject = (colorValue, colors, hasMultipleColorOrigins) => {
|
|
32
|
-
if (!colorValue || !colors) {
|
|
29
|
+
const getColorObject = (colorValue, colors) => {
|
|
30
|
+
if (!colorValue || !colors || colors.length === 0) {
|
|
33
31
|
return;
|
|
34
32
|
}
|
|
35
33
|
|
|
36
|
-
if (
|
|
34
|
+
if (colors[0].colors !== undefined) {
|
|
37
35
|
let matchedColor;
|
|
38
36
|
colors.some(origin => origin.colors.some(color => {
|
|
39
37
|
if (color.color === colorValue) {
|
|
@@ -81,7 +79,6 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
|
|
|
81
79
|
|
|
82
80
|
const BorderControlDropdown = (props, forwardedRef) => {
|
|
83
81
|
const {
|
|
84
|
-
__experimentalHasMultipleOrigins,
|
|
85
82
|
__experimentalIsRenderedInSidebar,
|
|
86
83
|
border,
|
|
87
84
|
colors,
|
|
@@ -104,14 +101,14 @@ const BorderControlDropdown = (props, forwardedRef) => {
|
|
|
104
101
|
color,
|
|
105
102
|
style
|
|
106
103
|
} = border || {};
|
|
107
|
-
const colorObject = getColorObject(color, colors
|
|
104
|
+
const colorObject = getColorObject(color, colors);
|
|
108
105
|
const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
|
|
109
106
|
const showResetButton = color || style && style !== 'none';
|
|
110
107
|
const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
|
|
111
108
|
|
|
112
109
|
const renderToggle = _ref => {
|
|
113
110
|
let {
|
|
114
|
-
onToggle
|
|
111
|
+
onToggle
|
|
115
112
|
} = _ref;
|
|
116
113
|
return createElement(Button, {
|
|
117
114
|
onClick: onToggle,
|
|
@@ -126,8 +123,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
|
|
|
126
123
|
className: indicatorClassName,
|
|
127
124
|
colorValue: color
|
|
128
125
|
})));
|
|
129
|
-
};
|
|
130
|
-
|
|
126
|
+
};
|
|
131
127
|
|
|
132
128
|
const renderContent = _ref2 => {
|
|
133
129
|
let {
|
|
@@ -149,7 +145,6 @@ const BorderControlDropdown = (props, forwardedRef) => {
|
|
|
149
145
|
onChange: onColorChange,
|
|
150
146
|
colors,
|
|
151
147
|
disableCustomColors,
|
|
152
|
-
__experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
|
|
153
148
|
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
|
|
154
149
|
clearable: false,
|
|
155
150
|
enableAlpha: enableAlpha
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject, PaletteObject } from '../../color-palette/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as PaletteObject[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as ColorObject[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\t// TODO: update types once Dropdown component is refactored to TypeScript.\n\tconst renderContent = ( { onClose }: { onClose: () => void } ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","getColorObject","colorValue","colors","length","undefined","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject, PaletteObject } from '../../color-palette/types';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors || colors.length === 0 ) {\n\t\treturn;\n\t}\n\n\tif ( ( colors as PaletteObject[] )[ 0 ].colors !== undefined ) {\n\t\tlet matchedColor;\n\n\t\t( colors as PaletteObject[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as ColorObject[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
|
|
@@ -20,7 +20,6 @@ export function useBorderControlDropdown(props) {
|
|
|
20
20
|
onChange,
|
|
21
21
|
previousStyleSelection,
|
|
22
22
|
size = 'default',
|
|
23
|
-
__experimentalHasMultipleOrigins = false,
|
|
24
23
|
__experimentalIsRenderedInSidebar = false,
|
|
25
24
|
...otherProps
|
|
26
25
|
} = useContextSystem(props, 'BorderControlDropdown');
|
|
@@ -86,7 +85,6 @@ export function useBorderControlDropdown(props) {
|
|
|
86
85
|
popoverContentClassName,
|
|
87
86
|
popoverControlsClassName,
|
|
88
87
|
resetButtonClassName,
|
|
89
|
-
__experimentalHasMultipleOrigins,
|
|
90
88
|
__experimentalIsRenderedInSidebar
|
|
91
89
|
};
|
|
92
90
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown( size ), className );\n\t}, [ className, cx, size ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border, size ) );\n\t}, [ border, cx, size ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
|
|
@@ -183,19 +183,16 @@ function UnforwardedColorPalette(props, forwardedRef) {
|
|
|
183
183
|
enableAlpha = false,
|
|
184
184
|
onChange,
|
|
185
185
|
value,
|
|
186
|
-
__experimentalHasMultipleOrigins = false,
|
|
187
186
|
__experimentalIsRenderedInSidebar = false,
|
|
188
187
|
...otherProps
|
|
189
188
|
} = props;
|
|
190
189
|
const clearColor = useCallback(() => onChange(undefined), [onChange]);
|
|
191
|
-
const
|
|
192
|
-
//
|
|
193
|
-
// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
|
|
194
|
-
// either both `true` or both `false`.
|
|
190
|
+
const hasMultipleColorOrigins = colors.length > 0 && colors[0].colors !== undefined;
|
|
191
|
+
const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]); // Make sure that the `colors` array has a valid format.
|
|
195
192
|
|
|
196
|
-
if (colors.length > 0 &&
|
|
193
|
+
if (colors.length > 0 && hasMultipleColorOrigins !== areColorsMultiplePalette(colors)) {
|
|
197
194
|
// eslint-disable-next-line no-console
|
|
198
|
-
console.warn('wp.components.ColorPalette: please specify a format for the `colors` prop
|
|
195
|
+
console.warn('wp.components.ColorPalette: please specify a valid format for the `colors` prop. ');
|
|
199
196
|
return null;
|
|
200
197
|
}
|
|
201
198
|
|
|
@@ -255,7 +252,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
|
|
|
255
252
|
className: "components-color-palette__custom-color-value"
|
|
256
253
|
}, valueWithoutLeadingHash));
|
|
257
254
|
}
|
|
258
|
-
}),
|
|
255
|
+
}), hasMultipleColorOrigins ? createElement(MultiplePalettes, _extends({}, paletteCommonProps, {
|
|
259
256
|
colors: colors
|
|
260
257
|
})) : createElement(SinglePalette, _extends({}, paletteCommonProps, {
|
|
261
258
|
colors: colors
|