From 5138771c4b9a316e4da99103d4562ea11b77ccef Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 30 Jul 2024 00:51:05 -0700 Subject: [PATCH 1/5] fix: add additional browser checks to fix ssr errors --- packages/calcite-components/src/components.d.ts | 8 ++++---- packages/calcite-components/src/utils/browser.ts | 9 ++++++++- packages/calcite-components/src/utils/observers.ts | 3 ++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index ac63d263b95..907ec731ca0 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4518,7 +4518,7 @@ export namespace Components { */ "detached": boolean; /** - * When `displayMode` is `float-content`, specifies the maximum height of the component. + * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. * @deprecated Use `heightScale` instead. */ "detachedHeightScale": Scale; @@ -4547,7 +4547,7 @@ export namespace Components { */ "position": Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float-content`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable. */ "resizable": boolean; /** @@ -12638,7 +12638,7 @@ declare namespace LocalJSX { */ "detached"?: boolean; /** - * When `displayMode` is `float-content`, specifies the maximum height of the component. + * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. * @deprecated Use `heightScale` instead. */ "detachedHeightScale"?: Scale; @@ -12669,7 +12669,7 @@ declare namespace LocalJSX { */ "position"?: Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float-content`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable. */ "resizable"?: boolean; /** diff --git a/packages/calcite-components/src/utils/browser.ts b/packages/calcite-components/src/utils/browser.ts index 2e6ba14cb54..090e8f70c0d 100644 --- a/packages/calcite-components/src/utils/browser.ts +++ b/packages/calcite-components/src/utils/browser.ts @@ -1,5 +1,12 @@ import { Build } from "@stencil/core"; +export const isBrowser = (): boolean => + typeof window !== "undefined" && + typeof location !== "undefined" && + typeof document !== "undefined" && + window.location === location && + window.document === document; + interface NavigatorUAData { brands: Array<{ brand: string; version: string }>; mobile: boolean; @@ -11,7 +18,7 @@ function getUserAgentData(): NavigatorUAData | undefined { } export function getUserAgentString(): string { - if (!Build.isBrowser) { + if (!Build.isBrowser && !isBrowser()) { return ""; } diff --git a/packages/calcite-components/src/utils/observers.ts b/packages/calcite-components/src/utils/observers.ts index 5cd14d9ec81..1210d746a02 100644 --- a/packages/calcite-components/src/utils/observers.ts +++ b/packages/calcite-components/src/utils/observers.ts @@ -1,4 +1,5 @@ import { Build } from "@stencil/core"; +import { isBrowser } from "./browser"; export interface ExtendedMutationObserver extends MutationObserver { new: () => ExtendedMutationObserver; @@ -50,7 +51,7 @@ export function createObserver( callback: ObserverCallbackType, options?: ObserverOptions, ): ObserverInstanceType | undefined { - if (!Build.isBrowser) { + if (!Build.isBrowser && !isBrowser()) { return undefined; } From 27d4636d94a86f1a4d31c01fa083dd0089032932 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 30 Jul 2024 01:00:14 -0700 Subject: [PATCH 2/5] chore: ensure navigator is defined --- packages/calcite-components/src/utils/browser.ts | 1 + packages/calcite-components/src/utils/globalScript.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/calcite-components/src/utils/browser.ts b/packages/calcite-components/src/utils/browser.ts index 090e8f70c0d..6e7397d3ff1 100644 --- a/packages/calcite-components/src/utils/browser.ts +++ b/packages/calcite-components/src/utils/browser.ts @@ -1,6 +1,7 @@ import { Build } from "@stencil/core"; export const isBrowser = (): boolean => + typeof navigator !== "undefined" && typeof window !== "undefined" && typeof location !== "undefined" && typeof document !== "undefined" && diff --git a/packages/calcite-components/src/utils/globalScript.ts b/packages/calcite-components/src/utils/globalScript.ts index bead6265c2e..67e199ef051 100644 --- a/packages/calcite-components/src/utils/globalScript.ts +++ b/packages/calcite-components/src/utils/globalScript.ts @@ -8,6 +8,7 @@ import { stampVersion } from "./config"; */ export default function (): void { const isBrowser = + typeof navigator !== "undefined" && typeof window !== "undefined" && typeof location !== "undefined" && typeof document !== "undefined" && From a0076a598f8df5737a47a1ed52695d1ce9e96225 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 30 Jul 2024 01:27:03 -0700 Subject: [PATCH 3/5] chore: rip my brain --- packages/calcite-components/src/utils/browser.ts | 2 +- packages/calcite-components/src/utils/observers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/utils/browser.ts b/packages/calcite-components/src/utils/browser.ts index 6e7397d3ff1..19f7271bfa2 100644 --- a/packages/calcite-components/src/utils/browser.ts +++ b/packages/calcite-components/src/utils/browser.ts @@ -19,7 +19,7 @@ function getUserAgentData(): NavigatorUAData | undefined { } export function getUserAgentString(): string { - if (!Build.isBrowser && !isBrowser()) { + if (!Build.isBrowser || !isBrowser()) { return ""; } diff --git a/packages/calcite-components/src/utils/observers.ts b/packages/calcite-components/src/utils/observers.ts index 1210d746a02..30f8febcba7 100644 --- a/packages/calcite-components/src/utils/observers.ts +++ b/packages/calcite-components/src/utils/observers.ts @@ -51,7 +51,7 @@ export function createObserver( callback: ObserverCallbackType, options?: ObserverOptions, ): ObserverInstanceType | undefined { - if (!Build.isBrowser && !isBrowser()) { + if (!Build.isBrowser || !isBrowser()) { return undefined; } From ac9642151756565ade113a4a9545c552ebee895e Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 30 Jul 2024 01:39:57 -0700 Subject: [PATCH 4/5] refactor: update all browser checks --- packages/calcite-components/conventions/README.md | 4 ++-- .../src/components/action/action.tsx | 4 ++-- .../src/components/button/button.tsx | 4 ++-- .../calcite-components/src/components/chip/chip.tsx | 4 ++-- .../src/components/combobox/utils.ts | 4 ++-- .../src/components/date-picker/date-picker.tsx | 4 ++-- .../calcite-components/src/components/icon/icon.tsx | 5 +++-- .../input-date-picker/input-date-picker.tsx | 4 ++-- .../src/components/list-item/utils.ts | 4 ++-- .../segmented-control/segmented-control.tsx | 4 ++-- .../src/components/tab-title/tab-title.tsx | 4 ++-- packages/calcite-components/src/utils/browser.ts | 3 ++- packages/calcite-components/src/utils/floating-ui.ts | 6 +++--- packages/calcite-components/src/utils/globalScript.ts | 11 ++--------- packages/calcite-components/src/utils/loadable.ts | 5 +++-- packages/calcite-components/src/utils/observers.ts | 3 +-- packages/calcite-components/src/utils/t9n.ts | 5 +++-- 17 files changed, 37 insertions(+), 41 deletions(-) diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md index dfaa995009a..3ebff432875 100644 --- a/packages/calcite-components/conventions/README.md +++ b/packages/calcite-components/conventions/README.md @@ -373,9 +373,9 @@ This generates a `hydrate` directory which exposes `renderToString()` (for the s Since many of the same lifecycle methods are called on the client and server you may need to differentiate any code that relies on browser APIs like so: ```ts -import { Build } from "@stencil/core"; +import { isBrowser } from "../utils/browser"; -if (Build.isBrowser) { +if (isBrowser) { // client side } else { // server side diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 2586fb051c0..7f5299c039c 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, forceUpdate, @@ -38,6 +37,7 @@ import { } from "../../utils/t9n"; import { Alignment, Appearance, Scale } from "../interfaces"; import { IconName } from "../icon/interfaces"; +import { isBrowser } from "../../utils/browser"; import { ActionMessages } from "./assets/action/t9n"; import { CSS, SLOTS } from "./resources"; @@ -182,7 +182,7 @@ export class Action async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (Build.isBrowser) { + if (isBrowser) { await setUpMessages(this); } } diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 7c433f30177..ef1da05c404 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, forceUpdate, @@ -38,6 +37,7 @@ import { import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { toAriaBoolean } from "../../utils/dom"; import { IconName } from "../icon/interfaces"; +import { isBrowser } from "../../utils/browser"; import { ButtonMessages } from "./assets/button/t9n"; import { ButtonAlignment } from "./interfaces"; import { CSS } from "./resources"; @@ -226,7 +226,7 @@ export class Button async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (Build.isBrowser) { + if (isBrowser) { this.updateHasContent(); await setUpMessages(this); } diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index b7f6b674408..16fd123a8e6 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, Event, @@ -39,6 +38,7 @@ import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../.. import { isActivationKey } from "../../utils/key"; import { getIconScale } from "../../utils/component"; import { IconName } from "../icon/interfaces"; +import { isBrowser } from "../../utils/browser"; import { ChipMessages } from "./assets/chip/t9n"; import { CSS, SLOTS, ICONS } from "./resources"; @@ -230,7 +230,7 @@ export class Chip async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (Build.isBrowser) { + if (isBrowser) { await setUpMessages(this); this.updateHasText(); } diff --git a/packages/calcite-components/src/components/combobox/utils.ts b/packages/calcite-components/src/components/combobox/utils.ts index 5c92b929dc2..7e39d4cf3d1 100644 --- a/packages/calcite-components/src/components/combobox/utils.ts +++ b/packages/calcite-components/src/components/combobox/utils.ts @@ -1,5 +1,5 @@ -import { Build } from "@stencil/core"; import { nodeListToArray } from "../../utils/dom"; +import { isBrowser } from "../../utils/browser"; import { ComboboxChildElement } from "./interfaces"; import { ComboboxChildSelector } from "./resources"; import { Combobox } from "./combobox"; @@ -26,7 +26,7 @@ export function hasActiveChildren(node: HTMLCalciteComboboxItemElement): boolean } export function getDepth(element: HTMLElement): number { - if (!Build.isBrowser) { + if (!isBrowser) { return 0; } diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index c2a1157c3b4..f31f7338aff 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, Event, @@ -42,6 +41,7 @@ import { updateMessages, } from "../../utils/t9n"; import { HeadingLevel } from "../functional/Heading"; +import { isBrowser } from "../../utils/browser"; import { DatePickerMessages } from "./assets/date-picker/t9n"; import { DATE_PICKER_FORMAT_OPTIONS, HEADING_LEVEL } from "./resources"; import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils"; @@ -347,7 +347,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom @Watch("effectiveLocale") private async loadLocaleData(): Promise { - if (!Build.isBrowser) { + if (!isBrowser) { return; } diff --git a/packages/calcite-components/src/components/icon/icon.tsx b/packages/calcite-components/src/components/icon/icon.tsx index aa2404dece0..f5cec9f9016 100644 --- a/packages/calcite-components/src/components/icon/icon.tsx +++ b/packages/calcite-components/src/components/icon/icon.tsx @@ -1,8 +1,9 @@ import { CalciteIconPath, CalciteMultiPathEntry } from "@esri/calcite-ui-icons"; -import { Build, Component, Element, h, Host, Prop, State, VNode, Watch } from "@stencil/core"; +import { Component, Element, h, Host, Prop, State, VNode, Watch } from "@stencil/core"; import { getElementDir, toAriaBoolean } from "../../utils/dom"; import { createObserver } from "../../utils/observers"; import { Scale } from "../interfaces"; +import { isBrowser } from "../../utils/browser"; import { CSS } from "./resources"; import { fetchIcon, getCachedIconData, scaleToPx } from "./utils"; import { IconName } from "./interfaces"; @@ -137,7 +138,7 @@ export class Icon { private async loadIconPathData(): Promise { const { icon, scale, visible } = this; - if (!Build.isBrowser || !icon || !visible) { + if (!isBrowser || !icon || !visible) { return; } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index f45fc2e3c82..ecfe84a7062 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, Event, @@ -90,6 +89,7 @@ import { Status } from "../interfaces"; import { Validation } from "../functional/Validation"; import { IconName } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; +import { isBrowser } from "../../utils/browser"; import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils"; import { InputDatePickerMessages } from "./assets/input-date-picker/t9n"; import { CSS } from "./resources"; @@ -981,7 +981,7 @@ export class InputDatePicker }; private async loadLocaleData(): Promise { - if (!Build.isBrowser) { + if (!isBrowser) { return; } numberStringFormatter.numberFormatOptions = { diff --git a/packages/calcite-components/src/components/list-item/utils.ts b/packages/calcite-components/src/components/list-item/utils.ts index 30e5f444ab4..79ca535968c 100644 --- a/packages/calcite-components/src/components/list-item/utils.ts +++ b/packages/calcite-components/src/components/list-item/utils.ts @@ -1,4 +1,4 @@ -import { Build } from "@stencil/core"; +import { isBrowser } from "../../utils/browser"; const listSelector = "calcite-list"; const listItemGroupSelector = "calcite-list-item-group"; @@ -38,7 +38,7 @@ export function updateListItemChildren(listItemChildren: HTMLCalciteListItemElem } export function getDepth(element: HTMLElement, includeGroup = false): number { - if (!Build.isBrowser) { + if (!isBrowser) { return 0; } diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 1b7989e3e81..5b3e3f8ebe5 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, Event, @@ -39,6 +38,7 @@ import { Appearance, Layout, Scale, Status, Width } from "../interfaces"; import { createObserver } from "../../utils/observers"; import { Validation } from "../functional/Validation"; import { IconName } from "../icon/interfaces"; +import { isBrowser } from "../../utils/browser"; import { CSS } from "./resources"; /** @@ -390,7 +390,7 @@ export class SegmentedControl }); this.selectedItem = match; - if (Build.isBrowser && match) { + if (isBrowser && match) { match.focus(); } } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 8d79c1d504d..1852a7a5df4 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -1,5 +1,4 @@ import { - Build, Component, Element, Event, @@ -36,6 +35,7 @@ import { } from "../../utils/t9n"; import { getIconScale } from "../../utils/component"; import { IconName } from "../icon/interfaces"; +import { isBrowser } from "../../utils/browser"; import { TabTitleMessages } from "./assets/tab-title/t9n"; import { CSS, ICONS } from "./resources"; @@ -172,7 +172,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo async componentWillLoad(): Promise { await setUpMessages(this); - if (Build.isBrowser) { + if (isBrowser) { this.updateHasText(); } if (this.tab && this.selected) { diff --git a/packages/calcite-components/src/utils/browser.ts b/packages/calcite-components/src/utils/browser.ts index 19f7271bfa2..701af28924c 100644 --- a/packages/calcite-components/src/utils/browser.ts +++ b/packages/calcite-components/src/utils/browser.ts @@ -1,6 +1,7 @@ import { Build } from "@stencil/core"; export const isBrowser = (): boolean => + Build.isBrowser && typeof navigator !== "undefined" && typeof window !== "undefined" && typeof location !== "undefined" && @@ -19,7 +20,7 @@ function getUserAgentData(): NavigatorUAData | undefined { } export function getUserAgentString(): string { - if (!Build.isBrowser || !isBrowser()) { + if (!isBrowser()) { return ""; } diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 532fcd2a0d2..24db5622643 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -14,15 +14,15 @@ import { Strategy, VirtualElement, } from "@floating-ui/dom"; -import { Build } from "@stencil/core"; import { debounce, DebouncedFunc } from "lodash-es"; import { offsetParent } from "composed-offset-position"; import { Layout } from "../components/interfaces"; import { DEBOUNCE } from "./resources"; import { getElementDir } from "./dom"; +import { isBrowser } from "./browser"; (function setUpFloatingUiForShadowDomPositioning(): void { - if (Build.isBrowser) { + if (isBrowser) { const originalGetOffsetParent = platform.getOffsetParent; platform.getOffsetParent = (element: Element) => originalGetOffsetParent(element, offsetParent); } @@ -499,7 +499,7 @@ async function runAutoUpdate( return; } - const effectiveAutoUpdate = Build.isBrowser + const effectiveAutoUpdate = isBrowser ? autoUpdate : (_refEl: HTMLElement, _floatingEl: HTMLElement, updateCallback: () => void): (() => void) => { updateCallback(); diff --git a/packages/calcite-components/src/utils/globalScript.ts b/packages/calcite-components/src/utils/globalScript.ts index 67e199ef051..0bb783bce0c 100644 --- a/packages/calcite-components/src/utils/globalScript.ts +++ b/packages/calcite-components/src/utils/globalScript.ts @@ -1,5 +1,6 @@ import { initModeChangeEvent } from "./mode"; import { stampVersion } from "./config"; +import { isBrowser } from "./browser"; /** * This file is imported in Stencil's `globalScript` config option. @@ -7,15 +8,7 @@ import { stampVersion } from "./config"; * @see {@link https://stenciljs.com/docs/config#globalscript} */ export default function (): void { - const isBrowser = - typeof navigator !== "undefined" && - typeof window !== "undefined" && - typeof location !== "undefined" && - typeof document !== "undefined" && - window.location === location && - window.document === document; - - if (isBrowser) { + if (isBrowser()) { if (document.readyState === "interactive") { initModeChangeEvent(); } else { diff --git a/packages/calcite-components/src/utils/loadable.ts b/packages/calcite-components/src/utils/loadable.ts index 00f2f774408..1e70d19ff23 100644 --- a/packages/calcite-components/src/utils/loadable.ts +++ b/packages/calcite-components/src/utils/loadable.ts @@ -1,4 +1,5 @@ -import { Build, forceUpdate } from "@stencil/core"; +import { forceUpdate } from "@stencil/core"; +import { isBrowser } from "./browser"; /** * This helper adds support for knowing when a component has been loaded. @@ -134,7 +135,7 @@ export function componentLoaded(component: LoadableComponent): Promise { export async function componentFocusable(component: LoadableComponent): Promise { await componentLoaded(component); - if (!Build.isBrowser) { + if (!isBrowser) { return; } diff --git a/packages/calcite-components/src/utils/observers.ts b/packages/calcite-components/src/utils/observers.ts index 30f8febcba7..46e2ed4a163 100644 --- a/packages/calcite-components/src/utils/observers.ts +++ b/packages/calcite-components/src/utils/observers.ts @@ -1,4 +1,3 @@ -import { Build } from "@stencil/core"; import { isBrowser } from "./browser"; export interface ExtendedMutationObserver extends MutationObserver { @@ -51,7 +50,7 @@ export function createObserver( callback: ObserverCallbackType, options?: ObserverOptions, ): ObserverInstanceType | undefined { - if (!Build.isBrowser || !isBrowser()) { + if (!isBrowser()) { return undefined; } diff --git a/packages/calcite-components/src/utils/t9n.ts b/packages/calcite-components/src/utils/t9n.ts index b91f08cac86..9474f90483a 100644 --- a/packages/calcite-components/src/utils/t9n.ts +++ b/packages/calcite-components/src/utils/t9n.ts @@ -1,5 +1,6 @@ -import { Build, getAssetPath } from "@stencil/core"; +import { getAssetPath } from "@stencil/core"; import { getSupportedLocale, LocalizedComponent } from "./locale"; +import { isBrowser } from "./browser"; export type MessageBundle = Record; @@ -50,7 +51,7 @@ export async function setUpMessages(component: T9nComponent): Promise { } async function fetchMessages(component: T9nComponent, lang: string): Promise { - if (!Build.isBrowser) { + if (!isBrowser) { return {}; } From f643c9a60c9438e67cf6614d1ec083a516286f93 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 30 Jul 2024 01:59:38 -0700 Subject: [PATCH 5/5] chore: rip my brain - the sequel --- packages/calcite-components/conventions/README.md | 2 +- packages/calcite-components/src/components/action/action.tsx | 2 +- packages/calcite-components/src/components/button/button.tsx | 2 +- packages/calcite-components/src/components/chip/chip.tsx | 2 +- packages/calcite-components/src/components/combobox/utils.ts | 2 +- .../src/components/date-picker/date-picker.tsx | 2 +- packages/calcite-components/src/components/icon/icon.tsx | 2 +- .../src/components/input-date-picker/input-date-picker.tsx | 2 +- packages/calcite-components/src/components/list-item/utils.ts | 2 +- .../src/components/segmented-control/segmented-control.tsx | 2 +- .../calcite-components/src/components/tab-title/tab-title.tsx | 2 +- packages/calcite-components/src/utils/floating-ui.ts | 4 ++-- packages/calcite-components/src/utils/loadable.ts | 2 +- packages/calcite-components/src/utils/t9n.ts | 2 +- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md index 3ebff432875..04afc996982 100644 --- a/packages/calcite-components/conventions/README.md +++ b/packages/calcite-components/conventions/README.md @@ -375,7 +375,7 @@ Since many of the same lifecycle methods are called on the client and server you ```ts import { isBrowser } from "../utils/browser"; -if (isBrowser) { +if (isBrowser()) { // client side } else { // server side diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 7f5299c039c..f68e5515f88 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -182,7 +182,7 @@ export class Action async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (isBrowser) { + if (isBrowser()) { await setUpMessages(this); } } diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index ef1da05c404..d655278282a 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -226,7 +226,7 @@ export class Button async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (isBrowser) { + if (isBrowser()) { this.updateHasContent(); await setUpMessages(this); } diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 16fd123a8e6..4a6cdaab93b 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -230,7 +230,7 @@ export class Chip async componentWillLoad(): Promise { setUpLoadableComponent(this); - if (isBrowser) { + if (isBrowser()) { await setUpMessages(this); this.updateHasText(); } diff --git a/packages/calcite-components/src/components/combobox/utils.ts b/packages/calcite-components/src/components/combobox/utils.ts index 7e39d4cf3d1..6d2f08895f4 100644 --- a/packages/calcite-components/src/components/combobox/utils.ts +++ b/packages/calcite-components/src/components/combobox/utils.ts @@ -26,7 +26,7 @@ export function hasActiveChildren(node: HTMLCalciteComboboxItemElement): boolean } export function getDepth(element: HTMLElement): number { - if (!isBrowser) { + if (!isBrowser()) { return 0; } diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index f31f7338aff..179ed394473 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -347,7 +347,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom @Watch("effectiveLocale") private async loadLocaleData(): Promise { - if (!isBrowser) { + if (!isBrowser()) { return; } diff --git a/packages/calcite-components/src/components/icon/icon.tsx b/packages/calcite-components/src/components/icon/icon.tsx index f5cec9f9016..44f11c4ac70 100644 --- a/packages/calcite-components/src/components/icon/icon.tsx +++ b/packages/calcite-components/src/components/icon/icon.tsx @@ -138,7 +138,7 @@ export class Icon { private async loadIconPathData(): Promise { const { icon, scale, visible } = this; - if (!isBrowser || !icon || !visible) { + if (!isBrowser() || !icon || !visible) { return; } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index ecfe84a7062..ec9f4ea57f3 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -981,7 +981,7 @@ export class InputDatePicker }; private async loadLocaleData(): Promise { - if (!isBrowser) { + if (!isBrowser()) { return; } numberStringFormatter.numberFormatOptions = { diff --git a/packages/calcite-components/src/components/list-item/utils.ts b/packages/calcite-components/src/components/list-item/utils.ts index 79ca535968c..5b7a2365070 100644 --- a/packages/calcite-components/src/components/list-item/utils.ts +++ b/packages/calcite-components/src/components/list-item/utils.ts @@ -38,7 +38,7 @@ export function updateListItemChildren(listItemChildren: HTMLCalciteListItemElem } export function getDepth(element: HTMLElement, includeGroup = false): number { - if (!isBrowser) { + if (!isBrowser()) { return 0; } diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 5b3e3f8ebe5..dd1638dbd4f 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -390,7 +390,7 @@ export class SegmentedControl }); this.selectedItem = match; - if (isBrowser && match) { + if (isBrowser() && match) { match.focus(); } } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 1852a7a5df4..d0bd9d0456f 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -172,7 +172,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo async componentWillLoad(): Promise { await setUpMessages(this); - if (isBrowser) { + if (isBrowser()) { this.updateHasText(); } if (this.tab && this.selected) { diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 24db5622643..b24277546c6 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -22,7 +22,7 @@ import { getElementDir } from "./dom"; import { isBrowser } from "./browser"; (function setUpFloatingUiForShadowDomPositioning(): void { - if (isBrowser) { + if (isBrowser()) { const originalGetOffsetParent = platform.getOffsetParent; platform.getOffsetParent = (element: Element) => originalGetOffsetParent(element, offsetParent); } @@ -499,7 +499,7 @@ async function runAutoUpdate( return; } - const effectiveAutoUpdate = isBrowser + const effectiveAutoUpdate = isBrowser() ? autoUpdate : (_refEl: HTMLElement, _floatingEl: HTMLElement, updateCallback: () => void): (() => void) => { updateCallback(); diff --git a/packages/calcite-components/src/utils/loadable.ts b/packages/calcite-components/src/utils/loadable.ts index 1e70d19ff23..3b7e7874a8c 100644 --- a/packages/calcite-components/src/utils/loadable.ts +++ b/packages/calcite-components/src/utils/loadable.ts @@ -135,7 +135,7 @@ export function componentLoaded(component: LoadableComponent): Promise { export async function componentFocusable(component: LoadableComponent): Promise { await componentLoaded(component); - if (!isBrowser) { + if (!isBrowser()) { return; } diff --git a/packages/calcite-components/src/utils/t9n.ts b/packages/calcite-components/src/utils/t9n.ts index 9474f90483a..8852048b80c 100644 --- a/packages/calcite-components/src/utils/t9n.ts +++ b/packages/calcite-components/src/utils/t9n.ts @@ -51,7 +51,7 @@ export async function setUpMessages(component: T9nComponent): Promise { } async function fetchMessages(component: T9nComponent, lang: string): Promise { - if (!isBrowser) { + if (!isBrowser()) { return {}; }