@wordpress/components 29.11.0 → 29.13.1-next.719a03cbe.0

package/build-module/calendar/utils/constants.js

@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { Day } from './day-cell';
+const CLASSNAMES = {
+  root: 'components-calendar',
+  day: 'components-calendar__day',
+  day_button: 'components-calendar__day-button',
+  caption_label: 'components-calendar__caption-label',
+  button_next: 'components-calendar__button-next',
+  button_previous: 'components-calendar__button-previous',
+  chevron: 'components-calendar__chevron',
+  nav: 'components-calendar__nav',
+  month_caption: 'components-calendar__month-caption',
+  months: 'components-calendar__months',
+  month_grid: 'components-calendar__month-grid',
+  weekday: 'components-calendar__weekday',
+  today: 'components-calendar__day--today',
+  selected: 'components-calendar__day--selected',
+  disabled: 'components-calendar__day--disabled',
+  hidden: 'components-calendar__day--hidden',
+  range_start: 'components-calendar__range-start',
+  range_end: 'components-calendar__range-end',
+  range_middle: 'components-calendar__range-middle',
+  weeks_before_enter: 'components-calendar__weeks-before-enter',
+  weeks_before_exit: 'components-calendar__weeks-before-exit',
+  weeks_after_enter: 'components-calendar__weeks-after-enter',
+  weeks_after_exit: 'components-calendar__weeks-after-exit',
+  caption_after_enter: 'components-calendar__caption-after-enter',
+  caption_after_exit: 'components-calendar__caption-after-exit',
+  caption_before_enter: 'components-calendar__caption-before-enter',
+  caption_before_exit: 'components-calendar__caption-before-exit'
+};
+export const MODIFIER_CLASSNAMES = {
+  preview: 'components-calendar__day--preview',
+  preview_start: 'components-calendar__day--preview-start',
+  preview_end: 'components-calendar__day--preview-end'
+};
+export const COMMON_PROPS = {
+  animate: true,
+  // Only show days in the current month
+  showOutsideDays: false,
+  // Hide week number column
+  showWeekNumber: false,
+  // Show weekdays row
+  hideWeekdays: false,
+  // Month and year caption are not interactive
+  captionLayout: 'label',
+  // Show a variable number of weeks depending on the month
+  fixedWeeks: false,
+  // Show navigation buttons
+  hideNavigation: false,
+  // Class names
+  classNames: CLASSNAMES,
+  // Default role
+  role: 'application',
+  components: {
+    Day
+  }
+};
+//# sourceMappingURL=constants.js.map

