@wordpress/components 29.12.0 → 30.0.0

package/build/calendar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/calendar/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Locale } from 'date-fns';\nimport type * as React from 'react';\n\n/**\n * Represents the modifiers that match a specific day in the calendar.\n * @example\n *   const modifiers: Modifiers = {\n *   today: false, // the day is not today\n *   selected: true, // the day is selected\n *   disabled: false, // the day is not disabled\n *   outside: false, // the day is not outside the month\n *   focused: false, // the day is not focused\n *\n *   weekend: false // custom modifier example for matching a weekend\n *   booked: true // custom modifier example for matching a booked day\n *   available: false // custom modifier example for matching an available day\n *   };\n */\nexport type Modifiers = Record< string, boolean >;\n\n/**\n * A value or a function that matches a specific day.\n * @example\n *   // will always match the day\n *   const booleanMatcher: Matcher = true;\n *\n *   // will match the today's date\n *   const dateMatcher: Matcher = new Date();\n *\n *   // will match the days in the array\n *   const arrayMatcher: Matcher = [\n *     new Date(2019, 1, 2),\n *     new Date(2019, 1, 4)\n *   ];\n *\n *   // will match days after the 2nd of February 2019\n *   const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };\n *\n *   // will match days before the 2nd of February 2019 }\n *   const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };\n *\n *   // will match Sundays\n *   const dayOfWeekMatcher: DayOfWeek = {\n *     dayOfWeek: 0\n *   };\n *\n *   // will match the included days, except the two dates\n *   const intervalMatcher: DateInterval = {\n *     after: new Date(2019, 1, 2),\n *     before: new Date(2019, 1, 5)\n *   };\n *\n *   // will match the included days, including the two dates\n *   const rangeMatcher: DateRange = {\n *     from: new Date(2019, 1, 2),\n *     to: new Date(2019, 1, 5)\n *   };\n *\n *   // will match when the function return true\n *   const functionMatcher: Matcher = (day: Date) => {\n *     return day.getMonth() === 2; // match when month is March\n *   };\n */\ntype Matcher =\n\t| boolean\n\t| ( ( date: Date ) => boolean )\n\t| Date\n\t| Date[]\n\t| DateRange\n\t| DateBefore\n\t| DateAfter\n\t| DateInterval\n\t| DayOfWeek;\n/**\n * Match a day falling after the specified date, with the date not included.\n * @example\n *   // Match days after the 2nd of February 2019\n *   const matcher: DateAfter = { after: new Date(2019, 1, 2) };\n */\ntype DateAfter = {\n\tafter: Date;\n};\n/**\n * Match a day falling before the specified date, with the date not included.\n * @example\n *   // Match days before the 2nd of February 2019\n *   const matcher: DateBefore = { before: new Date(2019, 1, 2) };\n */\ntype DateBefore = {\n\tbefore: Date;\n};\n/**\n * An interval of dates. Differently from `DateRange`, the range ends here\n * are not included.\n * @example\n *   // Match the days between the 2nd and the 5th of February 2019\n *   const matcher: DateInterval = {\n *     after: new Date(2019, 1, 2),\n *     before: new Date(2019, 1, 5)\n *   };\n */\ntype DateInterval = {\n\tbefore: Date;\n\tafter: Date;\n};\n/**\n * A range of dates. The range can be open. Differently from\n * `DateInterval`, the range ends here are included.\n * @example\n *   // Match the days between the 2nd and the 5th of February 2019\n *   const matcher: DateRange = {\n *     from: new Date(2019, 1, 2),\n *     to: new Date(2019, 1, 5)\n *   };\n */\nexport type DateRange = {\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n};\n/**\n * Match dates being one of the specified days of the week (`0-6`, where `0` is\n * Sunday).\n * @example\n *   // Match Sundays\n *   const matcher: DayOfWeek = { dayOfWeek: 0 };\n *   // Match weekends\n *   const matcher: DayOfWeek = { dayOfWeek: [0, 6] };\n */\ntype DayOfWeek = {\n\tdayOfWeek: number | number[];\n};\n\n/**\n * Shared handler type for `onSelect` callback when a selection mode is set.\n * @example\n *   const handleSelect: OnSelectHandler<Date> = (\n *     selected,\n *     triggerDate,\n *     modifiers,\n *     e\n *   ) => {\n *     console.log( \"Selected:\", selected );\n *     console.log( \"Triggered by:\", triggerDate );\n *   };\n * @template T - The type of the selected item.\n * @callback OnSelectHandler\n * @param {T}                                      selected    - The selected item after the event.\n * @param {Date}                                   triggerDate - The date when the event was triggered. This is\n *                                                             typically the day clicked or interacted with.\n * @param {Modifiers}                              modifiers   - The modifiers associated with the event.\n * @param {React.MouseEvent | React.KeyboardEvent} e           - The event object.\n */\nexport type OnSelectHandler< T > = (\n\tselected: T,\n\ttriggerDate: Date,\n\tmodifiers: Modifiers,\n\te: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface BaseProps\n\textends Omit<\n\t\tReact.HTMLAttributes< HTMLDivElement >,\n\t\t'onSelect' | 'defaultValue'\n\t> {\n\t/**\n\t * Whether the selection is required.\n\t * When `true`, there always needs to be a date selected.\n\t * @default false\n\t */\n\trequired?: boolean;\n\n\t/**\n\t * The initial month to show in the calendar view (uncontrolled).\n\t * @default The current month\n\t */\n\tdefaultMonth?: Date;\n\t/**\n\t * The month displayed in the calendar view (controlled). Use together with\n\t * `onMonthChange` to change the month programmatically.\n\t */\n\tmonth?: Date;\n\t/**\n\t * The number of months displayed at once.\n\t * @default 1\n\t */\n\tnumberOfMonths?: number;\n\t/**\n\t * The earliest month to start the month navigation.\n\t */\n\tstartMonth?: Date;\n\t/**\n\t * The latest month to end the month navigation.\n\t */\n\tendMonth?: Date;\n\t/**\n\t * Focus the first selected day (if set) or today's date (if not disabled).\n\t *\n\t * Use this prop when you need to focus the calendar after a user action\n\t * (e.g. opening the dialog with the calendar).\n\t */\n\tautoFocus?: boolean;\n\t/**\n\t * Specify which days are disabled. Using `true` will disable all dates.\n\t */\n\tdisabled?: Matcher | Matcher[] | undefined;\n\t/**\n\t * Disable the navigation buttons.\n\t */\n\tdisableNavigation?: boolean;\n\t/**\n\t * Use custom labels, useful for translating the component.\n\t *\n\t * For a correct localized experience, consumers should make sure the locale\n\t * used for the translated labels and `locale` prop are consistent.\n\t */\n\tlabels?: {\n\t\t/**\n\t\t * The label for the navigation toolbar.\n\t\t * @default \"\"\n\t\t */\n\t\tlabelNav?: () => string;\n\t\t/**\n\t\t * The label for the month grid.\n\t\t * @default \"LLLL y\" (e.g. \"November 2022\")\n\t\t */\n\t\tlabelGrid?: ( date: Date ) => string;\n\t\t/**\n\t\t * The label for the gridcell, when the calendar is not interactive.\n\t\t * @default The formatted date.\n\t\t */\n\t\tlabelGridcell?: ( date: Date, modifiers?: Modifiers ) => string;\n\t\t/**\n\t\t * The label for the \"next month\" button.\n\t\t * @default \"Go to the Next Month\"\n\t\t */\n\t\tlabelNext?: ( month: Date | undefined ) => string;\n\t\t/**\n\t\t * The label for the \"previous month\" button.\n\t\t * @default \"Go to the Previous Month\"\n\t\t */\n\t\tlabelPrevious?: ( month: Date | undefined ) => string;\n\t\t/**\n\t\t * The label for the day button.\n\t\t * @default The formatted date.\n\t\t */\n\t\tlabelDayButton?: ( date: Date, modifiers?: Modifiers ) => string;\n\t\t/**\n\t\t * The label for the weekday.\n\t\t * @default ( date: Date ) => \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\"\n\t\t */\n\t\tlabelWeekday?: ( date: Date ) => string;\n\t};\n\n\t/**\n\t * The locale object used to localize dates. Pass a locale from\n\t * `@date-fns/locale` to localize the calendar.\n\t *\n\t * For a correct localized experience, consumers should make sure the locale\n\t * used for the translated labels and `locale` prop are consistent.\n\t * @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales\n\t * @default The `enUS` locale from `@date-fns/locale`\n\t */\n\tlocale?: Locale;\n\t/**\n\t * The index of the first day of the week (0 - Sunday). Overrides the locale's\n\t * one.\n\t * @default Based on the `locale` prop\n\t */\n\tweekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;\n\t/**\n\t * Event fired when the user navigates between months.\n\t */\n\tonMonthChange?: ( month: Date ) => void;\n\t/**\n\t * The time zone (IANA or UTC offset) to use in the calendar.\n\t *\n\t * See\n\t * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\n\t * for the possible values.\n\t *\n\t * When working with time zones, use the `TZDate` object exported by this\n\t * package instead of the native `Date` object.\n\t * @example\n\t *   import { DateCalendar, TZDate } from \"@wordpress/components\";\n\t *\n\t *   export function WithTimeZone() {\n\t *     const timeZone = \"America/New_York\";\n\t *     const [ selected, setSelected ] = useState< Date | undefined >(\n\t *       new TZDate( 2024, 12, 10, timeZone ) // Use `TZDate` instead of `Date`\n\t *     );\n\t *     return (\n\t *       <DateCalendar\n\t *         timeZone={ timeZone }\n\t *         selected={ selected }\n\t *         onSelect={ setSelected }\n\t *     />\n\t *   );\n\t * }\n\t */\n\ttimeZone?: string;\n\t/**\n\t * The role attribute to add to the container element.\n\t * @default 'application'\n\t */\n\trole?: 'application' | 'dialog' | undefined;\n}\n\ninterface SingleProps {\n\t/** The selected date. */\n\tselected?: Date | undefined | null;\n\t/** Event handler when a day is selected. */\n\tonSelect?: OnSelectHandler< Date | undefined >;\n\t/** The default selected date (for uncontrolled usage). */\n\tdefaultSelected?: Date;\n}\n\ninterface RangeProps {\n\t/**\n\t * When `true`, the range will reset when including a disabled day.\n\t */\n\texcludeDisabled?: boolean;\n\t/**\n\t * The minimum number of nights to include in the range.\n\t */\n\tmin?: number;\n\t/**\n\t * The maximum number of nights to include in the range.\n\t */\n\tmax?: number;\n\t/** The selected range. */\n\tselected?: DateRange | undefined | null;\n\t/** Event handler when the selection changes. */\n\tonSelect?: OnSelectHandler< DateRange | undefined >;\n\t/** The default selected range (for uncontrolled usage). */\n\tdefaultSelected?: DateRange;\n}\n\nexport type DateCalendarProps = BaseProps & SingleProps;\nexport type DateRangeCalendarProps = BaseProps & RangeProps;\n"],"mappings":"","ignoreList":[]}

package/build/calendar/utils/constants.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MODIFIER_CLASSNAMES = exports.COMMON_PROPS = void 0;
+var _dayCell = require("./day-cell");
+/**
+ * Internal dependencies
+ */
+
+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'
+};
+const MODIFIER_CLASSNAMES = exports.MODIFIER_CLASSNAMES = {
+  preview: 'components-calendar__day--preview',
+  preview_start: 'components-calendar__day--preview-start',
+  preview_end: 'components-calendar__day--preview-end'
+};
+const COMMON_PROPS = exports.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: _dayCell.Day
+  }
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_dayCell","require","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","exports","preview","preview_start","preview_end","COMMON_PROPS","animate","showOutsideDays","showWeekNumber","hideWeekdays","captionLayout","fixedWeeks","hideNavigation","classNames","role","components","Day"],"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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,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;AACM,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EAClCE,OAAO,EAAE,mCAAmC;EAC5CC,aAAa,EAAE,yCAAyC;EACxDC,WAAW,EAAE;AACd,CAAC;AAEM,MAAMC,YAAY,GAAAJ,OAAA,CAAAI,YAAA,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,EAAEzC,UAAU;EACtB;EACA0C,IAAI,EAAE,aAAa;EACnBC,UAAU,EAAE;IACXC,GAAG,EAAHA;EACD;AACD,CAAU","ignoreList":[]}

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Day = Day;
+var _jsxRuntime = require("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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("line", {
+      x1: "0",
+      y1: "0.5",
+      x2: "100",
+      y2: "0.5"
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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
+ */
+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__*/(0, _jsxRuntime.jsxs)("td", {
+    ...tdProps,
+    children: [PreviewDash && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewDash, {}), children]
+  });
+}
+//# sourceMappingURL=day-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["PreviewDashStartAndEnd","_jsxRuntime","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,oBACC,IAAAC,WAAA,CAAAC,GAAA;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,eAEf,IAAAT,WAAA,CAAAC,GAAA;MAAMS,CAAC,EAAC;IAA6F,CAAE;EAAC,CACpG,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAC9B,oBACC,IAAAX,WAAA,CAAAC,GAAA;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,eAEf,IAAAT,WAAA,CAAAC,GAAA;MAAMS,CAAC,EAAC;IAAuD,CAAE;EAAC,CAC9D,CAAC;AAER,CAAC;AACD;AACA;AACA;AACA;AACA,MAAME,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,oBACC,IAAAZ,WAAA,CAAAa,IAAA;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,gBAEf,IAAAT,WAAA,CAAAC,GAAA;MAAMa,EAAE,EAAC,GAAG;MAACC,EAAE,EAAC,KAAK;MAACC,EAAE,EAAC,KAAK;MAACC,EAAE,EAAC;IAAK,CAAE,CAAC,eAC1C,IAAAjB,WAAA,CAAAC,GAAA;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,oBACC,IAAAlB,WAAA,CAAAC,GAAA;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,eAEf,IAAAT,WAAA,CAAAC,GAAA;MAAMS,CAAC,EAAC;IAAwD,CAAE;EAAC,CAC/D,CAAC;AAER,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACO,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,GAAGzB,sBAAsB;EACrC,CAAC,MAAM,IAAKuB,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,oBACC,IAAAZ,WAAA,CAAAa,IAAA;IAAA,GAASU,OAAO;IAAAd,QAAA,GACbe,WAAW,iBAAI,IAAAxB,WAAA,CAAAC,GAAA,EAACuB,WAAW,IAAE,CAAC,EAC9Bf,QAAQ;EAAA,CACP,CAAC;AAEP","ignoreList":[]}

