@hitachivantara/uikit-react-core 5.104.1 → 5.105.1

package/dist/cjs/Focus/Focus.cjs

@@ -22,6 +22,7 @@ const HvFocus = ({
   const [childFocus, setChildFocus] = React.useState();
   const [hasRunConfig, setHasRunConfig] = React.useState(false);
   const { classes, cx } = Focus_styles.useClasses(classesProp);
+  const hasFocusVisible = React.useRef(false);
   const getFocuses = () => {
     const focuses = rootRef?.current ? Array.from(
       rootRef.current.getElementsByClassName(
@@ -101,6 +102,7 @@ const HvFocus = ({
     });
   };
   const onFocus = (evt) => {
+    hasFocusVisible.current = evt.currentTarget.matches(":focus-visible");
     addFocusClass(evt);
     childFocus?.focus?.();
     onFocusStrategy(evt);
@@ -146,6 +148,23 @@ const HvFocus = ({
       evt.preventDefault();
       evt.stopPropagation();
     }
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+        focuses.jump = void 0;
+        focuses.fall = void 0;
+      }
+    }
     const blockedKeys = getEnabledKeys(
       currentFocusIndex,
       jump,
@@ -218,6 +237,21 @@ const HvFocus = ({
     }
     evt.preventDefault();
     evt.stopPropagation();
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+      }
+    }
     switch (evt.code) {
       case "Space":
       case "Enter":
@@ -268,6 +302,7 @@ const HvFocus = ({
       first: focusesList[0],
       last: focusesList[focusesList.length - 1],
       previous: focusesList[currentFocus - 1],
+      current: focusesList[currentFocus],
       next: focusesList[currentFocus + 1],
       fall: focusesList[currentFocus + navigationJump],
       jump: focusesList[currentFocus - navigationJump]

package/dist/cjs/List/List.cjs

@@ -154,13 +154,13 @@ const HvList = (props) => {
         onClick: (evt) => handleSelect(evt, item),
         startAdornment,
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
+        separator: item.separator,
         ...otherProps,
         children: renderSelectItem(item, itemId)
       },
       i
     );
   };
-  const renderSeparator = (index) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: classes.separator }, `separator-${index}`);
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
   const selectedItemIndex = list.findIndex((item) => item.selected);
@@ -216,16 +216,6 @@ const HvList = (props) => {
     condensed,
     ariaMultiSelectable
   ]);
-  const renderListWithSeparators = () => {
-    const items = [];
-    filteredList.forEach((item, i) => {
-      items.push(renderListItem(item, i));
-      if (item.separator && i < filteredList.length - 1) {
-        items.push(renderSeparator(i));
-      }
-    });
-    return items;
-  };
   if (filteredList.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     multiSelect && useSelector && showSelectAll && renderSelectAll(),
@@ -240,7 +230,7 @@ const HvList = (props) => {
         disableGutters: useSelector,
         "aria-multiselectable": ariaMultiSelectable,
         ...others,
-        children: renderListWithSeparators()
+        children: filteredList.map((item, i) => renderListItem(item, i))
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       reactWindow.FixedSizeList,

package/dist/cjs/List/List.styles.cjs

@@ -29,12 +29,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvList", {
       backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
-  separator: {
-    height: 1,
-    backgroundColor: uikitStyles.theme.colors.border,
-    margin: `${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.sm} * -1)`,
-    border: "none"
-  },
   link: {
     ...uikitStyles.theme.typography.body,
     textDecoration: "none",

package/dist/cjs/ListContainer/ListItem/ListItem.cjs

@@ -18,6 +18,7 @@ const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
     interactive: interactiveProp,
     condensed: condensedProp,
     disableGutters: disableGuttersProp,
+    separator,
     startAdornment,
     endAdornment,
     onClick,
@@ -110,7 +111,7 @@ const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
       }
     )
   );
-  return interactive ? /* @__PURE__ */ jsxRuntime.jsx(
+  const item = interactive ? /* @__PURE__ */ jsxRuntime.jsx(
     Focus.HvFocus,
     {
       rootRef: topContainerRef,
@@ -124,6 +125,13 @@ const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
       children: listItem
     }
   ) : listItem;
+  if (separator) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      item,
+      /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: classes.separator, "aria-hidden": "true" })
+    ] });
+  }
+  return item;
 });
 exports.listItemClasses = ListItem_styles.staticClasses;
 exports.HvListItem = HvListItem;

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -67,7 +67,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
   /** @deprecated use `:has($startAdornment)` instead */
   withStartAdornment: {},
   /** @deprecated use `:has($endAdornment)` instead */
