@hitachivantara/uikit-react-core 6.7.0 → 6.8.0

package/dist/BaseDropdown/BaseDropdown.js

@@ -23,7 +23,7 @@ const HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
     adornment,
     expanded,
     popperProps,
-    variableWidth,
+    variableWidth = false,
     placement: placementProp = "right",
     dropdownHeaderProps,
     defaultExpanded,

package/dist/BaseDropdown/BaseDropdown.styles.js

@@ -75,7 +75,10 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     display: "block",
     color: theme.colors.textSubtle
   },
-  panel: {}
+  panel: {
+    padding: 0
+    // TODO(major): re-add padding as most elements need it
+  }
 });
 export {
   staticClasses,

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -16,8 +16,7 @@ const { useClasses } = createClasses(name, {
     width: "auto"
   },
   panel: {
-    padding: 0,
-    // TODO(major): remove padding as most elements need it
+    padding: theme.space.xs,
     border: `1px solid ${theme.colors.text}`
   }
 });
@@ -27,7 +26,7 @@ const HvDropdownPanel = (props) => {
     className,
     containerId,
     children,
-    variableWidth,
+    variableWidth = true,
     anchorEl,
     disablePortal,
     modifiers: modifiersProp,

package/dist/FormElement/Suggestions/Suggestions.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef } from "react";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import Popper from "@mui/material/Popper";
 import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { HvDropdownPanel } from "../../BaseDropdown/BaseDropdownPanel.js";
 import { getContainerElement } from "../../utils/document.js";
 import { setId } from "../../utils/setId.js";
 import { HvFormElementContext } from "../context.js";
@@ -38,13 +37,13 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
       ref: forkedRef,
       className: cx(classes.root, className),
       ...others,
-      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: onClose, children: /* @__PURE__ */ jsx(
-        Popper,
+      children: /* @__PURE__ */ jsx(
+        HvDropdownPanel,
         {
-          style: {
-            // @ts-ignore
-            "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
-          },
+          onClickAway: onClose,
+          style: mergeStyles(void 0, {
+            "--popper-width": enablePortal && `${anchorEl?.clientWidth}px`
+          }),
           open: openProp,
           disablePortal: !enablePortal,
           container: enablePortal ? getContainerElement(rootId) : void 0,
@@ -52,6 +51,7 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
           className: cx(classes.popper, {
             [classes.portal]: enablePortal
           }),
+          classes: { panel: classes.panel },
           ...popperProps,
           children: /* @__PURE__ */ jsx(
             HvSelectionList,
@@ -59,11 +59,13 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
               className: classes.list,
               id: setId(id, "list"),
               onChange: onSuggestionSelected,
+              onMouseDown: (evt) => evt.preventDefault(),
+              onPointerDown: (evt) => evt.preventDefault(),
               children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
             }
           )
         }
-      ) })
+      )
     }
   );
 });

package/dist/FormElement/Suggestions/Suggestions.styles.js

@@ -1,27 +1,14 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvSuggestions", {
-  root: { position: "relative" },
+  root: {
+    position: "relative"
+  },
+  panel: {},
   list: {
-    backgroundColor: theme.colors.bgContainer,
-    border: `1px solid ${theme.colors.text}`,
-    borderRadius: theme.radii.round,
-    boxShadow: theme.colors.shadow,
-    padding: theme.space.xs,
     width: "100%"
   },
   popper: {
-    width: "var(--popper-width)",
-    position: "absolute",
-    zIndex: theme.zIndices.tooltip,
-    ":not($portal)": {
-      "&[data-popper-placement*='top']": {
-        transform: "translate3d(0, -28px, 0) !important"
-      },
-      "&[data-popper-placement*='bottom']": {
-        transform: "translate3d(0, 2px, 0) !important"
-      }
-    }
+    width: "var(--popper-width, 100%)"
   },
   portal: {}
 });

package/dist/TreeView/internals/hooks/plugins/useTreeViewNodes.js

