@hitachivantara/uikit-react-core 5.82.4 → 5.83.0

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const react = require("@emotion/react");
-const MuiInput = require("@mui/material/Input");
+const MuiInputBase = require("@mui/material/InputBase");
 const utils$1 = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
@@ -11,7 +11,7 @@ const BaseInput_styles = require("./BaseInput.styles.cjs");
 const context = require("../FormElement/context.cjs");
 const utils = require("../FormElement/utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiInput__default = /* @__PURE__ */ _interopDefault(MuiInput);
+const MuiInputBase__default = /* @__PURE__ */ _interopDefault(MuiInputBase);
 const baseInputStyles = react.css({
   "input:-webkit-autofill": {
     WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
@@ -75,9 +75,6 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
     localInvalid,
     id
   );
-  const onChangeHandler = (event) => {
-    onChange?.(event, event.target.value);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: baseInputStyles }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -91,7 +88,7 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
         }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            MuiInput__default.default,
+            MuiInputBase__default.default,
             {
               id,
               name: formElementProps.name,
@@ -101,7 +98,7 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
               placeholder,
               readOnly: !!formElementProps.readOnly,
               disabled: formElementProps.disabled,
-              onChange: onChangeHandler,
+              onChange: (event) => onChange?.(event, event.target.value),
               className: cx({
                 [classes.inputRootInvalid]: localInvalid,
                 [classes.inputRootReadOnly]: formElementProps.readOnly

package/dist/cjs/ButtonBase/ButtonBase.styles.cjs

@@ -10,12 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
     background: "none",
     padding: 0,
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     },
     // Default button - no size specified
     fontFamily: uikitStyles.theme.fontFamily.body,

package/dist/cjs/Calendar/Calendar.cjs

@@ -6,13 +6,13 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const Calendar_styles = require("./Calendar.styles.cjs");
 const utils = require("./utils.cjs");
-const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
 const context = require("../FormElement/context.cjs");
+const SingleCalendar = require("./SingleCalendar/SingleCalendar.cjs");
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
     id: idProp,
-    locale = "en-US",
+    locale = utils.DEFAULT_LOCALE,
     value: valueProp,
     visibleMonth,
     visibleYear,

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -2,31 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const dayjs = require("dayjs");
-const customParseFormat = require("dayjs/plugin/customParseFormat");
-const localeData = require("dayjs/plugin/localeData");
-const localizedFormat = require("dayjs/plugin/localizedFormat");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
-const context = require("../../FormElement/context.cjs");
 const Input = require("../../Input/Input.cjs");
+const context = require("../../FormElement/context.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
-const customParseFormat__default = /* @__PURE__ */ _interopDefault(customParseFormat);
-const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
-const localizedFormat__default = /* @__PURE__ */ _interopDefault(localizedFormat);
-dayjs__default.default.extend(localeData__default.default);
-dayjs__default.default.extend(localizedFormat__default.default);
-dayjs__default.default.extend(customParseFormat__default.default);
 const HvCalendarHeader = (props) => {
   const {
     id: idProp,
-    value,
-    locale = "en-US",
+    value: valueProp,
+    locale = utils.DEFAULT_LOCALE,
     classes: classesProp,
     onChange,
     showEndDate,
@@ -36,23 +24,19 @@ const HvCalendarHeader = (props) => {
   } = uikitReactUtils.useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
   const context$1 = React.useContext(context.HvFormElementContext);
-  const elementValue = React.useContext(context.HvFormElementValueContext);
   const { label } = React.useContext(context.HvFormElementDescriptorsContext);
-  let localValue = value ?? elementValue ?? "";
-  if (utils.isRange(localValue)) {
-    localValue = showEndDate ? localValue.endDate : localValue.startDate;
-  }
+  const localValue = utils.isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
   const [dateValue, setDateValue] = React.useState(localValue);
   const [editedValue, setEditedValue] = React.useState(null);
   const [displayValue, setDisplayValue] = React.useState("");
   const [weekdayDisplay, setWeekdayDisplay] = React.useState("");
   const id = idProp ?? setId.setId(context$1.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
-  const localeFormat = dayjs__default.default().locale(locale).localeData().longDateFormat("L");
+  const localeFormat = utils.getLocaleDateFormat(locale);
   const [isValidValue, setIsValidValue] = React.useState(
-    inputValue.length === 0 || !!inputValue && dayjs__default.default(localValue).isValid()
+    inputValue.length === 0 || inputValue && utils.isDate(new Date(inputValue))
   );
-  const validateInput = (incomingValid) => incomingValid === void 0 || dayjs__default.default(incomingValid).isValid();
+  const validateInput = (incomingValid) => incomingValid === void 0 || utils.isDate(new Date(incomingValid));
   React.useEffect(() => {
     const valid = validateInput(localValue);
     setIsValidValue(valid);
@@ -66,15 +50,15 @@ const HvCalendarHeader = (props) => {
       const weekday = new Intl.DateTimeFormat(locale, {
         weekday: "short"
       }).format(utils.isDate(localValue) ? localValue : 0);
-      setDisplayValue(utils.formatToLocale(localValue, locale));
+      setDisplayValue(utils.getFormattedDate(localValue, locale));
       setEditedValue(null);
       setWeekdayDisplay(weekday);
     }
   }, [localValue, locale]);
   const handleNewDate = (event, date) => {
-    const localeParsedDate = dayjs__default.default(date, localeFormat);
-    const isValidInput = localeParsedDate.isValid();
-    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs__default.default(date).toDate();
+    const localeParsedDate = utils.parseDateString(date, locale);
+    const isValidInput = utils.isDate(localeParsedDate);
+    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
     if (!utils.isSameDay(dateParsed, dateValue)) {
       setDateValue(dateParsed);
       onChange?.(event, dateParsed);
@@ -101,7 +85,7 @@ const HvCalendarHeader = (props) => {
   };
   const onFocusHandler = (event) => {
     if (!localValue) return;
-    const formattedDate = isValidValue && utils.isDate(localValue) ? dayjs__default.default(localValue).locale(locale).format("L") : editedValue;
+    const formattedDate = isValidValue && utils.isDate(localValue) ? utils.getStringFromDate(localValue, locale) : editedValue;
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs

@@ -17,7 +17,7 @@ const HvSingleCalendar = ({
   classes: classesProp,
   className,
   id,
-  locale = "en-US",
+  locale = utils.DEFAULT_LOCALE,
   value,
   visibleMonth,
   visibleYear,
@@ -105,6 +105,7 @@ const HvSingleCalendar = ({
       {
         id: setId.setId(id, "header"),
         locale,
+        value,
         onChange: handleInputChange,
         showEndDate: showEndDate && !isDateSelectionMode,
         showDayOfWeek,

package/dist/cjs/Calendar/utils.cjs

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dayjs = require("dayjs");
 const helpers = require("../utils/helpers.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 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));
@@ -18,6 +16,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;
@@ -45,7 +46,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);
@@ -68,41 +72,68 @@ 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__default.default(startDate).format("YYYY-MM-DD");
-  const modEndDate = dayjs__default.default(localEndDate).format("YYYY-MM-DD");
-  const convertedDate = dayjs__default.default(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__default.default(minimumDate).format("YYYY-MM-DD") : void 0;
-  const modEndDate = maximumDate ? dayjs__default.default(maximumDate).format("YYYY-MM-DD") : void 0;
-  const convertedDate = dayjs__default.default(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), "");
+}
 exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
+exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
 exports.checkIfDateIsDisabled = checkIfDateIsDisabled;
 exports.createDatesArray = createDatesArray;
 exports.dateInProvidedValueRange = dateInProvidedValueRange;
-exports.formatToLocale = formatToLocale;
+exports.getDateISO = getDateISO;
 exports.getFormattedDate = getFormattedDate;
+exports.getLocaleDateFormat = getLocaleDateFormat;
 exports.getMonthDays = getMonthDays;
 exports.getMonthFirstWeekday = getMonthFirstWeekday;
 exports.getMonthName = getMonthName;
 exports.getMonthNamesList = getMonthNamesList;
 exports.getNextMonth = getNextMonth;
 exports.getPreviousMonth = getPreviousMonth;
+exports.getStringFromDate = getStringFromDate;
 exports.getWeekdayNamesList = getWeekdayNamesList;
 exports.isDate = isDate;
 exports.isDateRangeProp = isDateRangeProp;
@@ -110,3 +141,4 @@ exports.isRange = isRange;
 exports.isSameDay = isSameDay;
 exports.isSameMonth = isSameMonth;
 exports.makeUTCDate = makeUTCDate;
+exports.parseDateString = parseDateString;

package/dist/cjs/ColorPicker/ColorPicker.cjs

@@ -71,7 +71,7 @@ const HvColorPicker = React.forwardRef(
       deleteSavedColorButtonArialLabel = "Delete saved color",
       addSavedColorButtonAriaLabel = "Add current color to saved colors"
     } = uikitReactUtils.useDefaultProps("HvColorPicker", props);
-    const { classes, css, cx } = ColorPicker_styles.useClasses(classesProp);
+    const { classes, cx } = ColorPicker_styles.useClasses(classesProp);
     const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
     const [isOpen, setIsOpen] = useControlled.useControlled(expanded, defaultExpanded);
     const [color, setColor] = useControlled.useControlled(value, defaultValue);
@@ -154,22 +154,24 @@ const HvColorPicker = React.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__ */ jsxRuntime.jsx(
-                uikitReactIcons.Checkbox,
+                "div",
                 {
-                  className: classes.headerColorIconOnly,
-                  color: [color, "transparent"]
+                  style: { backgroundColor: color },
+                  className: cx(
+                    classes.headerColorIcon,
+                    classes.headerColorIconOnly
+                  )
                 }
               ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, { className: classes.colorPickerIcon }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  uikitReactIcons.Checkbox,
+                  "div",
                   {
-                    className: classes.headerColorIcon,
-                    color: [color, "transparent"]
+                    style: { backgroundColor: color },
+                    className: classes.headerColorIcon
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/ColorPicker/ColorPicker.styles.cjs

@@ -14,13 +14,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
   },
   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%",
@@ -41,9 +43,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPick
   },
   dropdownRootIconOnly: {
     width: 32,
-    height: 32
+    height: 32,
+    "& .HvBaseDropdown-selection": {
+      padding: 0
+    }
+  },
+  headerColorIconOnly: {
+    margin: 8
   },
-  headerColorIconOnly: {},
   pickerFields: { paddingBottom: 20 }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/ColorPicker/Fields/Fields.cjs

@@ -114,9 +114,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
       }
     ),
@@ -126,9 +127,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
       }
     ),
@@ -138,9 +140,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/cjs/DatePicker/DatePicker.cjs

@@ -65,7 +65,7 @@ const HvDatePicker = React.forwardRef(
       rangeMode = false,
       startAdornment,
       horizontalPlacement = "right",
-      locale: localeProp,
+      locale = utils$3.DEFAULT_LOCALE,
       showActions,
       showClear,
       disablePortal = true,
@@ -82,7 +82,6 @@ const HvDatePicker = React.forwardRef(
       "standBy"
     );
     const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-    const locale = localeProp || "en-US";
     const [calendarOpen, setCalendarOpen] = useControlled.useControlled(
       expanded,
       Boolean(defaultExpanded)

package/dist/cjs/DatePicker/utils.cjs

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("../Calendar/utils.cjs");
 const validateDate = (date) => utils.isDate(date) && date || /* @__PURE__ */ new Date();
-const getFormattedDateRange = (date, locale, rep = "short") => {
+const getFormattedDateRange = (date, locale) => {
   const { startDate, endDate } = date;
   const monthYear = `${utils.getMonthName(
     startDate,
     locale,
-    rep
+    "short"
   )} ${startDate.getFullYear()}`;
   return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;
 };

package/dist/cjs/Input/Input.cjs

@@ -11,6 +11,7 @@ const useControlled = require("../hooks/useControlled.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const Input_styles = require("./Input.styles.cjs");
@@ -46,7 +47,7 @@ const changeInputValue = (input, value = "") => {
   setInputValue?.call(input, value);
   input?.dispatchEvent(event);
 };
-const HvInput = React.forwardRef(function HvInput2(props, ref) {
+const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -123,7 +124,7 @@ const HvInput = React.forwardRef(function HvInput2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      value,
+      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -209,12 +210,12 @@ const HvInput = React.forwardRef(function HvInput2(props, ref) {
     if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
     setFocused(false);
     const inputValidity = performValidation();
-    onBlur?.(event, value, inputValidity);
+    onBlur?.(event, String(value), inputValidity);
   };
   const onFocusHandler = (event) => {
     setFocused(true);
     setValidationState(utils$1.validationStates.standBy);
-    onFocus?.(event, value);
+    onFocus?.(event, String(value));
   };
   const getSuggestions = (li) => {
     const listEl = document.getElementById(
@@ -235,9 +236,9 @@ const HvInput = React.forwardRef(function HvInput2(props, ref) {
       const li = getSuggestions(0);
       li?.focus();
     } else if (keyboardUtils.isKey(event, "Enter")) {
-      onEnter?.(event, value);
+      onEnter?.(event, String(value));
     }
-    onKeyDown?.(event, value);
+    onKeyDown?.(event, String(value));
   };
   const onContainerBlurHandler = (event) => {
     if (event.relatedTarget) {
@@ -290,7 +291,7 @@ const HvInput = React.forwardRef(function HvInput2(props, ref) {
   ]);
   const handleSearch = React.useCallback(
     (event) => {
-      onEnter?.(event, value);
+      onEnter?.(event, String(value));
     },
     [onEnter, value]
   );
@@ -466,7 +467,7 @@ const HvInput = React.forwardRef(function HvInput2(props, ref) {
               onFocus: (event) => {
                 inputProps.onFocus?.(event);
                 if (canShowSuggestions && suggestOnFocus) {
-                  suggestionHandler(value);
+                  suggestionHandler(String(value));
                 }
               },
               onClick: (event) => {

package/dist/cjs/Select/Option.cjs

@@ -42,8 +42,7 @@ const HvOption = generic.fixedForwardRef(function HvOption2(props, ref) {
       className: cx(classes.root, className, {
         [classes.highlighted]: highlighted
       }),
-      ...getRootProps(),
-      ...others,
+      ...getRootProps(others),
       children
     }
   );

package/dist/cjs/Select/Select.cjs

@@ -11,6 +11,7 @@ const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const document = require("../utils/document.cjs");
 const setId = require("../utils/setId.cjs");
+const Option = require("./Option.cjs");
 const Select_styles = require("./Select.styles.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
@@ -27,9 +28,12 @@ function defaultRenderValue(options) {
   return options?.label ?? null;
 }
 const mergeIds = (...ids) => clsx.clsx(ids) || void 0;
+function renderOptions(options) {
+  return options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Option.HvOption, { ...option, children: option.label }, option.value));
+}
 const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
   const {
-    children,
+    children: childrenProp,
     classes: classesProp,
     className,
     id: idProp,
@@ -118,6 +122,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const isInvalid = validationState === "invalid";
   const actualValue = multiple ? value.map((v) => getOptionMetadata(v)).filter((v) => v !== void 0) : getOptionMetadata(value) ?? null;
+  const children = childrenProp ?? renderOptions(optionsProp);
   const isOpen = open && !!children;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormElement.HvFormElement,

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -2,7 +2,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const utils = require("../utils/utils.cjs");
+const getBorderStyles = (color, rowBorderRadius) => {
+  return {
+    "& td": {
+      borderTop: `1px solid ${color}`,
+      borderBottom: `1px solid ${color}`
+    },
+    "& td:first-of-type": {
+      borderLeft: `1px solid ${color}`,
+      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
+    },
+    "& td:last-of-type": {
+      borderRight: `1px solid ${color}`,
+      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
+    }
+  };
+};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow", {
   /** Styles applied to the component root class. */
   root: {
@@ -48,16 +63,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     // only applied on custom `display`
     marginBottom: uikitStyles.theme.space.xs,
     borderRadius: uikitStyles.theme.radii.round,
-    ...utils.getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round),
+    ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round),
     backgroundColor: uikitStyles.theme.colors.atmo1,
     "&$selected": {
-      ...utils.getBorderStyles(uikitStyles.theme.colors.secondary, uikitStyles.theme.radii.round),
+      ...getBorderStyles(uikitStyles.theme.colors.secondary, uikitStyles.theme.radii.round),
       "&:hover": {
-        ...utils.getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
+        ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
       }
     },
     "&:hover": {
-      ...utils.getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
+      ...getBorderStyles(uikitStyles.theme.colors.atmo4, uikitStyles.theme.radii.round)
     },
     "&.HvIsFocused": {
       borderRadius: uikitStyles.theme.radii.round

package/dist/cjs/Table/hooks/{useBulkActions.cjs → useHvBulkActions.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const reactTable = require("react-table");
 const useInstanceHook = (instance) => {
@@ -64,7 +64,7 @@ const useInstanceHook = (instance) => {
     subtractivePageBulkDeselection: !!instance.subtractivePageBulkDeselection
   });
 };
-const defaultgetHvBulkActionsProps = (props, { instance }) => {
+const defaultGetHvBulkActionsProps = (props, { instance }) => {
   const {
     rows,
     initialRows,
@@ -86,10 +86,9 @@ const defaultgetHvBulkActionsProps = (props, { instance }) => {
   };
   return [props, nextProps];
 };
-const useBulkActions = (hooks) => {
-  hooks.getHvBulkActionsProps = [defaultgetHvBulkActionsProps];
+const useHvBulkActions = (hooks) => {
+  hooks.getHvBulkActionsProps = [defaultGetHvBulkActionsProps];
   hooks.useInstance.push(useInstanceHook);
 };
-useBulkActions.pluginName = "useHvBulkActions";
-exports.default = useBulkActions;
-exports.defaultgetHvBulkActionsProps = defaultgetHvBulkActionsProps;
+useHvBulkActions.pluginName = "useHvBulkActions";
+exports.useHvBulkActions = useHvBulkActions;