@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -1,91 +1,74 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useMemo } from "react";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import Popper from "@mui/material/Popper";
-import { useDefaultProps, useTheme, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { isKey } from "../utils/keyboardUtils.js";
+import { HvPanel } from "../Panel/Panel.js";
 import { getContainerElement } from "../utils/document.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
-import { isKey } from "../utils/keyboardUtils.js";
 import { usePopperModifiers } from "./utils.js";
-import { HvPanel } from "../Panel/Panel.js";
-const name = "HvDropdownPanel";
-const { useClasses } = createClasses(name, {
-  container: {
-    zIndex: theme.zIndices.popover,
-    width: "auto"
-  },
-  panel: {
-    padding: theme.space.xs,
-    border: `1px solid ${theme.colors.text}`
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Popper from "@mui/material/Popper";
+//#region src/BaseDropdown/BaseDropdownPanel.tsx
+var name = "HvDropdownPanel";
+var { useClasses } = createClasses(name, {
+	container: {
+		zIndex: theme.zIndices.popover,
+		width: "auto"
+	},
+	panel: {
+		padding: theme.space.xs,
+		border: `1px solid ${theme.colors.text}`
+	}
 });
-const HvDropdownPanel = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    containerId,
-    children,
-    variableWidth = true,
-    anchorEl,
-    disablePortal,
-    modifiers: modifiersProp,
-    popperOptions: popperOptionsProp,
-    onToggle,
-    onClickAway,
-    onFirstUpdate,
-    ...others
-  } = useDefaultProps(name, props);
-  const { classes, cx } = useClasses(classesProp, false);
-  const { rootId } = useTheme();
-  const popperRef = useRef(null);
-  const [placement, setPlacement] = useState();
-  const modifiers = usePopperModifiers({
-    variableWidth,
-    modifiers: modifiersProp,
-    onPlacementChange: setPlacement
-  });
-  const popperOptions = useMemo(() => {
-    return { ...popperOptionsProp, onFirstUpdate };
-  }, [onFirstUpdate, popperOptionsProp]);
-  const handleKeyDown = (event) => {
-    if (isKey(event, "Esc")) {
-      onToggle?.(event);
-    }
-    if (isKey(event, "Tab") && !event.shiftKey) {
-      const focusList = getFirstAndLastFocus(
-        popperRef.current?.state?.elements.popper
-      );
-      if (document.activeElement === focusList?.last) {
-        event.preventDefault();
-        focusList?.first?.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Popper,
-    {
-      anchorEl,
-      popperRef,
-      disablePortal,
-      container: !disablePortal ? getContainerElement(rootId) : void 0,
-      className: cx(classes.container, className),
-      modifiers,
-      onKeyDown: handleKeyDown,
-      popperOptions,
-      ...others,
-      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
-        HvPanel,
-        {
-          id: containerId,
-          className: classes.panel,
-          "data-popper-placement": placement,
-          children
-        }
-      ) })
-    }
-  );
-};
-export {
-  HvDropdownPanel
+var HvDropdownPanel = (props) => {
+	const { classes: classesProp, className, containerId, children, variableWidth = true, anchorEl, disablePortal, modifiers: modifiersProp, popperOptions: popperOptionsProp, onToggle, onClickAway, onFirstUpdate, ...others } = useDefaultProps(name, props);
+	const { classes, cx } = useClasses(classesProp, false);
+	const { rootId } = useTheme();
+	const popperRef = useRef(null);
+	const [placement, setPlacement] = useState();
+	const modifiers = usePopperModifiers({
+		variableWidth,
+		modifiers: modifiersProp,
+		onPlacementChange: setPlacement
+	});
+	const popperOptions = useMemo(() => {
+		return {
+			...popperOptionsProp,
+			onFirstUpdate
+		};
+	}, [onFirstUpdate, popperOptionsProp]);
+	/** Handle keyboard inside children container. */
+	const handleKeyDown = (event) => {
+		if (isKey(event, "Esc")) onToggle?.(event);
+		if (isKey(event, "Tab") && !event.shiftKey) {
+			const focusList = getFirstAndLastFocus(popperRef.current?.state?.elements.popper);
+			if (document.activeElement === focusList?.last) {
+				event.preventDefault();
+				focusList?.first?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ jsx(Popper, {
+		anchorEl,
+		popperRef,
+		disablePortal,
+		container: !disablePortal ? getContainerElement(rootId) : void 0,
+		className: cx(classes.container, className),
+		modifiers,
+		onKeyDown: handleKeyDown,
+		popperOptions,
+		...others,
+		children: /* @__PURE__ */ jsx(ClickAwayListener, {
+			onClickAway,
+			children: /* @__PURE__ */ jsx(HvPanel, {
+				id: containerId,
+				className: classes.panel,
+				"data-popper-placement": placement,
+				children
+			})
+		})
+	});
 };
+//#endregion
+export { HvDropdownPanel };

package/dist/BaseDropdown/utils.js

@@ -1,79 +1,80 @@
 import { useMemo } from "react";
 import { detectOverflow } from "@popperjs/core";
-function usePopperModifiers({
-  variableWidth,
-  modifiers,
-  onPlacementChange
-}) {
-  return useMemo(
-    () => [
-      {
-        name: "placementListener",
-        enabled: true,
-        phase: "main",
-        fn: ({ state }) => onPlacementChange?.(state.placement)
-      },
-      {
-        name: "fixedWidth",
-        enabled: !variableWidth,
-        phase: "beforeWrite",
-        requires: ["computeStyles"],
-        fn: ({ state }) => {
-          state.styles.popper.width = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-          const { popper, reference } = state.elements;
-          popper.style.width = `${reference.offsetWidth}px`;
-        }
-      },
-      {
-        name: "minSize",
-        enabled: true,
-        phase: "main",
-        fn: ({ state }) => {
-          state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-          const { popper, reference } = state.elements;
-          popper.style.minWidth = `${reference.offsetWidth}px`;
-        }
-      },
-      {
-        name: "maxSize",
-        enabled: true,
-        phase: "main",
-        requiresIfExists: ["offset", "preventOverflow", "flip"],
-        fn: ({ state, name, options }) => {
-          const overflow = detectOverflow(state, options);
-          const x = state.modifiersData.preventOverflow?.x || 0;
-          const y = state.modifiersData.preventOverflow?.y || 0;
-          const popperWidth = state.rects.popper.width;
-          const popperHeight = state.rects.popper.height;
-          const basePlacement = state.placement.split("-")[0];
-          const widthProp = basePlacement === "left" ? "left" : "right";
-          const heightProp = basePlacement === "top" ? "top" : "bottom";
-          state.modifiersData[name] = {
-            width: popperWidth - overflow[widthProp] - x,
-            height: popperHeight - overflow[heightProp] - y
-          };
-        }
-      },
-      {
-        name: "applyMaxSize",
-        enabled: true,
-        phase: "beforeWrite",
-        requires: ["maxSize"],
-        fn: ({ state }) => {
-          const { width, height } = state.modifiersData.maxSize;
-          state.styles.popper.maxWidth = `${width}px`;
-          state.styles.popper.maxHeight = `${height}px`;
-        }
-      },
-      ...modifiers || []
-    ],
-    [modifiers, variableWidth, onPlacementChange]
-  );
+//#region src/BaseDropdown/utils.ts
+function usePopperModifiers({ variableWidth, modifiers, onPlacementChange }) {
+	return useMemo(() => [
+		{
+			name: "placementListener",
+			enabled: true,
+			phase: "main",
+			fn: ({ state }) => onPlacementChange?.(state.placement)
+		},
+		{
+			name: "fixedWidth",
+			enabled: !variableWidth,
+			phase: "beforeWrite",
+			requires: ["computeStyles"],
+			fn: ({ state }) => {
+				state.styles.popper.width = `${state.rects.reference.width}px`;
+			},
+			effect: ({ state }) => {
+				const { popper, reference } = state.elements;
+				popper.style.width = `${reference.offsetWidth}px`;
+			}
+		},
+		{
+			name: "minSize",
+			enabled: true,
+			phase: "main",
+			fn: ({ state }) => {
+				state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+			},
+			effect: ({ state }) => {
+				const { popper, reference } = state.elements;
+				popper.style.minWidth = `${reference.offsetWidth}px`;
+			}
+		},
+		{
+			name: "maxSize",
+			enabled: true,
+			phase: "main",
+			requiresIfExists: [
+				"offset",
+				"preventOverflow",
+				"flip"
+			],
+			fn: ({ state, name, options }) => {
+				const overflow = detectOverflow(state, options);
+				const x = state.modifiersData.preventOverflow?.x || 0;
+				const y = state.modifiersData.preventOverflow?.y || 0;
+				const popperWidth = state.rects.popper.width;
+				const popperHeight = state.rects.popper.height;
+				const basePlacement = state.placement.split("-")[0];
+				const widthProp = basePlacement === "left" ? "left" : "right";
+				const heightProp = basePlacement === "top" ? "top" : "bottom";
+				state.modifiersData[name] = {
+					width: popperWidth - overflow[widthProp] - x,
+					height: popperHeight - overflow[heightProp] - y
+				};
+			}
+		},
+		{
+			name: "applyMaxSize",
+			enabled: true,
+			phase: "beforeWrite",
+			requires: ["maxSize"],
+			fn: ({ state }) => {
+				const { width, height } = state.modifiersData.maxSize;
+				state.styles.popper.maxWidth = `${width}px`;
+				state.styles.popper.maxHeight = `${height}px`;
+			}
+		},
+		...modifiers || []
+	], [
+		modifiers,
+		variableWidth,
+		onPlacementChange
+	]);
 }
-export {
-  usePopperModifiers
-};
+//#endregion
+export { usePopperModifiers };

package/dist/BaseInput/BaseInput.js

@@ -1,92 +1,56 @@
-import { jsx } from "react/jsx-runtime";
+import { HvFormElementContext, HvFormElementDescriptorsContext } from "../FormElement/context.js";
+import { buildAriaPropsFromContext, buildFormElementPropsFromContext } from "../FormElement/utils.js";
+import { useClasses } from "./BaseInput.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { forwardRef, useContext } from "react";
-import MuiInputBase from "@mui/material/InputBase";
+import { jsx } from "react/jsx-runtime";
 import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./BaseInput.styles.js";
-import { staticClasses } from "./BaseInput.styles.js";
-import { HvFormElementContext, HvFormElementDescriptorsContext } from "../FormElement/context.js";
-import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../FormElement/utils.js";
-const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
-  const {
-    classes: classesProp,
-    className = "",
-    id,
-    name,
-    value,
-    defaultValue,
-    required,
-    readOnly,
-    disabled,
-    onChange,
-    type = "text",
-    placeholder,
-    multiline,
-    resizable,
-    invalid: invalidProp,
-    inputRef,
-    inputProps = {},
-    ...others
-  } = useDefaultProps("HvBaseInput", props);
-  const { classes, cx } = useClasses(classesProp);
-  const formElementContext = useContext(HvFormElementContext);
-  const formElementProps = buildFormElementPropsFromContext(
-    name,
-    disabled,
-    readOnly,
-    required,
-    formElementContext
-  );
-  const forkedRef = useForkRef(ref, inputRef);
-  const invalid = invalidProp || formElementProps.status === "invalid";
-  const formElementDescriptorsContext = useContext(
-    HvFormElementDescriptorsContext
-  );
-  const ariaProps = buildAriaPropsFromContext(
-    inputProps,
-    formElementDescriptorsContext,
-    invalid,
-    id
-  );
-  return /* @__PURE__ */ jsx(
-    MuiInputBase,
-    {
-      id,
-      name: formElementProps.name,
-      value,
-      defaultValue,
-      placeholder,
-      readOnly: !!formElementProps.readOnly,
-      disabled: formElementProps.disabled,
-      onChange: (event) => onChange?.(event, event.target.value),
-      className: cx(classes.root, className, {
-        [classes.multiline]: multiline,
-        [classes.invalid]: invalid,
-        [classes.readOnly]: formElementProps.readOnly,
-        [classes.disabled]: formElementProps.disabled
-      }),
-      classes: {
-        focused: classes.focused,
-        input: cx(classes.input, {
-          [classes.inputResizable]: !formElementProps.disabled && resizable,
-          [classes.inputDisabled]: formElementProps.disabled,
-          [classes.inputReadOnly]: formElementProps.readOnly
-        })
-      },
-      inputProps: {
-        // Avoid the required attribute at the root node
-        required: formElementProps.required,
-        ...inputProps,
-        ...ariaProps
-      },
-      inputRef: forkedRef,
-      multiline,
-      ...multiline ? { rows: 10 } : { type },
-      ...others
-    }
-  );
+import MuiInputBase from "@mui/material/InputBase";
+//#region src/BaseInput/BaseInput.tsx
+/**
+* An Input component that only posses the most basic functionalities.
+* It should be used alongside the other form elements to construct a proper accessible form.
+*/
+var HvBaseInput = forwardRef(function HvBaseInput(props, ref) {
+	const { classes: classesProp, className = "", id, name, value, defaultValue, required, readOnly, disabled, onChange, type = "text", placeholder, multiline, resizable, invalid: invalidProp, inputRef, inputProps = {}, ...others } = useDefaultProps("HvBaseInput", props);
+	const { classes, cx } = useClasses(classesProp);
+	const formElementProps = buildFormElementPropsFromContext(name, disabled, readOnly, required, useContext(HvFormElementContext));
+	const forkedRef = useForkRef(ref, inputRef);
+	const invalid = invalidProp || formElementProps.status === "invalid";
+	const ariaProps = buildAriaPropsFromContext(inputProps, useContext(HvFormElementDescriptorsContext), invalid, id);
+	return /* @__PURE__ */ jsx(MuiInputBase, {
+		id,
+		name: formElementProps.name,
+		value,
+		defaultValue,
+		placeholder,
+		readOnly: !!formElementProps.readOnly,
+		disabled: formElementProps.disabled,
+		onChange: (event) => onChange?.(event, event.target.value),
+		className: cx(classes.root, className, {
+			[classes.multiline]: multiline,
+			[classes.invalid]: invalid,
+			[classes.readOnly]: formElementProps.readOnly,
+			[classes.disabled]: formElementProps.disabled
+		}),
+		classes: {
+			focused: classes.focused,
+			input: cx(classes.input, {
+				[classes.inputResizable]: !formElementProps.disabled && resizable,
+				[classes.inputDisabled]: formElementProps.disabled,
+				[classes.inputReadOnly]: formElementProps.readOnly
+			})
+		},
+		inputProps: {
+			required: formElementProps.required,
+			...inputProps,
+			...ariaProps
+		},
+		inputRef: forkedRef,
+		multiline,
+		...multiline ? { rows: 10 } : { type },
+		...others
+	});
 });
-export {
-  HvBaseInput,
-  staticClasses as baseInputClasses
-};
+//#endregion
+export { HvBaseInput };