@hitachivantara/uikit-react-core 5.34.0 → 5.36.0

package/dist/esm/components/BaseInput/BaseInput.styles.js

@@ -17,6 +17,10 @@ const {
     }
   },
   disabled: {
+    "& $inputRoot": {
+      backgroundColor: theme.colors.atmo2,
+      borderColor: theme.colors.secondary_60
+    },
     "& $inputBorderContainer": {
       backgroundColor: theme.colors.atmo4
     },
@@ -81,19 +85,19 @@ const {
     "& $inputRootMultiline": {
       "& $input": {
         border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: "transparent"
+        backgroundColor: theme.colors.atmo2
       }
     },
     "&:hover $inputRootMultiline": {
       "& $input": {
         border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: "transparent"
+        backgroundColor: theme.colors.atmo2
       }
     },
     "&:focus-within $inputRootMultiline": {
       "& $input": {
         border: `1px solid ${theme.colors.secondary_60}`,
-        backgroundColor: "transparent"
+        backgroundColor: theme.colors.atmo2
       }
     }
   },
@@ -110,14 +114,14 @@ const {
   },
   inputRootReadOnly: {
     borderColor: theme.colors.secondary_60,
-    backgroundColor: "transparent"
+    backgroundColor: theme.colors.atmo2
   },
   inputRoot: {
     margin: 0,
     width: "100%",
     borderRadius: theme.radii.base,
     height: "32px",
-    border: `1px solid ${theme.colors.secondary_80}`,
+    border: `1px solid ${theme.colors.secondary}`,
     boxSizing: "border-box",
     backgroundColor: theme.colors.atmo1,
     fontFamily: theme.fontFamily.body,
@@ -135,23 +139,17 @@ const {
     }
   },
   inputRootFocused: {
-    background: theme.colors.atmo1,
+    backgroundColor: theme.colors.atmo1,
     ...outlineStyles,
     "&:hover": {
-      background: theme.colors.atmo1
+      backgroundColor: theme.colors.atmo1
     },
-    "& $inputRootReadOnly": {
-      backgroundColor: "transparent"
+    "&$inputRootReadOnly": {
+      backgroundColor: theme.colors.atmo2
     }
   },
   inputRootDisabled: {
-    background: theme.colors.atmo2,
-    borderColor: theme.colors.secondary_60,
     cursor: "not-allowed",
-    "&:hover": {
-      background: theme.colors.atmo2,
-      cursor: "not-allowed"
-    },
     "&&::before": {
       borderBottomStyle: "none"
     }
@@ -163,7 +161,7 @@ const {
     border: "none",
     height: "auto",
     "& $input": {
-      border: `1px solid ${theme.colors.secondary_80}`,
+      border: `1px solid ${theme.colors.secondary}`,
       borderRadius: theme.radii.base,
       backgroundColor: theme.colors.atmo1,
       height: "auto",

package/dist/esm/components/BaseInput/BaseInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n  },\n  disabled: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.colors.secondary_60,\n      WebkitTextFillColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: \"0px\",\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.colors.secondary_80}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.colors.primary,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    background: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      background: theme.colors.atmo1,\n    },\n\n    \"& $inputRootReadOnly\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  inputRootDisabled: {\n    background: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n\n    \"&:hover\": {\n      background: theme.colors.atmo2,\n      cursor: \"not-allowed\",\n    },\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.primary}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","position","backgroundColor","theme","colors","primary","disabled","atmo4","color","secondary_60","WebkitTextFillColor","atmo2","border","invalid","negative","resizable","readOnly","inputBorderContainer","height","top","left","inputRootInvalid","borderColor","inputRootReadOnly","inputRoot","margin","borderRadius","radii","base","secondary_80","boxSizing","atmo1","fontFamily","body","borderBottom","inputRootFocused","background","outlineStyles","inputRootDisabled","cursor","borderBottomStyle","inputRootMultiline","padding","overflow","minHeight","marginLeft","marginRight","input","space","xs","textOverflow","outline","flexGrow","typography","opacity","inputDisabled","inputReadOnly","inputResizable","resize"],"mappings":"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"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n  },\n  disabled: {\n    \"& $inputRoot\": {\n      backgroundColor: theme.colors.atmo2,\n      borderColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.colors.secondary_60,\n      WebkitTextFillColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.atmo2,\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: \"0px\",\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.colors.secondary}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.colors.primary,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    backgroundColor: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"&$inputRootReadOnly\": {\n      backgroundColor: theme.colors.atmo2,\n    },\n  },\n  inputRootDisabled: {\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.primary}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","position","backgroundColor","theme","colors","primary","disabled","atmo2","borderColor","secondary_60","atmo4","color","WebkitTextFillColor","border","invalid","negative","resizable","readOnly","inputBorderContainer","height","top","left","inputRootInvalid","inputRootReadOnly","inputRoot","margin","borderRadius","radii","base","secondary","boxSizing","atmo1","fontFamily","body","borderBottom","inputRootFocused","outlineStyles","inputRootDisabled","cursor","borderBottomStyle","inputRootMultiline","padding","overflow","minHeight","marginLeft","marginRight","input","space","xs","textOverflow","outline","flexGrow","typography","opacity","secondary_80","inputDisabled","inputReadOnly","inputResizable","resize"],"mappings":"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"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js

@@ -1,6 +1,5 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useContext, useState, useEffect } from "react";
-import { Info } from "@hitachivantara/uikit-react-icons";
 import dayjs from "dayjs";
 import localeData from "dayjs/plugin/localeData";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -15,6 +14,7 @@ import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvFormElementContext } from "../../Forms/FormElement/context/FormElementContext.js";
 import { HvFormElementDescriptorsContext } from "../../Forms/FormElement/context/FormElementDescriptorsContext.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvInput } from "../../Input/Input.js";
 dayjs.extend(localeData);
 dayjs.extend(localizedFormat);
 dayjs.extend(customParseFormat);
