import { clsx } from 'clsx';
import { useRef, useEffect } from 'react';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

const Chip = ({
  label,
  value,
  onRemove,
  onClick,
  onKeyPress,
  className = undefined,
  'aria-label': ariaLabel,
  'aria-checked': ariaChecked,
  role,
  closeButton
}) => {
  const isActionable = onClick || onKeyPress;
  const defaultRole = isActionable ? 'button' : undefined;
  const tabIndex = isActionable ? 0 : -1;
  const closeButtonReference = useRef(null);
  const previousCloseButtonShown = useRef(undefined);
  useEffect(() => {
    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
      closeButtonReference.current?.focus();
    }
    previousCloseButtonShown.current = closeButtonReference.current != null;
  }, [onRemove]);
  return /*#__PURE__*/jsxs("div", {
    role: role ?? defaultRole,
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    "aria-checked": ariaChecked,
    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
    ...(isActionable && {
      onClick,
      onKeyPress
    }),
    children: [/*#__PURE__*/jsx(Body, {
      "aria-hidden": !!onRemove,
      type: Typography.BODY_DEFAULT_BOLD,
      children: label
    }), onRemove ? /*#__PURE__*/jsx(CloseButton, {
      ref: closeButtonReference,
      className: "btn-unstyled",
      "aria-label": closeButton?.['aria-label'],
      size: "sm",
      filled: true,
      onClick: onRemove
    }) : null]
  }, value);
};

export { Chip as default };
//# sourceMappingURL=Chip.mjs.map
