@hitachivantara/uikit-react-core 5.82.4 → 5.83.1

package/dist/esm/Calendar/utils.js

@@ -1,6 +1,6 @@
-import dayjs from "dayjs";
 import { capitalize } from "../utils/helpers.js";
 const CALENDAR_WEEKS = 6;
+const DEFAULT_LOCALE = "en";
 const getMonthDays = (month, year) => new Date(year, month, 0).getDate();
 const getMonthFirstWeekday = (month, year) => new Date(year, month - 1, 1).getDay();
 const makeUTCDate = (year, monthIndex, day, hour = 1) => new Date(Date.UTC(year, monthIndex, day, hour));
@@ -14,6 +14,9 @@ const isSameDay = (date1, date2) => {
   if (!(isDate(date1) && isDate(date2))) return false;
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 };
+const getDateISO = (date) => {
+  return new Date(date).toISOString().slice(0, 10);
+};
 const getPreviousMonth = (month, year) => {
   const prevMonth = month > 1 ? month - 1 : 12;
   const prevMonthYear = month > 1 ? year : year - 1;
@@ -41,7 +44,10 @@ const getWeekdayNamesList = (locale) => {
   });
 };
 const getMonthName = (date, locale, representationValue = "long") => new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);
-const getFormattedDate = (date, locale, rep = "short") => `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;
+const getFormattedDate = (date, locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  return formatter.format(date);
+};
 const createDatesArray = (month, year) => {
   const monthDays = getMonthDays(month, year);
   const daysFromPrevMonth = getMonthFirstWeekday(month, year);
@@ -64,47 +70,75 @@ const createDatesArray = (month, year) => {
   return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];
 };
 const isRange = (date) => date != null && typeof date === "object" && "startDate" in date;
-const dateInProvidedValueRange = (date, providedValueRange) => {
-  const { startDate, endDate } = providedValueRange;
-  if (!isRange(providedValueRange) || endDate == null) return false;
-  const localEndDate = endDate;
-  const modStartDate = dayjs(startDate).format("YYYY-MM-DD");
-  const modEndDate = dayjs(localEndDate).format("YYYY-MM-DD");
-  const convertedDate = dayjs(date).format("YYYY-MM-DD");
+const dateInProvidedValueRange = (date, dateRange) => {
+  if (!isRange(dateRange) || !dateRange?.endDate) return false;
+  const { startDate, endDate } = dateRange;
+  const modStartDate = getDateISO(startDate);
+  const modEndDate = getDateISO(endDate);
+  const convertedDate = getDateISO(date ?? /* @__PURE__ */ new Date());
   return convertedDate >= modStartDate && convertedDate <= modEndDate;
 };
 const checkIfDateIsDisabled = (date, minimumDate, maximumDate) => {
   if (!minimumDate && !maximumDate) return false;
-  const modStartDate = minimumDate ? dayjs(minimumDate).format("YYYY-MM-DD") : void 0;
-  const modEndDate = maximumDate ? dayjs(maximumDate).format("YYYY-MM-DD") : void 0;
-  const convertedDate = dayjs(date).format("YYYY-MM-DD");
+  const modStartDate = minimumDate && getDateISO(minimumDate);
+  const modEndDate = maximumDate && getDateISO(maximumDate);
+  const convertedDate = getDateISO(date ?? /* @__PURE__ */ new Date());
   return modStartDate !== void 0 && convertedDate < modStartDate || modEndDate !== void 0 && convertedDate > modEndDate;
 };
-const formatToLocale = (date, locale) => {
+function getEditableDateFormatter(locale) {
   return new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-  }).format(date);
-};
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+}
+function getStringFromDate(date, locale) {
+  return getEditableDateFormatter(locale).format(date);
+}
+function parseDateString(dateString, locale) {
+  const dateParts = dateString.split(/\D+/).map(Number);
+  if (dateParts.length !== 3) return null;
+  if (!dateParts.every(Boolean)) return null;
+  const formatter = getEditableDateFormatter(locale);
+  const formatOrder = formatter.formatToParts(new Date(2020, 4, 4)).filter((part) => ["year", "month", "day"].includes(part.type)).map((part) => part.type);
+  const dateObject = { year: 2020, month: 4, day: 4 };
+  formatOrder.forEach((type, index) => {
+    dateObject[type] = dateParts[index];
+  });
+  return new Date(dateObject.year, dateObject.month - 1, dateObject.day);
+}
+function getLocaleDateFormat(locale) {
+  const formatter = getEditableDateFormatter(locale);
+  const getPartType = (part) => {
+    if (part.type === "year") return "YYYY";
+    if (part.type === "month") return "MM";
+    if (part.type === "day") return "DD";
+    return part.value;
+  };
+  return formatter.formatToParts(new Date(2020, 4, 4)).reduce((acc, part) => acc + getPartType(part), "");
+}
 export {
   CALENDAR_WEEKS,
+  DEFAULT_LOCALE,
   checkIfDateIsDisabled,
   createDatesArray,
   dateInProvidedValueRange,
-  formatToLocale,
+  getDateISO,
   getFormattedDate,
+  getLocaleDateFormat,
   getMonthDays,
   getMonthFirstWeekday,
   getMonthName,
   getMonthNamesList,
   getNextMonth,
   getPreviousMonth,
+  getStringFromDate,
   getWeekdayNamesList,
   isDate,
   isDateRangeProp,
   isRange,
   isSameDay,
   isSameMonth,
-  makeUTCDate
+  makeUTCDate,
+  parseDateString
 };

package/dist/esm/Calendar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport { capitalize } from \"../utils/helpers\";\nimport { DateRangeProp } from \"./types\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n  `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n  new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n  year: number,\n  monthIndex: number,\n  day: number,\n  hour = 1,\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n  Object.prototype.toString.call(date) === \"[object Date]\" &&\n  !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n  \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getDate() === date2.getDate() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: Date) => {\n  if (!isDate(date)) return null;\n\n  return [\n    date.getFullYear(),\n    zeroPad(date.getMonth() + 1, 2),\n    zeroPad(date.getDate(), 2),\n  ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n  const prevMonth = month > 1 ? month - 1 : 12;\n  const prevMonthYear = month > 1 ? year : year - 1;\n\n  return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n  const nextMonth = month < 12 ? month + 1 : 1;\n  const nextMonthYear = month < 12 ? year : year + 1;\n\n  return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale: string | undefined,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\",\n) => {\n  const options = { month: representationValue, timeZone: \"UTC\" };\n\n  return [...Array(12).keys()].map((index) => {\n    const auxDate = makeUTCDate(1970, index, 1);\n    return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n  });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n  const formatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"narrow\",\n    timeZone: \"UTC\",\n  });\n\n  return [...Array(7).keys()].map((index) => {\n    return formatter.format(makeUTCDate(1970, 0, 4 + index));\n  });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n  date: Date,\n  locale: string,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\",\n) =>\n  new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n  // TODO: fix this\n  date: any,\n  locale: any,\n  rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\",\n) =>\n  `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n  // Initializes the variables needed to calculate the dates for the received month and year\n  const monthDays = getMonthDays(month, year);\n  const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n  const daysFromNextMonth =\n    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n  const prevMonthYear = getPreviousMonth(month, year);\n  const nextMonthYear = getNextMonth(month, year);\n  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n  // Creates the arrays for the dates for previous, current and next months\n  const prevMonthDates = [...Array(daysFromPrevMonth).keys()].map((index) => {\n    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n  });\n  const currentMonthDates = [...Array(monthDays).keys()].map((index) => {\n    const day = index + 1;\n    return new Date(year, month - 1, day);\n  });\n  const nextMonthDates = [...Array(daysFromNextMonth).keys()].map((index) => {\n    const day = index + 1;\n    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n  });\n\n  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\nexport const isRange = (date: any): date is DateRangeProp =>\n  date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n  date: any,\n  providedValueRange: any,\n) => {\n  const { startDate, endDate } = providedValueRange;\n\n  if (!isRange(providedValueRange) || endDate == null) return false;\n  const localEndDate = endDate;\n\n  const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n  const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n  date?: string | number | Date | dayjs.Dayjs,\n  minimumDate?: string | number | Date | dayjs.Dayjs,\n  maximumDate?: string | number | Date | dayjs.Dayjs,\n) => {\n  if (!minimumDate && !maximumDate) return false;\n  const modStartDate = minimumDate\n    ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n  const modEndDate = maximumDate\n    ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n    : undefined;\n\n  const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n  return (\n    (modStartDate !== undefined && convertedDate < modStartDate) ||\n    (modEndDate !== undefined && convertedDate > modEndDate)\n  );\n};\n\nexport const formatToLocale = (date: any, locale: any) => {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(date);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/Calendar/utils.tsx"],"sourcesContent":["import { capitalize } from \"../utils/helpers\";\nimport type { DateRangeProp } from \"./types\";\n\n/** number of weeks to be displayed on the calendar. */\nexport const CALENDAR_WEEKS = 6;\n\n/** default locale used in the date-aware components */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n  new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n  new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n  year: number,\n  monthIndex: number,\n  day: number,\n  hour = 1,\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n  Object.prototype.toString.call(date) === \"[object Date]\" &&\n  !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n  \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1?: Date, date2?: Date) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n  if (!(isDate(date1) && isDate(date2))) return false;\n\n  return (\n    date1.getDate() === date2.getDate() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getFullYear() === date2.getFullYear()\n  );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date: string | number | Date) => {\n  return new Date(date).toISOString().slice(0, 10);\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n  const prevMonth = month > 1 ? month - 1 : 12;\n  const prevMonthYear = month > 1 ? year : year - 1;\n\n  return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n  const nextMonth = month < 12 ? month + 1 : 1;\n  const nextMonthYear = month < 12 ? year : year + 1;\n\n  return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n  locale: string | undefined,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\",\n) => {\n  const options = { month: representationValue, timeZone: \"UTC\" };\n\n  return [...Array(12).keys()].map((index) => {\n    const auxDate = makeUTCDate(1970, index, 1);\n    return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n  });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n  const formatter = new Intl.DateTimeFormat(locale, {\n    weekday: \"narrow\",\n    timeZone: \"UTC\",\n  });\n\n  return [...Array(7).keys()].map((index) => {\n    return formatter.format(makeUTCDate(1970, 0, 4 + index));\n  });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n  date: Date,\n  locale: Intl.LocalesArgument,\n  representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\",\n) =>\n  new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to the user's locale & Design System specifications.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (date: Date, locale: Intl.LocalesArgument) => {\n  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" });\n  return formatter.format(date);\n};\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n  // Initializes the variables needed to calculate the dates for the received month and year\n  const monthDays = getMonthDays(month, year);\n  const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n  const daysFromNextMonth =\n    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n  const prevMonthYear = getPreviousMonth(month, year);\n  const nextMonthYear = getNextMonth(month, year);\n  const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n  // Creates the arrays for the dates for previous, current and next months\n  const prevMonthDates = [...Array(daysFromPrevMonth).keys()].map((index) => {\n    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n    return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n  });\n  const currentMonthDates = [...Array(monthDays).keys()].map((index) => {\n    const day = index + 1;\n    return new Date(year, month - 1, day);\n  });\n  const nextMonthDates = [...Array(daysFromNextMonth).keys()].map((index) => {\n    const day = index + 1;\n    return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n  });\n\n  return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\nexport const isRange = (date: any): date is DateRangeProp =>\n  date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param dateRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n  date: Date | undefined,\n  dateRange: string | Date | DateRangeProp,\n) => {\n  if (!isRange(dateRange) || !dateRange?.endDate) return false;\n  const { startDate, endDate } = dateRange;\n\n  const modStartDate = getDateISO(startDate);\n  const modEndDate = getDateISO(endDate);\n  const convertedDate = getDateISO(date ?? new Date());\n\n  return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n  date?: string | number | Date,\n  minimumDate?: string | number | Date,\n  maximumDate?: string | number | Date,\n) => {\n  if (!minimumDate && !maximumDate) return false;\n  const modStartDate = minimumDate && getDateISO(minimumDate);\n  const modEndDate = maximumDate && getDateISO(maximumDate);\n  const convertedDate = getDateISO(date ?? new Date());\n\n  return (\n    (modStartDate !== undefined && convertedDate < modStartDate) ||\n    (modEndDate !== undefined && convertedDate > modEndDate)\n  );\n};\n\n/**\n * gets the *localized* date formatter that's editable via input\n * @example getEditableDateFormatter(\"pt\") // \"DD/MM/YYYY\"\n */\nfunction getEditableDateFormatter(locale: Intl.LocalesArgument) {\n  return new Intl.DateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"2-digit\",\n    day: \"2-digit\",\n  });\n}\n\nexport function getStringFromDate(date: Date, locale: Intl.LocalesArgument) {\n  return getEditableDateFormatter(locale).format(date);\n}\n\n/**\n * attempts to format a localized `dateString`\n * @returns `Date` or `null` if parsing fails\n * @example parseDateString(\"04/06/2020\", \"pt\")\n */\nexport function parseDateString(\n  dateString: string,\n  locale: Intl.LocalesArgument,\n) {\n  // Split the input dateString by non-numeric separators (like / or -)\n  const dateParts = dateString.split(/\\D+/).map(Number);\n  if (dateParts.length !== 3) return null;\n  if (!dateParts.every(Boolean)) return null;\n\n  const formatter = getEditableDateFormatter(locale);\n  const formatOrder = formatter\n    .formatToParts(new Date(2020, 4, 4))\n    .filter((part) => [\"year\", \"month\", \"day\"].includes(part.type))\n    .map((part) => part.type as \"year\" | \"month\" | \"day\");\n\n  // Map the parts into an object { year, month, day }\n  const dateObject = { year: 2020, month: 4, day: 4 };\n  formatOrder.forEach((type, index) => {\n    dateObject[type] = dateParts[index];\n  });\n\n  return new Date(dateObject.year, dateObject.month - 1, dateObject.day);\n}\n\nexport function getLocaleDateFormat(locale: Intl.LocalesArgument) {\n  const formatter = getEditableDateFormatter(locale);\n\n  // Create the format string based on the order of parts\n  const getPartType = (part: Intl.DateTimeFormatPart) => {\n    if (part.type === \"year\") return \"YYYY\";\n    if (part.type === \"month\") return \"MM\";\n    if (part.type === \"day\") return \"DD\";\n    return part.value; // preserve separators like '/' or '-'\n  };\n\n  return formatter\n    .formatToParts(new Date(2020, 4, 4))\n    .reduce((acc, part) => acc + getPartType(part), \"\");\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js

