@wordpress/components 29.1.1 → 29.3.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 (246) hide show
  1. package/CHANGELOG.md +29 -6
  2. package/CONTRIBUTING.md +4 -4
  3. package/README.md +1 -1
  4. package/build/badge/index.js +26 -22
  5. package/build/badge/index.js.map +1 -1
  6. package/build/border-box-control/border-box-control-linked-button/component.js +8 -15
  7. package/build/border-box-control/border-box-control-linked-button/component.js.map +1 -1
  8. package/build/box-control/index.js +6 -0
  9. package/build/box-control/index.js.map +1 -1
  10. package/build/box-control/linked-button.js +7 -11
  11. package/build/box-control/linked-button.js.map +1 -1
  12. package/build/box-control/types.js.map +1 -1
  13. package/build/circular-option-picker/circular-option-picker-option.js +9 -7
  14. package/build/circular-option-picker/circular-option-picker-option.js.map +1 -1
  15. package/build/circular-option-picker/circular-option-picker.js +0 -1
  16. package/build/circular-option-picker/circular-option-picker.js.map +1 -1
  17. package/build/color-palette/index.js +1 -6
  18. package/build/color-palette/index.js.map +1 -1
  19. package/build/font-size-picker/index.native.js +1 -1
  20. package/build/font-size-picker/index.native.js.map +1 -1
  21. package/build/higher-order/with-focus-return/index.js +1 -1
  22. package/build/higher-order/with-focus-return/index.js.map +1 -1
  23. package/build/input-control/styles/input-control-styles.js +22 -22
  24. package/build/input-control/styles/input-control-styles.js.map +1 -1
  25. package/build/menu/checkbox-item.js +6 -6
  26. package/build/menu/checkbox-item.js.map +1 -1
  27. package/build/menu/context.js +2 -2
  28. package/build/menu/context.js.map +1 -1
  29. package/build/menu/group-label.js +4 -4
  30. package/build/menu/group-label.js.map +1 -1
  31. package/build/menu/group.js +4 -4
  32. package/build/menu/group.js.map +1 -1
  33. package/build/menu/index.js +87 -14
  34. package/build/menu/index.js.map +1 -1
  35. package/build/menu/item-help-text.js +4 -4
  36. package/build/menu/item-help-text.js.map +1 -1
  37. package/build/menu/item-label.js +4 -4
  38. package/build/menu/item-label.js.map +1 -1
  39. package/build/menu/item.js +6 -6
  40. package/build/menu/item.js.map +1 -1
  41. package/build/menu/popover.js +5 -5
  42. package/build/menu/popover.js.map +1 -1
  43. package/build/menu/radio-item.js +6 -6
  44. package/build/menu/radio-item.js.map +1 -1
  45. package/build/menu/separator.js +4 -4
  46. package/build/menu/separator.js.map +1 -1
  47. package/build/menu/styles.js +41 -41
  48. package/build/menu/styles.js.map +1 -1
  49. package/build/menu/submenu-trigger-item.js +5 -5
  50. package/build/menu/submenu-trigger-item.js.map +1 -1
  51. package/build/menu/trigger-button.js +3 -3
  52. package/build/menu/trigger-button.js.map +1 -1
  53. package/build/menu/types.js.map +1 -1
  54. package/build/mobile/bottom-sheet/nav-bar/action-button.native.js +1 -1
  55. package/build/mobile/bottom-sheet/nav-bar/action-button.native.js.map +1 -1
  56. package/build/mobile/utils/get-px-from-css-unit.native.js +3 -3
  57. package/build/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  58. package/build/notice/types.js.map +1 -1
  59. package/build/search-control/index.js +1 -1
  60. package/build/search-control/index.js.map +1 -1
  61. package/build/text/hook.js +8 -6
  62. package/build/text/hook.js.map +1 -1
  63. package/build/text/utils.js +1 -1
  64. package/build/text/utils.js.map +1 -1
  65. package/build-module/badge/index.js +28 -22
  66. package/build-module/badge/index.js.map +1 -1
  67. package/build-module/border-box-control/border-box-control-linked-button/component.js +8 -15
  68. package/build-module/border-box-control/border-box-control-linked-button/component.js.map +1 -1
  69. package/build-module/box-control/index.js +6 -0
  70. package/build-module/box-control/index.js.map +1 -1
  71. package/build-module/box-control/linked-button.js +7 -11
  72. package/build-module/box-control/linked-button.js.map +1 -1
  73. package/build-module/box-control/types.js.map +1 -1
  74. package/build-module/circular-option-picker/circular-option-picker-option.js +9 -7
  75. package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
  76. package/build-module/circular-option-picker/circular-option-picker.js +0 -1
  77. package/build-module/circular-option-picker/circular-option-picker.js.map +1 -1
  78. package/build-module/color-palette/index.js +1 -6
  79. package/build-module/color-palette/index.js.map +1 -1
  80. package/build-module/font-size-picker/index.native.js +1 -1
  81. package/build-module/font-size-picker/index.native.js.map +1 -1
  82. package/build-module/higher-order/with-focus-return/index.js +1 -1
  83. package/build-module/higher-order/with-focus-return/index.js.map +1 -1
  84. package/build-module/input-control/styles/input-control-styles.js +22 -22
  85. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  86. package/build-module/menu/checkbox-item.js +6 -6
  87. package/build-module/menu/checkbox-item.js.map +1 -1
  88. package/build-module/menu/context.js +1 -1
  89. package/build-module/menu/context.js.map +1 -1
  90. package/build-module/menu/group-label.js +4 -4
  91. package/build-module/menu/group-label.js.map +1 -1
  92. package/build-module/menu/group.js +4 -4
  93. package/build-module/menu/group.js.map +1 -1
  94. package/build-module/menu/index.js +99 -26
  95. package/build-module/menu/index.js.map +1 -1
  96. package/build-module/menu/item-help-text.js +4 -4
  97. package/build-module/menu/item-help-text.js.map +1 -1
  98. package/build-module/menu/item-label.js +4 -4
  99. package/build-module/menu/item-label.js.map +1 -1
  100. package/build-module/menu/item.js +6 -6
  101. package/build-module/menu/item.js.map +1 -1
  102. package/build-module/menu/popover.js +5 -5
  103. package/build-module/menu/popover.js.map +1 -1
  104. package/build-module/menu/radio-item.js +6 -6
  105. package/build-module/menu/radio-item.js.map +1 -1
  106. package/build-module/menu/separator.js +4 -4
  107. package/build-module/menu/separator.js.map +1 -1
  108. package/build-module/menu/styles.js +40 -40
  109. package/build-module/menu/styles.js.map +1 -1
  110. package/build-module/menu/submenu-trigger-item.js +6 -6
  111. package/build-module/menu/submenu-trigger-item.js.map +1 -1
  112. package/build-module/menu/trigger-button.js +3 -3
  113. package/build-module/menu/trigger-button.js.map +1 -1
  114. package/build-module/menu/types.js.map +1 -1
  115. package/build-module/mobile/bottom-sheet/nav-bar/action-button.native.js +1 -1
  116. package/build-module/mobile/bottom-sheet/nav-bar/action-button.native.js.map +1 -1
  117. package/build-module/mobile/utils/get-px-from-css-unit.native.js +3 -3
  118. package/build-module/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  119. package/build-module/notice/types.js.map +1 -1
  120. package/build-module/search-control/index.js +1 -1
  121. package/build-module/search-control/index.js.map +1 -1
  122. package/build-module/text/hook.js +8 -6
  123. package/build-module/text/hook.js.map +1 -1
  124. package/build-module/text/utils.js +1 -1
  125. package/build-module/text/utils.js.map +1 -1
  126. package/build-style/style-rtl.css +89 -170
  127. package/build-style/style.css +89 -170
  128. package/build-types/badge/index.d.ts.map +1 -1
  129. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -1
  130. package/build-types/box-control/index.d.ts.map +1 -1
  131. package/build-types/box-control/linked-button.d.ts.map +1 -1
  132. package/build-types/box-control/stories/index.story.d.ts +7 -2331
  133. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  134. package/build-types/box-control/types.d.ts +15 -3
  135. package/build-types/box-control/types.d.ts.map +1 -1
  136. package/build-types/circular-option-picker/circular-option-picker-option.d.ts.map +1 -1
  137. package/build-types/circular-option-picker/circular-option-picker.d.ts.map +1 -1
  138. package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
  139. package/build-types/color-palette/index.d.ts.map +1 -1
  140. package/build-types/higher-order/with-focus-return/index.d.ts +1 -1
  141. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  142. package/build-types/menu/checkbox-item.d.ts +2 -2
  143. package/build-types/menu/checkbox-item.d.ts.map +1 -1
  144. package/build-types/menu/context.d.ts +2 -2
  145. package/build-types/menu/context.d.ts.map +1 -1
  146. package/build-types/menu/group-label.d.ts +2 -2
  147. package/build-types/menu/group-label.d.ts.map +1 -1
  148. package/build-types/menu/group.d.ts +2 -2
  149. package/build-types/menu/group.d.ts.map +1 -1
  150. package/build-types/menu/index.d.ts +84 -12
  151. package/build-types/menu/index.d.ts.map +1 -1
  152. package/build-types/menu/item-help-text.d.ts +1 -1
  153. package/build-types/menu/item-help-text.d.ts.map +1 -1
  154. package/build-types/menu/item-label.d.ts +1 -1
  155. package/build-types/menu/item-label.d.ts.map +1 -1
  156. package/build-types/menu/item.d.ts +2 -2
  157. package/build-types/menu/item.d.ts.map +1 -1
  158. package/build-types/menu/popover.d.ts +2 -2
  159. package/build-types/menu/popover.d.ts.map +1 -1
  160. package/build-types/menu/radio-item.d.ts +2 -2
  161. package/build-types/menu/radio-item.d.ts.map +1 -1
  162. package/build-types/menu/separator.d.ts +2 -2
  163. package/build-types/menu/separator.d.ts.map +1 -1
  164. package/build-types/menu/styles.d.ts +15 -15
  165. package/build-types/menu/styles.d.ts.map +1 -1
  166. package/build-types/menu/submenu-trigger-item.d.ts +2 -2
  167. package/build-types/menu/submenu-trigger-item.d.ts.map +1 -1
  168. package/build-types/menu/trigger-button.d.ts +2 -2
  169. package/build-types/menu/trigger-button.d.ts.map +1 -1
  170. package/build-types/menu/types.d.ts +10 -10
  171. package/build-types/menu/types.d.ts.map +1 -1
  172. package/build-types/menu-group/stories/index.story.d.ts +1 -1
  173. package/build-types/notice/types.d.ts +1 -1
  174. package/build-types/progress-bar/stories/index.story.d.ts +1 -1
  175. package/build-types/tabs/stories/index.story.d.ts +0 -3
  176. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  177. package/build-types/text/hook.d.ts.map +1 -1
  178. package/build-types/text/utils.d.ts +1 -1
  179. package/package.json +19 -19
  180. package/src/animate/style.scss +16 -12
  181. package/src/badge/index.tsx +28 -27
  182. package/src/border-box-control/border-box-control-linked-button/component.tsx +9 -14
  183. package/src/border-control/test/index.js +12 -4
  184. package/src/box-control/index.tsx +9 -0
  185. package/src/box-control/linked-button.tsx +8 -11
  186. package/src/box-control/test/index.tsx +9 -2
  187. package/src/box-control/types.ts +26 -11
  188. package/src/button/style.scss +15 -12
  189. package/src/checkbox-control/style.scss +4 -2
  190. package/src/circular-option-picker/README.md +1 -2
  191. package/src/circular-option-picker/circular-option-picker-option.tsx +17 -10
  192. package/src/circular-option-picker/circular-option-picker.tsx +0 -1
  193. package/src/circular-option-picker/stories/index.story.tsx +0 -1
  194. package/src/circular-option-picker/style.scss +10 -5
  195. package/src/color-palette/index.tsx +0 -7
  196. package/src/color-palette/test/index.tsx +2 -8
  197. package/src/combobox-control/test/index.tsx +1 -1
  198. package/src/drop-zone/style.scss +6 -9
  199. package/src/font-size-picker/index.native.js +1 -1
  200. package/src/form-toggle/style.scss +17 -10
  201. package/src/form-token-field/style.scss +9 -4
  202. package/src/higher-order/navigate-regions/style.scss +2 -2
  203. package/src/higher-order/with-focus-return/index.tsx +1 -1
  204. package/src/input-control/styles/input-control-styles.tsx +6 -0
  205. package/src/menu/README.md +421 -174
  206. package/src/menu/checkbox-item.tsx +12 -12
  207. package/src/menu/context.tsx +2 -4
  208. package/src/menu/docs-manifest.json +62 -0
  209. package/src/menu/group-label.tsx +7 -7
  210. package/src/menu/group.tsx +7 -11
  211. package/src/menu/index.tsx +101 -31
  212. package/src/menu/item-help-text.tsx +5 -7
  213. package/src/menu/item-label.tsx +5 -7
  214. package/src/menu/item.tsx +12 -12
  215. package/src/menu/popover.tsx +9 -9
  216. package/src/menu/radio-item.tsx +12 -12
  217. package/src/menu/separator.tsx +7 -7
  218. package/src/menu/stories/best-practices.mdx +38 -0
  219. package/src/menu/stories/index.story.tsx +8 -8
  220. package/src/menu/styles.ts +24 -24
  221. package/src/menu/submenu-trigger-item.tsx +9 -9
  222. package/src/menu/trigger-button.tsx +6 -6
  223. package/src/menu/types.ts +10 -10
  224. package/src/menu-group/stories/index.story.tsx +2 -2
  225. package/src/mobile/bottom-sheet/nav-bar/action-button.native.js +1 -1
  226. package/src/mobile/utils/get-px-from-css-unit.native.js +3 -3
  227. package/src/modal/style.scss +4 -2
  228. package/src/modal/test/index.tsx +5 -4
  229. package/src/notice/README.md +3 -3
  230. package/src/notice/types.ts +1 -1
  231. package/src/palette-edit/test/index.tsx +1 -1
  232. package/src/panel/style.scss +14 -6
  233. package/src/placeholder/style.scss +5 -3
  234. package/src/progress-bar/stories/index.story.tsx +1 -1
  235. package/src/resizable-box/style.scss +14 -9
  236. package/src/search-control/index.tsx +1 -1
  237. package/src/tab-panel/style.scss +6 -4
  238. package/src/tabs/stories/index.story.tsx +0 -131
  239. package/src/text/README.md +1 -1
  240. package/src/text/hook.ts +3 -2
  241. package/src/text/stories/index.story.tsx +2 -2
  242. package/src/text/test/index.tsx +1 -1
  243. package/src/text/utils.ts +1 -1
  244. package/src/text-highlight/test/index.tsx +3 -3
  245. package/src/toolbar/toolbar/style.scss +4 -3
  246. package/tsconfig.tsbuildinfo +1 -1
