diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 45c00f705de..7da8199359d 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -982,6 +982,7 @@ export namespace Components {
"form": string;
/**
* The `id` attribute of the component. When omitted, a globally unique identifier is used.
+ * @deprecated No longer necessary.
*/
"guid": string;
/**
@@ -4199,6 +4200,7 @@ export namespace Components {
"form": string;
/**
* The `id` of the component. When omitted, a globally unique identifier is used.
+ * @deprecated No longer necessary.
*/
"guid": string;
/**
@@ -8967,6 +8969,7 @@ declare namespace LocalJSX {
"form"?: string;
/**
* The `id` attribute of the component. When omitted, a globally unique identifier is used.
+ * @deprecated No longer necessary.
*/
"guid"?: string;
/**
@@ -12368,6 +12371,7 @@ declare namespace LocalJSX {
"form"?: string;
/**
* The `id` of the component. When omitted, a globally unique identifier is used.
+ * @deprecated No longer necessary.
*/
"guid"?: string;
/**
diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
index 6ebe8ecb683..4dd0d914358 100644
--- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
@@ -1529,12 +1529,6 @@ describe("calcite-input-number", () => {
for (const input of inputs) {
expect(await input.getProperty("readOnly")).toBe(true);
}
-
- const buttons = await page.findAll("calcite-input-number button");
-
- for (const button of buttons) {
- expect(await button.getProperty("disabled")).toBe(true);
- }
});
it("sets internals to autocomplete when the attribute is used", async () => {
@@ -1690,63 +1684,6 @@ describe("calcite-input-number", () => {
expect(await isElementFocused(page, componentTag)).toBe(true);
});
- it("allows disabling slotted action", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `Action`,
- );
-
- const input = await page.find("calcite-input-number");
- const button = await page.find("calcite-button");
-
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await typeNumberValue(page, "1");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- input.setProperty("disabled", true);
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await typeNumberValue(page, "2");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
-
- input.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await typeNumberValue(page, "3");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("13");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- button.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await typeNumberValue(page, "4");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(false);
- expect(await input.getProperty("disabled")).toBe(false);
-
- input.setProperty("disabled", true);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("5");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
- });
-
it("integer property prevents decimals and exponential notation", async () => {
const page = await newE2EPage();
await page.setContent(``);
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index ac3a9d14042..0ba912d0db0 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -14,7 +14,6 @@ import {
} from "@stencil/core";
import {
getElementDir,
- getSlotted,
isPrimaryPointerButton,
setRequestedIcon,
toAriaBoolean,
@@ -56,7 +55,6 @@ import {
parseNumberString,
sanitizeNumberString,
} from "../../utils/number";
-import { createObserver } from "../../utils/observers";
import { CSS_UTILITY } from "../../utils/resources";
import {
connectMessages,
@@ -139,11 +137,6 @@ export class InputNumber
*/
@Prop({ reflect: true }) disabled = false;
- @Watch("disabled")
- disabledWatcher(): void {
- this.setDisabledAction();
- }
-
/**
* Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
*
@@ -430,8 +423,6 @@ export class InputNumber
private nudgeNumberValueIntervalId: number;
- mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
private userChangedValue = false;
//--------------------------------------------------------------------------
@@ -473,9 +464,6 @@ export class InputNumber
}
connectLabel(this);
connectForm(this);
-
- this.mutationObserver?.observe(this.el, { childList: true });
- this.setDisabledAction();
this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -488,8 +476,6 @@ export class InputNumber
disconnectForm(this);
disconnectLocalized(this);
disconnectMessages(this);
-
- this.mutationObserver?.disconnect();
this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -875,24 +861,6 @@ export class InputNumber
this.childNumberEl = el;
};
- private setDisabledAction(): void {
- const slottedActionEl = getSlotted(this.el, "action");
-
- if (!slottedActionEl) {
- return;
- }
-
- if (this.disabled) {
- if (slottedActionEl.getAttribute("disabled") == null) {
- this.slottedActionElDisabledInternally = true;
- }
- slottedActionEl.setAttribute("disabled", "");
- } else if (this.slottedActionElDisabledInternally) {
- slottedActionEl.removeAttribute("disabled");
- this.slottedActionElDisabledInternally = false;
- }
- }
-
private setInputNumberValue = (newInputValue: string): void => {
if (!this.childNumberEl) {
return;
diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
index d0b3fa416b8..648b2824022 100644
--- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
@@ -367,12 +367,6 @@ describe("calcite-input-text", () => {
for (const input of inputs) {
expect(await input.getProperty("readOnly")).toBe(true);
}
-
- const buttons = await page.findAll("calcite-input-text button");
-
- for (const button of buttons) {
- expect(await button.getProperty("disabled")).toBe(true);
- }
});
it("sets internals to pattern when the attribute is used", async () => {
@@ -433,63 +427,6 @@ describe("calcite-input-text", () => {
expect(await isElementFocused(page, componentTag)).toBe(true);
});
- it("allows disabling slotted action", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `Action`,
- );
-
- const input = await page.find("calcite-input-text");
- const button = await page.find("calcite-button");
-
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("1");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- await input.setProperty("disabled", true);
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("2");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
-
- await input.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("3");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("13");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- await button.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("4");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(false);
- expect(await input.getProperty("disabled")).toBe(false);
-
- await input.setProperty("disabled", true);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("5");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
- });
-
describe("is form-associated", () => {
formAssociated("calcite-input-text", { testValue: "test", submitsOnEnter: true, validation: true });
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index 746d854f78a..ab93bb06151 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -12,7 +12,7 @@ import {
VNode,
Watch,
} from "@stencil/core";
-import { getElementDir, getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
+import { getElementDir, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
import {
connectForm,
disconnectForm,
@@ -35,7 +35,6 @@ import {
setUpLoadableComponent,
} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
import { CSS_UTILITY } from "../../utils/resources";
import {
connectMessages,
@@ -114,11 +113,6 @@ export class InputText
*/
@Prop({ reflect: true }) disabled = false;
- @Watch("disabled")
- disabledWatcher(): void {
- this.setDisabledAction();
- }
-
/**
* Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
*
@@ -336,8 +330,6 @@ export class InputText
/** the computed icon to render */
private requestedIcon?: IconNameOrString;
- mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
private userChangedValue = false;
@State() effectiveLocale: string;
@@ -368,8 +360,6 @@ export class InputText
connectLabel(this);
connectForm(this);
- this.mutationObserver?.observe(this.el, { childList: true });
- this.setDisabledAction();
this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -378,8 +368,6 @@ export class InputText
disconnectForm(this);
disconnectLocalized(this);
disconnectMessages(this);
-
- this.mutationObserver?.disconnect();
this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -563,24 +551,6 @@ export class InputText
this.childEl = el;
};
- private setDisabledAction(): void {
- const slottedActionEl = getSlotted(this.el, "action");
-
- if (!slottedActionEl) {
- return;
- }
-
- if (this.disabled) {
- if (slottedActionEl.getAttribute("disabled") == null) {
- this.slottedActionElDisabledInternally = true;
- }
- slottedActionEl.setAttribute("disabled", "");
- } else if (this.slottedActionElDisabledInternally) {
- slottedActionEl.removeAttribute("disabled");
- this.slottedActionElDisabledInternally = false;
- }
- }
-
private setInputValue = (newInputValue: string): void => {
if (!this.childEl) {
return;
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 287f21c4922..c770d15e59d 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -1766,12 +1766,6 @@ describe("calcite-input", () => {
for (const input of inputs) {
expect(await input.getProperty("readOnly")).toBe(true);
}
-
- const buttons = await page.findAll("calcite-input button");
-
- for (const button of buttons) {
- expect(await button.getProperty("disabled")).toBe(true);
- }
});
it("sets internals to multiple when the attribute is used", async () => {
@@ -1983,63 +1977,6 @@ describe("calcite-input", () => {
expect(await isElementFocused(page, componentTag)).toBe(true);
});
- it("allows disabling slotted action", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `Action`,
- );
-
- const input = await page.find("calcite-input");
- const button = await page.find("calcite-button");
-
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("1");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- input.setProperty("disabled", true);
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("2");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("1");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
-
- input.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("3");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("13");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(false);
-
- button.setProperty("disabled", false);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("4");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(false);
- expect(await input.getProperty("disabled")).toBe(false);
-
- input.setProperty("disabled", true);
- await page.waitForChanges();
- await input.callMethod("setFocus");
- await page.waitForChanges();
- await page.keyboard.type("5");
- await page.waitForChanges();
- expect(await input.getProperty("value")).toBe("134");
- expect(await button.getProperty("disabled")).toBe(true);
- expect(await input.getProperty("disabled")).toBe(true);
- });
-
describe("is form-associated", () => {
const supportedSubmissionTypes = [
{
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 82bb21206ce..b5bb2e91cc3 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -14,7 +14,6 @@ import {
} from "@stencil/core";
import {
getElementDir,
- getSlotted,
isPrimaryPointerButton,
setRequestedIcon,
toAriaBoolean,
@@ -56,7 +55,6 @@ import {
parseNumberString,
sanitizeNumberString,
} from "../../utils/number";
-import { createObserver } from "../../utils/observers";
import { CSS_UTILITY } from "../../utils/resources";
import {
connectMessages,
@@ -135,11 +133,6 @@ export class Input
*/
@Prop({ reflect: true }) disabled = false;
- @Watch("disabled")
- disabledWatcher(): void {
- this.setDisabledAction();
- }
-
/**
* Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
*
@@ -487,8 +480,6 @@ export class Input
private nudgeNumberValueIntervalId: number;
- mutationObserver = createObserver("mutation", () => this.setDisabledAction());
-
private userChangedValue = false;
//--------------------------------------------------------------------------
@@ -526,10 +517,6 @@ export class Input
}
connectLabel(this);
connectForm(this);
-
- this.mutationObserver?.observe(this.el, { childList: true });
-
- this.setDisabledAction();
this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -538,8 +525,6 @@ export class Input
disconnectForm(this);
disconnectLocalized(this);
disconnectMessages(this);
-
- this.mutationObserver?.disconnect();
this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}
@@ -955,24 +940,6 @@ export class Input
this.childNumberEl = el;
};
- private setDisabledAction(): void {
- const slottedActionEl = getSlotted(this.el, "action");
-
- if (!slottedActionEl) {
- return;
- }
-
- if (this.disabled) {
- if (slottedActionEl.getAttribute("disabled") == null) {
- this.slottedActionElDisabledInternally = true;
- }
- slottedActionEl.setAttribute("disabled", "");
- } else if (this.slottedActionElDisabledInternally) {
- slottedActionEl.removeAttribute("disabled");
- this.slottedActionElDisabledInternally = false;
- }
- }
-
private setInputValue = (newInputValue: string): void => {
if (this.type === "text" && !this.childEl) {
return;