npm - @wordpress/components - Versions diffs - 25.15.0 → 25.16.0 - Mend

@wordpress/components 25.15.0 → 25.16.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 (236) hide show

package/build/tooltip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_compose","_element","_deprecated","_interopRequireDefault","_shortcut","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TOOLTIP_DELAY","exports","~~Tooltip~~","props","children","delay","hideOnClick","placement","position","shortcut","text","baseId","useInstanceId","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","~~tooltipStore~~","useTooltipStore","showTimeout","_react","createElement","~~Fragment~~","TooltipAnchor","onClick","hide","store","~~render~~","unmountOnHide","~~className","~~gutter","id","overflowPadding","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { ~~Children~~ } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport type { ~~TooltipProps~~ } from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\n/\n Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nfunction ~~Tooltip~~( ~~props~~: TooltipProps ) {\n\tconst {\n\t\tchildren,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\t} = props;\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text \|\| shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement \|\| 'bottom';\n\n\tconst ~~tooltipStore~~ = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\n\treturn (\n\t\t~~<>\~~n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={ isOnlyChild ? children : undefined }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text \|\| shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\~~tunmountOnHide~~\n\t\t\t\t\tclassName=\"components-tooltip\"\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t~~</>\~~n\t);\n}\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;~~AACA~~,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;~~AAMA~~,IAAAK,SAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAAuD,SAAAO,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;~~AAlBvD~~;AACA;AACA;AACA;;AAGA;AACA;AACA;;~~AAYA~~;AACA;AACA;AACO,~~MAAMW~~,aAAa,GAAG,GAAG;AAACC,OAAA,CAAAD,aAAA,GAAAA,aAAA;AAEjC,~~SAASE~~,~~OAAOA~~,~~CAAEC~~,KAAmB,~~EAAG~~;~~EACvC~~,MAAM;IACLC,QAAQ;IACRC,KAAK,~~GAAGL~~,aAAa;~~IACrBM~~,WAAW,GAAG,IAAI;IAClBC,SAAS;IACTC,QAAQ;IACRC,QAAQ;IACRC;~~EACD~~,CAAC,~~GAAGP~~,KAAK;EAET,~~MAAMQ~~,MAAM,GAAG,IAAAC,sBAAa,~~EAAEV~~,OAAO,EAAE,SAAU,CAAC;EAClD,~~MAAMW~~,aAAa,~~GAAGH~~,IAAI,IAAID,QAAQ,~~GAAGE~~,MAAM,~~GAAGG~~,SAAS;EAE3D,MAAMC,WAAW,GAAGC,iBAAQ,CAACC,KAAK,~~CAAEb~~,QAAS,CAAC,KAAK,CAAC;EACpD;EACA,IAAK,~~CAAEW~~,WAAW,EAAG;IACpB,IAAK,aAAa,KAAKG,OAAO,CAACC,GAAG,CAACC,QAAQ,EAAG;MAC7C;MACAC,OAAO,CAACC,KAAK,CACZ,~~4DACD~~,CAAC;IACF;EACD;;EAEA;EACA;EACA;EACA;EACA,IAAIC,iBAAiB;EACrB,~~IAAKhB~~,SAAS,~~KAAKO~~,SAAS,EAAG;IAC9BS,iBAAiB,~~GAAGhB~~,SAAS;EAC9B,CAAC,MAAM,IAAKC,QAAQ,~~KAAKM~~,SAAS,EAAG;IACpCS,iBAAiB,GAAG,IAAAC,0BAAmB,~~EAAEhB~~,QAAS,CAAC;IACnD,~~IAAAiB~~,mBAAU,EAAE,0CAA0C,EAAE;MACvDC,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE;IACd,CAAE,CAAC;EACJ;EACAJ,iBAAiB,GAAGA,iBAAiB,IAAI,QAAQ;~~EAEjD~~,MAAMK,~~YAAY~~,~~GAAG3D~~,OAAO,~~CAAC4D~~,eAAe,CAAE;~~IAC7CtB~~,SAAS,~~EAAEgB~~,iBAAiB;~~IAC5BO~~,WAAW,~~EAAEzB~~;EACd,CAAE,CAAC;EAEH,~~OACC~~,~~IAAA0B~~,MAAA,CAAAC,aAAA,~~EAAAD~~,MAAA,~~CAAAE~~,~~QAAA~~,~~QACC~~,~~IAAAF~~,MAAA,CAAAC,aAAA,~~EAAC/D~~,OAAO,~~CAACiE~~,aAAa;IACrBC,OAAO,~~EAAG7B~~,WAAW,~~GAAGsB~~,YAAY,~~CAACQ~~,IAAI,~~GAAGtB~~,SAAW;~~IACvDuB~~,KAAK,~~EAAGT~~,YAAc;~~IACtBU~~,MAAM,~~EAAGvB~~,WAAW,~~GAAGX~~,QAAQ,~~GAAGU~~;~~EAAW~~,~~GAE3CC~~,WAAW,GAAGD,SAAS,~~GAAGV~~,QACN,CAAC,~~EACtBW~~,WAAW,~~KAAML~~,IAAI,IAAID,QAAQ,CAAE,IACpC,~~IAAAsB~~,MAAA,CAAAC,aAAA,~~EAAC/D~~,OAAO,~~CAACiC~~,OAAO;~~IACfqC~~,~~aAAa~~;~~IACbC~~,SAAS,EAAC,oBAAoB;IAC9BC,MAAM,EAAG,CAAG;IACZC,EAAE,~~EAAG7B~~,aAAe;~~IACpB8B~~,eAAe,EAAG,GAAK;~~IACvBN~~,KAAK,~~EAAGT~~;EAAc,~~GAEpBlB~~,IAAI,EACJD,QAAQ,IACT,~~IAAAsB~~,MAAA,CAAAC,aAAA,~~EAACxD~~,SAAA,CAAAS,OAAQ;~~IACRuD~~,SAAS,~~EACR9B~~,IAAI,GAAG,8BAA8B,GAAG,EACxC;IACDD,QAAQ,EAAGA;EAAU,CACrB,CAEc,~~CAEjB~~,CAAC;~~AAEL~~;~~AAAC~~,IAAAmC,QAAA,~~GAEc1C~~,OAAO;~~AAAAD~~,OAAA,~~CAAAhB~~,OAAA,~~GAAA2D~~,QAAA"}
1	+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_compose","_element","_deprecated","_interopRequireDefault","_shortcut","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","useAriakitTooltipStore","useTooltipStore","tooltipStore","showTimeout","_react","createElement","Role","render","Provider","value","TooltipAnchor","onClick","hide","store","className","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/\n Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text \|\| shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement \|\| 'bottom';\n\n\t// Removing the `Ariakit` namespace from the hook name allows ESLint to\n\t// properly identify the hook, and apply the correct linting rules.\n\tconst useAriakitTooltipStore = Ariakit.useTooltipStore;\n\tconst tooltipStore = useAriakitTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={ isOnlyChild ? children : undefined }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text \|\| shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName=\"components-tooltip\"\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\n\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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"}

package/build/tooltip/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/tooltip/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Placement } from '@floating-ui/react-dom';\n\n/\n Internal dependencies\n /\nimport type { PopoverProps } from '../popover/types';\nimport type { ShortcutProps } from '../shortcut/types';\n\nexport type TooltipProps = {\n\t/\n\t The anchor for the tooltip.\n\t \n\t Note: Accepts only one child element.\n\t /\n\tchildren: React.ReactElement;\n\t/\n\t Option to hide the tooltip when the anchor is clicked.\n\t \n\t @default true\n\t /\n\thideOnClick?: boolean;\n\t/\n\t The amount of time in milliseconds to wait before showing the tooltip.\n\t \n\t @default 700\n\t /\n\tdelay?: number;\n\t/\n\t Where the tooltip should be positioned relative to its parent.\n\t \n\t @default bottom\n\t /\n\tplacement?: Placement;\n\t/\n\t _Note: this prop is deprecated. Please use the `placement` prop instead._\n\t \n\t Legacy way of specifying the tooltip's position relative to its parent.\n\t \n\t Specify y- and x-axis as a space-separated string. Supports `\"top\"`,\n\t * `\"bottom\"` y axis, and `\"left\"`, `\"center\"`, `\"right\"` x axis.\n\t \n\t @deprecated\n\t * @default bottom\n\t /\n\tposition?: PopoverProps[ 'position' ];\n\t/\n\t An option for adding accessible keyboard shortcuts.\n\t \n\t If shortcut is a string, it is expecting the display text. If shortcut is an\n\t * object, it will accept the properties of `display` (string) and `ariaLabel`\n\t * (string).\n\t /\n\tshortcut?: ShortcutProps[ 'shortcut' ];\n\t/\n\t The text shown in the tooltip when anchor element is focused or hovered.\n\t */\n\ttext?: string;\n};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/tooltip/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Placement } from '@floating-ui/react-dom';\n\n/\n Internal dependencies\n /\nimport type { PopoverProps } from '../popover/types';\nimport type { ShortcutProps } from '../shortcut/types';\n\nexport type TooltipProps = {\n\t/\n\t The anchor for the tooltip.\n\t \n\t Note: Accepts only one child element.\n\t /\n\tchildren: React.ReactElement;\n\t/\n\t Option to hide the tooltip when the anchor is clicked.\n\t \n\t @default true\n\t /\n\thideOnClick?: boolean;\n\t/\n\t The amount of time in milliseconds to wait before showing the tooltip.\n\t \n\t @default 700\n\t /\n\tdelay?: number;\n\t/\n\t Where the tooltip should be positioned relative to its parent.\n\t \n\t @default bottom\n\t /\n\tplacement?: Placement;\n\t/\n\t _Note: this prop is deprecated. Please use the `placement` prop instead._\n\t \n\t Legacy way of specifying the tooltip's position relative to its parent.\n\t \n\t Specify y- and x-axis as a space-separated string. Supports `\"top\"`,\n\t * `\"bottom\"` y axis, and `\"left\"`, `\"center\"`, `\"right\"` x axis.\n\t \n\t @deprecated\n\t * @default bottom\n\t /\n\tposition?: PopoverProps[ 'position' ];\n\t/\n\t An option for adding accessible keyboard shortcuts.\n\t \n\t If shortcut is a string, it is expecting the display text. If shortcut is an\n\t * object, it will accept the properties of `display` (string) and `ariaLabel`\n\t * (string).\n\t /\n\tshortcut?: ShortcutProps[ 'shortcut' ];\n\t/\n\t The text shown in the tooltip when anchor element is focused or hovered.\n\t */\n\ttext?: string;\n};\n\nexport type TooltipInternalContext = {\n\tisNestedInTooltip: boolean;\n};\n"],"mappings":""}