@@ -28,8 +28,7 @@ const HvCalendarHeader = (props) => {
     showEndDate,
     showDayOfWeek = false,
     onFocus,
-    invalidDateLabel = "Invalid Date",
-    ...others
+    invalidDateLabel = "Invalid Date"
   } = useDefaultProps("HvCalendarHeader", props);
   const {
     classes,
@@ -109,23 +108,19 @@ const HvCalendarHeader = (props) => {
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };
-  const onChangeHandler = (event) => {
-    setEditedValue(event.target.value);
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { id: localId, className: cx(classes.root, {
-      [classes.invalid]: !isValidValue && inputValue !== ""
-    }), children: [
-      showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
-      /* @__PURE__ */ jsx("div", { className: classes.headerDate, children: /* @__PURE__ */ jsx("input", { type: "text", id: setId(localId, "header-input"), placeholder: localeFormat, value: inputValue, className: classes.input, onBlur: onBlurHandler, onFocus: onFocusHandler, onChange: onChangeHandler, onKeyDown: keyDownHandler, "aria-labelledby": label?.[0]?.id, ...others }) })
-    ] }),
-    !isValidValue && inputValue !== "" && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputBorderContainer }),
-    /* @__PURE__ */ jsx("div", { style: {
-      height: 32
-    }, children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxs(HvTypography, { component: "span", variant: "body", className: classes?.invalidMessageStyling, children: [
-      /* @__PURE__ */ jsx(Info, { color: "brand", iconSize: "S" }),
-      invalidDateLabel
-    ] }) })
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxs("div", { id: localId, className: cx(classes.root, {
+    [classes.invalid]: isInvalid
+  }), children: [
+    showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+    /* @__PURE__ */ jsx(HvInput, { type: "text", id: setId(localId, "header-input"), className: classes.headerDate, classes: {
+      input: classes.input,
+      inputBorderContainer: classes.inputBorderContainer,
+      error: classes.invalidMessageStyling
+    }, placeholder: localeFormat, value: inputValue, "aria-labelledby": label?.[0]?.id, onBlur: onBlurHandler, onFocus: onFocusHandler, onChange: onChangeHandler, onKeyDown: keyDownHandler, status: isInvalid ? "invalid" : "valid", statusMessage: invalidDateLabel })
   ] });
 };
 HvCalendarHeader.formElementType = "HvCalendarHeader";

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\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,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n    ...others\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = 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  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 localId = id ?? setId(elementId, \"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) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\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, date) => {\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 = (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 = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (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 = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={cx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        {showDayOfWeek && (\n          <HvTypography className={classes.headerDayOfWeek}>\n            {weekdayDisplay || \"\\u00A0\"}\n          </HvTypography>\n        )}\n\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"body\"\n            className={classes?.invalidMessageStyling}\n          >\n            <Info color=\"brand\" iconSize=\"S\" />\n            {invalidDateLabel}\n          </HvTypography>\n        )}\n      </div>\n    </>\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.FocusEventHandler<any>,\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":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","others","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","height","invalidMessageStyling","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\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,\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 { elementId } = 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 localId = id ?? setId(elementId, \"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) =>\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, date) => {\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={localId}\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(localId, \"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":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","val","isInvalid","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","error","invalidMessageStyling","formElementType"],"mappings":"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"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -1,54 +1,23 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../utils/classes.js";
-import { outlineStyles } from "../../../utils/focusUtils.js";
 const {
   staticClasses,
   useClasses
 } = createClasses("HvCalendarHeader", {
   root: {
-    marginTop: theme.spacing("xs"),
-    backgroundColor: theme.colors.atmo1,
-    border: `1px solid ${theme.colors.secondary_80}`,
-    "&:hover, &:focus": {
-      borderBottom: `1px solid ${theme.colors.secondary}`
+    paddingBottom: theme.space.md,
+    "&$invalid": {
+      paddingBottom: 0
     }
   },
   invalid: {},
   headerDayOfWeek: {
-    color: theme.colors.secondary_80,
-    paddingLeft: theme.spacing("xs")
+    color: theme.colors.secondary_80
   },
   headerDate: {},
-  input: {
-    border: "none",
-    backgroundColor: "transparent",
-    padding: `5px ${theme.spacing("xs")}`,
-    fontFamily: theme.fontFamily.body,
-    color: theme.colors.secondary_80,
-    fontSize: theme.fontSizes.base,
-    lineHeight: theme.lineHeights.base,
-    fontWeight: theme.fontWeights.normal,
-    width: "100%",
-    "&::placeholder": {
-      color: theme.colors.secondary_60
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  inputBorderContainer: {
-    backgroundColor: theme.colors.negative,
-    height: 1,
-    marginTop: -1
-  },
-  invalidMessageStyling: {
-    display: "flex",
-    alignItems: "center",
-    color: theme.colors.negative
-  }
+  input: {},
+  inputBorderContainer: {},
+  invalidMessageStyling: {}
 });
 export {
   staticClasses,

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    marginTop: theme.spacing(\"xs\"),\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\n    \"&:hover, &:focus\": {\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n    paddingLeft: theme.spacing(\"xs\"),\n  },\n  headerDate: {},\n  input: {\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    padding: `5px ${theme.spacing(\"xs\")}`,\n    fontFamily: theme.fontFamily.body,\n\n    color: theme.colors.secondary_80,\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    fontWeight: theme.fontWeights.normal,\n    width: \"100%\",\n    \"&::placeholder\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  inputBorderContainer: {\n    backgroundColor: theme.colors.negative,\n    height: 1,\n    marginTop: -1,\n  },\n  invalidMessageStyling: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.negative,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","theme","spacing","backgroundColor","colors","atmo1","border","secondary_80","borderBottom","secondary","invalid","headerDayOfWeek","color","paddingLeft","headerDate","input","padding","fontFamily","body","fontSize","fontSizes","base","lineHeight","lineHeights","fontWeight","fontWeights","normal","width","secondary_60","outline","outlineStyles","inputBorderContainer","negative","height","invalidMessageStyling","display","alignItems"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,MAAMG,OAAOC;AAAAA,IAC9BC,QAAS,aAAYL,MAAMG,OAAOG,YAAa;AAAA,IAC/C,oBAAoB;AAAA,MAClBC,cAAe,aAAYP,MAAMG,OAAOK,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOX,MAAMG,OAAOG;AAAAA,IACpBM,aAAaZ,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAY,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLT,QAAQ;AAAA,IACRH,iBAAiB;AAAA,IACjBa,SAAU,OAAMf,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCe,YAAYhB,MAAMgB,WAAWC;AAAAA,IAE7BN,OAAOX,MAAMG,OAAOG;AAAAA,IACpBY,UAAUlB,MAAMmB,UAAUC;AAAAA,IAC1BC,YAAYrB,MAAMsB,YAAYF;AAAAA,IAC9BG,YAAYvB,MAAMwB,YAAYC;AAAAA,IAC9BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBf,OAAOX,MAAMG,OAAOwB;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpB5B,iBAAiBF,MAAMG,OAAO4B;AAAAA,IAC9BC,QAAQ;AAAA,IACRjC,WAAW;AAAA,EACb;AAAA,EACAkC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZxB,OAAOX,MAAMG,OAAO4B;AAAAA,EACtB;AACF,CAAC;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.md,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paddingBottom","theme","space","md","invalid","headerDayOfWeek","color","colors","secondary_80","headerDate","input","inputBorderContainer","invalidMessageStyling"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,eAAeC,MAAMC,MAAMC;AAAAA,IAE3B,aAAa;AAAA,MACXH,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAI,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOL,MAAMM,OAAOC;AAAAA,EACtB;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,OAAO,CAAC;AAAA,EACRC,sBAAsB,CAAC;AAAA,EACvBC,uBAAuB,CAAC;AAC1B,CAAC;"}

package/dist/esm/components/Drawer/Drawer.js

@@ -1,9 +1,12 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { Drawer } from "@mui/material";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { Drawer, Backdrop } from "@mui/material";
 import { Close } from "@hitachivantara/uikit-react-icons";
+import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { withTooltip } from "../../hocs/withTooltip.js";
 import { setId } from "../../utils/setId.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
 import { HvButton } from "../Button/Button.js";
@@ -17,21 +20,36 @@ const HvDrawer = (props) => {
     onClose,
     anchor = "right",
     buttonTitle = "Close",
+    showBackdrop = true,
+    disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDrawer", props);
   const {
     classes,
-    cx
+    cx,
+    css
   } = useClasses(classesProp);
+  const {
+    colors
+  } = useTheme();
   const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "none" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  return /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
-    classes: {
-      root: classes.paper
-    }
-  }, onClose, ...others, children: [
-    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
-    children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
+      classes: {
+        root: classes.paper
+      }
+    }, onClose, ...others, children: [
+      /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
+      children
+    ] }),
+    showBackdrop && /* @__PURE__ */ jsx(Backdrop, { open: !!open, onClick: (event) => {
+      if (disableBackdropClick)
+        return;
+      onClose?.(event, "backdropClick");
+    }, className: cx(css({
+      background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4)
+    }), classes.background) })
   ] });
 };
 export {

package/dist/esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","cx","useClasses","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton"],"mappings":";;;;;;;;;AAyEaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BN,cAC9BO,YAAYF,oBAAoBL,aAAa,KAAK,IAClDK;AAGF,SAAA,qBAACG,QACC,EAAA,WAAWL,GAAGV,QAAQgB,MAAMjB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPgB,MAAMhB,QAAQiB;AAAAA,IAChB;AAAA,EAAA,GAEF,SACIT,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,YACC,IAAIU,MAAMhB,IAAI,OAAO,GACrB,WAAWF,QAAQmB,aACnB,SAAQ,kBACR,SAASd,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n  Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer ix open.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <>\n      <MuiDrawer\n        className={cx(classes.root, className)}\n        id={id}\n        anchor={anchor}\n        open={open}\n        PaperProps={{\n          classes: {\n            root: classes.paper,\n          },\n        }}\n        onClose={onClose}\n        {...others}\n      >\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={onClose}\n          aria-label={buttonTitle}\n        >\n          <CloseButtonTooltipWrapper />\n        </HvButton>\n        {children}\n      </MuiDrawer>\n      {showBackdrop && (\n        <MuiBackdrop\n          open={!!open}\n          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          }}\n          className={cx(\n            css({\n              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n            }),\n            classes.background\n          )}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;;AAsFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAE5B,QAAMC,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BX,cAC9BY,YAAYF,oBAAoBV,aAAa,KAAK,IAClDU;AAEJ,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAAG,QAAA,EACC,WAAWR,GAAGZ,QAAQqB,MAAMtB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPqB,MAAMrB,QAAQsB;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIZ,GAAAA,QAEJ,UAAA;AAAA,MAAA,oBAAC,YACC,IAAIa,MAAMrB,IAAI,OAAO,GACrB,WAAWF,QAAQwB,aACnB,SAAQ,kBACR,SAASnB,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,MACCJ;AAAAA,IAAAA,GACH;AAAA,IACCK,oCACEiB,UACC,EAAA,MAAM,CAAC,CAACrB,MACR,SAAS,CAACsB,UAAqD;AACzDjB,UAAAA;AAAsB;AAC1BJ,gBAAUqB,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWd,GACTC,IAAI;AAAA,MACFc,YAAYC,UAAUb,QAAQc,SAASC,MAAMf,OAAOc,KAAK;AAAA,IAAA,CAC1D,GACD7B,QAAQ2B,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Dropdown/List/List.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-import { useState, useContext, useEffect } from "react";
+import { useState, useContext, useMemo, useEffect } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./List.styles.js";
@@ -21,6 +21,7 @@ const cleanHidden = (lst) => lst.map((item) => ({
   isHidden: false
 }));
 const valuesExist = (values) => values != null && values?.length > 0;
+const getSelectedIds = (list) => getSelected(list).map((item) => item.id || item.label);
 const HvDropdownList = (props) => {
   const {
     id,
@@ -52,6 +53,9 @@ const HvDropdownList = (props) => {
     width,
     height
   } = useContext(BaseDropdownContext);
+  const hasChanges = useMemo(() => {
+    return String(getSelectedIds(values)) !== String(getSelectedIds(list));
+  }, [list, values]);
   const newLabels = {
     selectAll: labels?.selectAll,
     selectionConjunction: labels?.multiSelectionConjunction
@@ -139,7 +143,7 @@ const HvDropdownList = (props) => {
     const applyLabel = labels?.applyLabel;
     const cancelLabel = labels?.cancelLabel;
     return /* @__PURE__ */ jsxs(HvActionBar, { id: setId(id, "actions"), children: [
-      /* @__PURE__ */ jsx(HvButton, { id: setId(id, "actions-apply"), onClick: () => onChange(cleanHidden(list), true, true, true), variant: "primaryGhost", children: applyLabel }),
+      /* @__PURE__ */ jsx(HvButton, { id: setId(id, "actions-apply"), disabled: !hasChanges, onClick: () => onChange(cleanHidden(list), true, true, true), variant: "primaryGhost", children: applyLabel }),
       /* @__PURE__ */ jsx(HvButton, { id: setId(id, "actions-cancel"), onClick: onCancel, variant: "primaryGhost", children: cancelLabel })
     ] });
   };

package/dist/esm/components/Dropdown/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  values != null && values?.length > 0;\n\nexport const HvDropdownList = (props: HvDropdownListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    values = [],\n    multiSelect = false,\n    showSearch = false,\n    onChange,\n    onCancel,\n    labels,\n    notifyChangesOnFirstRender = false,\n    hasTooltips = false,\n    singleSelectionToggle,\n    height: dropdownHeight,\n    maxHeight,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvDropdownList\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (results != null) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 4,\n                  margin: -4,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","length","HvDropdownList","props","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","useDefaultProps","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","searchContainer","setId","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","selectAllContainer","container","selection","onSelection","renderActions","applyLabel","cancelLabel","showList","rootList","listBorderDown","listContainer","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","margin"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  values != null && values?.length > 0;\n\n/** Filter selected ordered element `id`s (or `label`) */\nconst getSelectedIds = (list: HvListValue[]) =>\n  getSelected(list).map((item) => item.id || item.label);\n\nexport const HvDropdownList = (props: HvDropdownListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    values = [],\n    multiSelect = false,\n    showSearch = false,\n    onChange,\n    onCancel,\n    labels,\n    notifyChangesOnFirstRender = false,\n    hasTooltips = false,\n    singleSelectionToggle,\n    height: dropdownHeight,\n    maxHeight,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvDropdownList\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const hasChanges = useMemo(() => {\n    return String(getSelectedIds(values)) !== String(getSelectedIds(list));\n  }, [list, values]);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (results != null) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          disabled={!hasChanges}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 4,\n                  margin: -4,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","length","getSelectedIds","list","getSelected","id","label","HvDropdownList","props","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","useDefaultProps","cx","css","useClasses","searchStr","setSearchStr","useState","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","hasChanges","useMemo","String","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","stringValue","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","searchContainer","setId","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","selectAllContainer","container","selection","onSelection","renderActions","applyLabel","cancelLabel","showList","rootList","listBorderDown","listContainer","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","margin"],"mappings":"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"}

package/dist/esm/components/ListContainer/ListItem/ListItem.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import React__default, { useContext, useCallback, useMemo } from "react";
+import React__default, { forwardRef, useContext, useCallback, useMemo } from "react";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useClasses } from "./ListItem.styles.js";
 import { staticClasses } from "./ListItem.styles.js";
@@ -24,7 +24,7 @@ const applyClassNameToElement = (element, className) => {
   }
   return null;
 };
-const HvListItem = (props) => {
+const HvListItem = forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -78,6 +78,7 @@ const HvListItem = (props) => {
       "li",
       {
         id,
+        ref,
         role,
         value,
         className: cx(classes.root, {
@@ -107,7 +108,7 @@ const HvListItem = (props) => {
   }, configuration: {
     tabIndex
   }, children: listItem }) : listItem;
-};
+});
 export {
   HvListItem,
   staticClasses as listItemClasses