@hitachivantara/uikit-react-core/dist/esm/Pagination/Select.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useState } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./Select.styles.js";
import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
import { HvPanel } from "../Panel/Panel.js";
import { HvSelectionList } from "../SelectionList/SelectionList.js";
import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
const Option = ({ ...props }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
const HvSelect = (props) => {
  const {
    className,
    classes: classesProp,
    onChange,
    disabled,
    value,
    children,
    ...others
  } = useDefaultProps("HvPaginationSelect", props);
  const { classes } = useClasses(classesProp);
  const [open, setOpen] = useState(false);
  const handleSelect = (evt, val) => {
    onChange?.(evt, val);
    setOpen(false);
  };
  const handleToggle = (_evt, s) => {
    setOpen(s);
  };
  const setFocusToContent = (containerRef) => {
    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
    listItems.every((listItem) => {
      if (listItem.tabIndex >= 0) {
        listItem.focus();
        return false;
      }
      return true;
    });
  };
  return /* @__PURE__ */ jsx(
    HvBaseDropdown,
    {
      className,
      classes: {
        selection: classes.selection,
        header: classes.header,
        headerOpen: classes.headerOpen,
        root: classes.root
      },
      expanded: open,
      onToggle: handleToggle,
      onContainerCreation: setFocusToContent,
      placeholder: value,
      disabled,
      variableWidth: true,
      ...others,
      children: /* @__PURE__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, { value, onChange: handleSelect, children }) })
    }
  );
};
export {
  Option,
  HvSelect as default
};