@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/es/components/tooltip/tooltip.d.ts

@@ -6,9 +6,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { LitElement } from 'lit';
-import BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
-declare const BXTooltip_base: {
+import CDSPopover from '../popover/popover';
+import '../popover/popover-content';
+declare const CDSTooltip_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -323,52 +323,63 @@ declare const BXTooltip_base: {
             };
         };
     };
-} & typeof LitElement;
+} & typeof CDSPopover;
 /**
  * Trigger button of tooltip.
  *
  * @element cds-tooltip
  */
-declare class BXTooltip extends BXTooltip_base implements BXFloatingMenuTrigger {
+declare class CDSTooltip extends CDSTooltip_base {
     /**
-     * The menu body.
+     * Specify how the trigger should align with the tooltip
      */
-    private _menuBody;
+    align: string;
     /**
-     * The trigger button.
+     * Specify whether the tooltip should be closed when clicked
+     */
+    closeOnActivation: boolean;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen: boolean;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip
      */
-    private _triggerNode;
-    align: string;
-    duration: any;
     enterDelayMs: number;
-    exitDelayMs: number;
     /**
-     * Handles `click` event on this element.
+     * Specify the duration in milliseconds to delay before hiding the tooltip
      */
-    private _handleOver;
+    leaveDelayMs: number;
     /**
-     * Handles `keydown` event on this element.
+     * Handles `mouseover` event on this element.
+     */
+    private _handleHover;
+    /**
+     * Handles `mouseleave` event on this element.
      */
     private _handleHoverOut;
+    /**
+     * Handles `click` event on this element.
+     */
+    private _handleClick;
     /**
      * Handles `keydown` event on this element.
      * Space & enter will toggle state, Escape will only close.
+  
      */
     private _handleKeydown;
     /**
-     * `true` if the dropdown should be open.
+     * Handles `slotchange` event.
      */
-    open: boolean;
-    /**
-     * @returns The position of the trigger button in the viewport.
-     */
-    get triggerPosition(): DOMRect;
+    protected _handleSlotChange({ target }: Event): void;
     connectedCallback(): void;
     updated(changedProperties: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    static get selectorTooltipBody(): string;
-    static styles: any;
+    /**
+     * A selector that will return the CDSTooltipContent.
+     */
+    static get selectorTooltipContent(): string;
+    static get styles(): import("lit").CSSResult;
 }
-export default BXTooltip;
+export default CDSTooltip;
 
 //# sourceMappingURL=tooltip.d.ts.map

package/es/components/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,qBAAqB,MAAM,wCAAwC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG3E;;;;GAIG;AACH,cACM,SACJ,SAAQ,cACR,YAAW,qBAAqB;IAEhC;;OAEG;IACH,OAAO,CAAC,SAAS,CAA+B;IAEhD;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAGnC,KAAK,SAAY;IAGjB,QAAQ,MAAC;IAGT,YAAY,SAAO;IAGnB,WAAW,SAAO;IAElB;;OAEG;IAGH,OAAO,CAAC,WAAW,CAcjB;IAEF;;OAEG;IAGH,OAAO,CAAC,eAAe,CAOrB;IAEF;;;OAGG;IAGH,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IACH,IAAI,eAAe,YAMlB;IAED,iBAAiB;IAoBjB,OAAO,CAAC,iBAAiB,KAAA;IAezB,MAAM;IAwBN,MAAM,KAAK,mBAAmB,WAE7B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"tooltip.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map';\nimport Information16 from '@carbon/icons/lib/information/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport BXFloatingMenu from '../floating-menu/floating-menu';\nimport BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport styles from './tooltip.scss';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass BXTooltip\n  extends HostListenerMixin(LitElement)\n  implements BXFloatingMenuTrigger\n{\n  /**\n   * The menu body.\n   */\n  private _menuBody: BXFloatingMenu | null = null;\n\n  /**\n   * The trigger button.\n   */\n  @query('#trigger')\n  private _triggerNode!: HTMLElement;\n\n  @property({ reflect: true, type: String })\n  align = 'bottom';\n\n  @property({ reflect: true, type: String })\n  duration;\n\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  @property({ attribute: 'exit-delay-ms', type: Number })\n  exitDelayMs = 300;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleOver = async () => {\n    setTimeout(async () => {\n      this.open = !this.open;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { _menuBody: menuBody } = this;\n        (\n          menuBody?.shadowRoot?.querySelector(\n            BXTooltip.selectorTooltipBody\n          ) as HTMLElement\n        )?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = !this.open;\n      }\n    }, this.exitDelayMs);\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      this._handleOver();\n    }\n  };\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * @returns The position of the trigger button in the viewport.\n   */\n  get triggerPosition() {\n    const { _triggerNode: triggerNode } = this;\n    if (!triggerNode) {\n      throw new TypeError('Cannot find the trigger button.');\n    }\n    return triggerNode.getBoundingClientRect();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      // TODO: Should we use a property?\n      this.setAttribute('tabindex', '0');\n    }\n    if (!this.hasAttribute('aria-haspopup')) {\n      this.setAttribute('aria-haspopup', 'true');\n    }\n    if (!this.hasAttribute('aria-expanded')) {\n      this.setAttribute('aria-expanded', 'false');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (!this._menuBody) {\n        this._menuBody = find(\n          this.childNodes,\n          (elem) => (elem.constructor as typeof BXFloatingMenu).FLOATING_MENU\n        );\n      }\n      if (this._menuBody) {\n        this._menuBody.open = this.open;\n      }\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n  }\n\n  render() {\n    const buttonClasses = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--tooltip`]: true,\n      [`${prefix}--popover--open`]: this.open,\n      [`${prefix}--popover--${this.align}`]: true,\n    });\n    return html`\n      <span class=\"${buttonClasses}\">\n        <button class=\"sb-tooltip-trigger\">\n          ${Information16({ id: 'trigger' })}\n        </button>\n        <span class=\"${prefix}--popover\">\n          <span class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n            <slot></slot>\n          </span>\n          <span class=\"${prefix}--popover-caret\"> </span>\n        </span>\n      </span>\n    `;\n  }\n\n  static get selectorTooltipBody() {\n    return `.${prefix}--tooltip__content`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTooltip;\n"]}
+{"version":3,"sources":["components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAA6B;IACpD;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAOrB;IAEF;;OAEG;IAGH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsB7C,iBAAiB;IAUjB,OAAO,CAAC,iBAAiB,KAAA;IA2BzB;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED,MAAM,KAAK,MAAM,4BAIhB;CACF;AAED,eAAe,UAAU,CAAC","file":"tooltip.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"]}