@@ -188,6 +188,7 @@ const HvCheckBoxGroup = forwardRef(
           label && /* @__PURE__ */ jsx(
             HvLabel,
             {
+              showGutter: true,
               id: setId(elementId, "label"),
               label,
               className: classes.label

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllLabel = \"All\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    const selectAllLabelComponent =\n      selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      );\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={selectAllLabelComponent}\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllLabel = \"All\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    const selectAllLabelComponent =\n      selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      );\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={selectAllLabelComponent}\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
     overflowClipMargin: 4,
     verticalAlign: "top"
   },
-  label: { marginBottom: theme.space.xs },
+  label: {},
   group: { display: "flex" },
   vertical: {
     flexDirection: "column",

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/ColorPicker/ColorPicker.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Checkbox, ColorPicker } from "@hitachivantara/uikit-react-icons";
+import { ColorPicker } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
@@ -70,7 +70,7 @@ const HvColorPicker = forwardRef(
       deleteSavedColorButtonArialLabel = "Delete saved color",
       addSavedColorButtonAriaLabel = "Add current color to saved colors"
     } = useDefaultProps("HvColorPicker", props);
-    const { classes, css, cx } = useClasses(classesProp);
+    const { classes, cx } = useClasses(classesProp);
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
     const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);
     const [color, setColor] = useControlled(value, defaultValue);
@@ -129,6 +129,7 @@ const HvColorPicker = forwardRef(
             hasLabel && /* @__PURE__ */ jsx(
               HvLabel,
               {
+                showGutter: true,
                 id: setId(elementId, "label"),
                 label,
                 className: classes.label
@@ -153,22 +154,24 @@ const HvColorPicker = forwardRef(
               onToggle: handleToggle,
               onContainerCreation: setFocusToContent,
               classes: {
-                root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),
-                selection: cx(iconOnly && css({ padding: 0 }))
+                root: cx({ [classes.dropdownRootIconOnly]: iconOnly })
               },
               adornment: iconOnly && color ? /* @__PURE__ */ jsx(
-                Checkbox,
+                "div",
                 {
-                  className: classes.headerColorIconOnly,
-                  color: [color, "transparent"]
+                  style: { backgroundColor: color },
+                  className: cx(
+                    classes.headerColorIcon,
+                    classes.headerColorIconOnly
+                  )
                 }
               ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
-                  Checkbox,
+                  "div",
                   {
-                    className: classes.headerColorIcon,
-                    color: [color, "transparent"]
+                    style: { backgroundColor: color },
+                    className: classes.headerColorIcon
                   }
                 ),
                 /* @__PURE__ */ jsx(

package/dist/esm/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n      }\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string },\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n      }\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <div\n                style={{ backgroundColor: color }}\n                className={cx(\n                  classes.headerColorIcon,\n                  classes.headerColorIconOnly,\n                )}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <div\n                  style={{ backgroundColor: color }}\n                  className={classes.headerColorIcon}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}

package/dist/esm/ColorPicker/ColorPicker.styles.js

@@ -5,20 +5,18 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-    cursor: "pointer"
-  },
+  label: {},
   description: {},
   headerColorValue: {
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    minWidth: "8ch",
+    fontVariant: "tabular-nums"
   },
   headerColorIcon: {
-    width: 24,
-    "& svg": {
-      marginLeft: 0
-    }
+    width: 16,
+    height: 16,
+    marginRight: 8,
+    flexShrink: 0
   },
   panel: {
     width: "100%",
@@ -39,9 +37,14 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   },
   dropdownRootIconOnly: {
     width: 32,
-    height: 32
+    height: 32,
+    "& .HvBaseDropdown-selection": {
+      padding: 0
+    }
+  },
+  headerColorIconOnly: {
+    margin: 8
   },
