@hitachivantara/uikit-react-core 6.6.1 → 6.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,21 +1,23 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { useState, useRef } from "react";
3
- import { useSelect, Popper, SelectProvider } from "@mui/base";
3
+ import { useSelect, SelectProvider } from "@mui/base";
4
4
  import { useForkRef, useControlled } from "@mui/material/utils";
5
5
  import { clsx } from "clsx";
6
- import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
6
+ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
7
7
  import { HvLabelContainer } from "../FormElement/LabelContainer.js";
8
8
  import { useUniqueId } from "../hooks/useUniqueId.js";
9
9
  import { fixedForwardRef } from "../types/generic.js";
10
- import { getContainerElement } from "../utils/document.js";
11
10
  import { setId } from "../utils/setId.js";
12
11
  import { HvOption } from "./Option.js";
13
12
  import { useClasses } from "./Select.styles.js";
14
13
  import { staticClasses } from "./Select.styles.js";
15
14
  import { HvFormElement } from "../FormElement/FormElement.js";
16
15
  import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
16
+ import { HvDropdownPanel } from "../BaseDropdown/BaseDropdownPanel.js";
17
17
  import { HvListContainer } from "../ListContainer/ListContainer.js";
18
18
  import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
19
+ const noop = () => {
20
+ };
19
21
  function defaultRenderValue(options) {
20
22
  if (Array.isArray(options)) {
21
23
  return /* @__PURE__ */ jsx(Fragment, { children: options.map((o) => o.label).join(", ") });
@@ -65,7 +67,6 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
65
67
  ...others
66
68
  } = useDefaultProps("HvSelect", props);
67
69
  const { classes, cx } = useClasses(classesProp);
68
- const { rootId } = useTheme();
69
70
  const [placement, setPlacement] = useState("bottom-start");
70
71
  const buttonRef = useRef(null);
71
72
  const handleButtonRef = useForkRef(ref, buttonRef);
@@ -160,7 +161,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
160
161
  className: cx(classes.select, {
161
162
  [classes.invalid]: validationState === "invalid"
162
163
  }),
163
- placement,
164
+ "data-popper-placement": placement,
164
165
  size,
165
166
  variant,
166
167
  "aria-label": ariaLabel,
@@ -175,32 +176,25 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
175
176
  }
176
177
  ),
177
178
  /* @__PURE__ */ jsx(
178
- Popper,
179
+ HvDropdownPanel,
179
180
  {
180
181
  role: "none",
181
182
  open: isOpen,
182
183
  keepMounted: true,
184
+ variableWidth,
183
185
  disablePortal: !enablePortal,
184
- container: enablePortal ? getContainerElement(rootId) : void 0,
185
186
  anchorEl: buttonRef.current,
186
- className: classes.popper,
187
+ classes: { container: classes.popper, panel: classes.panel },
187
188
  placement,
188
- modifiers: [
189
- {
190
- enabled: true,
191
- phase: "main",
192
- fn: ({ state }) => setPlacement(state.placement)
193
- }
194
- ],
189
+ onFirstUpdate: (state) => setPlacement(state.placement),
190
+ onClickAway: noop,
191
+ onToggle: noop,
195
192
  children: /* @__PURE__ */ jsx(
196
193
  HvListContainer,
197
194
  {
198
195
  condensed: true,
199
196
  selectable: true,
200
- style: {
201
- width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
202
- },
203
- className: classes.panel,
197
+ "data-is-dropdown": true,
204
198
  ...getListboxProps(),
205
199
  children: /* @__PURE__ */ jsx(SelectProvider, { value: contextValue, children })
206
200
  }
@@ -16,20 +16,15 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
16
16
  select: {
17
17
  "&&$invalid": { borderColor: theme.form.errorColor }
18
18
  },
19
- popper: {
20
- zIndex: theme.zIndices.popover
21
- },
19
+ popper: {},
22
20
  panel: {
23
21
  maxHeight: 400,
24
- border: `1px solid ${theme.colors.text}`,
25
- marginTop: -1,
26
- marginBottom: -1,
27
- // panel styles
28
- position: "relative",
22
+ // panel styles overrides
29
23
  padding: theme.space.xs,
30
- backgroundColor: theme.colors.bgContainer,
31
- overflowY: "auto",
32
- borderRadius: "inherit"
24
+ "& > *": {
25
+ padding: 4,
26
+ margin: -4
27
+ }
33
28
  },
34
29
  error: {}
35
30
  });
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { useSlotProps } from "@mui/base";
2
+ import useSlotProps from "@mui/utils/useSlotProps";
3
3
  import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
4
4
  import { HvIcon } from "../icons.js";
5
5
  import { fixedForwardRef } from "../types/generic.js";
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { useForkRef } from "@mui/material/utils";
2
+ import useForkRef from "@mui/utils/useForkRef";
3
3
  import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins.js";
4
4
  import { DEFAULT_TREE_VIEW_CONTEXT_VALUE } from "../TreeViewProvider.js";
5
5
  import { useTreeViewModels } from "./useTreeViewModels.js";
@@ -1,5 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { Popper, ClickAwayListener } from "@mui/base";
2
+ import ClickAwayListener from "@mui/material/ClickAwayListener";
3
+ import Popper from "@mui/material/Popper";
3
4
  import { useTheme } from "@hitachivantara/uikit-react-utils";
4
5
  import { getContainerElement } from "../../utils/document.js";
5
6
  import { HvVerticalNavigation } from "../VerticalNavigation.js";