package/build/calendar/utils/misc.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clampNumberOfMonths = clampNumberOfMonths;
+function clampNumberOfMonths(numberOfMonths) {
+  return Math.min(3, Math.max(1, numberOfMonths));
+}
+//# sourceMappingURL=misc.js.map

package/build/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":";;;;;;AAAO,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/calendar/utils/use-localization-props.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocalizationProps = void 0;
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * 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
+ */
+const useLocalizationProps = ({
+  locale,
+  timeZone,
+  mode
+}) => {
+  return (0, _element.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' ? (0, _i18n.__)('Date calendar') : (0, _i18n.__)('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 = (0, _i18n.sprintf)(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            (0, _i18n.__)('Today, %s'), formattedDate);
+          }
+          return label;
+        },
+        /** The label for the "next month" button. */
+        labelNext: () => (0, _i18n.__)('Go to the Next Month'),
+        /** The label for the "previous month" button. */
+        labelPrevious: () => (0, _i18n.__)('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 = (0, _i18n.sprintf)(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            (0, _i18n.__)('Today, %s'), formattedDate);
+          }
+          if (modifiers?.selected) {
+            label = (0, _i18n.sprintf)(
+            // translators: %s is the full date (e.g. "Monday, April 29, 2025")
+            (0, _i18n.__)('%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]);
+};
+exports.useLocalizationProps = useLocalizationProps;
+//# sourceMappingURL=use-localization-props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_element","isLocaleRTL","localeCode","localeObj","Intl","Locale","getTextInfo","direction","includes","language","useLocalizationProps","locale","timeZone","mode","useMemo","monthNameFormatter","DateTimeFormat","code","year","month","weekdayNarrowFormatter","weekday","weekdayLongFormatter","fullDateFormatter","day","__","labels","labelGrid","date","format","labelGridcell","modifiers","formattedDate","label","today","sprintf","labelNext","labelPrevious","labelDayButton","selected","labelWeekday","dir","formatters","formatWeekdayName","formatCaption","exports"],"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/custom-gradient-picker/gradient-bar/control-points.js

@@ -44,7 +44,7 @@ function ControlPointButton({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       "aria-label": (0, _i18n.sprintf)(
       // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
-      (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
+      (0, _i18n.__)('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/custom-gradient-picker/gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","__next40pxDefaultSize","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"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","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","__next40pxDefaultSize","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"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/custom-select-control-v2/custom-select.js

@@ -35,9 +35,9 @@ function defaultRenderSelectedValue(value) {
     return (0, _i18n.__)('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)
-    (0, _i18n.sprintf)((0, _i18n.__)('%s items selected'), value.length);
+    return value.length === 1 ? value[0] : (0, _i18n.sprintf)(
+    // translators: %d: number of items selected (it will always be 2 or more items)
+    (0, _i18n._n)('%d item selected', '%d items selected', value.length), value.length);
   }
   return value;
 }