@fluentui/react-northstar/dist/es/components/Dropdown/DropdownSelectedItem.js

A themable React component library.

import _invoke from "lodash/invoke";
import { dropdownSelectedItemBehavior, getCode, keyboardKey } from '@fluentui/accessibility';
import { Ref } from '@fluentui/react-component-ref';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { CloseIcon } from '@fluentui/react-icons-northstar';
import { createShorthandFactory, commonPropTypes } from '../../utils';
import { Image } from '../Image/Image';
import { Box } from '../Box/Box';
import { useUnhandledProps, useStyles, useFluentContext, useTelemetry, getElementType, useAccessibility } from '@fluentui/react-bindings';
export var dropdownSelectedItemClassName = 'ui-dropdown__selecteditem';
export var dropdownSelectedItemSlotClassNames = {
  header: dropdownSelectedItemClassName + "__header",
  icon: dropdownSelectedItemClassName + "__icon",
  image: dropdownSelectedItemClassName + "__image"
};
/**
 * A DropdownSelectedItem represents a selected item of 'multiple-selection' Dropdown.
 */
export var DropdownSelectedItem = /*#__PURE__*/function () {
  var DropdownSelectedItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(DropdownSelectedItem.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var active = props.active,
      header = props.header,
      icon = props.icon,
      image = props.image,
      className = props.className,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      disabled = props.disabled;
    var itemRef = React.useRef();
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(DropdownSelectedItem.handledProps, props);
    var getA11yProps = useAccessibility(props.accessibility, {
      debugName: DropdownSelectedItem.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          header: header,
          active: active
        };
      },
      rtl: context.rtl
    });
    React.useEffect(function () {
      if (active) {
        itemRef.current.focus();
      }
    }, [active]);
    var _useStyles = useStyles(DropdownSelectedItem.displayName, {
        className: dropdownSelectedItemClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            hasImage: !!image
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var handleClick = function handleClick(e) {
      if (disabled) return;
      _invoke(props, 'onClick', e, props);
    };
    var handleKeyDown = function handleKeyDown(e) {
      if (disabled) return;
      _invoke(props, 'onKeyDown', e, props);
    };
    var handleIconOverrides = function handleIconOverrides(iconProps) {
      return Object.assign({}, iconProps, {
        onClick: function onClick(e, iconProps) {
          if (disabled) return;
          e.stopPropagation();
          _invoke(props, 'onRemove', e, iconProps);
          _invoke(props, 'onClick', e, iconProps);
        },
        onKeyDown: function onKeyDown(e, iconProps) {
          if (disabled) return;
          e.stopPropagation();
          if (getCode(e) === keyboardKey.Enter) {
            _invoke(props, 'onRemove', e, iconProps);
          }
          _invoke(props, 'onKeyDown', e, iconProps);
        }
      });
    };
    var headerElement = Box.create(header, {
      defaultProps: function defaultProps() {
        return getA11yProps('header', {
          as: 'span',
          className: dropdownSelectedItemSlotClassNames.header,
          styles: resolvedStyles.header
        });
      }
    });
    var iconElement = Box.create(icon, {
      defaultProps: function defaultProps() {
        return getA11yProps('icon', {
          className: dropdownSelectedItemSlotClassNames.icon,
          styles: resolvedStyles.icon
        });
      },
      overrideProps: handleIconOverrides
    });
    var imageElement = Image.create(image, {
      defaultProps: function defaultProps() {
        return getA11yProps('image', {
          avatar: true,
          className: dropdownSelectedItemSlotClassNames.image,
          styles: resolvedStyles.image
        });
      }
    });
    var element = /*#__PURE__*/React.createElement(Ref, {
      innerRef: itemRef
    }, /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
      className: classes.root,
      onClick: handleClick,
      onKeyDown: handleKeyDown,
      ref: ref
    }, unhandledProps)), imageElement, headerElement, iconElement));
    setEnd();
    return element;
  });
  DropdownSelectedItem.displayName = 'DropdownSelectedItem';
  DropdownSelectedItem.propTypes = Object.assign({}, commonPropTypes.createCommon({
    children: false
  }), {
    active: PropTypes.bool,
    header: customPropTypes.itemShorthand,
    icon: customPropTypes.shorthandAllowingChildren,
    image: customPropTypes.itemShorthandWithoutJSX,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    onRemove: PropTypes.func
  });
  DropdownSelectedItem.handledProps = Object.keys(DropdownSelectedItem.propTypes);
  DropdownSelectedItem.defaultProps = {
    accessibility: dropdownSelectedItemBehavior,
    as: 'span',
    icon: /*#__PURE__*/React.createElement(CloseIcon, null)
  };
  DropdownSelectedItem.create = createShorthandFactory({
    Component: DropdownSelectedItem,
    mappedProp: 'header'
  });
  return DropdownSelectedItem;
}();
//# sourceMappingURL=DropdownSelectedItem.js.map