@synergy-design-system/react 2.16.0 → 2.18.0

package/README.md

@@ -7,6 +7,10 @@ This package aims for an improved UX when used in React applications:
 - Auto-completion
 - Event handling
 
+> Note that with react@19 and above, react has full support for web-components.
+> For those react versions, this package can be used by loading custom types,
+> you **do not need to use the exported components** anymore.
+
 ## Getting started
 
 ### 1. Package installation
@@ -54,14 +58,63 @@ createRoot(document.getElementById("root")!).render(
 );
 ```
 
-### 3. Importing and rendering components
+### 3. Using native Synergy components in react (only for react >= 19.0.0) in Typescript projects
+
+React@19 finally shipped with official support for web components.
+With this version of react, you are free to **use our native web components** directly in your application.
+
+However, you will likely receive errors because our elements are not known to React as available (in react speech `intrinsic`) elements. This will also occur when using typescript. For this reason, we provide **type only wrappers** for all versions of react from version 19.0.0 onward.
+
+Using synergy in a typescript project with React@19 can be easily achieved via one line of code. There is no need to import `@synergy-design-system/react` in your code directly anymore!
+
+Just add the following definition to your projects typescript configuration file (e.g. `tsconfig.json`):
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@synergy-design-system/react/types/latest"]
+  }
+}
+```
+
+This makes sure your project knows about our list of intrinsic elements. This will also enable **automatic type checks and auto completion for properties** for all synergy elements.
+
+You may now use the components by importing them from the `@synergy-design-system/component` package and rendering them in a React component.
+
+```tsx
+// You may also load the complete bundle somewhere in your application,
+// but directly including only needed components leads to smaller bundles.
+import "@synergy-design-system/components/components/button/button.js";
+import "@synergy-design-system/components/components/input/input.js";
+
+export const MyButton = () => <syn-button type="submit">Submit me</syn-button>;
+export const MyInput = () => (
+  <syn-input name="my-input" onsyn-change={e => console.log(e)} required />
+);
+```
+
+#### 3.1. Migrating from synergies react wrappers to native components
+
+1. First make sure you have react@19 or higher installed in your project.
+2. Upgrade `@synergy-design-system/react` to the latest version.
+3. Add the required types to your typescript configuration (`compilerOptions.types=['@synergy-design-system/react/types/latest']`).
+4. Run typescript to verify everything is still fine.
+5. Replace occurrences of the old synergy components with their native counterpart (e.g. `<SynButton>` should be exchanged for `<syn-button>`). When using native synergy components, make sure to double check on event names (e.g. `<SynInput onSynInput={e => null} />` will become `<syn-input onsyn-input={e => null} />`).
+6. When you are done, remove all occurrences of `@synergy-design-system/react` from your code.
+
+---
+
+### 4. Using the lit wrappers (required for react < 19.0.0, optional for react >= 19.0.0)
 
 You may now use the components by importing them from the `@synergy-design-system/react` package and rendering them in a React component.
 
 ```tsx
-import { SynButton } from "@synergy-design-system/react";
+import { SynButton, SynInput } from "@synergy-design-system/react";
 
 export const MyButton = () => <SynButton type="submit">Submit me</SynButton>;
+export const MyInput = () => (
+  <SynInput name="my-input" onSynChange={e => console.log(e)} required />
+);
 ```
 
 ### 4. Usage of the components

package/dist/chunks/{chunk.LS5YMLOL.js → chunk.WKTCEEC3.js}

@@ -22,4 +22,4 @@ var SynRange = createComponent({
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.LS5YMLOL.js.map
+//# sourceMappingURL=chunk.WKTCEEC3.js.map

package/dist/chunks/{chunk.LS5YMLOL.js.map → chunk.WKTCEEC3.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/range/range.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent } from '@synergy-design-system/components';\nimport type { SynChangeEvent } from '@synergy-design-system/components';\nimport type { SynFocusEvent } from '@synergy-design-system/components';\nimport type { SynInputEvent } from '@synergy-design-system/components';\nimport type { SynInvalidEvent } from '@synergy-design-system/components';\nimport type { SynMoveEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-range';\nComponent.define('syn-range');\n\n/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */\nexport const SynRange = createComponent({\n  displayName: 'SynRange',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n    onSynMove: 'syn-move' as EventName<SynMoveEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\nexport type { SynMoveEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAUtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AAgDrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/range/range.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent } from '@synergy-design-system/components';\nimport type { SynChangeEvent } from '@synergy-design-system/components';\nimport type { SynFocusEvent } from '@synergy-design-system/components';\nimport type { SynInputEvent } from '@synergy-design-system/components';\nimport type { SynInvalidEvent } from '@synergy-design-system/components';\nimport type { SynMoveEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-range';\nComponent.define('syn-range');\n\n/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @csspart tooltip__base - The base of the tooltip\n * @csspart tooltip__arrow - The arrow of the tooltip\n * @csspart tooltip__popup - The popup of the tooltip\n * @csspart tooltip__body - The body of the tooltip\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */\nexport const SynRange = createComponent({\n  displayName: 'SynRange',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n    onSynMove: 'syn-move' as EventName<SynMoveEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\nexport type { SynMoveEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAUtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AAqDrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/components/range.d.ts

@@ -42,6 +42,11 @@ import type { SynMoveEvent } from '@synergy-design-system/components';
  * @csspart ticks - The container that wraps the tick marks.
  * @csspart thumb - The thumb(s) that the user can drag to change the range.
  *
+ * @csspart tooltip__base - The base of the tooltip
+ * @csspart tooltip__arrow - The arrow of the tooltip
+ * @csspart tooltip__popup - The popup of the tooltip
+ * @csspart tooltip__body - The body of the tooltip
+ *
  * @cssproperty --thumb-size - The size of a thumb.
  * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
  * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).

package/dist/components/range.js

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "../chunks/chunk.LS5YMLOL.js";
+} from "../chunks/chunk.WKTCEEC3.js";
 export {
   SynRange
 };

package/dist/index.js

@@ -30,7 +30,7 @@ import {
 } from "./chunks/chunk.TH46P32E.js";
 import {
   SynRange
-} from "./chunks/chunk.LS5YMLOL.js";
+} from "./chunks/chunk.WKTCEEC3.js";
 import {
   SynSelect
 } from "./chunks/chunk.DDVND3A3.js";