package/es/components/tooltip/tooltip.js

@@ -12,63 +12,58 @@ let _ = t => t,
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map';
-import Information16 from "../../icons/information/16";
+import { css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import { find } from '../../globals/internal/collection-helpers';
-import styles from "././tooltip.css.js";
-
+import CDSPopover from '../popover/popover';
+import '../popover/popover-content';
+import _styles from "././tooltip.css.js";
 /**
  * Trigger button of tooltip.
  *
  * @element cds-tooltip
- */ /**
-     * Trigger button of tooltip.
-     *
-     * @element cds-tooltip
-     */
-let BXTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_initialize, _HostListenerMixin) {
-  class BXTooltip extends _HostListenerMixin {
+ */
+let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_initialize, _HostListenerMixin) {
+  class CDSTooltip extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXTooltip,
+    F: CDSTooltip,
     d: [{
       kind: "field",
-      key: "_menuBody",
+      decorators: [property({
+        reflect: true,
+        type: String
+      })],
+      key: "align",
       value() {
-        return null;
+        return 'top';
       }
-    }, {
-      kind: "field",
-      decorators: [query('#trigger')],
-      key: "_triggerNode",
-      value: void 0
     }, {
       kind: "field",
       decorators: [property({
         reflect: true,
-        type: String
+        type: Boolean
       })],
-      key: "align",
+      key: "closeOnActivation",
       value() {
-        return 'bottom';
+        return false;
       }
     }, {
       kind: "field",
       decorators: [property({
         reflect: true,
-        type: String
+        type: Boolean
       })],
-      key: "duration",
-      value: void 0
+      key: "defaultOpen",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -82,39 +77,37 @@ let BXTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_initi
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'exit-delay-ms',
+        attribute: 'leave-delay-ms',
         type: Number
       })],
-      key: "exitDelayMs",
+      key: "leaveDelayMs",
       value() {
         return 300;
       }
     }, {
       kind: "field",
-      decorators: [HostListener('mouseover')],
-      key: "_handleOver",
+      key: "_handleHover",
       value() {
         return async () => {
           setTimeout(async () => {
-            this.open = !this.open;
+            this.open = true;
             const {
               open,
               updateComplete
             } = this;
             if (open) {
-              var _menuBody$shadowRoot, _menuBody$shadowRoot$;
+              var _this$querySelector;
               await updateComplete;
               const {
-                _menuBody: menuBody
-              } = this;
-              menuBody === null || menuBody === void 0 ? void 0 : (_menuBody$shadowRoot = menuBody.shadowRoot) === null || _menuBody$shadowRoot === void 0 ? void 0 : (_menuBody$shadowRoot$ = _menuBody$shadowRoot.querySelector(BXTooltip.selectorTooltipBody)) === null || _menuBody$shadowRoot$ === void 0 ? void 0 : _menuBody$shadowRoot$.focus();
+                selectorTooltipContent
+              } = this.constructor;
+              (_this$querySelector = this.querySelector(selectorTooltipContent)) === null || _this$querySelector === void 0 ? void 0 : _this$querySelector.focus();
             }
           }, this.enterDelayMs);
         };
       }
     }, {
       kind: "field",
-      decorators: [HostListener('mouseout')],
       key: "_handleHoverOut",
       value() {
         return async () => {
@@ -123,155 +116,149 @@ let BXTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_initi
               open
             } = this;
             if (open) {
-              this.open = !this.open;
+              this.open = false;
             }
-          }, this.exitDelayMs);
+          }, this.leaveDelayMs);
         };
       }
     }, {
       kind: "field",
-      decorators: [HostListener('keydown')],
-      key: "_handleKeydown",
+      decorators: [HostListener('click')],
+      key: "_handleClick",
       value() {
-        return async event => {
-          if (event.key === ' ' || event.key === 'Enter') {
-            this._handleOver();
+        return async () => {
+          if (this.closeOnActivation) {
+            this._handleHoverOut();
           }
         };
       }
     }, {
       kind: "field",
-      decorators: [property({
-        type: Boolean,
-        reflect: true
-      })],
-      key: "open",
+      decorators: [HostListener('click')],
+      key: "_handleKeydown",
       value() {
-        return false;
+        return async event => {
+          if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {
+            this._handleHoverOut();
+          }
+        };
       }
     }, {
-      kind: "get",
-      key: "triggerPosition",
+      kind: "method",
+      key: "_handleSlotChange",
       value:
       /**
-       * The menu body.
+       * Specify how the trigger should align with the tooltip
        */
 
       /**
-       * The trigger button.
+       * Specify whether the tooltip should be closed when clicked
        */
 
       /**
-       * Handles `click` event on this element.
+       * Specify whether the tooltip should be open when it first renders
        */
 
       /**
-       * Handles `keydown` event on this element.
+       * Specify the duration in milliseconds to delay before displaying the tooltip
        */
 
       /**
-       * Handles `keydown` event on this element.
-       * Space & enter will toggle state, Escape will only close.
+       * Specify the duration in milliseconds to delay before hiding the tooltip
        */
 
       /**
-       * `true` if the dropdown should be open.
+       * Handles `mouseover` event on this element.
        */
 
       /**
-       * @returns The position of the trigger button in the viewport.
+       * Handles `mouseleave` event on this element.
        */
-      function triggerPosition() {
-        const {
-          _triggerNode: triggerNode
-        } = this;
-        if (!triggerNode) {
-          throw new TypeError('Cannot find the trigger button.');
-        }
-        return triggerNode.getBoundingClientRect();
+
+      /**
+       * Handles `click` event on this element.
+       */
+
+      /**
+       * Handles `keydown` event on this element.
+       * Space & enter will toggle state, Escape will only close.
+        */
+
+      /**
+       * Handles `slotchange` event.
+       */
+      function _handleSlotChange({
+        target
+      }) {
+        const component = target.assignedNodes().filter(node => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
+        component[0].addEventListener('focus', this._handleHover);
+        component[0].addEventListener('focusout', this._handleHoverOut);
+        component[0].addEventListener('mouseover', this._handleHover);
+        component[0].addEventListener('mouseleave', this._handleHoverOut);
+        this.requestUpdate();
       }
     }, {
       kind: "method",
       key: "connectedCallback",
       value: function connectedCallback() {
-        if (!this.hasAttribute('role')) {
-          this.setAttribute('role', 'button');
-        }
-        if (!this.hasAttribute('tabindex')) {
-          // TODO: Should we use a property?
-          this.setAttribute('tabindex', '0');
-        }
-        if (!this.hasAttribute('aria-haspopup')) {
-          this.setAttribute('aria-haspopup', 'true');
-        }
-        if (!this.hasAttribute('aria-expanded')) {
-          this.setAttribute('aria-expanded', 'false');
+        if (!this.hasAttribute('highContrast')) {
+          this.setAttribute('highContrast', '');
         }
         if (!this.shadowRoot) {
           this.attachShadow({
             mode: 'open'
           });
         }
-        _get(_getPrototypeOf(BXTooltip.prototype), "connectedCallback", this).call(this);
+        _get(_getPrototypeOf(CDSTooltip.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
       key: "updated",
       value: function updated(changedProperties) {
+        var _this$shadowRoot, _this$shadowRoot$quer;
+        const {
+          selectorTooltipContent
+        } = this.constructor;
+        const toolTipContent = this.querySelector(selectorTooltipContent);
+        if (changedProperties.has('defaultOpen')) {
+          this.open = this.defaultOpen;
+        }
         if (changedProperties.has('open')) {
-          if (!this._menuBody) {
-            this._menuBody = find(this.childNodes, elem => elem.constructor.FLOATING_MENU);
-          }
-          if (this._menuBody) {
-            this._menuBody.open = this.open;
-          }
+          this.open ? toolTipContent === null || toolTipContent === void 0 ? void 0 : toolTipContent.setAttribute('open', '') : toolTipContent === null || toolTipContent === void 0 ? void 0 : toolTipContent.removeAttribute('open');
           this.setAttribute('aria-expanded', String(Boolean(this.open)));
         }
-      }
-    }, {
-      kind: "method",
-      key: "render",
-      value: function render() {
-        const buttonClasses = classMap({
-          [`${prefix}--popover-container`]: true,
-          [`${prefix}--popover--caret`]: true,
-          [`${prefix}--popover--high-contrast`]: true,
-          [`${prefix}--tooltip`]: true,
-          [`${prefix}--popover--open`]: this.open,
-          [`${prefix}--popover--${this.align}`]: true
+        ['align', 'caret'].forEach(name => {
+          if (changedProperties.has(name)) {
+            const {
+              [name]: value
+            } = this;
+            toolTipContent[name] = value;
+          }
         });
-        return html(_t || (_t = _`
-      <span class="${0}">
-        <button class="sb-tooltip-trigger">
-          ${0}
-        </button>
-        <span class="${0}--popover">
-          <span class="${0}--popover-content ${0}--tooltip-content">
-            <slot></slot>
-          </span>
-          <span class="${0}--popover-caret"> </span>
-        </span>
-      </span>
-    `), buttonClasses, Information16({
-          id: 'trigger'
-        }), prefix, prefix, prefix, prefix);
+        (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : (_this$shadowRoot$quer = _this$shadowRoot.querySelector(`.${prefix}--popover-container`)) === null || _this$shadowRoot$quer === void 0 ? void 0 : _this$shadowRoot$quer.classList.add(`${prefix}--tooltip`);
       }
+
+      /**
+       * A selector that will return the CDSTooltipContent.
+       */
     }, {
       kind: "get",
       static: true,
-      key: "selectorTooltipBody",
-      value: function selectorTooltipBody() {
-        return `.${prefix}--tooltip__content`;
+      key: "selectorTooltipContent",
+      value: function selectorTooltipContent() {
+        return `${prefix}-tooltip-content`;
       }
     }, {
-      kind: "field",
+      kind: "get",
       static: true,
       key: "styles",
-      value() {
-        return styles;
-      }
+      value: function styles() {
+        return css(_t || (_t = _`
+      ${0}${0}
+    `), _get(_getPrototypeOf(CDSTooltip), "styles", this), _styles);
+      } // `styles` here is a `CSSResult` generated by custom WebPack loader
     }]
   };
-}, HostListenerMixin(LitElement));
-export default BXTooltip;
+}, HostListenerMixin(CDSPopover));
+export default CDSTooltip;
 //# sourceMappingURL=tooltip.js.map

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["LitElement","html","property","customElement","query","classMap","Information16","prefix","HostListener","HostListenerMixin","find","styles","BXTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","decorators","reflect","type","String","attribute","Number","setTimeout","open","updateComplete","_menuBody$shadowRoot","_menuBody$shadowRoot$","_menuBody","menuBody","shadowRoot","querySelector","selectorTooltipBody","focus","enterDelayMs","exitDelayMs","event","_handleOver","Boolean","triggerPosition","_triggerNode","triggerNode","TypeError","getBoundingClientRect","connectedCallback","hasAttribute","setAttribute","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","childNodes","elem","FLOATING_MENU","render","buttonClasses","align","_t","_","id","static"],"sources":["components/tooltip/tooltip.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map';\nimport Information16 from '@carbon/icons/lib/information/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport BXFloatingMenu from '../floating-menu/floating-menu';\nimport BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport styles from './tooltip.scss';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass BXTooltip\n  extends HostListenerMixin(LitElement)\n  implements BXFloatingMenuTrigger\n{\n  /**\n   * The menu body.\n   */\n  private _menuBody: BXFloatingMenu | null = null;\n\n  /**\n   * The trigger button.\n   */\n  @query('#trigger')\n  private _triggerNode!: HTMLElement;\n\n  @property({ reflect: true, type: String })\n  align = 'bottom';\n\n  @property({ reflect: true, type: String })\n  duration;\n\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  @property({ attribute: 'exit-delay-ms', type: Number })\n  exitDelayMs = 300;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleOver = async () => {\n    setTimeout(async () => {\n      this.open = !this.open;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { _menuBody: menuBody } = this;\n        (\n          menuBody?.shadowRoot?.querySelector(\n            BXTooltip.selectorTooltipBody\n          ) as HTMLElement\n        )?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = !this.open;\n      }\n    }, this.exitDelayMs);\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      this._handleOver();\n    }\n  };\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * @returns The position of the trigger button in the viewport.\n   */\n  get triggerPosition() {\n    const { _triggerNode: triggerNode } = this;\n    if (!triggerNode) {\n      throw new TypeError('Cannot find the trigger button.');\n    }\n    return triggerNode.getBoundingClientRect();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex')) {\n      // TODO: Should we use a property?\n      this.setAttribute('tabindex', '0');\n    }\n    if (!this.hasAttribute('aria-haspopup')) {\n      this.setAttribute('aria-haspopup', 'true');\n    }\n    if (!this.hasAttribute('aria-expanded')) {\n      this.setAttribute('aria-expanded', 'false');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (!this._menuBody) {\n        this._menuBody = find(\n          this.childNodes,\n          (elem) => (elem.constructor as typeof BXFloatingMenu).FLOATING_MENU\n        );\n      }\n      if (this._menuBody) {\n        this._menuBody.open = this.open;\n      }\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n  }\n\n  render() {\n    const buttonClasses = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--tooltip`]: true,\n      [`${prefix}--popover--open`]: this.open,\n      [`${prefix}--popover--${this.align}`]: true,\n    });\n    return html`\n      <span class=\"${buttonClasses}\">\n        <button class=\"sb-tooltip-trigger\">\n          ${Information16({ id: 'trigger' })}\n        </button>\n        <span class=\"${prefix}--popover\">\n          <span class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n            <slot></slot>\n          </span>\n          <span class=\"${prefix}--popover-caret\"> </span>\n        </span>\n      </span>\n    `;\n  }\n\n  static get selectorTooltipBody() {\n    return `.${prefix}--tooltip__content`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTooltip;\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["css","property","customElement","prefix","HostListener","HostListenerMixin","CDSPopover","styles","CDSTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","type","String","key","value","Boolean","attribute","Number","setTimeout","open","updateComplete","_this$querySelector","selectorTooltipContent","querySelector","focus","enterDelayMs","leaveDelayMs","closeOnActivation","_handleHoverOut","event","_handleSlotChange","target","component","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","textContent","trim","addEventListener","_handleHover","requestUpdate","connectedCallback","hasAttribute","setAttribute","shadowRoot","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","_this$shadowRoot","_this$shadowRoot$quer","toolTipContent","has","defaultOpen","removeAttribute","forEach","name","classList","add","static","_t","_"],"sources":["components/tooltip/tooltip.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}