package/build-module/calendar/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Day","CLASSNAMES","root","day","day_button","caption_label","button_next","button_previous","chevron","nav","month_caption","months","month_grid","weekday","today","selected","disabled","hidden","range_start","range_end","range_middle","weeks_before_enter","weeks_before_exit","weeks_after_enter","weeks_after_exit","caption_after_enter","caption_after_exit","caption_before_enter","caption_before_exit","MODIFIER_CLASSNAMES","preview","preview_start","preview_end","COMMON_PROPS","animate","showOutsideDays","showWeekNumber","hideWeekdays","captionLayout","fixedWeeks","hideNavigation","classNames","role","components"],"sources":["@wordpress/components/src/calendar/utils/constants.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { Day } from './day-cell';\n\nconst CLASSNAMES = {\n\troot: 'components-calendar',\n\tday: 'components-calendar__day',\n\tday_button: 'components-calendar__day-button',\n\tcaption_label: 'components-calendar__caption-label',\n\tbutton_next: 'components-calendar__button-next',\n\tbutton_previous: 'components-calendar__button-previous',\n\tchevron: 'components-calendar__chevron',\n\tnav: 'components-calendar__nav',\n\tmonth_caption: 'components-calendar__month-caption',\n\tmonths: 'components-calendar__months',\n\tmonth_grid: 'components-calendar__month-grid',\n\tweekday: 'components-calendar__weekday',\n\ttoday: 'components-calendar__day--today',\n\tselected: 'components-calendar__day--selected',\n\tdisabled: 'components-calendar__day--disabled',\n\thidden: 'components-calendar__day--hidden',\n\trange_start: 'components-calendar__range-start',\n\trange_end: 'components-calendar__range-end',\n\trange_middle: 'components-calendar__range-middle',\n\tweeks_before_enter: 'components-calendar__weeks-before-enter',\n\tweeks_before_exit: 'components-calendar__weeks-before-exit',\n\tweeks_after_enter: 'components-calendar__weeks-after-enter',\n\tweeks_after_exit: 'components-calendar__weeks-after-exit',\n\tcaption_after_enter: 'components-calendar__caption-after-enter',\n\tcaption_after_exit: 'components-calendar__caption-after-exit',\n\tcaption_before_enter: 'components-calendar__caption-before-enter',\n\tcaption_before_exit: 'components-calendar__caption-before-exit',\n};\nexport const MODIFIER_CLASSNAMES = {\n\tpreview: 'components-calendar__day--preview',\n\tpreview_start: 'components-calendar__day--preview-start',\n\tpreview_end: 'components-calendar__day--preview-end',\n};\n\nexport const COMMON_PROPS = {\n\tanimate: true,\n\t// Only show days in the current month\n\tshowOutsideDays: false,\n\t// Hide week number column\n\tshowWeekNumber: false,\n\t// Show weekdays row\n\thideWeekdays: false,\n\t// Month and year caption are not interactive\n\tcaptionLayout: 'label',\n\t// Show a variable number of weeks depending on the month\n\tfixedWeeks: false,\n\t// Show navigation buttons\n\thideNavigation: false,\n\t// Class names\n\tclassNames: CLASSNAMES,\n\t// Default role\n\trole: 'application',\n\tcomponents: {\n\t\tDay,\n\t},\n} as const;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,MAAMC,UAAU,GAAG;EAClBC,IAAI,EAAE,qBAAqB;EAC3BC,GAAG,EAAE,0BAA0B;EAC/BC,UAAU,EAAE,iCAAiC;EAC7CC,aAAa,EAAE,oCAAoC;EACnDC,WAAW,EAAE,kCAAkC;EAC/CC,eAAe,EAAE,sCAAsC;EACvDC,OAAO,EAAE,8BAA8B;EACvCC,GAAG,EAAE,0BAA0B;EAC/BC,aAAa,EAAE,oCAAoC;EACnDC,MAAM,EAAE,6BAA6B;EACrCC,UAAU,EAAE,iCAAiC;EAC7CC,OAAO,EAAE,8BAA8B;EACvCC,KAAK,EAAE,iCAAiC;EACxCC,QAAQ,EAAE,oCAAoC;EAC9CC,QAAQ,EAAE,oCAAoC;EAC9CC,MAAM,EAAE,kCAAkC;EAC1CC,WAAW,EAAE,kCAAkC;EAC/CC,SAAS,EAAE,gCAAgC;EAC3CC,YAAY,EAAE,mCAAmC;EACjDC,kBAAkB,EAAE,yCAAyC;EAC7DC,iBAAiB,EAAE,wCAAwC;EAC3DC,iBAAiB,EAAE,wCAAwC;EAC3DC,gBAAgB,EAAE,uCAAuC;EACzDC,mBAAmB,EAAE,0CAA0C;EAC/DC,kBAAkB,EAAE,yCAAyC;EAC7DC,oBAAoB,EAAE,2CAA2C;EACjEC,mBAAmB,EAAE;AACtB,CAAC;AACD,OAAO,MAAMC,mBAAmB,GAAG;EAClCC,OAAO,EAAE,mCAAmC;EAC5CC,aAAa,EAAE,yCAAyC;EACxDC,WAAW,EAAE;AACd,CAAC;AAED,OAAO,MAAMC,YAAY,GAAG;EAC3BC,OAAO,EAAE,IAAI;EACb;EACAC,eAAe,EAAE,KAAK;EACtB;EACAC,cAAc,EAAE,KAAK;EACrB;EACAC,YAAY,EAAE,KAAK;EACnB;EACAC,aAAa,EAAE,OAAO;EACtB;EACAC,UAAU,EAAE,KAAK;EACjB;EACAC,cAAc,EAAE,KAAK;EACrB;EACAC,UAAU,EAAExC,UAAU;EACtB;EACAyC,IAAI,EAAE,aAAa;EACnBC,UAAU,EAAE;IACX3C;EACD;AACD,CAAU","ignoreList":[]}

package/build-module/calendar/utils/day-cell.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * The dash array and offset are calculated by:
+ * - measuring the path length (eg 92,28384)
+ * - establishing how many segments should the path be split into (eg. 24)
+ * - dividing the path length by the number of segments (eg. 92,28384 / 24 = 3,84516)
+ * - playing with the dash offset to make sure the dashes look good on rounded corners
+ */
+
+/**
+ * Dashed rectangle. The dash array and offset are chosen to make sure dashes
+ * look good on rounded corners and have similar metrics to the other dash
+ * preview shapes.
+ */
+const PreviewDashStartAndEnd = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    stroke: "currentColor",
+    strokeDasharray: "3.7677",
+    strokeDashoffset: "3.2",
+    strokeWidth: "1",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M29.5,0.5 h-27 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h27 a2,2 0 0 0 2,-2 v-27 a2,2 0 0 0 -2,-2"
+    })
+  });
+};
+
+/**
+ * Dashed top, left, and bottom sides, with rounded corners. The dash array and
+ * offset are chosen to make sure that multiple days in a row show a seamless
+ * dashed border, and the dashes look good on rounded corners.
+ */
+const PreviewDashStart = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    stroke: "currentColor",
+    strokeDasharray: "3.84516",
+    strokeDashoffset: "1.9226",
+    strokeWidth: "1",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M32,0.5 h-29.5 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h30"
+    })
+  });
+};
+/**
+ * Dashed top and bottom sides. The dash array and offset are chosen
+ * to make sure that multiple days in a row show a seamless dashed border.
+ */
+const PreviewDashMiddle = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    stroke: "currentColor",
+    strokeDasharray: "3.9 4",
+    strokeDashoffset: "2",
+    strokeWidth: "1",
+    children: [/*#__PURE__*/_jsx("line", {
+      x1: "0",
+      y1: "0.5",
+      x2: "100",
+      y2: "0.5"
+    }), /*#__PURE__*/_jsx("line", {
+      x1: "0",
+      y1: "31.5",
+      x2: "100",
+      y2: "31.5"
+    })]
+  });
+};
+/**
+ * Dashed top, right, and bottom sides, with rounded corners. The dash array and
+ * offset are chosen to make sure that multiple days in a row show a seamless
+ * dashed border, and the dashes look good on rounded corners.
+ */
+const PreviewDashEnd = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    stroke: "currentColor",
+    strokeDasharray: "3.84516",
+    strokeDashoffset: "1.9226",
+    strokeWidth: "1",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M0,0.5 h29.5 a2,2 0 0 1 2,2 v27 a2,2 0 0 1 -2,2 h-29.5"
+    })
+  });
+};
+
+/**
+ * Render a grid cell for a specific day in the calendar.
+ *
+ * Handles interaction and focus for the day.
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export function Day(props) {
+  const {
+    day,
+    modifiers,
+    children,
+    ...tdProps
+  } = props;
+  let PreviewDash;
+  if (modifiers.preview_start && modifiers.preview_end) {
+    PreviewDash = PreviewDashStartAndEnd;
+  } else if (modifiers.preview_start) {
+    PreviewDash = PreviewDashStart;
+  } else if (modifiers.preview_end) {
+    PreviewDash = PreviewDashEnd;
+  } else if (modifiers.preview) {
+    PreviewDash = PreviewDashMiddle;
+  }
+  return /*#__PURE__*/_jsxs("td", {
+    ...tdProps,
+    children: [PreviewDash && /*#__PURE__*/_jsx(PreviewDash, {}), children]
+  });
+}
+//# sourceMappingURL=day-cell.js.map

