From 0eb5e02b108c0ad24543a10bebc9d28d3f862fde Mon Sep 17 00:00:00 2001 From: Victor Geraldsson Date: Tue, 14 Jan 2025 11:02:27 +0100 Subject: [PATCH 1/5] chore(form): avoid using deprecated string refs --- .../templates/array-field-collapsible-item.ts | 14 ++++---- .../form/templates/array-field-simple-item.ts | 33 +++++++++++-------- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/form/templates/array-field-collapsible-item.ts b/src/components/form/templates/array-field-collapsible-item.ts index 58f8b2f8d5..bef04d76b0 100644 --- a/src/components/form/templates/array-field-collapsible-item.ts +++ b/src/components/form/templates/array-field-collapsible-item.ts @@ -33,7 +33,6 @@ interface CollapsibleItemProps { } export class CollapsibleItemTemplate extends React.Component { - public refs: { section: any }; state = { isOpen: false, }; @@ -48,8 +47,10 @@ export class CollapsibleItemTemplate extends React.Component { }; } + private section: HTMLLimelCollapsibleSectionElement; + public componentDidMount() { - const section: HTMLLimelCollapsibleSectionElement = this.refs.section; + const section = this.section; section.addEventListener('action', this.handleAction); section.addEventListener('open', this.handleOpen); @@ -57,12 +58,11 @@ export class CollapsibleItemTemplate extends React.Component { } public componentDidUpdate() { - const section: HTMLLimelCollapsibleSectionElement = this.refs.section; - this.setActions(section); + this.setActions(this.section); } public componentWillUnmount() { - const section: HTMLLimelCollapsibleSectionElement = this.refs.section; + const section = this.section; section.removeEventListener('action', this.handleAction); section.removeEventListener('open', this.handleOpen); } @@ -79,7 +79,9 @@ export class CollapsibleItemTemplate extends React.Component { { header: findTitle(data, schema, formSchema) || 'New item', class: 'limel-form-array-item--object', - ref: 'section', + ref: (section: HTMLLimelCollapsibleSectionElement) => { + this.section = section; + }, 'is-open': this.state.isOpen, }, children, diff --git a/src/components/form/templates/array-field-simple-item.ts b/src/components/form/templates/array-field-simple-item.ts index a6da4b58c5..d9db44cb69 100644 --- a/src/components/form/templates/array-field-simple-item.ts +++ b/src/components/form/templates/array-field-simple-item.ts @@ -9,40 +9,39 @@ interface SimpleItemProps { const LIMEL_ICON_BUTTON = 'limel-icon-button'; export class SimpleItemTemplate extends React.Component { - public refs: { removeButton: any; moveUpButton: any; moveDownButton: any }; - constructor(public props: SimpleItemProps) { super(props); } + private removeButton: HTMLLimelButtonElement; + private moveUpButton: HTMLLimelButtonElement; + private moveDownButton: HTMLLimelButtonElement; + private removeHandler: (event: any) => void; private moveUpHandler: (event: any) => void; private moveDownHandler: (event: any) => void; public componentDidMount() { const { item, index } = this.props; - const removeButton: HTMLLimelButtonElement = this.refs.removeButton; + const removeButton = this.removeButton; this.removeHandler = item.onDropIndexClick(index); removeButton.addEventListener('click', this.removeHandler); - const upButton: HTMLLimelButtonElement = this.refs.moveUpButton; + const upButton = this.moveUpButton; this.moveUpHandler = item.onReorderClick(index, index - 1); upButton.addEventListener('click', this.moveUpHandler); - const downButton: HTMLLimelButtonElement = this.refs.moveDownButton; + const downButton = this.moveDownButton; this.moveDownHandler = item.onReorderClick(index, index + 1); downButton.addEventListener('click', this.moveDownHandler); } public componentWillUnmount() { - const removeButton: HTMLLimelButtonElement = this.refs.removeButton; - removeButton.removeEventListener('click', this.removeHandler); + this.removeButton.removeEventListener('click', this.removeHandler); - const upButton: HTMLLimelButtonElement = this.refs.moveUpButton; - upButton.removeEventListener('click', this.moveUpHandler); + this.moveUpButton.removeEventListener('click', this.moveUpHandler); - const downButton: HTMLLimelButtonElement = this.refs.moveDownButton; - downButton.removeEventListener('click', this.moveDownHandler); + this.moveDownButton.removeEventListener('click', this.moveDownHandler); } public render() { @@ -63,7 +62,9 @@ export class SimpleItemTemplate extends React.Component { private renderRemoveButton(item: ArrayFieldItem) { const props: any = { icon: 'trash', - ref: 'removeButton', + ref: (button: HTMLLimelButtonElement) => { + this.removeButton = button; + }, }; if (!item.hasRemove) { props.disabled = true; @@ -75,7 +76,9 @@ export class SimpleItemTemplate extends React.Component { private renderMoveUpButton(item: ArrayFieldItem) { const props: any = { icon: 'up_arrow', - ref: 'moveUpButton', + ref: (button: HTMLLimelButtonElement) => { + this.moveUpButton = button; + }, }; if (!item.hasMoveUp) { props.disabled = true; @@ -87,7 +90,9 @@ export class SimpleItemTemplate extends React.Component { private renderMoveDownButton(item: ArrayFieldItem) { const props: any = { icon: 'down_arrow', - ref: 'moveDownButton', + ref: (button: HTMLLimelButtonElement) => { + this.moveDownButton = button; + }, }; if (!item.hasMoveDown) { props.disabled = true; From 661cb784350c8690c3a2cf0e004bc4fb7b352475 Mon Sep 17 00:00:00 2001 From: Victor Geraldsson Date: Tue, 14 Jan 2025 10:07:37 +0100 Subject: [PATCH 2/5] chore(design-guidelines): avoid implicitly using JSX types from react --- .../color-system/examples/extended-color-palette.tsx | 2 +- .../color-system/examples/primary-color-palette.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/design-guidelines/color-system/examples/extended-color-palette.tsx b/src/design-guidelines/color-system/examples/extended-color-palette.tsx index 064697c990..1526d14630 100644 --- a/src/design-guidelines/color-system/examples/extended-color-palette.tsx +++ b/src/design-guidelines/color-system/examples/extended-color-palette.tsx @@ -1,4 +1,4 @@ -import { Component, h } from '@stencil/core'; +import { Component, h, JSX } from '@stencil/core'; @Component({ tag: 'limel-example-extended-color-palette', diff --git a/src/design-guidelines/color-system/examples/primary-color-palette.tsx b/src/design-guidelines/color-system/examples/primary-color-palette.tsx index 9c2e162ffe..d5f90f3d9b 100644 --- a/src/design-guidelines/color-system/examples/primary-color-palette.tsx +++ b/src/design-guidelines/color-system/examples/primary-color-palette.tsx @@ -1,4 +1,4 @@ -import { Component, h } from '@stencil/core'; +import { Component, h, JSX } from '@stencil/core'; @Component({ tag: 'limel-example-primary-color-palette', From 27682ee3bd991ad1ca9502333b6f5029976ed13f Mon Sep 17 00:00:00 2001 From: Victor Geraldsson Date: Mon, 13 Jan 2025 10:13:53 +0100 Subject: [PATCH 3/5] chore(package): update to react 19 --- etc/lime-elements.api.md | 157 +++++++++++++++++++-------------------- package-lock.json | 116 +++++++++++------------------ package.json | 8 +- 3 files changed, 125 insertions(+), 156 deletions(-) diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md index 26cfe033a9..526e896d9f 100644 --- a/etc/lime-elements.api.md +++ b/etc/lime-elements.api.md @@ -980,9 +980,9 @@ export type InputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number' // Warning: (ae-missing-release-tag) "LocalJSX" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -namespace JSX_2 { +export namespace JSX { // (undocumented) - interface IntrinsicElements { + export interface IntrinsicElements { // (undocumented) "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow; // (undocumented) @@ -1003,11 +1003,11 @@ namespace JSX_2 { "limel-button-group": LimelButtonGroup; // (undocumented) "limel-callout": LimelCallout; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-card": LimelCard; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-chart": LimelChart; @@ -1037,7 +1037,7 @@ namespace JSX_2 { "limel-dock": LimelDock; // (undocumented) "limel-dock-button": LimelDockButton; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-dynamic-label"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-dynamic-label"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-dynamic-label": LimelDynamicLabel; @@ -1047,7 +1047,7 @@ namespace JSX_2 { "limel-file-dropzone": LimelFileDropzone; // (undocumented) "limel-file-input": LimelFileInput; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-file-viewer"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-file-viewer"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-file-viewer": LimelFileViewer; @@ -1099,7 +1099,7 @@ namespace JSX_2 { "limel-progress-flow": LimelProgressFlow; // (undocumented) "limel-progress-flow-item": LimelProgressFlowItem; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-prosemirror-adapter"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-prosemirror-adapter"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-prosemirror-adapter": LimelProsemirrorAdapter; @@ -1123,11 +1123,11 @@ namespace JSX_2 { "limel-tab-panel": LimelTabPanel; // (undocumented) "limel-table": LimelTable; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-text-editor": LimelTextEditor; - // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor-link-menu"" is marked as @public, but its signature references "JSX_2" which is marked as @beta + // Warning: (ae-incompatible-release-tags) The symbol ""limel-text-editor-link-menu"" is marked as @public, but its signature references "JSX" which is marked as @beta // // (undocumented) "limel-text-editor-link-menu": LimelTextEditorLinkMenu; @@ -1136,9 +1136,9 @@ namespace JSX_2 { // (undocumented) "limel-tooltip-content": LimelTooltipContent; } - interface Limel3dHoverEffectGlow { + export interface Limel3dHoverEffectGlow { } - interface LimelActionBar { + export interface LimelActionBar { "accessibleLabel"?: string; "actions"?: Array; "layout"?: 'fullWidth' | 'floating'; @@ -1146,33 +1146,33 @@ namespace JSX_2 { "openDirection"?: OpenDirection; } // (undocumented) - interface LimelActionBarItem { + export interface LimelActionBarItem { "isVisible"?: boolean; "item": ActionBarItem | ListSeparator; "onSelect"?: (event: LimelActionBarItemCustomEvent) => void; "selected"?: boolean; } // (undocumented) - interface LimelActionBarOverflowMenu { + export interface LimelActionBarOverflowMenu { "items"?: Array; "onSelect"?: (event: LimelActionBarOverflowMenuCustomEvent) => void; "openDirection"?: OpenDirection; } - interface LimelBadge { + export interface LimelBadge { "label"?: number | string; } // (undocumented) - interface LimelBanner { + export interface LimelBanner { "icon"?: string; "message"?: string; } - interface LimelBreadcrumbs { + export interface LimelBreadcrumbs { "divider"?: string; "items"?: BreadcrumbsItem[]; "onSelect"?: (event: LimelBreadcrumbsCustomEvent) => void; } // (undocumented) - interface LimelButton { + export interface LimelButton { "disabled"?: boolean; "icon"?: string; "label"?: string; @@ -1181,19 +1181,19 @@ namespace JSX_2 { "outlined"?: boolean; "primary"?: boolean; } - interface LimelButtonGroup { + export interface LimelButtonGroup { "disabled"?: boolean; "onChange"?: (event: LimelButtonGroupCustomEvent