npm - @hitachivantara/uikit-react-core - Versions diffs - 5.68.1 → 5.69.0 - Mend

@hitachivantara/uikit-react-core 5.68.1 → 5.69.0

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

Files changed (59) hide show

package/dist/cjs/Button/Button.cjs CHANGED Viewed

@@ -40,7 +40,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
   const { activeTheme } = uikitReactUtils.useTheme();
   const variant = mapVariant(
     variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.name
+    activeTheme?.base
   );
   const handleClick = (e) => {
     if (disabled) return;

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarHeader", {
   root: {
-    paddingBottom: uikitStyles.theme.space.md,
+    paddingBottom: uikitStyles.theme.space.sm,
     "&$invalid": {
       paddingBottom: 0
     }

package/dist/cjs/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.cjs CHANGED Viewed

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     navigationContainer: {
       display: "flex",
       justifyContent: "space-between",
-      padding: uikitStyles.theme.spacing("xs", 0)
+      paddingBottom: uikitStyles.theme.space.xs
     },
     navigationMonth: {
       minWidth: "160px"

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs CHANGED Viewed

@@ -11,6 +11,7 @@ const CalendarCell = require("./CalendarCell.cjs");
 const SingleCalendar_styles = require("./SingleCalendar.styles.cjs");
 const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/ComposedNavigation.cjs");
 const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
+const Panel = require("../../Panel/Panel.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const HvSingleCalendar = ({
   classes: classesProp,
@@ -98,7 +99,7 @@ const HvSingleCalendar = ({
       currentDate.toString()
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.calendarContainer, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.calendarWrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Panel.HvPanel, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader.HvCalendarHeader,
       {
@@ -110,7 +111,7 @@ const HvSingleCalendar = ({
         invalidDateLabel
       }
     ),
-    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ComposedNavigation.HvComposedNavigation,
         {
@@ -145,7 +146,7 @@ const HvSingleCalendar = ({
         rangeMode
       }
     )
-  ] }) });
+  ] });
 };
 exports.singleCalendarClasses = SingleCalendar_styles.staticClasses;
 exports.HvSingleCalendar = HvSingleCalendar;

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs CHANGED Viewed