package/build-module/calendar/utils/day-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PreviewDashStartAndEnd","_jsx","viewBox","xmlns","fill","stroke","strokeDasharray","strokeDashoffset","strokeWidth","children","d","PreviewDashStart","PreviewDashMiddle","_jsxs","x1","y1","x2","y2","PreviewDashEnd","Day","props","day","modifiers","tdProps","PreviewDash","preview_start","preview_end","preview"],"sources":["@wordpress/components/src/calendar/utils/day-cell.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CalendarDay } from 'react-day-picker';\n/**\n * Internal dependencies\n */\nimport type { Modifiers } from '../types';\n\n/**\n * The dash array and offset are calculated by:\n * - measuring the path length (eg 92,28384)\n * - establishing how many segments should the path be split into (eg. 24)\n * - dividing the path length by the number of segments (eg. 92,28384 / 24 = 3,84516)\n * - playing with the dash offset to make sure the dashes look good on rounded corners\n */\n\n/**\n * Dashed rectangle. The dash array and offset are chosen to make sure dashes\n * look good on rounded corners and have similar metrics to the other dash\n * preview shapes.\n */\nconst PreviewDashStartAndEnd = () => {\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeDasharray=\"3.7677\"\n\t\t\tstrokeDashoffset=\"3.2\"\n\t\t\tstrokeWidth=\"1\"\n\t\t>\n\t\t\t<path d=\"M29.5,0.5 h-27 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h27 a2,2 0 0 0 2,-2 v-27 a2,2 0 0 0 -2,-2\" />\n\t\t</svg>\n\t);\n};\n\n/**\n * Dashed top, left, and bottom sides, with rounded corners. The dash array and\n * offset are chosen to make sure that multiple days in a row show a seamless\n * dashed border, and the dashes look good on rounded corners.\n */\nconst PreviewDashStart = () => {\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeDasharray=\"3.84516\"\n\t\t\tstrokeDashoffset=\"1.9226\"\n\t\t\tstrokeWidth=\"1\"\n\t\t>\n\t\t\t<path d=\"M32,0.5 h-29.5 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h30\" />\n\t\t</svg>\n\t);\n};\n/**\n * Dashed top and bottom sides. The dash array and offset are chosen\n * to make sure that multiple days in a row show a seamless dashed border.\n */\nconst PreviewDashMiddle = () => {\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeDasharray=\"3.9 4\"\n\t\t\tstrokeDashoffset=\"2\"\n\t\t\tstrokeWidth=\"1\"\n\t\t>\n\t\t\t<line x1=\"0\" y1=\"0.5\" x2=\"100\" y2=\"0.5\" />\n\t\t\t<line x1=\"0\" y1=\"31.5\" x2=\"100\" y2=\"31.5\" />\n\t\t</svg>\n\t);\n};\n/**\n * Dashed top, right, and bottom sides, with rounded corners. The dash array and\n * offset are chosen to make sure that multiple days in a row show a seamless\n * dashed border, and the dashes look good on rounded corners.\n */\nconst PreviewDashEnd = () => {\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeDasharray=\"3.84516\"\n\t\t\tstrokeDashoffset=\"1.9226\"\n\t\t\tstrokeWidth=\"1\"\n\t\t>\n\t\t\t<path d=\"M0,0.5 h29.5 a2,2 0 0 1 2,2 v27 a2,2 0 0 1 -2,2 h-29.5\" />\n\t\t</svg>\n\t);\n};\n\n/**\n * Render a grid cell for a specific day in the calendar.\n *\n * Handles interaction and focus for the day.\n * @see https://daypicker.dev/guides/custom-components\n */\nexport function Day(\n\tprops: {\n\t\t/** The day to render. */\n\t\tday: CalendarDay;\n\t\t/** The modifiers to apply to the day. */\n\t\tmodifiers: Modifiers;\n\t} & React.HTMLAttributes< HTMLDivElement >\n) {\n\tconst { day, modifiers, children, ...tdProps } = props;\n\n\tlet PreviewDash;\n\tif ( modifiers.preview_start && modifiers.preview_end ) {\n\t\tPreviewDash = PreviewDashStartAndEnd;\n\t} else if ( modifiers.preview_start ) {\n\t\tPreviewDash = PreviewDashStart;\n\t} else if ( modifiers.preview_end ) {\n\t\tPreviewDash = PreviewDashEnd;\n\t} else if ( modifiers.preview ) {\n\t\tPreviewDash = PreviewDashMiddle;\n\t}\n\n\treturn (\n\t\t<td { ...tdProps }>\n\t\t\t{ PreviewDash && <PreviewDash /> }\n\t\t\t{ children }\n\t\t</td>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMA,sBAAsB,GAAGA,CAAA,KAAM;EACpC,oBACCC,IAAA;IACCC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,cAAc;IACrBC,eAAe,EAAC,QAAQ;IACxBC,gBAAgB,EAAC,KAAK;IACtBC,WAAW,EAAC,GAAG;IAAAC,QAAA,eAEfR,IAAA;MAAMS,CAAC,EAAC;IAA6F,CAAE;EAAC,CACpG,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAC9B,oBACCV,IAAA;IACCC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,cAAc;IACrBC,eAAe,EAAC,SAAS;IACzBC,gBAAgB,EAAC,QAAQ;IACzBC,WAAW,EAAC,GAAG;IAAAC,QAAA,eAEfR,IAAA;MAAMS,CAAC,EAAC;IAAuD,CAAE;EAAC,CAC9D,CAAC;AAER,CAAC;AACD;AACA;AACA;AACA;AACA,MAAME,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,oBACCC,KAAA;IACCX,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,cAAc;IACrBC,eAAe,EAAC,OAAO;IACvBC,gBAAgB,EAAC,GAAG;IACpBC,WAAW,EAAC,GAAG;IAAAC,QAAA,gBAEfR,IAAA;MAAMa,EAAE,EAAC,GAAG;MAACC,EAAE,EAAC,KAAK;MAACC,EAAE,EAAC,KAAK;MAACC,EAAE,EAAC;IAAK,CAAE,CAAC,eAC1ChB,IAAA;MAAMa,EAAE,EAAC,GAAG;MAACC,EAAE,EAAC,MAAM;MAACC,EAAE,EAAC,KAAK;MAACC,EAAE,EAAC;IAAM,CAAE,CAAC;EAAA,CACxC,CAAC;AAER,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAC5B,oBACCjB,IAAA;IACCC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,cAAc;IACrBC,eAAe,EAAC,SAAS;IACzBC,gBAAgB,EAAC,QAAQ;IACzBC,WAAW,EAAC,GAAG;IAAAC,QAAA,eAEfR,IAAA;MAAMS,CAAC,EAAC;IAAwD,CAAE;EAAC,CAC/D,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,GAAGA,CAClBC,KAK0C,EACzC;EACD,MAAM;IAAEC,GAAG;IAAEC,SAAS;IAAEb,QAAQ;IAAE,GAAGc;EAAQ,CAAC,GAAGH,KAAK;EAEtD,IAAII,WAAW;EACf,IAAKF,SAAS,CAACG,aAAa,IAAIH,SAAS,CAACI,WAAW,EAAG;IACvDF,WAAW,GAAGxB,sBAAsB;EACrC,CAAC,MAAM,IAAKsB,SAAS,CAACG,aAAa,EAAG;IACrCD,WAAW,GAAGb,gBAAgB;EAC/B,CAAC,MAAM,IAAKW,SAAS,CAACI,WAAW,EAAG;IACnCF,WAAW,GAAGN,cAAc;EAC7B,CAAC,MAAM,IAAKI,SAAS,CAACK,OAAO,EAAG;IAC/BH,WAAW,GAAGZ,iBAAiB;EAChC;EAEA,oBACCC,KAAA;IAAA,GAASU,OAAO;IAAAd,QAAA,GACbe,WAAW,iBAAIvB,IAAA,CAACuB,WAAW,IAAE,CAAC,EAC9Bf,QAAQ;EAAA,CACP,CAAC;AAEP","ignoreList":[]}