@@ -46,7 +46,7 @@ const useTreeViewNodes = ({
     [instance]
   );
   const getChildrenIds = useEventCallback(
-    (nodeId) => Object.values(nodeMap.current).filter((node) => node.parentId === nodeId).sort((a, b) => a.index - b.index).map((child) => child.id)
+    (nodeId) => Object.values(nodeMap.current).filter((node) => node.parentId === nodeId).toSorted((a, b) => a.index - b.index).map((child) => child.id)
   );
   const getNavigableChildrenIds = (nodeId) => {
     let childrenIds = instance.getChildrenIds(nodeId);

package/dist/TreeView/internals/hooks/useTreeViewModels.js

@@ -1,22 +1,24 @@
 import * as React from "react";
 const useTreeViewModels = (plugins, props) => {
   const modelsRef = React.useRef({});
-  const [modelsState, setModelsState] = React.useState(() => {
-    const initialState = {};
-    plugins.forEach((plugin) => {
-      if (plugin.models) {
-        Object.entries(plugin.models).forEach(([modelName, model]) => {
-          modelsRef.current[modelName] = {
-            controlledProp: model.controlledProp,
-            defaultProp: model.defaultProp,
-            isControlled: props[model.controlledProp] !== void 0
-          };
-          initialState[modelName] = props[model.defaultProp];
-        });
-      }
-    });
-    return initialState;
-  });
+  const [modelsState, setModelsState] = React.useState(
+    () => {
+      const initialState = {};
+      plugins.forEach((plugin) => {
+        if (plugin.models) {
+          Object.entries(plugin.models).forEach(([modelName, model]) => {
+            modelsRef.current[modelName] = {
+              controlledProp: model.controlledProp,
+              defaultProp: model.defaultProp,
+              isControlled: props[model.controlledProp] !== void 0
+            };
+            initialState[modelName] = props[model.defaultProp];
+          });
+        }
+      });
+      return initialState;
+    }
+  );
   const models = Object.fromEntries(
     Object.entries(modelsRef.current).map(([modelName, model]) => {
       const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];

package/dist/index.d.ts

@@ -1364,7 +1364,7 @@ export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChan
 
 export declare const HvBaseDropdown: ForwardRefExoticComponent<Omit<HvBaseDropdownProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvBaseDropdownClasses = ExtractNames<typeof useClasses_19>;
+export declare type HvBaseDropdownClasses = ExtractNames<typeof useClasses_18>;
 
 export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
     /**
@@ -1462,7 +1462,7 @@ export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement,
  */
 export declare const HvBaseInput: ForwardRefExoticComponent<HvBaseInputProps & RefAttributes<HTMLInputElement>>;
 
-export declare type HvBaseInputClasses = ExtractNames<typeof useClasses_18>;
+export declare type HvBaseInputClasses = ExtractNames<typeof useClasses_20>;
 
 export declare interface HvBaseInputProps extends Omit<InputBaseProps, "onChange" | "classes" | "ref" | "color" | "size" | "inputProps"> {
     /** The input name. */
@@ -2929,7 +2929,7 @@ export declare const HvDropdownPanel: (props: HvDropdownPanelProps) => JSX_2.Ele
 
 export declare interface HvDropdownPanelProps extends Omit<PopperProps, "children">, Pick<HvBaseDropdownProps, "disablePortal" | "children"> {
     variableWidth?: boolean;
-    classes?: ExtractNames<typeof useClasses_20>;
+    classes?: ExtractNames<typeof useClasses_19>;
     containerId?: string;
     onToggle?: (event: any) => void;
     onFirstUpdate?: OptionsGeneric<any>["onFirstUpdate"];
@@ -5672,7 +5672,7 @@ export declare interface HvSuggestionsProps extends HvBaseProps {
     /** Function called when a suggestion is selected */
     onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;
     /** Function called when suggestion list is closed */
-    onClose?: ClickAwayListenerProps["onClickAway"];
+    onClose?: HvDropdownPanelProps["onClickAway"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSuggestionsClasses;
     /**
@@ -5682,7 +5682,7 @@ export declare interface HvSuggestionsProps extends HvBaseProps {
      * */
     enablePortal?: boolean;
     /** Props passed to the underlying MUI Popper component */
-    popperProps?: Partial<PopperProps>;
+    popperProps?: Partial<HvDropdownPanelProps>;
 }
 
 /**
@@ -7507,6 +7507,7 @@ declare type StringKey<D> = Extract<keyof D, string>;
 
 export declare const suggestionsClasses: {
     root: string;
+    panel: string;
     list: string;
     popper: string;
     portal: string;
@@ -8367,9 +8368,10 @@ declare const useClasses_16: (classesProp?: Partial<Record<"vertical" | "horizon
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_17: (classesProp?: Partial<Record<"list" | "root" | "popper" | "portal", string>>, addStatic?: boolean) => {
+declare const useClasses_17: (classesProp?: Partial<Record<"list" | "root" | "panel" | "popper" | "portal", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
+        panel: string;
         list: string;
         popper: string;
         portal: string;
@@ -8378,25 +8380,7 @@ declare const useClasses_17: (classesProp?: Partial<Record<"list" | "root" | "po
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_18: (classesProp?: Partial<Record<"disabled" | "input" | "readOnly" | "root" | "invalid" | "focused" | "multiline" | "resizable" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>, addStatic?: boolean) => {
-    readonly classes: {
-        root: string;
-        disabled: string;
-        invalid: string;
-        multiline: string;
-        resizable: string;
-        readOnly: string;
-        focused: string;
-        input: string;
-        inputDisabled: string;
-        inputReadOnly: string;
-        inputResizable: string;
-    };
-    readonly css: any;
-    readonly cx: (...args: any) => string;
-};
-
-declare const useClasses_19: (classesProp?: Partial<Record<"container" | "header" | "anchor" | "placeholder" | "root" | "rootDisabled" | "headerOpen" | "headerDisabled" | "headerReadOnly" | "arrowContainer" | "arrow" | "selection" | "selectionDisabled" | "panel", string>>, addStatic?: boolean) => {
+declare const useClasses_18: (classesProp?: Partial<Record<"container" | "header" | "anchor" | "placeholder" | "root" | "rootDisabled" | "headerOpen" | "headerDisabled" | "headerReadOnly" | "arrowContainer" | "arrow" | "selection" | "selectionDisabled" | "panel", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         rootDisabled: string;
@@ -8417,6 +8401,15 @@ declare const useClasses_19: (classesProp?: Partial<Record<"container" | "header
     readonly cx: (...args: any) => string;
 };
 
+declare const useClasses_19: (classesProp?: Partial<Record<"container" | "panel", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        container: string;
+        panel: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
 declare const useClasses_2: (classesProp?: Partial<Record<"disabled" | "root" | "isLink" | "noWrap", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
@@ -8428,10 +8421,19 @@ declare const useClasses_2: (classesProp?: Partial<Record<"disabled" | "root" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_20: (classesProp?: Partial<Record<"container" | "panel", string>>, addStatic?: boolean) => {
+declare const useClasses_20: (classesProp?: Partial<Record<"disabled" | "input" | "readOnly" | "root" | "invalid" | "focused" | "multiline" | "resizable" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>, addStatic?: boolean) => {
     readonly classes: {
-        container: string;
-        panel: string;
+        root: string;
+        disabled: string;
+        invalid: string;
+        multiline: string;
+        resizable: string;
+        readOnly: string;
+        focused: string;
+        input: string;
+        inputDisabled: string;
+        inputReadOnly: string;
+        inputResizable: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/dist/themes/next.js

@@ -173,6 +173,16 @@ const next = mergeTheme(next$1, {
         }
       }
     },
+    HvSuggestions: {
+      classes: {
+        panel: {
+          margin: theme.spacing("xxs", 0),
+          "&&": {
+            borderRadius: theme.radii.round
+          }
+        }
+      }
+    },
     HvSnackbarContent: {
       classes: {
         root: {

package/dist/themes/pentaho.js

@@ -42,12 +42,17 @@ const notificationMap = {
 const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
+const shadows = {
+  container: theme.colors.shadow,
+  elevated: `0 16px 16px 0 ${theme.alpha(slate[900], 0.1)}, 0 10px 10px 0 ${theme.alpha(slate[900], 0.08)}, 0 6px 6px 0 ${theme.alpha(slate[900], 0.06)}, 0 3px 3px 0 ${theme.alpha(slate[900], 0.04)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.02)}`,
+  modal: `0 32px 32px 0 ${theme.alpha(slate[900], 0.1)}, 0 20px 20px 0 ${theme.alpha(slate[900], 0.08)}, 0 12px 12px 0 ${theme.alpha(slate[900], 0.06)}, 0 5px 5px 0 ${theme.alpha(slate[900], 0.04)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.02)}`
+};
 const popperStyles = {
   margin: theme.spacing("xxs", 0),
   backgroundColor: theme.colors.bgContainer,
   border: `1px solid ${theme.colors.borderSubtle}`,
   borderRadius: theme.radii.large,
-  boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
+  boxShadow: shadows.container
 };
 const pentaho = mergeTheme(pentaho$1, {
   icons: {
@@ -314,13 +319,6 @@ const pentaho = mergeTheme(pentaho$1, {
         }
       }
     },
-    HvSuggestions: {
-      classes: {
-        list: {
-          ...popperStyles
-        }
-      }
-    },
     HvTagsInput: {
       classes: {
         tagsList: {
@@ -577,7 +575,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvDialog: {
       classes: {
         paper: {
-          borderRadius: theme.radii.large
+          borderRadius: theme.radii.large,
+          boxShadow: shadows.modal
         },
         statusBar: {
           border: "none",
@@ -755,6 +754,7 @@ const pentaho = mergeTheme(pentaho$1, {
       classes: {
         root: {
           outlineColor: theme.colors.borderSubtle,
+          boxShadow: theme.colors.shadow,
           "--rb": theme.radii.large,
           // default non-semantic card
           "&[data-color=sema0]": {
@@ -961,7 +961,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvTooltip: {
       classes: {
         tooltip: {
-          padding: theme.spacing("xs", "sm")
+          padding: theme.spacing("xs", "sm"),
+          boxShadow: shadows.elevated
         }
       }
     },
@@ -1130,7 +1131,8 @@ const pentaho = mergeTheme(pentaho$1, {
       classes: {
         root: {
           width: 525,
-          minHeight: "unset"
+          minHeight: "unset",
+          boxShadow: theme.colors.shadow
         },
         messageText: {
           paddingLeft: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -33,9 +33,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.3",
-    "@hitachivantara/uikit-react-utils": "^6.2.1",
-    "@hitachivantara/uikit-styles": "^6.0.3",
+    "@hitachivantara/uikit-react-shared": "^6.0.4",
+    "@hitachivantara/uikit-react-utils": "^6.2.2",
+    "@hitachivantara/uikit-styles": "^6.1.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "7.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "1d7f5a386ac0f94271bb66501d76f39e3146d614",
+  "gitHead": "f79885f320f5cdf5b438ef8b2e866965c9626ce7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",