Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove ready state and *-ready event #74

Merged
merged 1 commit into from
Dec 5, 2024
Merged

refactor: remove ready state and *-ready event #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 139 additions & 140 deletions components/combobox/demo/api.md
View file
Open in desktop

Large diffs are not rendered by default.

171 changes: 22 additions & 149 deletions components/combobox/demo/api.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3064,7 +3064,6 @@ if (!customElements.get("auro-dropdownbib")) {
* @csspart helpText - The helpText content container.
* @csspart popover - The bib content container.
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
* @event auroDropdown-ready - Notifies that the component has finished initializing.
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
*/
class AuroDropdown extends r$5 {
Expand All @@ -3090,7 +3089,6 @@ class AuroDropdown extends r$5 {
this.inset = false;
this.placement = 'bottom-start';
this.rounded = false;
this.ready = false;
this.tabIndex = 0;
this.noToggle = false;

Expand Down Expand Up @@ -3189,7 +3187,6 @@ class AuroDropdown extends r$5 {
reflect: true
},
isPopoverVisible: { type: Boolean },
ready: { type: Boolean },
onSlotChange: {
type: Function,
reflect: false
Expand Down Expand Up @@ -3259,22 +3256,9 @@ class AuroDropdown extends r$5 {
// Add the tag name as an attribute if it is different than the component name
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

this.notifyReady();
}
this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib');

/**
* Marks the component as ready and sends event.
* @private
* @returns {void}
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroDropdown-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
document.body.append(this.bibContent);
}

/**
Expand Down Expand Up @@ -3356,7 +3340,7 @@ class AuroDropdown extends r$5 {
<div class="triggerContent">
<slot
name="trigger"
@slotchange="${() => {if (this.ready) this.floater.handleTriggerTabIndex(); }}"></slot>
@slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
</div>
</div>
${this.chevron || this.common ? u$1$1`
Expand Down Expand Up @@ -5463,7 +5447,6 @@ class AuroFormValidation {
* @attr {String} name - Populates the `name` attribute on the input.
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
* @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically.
* @prop {Boolean} ready - When false the component API should not be called.
* @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
* @attr {String} pattern - Specifies a regular expression the form control's value should match.
* @attr {String} placeholder - Define custom placeholder text, only supported by date input formats.
Expand Down Expand Up @@ -5510,7 +5493,6 @@ class BaseInput extends r {
this.maxLength = undefined;
this.minLength = undefined;
this.label = 'Input label is undefined';
this.ready = false;
this.activeLabel = false;

this.setCustomValidityForType = undefined;
Expand Down Expand Up @@ -5617,7 +5599,6 @@ class BaseInput extends r {
showPassword: { state: true },
validateOnInput: { type: Boolean },
readonly: { type: Boolean },
ready: { type: Boolean },
error: {
type: String,
reflect: true
Expand Down Expand Up @@ -5856,8 +5837,6 @@ class BaseInput extends r {
}
}
});

this.notifyReady();
}

/**
Expand Down Expand Up @@ -5962,20 +5941,6 @@ class BaseInput extends r {
}));
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroInput-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

/**
* @private
* @returns {string}
Expand Down Expand Up @@ -7488,7 +7453,6 @@ var styleCss$3 = i$c`.util_displayInline{display:inline}.util_displayInlineBlock
* @slot - Default slot for the menu content.
* @slot label - Defines the content of the label.
* @slot helpText - Defines the content of the helpText.
* @event auroCombobox-ready - Notifies that the component has finished initializing.
* @event auroCombobox-valueSet - Notifies that the component has a new value set.
* @event auroFormElement-validated - Notifies that the component value(s) have been validated.
*/
Expand Down Expand Up @@ -7742,9 +7706,6 @@ class AuroCombobox extends r$6 {
this.menuWrapper.append(this.menu);

this.dropdown.setAttribute('role', 'combobox');
this.dropdown.addEventListener('auroDropdown-ready', () => {
this.auroDropdownReady = true;
});

this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
this.showBib();
Expand Down Expand Up @@ -7781,15 +7742,6 @@ class AuroCombobox extends r$6 {
this.menu.setAttribute('nocheckmark', '');
}

if (this.noFilter) {
this.auroMenuReady = true;
} else {
this.menu.addEventListener('auroMenu-ready', () => {
this.auroMenuReady = true;
});
}


// handle the menu event for an option selection
this.menu.addEventListener('auroMenu-selectedOption', () => {
// dropdown bib should hide when making a selection
Expand Down Expand Up @@ -7850,10 +7802,6 @@ class AuroCombobox extends r$6 {
* @returns {void}
*/
configureInput() {
this.input.addEventListener('auroInput-ready', () => {
this.auroInputReady = true;
});

this.input.addEventListener('keyup', (evt) => {
if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
this.showBib();
Expand All @@ -7877,22 +7825,20 @@ class AuroCombobox extends r$6 {
this.menu.matchWord = this.input.value;
this.optionActive = null;

if (this.ready) {
if (this.value !== this.input.value) {
this.value = this.input.value;
}

if (this.value !== this.menu.value) {
this.menu.value = this.value;
}
if (this.value !== this.input.value) {
this.value = this.input.value;
}

if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
this.optionSelected = undefined;
}
if (this.value !== this.menu.value) {
this.menu.value = this.value;
}

this.menu.resetOptionsStates();
if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
this.optionSelected = undefined;
}

this.menu.resetOptionsStates();

this.handleMenuOptions();

this.handleInputValueChange();
Expand Down Expand Up @@ -8026,57 +7972,6 @@ class AuroCombobox extends r$6 {
this.configureDropdown();
this.configureCombobox();

this.checkReadiness();
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroCombobox-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

/**
* Monitors readiness of peer dependencies and begins work that should only start when ready.
* @private
* @returns {void}
*/
checkReadiness() {
if (this.auroDropdownReady && this.auroInputReady && this.auroMenuReady) {
this.readyActions();
this.notifyReady();
} else {
// Start a retry counter to limit the retry count
if (!this.readyRetryCount && this.readyRetryCount !== 0) {
this.readyRetryCount = 0;
} else {
this.readyRetryCount += 1;
}

const readyTimer = 0;
const readyRetryLimit = 200;

if (this.readyRetryCount <= readyRetryLimit) {
setTimeout(() => {
this.checkReadiness();
}, readyTimer);
}
}
}

/**
* Functionality that should not be performed until the combobox is in a ready state.
* @private
* @returns {void}
*/
readyActions() {
// Set the initial value in auro-menu if defined
if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
this.menu.value = this.value;
Expand All @@ -8093,7 +7988,7 @@ class AuroCombobox extends r$6 {

updated(changedProperties) {
// After the component is ready, send direct value changes to auro-menu.
if (this.ready && changedProperties.has('value')) {
if (changedProperties.has('value')) {
if (this.value) {
if (this.optionSelected && this.optionSelected.value === this.value) {
// If value updates and the previously selected option already matches the new value
Expand Down Expand Up @@ -8131,16 +8026,14 @@ class AuroCombobox extends r$6 {
* @returns {void}
*/
handleSlotChange() {
if (this.auroMenuReady) {
this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
this.options.forEach((opt) => {
if (this.checkmark) {
opt.removeAttribute('nocheckmark');
} else {
opt.setAttribute('nocheckmark', '');
}
});
}
this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
this.options.forEach((opt) => {
if (this.checkmark) {
opt.removeAttribute('nocheckmark');
} else {
opt.setAttribute('nocheckmark', '');
}
});

this.handleMenuOptions();
}
Expand Down Expand Up @@ -8721,7 +8614,6 @@ class AuroMenuOption extends r$6 {
* @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
* @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
* @attr {String} value - Value selected for the menu.
* @prop {Boolean} ready - When false the component API should not be called.
* @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
* @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
* @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
Expand All @@ -8730,7 +8622,6 @@ class AuroMenuOption extends r$6 {
* @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
* @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
* @event auroMenu-ready - Notifies that the component has finished initializing.
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
* @slot Slot for insertion of menu options.
*/
Expand All @@ -8744,7 +8635,6 @@ class AuroMenu extends r$6 {
this.optionSelected = undefined;
this.matchWord = undefined;
this.noCheckmark = false;
this.ready = false;
this.optionActive = undefined;

/**
Expand Down Expand Up @@ -8776,7 +8666,6 @@ class AuroMenu extends r$6 {
optionSelected: { type: Object },
optionActive: { type: Object },
matchWord: { type: String },
ready: { type: Boolean },
value: { type: String }
};
}
Expand Down Expand Up @@ -9210,28 +9099,12 @@ class AuroMenu extends r$6 {
this.index = this.items.indexOf(evt.target);
this.updateActiveOption(this.index);
});

this.notifyReady();
} else {
// make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
this.handleNoCheckmarkAttr();
}
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroMenu-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

render() {
return x$2`
<slot @slotchange=${this.handleSlotItems}></slot>
Expand Down
Loading
Loading