@dnb/eufemia/extensions/forms/Field/MultiSelection/MultiSelectionTrigger.js

DNB Eufemia Design System UI Library

var _span;
import clsx from 'clsx';
import { Button, IconPrimary } from "../../../../components/index.js";
import { combineDescribedBy } from "../../../../shared/component-helper.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function MultiSelectionTrigger({
  id,
  active,
  disabled,
  displayCount,
  totalCount,
  formatSelectionCount,
  onKeyDown,
  triggerProps = {}
}) {
  const selectionCountId = `${id}-selection-count`;
  const {
    className: triggerClassName,
    onKeyDown: triggerKeyDown,
    ...restTriggerProps
  } = triggerProps;
  return _jsx("span", {
    className: "dnb-dropdown dnb-dropdown--stretch dnb-dropdown--default dnb-dropdown--right dnb-dropdown--icon-position-right dnb-dropdown--vertical dnb-form-component" + (active ? " dnb-dropdown--open" : ""),
    children: _jsx("span", {
      className: "dnb-dropdown__inner",
      children: _jsx("span", {
        className: "dnb-dropdown__row",
        children: _jsx("span", {
          className: "dnb-dropdown__shell",
          children: _jsx(Button, {
            variant: "secondary",
            size: "medium",
            role: "combobox",
            "aria-haspopup": "listbox",
            ...restTriggerProps,
            className: clsx('dnb-dropdown__trigger', triggerClassName),
            disabled: disabled,
            customContent: _jsxs(_Fragment, {
              children: [_jsx("span", {
                "aria-hidden": "true",
                className: "dnb-dropdown__text dnb-button__text",
                children: _jsx("span", {
                  className: "dnb-dropdown__text__inner",
                  children: formatSelectionCount(displayCount, totalCount)
                })
              }), _jsx("span", {
                id: selectionCountId,
                className: "dnb-sr-only",
                children: formatSelectionCount(displayCount, totalCount)
              }), _span || (_span = _jsx("span", {
                "aria-hidden": true,
                className: "dnb-dropdown__icon",
                children: _jsx(IconPrimary, {
                  icon: "chevron_down"
                })
              }))]
            }),
            "aria-describedby": combineDescribedBy(restTriggerProps, selectionCountId),
            onKeyDown: event => {
              onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
              triggerKeyDown === null || triggerKeyDown === void 0 || triggerKeyDown(event);
            },
            id: id
          })
        })
      })
    })
  });
}
//# sourceMappingURL=MultiSelectionTrigger.js.map