@@ -15,17 +15,18 @@ import { Icon, check } from '@wordpress/icons';
15
15
  import { CircularOptionPickerContext } from './circular-option-picker-context';
16
16
  import Button from '../button';
17
17
  import { Composite } from '../composite';
18
- import Tooltip from '../tooltip';
19
18
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
20
19
  function UnforwardedOptionAsButton(props, forwardedRef) {
21
20
  const {
22
21
  isPressed,
22
+ label,
23
23
  ...additionalProps
24
24
  } = props;
25
25
  return /*#__PURE__*/_jsx(Button, {
26
26
  ...additionalProps,
27
27
  "aria-pressed": isPressed,
28
- ref: forwardedRef
28
+ ref: forwardedRef,
29
+ label: label
29
30
  });
30
31
  }
31
32
  const OptionAsButton = forwardRef(UnforwardedOptionAsButton);
@@ -33,6 +34,7 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
33
34
  const {
34
35
  id,
35
36
  isSelected,
37
+ label,
36
38
  ...additionalProps
37
39
  } = props;
38
40
  const {
@@ -52,7 +54,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
52
54
  ...additionalProps,
53
55
  role: "option",
54
56
  "aria-selected": !!isSelected,
55
- ref: forwardedRef
57
+ ref: forwardedRef,
58
+ label: label
56
59
  }),
