@wordpress/components 30.1.0 → 30.2.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 (211) hide show
  1. package/CHANGELOG.md +19 -3
  2. package/build/custom-gradient-picker/serializer.js +14 -0
  3. package/build/custom-gradient-picker/serializer.js.map +1 -1
  4. package/build/custom-gradient-picker/utils.js +12 -0
  5. package/build/custom-gradient-picker/utils.js.map +1 -1
  6. package/build/date-time/date/index.js +2 -4
  7. package/build/date-time/date/index.js.map +1 -1
  8. package/build/date-time/date/styles.js +41 -20
  9. package/build/date-time/date/styles.js.map +1 -1
  10. package/build/menu-item/index.js +1 -0
  11. package/build/menu-item/index.js.map +1 -1
  12. package/build/validated-form-controls/components/checkbox-control.js +5 -3
  13. package/build/validated-form-controls/components/checkbox-control.js.map +1 -1
  14. package/build/validated-form-controls/components/combobox-control.js +5 -3
  15. package/build/validated-form-controls/components/combobox-control.js.map +1 -1
  16. package/build/validated-form-controls/components/custom-select-control.js +5 -3
  17. package/build/validated-form-controls/components/custom-select-control.js.map +1 -1
  18. package/build/validated-form-controls/components/input-control.js +5 -3
  19. package/build/validated-form-controls/components/input-control.js.map +1 -1
  20. package/build/validated-form-controls/components/number-control.js +5 -3
  21. package/build/validated-form-controls/components/number-control.js.map +1 -1
  22. package/build/validated-form-controls/components/radio-control.js +5 -3
  23. package/build/validated-form-controls/components/radio-control.js.map +1 -1
  24. package/build/validated-form-controls/components/range-control.js +5 -3
  25. package/build/validated-form-controls/components/range-control.js.map +1 -1
  26. package/build/validated-form-controls/components/select-control.js +5 -3
  27. package/build/validated-form-controls/components/select-control.js.map +1 -1
  28. package/build/validated-form-controls/components/text-control.js +5 -3
  29. package/build/validated-form-controls/components/text-control.js.map +1 -1
  30. package/build/validated-form-controls/components/textarea-control.js +5 -3
  31. package/build/validated-form-controls/components/textarea-control.js.map +1 -1
  32. package/build/validated-form-controls/components/toggle-control.js +5 -3
  33. package/build/validated-form-controls/components/toggle-control.js.map +1 -1
  34. package/build/validated-form-controls/components/toggle-group-control.js +5 -3
  35. package/build/validated-form-controls/components/toggle-group-control.js.map +1 -1
  36. package/build/validated-form-controls/components/types.js.map +1 -1
  37. package/build/validated-form-controls/control-with-error.js +57 -22
  38. package/build/validated-form-controls/control-with-error.js.map +1 -1
  39. package/build/validated-form-controls/validity-indicator.js +45 -0
  40. package/build/validated-form-controls/validity-indicator.js.map +1 -0
  41. package/build-module/custom-gradient-picker/serializer.js +14 -0
  42. package/build-module/custom-gradient-picker/serializer.js.map +1 -1
  43. package/build-module/custom-gradient-picker/utils.js +12 -0
  44. package/build-module/custom-gradient-picker/utils.js.map +1 -1
  45. package/build-module/date-time/date/index.js +3 -4
  46. package/build-module/date-time/date/index.js.map +1 -1
  47. package/build-module/date-time/date/styles.js +39 -14
  48. package/build-module/date-time/date/styles.js.map +1 -1
  49. package/build-module/menu-item/index.js +1 -0
  50. package/build-module/menu-item/index.js.map +1 -1
  51. package/build-module/validated-form-controls/components/checkbox-control.js +5 -3
  52. package/build-module/validated-form-controls/components/checkbox-control.js.map +1 -1
  53. package/build-module/validated-form-controls/components/combobox-control.js +5 -3
  54. package/build-module/validated-form-controls/components/combobox-control.js.map +1 -1
  55. package/build-module/validated-form-controls/components/custom-select-control.js +5 -3
  56. package/build-module/validated-form-controls/components/custom-select-control.js.map +1 -1
  57. package/build-module/validated-form-controls/components/input-control.js +5 -3
  58. package/build-module/validated-form-controls/components/input-control.js.map +1 -1
  59. package/build-module/validated-form-controls/components/number-control.js +5 -3
  60. package/build-module/validated-form-controls/components/number-control.js.map +1 -1
  61. package/build-module/validated-form-controls/components/radio-control.js +5 -3
  62. package/build-module/validated-form-controls/components/radio-control.js.map +1 -1
  63. package/build-module/validated-form-controls/components/range-control.js +5 -3
  64. package/build-module/validated-form-controls/components/range-control.js.map +1 -1
  65. package/build-module/validated-form-controls/components/select-control.js +5 -3
  66. package/build-module/validated-form-controls/components/select-control.js.map +1 -1
  67. package/build-module/validated-form-controls/components/text-control.js +5 -3
  68. package/build-module/validated-form-controls/components/text-control.js.map +1 -1
  69. package/build-module/validated-form-controls/components/textarea-control.js +5 -3
  70. package/build-module/validated-form-controls/components/textarea-control.js.map +1 -1
  71. package/build-module/validated-form-controls/components/toggle-control.js +5 -3
  72. package/build-module/validated-form-controls/components/toggle-control.js.map +1 -1
  73. package/build-module/validated-form-controls/components/toggle-group-control.js +5 -3
  74. package/build-module/validated-form-controls/components/toggle-group-control.js.map +1 -1
  75. package/build-module/validated-form-controls/components/types.js.map +1 -1
  76. package/build-module/validated-form-controls/control-with-error.js +57 -21
  77. package/build-module/validated-form-controls/control-with-error.js.map +1 -1
  78. package/build-module/validated-form-controls/validity-indicator.js +37 -0
  79. package/build-module/validated-form-controls/validity-indicator.js.map +1 -0
  80. package/build-style/style-rtl.css +37 -25
  81. package/build-style/style.css +37 -25
  82. package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
  83. package/build-types/custom-gradient-picker/serializer.d.ts.map +1 -1
  84. package/build-types/custom-gradient-picker/utils.d.ts.map +1 -1
  85. package/build-types/date-time/date/index.d.ts.map +1 -1
  86. package/build-types/date-time/date/styles.d.ts +6 -0
  87. package/build-types/date-time/date/styles.d.ts.map +1 -1
  88. package/build-types/divider/stories/index.story.d.ts.map +1 -1
  89. package/build-types/elevation/stories/index.story.d.ts.map +1 -1
  90. package/build-types/form-token-field/stories/index.story.d.ts +10 -5
  91. package/build-types/form-token-field/stories/index.story.d.ts.map +1 -1
  92. package/build-types/gradient-picker/stories/index.story.d.ts +2 -1
  93. package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
  94. package/build-types/grid/stories/index.story.d.ts.map +1 -1
  95. package/build-types/h-stack/stories/index.story.d.ts.map +1 -1
  96. package/build-types/heading/stories/index.story.d.ts.map +1 -1
  97. package/build-types/input-control/stories/index.story.d.ts.map +1 -1
  98. package/build-types/item-group/stories/index.story.d.ts.map +1 -1
  99. package/build-types/menu-item/index.d.ts.map +1 -1
  100. package/build-types/number-control/stories/index.story.d.ts.map +1 -1
  101. package/build-types/scrollable/stories/index.story.d.ts.map +1 -1
  102. package/build-types/spacer/stories/index.story.d.ts.map +1 -1
  103. package/build-types/surface/stories/index.story.d.ts.map +1 -1
  104. package/build-types/text/stories/index.story.d.ts.map +1 -1
  105. package/build-types/toggle-group-control/stories/index.story.d.ts.map +1 -1
  106. package/build-types/tools-panel/stories/index.story.d.ts.map +1 -1
  107. package/build-types/tree-grid/stories/index.story.d.ts.map +1 -1
  108. package/build-types/truncate/stories/index.story.d.ts.map +1 -1
  109. package/build-types/unit-control/stories/index.story.d.ts.map +1 -1
  110. package/build-types/v-stack/stories/index.story.d.ts.map +1 -1
  111. package/build-types/validated-form-controls/components/checkbox-control.d.ts.map +1 -1
  112. package/build-types/validated-form-controls/components/combobox-control.d.ts.map +1 -1
  113. package/build-types/validated-form-controls/components/custom-select-control.d.ts.map +1 -1
  114. package/build-types/validated-form-controls/components/input-control.d.ts.map +1 -1
  115. package/build-types/validated-form-controls/components/number-control.d.ts.map +1 -1
  116. package/build-types/validated-form-controls/components/radio-control.d.ts.map +1 -1
  117. package/build-types/validated-form-controls/components/range-control.d.ts.map +1 -1
  118. package/build-types/validated-form-controls/components/select-control.d.ts.map +1 -1
  119. package/build-types/validated-form-controls/components/stories/checkbox-control.story.d.ts.map +1 -1
  120. package/build-types/validated-form-controls/components/stories/combobox-control.story.d.ts.map +1 -1
  121. package/build-types/validated-form-controls/components/stories/custom-select-control.story.d.ts.map +1 -1
  122. package/build-types/validated-form-controls/components/stories/input-control.story.d.ts.map +1 -1
  123. package/build-types/validated-form-controls/components/stories/number-control.story.d.ts.map +1 -1
  124. package/build-types/validated-form-controls/components/stories/overview.story.d.ts +13 -0
  125. package/build-types/validated-form-controls/components/stories/overview.story.d.ts.map +1 -1
  126. package/build-types/validated-form-controls/components/stories/radio-control.story.d.ts.map +1 -1
  127. package/build-types/validated-form-controls/components/stories/range-control.story.d.ts.map +1 -1
  128. package/build-types/validated-form-controls/components/stories/select-control.story.d.ts.map +1 -1
  129. package/build-types/validated-form-controls/components/stories/text-control.story.d.ts.map +1 -1
  130. package/build-types/validated-form-controls/components/stories/textarea-control.story.d.ts.map +1 -1
  131. package/build-types/validated-form-controls/components/stories/toggle-control.story.d.ts.map +1 -1
  132. package/build-types/validated-form-controls/components/stories/toggle-group-control.story.d.ts.map +1 -1
  133. package/build-types/validated-form-controls/components/text-control.d.ts.map +1 -1
  134. package/build-types/validated-form-controls/components/textarea-control.d.ts.map +1 -1
  135. package/build-types/validated-form-controls/components/toggle-control.d.ts.map +1 -1
  136. package/build-types/validated-form-controls/components/toggle-group-control.d.ts.map +1 -1
  137. package/build-types/validated-form-controls/components/types.d.ts +21 -10
  138. package/build-types/validated-form-controls/components/types.d.ts.map +1 -1
  139. package/build-types/validated-form-controls/control-with-error.d.ts +4 -5
  140. package/build-types/validated-form-controls/control-with-error.d.ts.map +1 -1
  141. package/build-types/validated-form-controls/validity-indicator.d.ts +5 -0
  142. package/build-types/validated-form-controls/validity-indicator.d.ts.map +1 -0
  143. package/build-types/view/stories/index.story.d.ts.map +1 -1
  144. package/build-types/z-stack/stories/index.story.d.ts.map +1 -1
  145. package/package.json +21 -21
  146. package/src/button/style.scss +3 -3
  147. package/src/calendar/style.scss +22 -22
  148. package/src/confirm-dialog/stories/index.story.tsx +3 -2
  149. package/src/custom-gradient-picker/serializer.ts +14 -0
  150. package/src/custom-gradient-picker/test/serializer.ts +25 -0
  151. package/src/custom-gradient-picker/utils.ts +10 -0
  152. package/src/date-time/date/index.tsx +4 -3
  153. package/src/date-time/date/styles.ts +13 -20
  154. package/src/divider/stories/index.story.tsx +2 -1
  155. package/src/elevation/stories/index.story.tsx +2 -1
  156. package/src/form-token-field/stories/index.story.tsx +15 -7
  157. package/src/gradient-picker/stories/index.story.tsx +48 -0
  158. package/src/grid/stories/index.story.tsx +2 -1
  159. package/src/h-stack/stories/e2e/index.story.tsx +1 -1
  160. package/src/h-stack/stories/index.story.tsx +3 -2
  161. package/src/heading/stories/index.story.tsx +3 -2
  162. package/src/input-control/stories/index.story.tsx +3 -2
  163. package/src/item-group/stories/index.story.tsx +2 -1
  164. package/src/menu/stories/index.story.tsx +1 -1
  165. package/src/menu-item/index.tsx +1 -0
  166. package/src/number-control/stories/index.story.tsx +3 -2
  167. package/src/scrollable/stories/index.story.tsx +2 -1
  168. package/src/spacer/stories/index.story.tsx +2 -1
  169. package/src/surface/stories/index.story.tsx +2 -1
  170. package/src/text/stories/index.story.tsx +3 -2
  171. package/src/toggle-group-control/stories/index.story.tsx +3 -2
  172. package/src/tools-panel/stories/index.story.tsx +2 -1
  173. package/src/tree-grid/stories/index.story.tsx +3 -2
  174. package/src/truncate/stories/index.story.tsx +3 -2
  175. package/src/unit-control/stories/index.story.tsx +3 -2
  176. package/src/utils/theme-variables.scss +1 -0
  177. package/src/v-stack/stories/e2e/index.story.tsx +1 -1
  178. package/src/v-stack/stories/index.story.tsx +3 -2
  179. package/src/validated-form-controls/components/checkbox-control.tsx +5 -3
  180. package/src/validated-form-controls/components/combobox-control.tsx +5 -3
  181. package/src/validated-form-controls/components/custom-select-control.tsx +5 -3
  182. package/src/validated-form-controls/components/input-control.tsx +5 -3
  183. package/src/validated-form-controls/components/number-control.tsx +5 -3
  184. package/src/validated-form-controls/components/radio-control.tsx +5 -3
  185. package/src/validated-form-controls/components/range-control.tsx +5 -3
  186. package/src/validated-form-controls/components/select-control.tsx +5 -3
  187. package/src/validated-form-controls/components/stories/checkbox-control.story.tsx +19 -7
  188. package/src/validated-form-controls/components/stories/combobox-control.story.tsx +19 -7
  189. package/src/validated-form-controls/components/stories/custom-select-control.story.tsx +19 -7
  190. package/src/validated-form-controls/components/stories/input-control.story.tsx +53 -19
  191. package/src/validated-form-controls/components/stories/number-control.story.tsx +19 -7
  192. package/src/validated-form-controls/components/stories/overview.mdx +2 -2
  193. package/src/validated-form-controls/components/stories/overview.story.tsx +124 -16
  194. package/src/validated-form-controls/components/stories/radio-control.story.tsx +19 -7
  195. package/src/validated-form-controls/components/stories/range-control.story.tsx +19 -7
  196. package/src/validated-form-controls/components/stories/select-control.story.tsx +19 -7
  197. package/src/validated-form-controls/components/stories/text-control.story.tsx +19 -7
  198. package/src/validated-form-controls/components/stories/textarea-control.story.tsx +19 -7
  199. package/src/validated-form-controls/components/stories/toggle-control.story.tsx +19 -7
  200. package/src/validated-form-controls/components/stories/toggle-group-control.story.tsx +19 -7
  201. package/src/validated-form-controls/components/text-control.tsx +5 -3
  202. package/src/validated-form-controls/components/textarea-control.tsx +5 -3
  203. package/src/validated-form-controls/components/toggle-control.tsx +5 -3
  204. package/src/validated-form-controls/components/toggle-group-control.tsx +5 -3
  205. package/src/validated-form-controls/components/types.ts +21 -12
  206. package/src/validated-form-controls/control-with-error.tsx +77 -26
  207. package/src/validated-form-controls/style.scss +19 -5
  208. package/src/validated-form-controls/validity-indicator.tsx +48 -0
  209. package/src/view/stories/index.story.tsx +2 -1
  210. package/src/z-stack/stories/index.story.tsx +2 -1
  211. package/tsconfig.tsbuildinfo +1 -1
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tcustomValidator={ () => {\n\t\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAb,WAAA,CAAAc,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAChBhB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACS,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAhB,WAAA,CAAAiB,GAAA,EAAClB,mBAAA,CAAAsB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAN,WAAA,CAAAiB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBwB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDpC,sCACD,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","onValidate","customValidity","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/toggle-group-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tonValidate={ () => {\n\t\t\t\t\treturn onValidate?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAd,WAAA,CAAAe,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAjB,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAAqB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBI,gBAAgB,EAAGA,gBAAkB;MACrCH,UAAU,EAAGA,CAAA,KAAM;QAClB,OAAOA,UAAU,GAAIQ,QAAQ,CAACS,OAAQ,CAAC;MACxC,CAAG;MACHhB,cAAc,EAAGA,cAAgB;MACjCiB,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAuB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAP,WAAA,CAAAkB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBP,QAAQ,EAAGA,QAAU;MACrByB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDrC,sCACD,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/types.ts"],"sourcesContent":["export type ValidatedControlProps< V > = {\n\t/**\n\t * Whether the control is required.\n\t * @default false\n\t */\n\trequired?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t * @default false\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * A function that returns a custom validity message when applicable. This error message will be applied to the\n\t * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and\n\t * will be prioritized over any existing validity messages dictated by the HTML attributes.\n\t * An empty string or `undefined` return value will clear any existing custom validity message.\n\t *\n\t * Make sure you don't programatically pass a value (such as an initial value) to the control component\n\t * that fails this validator, because the validator will only run for user-initiated changes.\n\t *\n\t * Always prefer using standard HTML attributes like `required` and `min`/`max` over custom validators\n\t * when possible, as they are simpler and have localized error messages built in.\n\t */\n\t// TODO: Technically, we could add an optional `customValidity` string prop so the consumer can set\n\t// an error message at any point in time. We should wait until we have a use case though.\n\tcustomValidator?: ( currentValue: V ) => string | void;\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/types.ts"],"sourcesContent":["export type ValidatedControlProps< V > = {\n\t/**\n\t * Whether the control is required.\n\t * @default false\n\t */\n\trequired?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t * @default false\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * Optional callback to run when the input should be validated. Use this to set\n\t * a `customValidity` as necessary.\n\t *\n\t * Always prefer using standard HTML attributes like `required` and `min`/`max` over\n\t * custom validators when possible, as they are simpler and have localized error messages built in.\n\t */\n\tonValidate?: ( currentValue: V ) => void;\n\t/**\n\t * Show a custom message based on the validation status.\n\t *\n\t * - When `type` is `invalid`, the message will be applied to the underlying element using the\n\t * native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom message will be prioritized over any existing validity messages\n\t * triggered by HTML attribute-based validation.\n\t * - When `type` is `validating` or `valid`, the custom validity message of the underlying element\n\t * will be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\n\t * the message will be presented as a status indicator rather than an error. These indicators are intended\n\t * for asynchronous validation calls that may take more than 1 second to complete.\n\t * Otherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`.\n\t */\n\tcustomValidity?: {\n\t\ttype: 'validating' | 'valid' | 'invalid';\n\t\tmessage: string;\n\t};\n};\n"],"mappings":"","ignoreList":[]}
@@ -1,15 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.ControlWithError = void 0;
8
7
  var _i18n = require("@wordpress/i18n");
9
- var _icons = require("@wordpress/icons");
10
8
  var _element = require("@wordpress/element");
11
9
  var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
12
- var _icon = _interopRequireDefault(require("../icon"));
10
+ var _validityIndicator = require("./validity-indicator");
13
11
  var _jsxRuntime = require("react/jsx-runtime");
14
12
  /**
15
13
  * WordPress dependencies
@@ -49,11 +47,13 @@ function appendRequiredIndicator(label, required, markWhenOptional) {
49
47
  function UnforwardedControlWithError({
50
48
  required,
51
49
  markWhenOptional,
52
- customValidator,
50
+ onValidate,
51
+ customValidity,
53
52
  getValidityTarget,
54
53
  children
55
54
  }, forwardedRef) {
56
55
  const [errorMessage, setErrorMessage] = (0, _element.useState)();
56
+ const [statusMessage, setStatusMessage] = (0, _element.useState)();
57
57
  const [isTouched, setIsTouched] = (0, _element.useState)(false);
58
58
 
59
59
  // Ensure that error messages are visible after user attemps to submit a form
@@ -66,12 +66,49 @@ function UnforwardedControlWithError({
66
66
  validityTarget?.removeEventListener('invalid', showValidationMessage);
67
67
  };
68
68
  });
69
- const validate = () => {
70
- const message = customValidator?.();
69
+ (0, _element.useEffect)(() => {
70
+ if (!isTouched) {
71
+ return;
72
+ }
71
73
  const validityTarget = getValidityTarget();
72
- validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : '');
73
- setErrorMessage(validityTarget?.validationMessage);
74
- };
74
+ if (!customValidity?.type) {
75
+ validityTarget?.setCustomValidity('');
76
+ setErrorMessage(validityTarget?.validationMessage);
77
+ setStatusMessage(undefined);
78
+ return;
79
+ }
80
+ switch (customValidity.type) {
81
+ case 'validating':
82
+ {
83
+ // Wait before showing a validating state.
84
+ const timer = setTimeout(() => {
85
+ setStatusMessage({
86
+ type: 'validating',
87
+ message: customValidity.message
88
+ });
89
+ }, 1000);
90
+ return () => clearTimeout(timer);
91
+ }
92
+ case 'valid':
93
+ {
94
+ validityTarget?.setCustomValidity('');
95
+ setErrorMessage(validityTarget?.validationMessage);
96
+ setStatusMessage({
97
+ type: 'valid',
98
+ message: customValidity.message
99
+ });
100
+ return;
101
+ }
102
+ case 'invalid':
103
+ {
104
+ var _customValidity$messa;
105
+ validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');
106
+ setErrorMessage(validityTarget?.validationMessage);
107
+ setStatusMessage(undefined);
108
+ return undefined;
109
+ }
110
+ }
111
+ }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget]);
75
112
  const onBlur = event => {
76
113
  // Only consider "blurred from the component" if focus has fully left the wrapping div.
77
114
  // This prevents unnecessary blurs from components with multiple focusable elements.
@@ -86,7 +123,7 @@ function UnforwardedControlWithError({
86
123
  }
87
124
  return;
88
125
  }
89
- validate();
126
+ onValidate?.();
90
127
  }
91
128
  };
92
129
  const onChange = (...args) => {
@@ -95,14 +132,14 @@ function UnforwardedControlWithError({
95
132
  // Only validate incrementally if the field has blurred at least once,
96
133
  // or currently has an error message.
97
134
  if (isTouched || errorMessage) {
98
- validate();
135
+ onValidate?.();
99
136
  }
100
137
  };
101
138
  const onKeyDown = event => {
102
139
  // Ensures that custom validators are triggered when the user submits by pressing Enter,
103
140
  // without ever blurring the control.
104
141
  if (event.key === 'Enter') {
105
- validate();
142
+ onValidate?.();
106
143
  }
107
144
  };
108
145
  return (
@@ -118,17 +155,15 @@ function UnforwardedControlWithError({
118
155
  label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
119
156
  onChange,
120
157
  required
121
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
158
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
122
159
  "aria-live": "polite",
123
- children: errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
124
- className: "components-validated-control__error",
125
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
126
- className: "components-validated-control__error-icon",
127
- icon: _icons.error,
128
- size: 16,
129
- fill: "currentColor"
130
- }), errorMessage]
131
- })
160
+ children: [errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_validityIndicator.ValidityIndicator, {
161
+ type: "invalid",
162
+ message: errorMessage
163
+ }), !errorMessage && statusMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_validityIndicator.ValidityIndicator, {
164
+ type: statusMessage.type,
165
+ message: statusMessage.message
166
+ })]
132
167
  })]
133
168
  })
134
169
  );
@@ -1 +1 @@
1
- {"version":3,"names":["_i18n","require","_icons","_element","_withIgnoreImeEvents","_icon","_interopRequireDefault","_jsxRuntime","appendRequiredIndicator","label","required","markWhenOptional","jsxs","Fragment","children","__","UnforwardedControlWithError","customValidator","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","useState","isTouched","setIsTouched","useEffect","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","validate","message","setCustomValidity","onBlur","event","relatedTarget","currentTarget","contains","validity","valid","onChange","args","props","onKeyDown","key","className","ref","withIgnoreIMEEvents","cloneElement","jsx","default","icon","error","size","fill","ControlWithError","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { error } from '@wordpress/icons';\n\n/**\n * External dependencies\n */\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nimport Icon from '../icon';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tcustomValidator,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * A function that returns a custom validity message when applicable.\n\t\t *\n\t\t * This message will be applied to the element returned by `getValidityTarget`.\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\n\t\t */\n\t\tcustomValidator?: () => string | void;\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tconst validate = () => {\n\t\tconst message = customValidator?.();\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tvalidityTarget?.setCustomValidity( message ?? '' );\n\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t};\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\n\t\t\tconst validityTarget = getValidityTarget();\n\n\t\t\t// Prevents a double flash of the native error tooltip when the control is already showing one.\n\t\t\tif ( ! validityTarget?.validity.valid ) {\n\t\t\t\tif ( ! errorMessage ) {\n\t\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<p className=\"components-validated-control__error\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__error-icon\"\n\t\t\t\t\t\t\ticon={ error }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_i18n","require","_element","_withIgnoreImeEvents","_validityIndicator","_jsxRuntime","appendRequiredIndicator","label","required","markWhenOptional","jsxs","Fragment","children","__","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","useState","statusMessage","setStatusMessage","isTouched","setIsTouched","useEffect","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","type","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","validity","valid","onChange","args","props","onKeyDown","key","className","ref","withIgnoreIMEEvents","cloneElement","jsx","ValidityIndicator","ControlWithError","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * External dependencies\n */\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\n\t\t\tconst validityTarget = getValidityTarget();\n\n\t\t\t// Prevents a double flash of the native error tooltip when the control is already showing one.\n\t\t\tif ( ! validityTarget?.validity.valid ) {\n\t\t\t\tif ( ! errorMessage ) {\n\t\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ValidityIndicator = ValidityIndicator;
8
+ var _clsx = _interopRequireDefault(require("clsx"));
9
+ var _icons = require("@wordpress/icons");
10
+ var _icon = _interopRequireDefault(require("../icon"));
11
+ var _spinner = _interopRequireDefault(require("../spinner"));
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+ /**
14
+ * External dependencies
15
+ */
16
+
17
+ /**
18
+ * WordPress dependencies
19
+ */
20
+
21
+ /**
22
+ * Internal dependencies
23
+ */
24
+
25
+ function ValidityIndicator({
26
+ type,
27
+ message
28
+ }) {
29
+ const ICON = {
30
+ valid: _icons.published,
31
+ invalid: _icons.error
32
+ };
33
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
34
+ className: (0, _clsx.default)('components-validated-control__indicator', `is-${type}`),
35
+ children: [type === 'validating' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_spinner.default, {
36
+ className: "components-validated-control__indicator-spinner"
37
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
38
+ className: "components-validated-control__indicator-icon",
39
+ icon: ICON[type],
40
+ size: 16,
41
+ fill: "currentColor"
42
+ }), message]
43
+ });
44
+ }
45
+ //# sourceMappingURL=validity-indicator.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_spinner","_jsxRuntime","ValidityIndicator","type","message","ICON","valid","published","invalid","error","jsxs","className","clsx","children","jsx","default","icon","size","fill"],"sources":["@wordpress/components/src/validated-form-controls/validity-indicator.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport Spinner from '../spinner';\n\nexport function ValidityIndicator( {\n\ttype,\n\tmessage,\n}: {\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage?: string;\n} ) {\n\tconst ICON = {\n\t\tvalid: published,\n\t\tinvalid: error,\n\t};\n\treturn (\n\t\t<p\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t`is-${ type }`\n\t\t\t) }\n\t\t>\n\t\t\t{ type === 'validating' ? (\n\t\t\t\t<Spinner className=\"components-validated-control__indicator-spinner\" />\n\t\t\t) : (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\ticon={ ICON[ type ] }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ message }\n\t\t</p>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAiC,IAAAI,WAAA,GAAAJ,OAAA;AAdjC;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASK,iBAAiBA,CAAE;EAClCC,IAAI;EACJC;AAID,CAAC,EAAG;EACH,MAAMC,IAAI,GAAG;IACZC,KAAK,EAAEC,gBAAS;IAChBC,OAAO,EAAEC;EACV,CAAC;EACD,oBACC,IAAAR,WAAA,CAAAS,IAAA;IACCC,SAAS,EAAG,IAAAC,aAAI,EACf,yCAAyC,EACzC,MAAOT,IAAI,EACZ,CAAG;IAAAU,QAAA,GAEDV,IAAI,KAAK,YAAY,gBACtB,IAAAF,WAAA,CAAAa,GAAA,EAACd,QAAA,CAAAe,OAAO;MAACJ,SAAS,EAAC;IAAiD,CAAE,CAAC,gBAEvE,IAAAV,WAAA,CAAAa,GAAA,EAACf,KAAA,CAAAgB,OAAI;MACJJ,SAAS,EAAC,8CAA8C;MACxDK,IAAI,EAAGX,IAAI,CAAEF,IAAI,CAAI;MACrBc,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC;IAAc,CACnB,CACD,EACCd,OAAO;EAAA,CACP,CAAC;AAEN","ignoreList":[]}
@@ -12,6 +12,17 @@ export function serializeGradientColor({
12
12
  if (type === 'hex') {
13
13
  return `#${value}`;
14
14
  }
15
+ if (type === 'var') {
16
+ return `var(${value})`;
17
+ }
18
+ if (type === 'hsl') {
19
+ const [hue, saturation, lightness] = value;
20
+ return `hsl(${hue},${saturation}%,${lightness}%)`;
21
+ }
22
+ if (type === 'hsla') {
23
+ const [hue, saturation, lightness, alpha] = value;
24
+ return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;
25
+ }
15
26
  return `${type}(${value.join(',')})`;
16
27
  }
17
28
  export function serializeGradientPosition(position) {
@@ -22,6 +33,9 @@ export function serializeGradientPosition(position) {
22
33
  value,
23
34
  type
24
35
  } = position;
36
+ if (type === 'calc') {
37
+ return `calc(${value})`;
38
+ }
25
39
  return `${value}${type}`;
26
40
  }
27
41
  export function serializeGradientColorStop({
@@ -1 +1 @@
1
- {"version":3,"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,SAASA,sBAAsBA,CAAE;EACvCC,IAAI;EACJC;AACyB,CAAC,EAAG;EAC7B,IAAKD,IAAI,KAAK,SAAS,EAAG;IACzB,OAAOC,KAAK;EACb;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,OAAO,IAAKC,KAAK,EAAG;EACrB;EACA,OAAO,GAAID,IAAI,IAAMC,KAAK,CAACC,IAAI,CAAE,GAAI,CAAC,GAAI;AAC3C;AAEA,OAAO,SAASC,yBAAyBA,CACxCC,QAA8C,EAC7C;EACD,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,EAAE;EACV;EACA,MAAM;IAAEH,KAAK;IAAED;EAAK,CAAC,GAAGI,QAAQ;EAChC,OAAO,GAAIH,KAAK,GAAKD,IAAI,EAAG;AAC7B;AAEA,OAAO,SAASK,0BAA0BA,CAAE;EAC3CL,IAAI;EACJC,KAAK;EACLK;AACyB,CAAC,EAAG;EAC7B,OAAO,GAAIP,sBAAsB,CAAE;IAClCC,IAAI;IACJC;EACD,CAA8B,CAAC,IAAME,yBAAyB,CAAEG,MAAO,CAAC,EAAG;AAC5E;AAEA,OAAO,SAASC,4BAA4BA,CAC3CC,WAAyD,EACxD;EACD,IACCC,KAAK,CAACC,OAAO,CAAEF,WAAY,CAAC,IAC5B,CAAEA,WAAW,IACbA,WAAW,CAACR,IAAI,KAAK,SAAS,EAC7B;IACD;EACD;EACA,OAAO,GAAIQ,WAAW,CAACP,KAAK,KAAM;AACnC;AAEA,OAAO,SAASU,iBAAiBA,CAAE;EAClCX,IAAI;EACJQ,WAAW;EACXI;AAC4B,CAAC,EAAG;EAChC,MAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAY,CAAC;EACzE,MAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAAI,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAAM;IACpC,MAAMC,mBAAmB,GACxBC,SAAmC,IAC/B;MACJ,OAAOA,SAAS,EAAEb,MAAM,EAAEL,KAAK,KAAKmB,SAAS,GAC1C,CAAC,GACDC,QAAQ,CAAEF,SAAS,CAACb,MAAM,CAACL,KAAM,CAAC;IACtC,CAAC;IAED,OACCiB,mBAAmB,CAAEF,UAAW,CAAC,GACjCE,mBAAmB,CAAED,UAAW,CAAC;EAEnC,CAAE,CAAC,CACFK,GAAG,CAAEjB,0BAA2B,CAAC;EACnC,OAAO,GAAIL,IAAI,IAAM,CAAEa,qBAAqB,EAAE,GAAGC,oBAAoB,CAAE,CACrES,MAAM,CAAEC,OAAQ,CAAC,CACjBtB,IAAI,CAAE,GAAI,CAAC,GAAI;AAClB","ignoreList":[]}
1
+ {"version":3,"names":["serializeGradientColor","type","value","hue","saturation","lightness","alpha","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\tif ( type === 'var' ) {\n\t\treturn `var(${ value })`;\n\t}\n\tif ( type === 'hsl' ) {\n\t\tconst [ hue, saturation, lightness ] = value;\n\t\treturn `hsl(${ hue },${ saturation }%,${ lightness }%)`;\n\t}\n\tif ( type === 'hsla' ) {\n\t\tconst [ hue, saturation, lightness, alpha ] = value;\n\t\treturn `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\tif ( type === 'calc' ) {\n\t\treturn `calc(${ value })`;\n\t}\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,SAASA,sBAAsBA,CAAE;EACvCC,IAAI;EACJC;AACyB,CAAC,EAAG;EAC7B,IAAKD,IAAI,KAAK,SAAS,EAAG;IACzB,OAAOC,KAAK;EACb;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,OAAO,IAAKC,KAAK,EAAG;EACrB;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,OAAO,OAAQC,KAAK,GAAI;EACzB;EACA,IAAKD,IAAI,KAAK,KAAK,EAAG;IACrB,MAAM,CAAEE,GAAG,EAAEC,UAAU,EAAEC,SAAS,CAAE,GAAGH,KAAK;IAC5C,OAAO,OAAQC,GAAG,IAAMC,UAAU,KAAOC,SAAS,IAAK;EACxD;EACA,IAAKJ,IAAI,KAAK,MAAM,EAAG;IACtB,MAAM,CAAEE,GAAG,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,CAAE,GAAGJ,KAAK;IACnD,OAAO,QAASC,GAAG,IAAMC,UAAU,KAAOC,SAAS,KAAOC,KAAK,GAAI;EACpE;EACA,OAAO,GAAIL,IAAI,IAAMC,KAAK,CAACK,IAAI,CAAE,GAAI,CAAC,GAAI;AAC3C;AAEA,OAAO,SAASC,yBAAyBA,CACxCC,QAA8C,EAC7C;EACD,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,EAAE;EACV;EACA,MAAM;IAAEP,KAAK;IAAED;EAAK,CAAC,GAAGQ,QAAQ;EAChC,IAAKR,IAAI,KAAK,MAAM,EAAG;IACtB,OAAO,QAASC,KAAK,GAAI;EAC1B;EACA,OAAO,GAAIA,KAAK,GAAKD,IAAI,EAAG;AAC7B;AAEA,OAAO,SAASS,0BAA0BA,CAAE;EAC3CT,IAAI;EACJC,KAAK;EACLS;AACyB,CAAC,EAAG;EAC7B,OAAO,GAAIX,sBAAsB,CAAE;IAClCC,IAAI;IACJC;EACD,CAA8B,CAAC,IAAMM,yBAAyB,CAAEG,MAAO,CAAC,EAAG;AAC5E;AAEA,OAAO,SAASC,4BAA4BA,CAC3CC,WAAyD,EACxD;EACD,IACCC,KAAK,CAACC,OAAO,CAAEF,WAAY,CAAC,IAC5B,CAAEA,WAAW,IACbA,WAAW,CAACZ,IAAI,KAAK,SAAS,EAC7B;IACD;EACD;EACA,OAAO,GAAIY,WAAW,CAACX,KAAK,KAAM;AACnC;AAEA,OAAO,SAASc,iBAAiBA,CAAE;EAClCf,IAAI;EACJY,WAAW;EACXI;AAC4B,CAAC,EAAG;EAChC,MAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAY,CAAC;EACzE,MAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAAI,CAAE,CAAEC,UAAU,EAAEC,UAAU,KAAM;IACpC,MAAMC,mBAAmB,GACxBC,SAAmC,IAC/B;MACJ,OAAOA,SAAS,EAAEb,MAAM,EAAET,KAAK,KAAKuB,SAAS,GAC1C,CAAC,GACDC,QAAQ,CAAEF,SAAS,CAACb,MAAM,CAACT,KAAM,CAAC;IACtC,CAAC;IAED,OACCqB,mBAAmB,CAAEF,UAAW,CAAC,GACjCE,mBAAmB,CAAED,UAAW,CAAC;EAEnC,CAAE,CAAC,CACFK,GAAG,CAAEjB,0BAA2B,CAAC;EACnC,OAAO,GAAIT,IAAI,IAAM,CAAEiB,qBAAqB,EAAE,GAAGC,oBAAoB,CAAE,CACrES,MAAM,CAAEC,OAAQ,CAAC,CACjBtB,IAAI,CAAE,GAAI,CAAC,GAAI;AAClB","ignoreList":[]}
@@ -88,9 +88,21 @@ export function getStopCssColor(colorStop) {
88
88
  return `#${colorStop.value}`;
89
89
  case 'literal':
90
90
  return colorStop.value;
91
+ case 'var':
92
+ return `${colorStop.type}(${colorStop.value})`;
91
93
  case 'rgb':
92
94
  case 'rgba':
93
95
  return `${colorStop.type}(${colorStop.value.join(',')})`;
96
+ case 'hsl':
97
+ {
98
+ const [hue, saturation, lightness] = colorStop.value;
99
+ return `hsl(${hue},${saturation}%,${lightness}%)`;
100
+ }
101
+ case 'hsla':
102
+ {
103
+ const [hue, saturation, lightness, alpha] = colorStop.value;
104
+ return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;
105
+ }
94
106
  default:
95
107
  // Should be unreachable if passing an AST from gradient-parser.
96
108
  // See https://github.com/rafaelcaricio/gradient-parser#ast.
@@ -1 +1 @@
1
- {"version":3,"names":["gradientParser","colord","extend","namesPlugin","DEFAULT_GRADIENT","HORIZONTAL_GRADIENT_ORIENTATION","DIRECTIONAL_ORIENTATION_ANGLE_MAP","serializeGradient","getLinearGradientRepresentation","gradientAST","type","orientation","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","hasGradient","valueToParse","parse","error","console","warn","Array","isArray","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join"],"sources":["@wordpress/components/src/custom-gradient-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\nimport type { ControlPoint } from './types';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation(\n\tgradientAST: gradientParser.GradientNode\n) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item: gradientParser.ColorStop ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value?: string | null ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST: gradientParser.GradientNode | undefined;\n\tlet hasGradient = !! value;\n\n\tconst valueToParse = value ?? DEFAULT_GRADIENT;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( valueToParse )[ 0 ];\n\t} catch ( error ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.CustomGradientPicker failed to parse the gradient with error',\n\t\t\terror\n\t\t);\n\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\thasGradient = false;\n\t}\n\n\tif (\n\t\t! Array.isArray( gradientAST.orientation ) &&\n\t\tgradientAST.orientation?.type === 'directional'\n\t) {\n\t\tgradientAST.orientation = {\n\t\t\ttype: 'angular',\n\t\t\tvalue: DIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString(),\n\t\t};\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: `${ step * index }`,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t}\n\n\treturn { gradientAST, hasGradient };\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST: gradientParser.GradientNode,\n\tnewControlPoints: ControlPoint[]\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue:\n\t\t\t\t\ta < 1\n\t\t\t\t\t\t? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]\n\t\t\t\t\t\t: [ `${ r }`, `${ g }`, `${ b }` ],\n\t\t\t};\n\t\t} ),\n\t} as gradientParser.GradientNode;\n}\n\nexport function getStopCssColor( colorStop: gradientParser.ColorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["gradientParser","colord","extend","namesPlugin","DEFAULT_GRADIENT","HORIZONTAL_GRADIENT_ORIENTATION","DIRECTIONAL_ORIENTATION_ANGLE_MAP","serializeGradient","getLinearGradientRepresentation","gradientAST","type","orientation","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","hasGradient","valueToParse","parse","error","console","warn","Array","isArray","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join","hue","saturation","lightness","alpha"],"sources":["@wordpress/components/src/custom-gradient-picker/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\nimport type { ControlPoint } from './types';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation(\n\tgradientAST: gradientParser.GradientNode\n) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item: gradientParser.ColorStop ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value?: string | null ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST: gradientParser.GradientNode | undefined;\n\tlet hasGradient = !! value;\n\n\tconst valueToParse = value ?? DEFAULT_GRADIENT;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( valueToParse )[ 0 ];\n\t} catch ( error ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.CustomGradientPicker failed to parse the gradient with error',\n\t\t\terror\n\t\t);\n\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\thasGradient = false;\n\t}\n\n\tif (\n\t\t! Array.isArray( gradientAST.orientation ) &&\n\t\tgradientAST.orientation?.type === 'directional'\n\t) {\n\t\tgradientAST.orientation = {\n\t\t\ttype: 'angular',\n\t\t\tvalue: DIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString(),\n\t\t};\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: `${ step * index }`,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t}\n\n\treturn { gradientAST, hasGradient };\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST: gradientParser.GradientNode,\n\tnewControlPoints: ControlPoint[]\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue:\n\t\t\t\t\ta < 1\n\t\t\t\t\t\t? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]\n\t\t\t\t\t\t: [ `${ r }`, `${ g }`, `${ b }` ],\n\t\t\t};\n\t\t} ),\n\t} as gradientParser.GradientNode;\n}\n\nexport function getStopCssColor( colorStop: gradientParser.ColorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'var':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value })`;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tcase 'hsl': {\n\t\t\tconst [ hue, saturation, lightness ] = colorStop.value;\n\t\t\treturn `hsl(${ hue },${ saturation }%,${ lightness }%)`;\n\t\t}\n\t\tcase 'hsla': {\n\t\t\tconst [ hue, saturation, lightness, alpha ] = colorStop.value;\n\t\t\treturn `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;\n\t\t}\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
@@ -14,9 +14,8 @@ import { useState, useRef, useEffect } from '@wordpress/element';
14
14
  * Internal dependencies
15
15
  */
16
16
  import { useLilius } from './use-lilius';
17
- import { Wrapper, Navigator, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';
17
+ import { Wrapper, Navigator, ViewPreviousMonthButton, ViewNextMonthButton, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';
18
18
  import { inputToDate } from '../utils';
19
- import Button from '../../button';
20
19
  import { TIMEZONELESS_FORMAT } from '../constants';
21
20
 
22
21
  /**
@@ -84,7 +83,7 @@ export function DatePicker({
84
83
  role: "application",
85
84
  "aria-label": __('Calendar'),
86
85
  children: [/*#__PURE__*/_jsxs(Navigator, {
87
- children: [/*#__PURE__*/_jsx(Button, {
86
+ children: [/*#__PURE__*/_jsx(ViewPreviousMonthButton, {
88
87
  icon: isRTL() ? arrowRight : arrowLeft,
89
88
  variant: "tertiary",
90
89
  "aria-label": __('View previous month'),
@@ -99,7 +98,7 @@ export function DatePicker({
99
98
  children: [/*#__PURE__*/_jsx("strong", {
100
99
  children: dateI18n('F', viewing, -viewing.getTimezoneOffset())
101
100
  }), ' ', dateI18n('Y', viewing, -viewing.getTimezoneOffset())]
102
- }), /*#__PURE__*/_jsx(Button, {
101
+ }), /*#__PURE__*/_jsx(ViewNextMonthButton, {
103
102
  icon: isRTL() ? arrowLeft : arrowRight,
104
103
  variant: "tertiary",
105
104
  "aria-label": __('View next month'),
@@ -1 +1 @@
1
- {"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","Button","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","size","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","__next40pxDefaultSize","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport Button from '../../button';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DatePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * />\n * );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\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<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\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\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\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\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\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\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","ViewPreviousMonthButton","ViewNextMonthButton","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","size","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","__next40pxDefaultSize","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tViewPreviousMonthButton,\n\tViewNextMonthButton,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DatePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * />\n * );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<ViewPreviousMonthButton\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<ViewNextMonthButton\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\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<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\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\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\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\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\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\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}