-  headerColorIconOnly: {},
   pickerFields: { paddingBottom: 20 }
 });
 export {

package/dist/esm/ColorPicker/ColorPicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n    backgroundColor: \"transparent\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n    minWidth: \"8ch\",\n    fontVariant: \"tabular-nums\",\n  },\n  headerColorIcon: {\n    width: 16,\n    height: 16,\n    marginRight: 8,\n    flexShrink: 0,\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n    backgroundColor: \"transparent\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n    \"& .HvBaseDropdown-selection\": {\n      padding: 0,\n    },\n  },\n  headerColorIconOnly: {\n    margin: 8,\n  },\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,+BAA+B;AAAA,MAC7B,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,qBAAqB;AAAA,IACnB,QAAQ;AAAA,EACV;AAAA,EACA,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}

package/dist/esm/ColorPicker/Fields/Fields.js

@@ -95,9 +95,10 @@ const Fields = (props) => {
         ref: redInputRef,
         className: classes.single,
         label: "R",
-        value: `${internalRed}`,
+        value: internalRed,
         onChange: (event, value) => onChangeRbg(event, value, "r"),
         onBlur: () => setInternalRed(rgb?.r),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     ),
@@ -107,9 +108,10 @@ const Fields = (props) => {
         ref: greenInputRef,
         className: classes.single,
         label: "G",
-        value: `${internalGreen}`,
+        value: internalGreen,
         onChange: (event, value) => onChangeRbg(event, value, "g"),
         onBlur: () => setInternalGreen(rgb?.g),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     ),
@@ -119,9 +121,10 @@ const Fields = (props) => {
         ref: blueInputRef,
         className: classes.single,
         label: "B",
-        value: `${internalBlue}`,
+        value: internalBlue,
         onChange: (event, value) => onChangeRbg(event, value, "b"),
         onBlur: () => setInternalBlue(rgb?.b),
+        inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
       }
     )

