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

@hitachivantara/uikit-react-core 5.82.4 → 5.83.0

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

Files changed (161) hide show

package/dist/cjs/Tag/Tag.styles.cjs CHANGED Viewed

@@ -1,88 +1,74 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Chip = require("@mui/material/Chip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "default",
     color: uikitStyles.theme.colors.base_dark,
-    [`& .${Chip.chipClasses.avatar}`]: {
-      width: 12,
-      height: 12,
-      marginLeft: 2,
-      marginRight: 0
+    backgroundColor: "var(--bgColor)",
+    height: 16,
+    borderRadius: 0,
+    maxWidth: 180,
+    whiteSpace: "nowrap",
+    ":hover, :focus": {
+      backgroundColor: "var(--bgColor)"
     }
   },
-  chipRoot: {
-    [`&.${Chip.chipClasses.root}`]: {
-      height: 16,
-      borderRadius: 0,
-      maxWidth: 180,
-      fontFamily: uikitStyles.theme.fontFamily.body,
-      "&:focus-visible": {
-        backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
-      },
-      "&$categorical": {
-        borderRadius: 8,
-        "& $label": {
-          color: uikitStyles.theme.colors.secondary
-        }
-      }
-    },
-    "&$disabled": {
-      opacity: 1,
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      "& $label": {
-        color: uikitStyles.theme.colors.secondary_60
-      }
-    },
-    [`& .${Chip.chipClasses.label}`]: {
-      paddingLeft: 4,
-      paddingRight: 4,
-      ...uikitStyles.theme.typography.caption2,
-      color: "currentcolor"
+  categorical: {
+    borderRadius: 8,
+    "& $label": {
+      color: uikitStyles.theme.colors.secondary
+    }
+  },
+  disabled: {
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    ":hover, :focus": {
+      backgroundColor: uikitStyles.theme.colors.atmo3
     },
-    [`& .${Chip.chipClasses.deleteIcon}`]: {
-      margin: 0,
-      width: 16,
-      height: 16,
-      padding: 0,
-      color: "currentColor",
-      "& svg .color0": {
-        fill: "currentcolor"
-      },
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-        color: "unset"
-      },
-      "&:focus": {
-        ...focusUtils.outlineStyles,
-        borderRadius: 0
-      },
-      "&:focus:not(:focus-visible)": {
-        outline: "0 !important",
-        boxShadow: "none !important"
-      }
+    "& $label": {
+      color: uikitStyles.theme.colors.secondary_60
     }
   },
-  disabled: {},
-  clickable: {
-    cursor: "pointer",
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles
+  label: {
+    padding: uikitStyles.theme.spacing(0, "4px"),
+    color: "inherit"
+  },
+  deleteIcon: {
+    width: 16,
+    height: 16,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
-  categorical: {},
-  label: {},
-  deleteIcon: {},
+  selected: {},
+  clickable: {
+    cursor: "pointer"
+  },
+  icon: {
+    width: 12,
+    height: 12,
+    marginLeft: 2
+  },
+  /** @deprecated use `root` instead */
+  chipRoot: {},
+  /** @deprecated unused */
   // TODO: redundant - use deleteIcon. remove in v6
+  /** @deprecated */
   button: {},
+  /** @deprecated */
   tagButton: {},
   // TODO: redundant - use $clickable or :not($disabled). remove in v6
+  /** @deprecated */
   focusVisible: {},
+  /** @deprecated */
   disabledDeleteIcon: {},
+  /** @deprecated */
   categoricalFocus: {},
+  /** @deprecated */
   categoricalDisabled: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/TagsInput/TagsInput.cjs CHANGED Viewed

@@ -387,12 +387,9 @@ const HvTagsInput = React.forwardRef(
                         Tag.HvTag,
                         {
                           label,
-                          className: cx({
+                          className: cx(classes.chipRoot, {
                             [classes.tagSelected]: i === tagCursorPos
                           }),
-                          classes: {
-                            chipRoot: classes.chipRoot
-                          },
                           type,
                           ...!(readOnly || disabled || type === "categorical") && {
                             onDelete: (event) => onDeleteTagHandler(event, i)

package/dist/cjs/TagsInput/TagsInput.styles.cjs CHANGED Viewed

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Chip = require("@mui/material/Chip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
@@ -25,9 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   root: { display: "inline-block", width: "100%" },
   chipRoot: {
-    [`&.${Chip.chipClasses.root}`]: {
-      maxWidth: "none"
-    }
+    maxWidth: "none"
   },
   disabled: {
     "& $tagsList": {

package/dist/cjs/TextArea/TextArea.cjs CHANGED Viewed

@@ -83,7 +83,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      value,
+      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -115,7 +115,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const onContainerBlurHandler = (event) => {
     setFocused(false);
     const inputValidity = performValidation();
-    onBlur?.(event, value, inputValidity);
+    onBlur?.(event, String(value), inputValidity);
   };
   const onChangeHandler = (event, currentValue) => {
     isDirty.current = true;
@@ -126,7 +126,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const onFocusHandler = (event) => {
     setFocused(true);
     setValidationState(utils$1.validationStates.standBy);
-    onFocus?.(event, value);
+    onFocus?.(event, String(value));
   };
   const isScrolledDown = React.useCallback(() => {
     const el = inputRef.current;
@@ -221,7 +221,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
             id: setId.setId(elementId, "charCounter"),
             className: classes.characterCounter,
             separator: middleCountLabel,
-            currentCharQuantity: value.length,
+            currentCharQuantity: String(value).length,
             maxCharQuantity,
             ...countCharProps
           }

package/dist/cjs/TimeAgo/TimeAgo.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("../Calendar/utils.cjs");
 const generic = require("../types/generic.cjs");
 const TimeAgo_styles = require("./TimeAgo.styles.cjs");
 const useTimeAgo = require("./useTimeAgo.cjs");
@@ -11,7 +12,7 @@ const HvTimeAgo = generic.fixedForwardRef(function HvTimeAgo2(props, ref) {
     classes: classesProp,
     className,
     timestamp,
-    locale = "en",
+    locale = utils.DEFAULT_LOCALE,
     component: Component = Typography.HvTypography,
     emptyElement = "—",
     disableRefresh = false,

package/dist/cjs/TimePicker/TimePicker.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils$1 = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
@@ -51,7 +52,7 @@ const HvTimePicker = React.forwardRef(
       timeFormat,
       showSeconds,
       disableExpand,
-      locale = "en",
+      locale = utils$1.DEFAULT_LOCALE,
       onToggle,
       onChange,
       // misc properties:

package/dist/cjs/index.cjs CHANGED Viewed

@@ -33,19 +33,6 @@ const theme = require("./utils/theme.cjs");
 const useSavedState = require("./utils/useSavedState.cjs");
 const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
 const helpers = require("./utils/helpers.cjs");
-const useTable = require("./Table/hooks/useTable.cjs");
-const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
-const useSortBy = require("./Table/hooks/useSortBy.cjs");
-const useSticky = require("./Table/hooks/useSticky.cjs");
-const usePagination = require("./Table/hooks/usePagination.cjs");
-const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
-const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
-const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
-const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
-const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
-const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
-const useFilters = require("./Table/hooks/useFilters.cjs");
-const useRowState = require("./Table/hooks/useRowState.cjs");
 const utils = require("./Typography/utils.cjs");
 const Typography_styles = require("./Typography/Typography.styles.cjs");
 const Typography = require("./Typography/Typography.cjs");
@@ -245,6 +232,7 @@ const Switch_styles = require("./Switch/Switch.styles.cjs");
 const Switch = require("./Switch/Switch.cjs");
 const Tab_styles = require("./Tab/Tab.styles.cjs");
 const Tab = require("./Tab/Tab.cjs");
+const useHvTable = require("./Table/hooks/useHvTable.cjs");
 const Table_styles = require("./Table/Table.styles.cjs");
 const Table = require("./Table/Table.cjs");
 const TableContainer_styles = require("./Table/TableContainer/TableContainer.styles.cjs");
@@ -259,13 +247,23 @@ const TableRow_styles = require("./Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./Table/TableRow/TableRow.cjs");
 const TableCell_styles = require("./Table/TableCell/TableCell.styles.cjs");
 const TableCell = require("./Table/TableCell/TableCell.cjs");
+const useHvTableStyles = require("./Table/hooks/useHvTableStyles.cjs");
+const useHvSortBy = require("./Table/hooks/useHvSortBy.cjs");
+const useHvSticky = require("./Table/hooks/useHvSticky.cjs");
+const useHvPagination = require("./Table/hooks/useHvPagination.cjs");
+const useHvRowSelection = require("./Table/hooks/useHvRowSelection.cjs");
+const useHvBulkActions = require("./Table/hooks/useHvBulkActions.cjs");
+const useHvRowExpand = require("./Table/hooks/useHvRowExpand.cjs");
+const useHvHeaderGroups = require("./Table/hooks/useHvHeaderGroups.cjs");
+const useHvResizeColumns = require("./Table/hooks/useHvResizeColumns.cjs");
+const useHvGlobalFilter = require("./Table/hooks/useHvGlobalFilter.cjs");
+const useHvFilters = require("./Table/hooks/useHvFilters.cjs");
+const useHvRowState = require("./Table/hooks/useHvRowState.cjs");
 const renderers = require("./Table/renderers/renderers.cjs");
-const DateColumnCell = require("./Table/renderers/DateColumnCell/DateColumnCell.cjs");
-const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell/DropdownColumnCell.cjs");
-const ProgressColumnCell = require("./Table/renderers/ProgressColumnCell/ProgressColumnCell.cjs");
-const SwitchColumnCell = require("./Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs");
-const fallbacks = require("./Table/utils/fallbacks.cjs");
-const utils$1 = require("./Table/utils/utils.cjs");
+const DateColumnCell = require("./Table/renderers/DateColumnCell.cjs");
+const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell.cjs");
+const ProgressColumnCell = require("./Table/renderers/ProgressColumnCell.cjs");
+const SwitchColumnCell = require("./Table/renderers/SwitchColumnCell.cjs");
 const Tabs_styles = require("./Tabs/Tabs.styles.cjs");
 const Tabs = require("./Tabs/Tabs.cjs");
 const Tag_styles = require("./Tag/Tag.styles.cjs");
@@ -369,6 +367,7 @@ exports.outlineStyles = focusUtils.outlineStyles;
 exports.getComponentName = getComponentName.getComponentName;
 exports.hexToRgbA = hexToRgbA.hexToRgbA;
 exports.iconVariant = iconVariant.iconVariant;
+exports.isDeleteKey = keyboardUtils.isDeleteKey;
 exports.isKey = keyboardUtils.isKey;
 exports.isOneOfKeys = keyboardUtils.isOneOfKeys;
 exports.multiSelectionEventHandler = multiSelectionEventHandler.multiSelectionEventHandler;
@@ -384,33 +383,6 @@ exports.setElementAttrs = theme.setElementAttrs;
 exports.useSavedState = useSavedState.useSavedState;
 exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
 exports.uniqueId = helpers.uniqueId;
-exports.useHvData = useTable.default;
-exports.useHvTable = useTable.default;
-exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
-exports.useHvTableStyles = useTableStyles.default;
-exports.useHvSortBy = useSortBy.default;
-exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
-exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
-exports.useHvTableSticky = useSticky.default;
-exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
-exports.useHvPagination = usePagination.default;
-exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
-exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
-exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
-exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
-exports.prepareRow = useRowSelection.prepareRow;
-exports.reducer = useRowSelection.reducer;
-exports.useHvRowSelection = useRowSelection.default;
-exports.useInstance = useRowSelection.useInstance;
-exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
-exports.useHvBulkActions = useBulkActions.default;
-exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
-exports.useHvRowExpand = useRowExpand.default;
-exports.useHvHeaderGroups = useHeaderGroups.default;
-exports.useHvResizeColumns = useResizeColumns.default;
-exports.useHvGlobalFilter = useGlobalFilter.default;
-exports.useHvFilters = useFilters.default;
-exports.useHvRowState = useRowState.default;
 exports.typographyVariants = utils.typographyVariants;
 exports.typographyClasses = Typography_styles.staticClasses;
 exports.HvTypography = Typography.HvTypography;
@@ -617,6 +589,8 @@ exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
 exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = Tab.HvTab;
+exports.useHvData = useHvTable.useHvTable;
+exports.useHvTable = useHvTable.useHvTable;
 exports.tableClasses = Table_styles.staticClasses;
 exports.HvTable = Table.HvTable;
 exports.tableContainerClasses = TableContainer_styles.staticClasses;
@@ -631,11 +605,31 @@ exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
 exports.tableCellClasses = TableCell_styles.staticClasses;
 exports.HvTableCell = TableCell.HvTableCell;
+exports.useHvTableStyles = useHvTableStyles.useHvTableStyles;
+exports.useHvSortBy = useHvSortBy.useHvSortBy;
+exports.useHvTableSticky = useHvSticky.useHvTableSticky;
+exports.defaultGetHvPaginationProps = useHvPagination.defaultGetHvPaginationProps;
+exports.useHvPagination = useHvPagination.useHvPagination;
+exports.defaultGetToggleAllPageRowsSelectedProps = useHvRowSelection.defaultGetToggleAllPageRowsSelectedProps;
+exports.defaultGetToggleAllRowsSelectedProps = useHvRowSelection.defaultGetToggleAllRowsSelectedProps;
+exports.defaultGetToggleRowSelectedProps = useHvRowSelection.defaultGetToggleRowSelectedProps;
+exports.useHvRowSelection = useHvRowSelection.useHvRowSelection;
+exports.useHvBulkActions = useHvBulkActions.useHvBulkActions;
+exports.CellWithExpandButton = useHvRowExpand.CellWithExpandButton;
+exports.useHvRowExpand = useHvRowExpand.useHvRowExpand;
+exports.useHvHeaderGroups = useHvHeaderGroups.useHvHeaderGroups;
+exports.useHvResizeColumns = useHvResizeColumns.useHvResizeColumns;
+exports.useHvGlobalFilter = useHvGlobalFilter.useHvGlobalFilter;
+exports.useHvFilters = useHvFilters.useHvFilters;
+exports.useHvRowState = useHvRowState.useHvRowState;
 exports.hvDateColumn = renderers.hvDateColumn;
 exports.hvDropdownColumn = renderers.hvDropdownColumn;
 exports.hvExpandColumn = renderers.hvExpandColumn;
+exports.hvNodeFallback = renderers.hvNodeFallback;
 exports.hvNumberColumn = renderers.hvNumberColumn;
+exports.hvNumberFallback = renderers.hvNumberFallback;
 exports.hvProgressColumn = renderers.hvProgressColumn;
+exports.hvStringFallback = renderers.hvStringFallback;
 exports.hvSwitchColumn = renderers.hvSwitchColumn;
 exports.hvTagColumn = renderers.hvTagColumn;
 exports.hvTextColumn = renderers.hvTextColumn;
@@ -644,10 +638,6 @@ exports.HvDropdownColumnCell = DropdownColumnCell.HvDropdownColumnCell;
 exports.HvProgressColumnCell = ProgressColumnCell.HvProgressColumnCell;
 exports.normalizeProgressBar = ProgressColumnCell.normalizeProgressBar;
 exports.HvSwitchColumnCell = SwitchColumnCell.HvSwitchColumnCell;
-exports.hvNodeFallback = fallbacks.hvNodeFallback;
-exports.hvNumberFallback = fallbacks.hvNumberFallback;
-exports.hvStringFallback = fallbacks.hvStringFallback;
-exports.getBorderStyles = utils$1.getBorderStyles;
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = Tabs.HvTabs;
 exports.tagClasses = Tag_styles.staticClasses;

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

@@ -25,5 +25,9 @@ const isKey = (event, keyCode) => {
 const isOneOfKeys = (event, keys) => {
   return keys.some((key) => isKey(event, key));
 };
+function isDeleteKey(event) {
+  return isOneOfKeys(event, ["Backspace", "Delete"]);
+}
+exports.isDeleteKey = isDeleteKey;
 exports.isKey = isKey;
 exports.isOneOfKeys = isOneOfKeys;

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

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { css, Global } from "@emotion/react";
-import MuiInput from "@mui/material/Input";
+import MuiInputBase from "@mui/material/InputBase";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -72,9 +72,6 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
     localInvalid,
     id
   );
-  const onChangeHandler = (event) => {
-    onChange?.(event, event.target.value);
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Global, { styles: baseInputStyles }),
     /* @__PURE__ */ jsxs(
@@ -88,7 +85,7 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
         }),
         children: [
           /* @__PURE__ */ jsx(
-            MuiInput,
+            MuiInputBase,
             {
               id,
               name: formElementProps.name,
@@ -98,7 +95,7 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
               placeholder,
               readOnly: !!formElementProps.readOnly,
               disabled: formElementProps.disabled,
-              onChange: onChangeHandler,
+              onChange: (event) => onChange?.(event, event.target.value),
               className: cx({
                 [classes.inputRootInvalid]: localInvalid,
                 [classes.inputRootReadOnly]: formElementProps.readOnly

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport ~~MuiInput~~, { ~~InputProps as MuiInputProps } from \"@mui/material/Input\";\nimport {\n~~ InputBaseProps~~,\n InputBaseComponentProps~~ ~~as MuiInputBaseComponentProps,\n~~} from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n buildAriaPropsFromContext,\n buildFormElementPropsFromContext,\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n WebkitTextFillColor: theme.colors.secondary,\n },\n\n // Clears number input up/down arrows in Chrome and Firefox\n \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n WebkitAppearance: \"none\",\n margin: 0,\n },\n \"input[type=number]\": {\n MozAppearance: \"textfield\",\n },\n\n // Clears time input clock in Chrome\n \"input::-webkit-calendar-picker-indicator\": {\n display: \"none\",\n },\n\n // Clears search input clear button in Chrome\n \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n {\n display: \"none\",\n },\n});\n\nexport interface HvBaseInputProps\n extends Omit~~<MuiInputProps,~~ \"onChange\" \| \"classes\" \| \"ref\"> {\n /** The input name. /\n name?: string;\n /* The value of the input, when controlled. /\n value?: ~~string~~;\n /* The initial value of the input, when uncontrolled. /\n defaultValue?: ~~string~~;\n /* If `true` the input is disabled. /\n disabled?: boolean;\n /* Indicates that the input is not editable. /\n readOnly?: boolean;\n /* If true, the input element will be required. /\n required?: boolean;\n /* The function that will be executed onChange, allows modification of the input,\n * it receives the value. If a new value should be presented it must returned it. /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* The input type. /\n type?: string;\n /* Label inside the input used to help user. /\n placeholder?: string;\n /* If true, a textarea element will be rendered. /\n multiline?: boolean;\n /* If true and multiline is also true the textarea element will be resizable. /\n resizable?: boolean;\n /* Denotes if the input is in an invalid state. /\n invalid?: boolean;\n ~~/* Attributes applied to the input element. /\~~n ~~inputProps?:~~ MuiInputBaseComponentProps;\n /* Allows passing a ref to the underlying input /\n inputRef?: InputBaseProps[\"inputRef\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvBaseInputClasses;\n}\n\n/\n An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n // no-indent\n ~~unknown,\~~n HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n const {\n classes: classesProp,\n className = \"\",\n id,\n name,\n value,\n defaultValue,\n required,\n readOnly,\n disabled,\n onChange,\n type = \"text\",\n placeholder,\n multiline,\n resizable,\n invalid,\n inputRef,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvBaseInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const formElementContext = useContext(HvFormElementContext);\n const formElementProps = buildFormElementPropsFromContext(\n name,\n disabled,\n readOnly,\n required,\n formElementContext,\n );\n\n const forkedRef = useForkRef(ref, inputRef);\n\n const localInvalid = invalid \|\| formElementProps.status === \"invalid\";\n\n const formElementDescriptorsContext = useContext(\n HvFormElementDescriptorsContext,\n );\n const ariaProps = buildAriaPropsFromContext(\n inputProps,\n formElementDescriptorsContext,\n localInvalid,\n id,\n );\n\n ~~const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n onChange?.(event, event.target.value);\n };\n\n~~ return (\n <>\n <Global styles={baseInputStyles} />\n <div\n className={cx(classes.root, className, {\n [classes.disabled]: formElementProps.disabled,\n [classes.invalid]: localInvalid,\n [classes.resizable]: multiline && resizable,\n [classes.readOnly]: formElementProps.readOnly,\n })}\n >\n <~~MuiInput~~\n id={id}\n name={formElementProps.name}\n value={value}\n defaultValue={defaultValue}\n type={type}\n placeholder={placeholder}\n readOnly={!!formElementProps.readOnly}\n disabled={formElementProps.disabled}\n onChange={~~onChangeHandler~~}\n className={cx({\n [classes.inputRootInvalid]: localInvalid,\n [classes.inputRootReadOnly]: formElementProps.readOnly,\n })}\n classes={{\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n input: cx(classes.input, {\n [classes.inputResizable]: !formElementProps.disabled && resizable,\n [classes.inputDisabled]: formElementProps.disabled,\n [classes.inputReadOnly]: formElementProps.readOnly,\n }),\n }}\n inputProps={{\n // Avoid the required attribute at the root node\n required: formElementProps.required,\n ...inputProps,\n ...ariaProps,\n }}\n inputRef={forkedRef}\n multiline={multiline}\n rows={10}\n {...others}\n />\n {!multiline && (\n <div role=\"presentation\" className={classes.inputBorderContainer} />\n )}\n </div>\n </>\n );\n});\n"],"names":["emotionCss","HvBaseInput"],"mappings":";;;;;;;;;;;~~AA2BA~~,MAAM,kBAAkBA,IAAW;AAAA,EACjC,0BAA0B;AAAA,IACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,IACrD,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA;AAAA,EAGA,qEAAqE;AAAA,IACnE,kBAAkB;AAAA,IAClB,QAAQ;AAAA,EACV;AAAA,EACA,sBAAsB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA;AAAA,EAGA,4CAA4C;AAAA,IAC1C,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,sJACE;AAAA,IACE,SAAS;AAAA,EAAA;AAEf,CAAC;AA4CM,MAAM,cAAc,WAIzB,SAASC,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,eAAe,WAAW,iBAAiB,WAAW;AAE5D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;~~AAEM,QAAA,kBAA6C,CAAC,UAAU;AACjD,eAAA,OAAO,MAAM,OAAO,KAAK;AAAA,EACtC;~~AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,gBAAiB,CAAA;AAAA,IACjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,UACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG,aAAa;AAAA,UAClC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QAAA,CACtC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAM,iBAAiB;AAAA,cACvB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,cAC7B,UAAU,iBAAiB;AAAA,cAC3B,UAAU;AAAA,~~cACV~~,WAAW,GAAG;AAAA,gBACZ,CAAC,QAAQ,gBAAgB,GAAG;AAAA,gBAC5B,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,cAAA,CAC/C;AAAA,cACD,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,SAAS,QAAQ;AAAA,gBACjB,UAAU,QAAQ;AAAA,gBAClB,WAAW,QAAQ;AAAA,gBACnB,OAAO,GAAG,QAAQ,OAAO;AAAA,kBACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,kBACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,kBAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,gBAC3C,CAAA;AAAA,cACH;AAAA,cACA,YAAY;AAAA;AAAA,gBAEV,UAAU,iBAAiB;AAAA,gBAC3B,GAAG;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA,MAAM;AAAA,cACL,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,CAAC,aACC,oBAAA,OAAA,EAAI,MAAK,gBAAe,WAAW,QAAQ,qBAAsB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEtE,GACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport MuiInputBase, { InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n buildAriaPropsFromContext,\n buildFormElementPropsFromContext,\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n WebkitTextFillColor: theme.colors.secondary,\n },\n\n // Clears number input up/down arrows in Chrome and Firefox\n \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n WebkitAppearance: \"none\",\n margin: 0,\n },\n \"input[type=number]\": {\n MozAppearance: \"textfield\",\n },\n\n // Clears time input clock in Chrome\n \"input::-webkit-calendar-picker-indicator\": {\n display: \"none\",\n },\n\n // Clears search input clear button in Chrome\n \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n {\n display: \"none\",\n },\n});\n\nexport interface HvBaseInputProps\n extends Omit<\n InputBaseProps,\n \"onChange\" \| \"classes\" \| \"ref\" \| \"color\" \| \"size\"\n > {\n /** The input name. /\n name?: string;\n /* The value of the input, when controlled. /\n value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n /* The initial value of the input, when uncontrolled. /\n defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n /* If `true` the input is disabled. /\n disabled?: boolean;\n /* Indicates that the input is not editable. /\n readOnly?: boolean;\n /* If true, the input element will be required. /\n required?: boolean;\n /* The function that will be executed onChange, allows modification of the input,\n * it receives the value. If a new value should be presented it must returned it. /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* If true, a textarea element will be rendered. /\n multiline?: boolean;\n /* If true and multiline is also true the textarea element will be resizable. /\n resizable?: boolean;\n /* Denotes if the input is in an invalid state. /\n invalid?: boolean;\n /\n Allows passing a ref to the underlying input\n * @deprecated Use `ref` directly instead\n * /\n inputRef?: InputBaseProps[\"inputRef\"];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvBaseInputClasses;\n}\n\n/\n An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n // no-indent\n React.ElementRef<\"input\">,\n HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n const {\n classes: classesProp,\n className = \"\",\n id,\n name,\n value,\n defaultValue,\n required,\n readOnly,\n disabled,\n onChange,\n type = \"text\",\n placeholder,\n multiline,\n resizable,\n invalid,\n inputRef,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvBaseInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const formElementContext = useContext(HvFormElementContext);\n const formElementProps = buildFormElementPropsFromContext(\n name,\n disabled,\n readOnly,\n required,\n formElementContext,\n );\n\n const forkedRef = useForkRef(ref, inputRef);\n\n const localInvalid = invalid \|\| formElementProps.status === \"invalid\";\n\n const formElementDescriptorsContext = useContext(\n HvFormElementDescriptorsContext,\n );\n const ariaProps = buildAriaPropsFromContext(\n inputProps,\n formElementDescriptorsContext,\n localInvalid,\n id,\n );\n\n return (\n <>\n <Global styles={baseInputStyles} />\n <div\n className={cx(classes.root, className, {\n [classes.disabled]: formElementProps.disabled,\n [classes.invalid]: localInvalid,\n [classes.resizable]: multiline && resizable,\n [classes.readOnly]: formElementProps.readOnly,\n })}\n >\n <MuiInputBase\n id={id}\n name={formElementProps.name}\n value={value}\n defaultValue={defaultValue}\n type={type}\n placeholder={placeholder}\n readOnly={!!formElementProps.readOnly}\n disabled={formElementProps.disabled}\n onChange={(event) => onChange?.(event, event.target.value)}\n className={cx({\n [classes.inputRootInvalid]: localInvalid,\n [classes.inputRootReadOnly]: formElementProps.readOnly,\n })}\n classes={{\n root: classes.inputRoot,\n focused: classes.inputRootFocused,\n disabled: classes.inputRootDisabled,\n multiline: classes.inputRootMultiline,\n input: cx(classes.input, {\n [classes.inputResizable]: !formElementProps.disabled && resizable,\n [classes.inputDisabled]: formElementProps.disabled,\n [classes.inputReadOnly]: formElementProps.readOnly,\n }),\n }}\n inputProps={{\n // Avoid the required attribute at the root node\n required: formElementProps.required,\n ...inputProps,\n ...ariaProps,\n }}\n inputRef={forkedRef}\n multiline={multiline}\n rows={10}\n {...others}\n />\n {!multiline && (\n <div role=\"presentation\" className={classes.inputBorderContainer} />\n )}\n </div>\n </>\n );\n});\n"],"names":["emotionCss","HvBaseInput"],"mappings":";;;;;;;;;;;AAuBA,MAAM,kBAAkBA,IAAW;AAAA,EACjC,0BAA0B;AAAA,IACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,IACrD,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA;AAAA,EAGA,qEAAqE;AAAA,IACnE,kBAAkB;AAAA,IAClB,QAAQ;AAAA,EACV;AAAA,EACA,sBAAsB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA;AAAA,EAGA,4CAA4C;AAAA,IAC1C,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,sJACE;AAAA,IACE,SAAS;AAAA,EAAA;AAEf,CAAC;AA4CM,MAAM,cAAc,WAIzB,SAASC,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,eAAe,WAAW,iBAAiB,WAAW;AAE5D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,gBAAiB,CAAA;AAAA,IACjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,UACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG,aAAa;AAAA,UAClC,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QAAA,CACtC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAM,iBAAiB;AAAA,cACvB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,cAC7B,UAAU,iBAAiB;AAAA,cAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,cACzD,WAAW,GAAG;AAAA,gBACZ,CAAC,QAAQ,gBAAgB,GAAG;AAAA,gBAC5B,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,cAAA,CAC/C;AAAA,cACD,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,SAAS,QAAQ;AAAA,gBACjB,UAAU,QAAQ;AAAA,gBAClB,WAAW,QAAQ;AAAA,gBACnB,OAAO,GAAG,QAAQ,OAAO;AAAA,kBACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,kBACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,kBAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,gBAC3C,CAAA;AAAA,cACH;AAAA,cACA,YAAY;AAAA;AAAA,gBAEV,UAAU,iBAAiB;AAAA,gBAC3B,GAAG;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA,MAAM;AAAA,cACL,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,CAAC,aACC,oBAAA,OAAA,EAAI,MAAK,gBAAe,WAAW,QAAQ,qBAAsB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEtE,GACF;AAEJ,CAAC;"}

package/dist/esm/ButtonBase/ButtonBase.styles.js CHANGED Viewed

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

package/dist/esm/ButtonBase/ButtonBase.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n root: {\n display: \"inline-flex\",\n cursor: \"pointer\",\n background: \"none\",\n padding: 0,\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n ~~backgroundColor: theme.colors.containerBackgroundHover,\n~~ },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n fontSize: \"inherit\",\n color: \"inherit\",\n },\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,~~WAAW~~;AAAA,~~MACT~~,iBAAiB,MAAM,OAAO;AAAA,~~IAChC~~;AAAA,~~IACA,mBAAmB~~;AAAA,~~MACjB~~,~~GAAG~~;AAAA,~~MACH~~,~~iBAAiB,MAAM,OAAO~~;AAAA,~~IAChC~~;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}
1	+ {"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n root: {\n display: \"inline-flex\",\n cursor: \"pointer\",\n background: \"none\",\n padding: 0,\n\n // Background color common for almost all variants\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n \":focus-visible\": {\n ...outlineStyles,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n fontSize: \"inherit\",\n color: \"inherit\",\n },\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}

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

@@ -4,14 +4,14 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Calendar.styles.js";
 import { staticClasses } from "./Calendar.styles.js";
-import { isRange } from "./utils.js";
-import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
+import { DEFAULT_LOCALE, isRange } from "./utils.js";
 import { HvFormElementContext, HvFormElementValueContext } from "../FormElement/context.js";
+import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
     id: idProp,
-    locale = "en-US",
+    locale = DEFAULT_LOCALE,
     value: valueProp,
     visibleMonth,
     visibleYear,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElementContext,\n HvFormElementValueContext,\n} from \"../FormElement\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /*\n Styles applied from the theme.\n /\n classes?: HvCalendarClasses;\n /\n Identifier.\n /\n id?: string;\n /\n The calendar locale~~. If undefined, it defaults to en-US\~~n \n /\n locale?: string;\n /*\n Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n /\n value?: DateRangeProp \| Date;\n /\n Controls the visible month of the Calendar\n /\n visibleMonth?: number;\n /\n Controls the visible year of the Calendar\n /\n visibleYear?: number;\n /\n Controls the visible month of the Calendar on the right side of the datepicker\n /\n rightVisibleMonth?: number;\n /\n Controls the visible year of the Calendar on the right side of the datepicker\n /\n rightVisibleYear?: 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 the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n /\n onVisibleDateChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n action: VisibilitySelectorActions,\n value?: Date \| DateRangeProp \| number,\n position?: \"left\" \| \"right\",\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 An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\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\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id: idProp,\n locale = ~~\"en-US\"~~,\n value: valueProp,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const context = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const value = valueProp ?? elementValue;\n const id = idProp ?? setId(context.id, \"single-calendar\");\n const rangeMode = isRange(value);\n const rightCalendarId = setId(id, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={value}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"right\");\n }}\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;~~AA+Ga~~,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,QAAQ,aAAa;AAC3B,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,iBAAiB;AAClD,QAAA,YAAY,QAAQ,KAAK;AACzB,QAAA,kBAAkB,MAAM,IAAI,uBAAuB;AACzD,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SAAS;AACZ,wBAAA,KAAK,MAAM,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAGF,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,OAAO;AAAA,QACpC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAAA,GAC/B;AAEJ;"}
1	+ {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n HvFormElementContext,\n HvFormElementValueContext,\n} from \"../FormElement\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { DEFAULT_LOCALE, isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /*\n Styles applied from the theme.\n /\n classes?: HvCalendarClasses;\n /\n The calendar locale.\n /\n locale?: string;\n /\n Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n /\n value?: DateRangeProp \| Date;\n /\n Controls the visible month of the Calendar\n /\n visibleMonth?: number;\n /\n Controls the visible year of the Calendar\n /\n visibleYear?: number;\n /\n Controls the visible month of the Calendar on the right side of the datepicker\n /\n rightVisibleMonth?: number;\n /\n Controls the visible year of the Calendar on the right side of the datepicker\n /\n rightVisibleYear?: 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 the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n /\n onVisibleDateChange?: (\n event:\n \| React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| undefined,\n action: VisibilitySelectorActions,\n value?: Date \| DateRangeProp \| number,\n position?: \"left\" \| \"right\",\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 An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\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\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id: idProp,\n locale = DEFAULT_LOCALE,\n value: valueProp,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const context = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const value = valueProp ?? elementValue;\n const id = idProp ?? setId(context.id, \"single-calendar\");\n const rangeMode = isRange(value);\n const rightCalendarId = setId(id, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={id}\n locale={locale}\n value={value}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"left\");\n }}\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={value}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) => {\n onInputChange?.(evt, date, \"right\");\n }}\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,QAAQ,aAAa;AAC3B,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,iBAAiB;AAClD,QAAA,YAAY,QAAQ,KAAK;AACzB,QAAA,kBAAkB,MAAM,IAAI,uBAAuB;AACzD,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SAAS;AACZ,wBAAA,KAAK,MAAM,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAGF,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,OAAO;AAAA,QACpC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAAA,GAC/B;AAEJ;"}