Skip to content

Commit

Permalink
perf: use updated dropdown fix #222
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Dec 6, 2024
1 parent 7c7c416 commit 37378fb
Show file tree
Hide file tree
Showing 5 changed files with 320 additions and 511 deletions.
151 changes: 24 additions & 127 deletions demo/api.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS

/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */

let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {

/* eslint-disable jsdoc/require-param */

Expand Down Expand Up @@ -159,7 +159,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {

class AuroFormValidation {
constructor() {
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
}

/**
Expand Down Expand Up @@ -395,7 +395,7 @@ class AuroFormValidation {

/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */

let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
class AuroLibraryRuntimeUtils {

/* eslint-disable jsdoc/require-param */

Expand Down Expand Up @@ -456,13 +456,13 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {

return elemTag === tag || elem.hasAttribute(tag);
}
};
}

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.


let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
class AuroDependencyVersioning {

/**
* Generates a unique string to be used for child auro element naming.
Expand Down Expand Up @@ -496,7 +496,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {

return tag;
}
};
}

var top = 'top';
var bottom = 'bottom';
Expand Down Expand Up @@ -2555,7 +2555,7 @@ class AuroIcon extends BaseIcon {
this.success = false;
this.tertiary = false;
this.warning = false;
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();
}

// function to define props used within the scope of this component
Expand Down Expand Up @@ -2652,7 +2652,7 @@ class AuroIcon extends BaseIcon {
*
*/
static register(name = "auro-icon") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
}

connectedCallback() {
Expand All @@ -2662,6 +2662,13 @@ class AuroIcon extends BaseIcon {
this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
}

/**
* @returns {void} Exposes CSS parts for styling from parent components.
*/
exposeCssParts() {
this.setAttribute('exportparts', 'svg:iconSvg');
}

// function that renders the HTML and CSS into the scope of the component
render() {
const a11y = {
Expand Down Expand Up @@ -2694,9 +2701,9 @@ class AuroIcon extends BaseIcon {
}
}

var iconVersion$1 = '5.0.0';
var iconVersion$1 = '6.1.1';

var styleCss$3 = i$5`.popover{display:inline-block;box-sizing:border-box;border-width:1px;border-style:solid}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}.trigger:focus{outline-style:none}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host(:not([data-show])) .popover{display:none}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 300)}:host([common]) .trigger,:host([common]) .popover,:host([rounded]) .trigger,:host([rounded]) .popover{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .trigger,:host([inset]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([disabled]){pointer-events:none}`;
var styleCss$3 = i$5`.popover{display:inline-block;box-sizing:border-box;border-width:1px;border-style:solid}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}.trigger:focus{outline-style:none}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host{display:inherit}:host(:not([data-show])) .popover{display:none}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 300)}:host([common]) .trigger,:host([common]) .popover,:host([rounded]) .trigger,:host([rounded]) .popover{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .trigger,:host([inset]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([disabled]){pointer-events:none}`;

var colorCss$3 = i$5`.popover{border-color:var(--ds-auro-dropdown-popover-border-color);background-color:var(--ds-auro-dropdown-popover-container-color);box-shadow:-2px 0 5px 2px var(--ds-auro-dropdown-popover-boxshadow-color),0 2px 5px 1px var(--ds-auro-dropdown-popover-boxshadow-color);color:var(--ds-auro-dropdown-popover-text-color)}.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-ui-default-default, #0074c8);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-secondary-default, #939fad)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}:host([common][error]),:host([bordered][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([common][error]) .trigger,:host([bordered][error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([common][error]) .trigger:focus-within,:host([bordered][error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([common][error]) .trigger:active,:host([bordered][error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}`;

Expand Down Expand Up @@ -2762,12 +2769,12 @@ class AuroDropdown extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();

/**
* Generate unique names for dependency components.
*/
const versioning = new AuroDependencyVersioning$1();
const versioning = new AuroDependencyVersioning();
this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon);
}

Expand Down Expand Up @@ -2848,7 +2855,7 @@ class AuroDropdown extends r {
*
*/
static register(name = "auro-dropdown") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown);
}

connectedCallback() {
Expand Down Expand Up @@ -3178,7 +3185,7 @@ class AuroDropdown extends r {
}
}

var dropdownVersion = '3.2.0';
var dropdownVersion = '3.2.1';

var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){min-height:var(--ds-size-500, 2.5rem);max-height:var(--ds-size-500, 2.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;

Expand Down Expand Up @@ -3244,12 +3251,12 @@ class AuroSelect extends r {
/**
* @private
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
this.runtimeUtils = new AuroLibraryRuntimeUtils();

/**
* Generate unique names for dependency components.
*/
const versioning = new AuroDependencyVersioning$1();
const versioning = new AuroDependencyVersioning();

/**
* @private
Expand Down Expand Up @@ -3367,7 +3374,7 @@ class AuroSelect extends r {
*
*/
static register(name = "auro-select") {
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroSelect);
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSelect);
}

/**
Expand Down Expand Up @@ -3775,120 +3782,10 @@ var colorCss$1 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div

var tokensCss = i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */

class AuroLibraryRuntimeUtils {

/* eslint-disable jsdoc/require-param */

/**
* This will register a new custom element with the browser.
* @param {String} name - The name of the custom element.
* @param {Object} componentClass - The class to register as a custom element.
* @returns {void}
*/
registerComponent(name, componentClass) {
if (!customElements.get(name)) {
customElements.define(name, class extends componentClass {});
}
}

/**
* Finds and returns the closest HTML Element based on a selector.
* @returns {void}
*/
closestElement(
selector, // selector like in .closest()
base = this, // extra functionality to skip a parent
__Closest = (el, found = el && el.closest(selector)) =>
!el || el === document || el === window
? null // standard .closest() returns null for non-found selectors also
: found
? found // found a selector INside this element
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
) {
return __Closest(base);
}
/* eslint-enable jsdoc/require-param */

/**
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
* @param {Object} elem - The element to check.
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
* @returns {void}
*/
handleComponentTagRename(elem, tagName) {
const tag = tagName.toLowerCase();
const elemTag = elem.tagName.toLowerCase();

if (elemTag !== tag) {
elem.setAttribute(tag, true);
}
}

/**
* Validates if an element is a specific Auro component.
* @param {Object} elem - The element to validate.
* @param {String} tagName - The name of the Auro component to check against.
* @returns {Boolean} - Returns true if the element is the specified Auro component.
*/
elementMatch(elem, tagName) {
const tag = tagName.toLowerCase();
const elemTag = elem.tagName.toLowerCase();

return elemTag === tag || elem.hasAttribute(tag);
}
}

var styleCss = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;

var colorCss = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.


class AuroDependencyVersioning {

/**
* Generates a unique string to be used for child auro element naming.
* @private
* @param {string} baseName - Defines the first part of the unique element name.
* @param {string} version - Version of the component that will be appended to the baseName.
* @returns {string} - Unique string to be used for naming.
*/
generateElementName(baseName, version) {
let result = baseName;

result += '-';
result += version.replace(/[.]/g, '_');

return result;
}

/**
* Generates a unique string to be used for child auro element naming.
* @param {string} baseName - Defines the first part of the unique element name.
* @param {string} version - Version of the component that will be appended to the baseName.
* @returns {string} - Unique string to be used for naming.
*/
generateTag(baseName, version, tagClass) {
const elementName = this.generateElementName(baseName, version);
const tag = i$1`${s(elementName)}`;

if (!customElements.get(elementName)) {
customElements.define(elementName, class extends tagClass {});
}

return tag;
}
}

var iconVersion = '6.0.2';

var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
Expand Down
Loading

0 comments on commit 37378fb

Please sign in to comment.