npm - @hitachivantara/uikit-react-core - Versions diffs - 5.82.4 → 5.83.0 - Mend

@hitachivantara/uikit-react-core 5.82.4 → 5.83.0

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

Files changed (161) hide show

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js CHANGED Viewed

@@ -1,26 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState, useEffect } from "react";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import localeData from "dayjs/plugin/localeData";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
-import { isRange, isDate, formatToLocale, isSameDay } from "../utils.js";
+import { isRange, getLocaleDateFormat, isDate, getFormattedDate, DEFAULT_LOCALE, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
-import { HvFormElementContext, HvFormElementValueContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvInput } from "../../Input/Input.js";
+import { HvFormElementContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvTypography } from "../../Typography/Typography.js";
-dayjs.extend(localeData);
-dayjs.extend(localizedFormat);
-dayjs.extend(customParseFormat);
 const HvCalendarHeader = (props) => {
   const {
     id: idProp,
-    value,
-    locale = "en-US",
+    value: valueProp,
+    locale = DEFAULT_LOCALE,
     classes: classesProp,
     onChange,
     showEndDate,
@@ -30,23 +23,19 @@ const HvCalendarHeader = (props) => {
   } = useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = useClasses(classesProp);
   const context = useContext(HvFormElementContext);
-  const elementValue = useContext(HvFormElementValueContext);
   const { label } = useContext(HvFormElementDescriptorsContext);
-  let localValue = value ?? elementValue ?? "";
-  if (isRange(localValue)) {
-    localValue = showEndDate ? localValue.endDate : localValue.startDate;
-  }
+  const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
   const [dateValue, setDateValue] = useState(localValue);
   const [editedValue, setEditedValue] = useState(null);
   const [displayValue, setDisplayValue] = useState("");
   const [weekdayDisplay, setWeekdayDisplay] = useState("");
   const id = idProp ?? setId(context.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
-  const localeFormat = dayjs().locale(locale).localeData().longDateFormat("L");
+  const localeFormat = getLocaleDateFormat(locale);
   const [isValidValue, setIsValidValue] = useState(
-    inputValue.length === 0 || !!inputValue && dayjs(localValue).isValid()
+    inputValue.length === 0 || inputValue && isDate(new Date(inputValue))
   );
-  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs(incomingValid).isValid();
+  const validateInput = (incomingValid) => incomingValid === void 0 || isDate(new Date(incomingValid));
   useEffect(() => {
     const valid = validateInput(localValue);
     setIsValidValue(valid);
@@ -60,15 +49,15 @@ const HvCalendarHeader = (props) => {
       const weekday = new Intl.DateTimeFormat(locale, {
         weekday: "short"
       }).format(isDate(localValue) ? localValue : 0);
-      setDisplayValue(formatToLocale(localValue, locale));
+      setDisplayValue(getFormattedDate(localValue, locale));
       setEditedValue(null);
       setWeekdayDisplay(weekday);
     }
   }, [localValue, locale]);
   const handleNewDate = (event, date) => {
-    const localeParsedDate = dayjs(date, localeFormat);
-    const isValidInput = localeParsedDate.isValid();
-    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();
+    const localeParsedDate = parseDateString(date, locale);
+    const isValidInput = isDate(localeParsedDate);
+    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
     if (!isSameDay(dateParsed, dateValue)) {
       setDateValue(dateParsed);
       onChange?.(event, dateParsed);
@@ -95,7 +84,7 @@ const HvCalendarHeader = (props) => {
   };
   const onFocusHandler = (event) => {
     if (!localValue) return;
-    const formattedDate = isValidValue && isDate(localValue) ? dayjs(localValue).locale(locale).format("L") : editedValue;
+    const formattedDate = isValidValue && isDate(localValue) ? getStringFromDate(localValue, locale) : editedValue;
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n HvFormElementValueContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { DateRangeProp } from \"../types\";\nimport { formatToLocale, isDate, isRange, isSameDay } from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n const {\n id: idProp,\n value,\n locale = \"en-US\",\n classes: classesProp,\n onChange,\n showEndDate,\n showDayOfWeek = false,\n onFocus,\n invalidDateLabel = \"Invalid Date\",\n } = useDefaultProps(\"HvCalendarHeader\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const context = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const { label } = useContext(HvFormElementDescriptorsContext);\n\n let localValue: string \| Date \| DateRangeProp \| undefined =\n value ?? elementValue ?? \"\";\n if (isRange(localValue)) {\n localValue = showEndDate ? localValue.endDate : localValue.startDate;\n }\n\n const [dateValue, setDateValue] = useState<\n string \| Date \| DateRangeProp \| undefined\n >(localValue);\n const [editedValue, setEditedValue] = useState<string \| null>(null);\n const [displayValue, setDisplayValue] = useState(\"\");\n const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n const inputValue = editedValue ?? displayValue;\n const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n const [isValidValue, setIsValidValue] = useState(\n inputValue.length === 0 \|\| (!!inputValue && dayjs(localValue).isValid()),\n );\n\n const validateInput = (incomingValid: any) =>\n incomingValid === undefined \|\| dayjs(incomingValid).isValid();\n\n useEffect(() => {\n const valid = validateInput(localValue);\n setIsValidValue(valid);\n if (valid) {\n if (!localValue) {\n setDisplayValue(\"\");\n setEditedValue(null);\n setWeekdayDisplay(\"\");\n return;\n }\n const weekday = new Intl.DateTimeFormat(locale, {\n weekday: \"short\",\n }).format(isDate(localValue) ? localValue : 0);\n setDisplayValue(formatToLocale(localValue, locale));\n setEditedValue(null);\n setWeekdayDisplay(weekday);\n }\n }, [localValue, locale]);\n\n const handleNewDate = (event: any, date: string) => {\n // attempt to format in locale data, or fallback to default\n const localeParsedDate = dayjs(date, localeFormat);\n\n const isValidInput = localeParsedDate.isValid();\n const dateParsed = isValidInput\n ? localeParsedDate.toDate()\n : dayjs(date).toDate();\n // prevent extra updates\n if (!isSameDay(dateParsed, dateValue)) {\n setDateValue(dateParsed);\n onChange?.(event, dateParsed);\n }\n\n setIsValidValue(isValidInput);\n if (isValidInput) {\n setEditedValue(null);\n }\n };\n\n const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n if (editedValue == null) return;\n if (editedValue === \"\") {\n setIsValidValue(true);\n setEditedValue(null);\n return;\n }\n handleNewDate(event, editedValue);\n };\n\n const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n if (!isKey(event, \"Enter\") \|\| editedValue == null \|\| editedValue === \"\")\n return;\n event.preventDefault();\n\n handleNewDate(event, editedValue);\n };\n\n const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n if (!localValue) return;\n const formattedDate =\n isValidValue && isDate(localValue)\n ? dayjs(localValue).locale(locale).format(\"L\")\n : editedValue;\n setEditedValue(formattedDate);\n onFocus?.(event, formattedDate);\n };\n\n const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n setEditedValue(val);\n };\n\n const isInvalid = !isValidValue && inputValue !== \"\";\n\n // This component needs to be further refactored\n // It's not possible to clear the date\n // In a new major there's no need for all these classes\n return (\n <div\n id={id}\n className={cx(classes.root, {\n [classes.invalid]: isInvalid,\n })}\n >\n {showDayOfWeek && (\n <HvTypography className={classes.headerDayOfWeek}>\n {weekdayDisplay \|\| \"\\u00A0\"}\n </HvTypography>\n )}\n <HvInput\n type=\"text\"\n id={setId(id, \"header-input\")}\n className={classes.headerDate}\n classes={{\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n error: classes.invalidMessageStyling,\n }}\n placeholder={localeFormat}\n value={inputValue}\n aria-labelledby={label?.[0]?.id}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n onChange={onChangeHandler}\n onKeyDown={keyDownHandler}\n status={isInvalid ? \"invalid\" : \"valid\"}\n statusMessage={invalidDateLabel}\n />\n </div>\n );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n /*\n A Jss Object used to override or extend the component styles.\n /\n classes?: HvCalendarHeaderClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The text to be shown on the main part of the header.\n /\n value?: string \| Date \| DateRangeProp;\n /\n Locale to be used by the calendar.\n /\n locale?: string;\n /\n Callback to define the input date.\n /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n value: Date \| DateRangeProp,\n ) => void;\n /\n Callback to handle input onFocus.\n /\n onFocus?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n formattedDate: string \| null,\n ) => void;\n /\n Indicates if header should display end date in a date range.\n /\n showEndDate?: boolean;\n /\n Indicates if header should display the day of week.\n /\n showDayOfWeek?: boolean;\n /\n Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvSingleCalendarProps } from \"../SingleCalendar\";\nimport {\n DEFAULT_LOCALE,\n getFormattedDate,\n getLocaleDateFormat,\n getStringFromDate,\n isDate,\n isRange,\n isSameDay,\n parseDateString,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n const {\n id: idProp,\n value: valueProp,\n locale = DEFAULT_LOCALE,\n classes: classesProp,\n onChange,\n showEndDate,\n showDayOfWeek = false,\n onFocus,\n invalidDateLabel = \"Invalid Date\",\n } = useDefaultProps(\"HvCalendarHeader\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const context = useContext(HvFormElementContext);\n const { label } = useContext(HvFormElementDescriptorsContext);\n\n const localValue = isRange(valueProp)\n ? showEndDate\n ? valueProp.endDate!\n : valueProp.startDate\n : valueProp;\n\n const [dateValue, setDateValue] = useState(localValue);\n const [editedValue, setEditedValue] = useState<string \| null>(null);\n const [displayValue, setDisplayValue] = useState(\"\");\n const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n const inputValue = editedValue ?? displayValue;\n const localeFormat = getLocaleDateFormat(locale);\n\n const [isValidValue, setIsValidValue] = useState(\n inputValue.length === 0 \|\| (inputValue && isDate(new Date(inputValue))),\n );\n\n const validateInput = (incomingValid: any) =>\n incomingValid === undefined \|\| isDate(new Date(incomingValid));\n\n useEffect(() => {\n const valid = validateInput(localValue);\n setIsValidValue(valid);\n if (valid) {\n if (!localValue) {\n setDisplayValue(\"\");\n setEditedValue(null);\n setWeekdayDisplay(\"\");\n return;\n }\n const weekday = new Intl.DateTimeFormat(locale, {\n weekday: \"short\",\n }).format(isDate(localValue) ? localValue : 0);\n setDisplayValue(getFormattedDate(localValue, locale));\n setEditedValue(null);\n setWeekdayDisplay(weekday);\n }\n }, [localValue, locale]);\n\n const handleNewDate = (event: any, date: string) => {\n // attempt to format in locale data, or fallback to default\n const localeParsedDate = parseDateString(date, locale);\n\n const isValidInput = isDate(localeParsedDate);\n const dateParsed = isValidInput ? localeParsedDate : new Date(date);\n // prevent extra updates\n if (!isSameDay(dateParsed, dateValue)) {\n setDateValue(dateParsed);\n onChange?.(event, dateParsed);\n }\n\n setIsValidValue(isValidInput);\n if (isValidInput) {\n setEditedValue(null);\n }\n };\n\n const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n if (editedValue == null) return;\n if (editedValue === \"\") {\n setIsValidValue(true);\n setEditedValue(null);\n return;\n }\n handleNewDate(event, editedValue);\n };\n\n const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n if (!isKey(event, \"Enter\") \|\| editedValue == null \|\| editedValue === \"\")\n return;\n event.preventDefault();\n\n handleNewDate(event, editedValue);\n };\n\n const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n if (!localValue) return;\n const formattedDate =\n isValidValue && isDate(localValue)\n ? getStringFromDate(localValue, locale)\n : editedValue;\n setEditedValue(formattedDate);\n onFocus?.(event, formattedDate);\n };\n\n const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n setEditedValue(val);\n };\n\n const isInvalid = !isValidValue && inputValue !== \"\";\n\n // This component needs to be further refactored\n // It's not possible to clear the date\n // In a new major there's no need for all these classes\n return (\n <div\n id={id}\n className={cx(classes.root, {\n [classes.invalid]: isInvalid,\n })}\n >\n {showDayOfWeek && (\n <HvTypography className={classes.headerDayOfWeek}>\n {weekdayDisplay \|\| \"\\u00A0\"}\n </HvTypography>\n )}\n <HvInput\n type=\"text\"\n id={setId(id, \"header-input\")}\n className={classes.headerDate}\n classes={{\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n error: classes.invalidMessageStyling,\n }}\n placeholder={localeFormat}\n value={inputValue}\n aria-labelledby={label?.[0]?.id}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n onChange={onChangeHandler}\n onKeyDown={keyDownHandler}\n status={isInvalid ? \"invalid\" : \"valid\"}\n statusMessage={invalidDateLabel}\n />\n </div>\n );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps\n extends Pick<\n HvSingleCalendarProps,\n \| \"id\"\n \| \"value\"\n \| \"locale\"\n \| \"onChange\"\n \| \"showEndDate\"\n \| \"showDayOfWeek\"\n \| \"invalidDateLabel\"\n > {\n /*\n A Jss Object used to override or extend the component styles.\n /\n classes?: HvCalendarHeaderClasses;\n /\n Callback to handle input onFocus.\n */\n onFocus?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n formattedDate: string \| null,\n ) => void;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { generateCalendarModel } from "../model.js";
-import { isDate, getWeekdayNamesList, isRange } from "../utils.js";
+import { isDate, getWeekdayNamesList, DEFAULT_LOCALE, isRange } from "../utils.js";
 import { HvCalendarCell } from "./CalendarCell.js";
 import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
@@ -16,7 +16,7 @@ const HvSingleCalendar = ({
   classes: classesProp,
   className,
   id,
-  locale = "en-US",
+  locale = DEFAULT_LOCALE,
   value,
   visibleMonth,
   visibleYear,
@@ -104,6 +104,7 @@ const HvSingleCalendar = ({
       {
         id: setId(id, "header"),
         locale,
+        value,
         onChange: handleInputChange,
         showEndDate: showEndDate && !isDateSelectionMode,
         showDayOfWeek,

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleCalendar.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { ViewMode } from \"../enums\";\nimport { generateCalendarModel } from \"../model\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"../types\";\nimport { getWeekdayNamesList, isDate, isRange } from \"../utils\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { staticClasses, useClasses } from \"./SingleCalendar.styles\";\n\nexport { staticClasses as singleCalendarClasses };\n\nexport type HvSingleCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport const HvSingleCalendar = ({\n classes: classesProp,\n className,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n minimumDate,\n maximumDate,\n onChange,\n onInputChange,\n onVisibleDateChange,\n showEndDate,\n showDayOfWeek,\n invalidDateLabel,\n children,\n ...others\n}: HvSingleCalendarProps) => {\n // TODO: refactor this out\n // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n const today = new Date();\n const localValue = value ?? today;\n\n const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n const rangeMode = isRange(localValue);\n const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n const calModel = rangeMode\n ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n : generateCalendarModel(localValue, visibleMonth, visibleYear);\n const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);\n\n const handleChange = (event: any, date: Date \| DateRangeProp) => {\n event?.preventDefault();\n onChange?.(event, date);\n };\n\n const handleInputChange = (event: any, date: any) => {\n event?.preventDefault();\n onInputChange?.(event, date);\n };\n\n const getNavChild = (event: KeyboardEvent, siblings: any, i: number) => {\n if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n return undefined;\n };\n\n const handleKeyDown = (event: any) => {\n // This code is very brittle and should be managed with the focus wrapper\n const el = document?.activeElement;\n const parent = el?.parentElement?.parentElement;\n const siblings =\n parent != null\n ? Array.from(\n parent.getElementsByClassName(classes.cellContainer as string),\n )\n : [];\n const elIndex = el ? siblings.indexOf(el) : 0;\n\n if (isKey(event, \"Enter\")) {\n (el as HTMLElement).focus();\n return;\n }\n\n const child = getNavChild(event, siblings, elIndex);\n\n if (child) {\n const inMonth = child.getAttribute(\"data-in-month\");\n if (inMonth === \"true\") {\n event?.preventDefault();\n child?.focus();\n }\n }\n };\n\n const renderWeekLabel = (dayName: string, index: number) => (\n <HvTypography key={index} variant=\"label\" className={classes.calendarDay}>\n {dayName}\n </HvTypography>\n );\n\n /** Renders the element representing the received date. /\n const renderCalendarDate = (currentDate: Date) => {\n return (\n <HvCalendarCell\n classes={classes}\n key={currentDate.toString()}\n tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={currentDate}\n today={today}\n calendarValue={localValue}\n rangeMode={rangeMode}\n isDateSelectionMode={isDateSelectionMode}\n locale={locale}\n firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n maximumDate={maximumDate}\n minimumDate={minimumDate}\n />\n );\n };\n\n return (\n <HvPanel id={id} className={cx(classes.root, className)} {...others}>\n <HvCalendarHeader\n id={setId(id, \"header\")}\n locale={locale}\n onChange={handleInputChange}\n showEndDate={showEndDate && !isDateSelectionMode}\n showDayOfWeek={showDayOfWeek}\n invalidDateLabel={invalidDateLabel}\n />\n {calViewMode === \"calendar\" && (\n <>\n <HvComposedNavigation\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleYear={visibleYear \|\| today.getFullYear()}\n visibleMonth={visibleMonth \|\| today.getMonth() + 1}\n />\n <div\n className={classes.calendarGrid}\n // @ts-ignore TODO: review\n aria-controls={HvCalendarHeader?.[0]?.id}\n >\n {listWeekdayNames.map(renderWeekLabel)}\n {calModel.dates.map(renderCalendarDate)}\n </div>\n </>\n )}\n {calViewMode === \"monthly\" && (\n <HvMonthSelector\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleMonth={visibleMonth \|\| today.getMonth() + 1}\n rangeMode={rangeMode}\n />\n )}\n </HvPanel>\n );\n};\n\nexport interface HvSingleCalendarProps {\n /\n Styles applied from the theme.\n /\n classes?: HvSingleCalendarClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The class name to add at the root of the single calendar\n /\n className?: string;\n /\n The calendar locale.\n \n /\n locale: string;\n /*\n Date that the calendar would show.\n /\n value?: string \| Date \| DateRangeProp;\n /\n Date that will be used to know which month and year should be displayed on the calendar. The value of the day is\n * irrelevant.\n /\n visibleDate?: Date;\n /\n Controls the visible month of the Calendar\n /\n visibleMonth?: number;\n /\n Controls the visible month of the Calendar\n /\n visibleYear?: number;\n /\n Callback function to be triggered when the selected date has changed.\n /\n onChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n value: Date \| DateRangeProp,\n ) => void;\n /\n Callback function to be triggered when the selected date input has changed.\n /\n onInputChange?: (\n event:\n \| React.ChangeEvent<\n HTMLTextAreaElement \| HTMLInputElement \| HTMLButtonElement\n >\n \| undefined,\n value: Date \| DateRangeProp,\n position?: \"left\" \| \"right\",\n ) => void;\n /\n Callback function to be triggered when visible date has changed.\n /\n onVisibleDateChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n action: VisibilitySelectorActions,\n value?: Date \| DateRangeProp \| number,\n ) => void;\n /\n The maximum selectable date after this all values are disabled.\n /\n maximumDate?: Date;\n /\n The minimum selectable date before this all values are disabled.\n /\n minimumDate?: Date;\n /\n Indicates if header should display end date in a date range.\n /\n showEndDate?: boolean;\n /\n Indicates if header should display the day of week.\n /\n showDayOfWeek?: boolean;\n /\n Content on the upper part of the calendar.\n /\n children?: React.ReactNode;\n /\n Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"SingleCalendar.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvCalendarProps } from \"../Calendar\";\nimport { HvCalendarHeader } from \"../CalendarHeader/CalendarHeader\";\nimport { HvComposedNavigation, HvMonthSelector } from \"../CalendarNavigation\";\nimport { ViewMode } from \"../enums\";\nimport { generateCalendarModel } from \"../model\";\nimport type { DateRangeProp } from \"../types\";\nimport { DEFAULT_LOCALE, getWeekdayNamesList, isDate, isRange } from \"../utils\";\nimport { HvCalendarCell } from \"./CalendarCell\";\nimport { staticClasses, useClasses } from \"./SingleCalendar.styles\";\n\nexport { staticClasses as singleCalendarClasses };\n\nexport type HvSingleCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport const HvSingleCalendar = ({\n classes: classesProp,\n className,\n id,\n locale = DEFAULT_LOCALE,\n value,\n visibleMonth,\n visibleYear,\n minimumDate,\n maximumDate,\n onChange,\n onInputChange,\n onVisibleDateChange,\n showEndDate,\n showDayOfWeek,\n invalidDateLabel,\n children,\n ...others\n}: HvSingleCalendarProps) => {\n // TODO: refactor this out\n // const { HvCalendarHeader } = useContext(HvFormElementDescriptorsContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n const today = new Date();\n const localValue = value ?? today;\n\n const [calViewMode, setCalViewMode] = useState<ViewMode>(\"calendar\");\n\n const rangeMode = isRange(localValue);\n const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);\n const calModel = rangeMode\n ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear)\n : generateCalendarModel(localValue, visibleMonth, visibleYear);\n const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);\n const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();\n\n const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);\n\n const handleChange = (event: any, date: Date \| DateRangeProp) => {\n event?.preventDefault();\n onChange?.(event, date);\n };\n\n const handleInputChange = (event: any, date: any) => {\n event?.preventDefault();\n onInputChange?.(event, date);\n };\n\n const getNavChild = (event: KeyboardEvent, siblings: any, i: number) => {\n if (isKey(event, \"ArrowLeft\")) return siblings[i - 1];\n if (isKey(event, \"ArrowRight\")) return siblings[i + 1];\n if (isKey(event, \"ArrowUp\")) return siblings[i - 7];\n if (isKey(event, \"ArrowDown\")) return siblings[i + 7];\n return undefined;\n };\n\n const handleKeyDown = (event: any) => {\n // This code is very brittle and should be managed with the focus wrapper\n const el = document?.activeElement;\n const parent = el?.parentElement?.parentElement;\n const siblings =\n parent != null\n ? Array.from(\n parent.getElementsByClassName(classes.cellContainer as string),\n )\n : [];\n const elIndex = el ? siblings.indexOf(el) : 0;\n\n if (isKey(event, \"Enter\")) {\n (el as HTMLElement).focus();\n return;\n }\n\n const child = getNavChild(event, siblings, elIndex);\n\n if (child) {\n const inMonth = child.getAttribute(\"data-in-month\");\n if (inMonth === \"true\") {\n event?.preventDefault();\n child?.focus();\n }\n }\n };\n\n const renderWeekLabel = (dayName: string, index: number) => (\n <HvTypography key={index} variant=\"label\" className={classes.calendarDay}>\n {dayName}\n </HvTypography>\n );\n\n /** Renders the element representing the received date. /\n const renderCalendarDate = (currentDate: Date) => {\n return (\n <HvCalendarCell\n classes={classes}\n key={currentDate.toString()}\n tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={currentDate}\n today={today}\n calendarValue={localValue}\n rangeMode={rangeMode}\n isDateSelectionMode={isDateSelectionMode}\n locale={locale}\n firstDayOfCurrentMonth={firstDayOfCurrentMonth}\n maximumDate={maximumDate}\n minimumDate={minimumDate}\n />\n );\n };\n\n return (\n <HvPanel id={id} className={cx(classes.root, className)} {...others}>\n <HvCalendarHeader\n id={setId(id, \"header\")}\n locale={locale}\n value={value}\n onChange={handleInputChange}\n showEndDate={showEndDate && !isDateSelectionMode}\n showDayOfWeek={showDayOfWeek}\n invalidDateLabel={invalidDateLabel}\n />\n {calViewMode === \"calendar\" && (\n <>\n <HvComposedNavigation\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleYear={visibleYear \|\| today.getFullYear()}\n visibleMonth={visibleMonth \|\| today.getMonth() + 1}\n />\n <div\n className={classes.calendarGrid}\n // @ts-ignore TODO: review\n aria-controls={HvCalendarHeader?.[0]?.id}\n >\n {listWeekdayNames.map(renderWeekLabel)}\n {calModel.dates.map(renderCalendarDate)}\n </div>\n </>\n )}\n {calViewMode === \"monthly\" && (\n <HvMonthSelector\n id={id}\n locale={locale}\n onChange={onVisibleDateChange}\n onViewModeChange={setCalViewMode}\n visibleMonth={visibleMonth \|\| today.getMonth() + 1}\n rangeMode={rangeMode}\n />\n )}\n </HvPanel>\n );\n};\n\nexport interface HvSingleCalendarProps\n extends Omit<HvCalendarProps, \"classes\"> {\n /\n Styles applied from the theme.\n /\n classes?: HvSingleCalendarClasses;\n /\n Callback function to be triggered when the selected date input has changed.\n /\n onInputChange?: (\n event:\n \| React.ChangeEvent<\n HTMLTextAreaElement \| HTMLInputElement \| HTMLButtonElement\n >\n \| undefined,\n value: Date \| DateRangeProp,\n position?: \"left\" \| \"right\",\n ) => void;\n /\n Indicates if header should display end date in a date range.\n /\n showEndDate?: boolean;\n /\n Content on the upper part of the calendar.\n */\n children?: React.ReactNode;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/utils.js CHANGED Viewed

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

	@@ -1 +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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"}
1	+ {"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/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -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);
@@ -153,22 +153,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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 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 CHANGED Viewed

@@ -12,13 +12,15 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   },
   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 +41,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 CHANGED Viewed

	@@ -1 +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;"}
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 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;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,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;"}