@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';

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

var _Undo;
const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
  className,
  children
}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
) {
  const prefix = usePrefix.usePrefix();
  const aiLabelContentClasses = cx(className, {
    [`${prefix}--ai-label-content`]: true,
    [`${prefix}--ai-label-content--with-actions`]: false
  });
  return /*#__PURE__*/React.createElement(index.ToggletipContent, {
    className: aiLabelContentClasses
  }, children);
});
AILabelContent.displayName = 'AILabelContent';
AILabelContent.propTypes = {
  /**
   * Specify the content you want rendered inside the AILabel ToggleTip
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be added to the AILabel callout
   */
  className: PropTypes.string
};
const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions({
  className,
  children
}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
) {
  const prefix = usePrefix.usePrefix();
  const aiLabelActionsClasses = cx(className, {
    [`${prefix}--ai-label-actions`]: true
  });
  return /*#__PURE__*/React.createElement(index.ToggletipActions, {
    className: aiLabelActionsClasses
  }, children);
});
AILabelActions.displayName = 'AILabelActions';
AILabelActions.propTypes = {
  /**
   * Specify the content you want rendered inside the AILabel callout toolbar
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be added to the AILabel toolbar
   */
  className: PropTypes.string
};

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

const AILabel = /*#__PURE__*/React.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(className, {
    [`${prefix}--ai-label`]: true,
    [`${prefix}--ai-label--revert`]: revertActive
  });
  const aiLabelButtonClasses = cx({
    [`${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.createElement("div", {
    className: aiLabelClasses,
    ref: ref,
    id: id
  }, revertActive ? /*#__PURE__*/React.createElement(index$1.IconButton, _rollupPluginBabelHelpers.extends({
    onClick: handleOnRevertClick,
    kind: "ghost",
    size: "sm",
    label: revertLabel
  }, rest), _Undo || (_Undo = /*#__PURE__*/React.createElement(iconsReact.Undo, null))) : /*#__PURE__*/React.createElement(index.Toggletip, _rollupPluginBabelHelpers.extends({
    align: align,
    autoAlign: autoAlign,
    alignmentAxisOffset: isSmallIcon ? -24 : 0
  }, rest), /*#__PURE__*/React.createElement(index.ToggletipButton, {
    className: aiLabelButtonClasses,
    label: kind === 'inline' ? '' : ariaLabelText
  }, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--ai-label__text`
  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--ai-label__additional-text`
  }, aiTextLabel || textLabel)), children));
});
AILabel.displayName = 'AILabel';
AILabel.propTypes = {
  ...index.Toggletip.propTypes,
  /**
   * Specify the content you want rendered inside the `AILabel` ToggleTip
   */
  AILabelContent: PropTypes.node,
  /**
   * Specify the correct translation of the AI text
   */
  aiText: PropTypes.string,
  /**
   * @deprecated
   * Specify additional text to be rendered next to the AI label in the inline variant
   */
  aiTextLabel: deprecate.deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
  /**
   * Specify the text that will be provided to the aria-label of the `AILabel` button
   */
  'aria-label': PropTypes.string,
  /**
   * Specify the type of `AILabel`, from the following list of types:
   */
  kind: PropTypes.oneOf(['default', 'inline']),
  /**
   * Callback function that fires when the revert button is clicked
   */
  onRevertClick: PropTypes.func,
  /**
   * Specify whether the revert button should be visible
   */
  revertActive: PropTypes.bool,
  /**
   * Specify the text that should be shown when the revert button is hovered
   */
  revertLabel: PropTypes.string,
  /**
   * Specify the size of the button, from the following list of sizes:
   */
  size: PropTypes.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.deprecate(PropTypes.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.string
};

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