57
60
  id: id
58
61
  });
@@ -79,17 +82,16 @@ export function Option({
79
82
  const isListbox = setActiveId !== undefined;
80
83
  const optionControl = isListbox ? /*#__PURE__*/_jsx(OptionAsOption, {
81
84
  ...commonProps,
85
+ label: tooltipText,
82
86
  isSelected: isSelected
83
87
  }) : /*#__PURE__*/_jsx(OptionAsButton, {
84
88
  ...commonProps,
89
+ label: tooltipText,
85
90
  isPressed: isSelected
86
91
  });
87
92
  return /*#__PURE__*/_jsxs("div", {
88
93
  className: clsx(className, 'components-circular-option-picker__option-wrapper'),
89
- children: [tooltipText ? /*#__PURE__*/_jsx(Tooltip, {
90
- text: tooltipText,
91
- children: optionControl
92
- }) : optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {
94
+ children: [optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {
93
95
  icon: check,
94
96
  ...selectedIconProps
95
97
  })]
@@ -1 +1 @@
1
- {"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","useEffect","Icon","check","CircularOptionPickerContext","Button","Composite","Tooltip","jsx","_jsx","jsxs","_jsxs","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","window","setTimeout","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","children","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","useEffect","Icon","check","CircularOptionPickerContext","Button","Composite","jsx","_jsx","jsxs","_jsxs","UnforwardedOptionAsButton","props","forwardedRef","isPressed","label","additionalProps","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","window","setTimeout","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","children","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, label, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, label, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisPressed={ isSelected }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ optionControl }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
@@ -43,7 +43,6 @@ import { ButtonAction, DropdownLinkAction } from './circular-option-picker-actio
43
43
  * style={ { backgroundColor: color, color } }
44
44
  * isSelected={ index === currentColor }
45
45
  * onClick={ () => setCurrentColor( index ) }
46
- * aria-label={ name }
47
46
  * />
48
47
  * );
49
48
  * } ) }
@@ -1 +1 @@
1
- {"version":3,"names":["clsx","useInstanceId","isRTL","useMemo","useState","CircularOptionPickerContext","Composite","Option","OptionGroup","ButtonAction","DropdownLinkAction","jsx","_jsx","jsxs","_jsxs","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","undefined","contextValue","Provider","value","id","focusLoop","rtl","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","OptionPickerImplementation"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["clsx","useInstanceId","isRTL","useMemo","useState","CircularOptionPickerContext","Composite","Option","OptionGroup","ButtonAction","DropdownLinkAction","jsx","_jsx","jsxs","_jsxs","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","undefined","contextValue","Provider","value","id","focusLoop","rtl","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","OptionPickerImplementation"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}
@@ -55,12 +55,7 @@ function SinglePalette({
55
55
  backgroundColor: color,
56
56
  color
57
57
  },
58
- onClick: isSelected ? clearColor : () => onChange(color, index),
59
- "aria-label": name ?
60
- // translators: %s: The name of the color e.g: "vivid red".
61
- sprintf(__('Color: %s'), name) :
62
- // translators: %s: color hex code e.g: "#f00".
63
- sprintf(__('Color code: %s'), color)
58
+ onClick: isSelected ? clearColor : () => onChange(color, index)
64
59
  }, `${color}-${index}`);
65
60
  });
66
61
  }, [colors, value, onChange, clearColor]);