package/dist/esm/ColorPicker/Fields/Fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput } from \"../../Input\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event,\n      );\n    } else if (\n      data.r !== undefined ||\n      data.g !== undefined ||\n      data.b !== undefined\n    ) {\n      onChange(\n        {\n          r: data.r ?? rgb?.r,\n          g: data.g ?? rgb?.g,\n          b: data.b ?? rgb?.b,\n          source: \"rgb\",\n        },\n        event,\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\",\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event,\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAChD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,GAAG;AAClD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK,CAAC;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK,CAAC;AACzD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK,CAAC;AAEjD,QAAA,cAAc,OAAyB,IAAI;AAC3C,QAAA,cAAc,OAAyB,IAAI;AAC3C,QAAA,gBAAgB,OAAyB,IAAI;AAC7C,QAAA,eAAe,OAAyB,IAAI;AAElD,YAAU,MAAM;AACV,QAAA,SAAS,kBAAkB,YAAY,SAAS;AAClD,qBAAe,GAAG;AAAA,IAAA;AAAA,EACpB,GACC,CAAC,GAAG,CAAC;AAER,YAAU,MAAM;AACV,QAAA,SAAS,kBAAkB,YAAY,SAAS;AAClD,qBAAe,KAAK,CAAC;AAAA,IAAA;AAGnB,QAAA,SAAS,kBAAkB,cAAc,SAAS;AACpD,uBAAiB,KAAK,CAAC;AAAA,IAAA;AAGrB,QAAA,SAAS,kBAAkB,aAAa,SAAS;AACnD,sBAAgB,KAAK,CAAC;AAAA,IAAA;AAAA,EACxB,GACC,CAAC,GAAG,CAAC;AAEF,QAAA,eAAe,CACnB,MAMA,UACG;AACH,QAAI,KAAK,OAAO,MAAM,WAAW,KAAK,GAAG,GAAG;AAC1C;AAAA,QACE;AAAA,UACE,KAAK,KAAK;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,MACF;AAAA,IACF,WACE,KAAK,MAAM,UACX,KAAK,MAAM,UACX,KAAK,MAAM,QACX;AACA;AAAA,QACE;AAAA,UACE,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,cAAc,CAAC,OAA+B,UAAkB;AACpE,mBAAe,KAAK;AACpB,iBAAa,EAAE,KAAK,MAAM,GAAG,KAAK;AAAA,EACpC;AAEA,QAAM,cAAc,CAClB,OACA,OACA,cACG;AACH,QAAI,cAAc,IAAoB,gBAAA,OAAO,KAAK,CAAC;AACnD,QAAI,cAAc,IAAsB,kBAAA,OAAO,KAAK,CAAC;AACrD,QAAI,cAAc,IAAqB,iBAAA,OAAO,KAAK,CAAC;AAEpD;AAAA,MACE;AAAA,QACE,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,QAC5C,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,QAC5C,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,QAAQ,SAAS,GAC1C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,aAAa,QAAQ,KAAK,EAAE;AAAA,QACnC,UAAU;AAAA,QACV,QAAQ,MAAM,eAAe,GAAG;AAAA,QAChC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,WAAW;AAAA,QACrB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,eAAe,KAAK,CAAC;AAAA,QACnC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,aAAa;AAAA,QACvB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,iBAAiB,KAAK,CAAC;AAAA,QACrC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,YAAY;AAAA,QACtB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,gBAAgB,KAAK,CAAC;AAAA,QACpC,cAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GACF;AAEJ;"}
+{"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput } from \"../../Input\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event,\n      );\n    } else if (\n      data.r !== undefined ||\n      data.g !== undefined ||\n      data.b !== undefined\n    ) {\n      onChange(\n        {\n          r: data.r ?? rgb?.r,\n          g: data.g ?? rgb?.g,\n          b: data.b ?? rgb?.b,\n          source: \"rgb\",\n        },\n        event,\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\",\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event,\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={internalRed}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={internalGreen}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={internalBlue}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}