npm - @wordpress/components - Versions diffs - 29.12.0 → 30.0.0 - Mend

@wordpress/components 29.12.0 → 30.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

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

@@ -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 ADDED Viewed

@@ -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":"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","ignoreList":[]}

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

@@ -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 ADDED Viewed

@@ -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-localization-props.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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$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 CHANGED Viewed

@@ -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;
 }

package/build-module/custom-select-control-v2/custom-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useStoreState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","flip","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { VisuallyHidden } from '..';\nimport as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined \|\| value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t ~~sprintf~~( ~~__(~~ '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = Ariakit.useStoreState( store );\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t\t// Match legacy behavior\n\t\t\t\t\tflip={ ! isLegacy }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,WAAW,EAAEC,OAAO,QAAQ,oBAAoB;AACxE,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;~~AAE7C~~;AACA;AACA;AACA,SAASC,cAAc,QAAQ,IAAI;AACnC,OAAO,KAAKC,MAAM,MAAM,UAAU;AASlC,OAAOC,SAAS,MAAM,6BAA6B;AACnD,OAAOC,wBAAwB,MAAM,gCAAgC;AACrE,OAAOC,WAAW,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1C,OAAO,MAAMC,mBAAmB,GAC/Bd,aAAa,~~CAA6Be~~,SAAU,CAAC;AAEtD,SAASC,0BAA0BA,CAClCC,KAAyC,EACxC;EACD,MAAMC,YAAY,GAAGC,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,GACxCA,KAAK,CAACI,MAAM,KAAK,CAAC,GAClBJ,KAAK,KAAKF,SAAS,IAAIE,KAAK,KAAK,IAAI;EAExC,IAAKC,YAAY,EAAG;IACnB,~~OAAOf~~,EAAE,CAAE,gBAAiB,CAAC;EAC9B;EAEA,~~IAAKgB~~,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACI,MAAM,KAAK,CAAC,GACtBJ,KAAK,CAAE,CAAC,CAAE;~~IACV~~;~~IACAb~~,~~OAAO,CAAED,~~EAAE,CAAE,~~mBAAoB~~,~~CAAC~~,EAAEc,KAAK,CAACI,MAAO,CAAC;~~EACtD~~;EAEA,OAAOJ,KAAK;AACb;AAEA,MAAMK,kBAAkB,GAAGA,CAAE;EAC5BC,mBAAmB;EACnBC,IAAI,GAAG,SAAS;EAChBC,KAAK;EACL,GAAGC;AAOJ,CAAC,KAAM;EACN,MAAM;IAAET,KAAK,EAAEU;EAAa,CAAC,~~GAAG5B~~,OAAO,~~CAAC6B~~,aAAa,CAAEH,KAAM,CAAC;EAE9D,MAAMI,2BAA2B,~~GAAG3B~~,OAAO,CAC1C,~~MAAMqB~~,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAIP,0BAA0B,EACvD,CAAEO,mBAAmB,CACtB,CAAC;EAED,oBACCZ,IAAA,CAACL,MAAM,CAACwB,MAAM;IAAA,GACRJ,SAAS;IACdF,IAAI,EAAGA,IAAM;IACbO,mBAAmB,EAAG,CAAC,CAAER,mBAAqB;IAC9CE,KAAK,EAAGA,KAAO;IAAAO,QAAA,EAEbH,2BAA2B,CAAEF,YAAa;EAAC,CAC/B,CAAC;AAElB,CAAC;AAED,SAASM,aAAaA,CACrBC,KAGuB,EACtB;EACD,MAAM;IACLF,QAAQ;IACRG,mBAAmB,GAAG,KAAK;IAC3BC,KAAK;IACLZ,IAAI;IACJC,KAAK;IACLY,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChB,GAAGZ;EACJ,CAAC,GAAGQ,KAAK;EAET,MAAMK,sBAAoE,~~GACzEtC~~,WAAW,~~CACRuC~~,CAAC,IAAM;IACR,IAAKF,QAAQ,EAAG;MACfE,CAAC,CAACC,eAAe,CAAC,CAAC;IACpB;EACD,CAAC,EACD,CAAEH,QAAQ,CACX,CAAC;EAEF,MAAMI,YAAY,~~GAAGxC~~,OAAO,CAAE,OAAQ;~~IAAEuB~~,KAAK;IAAED;EAAK,CAAC,CAAE,EAAE,CAAEC,KAAK,EAAED,IAAI,CAAG,CAAC;EAE1E;IAAA;IACC;IACAX,KAAA;MAAKwB,SAAS,EAAGA,SAAW;MAAAL,QAAA,gBAC3BrB,IAAA,~~CAACZ~~,OAAO,~~CAAC4C~~,WAAW;QACnBlB,KAAK,EAAGA,KAAO;QACfmB,MAAM,EACLT,mBAAmB;QAAA;QAClB;QACAxB,IAAA,CAACN,cAAc,IAAE,CAAC;QAAA;QAElB;QACAM,IAAA,CAACF,WAAW,CAACoC,WAAW;UAACC,EAAE,EAAC;QAAK,CAAE,CAEpC;QAAAd,QAAA,EAECI;MAAK,CACa,CAAC,eACtBvB,KAAA,CAACN,SAAS;QACTwC,qBAAqB;QACrBvB,IAAI,EAAGA,IAAM;QACbwB,MAAM,eAAGrC,IAAA,CAACH,wBAAwB,IAAE,CAAG;QAAAwB,QAAA,gBAEvCrB,IAAA,CAACW,kBAAkB;UAAA,GACbI,SAAS;UACdF,IAAI,EAAGA,IAAM;UACbC,KAAK,EAAGA;UACR;UAAA;UACAwB,aAAa,EAAG,CAAEX;QAAU,CAC5B,CAAC,eACF3B,IAAA,CAACL,MAAM,CAAC4C,aAAa;UACpBC,MAAM,EAAG,EAAI;UACb1B,KAAK,EAAGA,KAAO;UACf2B,SAAS;UACTC,KAAK,EAAG,KAAO;UACfC,SAAS,EAAGf;UACZ;UAAA;UACAgB,IAAI,EAAG,CAAEjB,QAAU;UAAAN,QAAA,eAEnBrB,IAAA,CAACG,mBAAmB,CAAC0C,QAAQ;YAACvC,KAAK,EAAGyB,YAAc;YAAAV,QAAA,EACjDA;UAAQ,CACmB;QAAC,CACV,CAAC;MAAA,CACb,CAAC;IAAA,CACR;EAAC;AAER;AAEA,eAAeC,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","_n","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useStoreState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","flip","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { VisuallyHidden } from '..';\nimport as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined \|\| value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %d: number of items selected (it will always be 2 or more items)\n\t\t\t\t\t_n( '%d item selected', '%d items selected', value.length ),\n\t\t\t\t\tvalue.length\n\t\t\t );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = Ariakit.useStoreState( store );\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t\t// Match legacy behavior\n\t\t\t\t\tflip={ ! isLegacy }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}

package/build-module/date-time/date/index.js CHANGED Viewed

@@ -227,7 +227,7 @@ function getDayLabel(date, isSelected, numEvents) {
     _n('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents);
   } else if (isSelected) {
     return sprintf(
-    // translators: %s: The calendar date.
+    // translators: 1: The calendar date.
     __('%1$s. Selected'), localizedDate);
   } else if (numEvents > 0) {
     return sprintf(