@hitachivantara/uikit-react-core 5.97.0 → 5.99.0

package/README.md

@@ -1,6 +1,6 @@
 # @hitachivantara/uikit-react-core
 
-UI Kit core React components for the NEXT Design System.
+UI Kit core React components.
 
 ## Installation
 

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -71,7 +71,10 @@ const HvAppSwitcherAction = ({
       disabled,
       className: cx(
         classes.root,
-        { [classes.disabled]: disabled, [classes.selected]: isSelected },
+        {
+          [classes.selected]: isSelected,
+          [classes.disabled]: disabled
+        },
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -59,10 +59,10 @@ const HvBaseRadio = React.forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
             [classes.focusVisible]: focusVisible,
             [classes.checked]: checked,
-            [classes.semantic]: semantic
+            [classes.semantic]: semantic,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

@@ -60,9 +60,9 @@ const HvBaseSwitch = React.forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
+            [classes.focusVisible]: focusVisible,
             [classes.readOnly]: readOnly,
-            [classes.focusVisible]: focusVisible
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/cjs/Card/Header/Header.styles.cjs

@@ -6,7 +6,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardHeade
   root: {
     position: "relative",
     padding: uikitStyles.theme.spacing("12px", "xs", "sm", "sm"),
-    gap: uikitStyles.theme.space.xs
+    gap: uikitStyles.theme.space.xs,
+    alignItems: "center",
+    display: "flex"
   },
   titleShort: {
     ...uikitStyles.theme.typography.label,

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -146,8 +146,8 @@ const HvCheckBox = React.forwardRef(
             "div",
             {
               className: cx(classes.container, {
-                [classes.disabled]: disabled,
-                [classes.invalidContainer]: isStateInvalid
+                [classes.invalidContainer]: isStateInvalid,
+                [classes.disabled]: disabled
               }),
               children: [
                 checkbox,

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

@@ -149,5 +149,4 @@ const Fields = (props) => {
     )
   ] });
 };
-exports.colorPickerFieldsClasses = Fields_styles.staticClasses;
 exports.Fields = Fields;

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const name = "HvColorPicker-Fields";
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
+const { useClasses } = uikitReactUtils.createClasses("HvColorPickerFields", {
   fields: {
     width: "100%",
     display: "flex",
@@ -34,5 +33,4 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     }
   }
 });
-exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/Picker/Picker.cjs

@@ -70,5 +70,4 @@ const Component = (props) => {
   ] });
 };
 const Picker = reactColor.CustomPicker(Component);
-exports.colorPickerPickerClasses = Picker_styles.staticClasses;
 exports.Picker = Picker;

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const name = "HvColorPicker-Picker";
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
+const { useClasses } = uikitReactUtils.createClasses("HvColorPickerPicker", {
   pickers: {
     display: "flex",
     flexDirection: "column"
@@ -63,5 +62,4 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   },
   fields: {}
 });
-exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/PresetColors/PresetColors.cjs

@@ -43,5 +43,4 @@ const PresetColors = (props) => {
     )) })
   ] });
 };
-exports.colorPickerPresetColorsClasses = PresetColors_styles.staticClasses;
 exports.PresetColors = PresetColors;

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const name = "HvColorPicker-PresetColors";
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
+const { useClasses } = uikitReactUtils.createClasses("HvColorPickerPresetColors", {
   root: { width: "232px" },
   colors: {
     display: "flex",
@@ -26,5 +25,4 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     }
   }
 });
-exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/SavedColors/SavedColors.cjs

@@ -65,5 +65,4 @@ const SavedColors = (props) => {
     ))
   ] });
 };
-exports.colorPickerSavedColorsClasses = SavedColors_styles.staticClasses;
 exports.SavedColors = SavedColors;

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const name = "HvColorPicker-SavedColors";
-const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
+const { useClasses } = uikitReactUtils.createClasses("HvColorPickerSavedColors", {
   addButton: {
     margin: uikitStyles.theme.space.xxs,
     width: "32px",
@@ -44,5 +43,4 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     width: 16
   }
 });
-exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Dialog/Content/Content.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const MuiDialogContent = require("@mui/material/DialogContent");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Content_styles = require("./Content.styles.cjs");
@@ -13,18 +14,43 @@ const HvDialogContent = (props) => {
     className,
     children,
     indentContent = false,
+    style,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDialogContent", props);
   const { classes, cx } = Content_styles.useClasses(classesProp);
+  const [hasBorder, setHasBorder] = React.useState(false);
+  const elRef = React.useRef(null);
+  React.useEffect(() => {
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(() => {
+        const el = elRef.current;
+        if (el) {
+          const hasOverflow = el.scrollHeight > el.clientHeight;
+          setHasBorder(hasOverflow);
+        }
+      });
+      if (elRef.current) {
+        resizeObserver.observe(elRef.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return void 0;
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Typography.HvTypography,
     {
+      ref: elRef,
       component: MuiDialogContent__default.default,
       className: cx(
         classes.root,
         { [classes.textContent]: !!indentContent },
         className
       ),
+      style: uikitReactUtils.mergeStyles(style, {
+        "--borderW": hasBorder ? "1px" : "0px"
+      }),
       ...others,
       children
     }

package/dist/cjs/Dialog/Content/Content.styles.cjs

@@ -4,10 +4,13 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Content", {
   root: {
-    padding: uikitStyles.theme.spacing(0, "sm", "sm")
+    padding: uikitStyles.theme.spacing(0, "sm", "sm"),
+    borderColor: uikitStyles.theme.colors.borderSubtle,
+    borderTopWidth: "var(--borderW)",
+    borderBottomWidth: "var(--borderW)"
   },
   textContent: {
-    marginLeft: "42px",
+    paddingLeft: `calc(42px + ${uikitStyles.theme.space.sm})`,
     paddingRight: "62px",
     overflowY: "auto"
   }

package/dist/cjs/Dialog/Dialog.styles.cjs

@@ -14,7 +14,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog",
     borderColor: uikitStyles.theme.colors.border,
     borderRadius: uikitStyles.theme.radii.round
   },
-  fullscreen: {},
+  fullscreen: {
+    borderRadius: 0
+  },
   fullHeight: {
     height: "100%"
   },

package/dist/cjs/Dialog/Title/Title.cjs

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const MuiDialogTitle = require("@mui/material/DialogTitle");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const iconVariant = require("../../utils/iconVariant.cjs");
 const context = require("../context.cjs");
 const Title_styles = require("./Title.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const StatusIcon = require("../../StatusIcon/StatusIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
 const HvDialogTitle = (props) => {
@@ -21,7 +21,7 @@ const HvDialogTitle = (props) => {
   } = uikitReactUtils.useDefaultProps("HvDialogTitle", props);
   const { classes, cx } = Title_styles.useClasses(classesProp);
   const { fullScreen } = context.useDialogContext();
-  const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
+  const icon = customIcon || showIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIcon.HvStatusIcon, { variant });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Typography.HvTypography,
     {

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -33,8 +33,8 @@ const HvDropdownButton = React.forwardRef(function HvDropdownButton2(props, ref)
         classes.root,
         {
           [classes.open]: open,
-          [classes.disabled]: disabled,
-          [classes.readOnly]: readOnly
+          [classes.readOnly]: readOnly,
+          [classes.disabled]: disabled
         },
         className
       ),

package/dist/cjs/QueryBuilder/ConfirmationDialog.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Dialog = require("../Dialog/Dialog.cjs");
+const Title = require("../Dialog/Title/Title.cjs");
+const Content = require("../Dialog/Content/Content.cjs");
+const Actions = require("../Dialog/Actions/Actions.cjs");
+const Button = require("../Button/Button.cjs");
+const ConfirmationDialog = ({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmButtonLabel,
+  cancelButtonLabel,
+  ...others
+}) => {
+  const handleClose = (_, reason) => {
+    if (reason !== "backdropClick") {
+      onCancel?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog.HvDialog, { onClose: handleClose, ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title.HvDialogTitle, { variant: "warning", showIcon: false, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content.HvDialogContent, { indentContent: true, children: message }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Actions.HvDialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { variant: "primaryGhost", onClick: onConfirm, children: confirmButtonLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { autoFocus: true, variant: "primaryGhost", onClick: onCancel, children: cancelButtonLabel })
+    ] })
+  ] });
+};
+exports.ConfirmationDialog = ConfirmationDialog;

package/dist/cjs/QueryBuilder/QueryBuilder.cjs

@@ -6,12 +6,12 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const helpers = require("../utils/helpers.cjs");
+const ConfirmationDialog = require("./ConfirmationDialog.cjs");
 const Context = require("./Context.cjs");
 const QueryBuilder_styles = require("./QueryBuilder.styles.cjs");
+const RuleGroup = require("./RuleGroup.cjs");
 const index = require("./utils/index.cjs");
 const reducer = require("./utils/reducer.cjs");
-const RuleGroup = require("./RuleGroup/RuleGroup.cjs");
-const ConfirmationDialog = require("./ConfirmationDialog/ConfirmationDialog.cjs");
 const HvQueryBuilder = (props) => {
   const {
     attributes,
@@ -132,14 +132,14 @@ const HvQueryBuilder = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfirmationDialog.ConfirmationDialog,
       {
-        isOpen: pendingAction != null,
+        open: pendingAction != null,
         onConfirm: handleConfirm,
         onCancel: handleCancel,
         title: pendingAction?.dialog.dialogTitle,
         message: pendingAction?.dialog.dialogMessage,
         confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
         cancelButtonLabel: pendingAction?.dialog.dialogCancel,
-        closeButtonTooltip: pendingAction?.dialog.dialogCloseTooltip
+        buttonTitle: pendingAction?.dialog.dialogCloseTooltip
       }
     )
   ] });

package/dist/cjs/QueryBuilder/Rule/{Attribute/Attribute.cjs → Attribute.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Context = require("../../Context.cjs");
-const index = require("../../utils/index.cjs");
-const Dropdown = require("../../../Dropdown/Dropdown.cjs");
+const Context = require("../Context.cjs");
+const index = require("../utils/index.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
 const Attribute = ({
   id,
   attribute,
@@ -62,5 +62,4 @@ const Attribute = ({
     }
   );
 };
-React.memo(Attribute);
 exports.Attribute = Attribute;

package/dist/cjs/QueryBuilder/Rule/{Operator/Operator.cjs → Operator.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Context = require("../../Context.cjs");
-const index = require("../../utils/index.cjs");
-const Dropdown = require("../../../Dropdown/Dropdown.cjs");
+const Context = require("../Context.cjs");
+const index = require("../utils/index.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
 const Operator = ({
   id,
   combinator,
@@ -57,5 +57,4 @@ const Operator = ({
     }
   );
 };
-React.memo(Operator);
 exports.Operator = Operator;

package/dist/cjs/QueryBuilder/Rule/Rule.cjs

@@ -7,11 +7,11 @@ const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const icons = require("../../icons.cjs");
 const Context = require("../Context.cjs");
+const Value = require("../Value/Value.cjs");
+const Attribute = require("./Attribute.cjs");
+const Operator = require("./Operator.cjs");
 const Rule_styles = require("./Rule.styles.cjs");
 const Grid = require("../../Grid/Grid.cjs");
-const Attribute = require("./Attribute/Attribute.cjs");
-const Operator = require("./Operator/Operator.cjs");
-const Value = require("./Value/Value.cjs");
 const IconButton = require("../../IconButton/IconButton.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
@@ -102,5 +102,4 @@ const Rule = (props) => {
     }
   );
 };
-exports.queryBuilderRuleClasses = Rule_styles.staticClasses;
 exports.Rule = Rule;

package/dist/cjs/QueryBuilder/Rule/Rule.styles.cjs

@@ -3,58 +3,54 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
-const { useClasses, staticClasses } = uikitReactUtils.createClasses(
-  "HvQueryBuilder-Rule",
-  {
-    root: {
-      position: "relative",
-      marginTop: uikitStyles.theme.space.xs,
-      minHeight: 94,
-      "&>div:not(:last-child)": {
-        paddingRight: uikitStyles.theme.space.md
-      },
-      // hide required * as all fields are required
-      "& label>span[aria-hidden]": {
-        visibility: "hidden"
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        zIndex: 2,
-        width: "17px",
-        height: "44px",
-        borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
-        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
-        top: 0,
-        left: `calc(-1 * 17px)`
-      },
-      [`:not(.${QueryBuilder_styles.staticClasses.topRulesContainer})>&:last-child::after`]: {
-        content: '""',
-        position: "absolute",
-        zIndex: 1,
-        width: "17px",
-        height: "100%",
-        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
-        top: 0,
-        left: `calc(-1 * 17px)`
-      }
+const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderRule", {
+  root: {
+    position: "relative",
+    marginTop: uikitStyles.theme.space.xs,
+    minHeight: 94,
+    "&>div:not(:last-child)": {
+      paddingRight: uikitStyles.theme.space.md
     },
-    actionsContainer: {
-      marginLeft: "auto",
-      marginTop: "24px",
-      "&>:not(:last-child)": {
-        marginRight: uikitStyles.theme.space.xs
-      }
+    // hide required * as all fields are required
+    "& label>span[aria-hidden]": {
+      visibility: "hidden"
     },
-    isMdDown: {
-      "&>div:not(:last-child)": {
-        paddingRight: 0
-      },
-      "&>div:not(:first-of-type)": {
-        marginTop: uikitStyles.theme.space.xs
-      }
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: 2,
+      width: "17px",
+      height: "44px",
+      borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
+      top: 0,
+      left: `calc(-1 * 17px)`
+    },
+    [`:not(.${QueryBuilder_styles.staticClasses.topRulesContainer})>&:last-child::after`]: {
+      content: '""',
+      position: "absolute",
+      zIndex: 1,
+      width: "17px",
+      height: "100%",
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
+      top: 0,
+      left: `calc(-1 * 17px)`
+    }
+  },
+  actionsContainer: {
+    marginLeft: "auto",
+    marginTop: "24px",
+    "&>:not(:last-child)": {
+      marginRight: uikitStyles.theme.space.xs
+    }
+  },
+  isMdDown: {
+    "&>div:not(:last-child)": {
+      paddingRight: 0
+    },
+    "&>div:not(:first-of-type)": {
+      marginTop: uikitStyles.theme.space.xs
     }
   }
-);
-exports.staticClasses = staticClasses;
+});
 exports.useClasses = useClasses;

package/dist/cjs/QueryBuilder/{RuleGroup/RuleGroup.cjs → RuleGroup.cjs}

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const icons = require("../../icons.cjs");
-const Context = require("../Context.cjs");
-const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
-const Button = require("../../Button/Button.cjs");
-const Rule = require("../Rule/Rule.cjs");
-const EmptyState = require("../../EmptyState/EmptyState.cjs");
-const MultiButton = require("../../MultiButton/MultiButton.cjs");
-const IconButton = require("../../IconButton/IconButton.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const icons = require("../icons.cjs");
+const Context = require("./Context.cjs");
+const QueryBuilder_styles = require("./QueryBuilder.styles.cjs");
+const Rule = require("./Rule/Rule.cjs");
+const Button = require("../Button/Button.cjs");
+const EmptyState = require("../EmptyState/EmptyState.cjs");
+const MultiButton = require("../MultiButton/MultiButton.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const RuleGroup = ({
   level = 0,
   id,

package/dist/cjs/QueryBuilder/{Rule/Value/BooleanValue → Value}/BooleanValue.cjs

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Context = require("../../../Context.cjs");
-const index = require("../../../utils/index.cjs");
-const Dropdown = require("../../../../Dropdown/Dropdown.cjs");
+const Context = require("../Context.cjs");
+const index = require("../utils/index.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
 const BooleanValue = ({ id, value = true }) => {
   const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
   const values = ["true", "false"].map((v) => ({
@@ -38,5 +37,4 @@ const BooleanValue = ({ id, value = true }) => {
     }
   );
 };
-React.memo(BooleanValue);
 exports.BooleanValue = BooleanValue;