@pine-ds/core 3.0.0-mercury.0 → 3.0.0

package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js

@@ -4,7 +4,10 @@ import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   args: {
+    autocomplete: null,
+    clearOnEdit: false,
     componentId: null,
+    debounce: null,
     disabled: false,
     errorMessage: null,
     helperMessage: null,
@@ -21,13 +24,20 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['onchange', 'pdsTextareaChange'],
+      handles: [
+        'onblur', 'pdsBlur',
+        'onchange', 'pdsTextareaChange',
+        'onfocus', 'pdsFocus',
+        'oninput', 'pdsInput',
+      ],
     },
   },
   title: 'components/Textarea',
 }
 
 const BaseTemplate = (args) => html`<pds-textarea
+  autocomplete="${args.autocomplete}"
+  clear-on-edit="${args.clearOnEdit}"
   component-id="${args.componentId}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
@@ -41,20 +51,22 @@ const BaseTemplate = (args) => html`<pds-textarea
   required="${args.required}"
   rows="${args.rows}"
   value="${args.value}"
+  data-tooltip-id="foo"
+  title="bar"
   >
 </pds-textarea>`;
 
 export const Default = BaseTemplate.bind({});
 Default.args = {
   componentId: 'pds-textarea-default-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Default',
 };
 
 export const Rows = BaseTemplate.bind({});
 Rows.args = {
   componentId: 'pds-textarea-rows-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Rows',
   rows: 4,
 };
@@ -62,7 +74,7 @@ Rows.args = {
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-textarea-required-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Required',
   required: true,
 };
@@ -70,33 +82,33 @@ Required.args = {
 export const Placeholder = BaseTemplate.bind({});
 Placeholder.args = {
   componentId: 'pds-textarea-placeholder-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Placeholder',
-  placeholder: 'Placeholder...'
+  placeholder: 'Enter a message...'
 };
 
 export const Disabled = BaseTemplate.bind({});
 Disabled.args = {
   componentId: 'pds-textarea-disabled-example',
   disabled: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Disabled',
 };
 
 export const Readonly = BaseTemplate.bind({});
 Readonly.args = {
   componentId: 'pds-textarea-readonly-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Readonly',
   readonly: true,
   value: 'Readonly Value'
 };
 
-export const Message = BaseTemplate.bind({});
-Message.args = {
+export const WithMessage = BaseTemplate.bind({});
+WithMessage.args = {
   componentId: 'pds-textarea-helper-example',
   helperMessage: 'Helper message text',
-  label: 'Name',
+  label: 'Message',
   name: 'Message',
 };
 
@@ -105,7 +117,16 @@ Invalid.args = {
   componentId: 'pds-textarea-error-example',
   errorMessage: 'Error',
   invalid: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Error',
   required: true,
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-textarea-autocomplete',
+  label: 'Message',
+  name: 'message',
+  autocomplete: 'on',
+  placeholder: 'Enter a message...',
+};

package/dist/collection/components/pds-textarea/textarea-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-interface.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/textarea-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TextareaChangeEventDetail {\n  event?: Event;\n  value: string | null;\n}\n\nexport interface TextareaEvent <T = TextareaChangeEventDetail> extends CustomEvent {\n  detail: T;\n  target: HTMLPdsTextareaElement;\n}\n"]}
+{"version":3,"file":"textarea-interface.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/textarea-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TextareaChangeEventDetail {\n  event?: Event;\n  value?: string | null;\n}\n\nexport interface TextareaInputEventDetail {\n  event?: Event;\n  value?: string | null;\n}\n\nexport interface TextareaEvent <T = TextareaChangeEventDetail> extends CustomEvent {\n  detail: T;\n  target: HTMLPdsTextareaElement;\n}\n"]}

package/dist/collection/components/pds-tooltip/pds-tooltip.css

@@ -1,18 +1,11 @@
 :host {
-  --border-radius-overlay: var(--pine-border-radius-125);
-  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --box-shadow-default: var(--pine-box-shadow-md);
-  --color-background-default: var(--pine-color-charcoal-400);
-  --color-text-default: var(--pine-color-white);
-  --font-size-overlay: var(--pine-font-size-087);
-  --line-height-overlay: var(--pine-line-height-125);
-  --sizing-arrow-default: 6px;
-  --sizing-arrow-offset: 14px;
-  --sizing-width-default: 320px;
-  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
+  --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-sizing-arrow: 6px;
+  --tooltip-sizing-arrow-offset: 14px;
+  --tooltip-dimension-max-width: 320px;
   display: inline-block;
   position: relative;
 }
@@ -21,19 +14,18 @@
 }
 :host ::slotted([slot=content]) {
   display: block;
+  max-width: var(--tooltip-dimension-max-width);
   white-space: normal;
-  width: var(--sizing-width-default);
 }
 
 .pds-tooltip__content {
-  background-color: var(--color-background-default);
-  border-radius: var(--border-radius-overlay);
-  box-shadow: var(--box-shadow-default);
-  color: var(--color-text-default);
-  font-size: var(--font-size-overlay);
-  line-height: var(--line-height-overlay);
+  background-color: var(--pine-color-primary);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25);
+  box-shadow: var(--pine-box-shadow);
+  color: var(--pine-color-text-primary);
+  max-width: var(--tooltip-dimension-max-width);
   opacity: 0;
-  padding: var(--spacing-padding-overlay);
+  padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);
   position: absolute;
   visibility: hidden;
   width: max-content;
@@ -50,97 +42,97 @@
   border-color: transparent;
   border-right-color: transparent;
   border-style: solid;
-  border-width: var(--border-width-arrow-left);
+  border-width: var(--tooltip-border-width-arrow-left);
   content: "";
   height: 0;
   position: absolute;
   width: 0;
 }
 .pds-tooltip--right .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--right-end .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  bottom: var(--sizing-arrow-offset);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  bottom: var(--tooltip-sizing-arrow-offset);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--right-start .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--top .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: 50%;
   top: initial;
   transform: translateX(-50%);
 }
 .pds-tooltip--top-start .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
-  left: var(--sizing-arrow-offset);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
+  left: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--top-end .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: initial;
-  right: var(--sizing-arrow-offset);
+  right: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--left .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--left-end .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
-  bottom: var(--sizing-arrow-offset);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
+  bottom: var(--tooltip-sizing-arrow-offset);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--left-start .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--bottom .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: 50%;
-  top: calc(var(--sizing-arrow-default) * -1);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
   transform: translateX(-50%);
 }
 .pds-tooltip--bottom-end .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: initial;
-  right: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  right: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--bottom-start .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
-  left: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
+  left: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--no-arrow .pds-tooltip__content::after {
   border-width: 0;

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -6,21 +6,45 @@ import { positionTooltip } from "../../utils/overlay";
  */
 export class PdsTooltip {
     constructor() {
+        /**
+         * Determines when the tooltip is open
+         * @defaultValue false
+         */
+        this.isOpen = false;
+        /**
+         * Determines whether or not the tooltip has an arrow
+         * @defaultValue true
+         */
+        this.hasArrow = true;
+        /**
+         * Enable this option when using the content slot
+         * @defaultValue false
+         */
+        this.htmlContent = false;
+        /**
+         * Determines the preferred position of the tooltip
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+        /**
+         * Sets the maximum width of the tooltip content
+         * @defaultValue "352px"
+         */
+        this.maxWidth = '352px';
+        /**
+         * Determines whether or not the tooltip is visible
+         * @defaultValue false
+         */
+        this.opened = false;
         this.handleHide = () => {
             this.hideTooltip();
-            this.pdsTooltipHide.emit();
         };
         this.handleShow = () => {
             this.showTooltip();
-            this.pdsTooltipShow.emit();
         };
-        this.isOpen = false;
-        this.content = undefined;
-        this.componentId = undefined;
-        this.hasArrow = true;
-        this.htmlContent = false;
-        this.placement = 'right';
-        this.opened = false;
+        this.handlePageShow = () => {
+            this.opened = false;
+        };
     }
     handleOpenToggle() {
         if (this.opened) {
@@ -37,6 +61,13 @@ export class PdsTooltip {
         this.el.addEventListener('blur', this.handleHide, true);
         this.el.addEventListener('focus', this.handleShow, true);
     }
+    componentDidLoad() {
+        // fix for Safari iOS back button issue
+        window.addEventListener('pageshow', this.handlePageShow);
+        return () => {
+            window.removeEventListener('pageshow', this.handlePageShow);
+        };
+    }
     componentDidUpdate() {
         if (this.opened) {
             this.showTooltip();
@@ -58,13 +89,13 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', class: `
+        return (h(Host, { key: '2732f2c81bc66814945206ddde15367e64a89ec2', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '58705f1fbb1d88b91337100ba32de07f7838be52', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
+          ` }, h("span", { key: '33e96cb4f46ebc418f79971047a37fc5c3498e0d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: 'cca7b5d50e2cbc0f839a46caa5a5dc8a79f1cb15' })), h("div", { key: '22c666894f7835629e00e9c2c3964bcaf63000ae', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '83a805d9eef71ac261a03d56853ccc8ac7bfe818', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +125,8 @@ export class PdsTooltip {
                     "tags": [],
                     "text": "Content for the tooltip. If HTML is required, use the content slot"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content",
                 "reflect": false
             },
@@ -111,6 +144,8 @@ export class PdsTooltip {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -131,6 +166,8 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip has an arrow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "has-arrow",
                 "reflect": false,
                 "defaultValue": "true"
@@ -152,6 +189,8 @@ export class PdsTooltip {
                         }],
                     "text": "Enable this option when using the content slot"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "html-content",
                 "reflect": false,
                 "defaultValue": "false"
@@ -173,10 +212,35 @@ export class PdsTooltip {
                         }],
                     "text": "Determines the preferred position of the tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'right'"
             },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"352px\""
+                        }],
+                    "text": "Sets the maximum width of the tooltip content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "'352px'"
+            },
             "opened": {
                 "type": "boolean",
                 "mutable": true,
@@ -194,6 +258,8 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip is visible"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "opened",
                 "reflect": true,
                 "defaultValue": "false"
@@ -205,39 +271,6 @@ export class PdsTooltip {
             "isOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "pdsTooltipHide",
-                "name": "pdsTooltipHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is closed"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "pdsTooltipShow",
-                "name": "pdsTooltipShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is shown"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "showTooltip": {

package/dist/collection/components/pds-tooltip/pds-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Sets the maximum width of the tooltip content\n   * @defaultValue \"352px\"\n   */\n  @Prop() maxWidth: string = '352px';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidLoad() {\n    // fix for Safari iOS back button issue\n    window.addEventListener('pageshow', this.handlePageShow);\n\n    return () => {\n      window.removeEventListener('pageshow', this.handlePageShow);\n    };\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n  };\n\n  private handlePageShow = () => {\n    this.opened = false;\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n            style={{ maxWidth: this.maxWidth }}\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js

@@ -8,17 +8,17 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
+      handles: [],
     },
   },
   title: 'components/Tooltip'
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
+  <pds-tooltip has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} html-content=${args.htmlContent}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
+        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>