package/build-module/border-box-control/border-box-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","createElement","as","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","ref","onChange","placeholder","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","onClick","BorderBoxControl"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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"],"mappings":"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"}
1	+ {"version":3,"names":["__","useMemo","useState","useMergeRefs","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","createElement","as","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","ref","onChange","placeholder","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","onClick","BorderBoxControl"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,EAAEC,QAAQ,QAAQ,oBAAoB;AACtD,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,OAAOC,4BAA4B,MAAM,qCAAqC;AAC9E,OAAOC,6BAA6B,MAAM,sCAAsC;AAChF,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,WAAW,QAAQ,+CAA+C;AAC3E,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,mBAAmB,QAAQ,QAAQ;AAQ5C,MAAMC,WAAW,GAAKC,KAAiB,IAAM;EAC5C,MAAM;IAAEC,KAAK;IAAEC;EAAoB,CAAC,GAAGF,KAAK;EAE5C,IAAK,CAAEC,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OAAOC,mBAAmB,GACzBC,aAAA,CAACP,cAAc;IAACQ,EAAE,EAAC;EAAO,GAAGH,KAAuB,CAAC,GAErDE,aAAA,CAACT,WAAW,QAAGO,KAAoB,CACnC;AACF,CAAC;AAED,MAAMI,2BAA2B,GAAGA,CACnCL,KAAqE,EACrEM,YAAuC,KACnC;EACJ,MAAM;IACLC,SAAS;IACTC,MAAM;IACNC,mBAAmB;IACnBC,YAAY;IACZC,WAAW;IACXC,WAAW;IACXC,eAAe;IACfX,mBAAmB;IACnBY,QAAQ;IACRb,KAAK;IACLc,sBAAsB;IACtBC,WAAW;IACXC,cAAc;IACdC,aAAa;IACbC,gBAAgB;IAChBC,aAAa;IACbC,IAAI;IACJC,UAAU;IACVC,YAAY;IACZC,gBAAgB;IAChBC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,GAAG5B,mBAAmB,CAAEE,KAAM,CAAC;;EAEhC;EACA;EACA,MAAM,CAAE2B,aAAa,EAAEC,gBAAgB,CAAE,GAAGvC,QAAQ,CACnD,IACD,CAAC;;EAED;EACA,MAAMwC,YAA4D,GACjEzC,OAAO,CACN,MACC+B,gBAAgB,GACb;IACAW,SAAS,EAAEX,gBAAgB;IAC3BY,MAAM,EAAEX,aAAa;IACrBY,MAAM,EAAEL,aAAa;IACrBM,KAAK,EAAE;EACP,CAAC,GACDC,SAAS,EACb,CAAEf,gBAAgB,EAAEC,aAAa,EAAEO,aAAa,CACjD,CAAC;EAEF,MAAMQ,SAAS,GAAG7C,YAAY,CAAE,CAAEsC,gBAAgB,EAAEtB,YAAY,CAAG,CAAC;EACpE,OACCH,aAAA,CAACR,IAAI;IAACY,SAAS,EAAGA,SAAW;IAAA,GAAMmB,UAAU;IAAGU,GAAG,EAAGD;EAAW,GAChEhC,aAAA,CAACJ,WAAW;IACXE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC,EACFC,aAAA,CAACR,IAAI;IAACY,SAAS,EAAGiB;EAAkB,GACjCV,QAAQ,GACTX,aAAA,CAACV,aAAa;IACbc,SAAS,EAAGQ,sBAAwB;IACpCP,MAAM,EAAGA,MAAQ;IACjBE,YAAY,EAAGA,YAAc;IAC7BD,mBAAmB,EAAGA,mBAAqB;IAC3CE,WAAW,EAAGA,WAAa;IAC3BC,WAAW,EAAGA,WAAa;IAC3ByB,QAAQ,EAAGpB,cAAgB;IAC3BqB,WAAW,EACVzB,eAAe,GAAG1B,EAAE,CAAE,OAAQ,CAAC,GAAG+C,SAClC;IACDK,sBAAsB,EAAGV,YAAc;IACvCW,oBAAoB,EAAG,KAAO,CAAC;IAAA;IAC/BC,KAAK,EAAGzB,WAAa;IACrB0B,UAAU,EAAG,IAAM;IACnBC,KAAK,EACJtB,IAAI,KAAK,kBAAkB,GAAG,OAAO,GAAG,OACxC;IACDI,iCAAiC,EAChCA,iCACA;IACDJ,IAAI,EAAGA;EAAM,CACb,CAAC,GAEFlB,aAAA,CAACX,6BAA6B;IAC7BgB,MAAM,EAAGA,MAAQ;IACjBC,mBAAmB,EAAGA,mBAAqB;IAC3CE,WAAW,EAAGA,WAAa;IAC3BC,WAAW,EAAGA,WAAa;IAC3ByB,QAAQ,EAAGnB,aAAe;IAC1BC,gBAAgB,EAAGA,gBAAkB;IACrCC,aAAa,EAAGA,aAAe;IAC/BqB,KAAK,EAAGnB,UAAY;IACpBG,iCAAiC,EAChCA,iCACA;IACDJ,IAAI,EAAGA;EAAM,CACb,CACD,EACDlB,aAAA,CAACZ,4BAA4B;IAC5BqD,OAAO,EAAGrB,YAAc;IACxBT,QAAQ,EAAGA,QAAU;IACrBO,IAAI,EAAGA;EAAM,CACb,CACI,CACD,CAAC;AAET,CAAC;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMwB,gBAAgB,GAAGhD,cAAc,CAC7CQ,2BAA2B,EAC3B,kBACD,CAAC;AAED,eAAewC,gBAAgB"}

package/build-module/border-box-control/border-box-control/hook.js CHANGED Viewed

@@ -20,8 +20,10 @@ export function useBorderBoxControl(props) {
     size = 'default',
     value,
     __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
     ...otherProps
   } = useContextSystem(props, 'BorderBoxControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const mixedBorders = hasMixedBorders(value);
   const splitBorders = hasSplitBorders(value);
   const linkedValue = splitBorders ? getCommonBorder(value) : value;
@@ -105,7 +107,7 @@ export function useBorderBoxControl(props) {
     onSplitChange,
     toggleLinked,
     linkedValue,
-    size,
+    size: computedSize,
     splitValue,
     wrapperClassName,
     __experimentalIsRenderedInSidebar

package/build-module/border-box-control/border-box-control/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"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 type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SACCC,aAAa,EACbC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,QACP,UAAU;AAEjB,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAKhD,OAAO,SAASC,mBAAmBA,CAClCC,KAA8D,EAC7D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,QAAQ;IACRC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,IAAI;IAClBC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,iCAAiC,GAAG,KAAK;~~IACzC~~,GAAGC;EACJ,CAAC,~~GAAGZ~~,gBAAgB,CAAEG,KAAK,EAAE,kBAAmB,CAAC;EAEjD,~~MAAMU~~,YAAY,~~GAAGjB~~,eAAe,CAAEc,KAAM,CAAC;EAC7C,~~MAAMI~~,YAAY,~~GAAGjB~~,eAAe,CAAEa,KAAM,CAAC;EAE7C,~~MAAMK~~,WAAW,GAAGD,YAAY,~~GAC7BpB~~,eAAe,CAAEgB,KAA6B,CAAC,GAC7CA,KAAiB;EAEtB,~~MAAMM~~,UAAU,GAAGF,YAAY,~~GAC1BJ~~,KAAK,GACPf,eAAe,CAAEe,KAA4B,CAAC;;EAEjD;EACA,~~MAAMO~~,aAAa,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAG,GAAGJ,WAAW,EAAEK,KAAO,EAAE,CAAE,CAAC;EAExE,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,~~GAAG/B~~,QAAQ,CAAE,~~CAAEsB~~,YAAa,CAAC;EAC5D,MAAMU,YAAY,GAAGA,CAAA,KAAMD,WAAW,CAAE,CAAED,QAAS,CAAC;EAEpD,MAAMG,cAAc,GAAKC,SAAkB,IAAM;IAChD,IAAK,CAAEA,SAAS,EAAG;MAClB,~~OAAOnB~~,QAAQ,~~CAAEoB~~,SAAU,CAAC;IAC7B;;IAEA;IACA,IAAK,CAAEb,YAAY,~~IAAIf~~,gBAAgB,~~CAAE2B~~,SAAU,CAAC,EAAG;MACtD,~~OAAOnB~~,QAAQ,CACdP,aAAa,~~CAAE0B~~,SAAU,CAAC,GAAGC,SAAS,GAAGD,SAC1C,CAAC;IACF;;IAEA;IACA;IACA;IACA;IACA,MAAME,OAAO,~~GAAGlC~~,aAAa,~~CAC5BsB~~,WAAW,EACXU,SACD,CAAC;IACD,MAAMG,cAAc,GAAG;MACtBC,GAAG,EAAE;QAAE,~~GAAKnB~~,KAAK,~~EAAemB~~,GAAG;QAAE,GAAGF;MAAQ,CAAC;MACjDG,KAAK,EAAE;QAAE,~~GAAKpB~~,KAAK,~~EAAeoB~~,KAAK;QAAE,GAAGH;MAAQ,CAAC;MACrDI,MAAM,EAAE;QAAE,~~GAAKrB~~,KAAK,~~EAAeqB~~,MAAM;QAAE,GAAGJ;MAAQ,CAAC;MACvDK,IAAI,EAAE;QAAE,~~GAAKtB~~,KAAK,~~EAAesB~~,IAAI;QAAE,GAAGL;MAAQ;IACnD,CAAC;IAED,~~IAAK/B~~,eAAe,~~CAAEgC~~,cAAe,CAAC,EAAG;MACxC,~~OAAOtB~~,QAAQ,~~CAAEsB~~,cAAe,CAAC;IAClC;IAEA,MAAMK,cAAc,~~GAAGlC~~,aAAa,~~CAAE6B~~,cAAc,CAACC,GAAI,CAAC,GACvDH,SAAS,GACTE,cAAc,CAACC,GAAG;~~IAErBvB~~,QAAQ,~~CAAE2B~~,cAAe,CAAC;EAC3B,CAAC;EAED,MAAMC,aAAa,GAAGA,CACrBT,SAA6B,EAC7BU,IAAgB,KACZ;IACJ,MAAMP,cAAc,GAAG;MAAE,GAAGZ,UAAU;MAAE,CAAEmB,IAAI,GAAIV;IAAU,CAAC;IAE7D,~~IAAK7B~~,eAAe,~~CAAEgC~~,cAAe,CAAC,EAAG;~~MACxCtB~~,QAAQ,~~CAAEsB~~,cAAe,CAAC;IAC3B,CAAC,MAAM;~~MACNtB~~,QAAQ,~~CAAEmB~~,SAAU,CAAC;IACtB;EACD,CAAC;EAED,MAAMW,EAAE,~~GAAGnC~~,KAAK,CAAC,CAAC;EAClB,~~MAAMoC~~,OAAO,~~GAAG/C~~,OAAO,CAAE,MAAM;IAC9B,~~OAAO8C~~,EAAE,~~CAAE5C~~,MAAM,~~CAAC8C~~,gBAAgB,~~EAAElC~~,SAAU,CAAC;EAChD,CAAC,EAAE,~~CAAEgC~~,EAAE,~~EAAEhC~~,SAAS,CAAG,CAAC;EAEtB,~~MAAMmC~~,sBAAsB,~~GAAGjD~~,OAAO,CAAE,MAAM;IAC7C,~~OAAO8C~~,EAAE,~~CAAE5C~~,MAAM,~~CAACgD~~,mBAAmB,CAAC,CAAE,CAAC;EAC1C,CAAC,EAAE,CAAEJ,EAAE,CAAG,CAAC;EAEX,MAAMK,gBAAgB,~~GAAGnD~~,OAAO,CAAE,MAAM;IACvC,~~OAAO8C~~,EAAE,~~CAAE5C~~,MAAM,~~CAACkD~~,OAAQ,CAAC;EAC5B,CAAC,EAAE,CAAEN,EAAE,CAAG,CAAC;EAEX,OAAO;IACN,~~GAAGxB~~,UAAU;~~IACbR~~,SAAS,~~EAAEiC~~,OAAO;~~IAClBhC~~,MAAM;~~IACNsC~~,YAAY,EAAE9B,YAAY,IAAI,CAAEI,aAAa;~~IAC7CV~~,WAAW;IACXC,WAAW;IACXZ,eAAe,~~EAAEiB~~,YAAY;IAC7BQ,QAAQ;IACRkB,sBAAsB;IACtBf,cAAc;IACdU,aAAa;IACbX,YAAY;IACZR,WAAW;~~IACXN~~,IAAI;~~IACJO~~,UAAU;IACVyB,gBAAgB;~~IAChB9B~~;EACD,CAAC;AACF"}
1	+ {"version":3,"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","computedSize","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"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"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 type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../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__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\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: computedSize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SACCC,aAAa,EACbC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,QACP,UAAU;AAEjB,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAKhD,OAAO,SAASC,mBAAmBA,CAClCC,KAA8D,EAC7D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,QAAQ;IACRC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,IAAI;IAClBC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,iCAAiC,GAAG,KAAK;IACzCC,qBAAqB;IACrB,GAAGC;EACJ,CAAC,GAAGb,gBAAgB,CAAEG,KAAK,EAAE,kBAAmB,CAAC;EAEjD,MAAMW,YAAY,GACjBL,IAAI,KAAK,SAAS,IAAIG,qBAAqB,GAAG,kBAAkB,GAAGH,IAAI;EAExE,MAAMM,YAAY,GAAGnB,eAAe,CAAEc,KAAM,CAAC;EAC7C,MAAMM,YAAY,GAAGnB,eAAe,CAAEa,KAAM,CAAC;EAE7C,MAAMO,WAAW,GAAGD,YAAY,GAC7BtB,eAAe,CAAEgB,KAA6B,CAAC,GAC7CA,KAAiB;EAEtB,MAAMQ,UAAU,GAAGF,YAAY,GAC1BN,KAAK,GACPf,eAAe,CAAEe,KAA4B,CAAC;;EAEjD;EACA,MAAMS,aAAa,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAG,GAAGJ,WAAW,EAAEK,KAAO,EAAE,CAAE,CAAC;EAExE,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAGjC,QAAQ,CAAE,CAAEwB,YAAa,CAAC;EAC5D,MAAMU,YAAY,GAAGA,CAAA,KAAMD,WAAW,CAAE,CAAED,QAAS,CAAC;EAEpD,MAAMG,cAAc,GAAKC,SAAkB,IAAM;IAChD,IAAK,CAAEA,SAAS,EAAG;MAClB,OAAOrB,QAAQ,CAAEsB,SAAU,CAAC;IAC7B;;IAEA;IACA,IAAK,CAAEb,YAAY,IAAIjB,gBAAgB,CAAE6B,SAAU,CAAC,EAAG;MACtD,OAAOrB,QAAQ,CACdP,aAAa,CAAE4B,SAAU,CAAC,GAAGC,SAAS,GAAGD,SAC1C,CAAC;IACF;;IAEA;IACA;IACA;IACA;IACA,MAAME,OAAO,GAAGpC,aAAa,CAC5BwB,WAAW,EACXU,SACD,CAAC;IACD,MAAMG,cAAc,GAAG;MACtBC,GAAG,EAAE;QAAE,GAAKrB,KAAK,EAAeqB,GAAG;QAAE,GAAGF;MAAQ,CAAC;MACjDG,KAAK,EAAE;QAAE,GAAKtB,KAAK,EAAesB,KAAK;QAAE,GAAGH;MAAQ,CAAC;MACrDI,MAAM,EAAE;QAAE,GAAKvB,KAAK,EAAeuB,MAAM;QAAE,GAAGJ;MAAQ,CAAC;MACvDK,IAAI,EAAE;QAAE,GAAKxB,KAAK,EAAewB,IAAI;QAAE,GAAGL;MAAQ;IACnD,CAAC;IAED,IAAKjC,eAAe,CAAEkC,cAAe,CAAC,EAAG;MACxC,OAAOxB,QAAQ,CAAEwB,cAAe,CAAC;IAClC;IAEA,MAAMK,cAAc,GAAGpC,aAAa,CAAE+B,cAAc,CAACC,GAAI,CAAC,GACvDH,SAAS,GACTE,cAAc,CAACC,GAAG;IAErBzB,QAAQ,CAAE6B,cAAe,CAAC;EAC3B,CAAC;EAED,MAAMC,aAAa,GAAGA,CACrBT,SAA6B,EAC7BU,IAAgB,KACZ;IACJ,MAAMP,cAAc,GAAG;MAAE,GAAGZ,UAAU;MAAE,CAAEmB,IAAI,GAAIV;IAAU,CAAC;IAE7D,IAAK/B,eAAe,CAAEkC,cAAe,CAAC,EAAG;MACxCxB,QAAQ,CAAEwB,cAAe,CAAC;IAC3B,CAAC,MAAM;MACNxB,QAAQ,CAAEqB,SAAU,CAAC;IACtB;EACD,CAAC;EAED,MAAMW,EAAE,GAAGrC,KAAK,CAAC,CAAC;EAClB,MAAMsC,OAAO,GAAGjD,OAAO,CAAE,MAAM;IAC9B,OAAOgD,EAAE,CAAE9C,MAAM,CAACgD,gBAAgB,EAAEpC,SAAU,CAAC;EAChD,CAAC,EAAE,CAAEkC,EAAE,EAAElC,SAAS,CAAG,CAAC;EAEtB,MAAMqC,sBAAsB,GAAGnD,OAAO,CAAE,MAAM;IAC7C,OAAOgD,EAAE,CAAE9C,MAAM,CAACkD,mBAAmB,CAAC,CAAE,CAAC;EAC1C,CAAC,EAAE,CAAEJ,EAAE,CAAG,CAAC;EAEX,MAAMK,gBAAgB,GAAGrD,OAAO,CAAE,MAAM;IACvC,OAAOgD,EAAE,CAAE9C,MAAM,CAACoD,OAAQ,CAAC;EAC5B,CAAC,EAAE,CAAEN,EAAE,CAAG,CAAC;EAEX,OAAO;IACN,GAAGzB,UAAU;IACbT,SAAS,EAAEmC,OAAO;IAClBlC,MAAM;IACNwC,YAAY,EAAE9B,YAAY,IAAI,CAAEI,aAAa;IAC7CZ,WAAW;IACXC,WAAW;IACXZ,eAAe,EAAEmB,YAAY;IAC7BQ,QAAQ;IACRkB,sBAAsB;IACtBf,cAAc;IACdU,aAAa;IACbX,YAAY;IACZR,WAAW;IACXR,IAAI,EAAEK,YAAY;IAClBI,UAAU;IACVyB,gBAAgB;IAChBhC;EACD,CAAC;AACF"}

package/build-module/border-box-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/border-box-control/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type {\n\tBorder,\n\tColorProps,\n\tLabelProps,\n\tBorderControlProps,\n} from '../border-control/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Borders = {\n\ttop?: Border;\n\tright?: Border;\n\tbottom?: Border;\n\tleft?: Border;\n};\n\nexport type AnyBorder = Border \| Borders \| undefined;\nexport type BorderProp = keyof Border;\nexport type BorderSide = keyof Borders;\n\nexport type BorderBoxControlProps = ColorProps &\n\tLabelProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback function invoked when any border value is changed. The value\n\t\t * received may be a \"flat\" border object, one that has properties defining\n\t\t * individual side borders, or `undefined`.\n\t\t /\n\t\tonChange: ( value: AnyBorder ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration.\n\t\t \n\t\t This may be a \"flat\" border where the object has `color`, `style`, and\n\t\t * `width` properties or a \"split\" border which defines the previous\n\t\t * properties but for each side; `top`, `right`, `bottom`, and `left`.\n\t\t /\n\t\tvalue: AnyBorder;\n\t};\n\nexport type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t This prop allows the `LinkedButton` to reflect whether the parent\n\t * `BorderBoxControl` is currently displaying \"linked\" or \"unlinked\"\n\t * border controls.\n\t /\n\tisLinked: boolean;\n\t/\n\t A callback invoked when this `LinkedButton` is clicked. It is used to\n\t * toggle display between linked or split border controls within the parent\n\t * `BorderBoxControl`.\n\t /\n\tonClick: () => void;\n};\n\nexport type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t An object representing the current border configuration. It contains\n\t * properties for each side, with each side an object reflecting the border\n\t * color, style, and width.\n\t /\n\tvalue?: Borders;\n};\n\nexport type SplitControlsProps = ColorProps &\n\tPick< BorderBoxControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback that is invoked whenever an individual side's border has\n\t\t * changed.\n\t\t /\n\t\tonChange: ( value: Border \| undefined, side: BorderSide ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration. It contains\n\t\t * properties for each side, with each side an object reflecting the border\n\t\t * color, style, and width.\n\t\t */\n\t\tvalue?: Borders;\n\t};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/border-box-control/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type {\n\tBorder,\n\tColorProps,\n\tLabelProps,\n\tBorderControlProps,\n} from '../border-control/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Borders = {\n\ttop?: Border;\n\tright?: Border;\n\tbottom?: Border;\n\tleft?: Border;\n};\n\nexport type AnyBorder = Border \| Borders \| undefined;\nexport type BorderProp = keyof Border;\nexport type BorderSide = keyof Borders;\n\nexport type BorderBoxControlProps = ColorProps &\n\tLabelProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback function invoked when any border value is changed. The value\n\t\t * received may be a \"flat\" border object, one that has properties defining\n\t\t * individual side borders, or `undefined`.\n\t\t /\n\t\tonChange: ( value: AnyBorder ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration.\n\t\t \n\t\t This may be a \"flat\" border where the object has `color`, `style`, and\n\t\t * `width` properties or a \"split\" border which defines the previous\n\t\t * properties but for each side; `top`, `right`, `bottom`, and `left`.\n\t\t /\n\t\tvalue: AnyBorder;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t This prop allows the `LinkedButton` to reflect whether the parent\n\t * `BorderBoxControl` is currently displaying \"linked\" or \"unlinked\"\n\t * border controls.\n\t /\n\tisLinked: boolean;\n\t/\n\t A callback invoked when this `LinkedButton` is clicked. It is used to\n\t * toggle display between linked or split border controls within the parent\n\t * `BorderBoxControl`.\n\t /\n\tonClick: () => void;\n};\n\nexport type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t An object representing the current border configuration. It contains\n\t * properties for each side, with each side an object reflecting the border\n\t * color, style, and width.\n\t /\n\tvalue?: Borders;\n};\n\nexport type SplitControlsProps = ColorProps &\n\tPick< BorderBoxControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback that is invoked whenever an individual side's border has\n\t\t * changed.\n\t\t /\n\t\tonChange: ( value: Border \| undefined, side: BorderSide ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration. It contains\n\t\t * properties for each side, with each side an object reflecting the border\n\t\t * color, style, and width.\n\t\t */\n\t\tvalue?: Borders;\n\t};\n"],"mappings":""}

package/build-module/border-control/border-control/component.js CHANGED Viewed

@@ -32,6 +32,7 @@ const BorderLabel = props => {
 };
 const UnconnectedBorderControl = (props, forwardedRef) => {
   const {
+    __next40pxDefaultSize = false,
     colors,
     disableCustomColors,
     disableUnits,
@@ -40,6 +41,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     hideLabelFromVision,
     innerWrapperClassName,
     inputWidth,
+    isStyleSettable,
     label,
     onBorderChange,
     onSliderChange,
@@ -75,6 +77,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
       disableCustomColors: disableCustomColors,
       enableAlpha: enableAlpha,
       enableStyle: enableStyle,
+      isStyleSettable: isStyleSettable,
       onChange: onBorderChange,
       previousStyleSelection: previousStyleSelection,
       showDropdownHeader: showDropdownHeader,
@@ -101,7 +104,8 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     onChange: onSliderChange,
     step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
     value: widthValue || undefined,
-    withInputField: false
+    withInputField: false,
+    __next40pxDefaultSize: __next40pxDefaultSize
   })));
 };

