'use strict';

var componentsTheming = require('@wise/components-theming');
var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
var CloseButton = require('../common/closeButton/CloseButton.js');
var jsxRuntime = require('react/jsx-runtime');
var typography = require('../common/propsValues/typography.js');

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

module.exports = Chip;
//# sourceMappingURL=Chip.js.map
