Sort tags in trigger (#9921)

hassio/src/dashboard/hassio-addons.ts

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { compare } from "../../../src/common/string/compare";
+import { stringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
@@ -33,7 +33,7 @@ class HassioAddons extends LitElement {
                 </ha-card>
               `
             : this.supervisor.supervisor.addons
-                .sort((a, b) => compare(a.name, b.name))
+                .sort((a, b) => stringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/common/search/search-input";
-import { compare } from "../../../../src/common/string/compare";
+import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
@@ -27,7 +27,7 @@ const _filterDevices = memoizeOne(
               .toLocaleLowerCase()
               .includes(filter))
       )
-      .sort((a, b) => compare(a.name, b.name))
+      .sort((a, b) => stringCompare(a.name, b.name))
 );
 
 @customElement("dialog-hassio-hardware")

src/common/string/compare.ts

@@ -1,4 +1,4 @@
-export const compare = (a: string, b: string) => {
+export const stringCompare = (a: string, b: string) => {
   if (a < b) {
     return -1;
   }
@@ -9,5 +9,5 @@ export const compare = (a: string, b: string) => {
   return 0;
 };
 
-export const caseInsensitiveCompare = (a: string, b: string) =>
-  compare(a.toLowerCase(), b.toLowerCase());
+export const caseInsensitiveStringCompare = (a: string, b: string) =>
+  stringCompare(a.toLowerCase(), b.toLowerCase());

src/components/device/ha-area-devices-picker.ts

@@ -20,7 +20,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -226,7 +226,10 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
 
       const sorted = Object.keys(devicesByArea)
         .sort((a, b) =>
-          compare(devicesByArea[a].name || "", devicesByArea[b].name || "")
+          stringCompare(
+            devicesByArea[a].name || "",
+            devicesByArea[b].name || ""
+          )
         )
         .map((key) => devicesByArea[key]);
 

src/components/device/ha-device-picker.ts

@@ -15,7 +15,7 @@ import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { mdiCheck } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -242,7 +242,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (outputDevices.length === 1) {
         return outputDevices;
       }
-      return outputDevices.sort((a, b) => compare(a.name || "", b.name || ""));
+      return outputDevices.sort((a, b) =>
+        stringCompare(a.name || "", b.name || "")
+      );
     }
   );
 

src/components/entity/ha-statistic-picker.ts

@@ -18,7 +18,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import { getStatisticIds, StatisticsMetaData } from "../../data/history";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
@@ -165,7 +165,7 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (output.length > 1) {
-        output.sort((a, b) => compare(a.name || "", b.name || ""));
+        output.sort((a, b) => stringCompare(a.name || "", b.name || ""));
       }
 
       output.push({

src/components/ha-addon-picker.ts

@@ -4,7 +4,7 @@ import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { HassioAddonInfo } from "../data/hassio/addon";
 import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -97,7 +97,7 @@ class HaAddonPicker extends LitElement {
       if (isComponentLoaded(this.hass, "hassio")) {
         const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
         this._addons = supervisorInfo.addons.sort((a, b) =>
-          compare(a.name, b.name)
+          stringCompare(a.name, b.name)
         );
       } else {
         showAlertDialog(this, {

src/components/ha-blueprint-picker.ts

@@ -5,7 +5,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
 import { HomeAssistant } from "../types";
 
@@ -33,7 +33,7 @@ class HaBluePrintPicker extends LitElement {
         ...(blueprint as Blueprint).metadata,
         path,
       }));
-    return result.sort((a, b) => compare(a.name, b.name));
+    return result.sort((a, b) => stringCompare(a.name, b.name));
   });
 
   protected render(): TemplateResult {

src/components/ha-sidebar.ts

@@ -29,7 +29,7 @@ import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeDomain } from "../common/entity/compute_domain";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
 import { ActionHandlerDetail } from "../data/lovelace";
 import {
@@ -96,7 +96,7 @@ const defaultPanelSorter = (
   }
 
   if (aLovelace && bLovelace) {
-    return compare(a.title!, b.title!);
+    return stringCompare(a.title!, b.title!);
   }
   if (aLovelace && !bLovelace) {
     return -1;
@@ -118,7 +118,7 @@ const defaultPanelSorter = (
     return 1;
   }
   // both not built in, sort by title
-  return compare(a.title!, b.title!);
+  return stringCompare(a.title!, b.title!);
 };
 
 const computePanels = memoizeOne(

src/components/user/ha-user-picker.ts

@@ -7,7 +7,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
@@ -33,7 +33,7 @@ class HaUserPicker extends LitElement {
 
     return users
       .filter((user) => !user.system_generated)
-      .sort((a, b) => compare(a.name, b.name));
+      .sort((a, b) => stringCompare(a.name, b.name));
   });
 
   protected render(): TemplateResult {

src/data/area_registry.ts

@@ -1,6 +1,6 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 
@@ -46,7 +46,7 @@ const fetchAreaRegistry = (conn: Connection) =>
     })
     .then((areas) =>
       (areas as AreaRegistryEntry[]).sort((ent1, ent2) =>
-        compare(ent1.name, ent2.name)
+        stringCompare(ent1.name, ent2.name)
       )
     );
 

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { caseInsensitiveCompare } from "../../common/string/compare";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import {
   createConfigFlow,
   deleteConfigFlow,
@@ -29,7 +29,7 @@ export const showConfigFlowDialog = (
       ]);
 
       return handlers.sort((handlerA, handlerB) =>
-        caseInsensitiveCompare(
+        caseInsensitiveStringCompare(
           domainToName(hass.localize, handlerA),
           domainToName(hass.localize, handlerB)
         )

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -25,7 +25,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { navigate } from "../../common/navigate";
 import "../../common/search/search-input";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import {
   fuzzyFilterSort,
   ScorableTextItem,
@@ -395,7 +395,7 @@ export class QuickBar extends LitElement {
         };
       })
       .sort((a, b) =>
-        compare(a.primaryText.toLowerCase(), b.primaryText.toLowerCase())
+        stringCompare(a.primaryText.toLowerCase(), b.primaryText.toLowerCase())
       );
   }
 
@@ -405,7 +405,7 @@ export class QuickBar extends LitElement {
       ...this._generateServerControlCommands(),
       ...this._generateNavigationCommands(),
     ].sort((a, b) =>
-      compare(
+      stringCompare(
         a.strings.join(" ").toLowerCase(),
         b.strings.join(" ").toLowerCase()
       )

src/onboarding/onboarding-integrations.ts

@@ -9,7 +9,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { LocalizeFunc } from "../common/translations/localize";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
@@ -105,7 +105,7 @@ class OnboardingIntegrations extends LitElement {
       }
     );
     const content = [...entries, ...discovered]
-      .sort((a, b) => compare(a[0], b[0]))
+      .sort((a, b) => stringCompare(a[0], b[0]))
       .map((item) => item[1]);
 
     return html`

src/panels/config/areas/ha-config-areas.ts

@@ -1,7 +1,7 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -104,7 +104,7 @@ class HaConfigAreas extends HassRouterPage {
   private _loadData() {
     getConfigEntries(this.hass).then((configEntries) => {
       this._configEntries = configEntries.sort((conf1, conf2) =>
-        compare(conf1.title, conf2.title)
+        stringCompare(conf1.title, conf2.title)
       );
     });
     if (this._unsubs) {

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -7,6 +7,7 @@ import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
 import { TriggerElement } from "../ha-automation-trigger-row";
 import "../../../../../components/ha-paper-dropdown-menu";
+import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
 
 @customElement("ha-automation-trigger-tag")
 export class HaTagTrigger extends LitElement implements TriggerElement {
@@ -54,6 +55,9 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
 
   private async _fetchTags() {
     this._tags = await fetchTags(this.hass);
+    this._tags.sort((a, b) =>
+      caseInsensitiveStringCompare(a.name || a.id, b.name || b.id)
+    );
   }
 
   private _tagChanged(ev) {

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -6,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { caseInsensitiveCompare } from "../../../../common/string/compare";
+import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
 import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
@@ -139,7 +139,7 @@ export class CloudTTSPref extends LitElement {
 
       languages.push([lang, label]);
     }
-    return languages.sort((a, b) => caseInsensitiveCompare(a[1], b[1]));
+    return languages.sort((a, b) => caseInsensitiveStringCompare(a[1], b[1]));
   });
 
   private getSupportedGenders = memoizeOne(
@@ -160,7 +160,7 @@ export class CloudTTSPref extends LitElement {
         }
       }
 
-      return genders.sort((a, b) => caseInsensitiveCompare(a[1], b[1]));
+      return genders.sort((a, b) => caseInsensitiveStringCompare(a[1], b[1]));
     }
   );
 

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -18,7 +18,7 @@ import {
   generateFilter,
   isEmptyFilter,
 } from "../../../../common/entity/entity_filter";
-import { compare } from "../../../../common/string/compare";
+import { stringCompare } from "../../../../common/string/compare";
 import "../../../../components/entity/state-info";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
@@ -295,7 +295,7 @@ class CloudAlexa extends LitElement {
     entities.sort((a, b) => {
       const stateA = this.hass.states[a.entity_id];
       const stateB = this.hass.states[b.entity_id];
-      return compare(
+      return stringCompare(
         stateA ? computeStateName(stateA) : a.entity_id,
         stateB ? computeStateName(stateB) : b.entity_id
       );

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -18,7 +18,7 @@ import {
   generateFilter,
   isEmptyFilter,
 } from "../../../../common/entity/entity_filter";
-import { compare } from "../../../../common/string/compare";
+import { stringCompare } from "../../../../common/string/compare";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-info";
 import "../../../../components/ha-button-menu";
@@ -330,7 +330,7 @@ class CloudGoogleAssistant extends LitElement {
     entities.sort((a, b) => {
       const stateA = this.hass.states[a.entity_id];
       const stateB = this.hass.states[b.entity_id];
-      return compare(
+      return stringCompare(
         stateA ? computeStateName(stateA) : a.entity_id,
         stateB ? computeStateName(stateB) : b.entity_id
       );

src/panels/config/devices/ha-config-device-page.ts

@@ -6,7 +6,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-icon-next";
@@ -103,7 +103,7 @@ export class HaConfigDevicePage extends LitElement {
           stateName: this._computeEntityName(entity),
         }))
         .sort((ent1, ent2) =>
-          compare(
+          stringCompare(
             ent1.stateName || `zzz${ent1.entity_id}`,
             ent2.stateName || `zzz${ent2.entity_id}`
           )

src/panels/config/integrations/ha-config-integrations.ts

@@ -18,7 +18,7 @@ import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import "../../../common/search/search-input";
-import { caseInsensitiveCompare } from "../../../common/string/compare";
+import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
@@ -495,7 +495,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           })
         )
         .sort((conf1, conf2) =>
-          caseInsensitiveCompare(
+          caseInsensitiveStringCompare(
             conf1.localized_domain_name + conf1.title,
             conf2.localized_domain_name + conf2.title
           )

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -23,7 +23,7 @@ import {
   updateEntityRegistryEntry,
 } from "../../../../../data/entity_registry";
 import { EntityRegistryStateEntry } from "../../../devices/ha-config-device-page";
-import { compare } from "../../../../../common/string/compare";
+import { stringCompare } from "../../../../../common/string/compare";
 import { getIeeeTail } from "./functions";
 import { slugify } from "../../../../../common/string/slugify";
 
@@ -49,7 +49,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
           stateName: this._computeEntityName(entity),
         }))
         .sort((ent1, ent2) =>
-          compare(
+          stringCompare(
             ent1.stateName || `zzz${ent1.entity_id}`,
             ent2.stateName || `zzz${ent2.entity_id}`
           )

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -4,7 +4,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { navigate } from "../../../../common/navigate";
-import { compare } from "../../../../common/string/compare";
+import { stringCompare } from "../../../../common/string/compare";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
@@ -263,7 +263,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
       createDashboard: async (values: LovelaceDashboardCreateParams) => {
         const created = await createDashboard(this.hass!, values);
         this._dashboards = this._dashboards!.concat(created).sort(
-          (res1, res2) => compare(res1.url_path, res2.url_path)
+          (res1, res2) => stringCompare(res1.url_path, res2.url_path)
         );
       },
       updateDashboard: async (values) => {

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -5,7 +5,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
-import { compare } from "../../../../common/string/compare";
+import { stringCompare } from "../../../../common/string/compare";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
@@ -148,7 +148,7 @@ export class HaConfigLovelaceRescources extends LitElement {
       createResource: async (values) => {
         const created = await createResource(this.hass!, values);
         this._resources = this._resources!.concat(created).sort((res1, res2) =>
-          compare(res1.url, res2.url)
+          stringCompare(res1.url, res2.url)
         );
         loadLovelaceResources([created], this.hass!.auth.data.hassUrl);
       },

src/panels/config/person/ha-config-person.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-svg-icon";
@@ -156,10 +156,10 @@ class HaConfigPerson extends LitElement {
     const personData = await fetchPersons(this.hass!);
 
     this._storageItems = personData.storage.sort((ent1, ent2) =>
-      compare(ent1.name, ent2.name)
+      stringCompare(ent1.name, ent2.name)
     );
     this._configItems = personData.config.sort((ent1, ent2) =>
-      compare(ent1.name, ent2.name)
+      stringCompare(ent1.name, ent2.name)
     );
     this._openDialogIfPersonSpecifiedInRoute();
   }
@@ -221,7 +221,7 @@ class HaConfigPerson extends LitElement {
       createEntry: async (values) => {
         const created = await createPerson(this.hass!, values);
         this._storageItems = this._storageItems!.concat(created).sort(
-          (ent1, ent2) => compare(ent1.name, ent2.name)
+          (ent1, ent2) => stringCompare(ent1.name, ent2.name)
         );
       },
       updateEntry: async (values) => {

src/panels/config/zone/ha-config-zone.ts

@@ -18,7 +18,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-svg-icon";
@@ -289,7 +289,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   private async _fetchData() {
     this._storageItems = (await fetchZones(this.hass!)).sort((ent1, ent2) =>
-      compare(ent1.name, ent2.name)
+      stringCompare(ent1.name, ent2.name)
     );
     this._getStates();
   }
@@ -410,7 +410,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
   private async _createEntry(values: ZoneMutableParams) {
     const created = await createZone(this.hass!, values);
     this._storageItems = this._storageItems!.concat(created).sort(
-      (ent1, ent2) => compare(ent1.name, ent2.name)
+      (ent1, ent2) => stringCompare(ent1.name, ent2.name)
     );
     if (this.narrow) {
       return;

src/panels/developer-tools/event/events-list.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
@@ -58,7 +58,7 @@ class EventsList extends EventsMixin(LocalizeMixin(PolymerElement)) {
   connectedCallback() {
     super.connectedCallback();
     this.hass.callApi("GET", "events").then((events) => {
-      this.events = events.sort((e1, e2) => compare(e1.event, e2.event));
+      this.events = events.sort((e1, e2) => stringCompare(e1.event, e2.event));
     });
   }
 

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -3,7 +3,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { splitByGroups } from "../../../common/entity/split_by_groups";
-import { compare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";
@@ -262,7 +262,7 @@ export const generateViewConfig = (
         computeCards(
           ungroupedEntitites[domain]
             .sort((a, b) =>
-              compare(
+              stringCompare(
                 computeStateName(entities[a]),
                 computeStateName(entities[b])
               )

src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts

@@ -11,7 +11,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { compare } from "../../../../common/string/compare";
+import { stringCompare } from "../../../../common/string/compare";
 import { HaSwitch } from "../../../../components/ha-switch";
 import "../../../../components/user/ha-user-badge";
 import { LovelaceViewConfig, ShowViewConfig } from "../../../../data/lovelace";
@@ -43,7 +43,7 @@ export class HuiViewVisibilityEditor extends LitElement {
   @state() private _visible!: boolean | ShowViewConfig[];
 
   private _sortedUsers = memoizeOne((users: User[]) =>
-    users.sort((a, b) => compare(a.name, b.name))
+    users.sort((a, b) => stringCompare(a.name, b.name))
   );
 
   protected firstUpdated(changedProps: PropertyValues) {

src/panels/media-browser/hui-dialog-select-media-player.ts

@@ -6,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import { createCloseHeading } from "../../components/ha-dialog";
 import { UNAVAILABLE_STATES } from "../../data/entity";
 import { BROWSER_PLAYER } from "../../data/media-player";
@@ -52,7 +52,9 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
             )}</mwc-list-item
           >
           ${this._params.mediaSources
-            .sort((a, b) => compare(computeStateName(a), computeStateName(b)))
+            .sort((a, b) =>
+              stringCompare(computeStateName(a), computeStateName(b))
+            )
             .map(
               (source) => html`
                 <mwc-list-item