package/build-module/border-control/border-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","createElement","as","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","ref","spacing","className","prefix","onChange","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,OAAOC,WAAW,MAAM,oBAAoB;AAC5C,OAAOC,YAAY,MAAM,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,WAAW,QAAQ,+CAA+C;AAC3E,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,gBAAgB,QAAQ,QAAQ;AAIzC,MAAMC,WAAW,GAAKC,KAAiB,IAAM;EAC5C,MAAM;IAAEC,KAAK;IAAEC;EAAoB,CAAC,GAAGF,KAAK;EAE5C,IAAK,CAAEC,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OAAOC,mBAAmB,GACzBC,aAAA,CAACP,cAAc;IAACQ,EAAE,EAAC;EAAQ,GAAGH,KAAuB,CAAC,GAEtDE,aAAA,CAACT,WAAW;IAACU,EAAE,EAAC;EAAQ,GAAGH,KAAoB,CAC/C;AACF,CAAC;AAED,MAAMI,wBAAwB,GAAGA,CAChCL,KAAkE,EAClEM,YAAuC,KACnC;EACJ,MAAM;IACLC,MAAM;IACNC,mBAAmB;IACnBC,YAAY;IACZC,WAAW;IACXC,WAAW;~~IACXT~~,mBAAmB;~~IACnBU~~,qBAAqB;IACrBC,UAAU;~~IACVZ~~,KAAK;~~IACLa~~,cAAc;IACdC,cAAc;IACdC,aAAa;IACbC,WAAW;IACXC,sBAAsB;IACtBC,sBAAsB;IACtBC,kBAAkB;IAClBC,IAAI;IACJC,eAAe;IACfC,KAAK,EAAEC,MAAM;IACbC,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,~~GAAG/B~~,gBAAgB,CAAEE,KAAM,CAAC;EAE7B,OACCG,aAAA,CAACR,IAAI;IAACS,EAAE,EAAC,UAAU;IAAA,~~GAAMyB~~,UAAU;IAAGC,GAAG,~~EAAGxB~~;EAAc,GACzDH,aAAA,CAACJ,WAAW;IACXE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC,EACFC,aAAA,CAACV,MAAM;~~IAACsC~~,OAAO,EAAG,CAAG;IAACC,SAAS,~~EAAGpB~~;EAAuB,~~GACxDT~~,aAAA,CAACZ,WAAW;~~IACX0C~~,MAAM,~~EACL9B~~,aAAA,CAACb,qBAAqB;~~MACrBkC~~,MAAM,EAAGA,MAAQ;~~MACjBjB~~,MAAM,EAAGA,MAAQ;~~MACjBW~~,sBAAsB,EAAGA,sBAAwB;~~MACjDV~~,mBAAmB,EAAGA,mBAAqB;MAC3CE,WAAW,EAAGA,WAAa;MAC3BC,WAAW,EAAGA,WAAa;~~MAC3BuB~~,QAAQ,EAAGpB,cAAgB;MAC3BK,sBAAsB,EAAGA,sBAAwB;MACjDC,kBAAkB,EAAGA,kBAAoB;MACzCQ,iCAAiC,EAChCA,iCACA;MACDP,IAAI,EAAGA;IAAM,CACb,CACD;~~IACDpB~~,KAAK,EAAGZ,EAAE,CAAE,cAAe,CAAG;IAC9Ba,mBAAmB;~~IACnBiC~~,GAAG,EAAG,CAAG;IACTD,QAAQ,EAAGlB,aAAe;IAC1BO,KAAK,EAAGC,MAAM,EAAEY,KAAK,IAAI,EAAI;IAC7BnB,WAAW,EAAGA,WAAa;~~IAC3BR~~,YAAY,EAAGA,YAAc;~~IAC7B4B~~,oBAAoB,~~EAAGxB~~,UAAY;~~IACnCQ~~,IAAI,EAAGA;EAAM,CACb,CAAC,EACAM,UAAU,~~IACXxB~~,aAAA,CAACX,YAAY;~~IACZ8C~~,uBAAuB;~~IACvBrC~~,KAAK,EAAGZ,EAAE,CAAE,cAAe,CAAG;IAC9Ba,mBAAmB;~~IACnB8B~~,SAAS,EAAGV,eAAiB;IAC7BiB,eAAe,EAAG,CAAG;IACrBC,GAAG,EAAG,GAAK;IACXL,GAAG,EAAG,CAAG;IACTD,QAAQ,EAAGnB,cAAgB;IAC3B0B,IAAI,EAAG,CAAE,IAAI,EAAE,GAAG,CAAE,CAACC,QAAQ,CAAEjB,SAAU,CAAC,GAAG,CAAC,GAAG,GAAK;IACtDF,KAAK,EAAGG,UAAU,IAAIiB,SAAW;IACjCC,cAAc,EAAG;~~EAAO~~,~~CACxB~~,CAEK,CACH,CAAC;AAET,CAAC;;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;AACA,OAAO,~~MAAMC~~,aAAa,~~GAAGhD~~,cAAc,CAC1CQ,wBAAwB,EACxB,eACD,CAAC;AAED,~~eAAewC~~,aAAa"}
1	+ {"version":3,"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","createElement","as","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","ref","spacing","className","prefix","onChange","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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\t__next40pxDefaultSize = false,\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\tisStyleSettable,\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\tisStyleSettable={ isStyleSettable }\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\t__next40pxDefaultSize={ __next40pxDefaultSize }\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"],"mappings":"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"}

