@carbon/react/lib/components/AILabel/index.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
var React = require('react');
var usePrefix = require('../../internal/usePrefix.js');
var index = require('../Toggletip/index.js');
var index$1 = require('../IconButton/index.js');
var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
var iconsReact = require('@carbon/icons-react');
var useId = require('../../internal/useId.js');
var deprecate = require('../../prop-types/deprecate.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var _Undo;
const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(function AILabelContent({
  className,
  children,
  ...rest
}, ref) {
  const prefix = usePrefix.usePrefix();
  const hasAILabelActions = React__default["default"].Children.toArray(children).some(child => {
    const item = child;
    // TODO: Is there supposed to be a `return` here? If so, this issue would
    // have been caught by ESLint. It's concerning that this code is 7 months
    // old and no one has noticed any issues with it. It also makes me question
    // whether the code is necessary.
    // https://github.com/carbon-design-system/carbon/issues/18991
    item.type === AILabelActions;
  });
  const aiLabelContentClasses = cx__default["default"](className, {
    [`${prefix}--ai-label-content`]: true,
    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
  });
  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
    className: aiLabelContentClasses
  }, children);
});
AILabelContent.displayName = 'AILabelContent';
AILabelContent.propTypes = {
  /**
   * Specify the content you want rendered inside the AILabel ToggleTip
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be added to the AILabel callout
   */
  className: PropTypes__default["default"].string
};
const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(function AILabelActions({
  className,
  children,
  ...rest
}, ref) {
  const prefix = usePrefix.usePrefix();
  const aiLabelActionsClasses = cx__default["default"](className, {
    [`${prefix}--ai-label-actions`]: true
  });
  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
    className: aiLabelActionsClasses
  }, children);
});
AILabelActions.displayName = 'AILabelActions';
AILabelActions.propTypes = {
  /**
   * Specify the content you want rendered inside the AILabel callout toolbar
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be added to the AILabel toolbar
   */
  className: PropTypes__default["default"].string
};

/**
 * Deprecated popover alignment values.
 * @deprecated Use NewPopoverAlignment instead.
 */

const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILabel({
  aiText = 'AI',
  aiTextLabel,
  textLabel,
  align,
  autoAlign = true,
  children,
  className,
  kind = 'default',
  onRevertClick,
  revertActive,
  revertLabel = 'Revert to AI input',
  slugLabel = 'Show information',
  ['aria-label']: ariaLabel = 'Show information',
  size = 'xs',
  ...rest
}, ref) {
  const prefix = usePrefix.usePrefix();
  const id = useId.useId('AILabel');
  const aiLabelClasses = cx__default["default"](className, {
    [`${prefix}--ai-label`]: true,
    [`${prefix}--ai-label--revert`]: revertActive
  });
  const aiLabelButtonClasses = cx__default["default"]({
    [`${prefix}--ai-label__button`]: true,
    [`${prefix}--ai-label__button--${size}`]: size,
    [`${prefix}--ai-label__button--${kind}`]: kind,
    [`${prefix}--ai-label__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
  });
  const handleOnRevertClick = evt => {
    if (onRevertClick) {
      onRevertClick(evt);
    }
  };
  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
  const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: aiLabelClasses,
    ref: ref,
    id: id
  }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
    onClick: handleOnRevertClick,
    kind: "ghost",
    size: "sm",
    label: revertLabel
  }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
    align: align,
    autoAlign: autoAlign,
    alignmentAxisOffset: isSmallIcon ? -24 : 0
  }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
    className: aiLabelButtonClasses,
    label: kind === 'inline' ? '' : ariaLabelText
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--ai-label__text`
  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--ai-label__additional-text`
  }, aiTextLabel || textLabel)), children));
});
AILabel.displayName = 'AILabel';
AILabel.propTypes = {
  /**
   * Specify the content you want rendered inside the `AILabel` ToggleTip
   */
  AILabelContent: PropTypes__default["default"].node,
  /**
   * Specify the correct translation of the AI text
   */
  aiText: PropTypes__default["default"].string,
  /**
   * @deprecated
   * Specify additional text to be rendered next to the AI label in the inline variant
   */
  aiTextLabel: deprecate["default"](PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
  /**
   * Specify how the popover should align with the button
   */
  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
  // deprecated use top-start instead
  'top-right',
  // deprecated use top-end instead

  'bottom', 'bottom-left',
  // deprecated use bottom-start instead
  'bottom-right',
  // deprecated use bottom-end instead

  'left', 'left-bottom',
  // deprecated use left-end instead
  'left-top',
  // deprecated use left-start instead

  'right', 'right-bottom',
  // deprecated use right-end instead
  'right-top',
  // deprecated use right-start instead

  // new values to match floating-ui
  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
  /**
   * Specify the text that will be provided to the aria-label of the `AILabel` button
   */
  'aria-label': PropTypes__default["default"].string,
  /**
   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
   */
  autoAlign: PropTypes__default["default"].bool,
  /**
   * Specify the content you want rendered inside the `AILabel` ToggleTip
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be added to the `AILabel`
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify the type of `AILabel`, from the following list of types:
   */
  kind: PropTypes__default["default"].oneOf(['default', 'inline']),
  /**
   * Callback function that fires when the revert button is clicked
   */
  onRevertClick: PropTypes__default["default"].func,
  /**
   * Specify whether the revert button should be visible
   */
  revertActive: PropTypes__default["default"].bool,
  /**
   * Specify the text that should be shown when the revert button is hovered
   */
  revertLabel: PropTypes__default["default"].string,
  /**
   * Specify the size of the button, from the following list of sizes:
   */
  size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
  /**
   * @deprecated
   * Specify the text that will be provided to the aria-label of the `AILabel` button
   */
  slugLabel: deprecate["default"](PropTypes__default["default"].string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
  /**
   * Specify additional text to be rendered next to the AI label in the inline variant
   */
  textLabel: PropTypes__default["default"].string
};

exports.AILabel = AILabel;
exports.AILabelActions = AILabelActions;
exports.AILabelContent = AILabelContent;