package/build-module/calendar/utils/misc.js

@@ -0,0 +1,4 @@
+export function clampNumberOfMonths(numberOfMonths) {
+  return Math.min(3, Math.max(1, numberOfMonths));
+}
+//# sourceMappingURL=misc.js.map

package/build-module/calendar/utils/misc.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampNumberOfMonths","numberOfMonths","Math","min","max"],"sources":["@wordpress/components/src/calendar/utils/misc.ts"],"sourcesContent":["export function clampNumberOfMonths( numberOfMonths: number ) {\n\treturn Math.min( 3, Math.max( 1, numberOfMonths ) );\n}\n"],"mappings":"AAAA,OAAO,SAASA,mBAAmBA,CAAEC,cAAsB,EAAG;EAC7D,OAAOC,IAAI,CAACC,GAAG,CAAE,CAAC,EAAED,IAAI,CAACE,GAAG,CAAE,CAAC,EAAEH,cAAe,CAAE,CAAC;AACpD","ignoreList":[]}

package/build-module/calendar/utils/use-controlled-value.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+/**
+ * Handles controlled and uncontrolled state for the selected calendar value.
+ * It is assumed that the `value` prop is controlled when it's not undefined:
+ * - initial date selected, uncontrolled: use a non-undefined`defaultValue`
+ * - initial date selected, controlled: use a non-undefined `value`
+ * - no date selected, controlled: set `value` to `null`
+ *
+ * The `onChange` prop will return `undefined` when no date is selected,
+ * regardless of controlled / uncontrolled. It is expected that the consumer
+ * of the component will handle setting the value to `null` to indicate no date
+ * selected in controlled mode.
+ *
+ * @param props              - The props object.
+ * @param props.defaultValue - The default value.
+ * @param props.onChange     - The onChange callback.
+ * @param props.value        - The value.
+ *
+ * @return The value and the setValue function.
+ */
+export function useControlledValue({
+  defaultValue,
+  onChange,
+  value: valueProp
+}) {
+  var _ref;
+  const hasValue = typeof valueProp !== 'undefined';
+  const initialValue = hasValue ? valueProp : defaultValue;
+  const [state, setState] = useState(initialValue);
+  const value = (_ref = hasValue ? valueProp : state) !== null && _ref !== void 0 ? _ref : undefined;
+  let setValue;
+  const uncontrolledSetValue = useCallback((nextValue, ...args) => {
+    setState(nextValue);
+    onChange?.(nextValue, ...args);
+  }, [setState, onChange]);
+  if (hasValue && typeof onChange === 'function') {
+    // Controlled mode.
+    setValue = onChange;
+  } else if (!hasValue && typeof onChange === 'function') {
+    // Uncontrolled mode, plus forwarding to the onChange prop.
+    setValue = uncontrolledSetValue;
+  } else {
+    // Uncontrolled mode, only update internal state.
+    setValue = setState;
+  }
+  return [value, setValue];
+}
+//# sourceMappingURL=use-controlled-value.js.map