package/build-module/border-control/border-control/hook.js CHANGED Viewed

@@ -10,15 +10,12 @@ import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-const sanitizeBorder = border => {
-  const hasNoWidth = border?.width === undefined || border.width === '';
-  const hasNoColor = border?.color === undefined;
-  // If width and color are undefined, unset any style selection as well.
-  if (hasNoWidth && hasNoColor) {
-    return undefined;
-  }
-  return border;
+// If either width or color are defined, the border is considered valid
+// and a border style can be set as well.
+const isValidBorder = border => {
+  const hasWidth = border?.width !== undefined && border.width !== '';
+  const hasColor = border?.color !== undefined;
+  return hasWidth || hasColor;
 };
 export function useBorderControl(props) {
   const {
@@ -33,16 +30,20 @@ export function useBorderControl(props) {
     value: border,
     width,
     __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
     ...otherProps
   } = useContextSystem(props, 'BorderControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
   const widthUnit = originalWidthUnit || 'px';
   const hadPreviousZeroWidth = widthValue === 0;
   const [colorSelection, setColorSelection] = useState();
   const [styleSelection, setStyleSelection] = useState();
+  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
   const onBorderChange = useCallback(newBorder => {
-    if (shouldSanitizeBorder) {
-      return onChange(sanitizeBorder(newBorder));
+    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
+      onChange(undefined);
+      return;
     }
     onChange(newBorder);
   }, [onChange, shouldSanitizeBorder]);
@@ -99,9 +100,9 @@ export function useBorderControl(props) {
   }
   const innerWrapperClassName = useMemo(() => {
     const widthStyle = !!wrapperWidth && styles.wrapperWidth;
-    const heightStyle = styles.wrapperHeight(size);
+    const heightStyle = styles.wrapperHeight(computedSize);
     return cx(styles.innerWrapper(), widthStyle, heightStyle);
-  }, [wrapperWidth, cx, size]);
+  }, [wrapperWidth, cx, computedSize]);
   const sliderClassName = useMemo(() => {
     return cx(styles.borderSlider());
   }, [cx]);
@@ -113,6 +114,7 @@ export function useBorderControl(props) {
     enableStyle,
     innerWrapperClassName,
     inputWidth: wrapperWidth,
+    isStyleSettable,
     onBorderChange,
     onSliderChange,
     onWidthChange,
@@ -121,8 +123,9 @@ export function useBorderControl(props) {
     value: border,
     widthUnit,
     widthValue,
-    size,
-    __experimentalIsRenderedInSidebar
+    size: computedSize,
+    __experimentalIsRenderedInSidebar,
+    __next40pxDefaultSize
   };
 }
 //# sourceMappingURL=hook.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"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 type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEnE;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AACnC,SAASC,gCAAgC,QAAQ,0BAA0B;AAE3E,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAIhD,MAAMC,~~cAAc~~,GAAKC,MAAe,IAAM;~~EAC7C~~,MAAMC,~~UAAU~~,GAAGD,MAAM,EAAEE,KAAK,KAAKC,SAAS,IAAIH,MAAM,CAACE,KAAK,KAAK,EAAE;~~EACrE~~,MAAME,~~UAAU~~,GAAGJ,MAAM,EAAEK,KAAK,KAAKF,SAAS~~;;EAE9C~~;~~EACA~~,~~IAAKF~~,~~UAAU~~,IAAIG,~~UAAU,EAAG~~;~~IAC/B~~,~~OAAOD,SAAS;EACjB;EAEA,OAAOH,MAAM;AACd,~~CAAC;AAED,OAAO,~~SAASM~~,gBAAgBA,CAC/BC,KAA2D,EAC1D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,SAAS;IACTC,QAAQ;IACRC,WAAW,GAAG,IAAI;IAClBC,WAAW,GAAG,IAAI;IAClBC,oBAAoB,GAAG,IAAI;IAC3BC,IAAI,GAAG,SAAS;IAChBC,KAAK,EAAEhB,MAAM;IACbE,KAAK;IACLe,iCAAiC,GAAG,KAAK;~~IACzC~~,GAAGC;EACJ,CAAC,~~GAAGrB~~,gBAAgB,CAAEU,KAAK,EAAE,eAAgB,CAAC;EAE9C,MAAM,~~CAAEY~~,UAAU,EAAEC,iBAAiB,CAAE,~~GAAGxB~~,gCAAgC,CACzEI,MAAM,EAAEE,KACT,CAAC;EACD,~~MAAMmB~~,SAAS,GAAGD,iBAAiB,IAAI,IAAI;EAC3C,MAAME,oBAAoB,GAAGH,UAAU,KAAK,CAAC;EAE7C,MAAM,CAAEI,cAAc,EAAEC,iBAAiB,CAAE,~~GAAG9B~~,QAAQ,CAAW,CAAC;EAClE,MAAM,~~CAAE+B~~,cAAc,EAAEC,iBAAiB,CAAE,~~GAAGhC~~,QAAQ,CAAW,CAAC;EAElE,~~MAAMiC~~,cAAc,~~GAAGnC~~,WAAW,CAC/~~BoC~~,SAAkB,IAAM;IACzB,~~IAAKd~~,oBAAoB,EAAG;~~MAC3B~~,~~OAAOH,~~QAAQ,~~CAAEZ~~,~~cAAc,CAAE6B,~~SAAU,~~CAAE,~~CAAC;~~IAC/C~~;~~IAEAjB~~,QAAQ,~~CAAEiB~~,SAAU,CAAC;EACtB,CAAC,EACD,~~CAAEjB~~,QAAQ,EAAEG,oBAAoB,CACjC,CAAC;EAED,~~MAAMe~~,aAAa,~~GAAGrC~~,WAAW,~~CAC9BsC~~,QAAiB,IAAM;IACxB,MAAMC,aAAa,GAAGD,QAAQ,KAAK,EAAE,~~GAAG3B~~,SAAS,~~GAAG2B~~,QAAQ;IAC5D,MAAM,CAAEE,WAAW,CAAE,~~GACpBpC~~,gCAAgC,~~CAAEkC~~,QAAS,CAAC;IAC7C,MAAMG,YAAY,GAAGD,WAAW,KAAK,CAAC;IACtC,MAAME,aAAa,GAAG;MAAE,~~GAAGlC~~,MAAM;MAAEE,KAAK,~~EAAE6B~~;IAAc,CAAC;;IAEzD;IACA;IACA,IAAKE,YAAY,IAAI,~~CAAEX~~,oBAAoB,EAAG;MAC7C;MACA;MACA;MACAE,iBAAiB,~~CAAExB~~,MAAM,EAAEK,KAAM,CAAC;~~MAClCqB~~,iBAAiB,~~CAAE1B~~,MAAM,~~EAAEmC~~,KAAM,CAAC;;MAElC;MACAD,aAAa,~~CAAC7B~~,KAAK,GAAGF,SAAS;MAC/~~B+B~~,aAAa,CAACC,KAAK,GAAG,MAAM;IAC7B;;IAEA;IACA,IAAK,CAAEF,YAAY,~~IAAIX~~,oBAAoB,EAAG;MAC7C;MACA;MACA,~~IAAKY~~,aAAa,~~CAAC7B~~,KAAK,KAAKF,SAAS,EAAG;~~QACxC+B~~,aAAa,~~CAAC7B~~,KAAK,~~GAAGkB~~,cAAc;MACrC;MACA,~~IAAKW~~,aAAa,CAACC,KAAK,KAAK,MAAM,EAAG;QACrCD,aAAa,CAACC,KAAK,~~GAAGV~~,cAAc;MACrC;IACD;~~IAEAE~~,cAAc,CAAEO,aAAc,CAAC;EAChC,CAAC,EACD,~~CACClC~~,MAAM,~~EACNsB~~,oBAAoB,EACpBC,cAAc,EACdE,cAAc,~~EACdE~~,cAAc,CAEhB,CAAC;EAED,MAAMS,cAAc,~~GAAG5C~~,WAAW,CAC/BwB,KAAc,IAAM;~~IACrBa~~,aAAa,CAAG,~~GAAGb~~,KAAO,~~GAAGK~~,SAAW,EAAE,CAAC;EAC5C,CAAC,EACD,~~CAAEQ~~,aAAa,~~EAAER~~,SAAS,CAC3B,CAAC;;EAED;EACA,~~MAAMgB~~,EAAE,~~GAAGvC~~,KAAK,CAAC,CAAC;EAClB,~~MAAMwC~~,OAAO,~~GAAG7C~~,OAAO,CAAE,MAAM;IAC9B,~~OAAO4C~~,EAAE,~~CAAE1C~~,MAAM,~~CAAC4C~~,aAAa,~~EAAE/B~~,SAAU,CAAC;EAC7C,CAAC,EAAE,CAAEA,SAAS,~~EAAE6B~~,EAAE,CAAG,CAAC;EAEtB,IAAIG,YAAY,~~GAAGtC~~,KAAK;EACxB,IAAKQ,SAAS,EAAG;IAChB;IACA;~~IACA8B~~,YAAY,~~GAAGzB~~,IAAI,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM;EAC9D;EACA,~~MAAM0B~~,qBAAqB,~~GAAGhD~~,OAAO,CAAE,MAAM;IAC5C,~~MAAMiD~~,UAAU,GAAG,CAAC,CAAEF,YAAY,~~IAAI7C~~,MAAM,~~CAAC6C~~,YAAY;IACzD,MAAMG,WAAW,~~GAAGhD~~,MAAM,~~CAACiD~~,aAAa,~~CAAE7B~~,~~IAAK~~,CAAC;~~IAEhD~~,~~OAAOsB~~,EAAE,~~CAAE1C~~,MAAM,~~CAACkD~~,YAAY,CAAC,CAAC,EAAEH,UAAU,EAAEC,WAAY,CAAC;EAC5D,CAAC,EAAE,CAAEH,YAAY,EAAEH,EAAE,~~EAAEtB~~,~~IAAI~~,CAAG,CAAC;~~EAE/B~~,~~MAAM+B~~,eAAe,~~GAAGrD~~,OAAO,CAAE,MAAM;IACtC,~~OAAO4C~~,EAAE,~~CAAE1C~~,MAAM,~~CAACoD~~,YAAY,CAAC,CAAE,CAAC;EACnC,CAAC,EAAE,CAAEV,EAAE,CAAG,CAAC;EAEX,OAAO;IACN,~~GAAGnB~~,UAAU;~~IACbV~~,SAAS,~~EAAE8B~~,OAAO;~~IAClB7B~~,MAAM;IACNG,WAAW;IACXC,WAAW;~~IACX4B~~,qBAAqB;IACrBO,UAAU,EAAER,YAAY;~~IACxBb~~,cAAc;IACdS,cAAc;IACdP,aAAa;IACboB,sBAAsB,~~EAAExB~~,cAAc;~~IACtCqB~~,eAAe;~~IACf9B~~,KAAK,EAAEhB,MAAM;~~IACbqB~~,SAAS;IACTF,UAAU;~~IACVJ~~,IAAI;~~IACJE~~;EACD,CAAC;AACF"}
1	+ {"version":3,"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","computedSize","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"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 type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth \|\| hasColor;\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__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\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 isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\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( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\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\tisStyleSettable,\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: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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"}

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

@@ -90,6 +90,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     enableStyle,
     indicatorClassName,
     indicatorWrapperClassName,
+    isStyleSettable,
     onReset,
     onColorChange,
     onStyleChange,
@@ -146,7 +147,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     clearable: false,
     enableAlpha: enableAlpha
-  }), enableStyle && createElement(BorderControlStylePicker, {
+  }), enableStyle && isStyleSettable && createElement(BorderControlStylePicker, {
     label: __('Style'),
     value: style,
     onChange: onStyleChange

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","isMultiplePaletteArray","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","size","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","createElement","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","className","renderContent","onClose","Fragment","paddingSize","spacing","icon","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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 } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.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\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\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\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\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\tariaLabelValue,\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\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( 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\tariaLabelValue,\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\tariaLabelValue\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\tgetAriaLabelColorValue( colorObject.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\tgetAriaLabelColorValue( colorValue )\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\tsize,\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\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\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\tsize=\"small\"\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' ) }\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"],"mappings":"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"}
1	+ {"version":3,"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","isMultiplePaletteArray","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","size","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","createElement","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","className","renderContent","onClose","Fragment","paddingSize","spacing","icon","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../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 } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.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\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\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\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\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\tariaLabelValue,\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\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( 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\tariaLabelValue,\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\tariaLabelValue\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\tgetAriaLabelColorValue( colorObject.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\tgetAriaLabelColorValue( colorValue )\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\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tsize,\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\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\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\tsize=\"small\"\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 && isStyleSettable && (\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' ) }\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"],"mappings":"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"}

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

@@ -8,13 +8,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
-import { View } from '../../view';
-import { Flex } from '../../flex';
-import { VisuallyHidden } from '../../visually-hidden';
 import { contextConnect } from '../../context';
-import { useBorderControlStylePicker } from './hook';
+import { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';
 const BORDER_STYLES = [{
   label: __('Solid'),
   icon: lineSolid,
@@ -28,48 +23,26 @@ const BORDER_STYLES = [{
   icon: lineDotted,
   value: 'dotted'
 }];
-const Label = props => {
-  const {
-    label,
-    hideLabelFromVision
-  } = props;
-  if (!label) {
-    return null;
-  }
-  return hideLabelFromVision ? createElement(VisuallyHidden, {
-    as: "label"
-  }, label) : createElement(StyledLabel, null, label);
-};
-const BorderControlStylePicker = (props, forwardedRef) => {
-  const {
-    buttonClassName,
-    hideLabelFromVision,
-    label,
-    onChange,
-    value,
-    ...otherProps
-  } = useBorderControlStylePicker(props);
-  return createElement(View, {
-    ...otherProps,
-    ref: forwardedRef
-  }, createElement(Label, {
-    label: label,
-    hideLabelFromVision: hideLabelFromVision
-  }), createElement(Flex, {
-    justify: "flex-start",
-    gap: 1
-  }, BORDER_STYLES.map(borderStyle => createElement(Button, {
+function UnconnectedBorderControlStylePicker({
+  onChange,
+  ...restProps
+}, forwardedRef) {
+  return createElement(ToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    ref: forwardedRef,
+    isDeselectable: true,
+    onChange: value => {
+      onChange?.(value);
+    },
+    ...restProps
+  }, BORDER_STYLES.map(borderStyle => createElement(ToggleGroupControlOptionIcon, {
     key: borderStyle.value,
-    className: buttonClassName,
+    value: borderStyle.value,
     icon: borderStyle.icon,
-    size: "small",
-    isPressed: borderStyle.value === value,
-    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
-    "aria-label": borderStyle.label,
-    label: borderStyle.label,
-    showTooltip: true
-  }))));
-};
-const ConnectedBorderControlStylePicker = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker');
-export default ConnectedBorderControlStylePicker;
+    label: borderStyle.label
+  })));
+}
+const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
+export default BorderControlStylePicker;
 //# sourceMappingURL=component.js.map