-  withEndAdornment: {}
+  withEndAdornment: {},
+  separator: {
+    height: 1,
+    backgroundColor: uikitStyles.theme.colors.border,
+    margin: `${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.sm} * -1)`,
+    border: "none",
+    padding: 0,
+    listStyleType: "none",
+    "&:last-child": {
+      display: "none"
+    }
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/StatusIcon/StatusIcon.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const CheckCircle = require("@phosphor-icons/react/CheckCircle");
-const Question = require("@phosphor-icons/react/Question");
-const Warning = require("@phosphor-icons/react/Warning");
-const WarningDiamond = require("@phosphor-icons/react/WarningDiamond");
+const CheckCircle = require("@phosphor-icons/react/dist/csr/CheckCircle");
+const Question = require("@phosphor-icons/react/dist/csr/Question");
+const Warning = require("@phosphor-icons/react/dist/csr/Warning");
+const WarningDiamond = require("@phosphor-icons/react/dist/csr/WarningDiamond");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const icons = require("../icons.cjs");
 const StatusIcon_styles = require("./StatusIcon.styles.cjs");

package/dist/esm/Focus/Focus.js

@@ -1,4 +1,4 @@
-import { useState, cloneElement } from "react";
+import { useState, useRef, cloneElement } from "react";
 import { isBrowser } from "../utils/browser.js";
 import { isOneOfKeys, isKey } from "../utils/keyboardUtils.js";
 import { useClasses, staticClasses } from "./Focus.styles.js";
@@ -20,6 +20,7 @@ const HvFocus = ({
   const [childFocus, setChildFocus] = useState();
   const [hasRunConfig, setHasRunConfig] = useState(false);
   const { classes, cx } = useClasses(classesProp);
+  const hasFocusVisible = useRef(false);
   const getFocuses = () => {
     const focuses = rootRef?.current ? Array.from(
       rootRef.current.getElementsByClassName(
@@ -99,6 +100,7 @@ const HvFocus = ({
     });
   };
   const onFocus = (evt) => {
+    hasFocusVisible.current = evt.currentTarget.matches(":focus-visible");
     addFocusClass(evt);
     childFocus?.focus?.();
     onFocusStrategy(evt);
@@ -144,6 +146,23 @@ const HvFocus = ({
       evt.preventDefault();
       evt.stopPropagation();
     }
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+        focuses.jump = void 0;
+        focuses.fall = void 0;
+      }
+    }
     const blockedKeys = getEnabledKeys(
       currentFocusIndex,
       jump,
@@ -216,6 +235,21 @@ const HvFocus = ({
     }
     evt.preventDefault();
     evt.stopPropagation();
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+      }
+    }
     switch (evt.code) {
       case "Space":
       case "Enter":
@@ -266,6 +300,7 @@ const HvFocus = ({
       first: focusesList[0],
       last: focusesList[focusesList.length - 1],
       previous: focusesList[currentFocus - 1],
+      current: focusesList[currentFocus],
       next: focusesList[currentFocus + 1],
       fall: focusesList[currentFocus + navigationJump],
       jump: focusesList[currentFocus - navigationJump]

package/dist/esm/List/List.js

@@ -153,13 +153,13 @@ const HvList = (props) => {
         onClick: (evt) => handleSelect(evt, item),
         startAdornment,
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
+        separator: item.separator,
         ...otherProps,
         children: renderSelectItem(item, itemId)
       },
       i
     );
   };
-  const renderSeparator = (index) => /* @__PURE__ */ jsx("hr", { className: classes.separator }, `separator-${index}`);
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
   const selectedItemIndex = list.findIndex((item) => item.selected);
@@ -215,16 +215,6 @@ const HvList = (props) => {
     condensed,
     ariaMultiSelectable
   ]);
-  const renderListWithSeparators = () => {
-    const items = [];
-    filteredList.forEach((item, i) => {
-      items.push(renderListItem(item, i));
-      if (item.separator && i < filteredList.length - 1) {
-        items.push(renderSeparator(i));
-      }
-    });
-    return items;
-  };
   if (filteredList.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     multiSelect && useSelector && showSelectAll && renderSelectAll(),
@@ -239,7 +229,7 @@ const HvList = (props) => {
         disableGutters: useSelector,
         "aria-multiselectable": ariaMultiSelectable,
         ...others,
-        children: renderListWithSeparators()
+        children: filteredList.map((item, i) => renderListItem(item, i))
       }
     ) : /* @__PURE__ */ jsx(
       FixedSizeList,

package/dist/esm/List/List.styles.js

@@ -27,12 +27,6 @@ const { staticClasses, useClasses } = createClasses("HvList", {
       backgroundColor: theme.colors.bgHover
     }
   },
-  separator: {
-    height: 1,
-    backgroundColor: theme.colors.border,
-    margin: `${theme.space.xs} calc(${theme.space.sm} * -1)`,
-    border: "none"
-  },
   link: {
     ...theme.typography.body,
     textDecoration: "none",

package/dist/esm/ListContainer/ListItem/ListItem.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext, useCallback, useMemo, isValidElement, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./ListItem.styles.js";
@@ -17,6 +17,7 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
     interactive: interactiveProp,
     condensed: condensedProp,
     disableGutters: disableGuttersProp,
+    separator,
     startAdornment,
     endAdornment,
     onClick,
@@ -109,7 +110,7 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
       }
     )
   );
-  return interactive ? /* @__PURE__ */ jsx(
+  const item = interactive ? /* @__PURE__ */ jsx(
     HvFocus,
     {
       rootRef: topContainerRef,
@@ -123,6 +124,13 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
       children: listItem
     }
   ) : listItem;
+  if (separator) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      item,
+      /* @__PURE__ */ jsx("li", { role: "separator", className: classes.separator, "aria-hidden": "true" })
+    ] });
+  }
+  return item;
 });
 export {
   HvListItem,

package/dist/esm/ListContainer/ListItem/ListItem.styles.js

@@ -65,7 +65,18 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
   /** @deprecated use `:has($startAdornment)` instead */
   withStartAdornment: {},
   /** @deprecated use `:has($endAdornment)` instead */
-  withEndAdornment: {}
+  withEndAdornment: {},
+  separator: {
+    height: 1,
+    backgroundColor: theme.colors.border,
+    margin: `${theme.space.xs} calc(${theme.space.sm} * -1)`,
+    border: "none",
+    padding: 0,
+    listStyleType: "none",
+    "&:last-child": {
+      display: "none"
+    }
+  }
 });
 export {
   staticClasses,

package/dist/esm/StatusIcon/StatusIcon.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { CheckCircle } from "@phosphor-icons/react/CheckCircle";
-import { Question } from "@phosphor-icons/react/Question";
-import { Warning } from "@phosphor-icons/react/Warning";
-import { WarningDiamond } from "@phosphor-icons/react/WarningDiamond";
+import { CheckCircle } from "@phosphor-icons/react/dist/csr/CheckCircle";
+import { Question } from "@phosphor-icons/react/dist/csr/Question";
+import { Warning } from "@phosphor-icons/react/dist/csr/Warning";
+import { WarningDiamond } from "@phosphor-icons/react/dist/csr/WarningDiamond";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { useClasses } from "./StatusIcon.styles.js";

package/dist/types/index.d.ts

@@ -4516,6 +4516,8 @@ export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement> {
      * If unwanted, the element should be placed directly as a child.
      */
     endAdornment?: React.ReactNode;
+    /** Whether to show a separator after this list item */
+    separator?: boolean;
     /** The value to be set on the 'li' element */
     value?: any;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -7646,7 +7648,6 @@ export declare const listClasses: {
     truncate: string;
     item: string;
     itemSelector: string;
-    separator: string;
     link: string;
     selectAllSelector: string;
 };
@@ -7667,6 +7668,7 @@ export declare const listItemClasses: {
     endAdornment: string;
     withStartAdornment: string;
     withEndAdornment: string;
+    separator: string;
 };
 
 export declare const loadingClasses: {
@@ -9795,7 +9797,7 @@ declare const useClasses_59: (classesProp?: Partial<Record<"dropdown" | "label"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "disabled" | "selected" | "root" | "focus" | "endAdornment" | "startAdornment" | "interactive" | "gutters" | "withStartAdornment" | "withEndAdornment", string>>, addStatic?: boolean) => {
+declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "separator" | "disabled" | "selected" | "root" | "focus" | "endAdornment" | "startAdornment" | "interactive" | "gutters" | "withStartAdornment" | "withEndAdornment", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         focus: string;
@@ -9808,6 +9810,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "disable
         endAdornment: string;
         withStartAdornment: string;
         withEndAdornment: string;
+        separator: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;
@@ -10235,7 +10238,7 @@ declare const useClasses_87: (classesProp?: Partial<Record<"a", string>>, addSta
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_88: (classesProp?: Partial<Record<"link" | "separator" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
+declare const useClasses_88: (classesProp?: Partial<Record<"link" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         virtualizedRoot: string;
@@ -10245,7 +10248,6 @@ declare const useClasses_88: (classesProp?: Partial<Record<"link" | "separator"
         truncate: string;
         item: string;
         itemSelector: string;
-        separator: string;
         link: string;
         selectAllSelector: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.104.1",
+  "version": "5.105.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "108aeb035cc208aa2603071db6d10135d1501f7e",
+  "gitHead": "7beb41faed7988ae23de7802faa1b637504c7c9a",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",