package/build-module/calendar/utils/use-controlled-value.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useCallback","useControlledValue","defaultValue","onChange","value","valueProp","_ref","hasValue","initialValue","state","setState","undefined","setValue","uncontrolledSetValue","nextValue","args"],"sources":["@wordpress/components/src/calendar/utils/use-controlled-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T | null | undefined;\n\tonChange?: ( newValue: T, ...args: any[] ) => void;\n};\n\n/**\n * Handles controlled and uncontrolled state for the selected calendar value.\n * It is assumed that the `value` prop is controlled when it's not undefined:\n * - initial date selected, uncontrolled: use a non-undefined`defaultValue`\n * - initial date selected, controlled: use a non-undefined `value`\n * - no date selected, controlled: set `value` to `null`\n *\n * The `onChange` prop will return `undefined` when no date is selected,\n * regardless of controlled / uncontrolled. It is expected that the consumer\n * of the component will handle setting the value to `null` to indicate no date\n * selected in controlled mode.\n *\n * @param props              - The props object.\n * @param props.defaultValue - The default value.\n * @param props.onChange     - The onChange callback.\n * @param props.value        - The value.\n *\n * @return The value and the setValue function.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = ( hasValue ? valueProp : state ) ?? undefined;\n\n\tlet setValue: typeof onChange;\n\tconst uncontrolledSetValue: NonNullable< typeof onChange > = useCallback(\n\t\t( nextValue, ...args ) => {\n\t\t\tsetState( nextValue );\n\t\t\tonChange?.( nextValue, ...args );\n\t\t},\n\t\t[ setState, onChange ]\n\t);\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\t// Controlled mode.\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\t// Uncontrolled mode, plus forwarding to the onChange prop.\n\t\tsetValue = uncontrolledSetValue;\n\t} else {\n\t\t// Uncontrolled mode, only update internal state.\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue ] as const;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;AAQ1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EAAA,IAAAC,IAAA;EACf,MAAMC,QAAQ,GAAG,OAAOF,SAAS,KAAK,WAAW;EACjD,MAAMG,YAAY,GAAGD,QAAQ,GAAGF,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEO,KAAK,EAAEC,QAAQ,CAAE,GAAGX,QAAQ,CAAES,YAAa,CAAC;EACpD,MAAMJ,KAAK,IAAAE,IAAA,GAAKC,QAAQ,GAAGF,SAAS,GAAGI,KAAK,cAAAH,IAAA,cAAAA,IAAA,GAAMK,SAAS;EAE3D,IAAIC,QAAyB;EAC7B,MAAMC,oBAAoD,GAAGb,WAAW,CACvE,CAAEc,SAAS,EAAE,GAAGC,IAAI,KAAM;IACzBL,QAAQ,CAAEI,SAAU,CAAC;IACrBX,QAAQ,GAAIW,SAAS,EAAE,GAAGC,IAAK,CAAC;EACjC,CAAC,EACD,CAAEL,QAAQ,EAAEP,QAAQ,CACrB,CAAC;EACD,IAAKI,QAAQ,IAAI,OAAOJ,QAAQ,KAAK,UAAU,EAAG;IACjD;IACAS,QAAQ,GAAGT,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEI,QAAQ,IAAI,OAAOJ,QAAQ,KAAK,UAAU,EAAG;IAC1D;IACAS,QAAQ,GAAGC,oBAAoB;EAChC,CAAC,MAAM;IACN;IACAD,QAAQ,GAAGF,QAAQ;EACpB;EAEA,OAAO,CAAEN,KAAK,EAAEQ,QAAQ,CAAE;AAC3B","ignoreList":[]}

package/build-module/calendar/utils/use-localization-props.js

@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+function isLocaleRTL(localeCode) {
+  const localeObj = new Intl.Locale(localeCode);
+  if ('getTextInfo' in localeObj) {
+    // @ts-expect-error - getTextInfo is not typed yet
+    // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
+    return localeObj.getTextInfo().direction === 'rtl';
+  }
+  return ['ar',
+  // Arabic
+  'he',
+  // Hebrew
+  'fa',
+  // Persian (Farsi)
+  'ur',
+  // Urdu
+  'ps',
+  // Pashto
+  'syr',
+  // Syriac
+  'dv',
+  // Divehi
+  'ku',
+  // Kurdish (Sorani)
+  'yi' // Yiddish
+  ].includes(localeObj.language);
+}
+
+/**
+ * Returns localization props for the calendar components.
+ *
+ * Notes:
+ * - the following props should be intended as defaults, and should
+ *   be overridden by consumer props if listed as public props.
+ * - It is possible for the translated strings to use a different locale
+ *   than the formatted dates and the computed `dir`. This is because the
+ *   translation function doesn't expose the locale used for the translated
+ *   strings, meaning that the dates are formatted using the `locale` prop.
+ *   For a correct localized experience, consumers should make sure that
+ *   translation context and `locale` prop are consistent.
+ * @param props
+ * @param props.locale
+ * @param props.timeZone
+ * @param props.mode
+ */
+export const useLocalizationProps = ({
+  locale,
+  timeZone,
+  mode
+}) => {
+  return useMemo(() => {
+    // ie. April 2025
+    const monthNameFormatter = new Intl.DateTimeFormat(locale.code, {
+      year: 'numeric',
+      month: 'long',
+      timeZone
+    });
+    // ie. M, T, W, T, F, S, S
+    const weekdayNarrowFormatter = new Intl.DateTimeFormat(locale.code, {
+      weekday: 'narrow',
+      timeZone
+    });
+    // ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
+    const weekdayLongFormatter = new Intl.DateTimeFormat(locale.code, {
+      weekday: 'long',
+      timeZone
+    });
+    // ie. Monday, April 29, 2025
+    const fullDateFormatter = new Intl.DateTimeFormat(locale.code, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone
+    });
+
+    // Note: the following props should be intended as defaults, and should
+    // be overridden by consumer props if listed as public props.
+    return {
+      'aria-label': mode === 'single' ? __('Date calendar') : __('Date range calendar'),
+      labels: {
+        /**
+         * The label for the month grid.
+         * @param date
+         */
+        labelGrid: date => monthNameFormatter.format(date),
+        /**
+         * The label for the gridcell, when the calendar is not interactive.
+         * @param date
+         * @param modifiers
+         */
+        labelGridcell: (date, modifiers) => {
+          const formattedDate = fullDateFormatter.format(date);
+          let label = formattedDate;
+          if (modifiers?.today) {
+            label = sprintf(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            __('Today, %s'), formattedDate);
+          }
+          return label;
+        },
+        /** The label for the "next month" button. */
+        labelNext: () => __('Go to the Next Month'),
+        /** The label for the "previous month" button. */
+        labelPrevious: () => __('Go to the Previous Month'),
+        /**
+         * The label for the day button.
+         * @param date
+         * @param modifiers
+         */
+        labelDayButton: (date, modifiers) => {
+          const formattedDate = fullDateFormatter.format(date);
+          let label = formattedDate;
+          if (modifiers?.today) {
+            label = sprintf(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            __('Today, %s'), formattedDate);
+          }
+          if (modifiers?.selected) {
+            label = sprintf(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            __('%s, selected'), formattedDate);
+          }
+          return label;
+        },
+        /**
+         * The label for the weekday.
+         * @param date
+         */
+        labelWeekday: date => weekdayLongFormatter.format(date)
+      },
+      locale,
+      dir: isLocaleRTL(locale.code) ? 'rtl' : 'ltr',
+      formatters: {
+        formatWeekdayName: date => {
+          return weekdayNarrowFormatter.format(date);
+        },
+        formatCaption: date => {
+          return monthNameFormatter.format(date);
+        }
+      },
+      timeZone
+    };
+  }, [locale, timeZone, mode]);
+};
+//# sourceMappingURL=use-localization-props.js.map