@@ -3,20 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCalendar", {
-  calendarContainer: {
-    width: "318px",
-    minHeight: "440px",
-    position: "relative"
-  },
-  calendarWrapper: {
-    overflow: "hidden",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    padding: uikitStyles.theme.spacing("sm")
+  root: {
+    overflow: "hidden"
   },
   calendarGrid: {
-    display: "flex",
-    flexFlow: "wrap",
-    width: "280px",
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
       backgroundColor: uikitStyles.theme.colors.atmo3,
       "& $startBookend": {

package/dist/cjs/Calendar/utils.cjs CHANGED Viewed

@@ -30,7 +30,7 @@ const getNextMonth = (month, year) => {
 };
 const getMonthNamesList = (locale, representationValue = "long") => {
   const options = { month: representationValue, timeZone: "UTC" };
-  return [...new Array(12)].map((n, index) => {
+  return [...Array(12).keys()].map((index) => {
     const auxDate = makeUTCDate(1970, index, 1);
     return helpers.capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));
   });
@@ -40,7 +40,7 @@ const getWeekdayNamesList = (locale) => {
     weekday: "narrow",
     timeZone: "UTC"
   });
-  return [...new Array(7)].map((n, index) => {
+  return [...Array(7).keys()].map((index) => {
     return formatter.format(makeUTCDate(1970, 0, 4 + index));
   });
 };
@@ -53,15 +53,15 @@ const createDatesArray = (month, year) => {
   const prevMonthYear = getPreviousMonth(month, year);
   const nextMonthYear = getNextMonth(month, year);
   const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);
-  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+  const prevMonthDates = [...Array(daysFromPrevMonth).keys()].map((index) => {
     const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
     return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);
   });
-  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {
+  const currentMonthDates = [...Array(monthDays).keys()].map((index) => {
     const day = index + 1;
     return new Date(year, month - 1, day);
   });
-  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+  const nextMonthDates = [...Array(daysFromNextMonth).keys()].map((index) => {
     const day = index + 1;
     return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);
   });

package/dist/cjs/Carousel/Carousel.cjs CHANGED Viewed

@@ -6,7 +6,6 @@ const useCarousel = require("embla-carousel-react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
-const helpers = require("../utils/helpers.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const CarouselControls = require("./CarouselControls.cjs");
 const CarouselThumbnails = require("./CarouselThumbnails.cjs");
@@ -51,7 +50,7 @@ const HvCarousel = (props) => {
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = React.useRef(null);
   const [isFullscreen, setIsFullscreen] = React.useState(false);
-  const isDs3 = activeTheme?.name === "ds3";
+  const isDs3 = activeTheme?.base === "ds3";
   const actionsPosition = isDs3 ? "header" : "controls";
   const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
   const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
@@ -93,7 +92,7 @@ const HvCarousel = (props) => {
   React.useEffect(() => {
     if (!controller) return;
     controller.reInit();
-    setSelectedIndex((currentIndex) => helpers.clamp(currentIndex, numSlides));
+    setSelectedIndex((currentIndex) => uikitReactUtils.clamp(currentIndex, numSlides));
   }, [numSlides, controller]);
   const handleFullscreen = (event) => {
     onFullscreen?.(event, !isFullscreen);

package/dist/cjs/Pagination/Pagination.cjs CHANGED Viewed

@@ -6,7 +6,6 @@ const Hidden = require("@mui/material/Hidden");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
-const helpers = require("../utils/helpers.cjs");
 const setId = require("../utils/setId.cjs");
 const Pagination_styles = require("./Pagination.styles.cjs");
 const Select = require("./Select.cjs");
@@ -70,7 +69,7 @@ const HvPagination = (props) => {
   const [pageInput, setPageInput] = React.useState(page);
   const changePage = React.useCallback(
     (newPage) => {
-      const safePage = Number.isNaN(newPage) ? page : helpers.clamp(newPage, pages - 1);
+      const safePage = Number.isNaN(newPage) ? page : uikitReactUtils.clamp(newPage, pages - 1);
       onPageChange?.(safePage);
       setPageInput(safePage);
     },

package/dist/cjs/ProgressBar/ProgressBar.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const helpers = require("../utils/helpers.cjs");
 const ProgressBar_styles = require("./ProgressBar.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const HvProgressBar = (props) => {
@@ -16,7 +15,7 @@ const HvProgressBar = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvProgressBar", props);
   const { classes, cx } = ProgressBar_styles.useClasses(classesProp);
-  const clampedValue = helpers.clamp(value, 100);
+  const clampedValue = uikitReactUtils.clamp(value, 100);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/cjs/Table/TableBody/TableBody.cjs CHANGED Viewed

@@ -26,7 +26,7 @@ const HvTableBody = React.forwardRef(
     const bodyRef = React.useRef(null);
     const handleRef = useForkRef.useForkRef(externalRef, bodyRef);
     const Component = component || tableContext?.components?.TBody || defaultComponent;
-    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.default.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         className: cx(classes.root, className),

package/dist/cjs/Table/TableCell/TableCell.cjs CHANGED Viewed

@@ -31,7 +31,7 @@ const HvTableCell = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvTableCell", props);
     const { classes, cx } = TableCell_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
     const Component = component || tableContext?.components?.Td || defaultComponent;
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Table/TableHead/TableHead.cjs CHANGED Viewed

@@ -14,7 +14,7 @@ const HvTableHead = React.forwardRef(
     const { classes, cx } = TableHead_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
     const Component = component || tableContext?.components?.THead || defaultComponent;
-    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.default.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         className: cx(

package/dist/cjs/Table/TableHeader/TableHeader.cjs CHANGED Viewed

@@ -43,7 +43,7 @@ const HvTableHeader = React.forwardRef(
     const { classes, cx, css } = TableHeader_styles.useClasses(classesProp);
     const { colors } = uikitReactUtils.useTheme();
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
     const scope = scopeProp ?? (isHeadCell ? "col" : "row");

package/dist/cjs/Table/TableRow/TableRow.cjs CHANGED Viewed

@@ -21,7 +21,7 @@ const HvTableRow = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvTableRow", props);
     const { classes, cx } = TableRow_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = tableSectionContext?.type || "body";
     const isList = tableContext.variant === "listrow";
     const Component = component || tableContext?.components?.Tr || defaultComponent;

package/dist/cjs/Table/TableSectionContext.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const TableSectionContext = React.createContext({});
-exports.default = TableSectionContext;
+exports.TableSectionContext = TableSectionContext;

package/dist/cjs/Typography/Typography.cjs CHANGED Viewed

@@ -52,7 +52,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
   } = uikitReactUtils.useDefaultProps("HvTypography", props);
   const { classes, cx } = Typography_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactUtils.useTheme();
-  const variant = utils.mapVariant(variantProp, activeTheme?.name);
+  const variant = utils.mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,

package/dist/cjs/providers/ThemeProvider.cjs CHANGED Viewed

@@ -59,7 +59,36 @@ const HvThemeProvider = ({
     ]
   );
   const muiTheme = React.useMemo(() => {
+    const colors = activeTheme.colors.modes[colorMode];
     return styles.createTheme({
+      spacing: activeTheme.space.base,
+      typography: {
+        fontFamily: activeTheme.fontFamily.body
+      },
+      palette: {
+        primary: { main: colors.primary },
+        success: { main: colors.positive },
+        warning: { main: colors.warning },
+        error: { main: colors.negative },
+        info: { main: colors.primary },
+        text: {
+          primary: colors.secondary,
+          secondary: colors.secondary_80,
+          disabled: colors.secondary_60
+        },
+        background: {
+          default: colors.atmo2,
+          paper: colors.atmo1
+        },
+        divider: colors.atmo4,
+        action: {
+          active: colors.primary,
+          hover: colors.primary_80,
+          selected: colors.primary_80,
+          disabled: colors.secondary_60,
+          disabledBackground: colors.atmo3
+        }
+      },
       components: {
         MuiButtonBase: {
           defaultProps: {
@@ -67,11 +96,9 @@ const HvThemeProvider = ({
           }
         }
       },
-      breakpoints: {
-        ...activeTheme.breakpoints
-      }
+      breakpoints: activeTheme.breakpoints
     });
-  }, [activeTheme.breakpoints]);
+  }, [activeTheme, colorMode]);
   const emotionCacheValue = React.useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]

package/dist/cjs/utils/helpers.cjs CHANGED Viewed

@@ -9,9 +9,6 @@ const range = (length, start = 0) => {
 const capitalize = (string = "") => {
   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
 };
-const clamp = (value, max = 100, min = 0) => {
-  return Math.min(Math.max(value, min), max);
-};
 function isEqual(obj1, obj2) {
   if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {
     return obj1 === obj2;
@@ -26,7 +23,6 @@ function isEqual(obj1, obj2) {
   return true;
 }
 exports.capitalize = capitalize;
-exports.clamp = clamp;
 exports.isEqual = isEqual;
 exports.range = range;
 exports.uniqueId = uniqueId;

package/dist/esm/BaseSwitch/BaseSwitch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" \| \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvBaseSwitchClasses;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n The input name.\n /\n name?: string;\n /\n The value of the input.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\n /\n Indicates that user input is required.\n /\n required?: boolean;\n /\n Indicates that the input is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the input is disabled.\n /\n disabled?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /\n Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n /\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /\n @ignore\n /\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/\n A Switch is <b>binary</b> and work as a digital on/off button.\n \n The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value],\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className,\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;~~AAuFO~~,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
1	+ {"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" \| \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvBaseSwitchClasses;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n The input name.\n /\n name?: string;\n /\n The value of the input.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\n /\n Indicates that user input is required.\n /\n required?: boolean;\n /\n Indicates that the input is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the input is disabled.\n /\n disabled?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /\n Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n /\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /\n @ignore\n /\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/\n A Switch is <b>binary</b> and work as a digital on/off button.\n \n The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value],\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className,\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AA2FO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Button/Button.js CHANGED Viewed

@@ -39,7 +39,7 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
   const { activeTheme } = useTheme();
   const variant = mapVariant(
     variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.name
+    activeTheme?.base
   );
   const handleClick = (e) => {
     if (disabled) return;

package/dist/esm/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport {\n staticClasses as buttonClasses,\n getColoringStyle,\n getIconSizeStyles,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the button. /\n variant?: HvButtonVariant;\n /* Whether the button is an icon-only button. /\n icon?: boolean;\n /* Whether the button is disabled or not. /\n disabled?: boolean;\n /* Class names to be applied. /\n className?: string;\n /* Element placed before the children. /\n startIcon?: React.ReactNode;\n /* Element placed after the children. /\n endIcon?: React.ReactNode;\n /* Button size. /\n size?: HvButtonSize;\n /* Button border radius. /\n radius?: HvButtonRadius;\n /* Defines the default colors of the button are forced into the icon. /\n overrideIconColors?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvButtonClasses;\n /* Whether the button is selected or not. /\n selected?: boolean;\n /\n Whether the button is focusable when disabled.\n * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n /\n focusableWhenDisabled?: boolean;\n }\n >;\n\n/\n Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n /\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: ~~string~~,\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (import.meta.env.DEV && mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n );\n }\n\n return mappedVariant \|\| variant;\n};\n\n/\n Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n classes: classesProp,\n children,\n variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n focusableWhenDisabled,\n onClick: onClickProp,\n onMouseDown: onMouseDownProp,\n selected,\n style,\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.~~name~~,\n );\n\n const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n if (disabled) return;\n onClickProp?.(e);\n };\n\n const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n if (disabled) return;\n onMouseDownProp?.(e);\n };\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" \|\|\n result[0] === \"semantic\" \|\|\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n const sizeStyles = useMemo(\n () =>\n size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n [size, icon],\n );\n\n return (\n <Component\n ref={ref}\n style={{\n ...style,\n \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n }}\n className={cx(\n classes.root,\n type && classes[type as keyof HvButtonClasses],\n color && css(getColoringStyle(color, type)),\n classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n sizeStyles && css(sizeStyles),\n className,\n )}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: !focusableWhenDisabled,\n tabIndex: focusableWhenDisabled ? 0 : -1,\n \"aria-disabled\": true,\n })}\n {...(selected && { \"aria-pressed\": selected })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n});\n"],"names":["HvButton"],"mappings":";;;;;;~~AAmEA~~,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBaseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport {\n staticClasses as buttonClasses,\n getColoringStyle,\n getIconSizeStyles,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the button. /\n variant?: HvButtonVariant;\n /* Whether the button is an icon-only button. /\n icon?: boolean;\n /* Whether the button is disabled or not. /\n disabled?: boolean;\n /* Class names to be applied. /\n className?: string;\n /* Element placed before the children. /\n startIcon?: React.ReactNode;\n /* Element placed after the children. /\n endIcon?: React.ReactNode;\n /* Button size. /\n size?: HvButtonSize;\n /* Button border radius. /\n radius?: HvButtonRadius;\n /* Defines the default colors of the button are forced into the icon. /\n overrideIconColors?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvButtonClasses;\n /* Whether the button is selected or not. /\n selected?: boolean;\n /\n Whether the button is focusable when disabled.\n * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n /\n focusableWhenDisabled?: boolean;\n }\n >;\n\n/\n Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n /\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: HvBaseTheme,\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (import.meta.env.DEV && mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n );\n }\n\n return mappedVariant \|\| variant;\n};\n\n/\n Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n classes: classesProp,\n children,\n variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n focusableWhenDisabled,\n onClick: onClickProp,\n onMouseDown: onMouseDownProp,\n selected,\n style,\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.base,\n );\n\n const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n if (disabled) return;\n onClickProp?.(e);\n };\n\n const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n if (disabled) return;\n onMouseDownProp?.(e);\n };\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" \|\|\n result[0] === \"semantic\" \|\|\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n const sizeStyles = useMemo(\n () =>\n size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n [size, icon],\n );\n\n return (\n <Component\n ref={ref}\n style={{\n ...style,\n \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n }}\n className={cx(\n classes.root,\n type && classes[type as keyof HvButtonClasses],\n color && css(getColoringStyle(color, type)),\n classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n sizeStyles && css(sizeStyles),\n className,\n )}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: !focusableWhenDisabled,\n tabIndex: focusableWhenDisabled ? 0 : -1,\n \"aria-disabled\": true,\n })}\n {...(selected && { \"aria-pressed\": selected })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AAoEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

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

@@ -2,7 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
   root: {
-    paddingBottom: theme.space.md,
+    paddingBottom: theme.space.sm,
     "&$invalid": {
       paddingBottom: 0
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;"}
1	+ {"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n root: {\n paddingBottom: theme.space.sm,\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":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;"}

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js CHANGED Viewed

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses(
     navigationContainer: {
       display: "flex",
       justifyContent: "space-between",
-      padding: theme.spacing("xs", 0)
+      paddingBottom: theme.space.xs
     },
     navigationMonth: {
       minWidth: "160px"

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvComposedNavigation\",\n {\n navigationContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n ~~padding~~: theme.~~spacing(\"~~xs~~\", 0)~~,\n },\n navigationMonth: {\n minWidth: \"160px\",\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,~~SAAS~~,MAAM,~~QAAQ,~~MAAM~~,CAAC~~;AAAA,~~IAChC~~;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AACF;"}
1	+ {"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvComposedNavigation\",\n {\n navigationContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n paddingBottom: theme.space.xs,\n },\n navigationMonth: {\n minWidth: \"160px\",\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe,MAAM,MAAM;AAAA,IAC7B;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AACF;"}

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
@@ -10,6 +10,7 @@ import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
+import { HvPanel } from "../../Panel/Panel.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvSingleCalendar = ({
   classes: classesProp,
@@ -97,7 +98,7 @@ const HvSingleCalendar = ({
       currentDate.toString()
     );
   };
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.calendarContainer, className), ...others, children: /* @__PURE__ */ jsxs("div", { id, className: classes.calendarWrapper, children: [
+  return /* @__PURE__ */ jsxs(HvPanel, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx(
       HvCalendarHeader,
       {
@@ -109,7 +110,7 @@ const HvSingleCalendar = ({
         invalidDateLabel
       }
     ),
-    calViewMode === "calendar" && /* @__PURE__ */ jsxs("div", { children: [
+    calViewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         HvComposedNavigation,
         {
@@ -144,7 +145,7 @@ const HvSingleCalendar = ({
         rangeMode
       }
     )
-  ] }) });
+  ] });
 };
 export {
   HvSingleCalendar,

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

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

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

@@ -1,20 +1,12 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
-  calendarContainer: {
-    width: "318px",
-    minHeight: "440px",
-    position: "relative"
-  },
-  calendarWrapper: {
-    overflow: "hidden",
-    backgroundColor: theme.colors.atmo1,
-    padding: theme.spacing("sm")
+  root: {
+    overflow: "hidden"
   },
   calendarGrid: {
-    display: "flex",
-    flexFlow: "wrap",
-    width: "280px",
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
       backgroundColor: theme.colors.atmo3,
       "& $startBookend": {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n ~~calendarContainer~~: {\n ~~width: \"318px\",\n minHeight: \"440px\",\n position: \"relative\",\n },\n calendarWrapper: {\n~~ overflow: \"hidden\",\n ~~backgroundColor: theme.colors.atmo1,\n padding: theme.spacing(\"sm\"),\n~~ },\n calendarGrid: {\n display: \"~~flex~~\",\n ~~flexFlow~~: \"~~wrap\",\n width:~~ \"~~280px\"~~,\n \"& $cellsInRange\": {\n backgroundColor: theme.colors.atmo3,\n \"& $startBookend\": {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n backgroundColor: theme.colors.atmo3,\n \"&:hover\": {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n },\n },\n \"&:hover $cellsInRange\": {\n backgroundColor: theme.colors.atmo3,\n \"& $startBookend\": {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n borderRight: \"inherit\",\n },\n },\n \"& $cellsInRange:hover\": {\n backgroundColor: theme.colors.atmo3,\n \"& $calendarDate\": {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n },\n \"& $cellsInRange:hover ~ $cellsInRange\": {\n backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n },\n \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n },\n },\n calendarDay: {\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n textAlign: \"center\",\n height: \"40px\",\n width: \"40px\",\n },\n navigationContainer: {},\n focusSelection: {},\n navigationMonth: {},\n calendarDate: {},\n calendarDateNotInMonth: {},\n calendarDateSelected: {},\n calendarDateInvalid: {},\n calendarDateInSelectionRange: {},\n startBookend: {},\n endBookend: {},\n cellsInRange: {\n backgroundColor: theme.colors.atmo3,\n },\n cellsOutsideRange: {},\n cellContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,~~mBAAmB~~;AAAA,~~IACjB~~,~~OAAO;AAAA,IACP,WAAW;AAAA,IACX,~~UAAU;AAAA,EACZ;AAAA,EACA,~~iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,IAAI;AAAA,EAC7B;AAAA,EACA,~~cAAc;AAAA,IACZ,SAAS;AAAA,IACT,~~UAAU~~;AAAA,~~IACV~~,~~OAAO;AAAA,IACP,~~mBAAmB;AAAA,MACjB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,WAAW;AAAA,UACT,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,MAClD;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AAAA,EACf,wBAAwB,CAAC;AAAA,EACzB,sBAAsB,CAAC;AAAA,EACvB,qBAAqB,CAAC;AAAA,EACtB,8BAA8B,CAAC;AAAA,EAC/B,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,eAAe,CAAC;AAClB,CAAC;"}
1	+ {"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../src/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n root: {\n overflow: \"hidden\",\n },\n calendarGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(7, 1fr)\",\n \"& $cellsInRange\": {\n backgroundColor: theme.colors.atmo3,\n \"& $startBookend\": {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n backgroundColor: theme.colors.atmo3,\n \"&:hover\": {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n },\n },\n \"&:hover $cellsInRange\": {\n backgroundColor: theme.colors.atmo3,\n \"& $startBookend\": {\n borderLeft: `1px solid ${theme.colors.secondary}`,\n borderRight: \"inherit\",\n },\n },\n \"& $cellsInRange:hover\": {\n backgroundColor: theme.colors.atmo3,\n \"& $calendarDate\": {\n borderRight: `1px solid ${theme.colors.secondary}`,\n },\n },\n \"& $cellsInRange:hover ~ $cellsInRange\": {\n backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n },\n \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n },\n },\n calendarDay: {\n display: \"flex\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n textAlign: \"center\",\n height: \"40px\",\n width: \"40px\",\n },\n navigationContainer: {},\n focusSelection: {},\n navigationMonth: {},\n calendarDate: {},\n calendarDateNotInMonth: {},\n calendarDateSelected: {},\n calendarDateInvalid: {},\n calendarDateInSelectionRange: {},\n startBookend: {},\n endBookend: {},\n cellsInRange: {\n backgroundColor: theme.colors.atmo3,\n },\n cellsOutsideRange: {},\n cellContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,MACjB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,WAAW;AAAA,UACT,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,QAC/C,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,OAAO,SAAS;AAAA,MAClD;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA;AAAA,IAChC;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AAAA,EACf,wBAAwB,CAAC;AAAA,EACzB,sBAAsB,CAAC;AAAA,EACvB,qBAAqB,CAAC;AAAA,EACtB,8BAA8B,CAAC;AAAA,EAC/B,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,eAAe,CAAC;AAClB,CAAC;"}