@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/DatePicker/useVisibleDate.cjs

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const React = require("react");
+const utils = require("./utils.cjs");
+function stateToLeftRight({
+  visibleYear,
+  visibleMonth,
+  rightVisibleYear,
+  rightVisibleMonth
+}) {
+  return {
+    left: { year: visibleYear, month: visibleMonth },
+    right: { year: rightVisibleYear, month: rightVisibleMonth }
+  };
+}
+function leftRightToState(left, right) {
+  return {
+    visibleYear: left.year,
+    visibleMonth: left.month,
+    rightVisibleYear: right.year,
+    rightVisibleMonth: right.month
+  };
+}
+function subtractYear({ year, month }) {
+  return { year: year - 1, month };
+}
+function addYear({ year, month }) {
+  return { year: year + 1, month };
+}
+function subtractMonth({ year, month }) {
+  let y = year;
+  let m = month;
+  m -= 1;
+  if (m === 0) {
+    y -= 1;
+    m = 12;
+  }
+  return { year: y, month: m };
+}
+function addMonth({ year, month }) {
+  let y = year;
+  let m = month;
+  m += 1;
+  if (m === 13) {
+    y += 1;
+    m = 1;
+  }
+  return { year: y, month: m };
+}
+function ensureNoOverlap(left, right, keepRight = false) {
+  let l = left;
+  let r = right;
+  if (left.year > right.year || left.year === right.year && left.month >= right.month) {
+    if (keepRight) {
+      l = subtractMonth(right);
+    } else {
+      r = addMonth(left);
+    }
+  }
+  return leftRightToState(l, r);
+}
+function isSameYearMonth(d1, d2) {
+  return d1.year === d2.year && d1.month === d2.month;
+}
+const visibleDateReducer = (state, action) => {
+  let { left, right } = stateToLeftRight(state);
+  switch (action.type) {
+    case "previous_year":
+      if (action.target === "right") {
+        right = subtractYear(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = subtractYear(left);
+      return ensureNoOverlap(left, right, false);
+    case "next_year":
+      if (action.target === "right") {
+        right = addYear(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = addYear(left);
+      return ensureNoOverlap(left, right, false);
+    case "previous_month":
+      if (action.target === "right") {
+        right = subtractMonth(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = subtractMonth(left);
+      return ensureNoOverlap(left, right, false);
+    case "next_month":
+      if (action.target === "right") {
+        right = addMonth(right);
+        return ensureNoOverlap(left, right, true);
+      }
+      left = addMonth(left);
+      return ensureNoOverlap(left, right, false);
+    case "month":
+      if (action.month != null) {
+        if (action.target === "right") {
+          if (right.month !== action.month) {
+            right = { year: right.year, month: action.month };
+            return ensureNoOverlap(left, right, true);
+          }
+        } else if (left.month !== action.month) {
+          left = { year: left.year, month: action.month };
+          return ensureNoOverlap(left, right, false);
+        }
+      }
+      break;
+    case "month_year":
+      if (action.month != null && action.year != null) {
+        if (action.target === "right") {
+          if (!isSameYearMonth(left, action) && !isSameYearMonth(right, action)) {
+            right = { year: action.year, month: action.month };
+            return ensureNoOverlap(left, right, true);
+          }
+        } else if (!isSameYearMonth(left, action) && (action.target === "left" || !isSameYearMonth(right, action))) {
+          left = { year: action.year, month: action.month };
+          return ensureNoOverlap(left, right, false);
+        }
+      }
+      break;
+  }
+  return state;
+};
+function stateFromRange(startDate, endDate) {
+  const initialStartDate = utils.validateDate(startDate);
+  const initialEndDate = endDate != null ? utils.validateDate(endDate) : initialStartDate;
+  return ensureNoOverlap(
+    {
+      year: initialStartDate.getFullYear(),
+      month: initialStartDate.getMonth() + 1
+    },
+    {
+      year: initialEndDate.getFullYear(),
+      month: initialEndDate.getMonth() + 1
+    }
+  );
+}
+function useVisibleDate(startDate, endDate) {
+  return React.useReducer(
+    visibleDateReducer,
+    { startDate, endDate },
+    (initData) => stateFromRange(initData.startDate, initData.endDate)
+  );
+}
+exports.default = useVisibleDate;
+exports.isSameYearMonth = isSameYearMonth;

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

@@ -0,0 +1,60 @@
+"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");
+const Typography = require("../../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiDialogContent__default = /* @__PURE__ */ _interopDefault(MuiDialogContent);
+const HvDialogContent = (props) => {
+  const {
+    classes: classesProp,
+    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
+    }
+  );
+};
+exports.dialogContentClasses = Content_styles.staticClasses;
+exports.HvDialogContent = HvDialogContent;

package/dist/cjs/Dialog/Dialog.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const MuiDialog = require("@mui/material/Dialog");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const document$1 = require("../utils/document.cjs");
+const setId = require("../utils/setId.cjs");
+const context = require("./context.cjs");
+const Dialog_styles = require("./Dialog.styles.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
+const HvDialog = (props) => {
+  const {
+    variant,
+    classes: classesProp,
+    className,
+    id,
+    children,
+    open = false,
+    onClose,
+    firstFocusable,
+    buttonTitle = "Close",
+    fullHeight,
+    fullscreen: fullScreen = false,
+    // TODO: rename to `fullScreen` in v6
+    disableBackdropClick = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDialog", props);
+  const { classes, cx } = Dialog_styles.useClasses(classesProp);
+  const { rootId } = uikitReactUtils.useTheme();
+  const measuredRef = React.useCallback(() => {
+    if (!firstFocusable) return;
+    const element = document.getElementById(firstFocusable);
+    element?.focus();
+  }, [firstFocusable]);
+  const contextValue = React.useMemo(() => ({ fullScreen }), [fullScreen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MuiDialog__default.default,
+    {
+      container: document$1.getElementById(rootId),
+      className,
+      classes: {
+        root: classes.root,
+        paper: cx(classes.paper, classes[variant], {
+          [classes.fullHeight]: fullHeight,
+          [classes.statusBar]: !!variant,
+          [classes.fullscreen]: fullScreen
+        })
+      },
+      id,
+      ref: measuredRef,
+      open,
+      fullScreen,
+      onClose: (event, reason) => {
+        if (disableBackdropClick) return;
+        onClose?.(event, reason);
+      },
+      slotProps: {
+        backdrop: {
+          classes: {
+            root: classes.background
+          }
+        }
+      },
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.HvIconButton,
+          {
+            title: buttonTitle,
+            id: setId.setId(id, "close"),
+            className: classes.closeButton,
+            onClick: (event) => onClose?.(event, void 0),
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Close", compact: true })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(context.DialogContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+};
+exports.dialogClasses = Dialog_styles.staticClasses;
+exports.HvDialog = HvDialog;

package/dist/cjs/Dialog/context.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const DialogContext = React.createContext({ fullScreen: false });
+const useDialogContext = () => React.useContext(DialogContext);
+exports.DialogContext = DialogContext;
+exports.useDialogContext = useDialogContext;

package/dist/cjs/DotPagination/DotPagination.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const helpers = require("../utils/helpers.cjs");
+const DotPagination_styles = require("./DotPagination.styles.cjs");
+const RadioGroup = require("../RadioGroup/RadioGroup.cjs");
+const BaseRadio = require("../BaseRadio/BaseRadio.cjs");
+const currentStep = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) });
+const otherStep = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) });
+const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
+  return {
+    radio: React.cloneElement(radioIcon || otherStep, {
+      className: classes?.icon
+    }),
+    radioChecked: React.cloneElement(radioCheckedIcon || currentStep, {
+      className: classes?.icon
+    })
+  };
+};
+const HvDotPagination = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    unselectedIcon,
+    selectedIcon,
+    pages = 1,
+    page = 0,
+    onPageChange,
+    getItemAriaLabel,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDotPagination", props);
+  const { classes, cx } = DotPagination_styles.useClasses(classesProp);
+  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroup.HvRadioGroup,
+    {
+      className: cx(classes.root, className),
+      classes: {
+        horizontal: classes.horizontal
+      },
+      orientation: "horizontal",
+      ...others,
+      children: helpers.range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+        BaseRadio.HvBaseRadio,
+        {
+          className: cx(classes.radioRoot, classes.radio),
+          value: i,
+          checked: page === i,
+          onChange: (event) => onPageChange?.(event, i),
+          icon: icons.radio,
+          checkedIcon: icons.radioChecked,
+          inputProps: { "aria-label": getItemAriaLabel?.(i) }
+        },
+        i
+      ))
+    }
+  );
+};
+exports.dotPaginationClasses = DotPagination_styles.staticClasses;
+exports.HvDotPagination = HvDotPagination;

package/dist/cjs/Drawer/Drawer.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const MuiDrawer = require("@mui/material/Drawer");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const setId = require("../utils/setId.cjs");
+const Drawer_styles = require("./Drawer.styles.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiDrawer__default = /* @__PURE__ */ _interopDefault(MuiDrawer);
+const HvDrawer = React.forwardRef(function HvDrawer2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    id,
+    children,
+    open,
+    onClose,
+    anchor = "right",
+    buttonTitle = "Close",
+    showBackdrop = true,
+    hideBackdrop,
+    disableBackdropClick = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDrawer", props);
+  const { classes, cx } = Drawer_styles.useClasses(classesProp);
+  const handleOnClose = (event, reason) => {
+    if (reason === "backdropClick" && disableBackdropClick) return;
+    onClose?.(event, reason);
+  };
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MuiDrawer__default.default,
+    {
+      ref,
+      className: cx(classes.root, className),
+      id,
+      anchor,
+      open,
+      classes: {
+        paper: classes.paper
+      },
+      hideBackdrop: shouldHideBackdrop,
+      ...!shouldHideBackdrop && {
+        slotProps: {
+          backdrop: {
+            classes: {
+              root: classes.background
+            }
+          }
+        }
+      },
+      onClose: handleOnClose,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.HvIconButton,
+          {
+            id: setId.setId(id, "close"),
+            className: classes.closeButton,
+            onClick: onClose,
+            title: buttonTitle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Close" })
+          }
+        ),
+        children
+      ]
+    }
+  );
+});
+exports.drawerClasses = Drawer_styles.staticClasses;
+exports.HvDrawer = HvDrawer;

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const context = require("../BaseDropdown/context.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const useLabels = require("../hooks/useLabels.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
+const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const setId = require("../utils/setId.cjs");
+const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const List = require("../List/List.cjs");
+const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
+const DEFAULT_LABELS = {
+  dropdownMenu: "Dropdown menu"
+};
+const HeaderComponent = React.forwardRef(
+  function HeaderComponent2(props, ref) {
+    const { open, icon, disabled, ...others } = props;
+    const { popperPlacement } = context.useBaseDropdownContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownButton.HvDropdownButton,
+      {
+        icon: true,
+        ref,
+        open,
+        disabled,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        placement: popperPlacement,
+        ...others,
+        children: icon || /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical" })
+      }
+    );
+  }
+);
+const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
+  const {
+    id: idProp,
+    classes: classesProp,
+    className,
+    icon,
+    placement = "right",
+    dataList,
+    disablePortal = false,
+    onToggle,
+    onClick,
+    keepOpened = true,
+    disabled = false,
+    expanded,
+    defaultExpanded = false,
+    category = "secondaryGhost",
+    // TODO - remove and update variant default in v6
+    variant,
+    size = "md",
+    labels: labelsProp,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDropDownMenu", props);
+  const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const id = useUniqueId.useUniqueId(idProp);
+  const listId = setId.setId(id, "list");
+  const handleClose = (event) => {
+    setOpen(false);
+    onToggle?.(event, false);
+  };
+  const handleKeyDown = (event) => {
+    if (keyboardUtils.isKey(event, "Tab")) {
+      const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
+      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
+      if (node) setTimeout(() => node.focus(), 0);
+      handleClose(event);
+    }
+    event.preventDefault();
+  };
+  const condensed = React.useMemo(() => dataList.every((el) => !el.icon), [dataList]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseDropdown.HvBaseDropdown,
+    {
+      ref,
+      id,
+      className: cx(classes.root, classes.container, classes.icon, className, {
+        [classes.iconSelected]: open
+        // TODO: rename to open
+      }),
+      classes: {
+        container: classes.baseContainer,
+        panel: classes.menuListRoot
+      },
+      expanded: open && !disabled,
+      headerComponent: HeaderComponent,
+      size,
+      variant: variant ?? category,
+      open,
+      "aria-label": labels.dropdownMenu,
+      icon,
+      placement,
+      variableWidth: true,
+      disablePortal,
+      onToggle: (e, s) => {
+        setOpen(s);
+        onToggle?.(e, s);
+      },
+      disabled,
+      onContainerCreation: (containerEl) => {
+        containerEl?.getElementsByTagName("li")[0]?.focus();
+      },
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        List.HvList,
+        {
+          id: listId,
+          values: dataList,
+          selectable: false,
+          condensed,
+          onClick: (event, item) => {
+            if (!keepOpened) handleClose(event);
+            onClick?.(event, item);
+          },
+          onKeyDown: handleKeyDown,
+          classes: {
+            root: classes.menuList
+          }
+        }
+      )
+    }
+  );
+});
+exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
+exports.HvDropDownMenu = HvDropDownMenu;