@apptane/react-ui-cue/dist/Cue.js

Visual cue component in Apptane React UI framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "header", "appearance", "placement", "maxWidth", "intent", "trigger", "color", "name", "data", "size", "zIndex", "inline", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "m", "mt", "mr", "mb", "ml"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { HoverOrClickTriggerOptions, Trigger } from "@apptane/react-ui-behaviors";
import { getIntentIconAndColor, hasChildContent, StyleMargin } from "@apptane/react-ui-core";
import { Icon } from "@apptane/react-ui-icon";
import { Tooltip } from "@apptane/react-ui-tooltip";
import { css } from "@emotion/react";
import { memo } from "react";
import { CuePropTypes } from "./Cue.types.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";

const StyleBase = (size, inline) => /*#__PURE__*/css("display:", inline ? "inline-flex" : "flex", ";vertical-align:middle;width:", size, "px;height:", size, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleBase;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9DdWUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF5RCIsImZpbGUiOiIuLi9zcmMvQ3VlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEhvdmVyT3JDbGlja1RyaWdnZXJPcHRpb25zLCBUcmlnZ2VyIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWJlaGF2aW9yc1wiO1xuaW1wb3J0IHsgZ2V0SW50ZW50SWNvbkFuZENvbG9yLCBoYXNDaGlsZENvbnRlbnQsIFN0eWxlTWFyZ2luIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWNvcmVcIjtcbmltcG9ydCB7IEljb24gfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktaWNvblwiO1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS10b29sdGlwXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IG1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IEN1ZVByb3BzLCBDdWVQcm9wVHlwZXMgfSBmcm9tIFwiLi9DdWUudHlwZXMuanNcIjtcblxuY29uc3QgU3R5bGVCYXNlID0gKHNpemU6IG51bWJlciwgaW5saW5lPzogYm9vbGVhbikgPT4gY3NzYFxuICBkaXNwbGF5OiAke2lubGluZSA/IFwiaW5saW5lLWZsZXhcIiA6IFwiZmxleFwifTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgd2lkdGg6ICR7c2l6ZX1weDtcbiAgaGVpZ2h0OiAke3NpemV9cHg7XG5gO1xuXG4vKipcbiAqIGBDdWVgIGNvbXBvbmVudCDigJQgaWNvbiB3aXRoIGEgdG9vbHRpcCBkaXNwbGF5ZWQgb24gY2xpY2sgb3IgaG92ZXIuXG4gKi9cbmZ1bmN0aW9uIEN1ZSh7XG4gIGNoaWxkcmVuLFxuICBoZWFkZXIsXG4gIGFwcGVhcmFuY2UgPSBcImRlZmF1bHRcIixcbiAgcGxhY2VtZW50ID0gXCJ0b3AtbGVmdFwiLFxuICBtYXhXaWR0aCxcbiAgaW50ZW50ID0gXCJub25lXCIsXG4gIHRyaWdnZXIgPSBIb3Zlck9yQ2xpY2tUcmlnZ2VyT3B0aW9ucyxcbiAgY29sb3IsXG4gIG5hbWU6IGljb25OYW1lLFxuICBkYXRhOiBpY29uRGF0YSxcbiAgc2l6ZTogaWNvblNpemUgPSAxNixcbiAgekluZGV4LFxuICBpbmxpbmUsXG4gIG1hcmdpbixcbiAgbWFyZ2luVG9wLFxuICBtYXJnaW5SaWdodCxcbiAgbWFyZ2luQm90dG9tLFxuICBtYXJnaW5MZWZ0LFxuICBtLFxuICBtdCxcbiAgbXIsXG4gIG1iLFxuICBtbCxcbiAgLi4ub3RoZXJcbn06IEN1ZVByb3BzKSB7XG4gIGNvbnN0IFtpbnRlbnRJY29uTmFtZSwgaW50ZW50SWNvbkNvbG9yXSA9IGdldEludGVudEljb25BbmRDb2xvcihpbnRlbnQpO1xuXG4gIGNvbnN0IG1hcmdpblByb3BzID0geyBtYXJnaW4sIG1hcmdpblRvcCwgbWFyZ2luUmlnaHQsIG1hcmdpbkJvdHRvbSwgbWFyZ2luTGVmdCwgbSwgbXQsIG1yLCBtYiwgbWwgfTtcbiAgY29uc3QgZWxlbWVudCA9IChcbiAgICA8ZGl2IHsuLi5vdGhlcn0gY3NzPXtbU3R5bGVCYXNlKGljb25TaXplKSwgU3R5bGVNYXJnaW4obWFyZ2luUHJvcHMpXX0+XG4gICAgICA8SWNvbiBjb2xvcj17Y29sb3IgPz8gaW50ZW50SWNvbkNvbG9yfSBuYW1lPXtpY29uTmFtZSA/PyBpbnRlbnRJY29uTmFtZX0gZGF0YT17aWNvbkRhdGF9IHNpemU9e2ljb25TaXplfSAvPlxuICAgIDwvZGl2PlxuICApO1xuXG4gIGlmICghaGFzQ2hpbGRDb250ZW50KGNoaWxkcmVuKSkge1xuICAgIHJldHVybiBlbGVtZW50O1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8VHJpZ2dlclxuICAgICAgdHJpZ2dlcj17dHJpZ2dlcn1cbiAgICAgIHBsYWNlbWVudD17cGxhY2VtZW50fVxuICAgICAgaW5saW5lPXtpbmxpbmV9XG4gICAgICB6SW5kZXg9e3pJbmRleH1cbiAgICAgIHByZXZlbnREZWZhdWx0XG4gICAgICBjb21wb25lbnQ9e1xuICAgICAgICA8VG9vbHRpcCBhcHBlYXJhbmNlPXthcHBlYXJhbmNlfSBoZWFkZXI9e2hlYWRlcn0gbWF4V2lkdGg9e21heFdpZHRofT5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIH0+XG4gICAgICB7ZWxlbWVudH1cbiAgICA8L1RyaWdnZXI+XG4gICk7XG59XG5cbkN1ZS5kaXNwbGF5TmFtZSA9IFwiQ3VlXCI7XG5DdWUucHJvcFR5cGVzID0gQ3VlUHJvcFR5cGVzO1xuXG4vKipcbiAqIGBDdWVgIGNvbXBvbmVudCDigJQgaWNvbiB3aXRoIGEgdG9vbHRpcCBkaXNwbGF5ZWQgb24gY2xpY2sgb3IgaG92ZXIuXG4gKi9cbmV4cG9ydCBkZWZhdWx0IG1lbW8oQ3VlKTtcbiJdfQ== */");
/**
 * `Cue` component — icon with a tooltip displayed on click or hover.
 */


function Cue(_ref) {
  let {
    children,
    header,
    appearance = "default",
    placement = "top-left",
    maxWidth,
    intent = "none",
    trigger = HoverOrClickTriggerOptions,
    color,
    name: iconName,
    data: iconData,
    size: iconSize = 16,
    zIndex,
    inline,
    margin,
    marginTop,
    marginRight,
    marginBottom,
    marginLeft,
    m,
    mt,
    mr,
    mb,
    ml
  } = _ref,
      other = _objectWithoutProperties(_ref, _excluded);

  const [intentIconName, intentIconColor] = getIntentIconAndColor(intent);
  const marginProps = {
    margin,
    marginTop,
    marginRight,
    marginBottom,
    marginLeft,
    m,
    mt,
    mr,
    mb,
    ml
  };

  const element = _jsx("div", _objectSpread(_objectSpread({}, other), {}, {
    css: [StyleBase(iconSize), StyleMargin(marginProps), process.env.NODE_ENV === "production" ? "" : ";label:element;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9DdWUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEb0IiLCJmaWxlIjoiLi4vc3JjL0N1ZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBIb3Zlck9yQ2xpY2tUcmlnZ2VyT3B0aW9ucywgVHJpZ2dlciB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS1iZWhhdmlvcnNcIjtcbmltcG9ydCB7IGdldEludGVudEljb25BbmRDb2xvciwgaGFzQ2hpbGRDb250ZW50LCBTdHlsZU1hcmdpbiB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS1jb3JlXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLWljb25cIjtcbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktdG9vbHRpcFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBDdWVQcm9wcywgQ3VlUHJvcFR5cGVzIH0gZnJvbSBcIi4vQ3VlLnR5cGVzLmpzXCI7XG5cbmNvbnN0IFN0eWxlQmFzZSA9IChzaXplOiBudW1iZXIsIGlubGluZT86IGJvb2xlYW4pID0+IGNzc2BcbiAgZGlzcGxheTogJHtpbmxpbmUgPyBcImlubGluZS1mbGV4XCIgOiBcImZsZXhcIn07XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAke3NpemV9cHg7XG4gIGhlaWdodDogJHtzaXplfXB4O1xuYDtcblxuLyoqXG4gKiBgQ3VlYCBjb21wb25lbnQg4oCUIGljb24gd2l0aCBhIHRvb2x0aXAgZGlzcGxheWVkIG9uIGNsaWNrIG9yIGhvdmVyLlxuICovXG5mdW5jdGlvbiBDdWUoe1xuICBjaGlsZHJlbixcbiAgaGVhZGVyLFxuICBhcHBlYXJhbmNlID0gXCJkZWZhdWx0XCIsXG4gIHBsYWNlbWVudCA9IFwidG9wLWxlZnRcIixcbiAgbWF4V2lkdGgsXG4gIGludGVudCA9IFwibm9uZVwiLFxuICB0cmlnZ2VyID0gSG92ZXJPckNsaWNrVHJpZ2dlck9wdGlvbnMsXG4gIGNvbG9yLFxuICBuYW1lOiBpY29uTmFtZSxcbiAgZGF0YTogaWNvbkRhdGEsXG4gIHNpemU6IGljb25TaXplID0gMTYsXG4gIHpJbmRleCxcbiAgaW5saW5lLFxuICBtYXJnaW4sXG4gIG1hcmdpblRvcCxcbiAgbWFyZ2luUmlnaHQsXG4gIG1hcmdpbkJvdHRvbSxcbiAgbWFyZ2luTGVmdCxcbiAgbSxcbiAgbXQsXG4gIG1yLFxuICBtYixcbiAgbWwsXG4gIC4uLm90aGVyXG59OiBDdWVQcm9wcykge1xuICBjb25zdCBbaW50ZW50SWNvbk5hbWUsIGludGVudEljb25Db2xvcl0gPSBnZXRJbnRlbnRJY29uQW5kQ29sb3IoaW50ZW50KTtcblxuICBjb25zdCBtYXJnaW5Qcm9wcyA9IHsgbWFyZ2luLCBtYXJnaW5Ub3AsIG1hcmdpblJpZ2h0LCBtYXJnaW5Cb3R0b20sIG1hcmdpbkxlZnQsIG0sIG10LCBtciwgbWIsIG1sIH07XG4gIGNvbnN0IGVsZW1lbnQgPSAoXG4gICAgPGRpdiB7Li4ub3RoZXJ9IGNzcz17W1N0eWxlQmFzZShpY29uU2l6ZSksIFN0eWxlTWFyZ2luKG1hcmdpblByb3BzKV19PlxuICAgICAgPEljb24gY29sb3I9e2NvbG9yID8/IGludGVudEljb25Db2xvcn0gbmFtZT17aWNvbk5hbWUgPz8gaW50ZW50SWNvbk5hbWV9IGRhdGE9e2ljb25EYXRhfSBzaXplPXtpY29uU2l6ZX0gLz5cbiAgICA8L2Rpdj5cbiAgKTtcblxuICBpZiAoIWhhc0NoaWxkQ29udGVudChjaGlsZHJlbikpIHtcbiAgICByZXR1cm4gZWxlbWVudDtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFRyaWdnZXJcbiAgICAgIHRyaWdnZXI9e3RyaWdnZXJ9XG4gICAgICBwbGFjZW1lbnQ9e3BsYWNlbWVudH1cbiAgICAgIGlubGluZT17aW5saW5lfVxuICAgICAgekluZGV4PXt6SW5kZXh9XG4gICAgICBwcmV2ZW50RGVmYXVsdFxuICAgICAgY29tcG9uZW50PXtcbiAgICAgICAgPFRvb2x0aXAgYXBwZWFyYW5jZT17YXBwZWFyYW5jZX0gaGVhZGVyPXtoZWFkZXJ9IG1heFdpZHRoPXttYXhXaWR0aH0+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1Rvb2x0aXA+XG4gICAgICB9PlxuICAgICAge2VsZW1lbnR9XG4gICAgPC9UcmlnZ2VyPlxuICApO1xufVxuXG5DdWUuZGlzcGxheU5hbWUgPSBcIkN1ZVwiO1xuQ3VlLnByb3BUeXBlcyA9IEN1ZVByb3BUeXBlcztcblxuLyoqXG4gKiBgQ3VlYCBjb21wb25lbnQg4oCUIGljb24gd2l0aCBhIHRvb2x0aXAgZGlzcGxheWVkIG9uIGNsaWNrIG9yIGhvdmVyLlxuICovXG5leHBvcnQgZGVmYXVsdCBtZW1vKEN1ZSk7XG4iXX0= */"],
    children: _jsx(Icon, {
      color: color !== null && color !== void 0 ? color : intentIconColor,
      name: iconName !== null && iconName !== void 0 ? iconName : intentIconName,
      data: iconData,
      size: iconSize
    })
  }));

  if (!hasChildContent(children)) {
    return element;
  }

  return _jsx(Trigger, {
    trigger: trigger,
    placement: placement,
    inline: inline,
    zIndex: zIndex,
    preventDefault: true,
    component: _jsx(Tooltip, {
      appearance: appearance,
      header: header,
      maxWidth: maxWidth,
      children: children
    }),
    children: element
  });
}

Cue.displayName = "Cue";
Cue.propTypes = CuePropTypes;
/**
 * `Cue` component — icon with a tooltip displayed on click or hover.
 */

export default /*#__PURE__*/memo(Cue);
//# sourceMappingURL=Cue.js.map