@hitachivantara/uikit-react-core 5.98.0 → 5.99.1

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

@@ -4,30 +4,74 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const dayjs = require("dayjs");
-const helpers = require("../../../../utils/helpers.cjs");
-const Context = require("../../../Context.cjs");
-const DateTimeValue_styles = require("./DateTimeValue.styles.cjs");
-const utils = require("./utils.cjs");
-const DatePicker = require("../../../../DatePicker/DatePicker.cjs");
-const TimePicker = require("../../../../TimePicker/TimePicker.cjs");
-const WarningText = require("../../../../FormElement/WarningText/WarningText.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const helpers = require("../../utils/helpers.cjs");
+const Context = require("../Context.cjs");
+const DatePicker = require("../../DatePicker/DatePicker.cjs");
+const TimePicker = require("../../TimePicker/TimePicker.cjs");
+const WarningText = require("../../FormElement/WarningText/WarningText.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
-function valueIsRange(operator) {
-  return operator === "range";
+function formatDate(date) {
+  return date?.toISOString().slice(0, 10);
 }
+function formatTime(time) {
+  if (!time) return void 0;
+  const { hours, minutes, seconds } = time;
+  const date = new Date(Date.UTC(2020, 8, 8, hours, minutes, seconds));
+  return date.toISOString().slice(11, 19);
+}
+function parseDate(date) {
+  return date ? new Date(date) : void 0;
+}
+function parseTime(time) {
+  if (!time) return null;
+  const parts = time.split(":");
+  return {
+    hours: Number(parts[0]),
+    minutes: Number(parts[1]),
+    seconds: Number(parts[2]) || 0
+  };
+}
+const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderDateTimeValue", {
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  row: {},
+  vertical: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  horizontal: {
+    display: "flex",
+    "& > div:not(:last-child)": {
+      marginRight: uikitStyles.theme.space.md
+    }
+  },
+  isMdDown: {
+    "& > div:not(:last-child)": {
+      marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+    }
+  },
+  datePicker: {
+    flex: 1
+  },
+  timePicker: {
+    flex: 1
+  }
+});
 const DateTimeValue = ({
   id,
   operator,
   value: valueProp = {},
   initialTouched = false
 }) => {
-  const { classes, cx } = DateTimeValue_styles.useClasses();
-  const theme = styles.useTheme();
-  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
-  const isRange = valueIsRange(operator);
+  const { classes, cx } = useClasses();
+  const theme2 = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme2.breakpoints.down("md"));
+  const isRange = operator === "range";
   const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
   const elementId = helpers.uniqueId(`datetime${id}`);
   const [touchedDate, setTouchedDate] = React.useState(initialTouched);
@@ -37,10 +81,7 @@ const DateTimeValue = ({
   const onDateChange = React.useCallback(
     (data) => {
       setTouchedDate(true);
-      let date;
-      if (data != null) {
-        date = dayjs__default.default(data).format("YYYY-MM-DD");
-      }
+      const date = formatDate(data);
       const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
       if (date !== oldValue) {
         let value;
@@ -70,12 +111,7 @@ const DateTimeValue = ({
   const onTimeChange = React.useCallback(
     (data) => {
       setTouchedTime(true);
-      let time;
-      if (data != null) {
-        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
-          data.seconds
-        )}`;
-      }
+      const time = formatTime(data);
       const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
       if (time !== oldValue) {
         let value;
@@ -105,10 +141,7 @@ const DateTimeValue = ({
   const onEndDateChange = React.useCallback(
     (data) => {
       setTouchedEndDate(true);
-      let date;
-      if (data != null) {
-        date = dayjs__default.default(data).format("YYYY-MM-DD");
-      }
+      const date = formatDate(data);
       if (date !== valueProp?.end?.date) {
         const value = {
           start: valueProp?.start,
@@ -129,12 +162,7 @@ const DateTimeValue = ({
   const onEndTimeChange = React.useCallback(
     (data) => {
       setTouchedEndTime(true);
-      let time;
-      if (data != null) {
-        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
-          data.seconds
-        )}`;
-      }
+      const time = formatTime(data);
       if (time !== valueProp?.end?.time) {
         const value = {
           start: valueProp?.start,
@@ -153,15 +181,15 @@ const DateTimeValue = ({
     [dispatchAction, id, valueProp]
   );
   const startDate = isRange ? valueProp?.start?.date : valueProp?.date;
-  const datePickerValue = React.useMemo(() => utils.parseDate(startDate), [startDate]);
+  const datePickerValue = React.useMemo(() => parseDate(startDate), [startDate]);
   const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
   const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? "";
-  const timePickerValue = React.useMemo(() => utils.parseTime(startTime), [startTime]);
+  const timePickerValue = React.useMemo(() => parseTime(startTime), [startTime]);
   const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
   const endDate = isRange ? valueProp?.end?.date : null;
-  const endDatePickerValue = React.useMemo(() => utils.parseDate(endDate), [endDate]);
+  const endDatePickerValue = React.useMemo(() => parseDate(endDate), [endDate]);
   const endTime = isRange ? valueProp?.end?.time : null;
-  const endTimePickerValue = React.useMemo(() => utils.parseTime(endTime), [endTime]);
+  const endTimePickerValue = React.useMemo(() => parseTime(endTime), [endTime]);
   const dateStatus = !touchedDate ? "standBy" : datePickerStatus;
   const timeStatus = !touchedTime ? "standBy" : timePickerStatus;
   const endDateIsBefore = startDate != null && endDate != null && endDate < startDate;
@@ -279,5 +307,4 @@ const DateTimeValue = ({
     ] })
   ] });
 };
-React.memo(DateTimeValue);
 exports.DateTimeValue = DateTimeValue;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Context = require("../../../Context.cjs");
+const Context = require("../Context.cjs");
 const EmptyValue = ({ id }) => {
   const { dispatchAction } = Context.useQueryBuilderContext();
   React.useEffect(() => {

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

@@ -4,23 +4,49 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const helpers = require("../../../../utils/helpers.cjs");
-const Context = require("../../../Context.cjs");
-const Numeric_styles = require("./Numeric.styles.cjs");
-const Input = require("../../../../Input/Input.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const helpers = require("../../utils/helpers.cjs");
+const Context = require("../Context.cjs");
+const Input = require("../../Input/Input.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderNumericValue", {
+  root: {},
+  label: {
+    paddingBottom: "6px"
+  },
+  inputContainer: {},
+  rangeContainer: {
+    display: "flex",
+    "& $inputContainer": {
+      flexGrow: 1,
+      overflow: "auto"
+    },
+    "& > $inputContainer:not(:last-child)": {
+      marginRight: uikitStyles.theme.space.md
+    }
+  },
+  input: {
+    flexGrow: 1
+  },
+  isMdDown: {
+    "& > $inputContainer:not(:last-child)": {
+      marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+    }
+  }
+});
 const NumericValue = ({
   id,
   value,
   operator,
   initialTouched = false
 }) => {
-  const { classes, cx } = Numeric_styles.useClasses();
+  const { classes, cx } = useClasses();
   const isRange = operator === "range";
   const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
-  const theme = styles.useTheme();
-  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
+  const theme2 = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme2.breakpoints.down("md"));
   const onSingleValueChange = React.useCallback(
     (event, data) => {
       dispatchAction({
@@ -181,5 +207,4 @@ const NumericValue = ({
     ) })
   ] });
 };
-React.memo(NumericValue);
 exports.NumericValue = NumericValue;

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

@@ -2,15 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Context = require("../../../Context.cjs");
-const TextValue_styles = require("./TextValue.styles.cjs");
-const Input = require("../../../../Input/Input.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Context = require("../Context.cjs");
+const Input = require("../../Input/Input.cjs");
+const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderTextValue", {
+  location: {
+    flexGrow: 1
+  }
+});
 const TextValue = ({
   id,
   value = "",
   initialTouched = false
 }) => {
-  const { classes } = TextValue_styles.useClasses();
+  const { classes } = useClasses();
   const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
   const [touched, setTouched] = React.useState(initialTouched);
   const isValid = value != null && value.toString().trim() !== "";
@@ -48,5 +53,4 @@ const TextValue = ({
     }
   );
 };
-React.memo(TextValue);
 exports.TextValue = TextValue;

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

@@ -1,14 +1,13 @@
 "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 types = require("../../types.cjs");
-const EmptyValue = require("./EmptyValue/EmptyValue.cjs");
-const TextValue = require("./TextValue/TextValue.cjs");
-const DateTimeValue = require("./DateTimeValue/DateTimeValue.cjs");
-const NumericValue = require("./NumericValue/NumericValue.cjs");
-const BooleanValue = require("./BooleanValue/BooleanValue.cjs");
+const Context = require("../Context.cjs");
+const types = require("../types.cjs");
+const BooleanValue = require("./BooleanValue.cjs");
+const DateTimeValue = require("./DateTimeValue.cjs");
+const EmptyValue = require("./EmptyValue.cjs");
+const NumericValue = require("./NumericValue.cjs");
+const TextValue = require("./TextValue.cjs");
 const getRenderer = (renderer, operator) => (
   // 1. Custom renderer
   typeof renderer === "function" && renderer || // 2. Custom operator renderer
@@ -72,5 +71,4 @@ const Value = ({
       return /* @__PURE__ */ jsxRuntime.jsx(TextValue.TextValue, { id, value: valueProp, initialTouched });
   }
 };
-React.memo(Value);
 exports.Value = Value;

package/dist/cjs/Radio/Radio.cjs

@@ -115,11 +115,11 @@ const HvRadio = React.forwardRef(
             "div",
             {
               className: cx(classes.container, {
-                [classes.disabled]: disabled,
                 [classes.focusVisible]: !!(focusVisible && label),
-                [classes.invalidContainer]: isStateInvalid,
+                [classes.semantic]: semantic,
                 [classes.checked]: isChecked,
-                [classes.semantic]: semantic
+                [classes.invalidContainer]: isStateInvalid,
+                [classes.disabled]: disabled
               }),
               children: [
                 radio,

package/dist/cjs/Section/Section.cjs

@@ -16,6 +16,7 @@ const HvSection = React.forwardRef(
       title,
       expandable,
       expanded,
+      expandableHeader,
       defaultExpanded = true,
       actions,
       onToggle,
@@ -26,6 +27,7 @@ const HvSection = React.forwardRef(
       ...others
     } = uikitReactUtils.useDefaultProps("HvSection", props);
     const { classes, cx } = Section_styles.useClasses(classesProp);
+    const expandButtonRef = React.useRef(null);
     const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
       id,
       expanded,
@@ -42,24 +44,47 @@ const HvSection = React.forwardRef(
         }),
         ...others,
         children: [
-          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
-            expandable && /* @__PURE__ */ jsxRuntime.jsx(
-              Button.HvButton,
-              {
-                icon: true,
-                onClick: (event) => {
-                  toggleOpen();
-                  onToggle?.(event, !isOpen);
-                },
-                "aria-label": isOpen ? "Collapse" : "Expand",
-                ...buttonProps,
-                ...expandButtonProps,
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
-              }
-            ),
-            title,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
-          ] }),
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx(classes.header, {
+                [classes.headerExpandable]: expandable && expandableHeader
+              }),
+              onClick: () => {
+                if (!expandableHeader) return;
+                expandButtonRef.current?.click();
+              },
+              children: [
+                expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.HvButton,
+                  {
+                    ref: expandButtonRef,
+                    icon: true,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      toggleOpen();
+                      onToggle?.(event, !isOpen);
+                    },
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...buttonProps,
+                    ...expandButtonProps,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
+                  }
+                ),
+                title,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: classes.actions,
+                    onClick: (evt) => {
+                      evt.stopPropagation();
+                    },
+                    children: actions
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/cjs/Section/Section.styles.cjs

@@ -9,6 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     flexDirection: "column",
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.round,
+    overflow: "hidden",
     border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   hidden: { height: 0, display: "none" },
@@ -17,12 +18,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     alignItems: "center",
     borderColor: "inherit",
     position: "relative",
-    padding: uikitStyles.theme.space.sm
+    padding: uikitStyles.theme.space.sm,
+    "+ $content": {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  },
+  headerExpandable: {
+    cursor: "pointer",
+    ":hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    }
   },
   content: {
     padding: uikitStyles.theme.space.sm,
     borderRadius: "inherit",
-    borderColor: "inherit"
+    borderColor: "inherit",
+    flex: 1
   },
   hasHeader: {
     paddingTop: 0

package/dist/cjs/Select/Select.cjs

@@ -131,8 +131,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
       readOnly,
       status: validationState,
       className: cx(classes.root, className, {
-        [classes.disabled]: disabled,
-        [classes.readOnly]: readOnly
+        [classes.readOnly]: readOnly,
+        [classes.disabled]: disabled
       }),
       ...others,
       children: [

package/dist/cjs/Switch/Switch.cjs

@@ -121,7 +121,7 @@ const HvSwitch = React.forwardRef(
                       switchBase: css({
                         "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
                           backgroundColor: uikitStyles.getColor(color),
-                          borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}_120`) : "#00000032"
+                          borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}Deep`) : "#00000032"
                         }
                       })
                     }

package/dist/cjs/Table/TableSection/TableSection.styles.cjs

@@ -16,13 +16,7 @@ const TableContainer_styles = require("../TableContainer/TableContainer.styles.c
 require("../TableContainer/TableContainer.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
   root: {},
-  header: {
-    // Only apply the border to divide the header and content when both are displayed
-    "+ div": {
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    }
-  },
+  header: {},
   actions: {},
   content: {
     marginTop: 0,

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -296,8 +296,8 @@ const HvTagsInput = React.forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
-            [classes.readOnly]: readOnly
+            [classes.readOnly]: readOnly,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/cjs/TextArea/TextArea.cjs

@@ -190,8 +190,8 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
         classes.root,
         {
           [classes.resizable]: resizable,
-          [classes.disabled]: disabled,
-          [classes.invalid]: isStateInvalid
+          [classes.invalid]: isStateInvalid,
+          [classes.disabled]: disabled
         },
         className
       ),

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -387,7 +387,6 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
         className: cx(
           classes.node,
           {
-            [classes.disabled]: disabled,
             [classes.expandable]: expandable,
             [classes.collapsed]: expandable && !expanded,
             [classes.expanded]: expandable && expanded,
@@ -396,7 +395,8 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
             [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
             [classes.unselected]: !disabled && selectable && !selected,
             [classes.focused]: focused,
-            [classes.hide]: !isOpen && !useIcons
+            [classes.hide]: !isOpen && !useIcons,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/cjs/providers/Provider.cjs

@@ -5,14 +5,12 @@ const React = require("react");
 const createCache = require("@emotion/cache");
 const react = require("@emotion/react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
 const document = require("../utils/document.cjs");
 const theme = require("../utils/theme.cjs");
 const ThemeProvider = require("./ThemeProvider.cjs");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const createCache__default = /* @__PURE__ */ _interopDefault(createCache);
-const scopedRootPrefix = "hv-uikit-scoped-root";
 const HvProvider = ({
   children,
   rootElementId,
@@ -24,8 +22,7 @@ const HvProvider = ({
   emotionCache: emotionCacheProp,
   classNameKey = uikitReactShared.defaultCacheKey
 }) => {
-  const generatedId = useUniqueId.useUniqueId();
-  const scopedRootId = `${scopedRootPrefix}-${generatedId}`;
+  const scopedRootId = React.useId();
   const themesList = theme.processThemes(themes);
   const emotionCache = React.useMemo(() => {
     if (emotionCacheProp) return emotionCacheProp;

package/dist/cjs/themes/ds3.cjs

@@ -490,6 +490,22 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
       classes: {
         titleText: {
           ...uikitStyles.theme.typography.xxsTitle
+        },
+        root: {
+          "& .HvStatusIcon-root": {
+            padding: 0
+          },
+          "& .HvIconContainer-root": {
+            color: `${uikitStyles.theme.colors.secondary}!important`
+          }
+        }
+      }
+    },
+    HvDialogContent: {
+      classes: {
+        root: {
+          borderTop: "none!important",
+          borderBottom: "none!important"
         }
       }
     },

package/dist/cjs/themes/ds5.cjs

@@ -147,6 +147,26 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
           "--tagColor": uikitStyles.theme.alpha("cat1", 0.2)
         }
       }
+    },
+    HvDialogTitle: {
+      classes: {
+        root: {
+          "& .HvStatusIcon-root": {
+            padding: 0
+          },
+          "& .HvIconContainer-root": {
+            color: `${uikitStyles.theme.colors.secondary}!important`
+          }
+        }
+      }
+    },
+    HvDialogContent: {
+      classes: {
+        root: {
+          borderTop: "none",
+          borderBottom: "none"
+        }
+      }
     }
   }
 });