@@ -1 +1 @@
1
- {"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","clsx","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","jsx","_jsx","jsxs","_jsxs","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","Option","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","children","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","clsx","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","jsx","_jsx","jsxs","_jsxs","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","Option","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","children","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
@@ -108,7 +108,7 @@ function FontSizePicker({
108
108
  })
109
109
  })
110
110
  }, "default"), fontSizes.map((item, index) => {
111
- // Only display a choice that we can currenly select.
111
+ // Only display a choice that we can currently select.
112
112
  if (!parseFloat(item.sizePx)) {
113
113
  return null;
114
114
  }
@@ -1 +1 @@
1
- {"version":3,"names":["View","useWindowDimensions","useNavigation","useState","Icon","chevronRight","check","__","_x","sprintf","default","getPxFromCssUnit","UnitControl","useCustomUnits","styles","BottomSheet","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","navigation","height","width","cssUnitOptions","fontSize","selectedPxValue","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","SubSheet","screenName","label","units","availableUnits","accessibilityLabel","navigationButton","Cell","separatorType","onPress","accessibilityRole","accessibilityHint","children","icon","showSheet","NavBar","BackButton","Heading","style","customActionButton","undefined","leftAlign","map","item","index","parseFloat","subLabel","min","max","step","nextSize"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\nimport BottomSheet from '../mobile/bottom-sheet';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],\n\t} );\n\n\tconst accessibilityLabel = sprintf(\n\t\t// translators: %s: Font size name e.g. Small\n\t\t__( 'Font Size, %s' ),\n\t\tselectedOption.name\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t_x( '%1$s (%2$s)', 'font size' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tkey=\"default\"\n\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The selected option.\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["View","useWindowDimensions","useNavigation","useState","Icon","chevronRight","check","__","_x","sprintf","default","getPxFromCssUnit","UnitControl","useCustomUnits","styles","BottomSheet","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","_fontSizes$find","showSubSheet","setShowSubSheet","navigation","height","width","cssUnitOptions","fontSize","selectedPxValue","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","SubSheet","screenName","label","units","availableUnits","accessibilityLabel","navigationButton","Cell","separatorType","onPress","accessibilityRole","accessibilityHint","children","icon","showSheet","NavBar","BackButton","Heading","style","customActionButton","undefined","leftAlign","map","item","index","parseFloat","subLabel","min","max","step","nextSize"],"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\nimport BottomSheet from '../mobile/bottom-sheet';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],\n\t} );\n\n\tconst accessibilityLabel = sprintf(\n\t\t// translators: %s: Font size name e.g. Small\n\t\t__( 'Font Size, %s' ),\n\t\tselectedOption.name\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t_x( '%1$s (%2$s)', 'font size' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tkey=\"default\"\n\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currently select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The selected option.\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"],"mappings":"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","ignoreList":[]}
@@ -28,7 +28,7 @@ function isComponentLike(object) {
28
28
  * describing the component and the
29
29
  * focus return characteristics.
30
30
  *
31
- * @return Higher Order Component with the focus restauration behaviour.
31
+ * @return Higher Order Component with the focus restoration behaviour.
32
32
  */
33
33
  export default createHigherOrderComponent(
34
34
  // @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
@@ -1 +1 @@
1
- {"version":3,"names":["Component","createHigherOrderComponent","useFocusReturn","deprecated","jsx","_jsx","isComponentLike","object","options","HoC","onFocusReturn","WrappedComponent","WithFocusReturn","props","ref","children","Provider","since","hint"],"sources":["@wordpress/components/src/higher-order/with-focus-return/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Returns true if the given object is component-like. An object is component-\n * like if it is an instance of wp.element.Component, or is a function.\n *\n * @param object Object to test.\n *\n * @return Whether object is component-like.\n */\nfunction isComponentLike( object: any ): object is React.ComponentType {\n\treturn object instanceof Component || typeof object === 'function';\n}\n\ntype Props = {\n\tonFocusReturn?: () => void;\n};\n\n/**\n * Higher Order Component used to be used to wrap disposable elements like\n * sidebars, modals, dropdowns. When mounting the wrapped component, we track a\n * reference to the current active element so we know where to restore focus\n * when the component is unmounted.\n *\n * @param options The component to be enhanced with\n * focus return behavior, or an object\n * describing the component and the\n * focus return characteristics.\n *\n * @return Higher Order Component with the focus restauration behaviour.\n */\nexport default createHigherOrderComponent(\n\t// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types\n\t( options: React.ComponentType | Record< string, unknown > ) => {\n\t\tconst HoC =\n\t\t\t( { onFocusReturn }: Props = {} ) =>\n\t\t\t( WrappedComponent: React.ComponentType ) => {\n\t\t\t\tconst WithFocusReturn = (\n\t\t\t\t\tprops: Record< string, unknown >\n\t\t\t\t) => {\n\t\t\t\t\tconst ref = useFocusReturn( onFocusReturn );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div ref={ ref }>\n\t\t\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t};\n\n\t\t\t\treturn WithFocusReturn;\n\t\t\t};\n\n\t\tif ( isComponentLike( options ) ) {\n\t\t\tconst WrappedComponent = options;\n\t\t\treturn HoC()( WrappedComponent );\n\t\t}\n\n\t\treturn HoC( options );\n\t},\n\t'withFocusReturn'\n);\n\nexport const Provider = ( { children }: { children: React.ReactNode } ) => {\n\tdeprecated( 'wp.components.FocusReturnProvider component', {\n\t\tsince: '5.7',\n\t\thint: 'This provider is not used anymore. You can just remove it from your codebase',\n\t} );\n\n\treturn children;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,0BAA0B,EAAEC,cAAc,QAAQ,oBAAoB;AAC/E,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAQA,SAASC,eAAeA,CAAEC,MAAW,EAAkC;EACtE,OAAOA,MAAM,YAAYP,SAAS,IAAI,OAAOO,MAAM,KAAK,UAAU;AACnE;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeN,0BAA0B;AACxC;AACEO,OAAwD,IAAM;EAC/D,MAAMC,GAAG,GACRA,CAAE;IAAEC;EAAqB,CAAC,GAAG,CAAC,CAAC,KAC7BC,gBAAqC,IAAM;IAC5C,MAAMC,eAAe,GACpBC,KAAgC,IAC5B;MACJ,MAAMC,GAAG,GAAGZ,cAAc,CAAEQ,aAAc,CAAC;MAC3C,oBACCL,IAAA;QAAKS,GAAG,EAAGA,GAAK;QAAAC,QAAA,eACfV,IAAA,CAACM,gBAAgB;UAAA,GAAME;QAAK,CAAI;MAAC,CAC7B,CAAC;IAER,CAAC;IAED,OAAOD,eAAe;EACvB,CAAC;EAEF,IAAKN,eAAe,CAAEE,OAAQ,CAAC,EAAG;IACjC,MAAMG,gBAAgB,GAAGH,OAAO;IAChC,OAAOC,GAAG,CAAC,CAAC,CAAEE,gBAAiB,CAAC;EACjC;EAEA,OAAOF,GAAG,CAAED,OAAQ,CAAC;AACtB,CAAC,EACD,iBACD,CAAC;AAED,OAAO,MAAMQ,QAAQ,GAAGA,CAAE;EAAED;AAAwC,CAAC,KAAM;EAC1EZ,UAAU,CAAE,6CAA6C,EAAE;IAC1Dc,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE;EACP,CAAE,CAAC;EAEH,OAAOH,QAAQ;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["Component","createHigherOrderComponent","useFocusReturn","deprecated","jsx","_jsx","isComponentLike","object","options","HoC","onFocusReturn","WrappedComponent","WithFocusReturn","props","ref","children","Provider","since","hint"],"sources":["@wordpress/components/src/higher-order/with-focus-return/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Returns true if the given object is component-like. An object is component-\n * like if it is an instance of wp.element.Component, or is a function.\n *\n * @param object Object to test.\n *\n * @return Whether object is component-like.\n */\nfunction isComponentLike( object: any ): object is React.ComponentType {\n\treturn object instanceof Component || typeof object === 'function';\n}\n\ntype Props = {\n\tonFocusReturn?: () => void;\n};\n\n/**\n * Higher Order Component used to be used to wrap disposable elements like\n * sidebars, modals, dropdowns. When mounting the wrapped component, we track a\n * reference to the current active element so we know where to restore focus\n * when the component is unmounted.\n *\n * @param options The component to be enhanced with\n * focus return behavior, or an object\n * describing the component and the\n * focus return characteristics.\n *\n * @return Higher Order Component with the focus restoration behaviour.\n */\nexport default createHigherOrderComponent(\n\t// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types\n\t( options: React.ComponentType | Record< string, unknown > ) => {\n\t\tconst HoC =\n\t\t\t( { onFocusReturn }: Props = {} ) =>\n\t\t\t( WrappedComponent: React.ComponentType ) => {\n\t\t\t\tconst WithFocusReturn = (\n\t\t\t\t\tprops: Record< string, unknown >\n\t\t\t\t) => {\n\t\t\t\t\tconst ref = useFocusReturn( onFocusReturn );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div ref={ ref }>\n\t\t\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t};\n\n\t\t\t\treturn WithFocusReturn;\n\t\t\t};\n\n\t\tif ( isComponentLike( options ) ) {\n\t\t\tconst WrappedComponent = options;\n\t\t\treturn HoC()( WrappedComponent );\n\t\t}\n\n\t\treturn HoC( options );\n\t},\n\t'withFocusReturn'\n);\n\nexport const Provider = ( { children }: { children: React.ReactNode } ) => {\n\tdeprecated( 'wp.components.FocusReturnProvider component', {\n\t\tsince: '5.7',\n\t\thint: 'This provider is not used anymore. You can just remove it from your codebase',\n\t} );\n\n\treturn children;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,0BAA0B,EAAEC,cAAc,QAAQ,oBAAoB;AAC/E,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAQA,SAASC,eAAeA,CAAEC,MAAW,EAAkC;EACtE,OAAOA,MAAM,YAAYP,SAAS,IAAI,OAAOO,MAAM,KAAK,UAAU;AACnE;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeN,0BAA0B;AACxC;AACEO,OAAwD,IAAM;EAC/D,MAAMC,GAAG,GACRA,CAAE;IAAEC;EAAqB,CAAC,GAAG,CAAC,CAAC,KAC7BC,gBAAqC,IAAM;IAC5C,MAAMC,eAAe,GACpBC,KAAgC,IAC5B;MACJ,MAAMC,GAAG,GAAGZ,cAAc,CAAEQ,aAAc,CAAC;MAC3C,oBACCL,IAAA;QAAKS,GAAG,EAAGA,GAAK;QAAAC,QAAA,eACfV,IAAA,CAACM,gBAAgB;UAAA,GAAME;QAAK,CAAI;MAAC,CAC7B,CAAC;IAER,CAAC;IAED,OAAOD,eAAe;EACvB,CAAC;EAEF,IAAKN,eAAe,CAAEE,OAAQ,CAAC,EAAG;IACjC,MAAMG,gBAAgB,GAAGH,OAAO;IAChC,OAAOC,GAAG,CAAC,CAAC,CAAEE,gBAAiB,CAAC;EACjC;EAEA,OAAOF,GAAG,CAAED,OAAQ,CAAC;AACtB,CAAC,EACD,iBACD,CAAC;AAED,OAAO,MAAMQ,QAAQ,GAAGA,CAAE;EAAED;AAAwC,CAAC,KAAM;EAC1EZ,UAAU,CAAE,6CAA6C,EAAE;IAC1Dc,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE;EACP,CAAE,CAAC;EAEH,OAAOH,QAAQ;AAChB,CAAC","ignoreList":[]}