package/build-module/calendar/utils/use-localization-props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","useMemo","isLocaleRTL","localeCode","localeObj","Intl","Locale","getTextInfo","direction","includes","language","useLocalizationProps","locale","timeZone","mode","monthNameFormatter","DateTimeFormat","code","year","month","weekdayNarrowFormatter","weekday","weekdayLongFormatter","fullDateFormatter","day","labels","labelGrid","date","format","labelGridcell","modifiers","formattedDate","label","today","labelNext","labelPrevious","labelDayButton","selected","labelWeekday","dir","formatters","formatWeekdayName","formatCaption"],"sources":["@wordpress/components/src/calendar/utils/use-localization-props.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { Modifiers, BaseProps } from '../types';\n\nfunction isLocaleRTL( localeCode: string ) {\n\tconst localeObj = new Intl.Locale( localeCode );\n\tif ( 'getTextInfo' in localeObj ) {\n\t\t// @ts-expect-error - getTextInfo is not typed yet\n\t\t// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo\n\t\treturn localeObj.getTextInfo().direction === 'rtl';\n\t}\n\treturn [\n\t\t'ar', // Arabic\n\t\t'he', // Hebrew\n\t\t'fa', // Persian (Farsi)\n\t\t'ur', // Urdu\n\t\t'ps', // Pashto\n\t\t'syr', // Syriac\n\t\t'dv', // Divehi\n\t\t'ku', // Kurdish (Sorani)\n\t\t'yi', // Yiddish\n\t].includes( localeObj.language );\n}\n\n/**\n * Returns localization props for the calendar components.\n *\n * Notes:\n * - the following props should be intended as defaults, and should\n *   be overridden by consumer props if listed as public props.\n * - It is possible for the translated strings to use a different locale\n *   than the formatted dates and the computed `dir`. This is because the\n *   translation function doesn't expose the locale used for the translated\n *   strings, meaning that the dates are formatted using the `locale` prop.\n *   For a correct localized experience, consumers should make sure that\n *   translation context and `locale` prop are consistent.\n * @param props\n * @param props.locale\n * @param props.timeZone\n * @param props.mode\n */\nexport const useLocalizationProps = ( {\n\tlocale,\n\ttimeZone,\n\tmode,\n}: {\n\tlocale: NonNullable< BaseProps[ 'locale' ] >;\n\ttimeZone: BaseProps[ 'timeZone' ];\n\tmode: 'single' | 'range';\n} ) => {\n\treturn useMemo( () => {\n\t\t// ie. April 2025\n\t\tconst monthNameFormatter = new Intl.DateTimeFormat( locale.code, {\n\t\t\tyear: 'numeric',\n\t\t\tmonth: 'long',\n\t\t\ttimeZone,\n\t\t} );\n\t\t// ie. M, T, W, T, F, S, S\n\t\tconst weekdayNarrowFormatter = new Intl.DateTimeFormat( locale.code, {\n\t\t\tweekday: 'narrow',\n\t\t\ttimeZone,\n\t\t} );\n\t\t// ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday\n\t\tconst weekdayLongFormatter = new Intl.DateTimeFormat( locale.code, {\n\t\t\tweekday: 'long',\n\t\t\ttimeZone,\n\t\t} );\n\t\t// ie. Monday, April 29, 2025\n\t\tconst fullDateFormatter = new Intl.DateTimeFormat( locale.code, {\n\t\t\tweekday: 'long',\n\t\t\tyear: 'numeric',\n\t\t\tmonth: 'long',\n\t\t\tday: 'numeric',\n\t\t\ttimeZone,\n\t\t} );\n\n\t\t// Note: the following props should be intended as defaults, and should\n\t\t// be overridden by consumer props if listed as public props.\n\t\treturn {\n\t\t\t'aria-label':\n\t\t\t\tmode === 'single'\n\t\t\t\t\t? __( 'Date calendar' )\n\t\t\t\t\t: __( 'Date range calendar' ),\n\t\t\tlabels: {\n\t\t\t\t/**\n\t\t\t\t * The label for the month grid.\n\t\t\t\t * @param date\n\t\t\t\t */\n\t\t\t\tlabelGrid: ( date: Date ) => monthNameFormatter.format( date ),\n\t\t\t\t/**\n\t\t\t\t * The label for the gridcell, when the calendar is not interactive.\n\t\t\t\t * @param date\n\t\t\t\t * @param modifiers\n\t\t\t\t */\n\t\t\t\tlabelGridcell: (\n\t\t\t\t\tdate: Date,\n\t\t\t\t\t/** The modifiers for the day. */\n\t\t\t\t\tmodifiers?: Modifiers\n\t\t\t\t) => {\n\t\t\t\t\tconst formattedDate = fullDateFormatter.format( date );\n\t\t\t\t\tlet label = formattedDate;\n\t\t\t\t\tif ( modifiers?.today ) {\n\t\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t\t// translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n\t\t\t\t\t\t\t__( 'Today, %s' ),\n\t\t\t\t\t\t\tformattedDate\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn label;\n\t\t\t\t},\n\t\t\t\t/** The label for the \"next month\" button. */\n\t\t\t\tlabelNext: () => __( 'Go to the Next Month' ),\n\t\t\t\t/** The label for the \"previous month\" button. */\n\t\t\t\tlabelPrevious: () => __( 'Go to the Previous Month' ),\n\t\t\t\t/**\n\t\t\t\t * The label for the day button.\n\t\t\t\t * @param date\n\t\t\t\t * @param modifiers\n\t\t\t\t */\n\t\t\t\tlabelDayButton: (\n\t\t\t\t\tdate: Date,\n\t\t\t\t\t/** The modifiers for the day. */\n\t\t\t\t\tmodifiers?: Modifiers\n\t\t\t\t) => {\n\t\t\t\t\tconst formattedDate = fullDateFormatter.format( date );\n\t\t\t\t\tlet label = formattedDate;\n\t\t\t\t\tif ( modifiers?.today ) {\n\t\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t\t// translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n\t\t\t\t\t\t\t__( 'Today, %s' ),\n\t\t\t\t\t\t\tformattedDate\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif ( modifiers?.selected ) {\n\t\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t\t// translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n\t\t\t\t\t\t\t__( '%s, selected' ),\n\t\t\t\t\t\t\tformattedDate\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn label;\n\t\t\t\t},\n\t\t\t\t/**\n\t\t\t\t * The label for the weekday.\n\t\t\t\t * @param date\n\t\t\t\t */\n\t\t\t\tlabelWeekday: ( date: Date ) =>\n\t\t\t\t\tweekdayLongFormatter.format( date ),\n\t\t\t},\n\t\t\tlocale,\n\t\t\tdir: isLocaleRTL( locale.code ) ? 'rtl' : 'ltr',\n\t\t\tformatters: {\n\t\t\t\tformatWeekdayName: ( date: Date ) => {\n\t\t\t\t\treturn weekdayNarrowFormatter.format( date );\n\t\t\t\t},\n\t\t\t\tformatCaption: ( date: Date ) => {\n\t\t\t\t\treturn monthNameFormatter.format( date );\n\t\t\t\t},\n\t\t\t},\n\t\t\ttimeZone,\n\t\t} as const;\n\t}, [ locale, timeZone, mode ] );\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-gradient-picker/gradient-bar/control-points.js

@@ -36,7 +36,7 @@ function ControlPointButton({
     children: [/*#__PURE__*/_jsx(Button, {
       "aria-label": sprintf(
       // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
-      __('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
+      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),
       "aria-describedby": descriptionId,
       "aria-haspopup": "true",
       "aria-expanded": isOpen,

package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","DropdownContentWrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","children","__next40pxDefaultSize","className","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","placement","offset","resize","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","renderContent","paddingSize","enableAlpha","toRgbString","length","alignment","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","icon"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveStateRef = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveStateRef.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveStateRef.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveStateRef.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\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} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\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\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\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\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\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\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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</DropdownContentWrapper>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","DropdownContentWrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","children","__next40pxDefaultSize","className","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","placement","offset","resize","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","renderContent","paddingSize","enableAlpha","toRgbString","length","alignment","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","icon"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$d%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveStateRef = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveStateRef.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveStateRef.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveStateRef.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveStateRef.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\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} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\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\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\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\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\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\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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</DropdownContentWrapper>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-select-control-v2/custom-select.js

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { createContext, useCallback, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,9 +25,9 @@ function defaultRenderSelectedValue(value) {
     return __('Select an item');
   }
   if (Array.isArray(value)) {
-    return value.length === 1 ? value[0] :
-    // translators: %s: number of items selected (it will always be 2 or more items)
-    sprintf(__('%s items selected'), value.length);
+    return value.length === 1 ? value[0] : sprintf(
+    // translators: %d: number of items selected (it will always be 2 or more items)
+    _n('%d item selected', '%d items selected', value.length), value.length);
   }
   return value;
 }