@hitachivantara/uikit-react-core 5.33.0 → 5.35.0

package/dist/cjs/components/BaseInput/BaseInput.styles.cjs

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

package/dist/cjs/components/BaseInput/BaseInput.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.cjs","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.cjs","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/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const dayjs = require("dayjs");
 const localeData = require("dayjs/plugin/localeData");
 const localizedFormat = require("dayjs/plugin/localizedFormat");
@@ -16,6 +15,7 @@ const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const FormElementContext = require("../../Forms/FormElement/context/FormElementContext.cjs");
 const FormElementDescriptorsContext = require("../../Forms/FormElement/context/FormElementDescriptorsContext.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const Input = require("../../Input/Input.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
@@ -34,8 +34,7 @@ const HvCalendarHeader = (props) => {
     showEndDate,
     showDayOfWeek = false,
     onFocus,
-    invalidDateLabel = "Invalid Date",
-    ...others
+    invalidDateLabel = "Invalid Date"
   } = useDefaultProps.useDefaultProps("HvCalendarHeader", props);
   const {
     classes,
@@ -115,23 +114,19 @@ const HvCalendarHeader = (props) => {
     setEditedValue(formattedDate);
     onFocus?.(event, formattedDate);
   };
-  const onChangeHandler = (event) => {
-    setEditedValue(event.target.value);
+  const onChangeHandler = (event, val) => {
+    setEditedValue(val);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { id: localId, className: cx(classes.root, {
-      [classes.invalid]: !isValidValue && inputValue !== ""
-    }), children: [
-      showDayOfWeek && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.headerDate, children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", id: setId.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__ */ jsxRuntime.jsx("div", { role: "presentation", className: classes.inputBorderContainer }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      height: 32
-    }, children: !isValidValue && inputValue !== "" && /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { component: "span", variant: "body", className: classes?.invalidMessageStyling, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color: "brand", iconSize: "S" }),
-      invalidDateLabel
-    ] }) })
+  const isInvalid = !isValidValue && inputValue !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: localId, className: cx(classes.root, {
+    [classes.invalid]: isInvalid
+  }), children: [
+    showDayOfWeek && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
+    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { type: "text", id: setId.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/cjs/components/Calendar/CalendarHeader/CalendarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.cjs","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","jsxs","Fragment","root","invalid","HvTypography","headerDayOfWeek","headerDate","input","jsx","inputBorderContainer","height","invalidMessageStyling","Info","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.cjs","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","HvTypography","headerDayOfWeek","jsx","HvInput","headerDate","input","inputBorderContainer","error","invalidMessageStyling","formElementType"],"mappings":"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"}

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.styles.cjs

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

package/dist/cjs/components/Calendar/CalendarHeader/CalendarHeader.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.cjs","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,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,WAAWC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,IAC7BC,iBAAiBF,YAAAA,MAAMG,OAAOC;AAAAA,IAC9BC,QAAS,aAAYL,YAAMG,MAAAA,OAAOG,YAAa;AAAA,IAC/C,oBAAoB;AAAA,MAClBC,cAAe,aAAYP,YAAMG,MAAAA,OAAOK,SAAU;AAAA,IACpD;AAAA,EACF;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOX,YAAAA,MAAMG,OAAOG;AAAAA,IACpBM,aAAaZ,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACjC;AAAA,EACAY,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLT,QAAQ;AAAA,IACRH,iBAAiB;AAAA,IACjBa,SAAU,OAAMf,YAAAA,MAAMC,QAAQ,IAAI,CAAE;AAAA,IACpCe,YAAYhB,YAAAA,MAAMgB,WAAWC;AAAAA,IAE7BN,OAAOX,YAAAA,MAAMG,OAAOG;AAAAA,IACpBY,UAAUlB,YAAAA,MAAMmB,UAAUC;AAAAA,IAC1BC,YAAYrB,YAAAA,MAAMsB,YAAYF;AAAAA,IAC9BG,YAAYvB,YAAAA,MAAMwB,YAAYC;AAAAA,IAC9BC,OAAO;AAAA,IACP,kBAAkB;AAAA,MAChBf,OAAOX,YAAAA,MAAMG,OAAOwB;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpB5B,iBAAiBF,YAAAA,MAAMG,OAAO4B;AAAAA,IAC9BC,QAAQ;AAAA,IACRjC,WAAW;AAAA,EACb;AAAA,EACAkC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZxB,OAAOX,YAAAA,MAAMG,OAAO4B;AAAAA,EACtB;AACF,CAAC;;;"}
+{"version":3,"file":"CalendarHeader.styles.cjs","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,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,eAAeC,YAAAA,MAAMC,MAAMC;AAAAA,IAE3B,aAAa;AAAA,MACXH,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAI,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IACfC,OAAOL,YAAAA,MAAMM,OAAOC;AAAAA,EACtB;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,OAAO,CAAC;AAAA,EACRC,sBAAsB,CAAC;AAAA,EACvBC,uBAAuB,CAAC;AAC1B,CAAC;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","jsx","HvBaseDropdown","container","root","baseContainer","HvButton","iconSelected","MoreOptionsVertical","undefined","e","s","HvPanel","menuListRoot","HvList","item","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","jsx","HvBaseDropdown","container","root","baseContainer","HvButton","iconSelected","MoreOptionsVertical","undefined","e","s","HvPanel","menuListRoot","HvList","item","menuList"],"mappings":"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"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs

@@ -42,7 +42,7 @@ const {
       fill: uikitStyles.theme.colors.secondary
     },
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`
+    border: `1px solid ${uikitStyles.theme.colors.secondary}`
   },
   /** Styles applied to the list root. */
   menuListRoot: {},

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary_80}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","secondary_80","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAMC,MAAAA,MAAMC,IAAK,IAAGF,kBAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,YAAMM,MAAAA,OAAOM,YAAa;AAAA,EACjD;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAMC,MAAAA,MAAMC,IAAK,IAAGF,kBAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,YAAMM,MAAAA,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/Dropdown/List/List.cjs

@@ -22,6 +22,7 @@ const cleanHidden = (lst) => lst.map((item) => ({
   isHidden: false
 }));
 const valuesExist = (values) => values != null && values?.length > 0;
+const getSelectedIds = (list) => utils.getSelected(list).map((item) => item.id || item.label);
 const HvDropdownList = (props) => {
   const {
     id,
@@ -53,6 +54,9 @@ const HvDropdownList = (props) => {
     width,
     height
   } = React.useContext(BaseDropdownContext.default);
+  const hasChanges = React.useMemo(() => {
+    return String(getSelectedIds(values)) !== String(getSelectedIds(list));
+  }, [list, values]);
   const newLabels = {
     selectAll: labels?.selectAll,
     selectionConjunction: labels?.multiSelectionConjunction
@@ -140,7 +144,7 @@ const HvDropdownList = (props) => {
     const applyLabel = labels?.applyLabel;
     const cancelLabel = labels?.cancelLabel;
     return /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, { id: setId.setId(id, "actions"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "actions-apply"), onClick: () => onChange(cleanHidden(list), true, true, true), variant: "primaryGhost", children: applyLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "actions-apply"), disabled: !hasChanges, onClick: () => onChange(cleanHidden(list), true, true, true), variant: "primaryGhost", children: applyLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "actions-cancel"), onClick: onCancel, variant: "primaryGhost", children: cancelLabel })
     ] });
   };

package/dist/cjs/components/Dropdown/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","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","jsx","searchContainer","HvInput","setId","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","jsxs","Fragment","selectAllContainer","HvCheckBox","container","selection","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","margin"],"mappings":"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"}
+{"version":3,"file":"List.cjs","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","jsx","searchContainer","HvInput","setId","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","jsxs","Fragment","selectAllContainer","HvCheckBox","container","selection","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","margin"],"mappings":"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"}

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/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","container","root","baseContainer","iconSelected","undefined","e","s","menuListRoot","item","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","container","root","baseContainer","iconSelected","undefined","e","s","menuListRoot","item","menuList"],"mappings":"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"}

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

@@ -40,7 +40,7 @@ const {
       fill: theme.colors.secondary
     },
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
-    border: `1px solid ${theme.colors.secondary_80}`
+    border: `1px solid ${theme.colors.secondary}`
   },
   /** Styles applied to the list root. */
   menuListRoot: {},

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary_80}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","secondary_80","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMC,MAAMC,IAAK,IAAGF,MAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,MAAMM,OAAOM,YAAa;AAAA,EACjD;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMC,MAAMC,IAAK,IAAGF,MAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,MAAMM,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}

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/types/index.d.ts

@@ -1922,7 +1922,7 @@ export declare interface HvCalendarHeaderProps {
     /**
      * Callback to handle input onFocus.
      */
-    onFocus?: (event: React.FocusEventHandler<any>, formattedDate: string | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, formattedDate: string | null) => void;
     /**
      * Indicates if header should display end date in a date range.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.33.0",
+  "version": "5.35.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -33,9 +33,9 @@
     "@emotion/css": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
     "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.6.11",
-    "@hitachivantara/uikit-react-shared": "^5.1.15",
-    "@hitachivantara/uikit-styles": "^5.15.0",
+    "@hitachivantara/uikit-react-icons": "^5.6.12",
+    "@hitachivantara/uikit-react-shared": "^5.1.16",
+    "@hitachivantara/uikit-styles": "^5.16.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
@@ -64,7 +64,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d361bf3ce4206387697aaad36aac4e46c74928ae",
+  "gitHead": "e322581164467dcb33d75ddcd8cfc12da884f71e",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {