diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index f3d10444..5fed8209 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -3,7 +3,6 @@ import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import styles from './breadcrumb-item.styles';
-import { isTruthy } from '~/internal/is-truthy';
import { HasSlotController } from '~/internal/slot';
/**
@@ -41,7 +40,7 @@ export default class SlBreadcrumbItem extends LitElement {
@property() rel = 'noreferrer noopener';
render() {
- const isLink = typeof this.href !== 'undefined';
+ const isLink = this.href ? true : false;
return html`
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index eb562562..8ca0098f 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -7,7 +7,6 @@ import styles from './button.styles';
import '~/components/spinner/spinner';
import { emit } from '~/internal/event';
import { FormSubmitController } from '~/internal/form-control';
-import { isTruthy } from '~/internal/is-truthy';
import { HasSlotController } from '~/internal/slot';
/**
@@ -124,7 +123,7 @@ export default class SlButton extends LitElement {
}
render() {
- const isLink = typeof this.href !== 'undefined';
+ const isLink = this.href ? true : false;
const tag = isLink ? literal`a` : literal`button`;
/* eslint-disable lit/binding-positions, lit/no-invalid-html */
@@ -162,7 +161,7 @@ export default class SlButton extends LitElement {
href=${ifDefined(this.href)}
target=${ifDefined(this.target)}
download=${ifDefined(this.download)}
- rel=${ifDefined(isTruthy(this.target) ? 'noreferrer noopener' : undefined)}
+ rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
role="button"
aria-disabled=${this.disabled ? 'true' : 'false'}
tabindex=${this.disabled ? '-1' : '0'}
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index c4bc4f48..99e2f6a8 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -8,7 +8,6 @@ import type SlMenuItem from '~/components/menu-item/menu-item';
import type SlMenu from '~/components/menu/menu';
import { animateTo, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '~/internal/event';
-import { isTruthy } from '~/internal/is-truthy';
import { scrollIntoView } from '~/internal/scroll';
import { getTabbableBoundary } from '~/internal/tabbable';
import { watch } from '~/internal/watch';
@@ -95,7 +94,7 @@ export default class SlDropdown extends LitElement {
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
- if (typeof this.containingElement === 'undefined') {
+ if (!this.containingElement) {
this.containingElement = this;
}
@@ -177,7 +176,7 @@ export default class SlDropdown extends LitElement {
: document.activeElement;
if (
- !isTruthy(this.containingElement) ||
+ !this.containingElement ||
activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement
) {
this.hide();
@@ -189,7 +188,7 @@ export default class SlDropdown extends LitElement {
handleDocumentMouseDown(event: MouseEvent) {
// Close when clicking outside of the containing element
const path = event.composedPath();
- if (isTruthy(this.containingElement) && !path.includes(this.containingElement)) {
+ if (this.containingElement && !path.includes(this.containingElement)) {
this.hide();
}
}
@@ -275,13 +274,13 @@ export default class SlDropdown extends LitElement {
}
// Focus on a menu item
- if (event.key === 'ArrowDown' && typeof firstMenuItem !== 'undefined') {
+ if (event.key === 'ArrowDown') {
menu!.setCurrentItem(firstMenuItem);
firstMenuItem.focus();
return;
}
- if (event.key === 'ArrowUp' && typeof lastMenuItem !== 'undefined') {
+ if (event.key === 'ArrowUp') {
menu!.setCurrentItem(lastMenuItem);
lastMenuItem.focus();
return;
@@ -321,7 +320,7 @@ export default class SlDropdown extends LitElement {
const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];
const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
- if (typeof accessibleTrigger !== 'undefined') {
+ if (accessibleTrigger) {
accessibleTrigger.setAttribute('aria-haspopup', 'true');
accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
}
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index eee81baa..36fe7390 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -4,7 +4,6 @@ import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import styles from './icon-button.styles';
import '~/components/icon/icon';
-import { isTruthy } from '~/internal/is-truthy';
/**
* @since 2.0
@@ -48,7 +47,7 @@ export default class SlIconButton extends LitElement {
@property({ type: Boolean, reflect: true }) disabled = false;
render() {
- const isLink = typeof this.href !== 'undefined';
+ const isLink = this.href ? true : false;
const interior = html`
0) {
+ if (url) {
try {
const file = await requestIcon(url);
if (url !== this.getUrl()) {
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index bc8a6426..b288b45b 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -51,10 +51,6 @@ export default class SlInclude extends LitElement {
return;
}
- if (typeof file === 'undefined') {
- return;
- }
-
if (!file.ok) {
emit(this, 'sl-error', { detail: { status: file.status } });
return;
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index ed1cd13f..e19154d8 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -138,7 +138,7 @@ export default class SlMenu extends LitElement {
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
const items = this.getAllItems({ includeDisabled: false });
const activeItem = this.getCurrentItem();
- let index = typeof activeItem !== 'undefined' ? items.indexOf(activeItem) : 0;
+ let index = activeItem ? items.indexOf(activeItem) : 0;
if (items.length > 0) {
event.preventDefault();
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 2dccd1cf..794f12f2 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -62,7 +62,7 @@ export default class SlRadio extends LitElement {
radio.input.tabIndex = -1;
});
- if (typeof checkedRadio !== 'undefined') {
+ if (checkedRadio) {
checkedRadio.input.tabIndex = 0;
} else if (radios.length > 0) {
radios[0].input.tabIndex = 0;
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 4fc0c2c3..f3f2b88d 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -90,7 +90,7 @@ export default class SlRange extends LitElement {
super.connectedCallback();
this.resizeObserver = new ResizeObserver(() => this.syncRange());
- if (typeof this.value === 'undefined') {
+ if (!this.value) {
this.value = this.min;
}
if (this.value < this.min) {
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 8b463ded..07c9b017 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -250,13 +250,13 @@ export default class SlSelect extends LitElement {
}
// Focus on a menu item
- if (event.key === 'ArrowDown' && typeof firstItem !== 'undefined') {
+ if (event.key === 'ArrowDown') {
this.menu.setCurrentItem(firstItem);
firstItem.focus();
return;
}
- if (event.key === 'ArrowUp' && typeof lastItem !== 'undefined') {
+ if (event.key === 'ArrowUp') {
this.menu.setCurrentItem(lastItem);
lastItem.focus();
return;
@@ -343,7 +343,7 @@ export default class SlSelect extends LitElement {
return false;
});
- if (typeof clearButton !== 'undefined') {
+ if (clearButton) {
event.stopPropagation();
}
}
@@ -408,7 +408,7 @@ export default class SlSelect extends LitElement {
} else {
const checkedItem = items.find(item => item.value === value[0]);
- this.displayLabel = typeof checkedItem !== 'undefined' ? this.getItemLabel(checkedItem) : '';
+ this.displayLabel = checkedItem ? this.getItemLabel(checkedItem) : '';
this.displayTags = [];
}
}
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 62a2e9b8..8016c9f7 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -117,7 +117,7 @@ export default class SlSplitPanel extends LitElement {
}
// Check snap points
- if (typeof this.snap !== 'undefined') {
+ if (this.snap) {
const snaps = this.snap.split(' ');
snaps.forEach(value => {
@@ -190,7 +190,7 @@ export default class SlSplitPanel extends LitElement {
this.size = this.vertical ? height : width;
// Resize when a primary panel is set
- if (typeof this.primary !== 'undefined') {
+ if (this.primary) {
this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
}
}
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 9b6da3ac..973101be 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -113,7 +113,7 @@ export default class SlTabGroup extends LitElement {
show(panel: string) {
const tab = this.tabs.find(el => el.panel === panel);
- if (typeof tab !== 'undefined') {
+ if (tab) {
this.setActiveTab(tab, { scrollBehavior: 'smooth' });
}
}
@@ -239,7 +239,7 @@ export default class SlTabGroup extends LitElement {
...options
};
- if (typeof tab !== 'undefined' && tab !== this.activeTab && !tab.disabled) {
+ if (tab && tab !== this.activeTab && !tab.disabled) {
const previousTab = this.activeTab;
this.activeTab = tab;
@@ -258,7 +258,7 @@ export default class SlTabGroup extends LitElement {
// Emit events
if (options.emitEvents === true) {
- if (typeof previousTab !== 'undefined') {
+ if (previousTab) {
emit(this, 'sl-tab-hide', { detail: { name: previousTab.panel } });
}
emit(this, 'sl-tab-show', { detail: { name: this.activeTab.panel } });
@@ -270,7 +270,7 @@ export default class SlTabGroup extends LitElement {
// Link each tab with its corresponding panel
this.tabs.forEach(tab => {
const panel = this.panels.find(el => el.name === tab.panel);
- if (typeof panel !== 'undefined') {
+ if (panel) {
tab.setAttribute('aria-controls', panel.getAttribute('id')!);
panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);
}
@@ -281,7 +281,7 @@ export default class SlTabGroup extends LitElement {
syncIndicator() {
const tab = this.getActiveTab();
- if (typeof tab !== 'undefined') {
+ if (tab) {
this.indicator.style.display = 'block';
this.repositionIndicator();
} else {
@@ -292,7 +292,7 @@ export default class SlTabGroup extends LitElement {
repositionIndicator() {
const currentTab = this.getActiveTab();
- if (typeof currentTab === 'undefined') {
+ if (!currentTab) {
return;
}
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index d868a02b..ccceb543 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -149,19 +149,14 @@ export default class SlTextarea extends LitElement {
}
/** Gets or sets the textarea's scroll position. */
- scrollPosition(position: { top?: number; left?: number }): void;
- scrollPosition(): { top: number; left: number };
scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {
- if (typeof position !== 'undefined') {
- if (typeof position.top === 'number') {
- this.input.scrollTop = position.top;
- }
- if (typeof position.left === 'number') {
- this.input.scrollLeft = position.left;
- }
- return undefined;
+ if (position) {
+ if (typeof position.top === 'number') this.input.scrollTop = position.top;
+ if (typeof position.left === 'number') this.input.scrollLeft = position.left;
+ return;
}
+ // eslint-disable-next-line consistent-return
return {
top: this.input.scrollTop,
left: this.input.scrollTop
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 0e03c725..dbf59c2c 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -151,7 +151,7 @@ export default class SlTooltip extends LitElement {
el => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'
);
- if (typeof target === 'undefined') {
+ if (!target) {
throw new Error('Invalid tooltip target: no child element was found.');
}
diff --git a/src/internal/form-control.ts b/src/internal/form-control.ts
index 8880c728..4ce8d37b 100644
--- a/src/internal/form-control.ts
+++ b/src/internal/form-control.ts
@@ -44,14 +44,14 @@ export class FormSubmitController implements ReactiveController {
hostConnected() {
this.form = this.options.form(this.host);
- if (typeof this.form !== 'undefined' && this.form !== null) {
+ if (this.form) {
this.form.addEventListener('formdata', this.handleFormData);
this.form.addEventListener('submit', this.handleFormSubmit);
}
}
hostDisconnected() {
- if (typeof this.form !== 'undefined' && this.form !== null) {
+ if (this.form) {
this.form.removeEventListener('formdata', this.handleFormData);
this.form.removeEventListener('submit', this.handleFormSubmit);
this.form = undefined;
@@ -78,13 +78,7 @@ export class FormSubmitController implements ReactiveController {
const disabled = this.options.disabled(this.host);
const reportValidity = this.options.reportValidity;
- if (
- typeof this.form !== 'undefined' &&
- this.form !== null &&
- !this.form.noValidate &&
- !disabled &&
- !reportValidity(this.host)
- ) {
+ if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
event.preventDefault();
event.stopImmediatePropagation();
}
@@ -94,7 +88,7 @@ export class FormSubmitController implements ReactiveController {
// Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a
// native submit button into the form, click it, then remove it to simulate a standard form submission.
const button = document.createElement('button');
- if (typeof this.form !== 'undefined' && this.form !== null) {
+ if (this.form) {
button.type = 'submit';
button.style.position = 'absolute';
button.style.width = '0';
@@ -141,8 +135,8 @@ export function renderFormControl(
},
input: TemplateResult
) {
- const hasLabel = typeof props.label !== 'undefined' ? true : props.hasLabelSlot === true;
- const hasHelpText = typeof props.helpText !== 'undefined' ? true : props.hasHelpTextSlot === true;
+ const hasLabel = props.label ? true : !!props.hasLabelSlot;
+ const hasHelpText = props.helpText ? true : !!props.hasHelpTextSlot;
return html`
(obj: T | T[] | undefined | null | '' | [] | 0 | false): obj is T | T[] {
- // eslint-disable-next-line no-restricted-syntax -- we do intentionally want the type coercion behavior
- return Boolean(obj);
-}
diff --git a/src/internal/slot.ts b/src/internal/slot.ts
index 26bc409b..e83898b0 100644
--- a/src/internal/slot.ts
+++ b/src/internal/slot.ts
@@ -45,12 +45,8 @@ export class HasSlotController implements ReactiveController {
handleSlotChange(event: Event) {
const slot = event.target as HTMLSlotElement;
- const isSlotNameDefined = typeof slot.name !== 'undefined';
- if (
- (this.slotNames.includes('[default]') && !isSlotNameDefined) ||
- (isSlotNameDefined && this.slotNames.includes(slot.name))
- ) {
+ if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
this.host.requestUpdate();
}
}
@@ -82,7 +78,7 @@ export function getInnerHTML(slot: HTMLSlotElement): string {
* string. This is useful because we can't use slot.textContent as an alternative.
*/
export function getTextContent(slot: HTMLSlotElement | undefined | null): string {
- if (typeof slot === 'undefined' || slot === null) {
+ if (!slot) {
return '';
}
const nodes = slot.assignedNodes({ flatten: true });
diff --git a/src/utilities/animation-registry.ts b/src/utilities/animation-registry.ts
index dd667c3e..50ac43b2 100644
--- a/src/utilities/animation-registry.ts
+++ b/src/utilities/animation-registry.ts
@@ -36,13 +36,13 @@ export function getAnimation(el: Element, animationName: string) {
const customAnimation = customAnimationRegistry.get(el);
// Check for a custom animation
- if (typeof customAnimation?.[animationName] !== 'undefined') {
+ if (customAnimation?.[animationName]) {
return customAnimation[animationName];
}
// Check for a default animation
const defaultAnimation = defaultAnimationRegistry.get(animationName);
- if (typeof defaultAnimation !== 'undefined') {
+ if (defaultAnimation) {
return defaultAnimation;
}
diff --git a/src/utilities/base-path.ts b/src/utilities/base-path.ts
index 7d3ff194..b42500cb 100644
--- a/src/utilities/base-path.ts
+++ b/src/utilities/base-path.ts
@@ -28,14 +28,14 @@ export function getBasePath() {
const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];
const configScript = scripts.find(script => script.hasAttribute('data-shoelace'));
-if (typeof configScript !== 'undefined') {
+if (configScript) {
// Use the data-shoelace attribute
setBasePath(configScript.getAttribute('data-shoelace')!);
} else {
const fallbackScript = scripts.find(s => /shoelace(\.min)?\.js($|\?)/.test(s.src));
let path = '';
- if (typeof fallbackScript !== 'undefined') {
+ if (fallbackScript) {
path = fallbackScript.getAttribute('src')!;
}