@synergy-design-system/react 1.4.0 → 1.5.0

package/dist/chunks/chunk.CJKK63W2.js

@@ -0,0 +1,18 @@
+// ../react/src/components/option.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/option/option.component.js";
+var tagName = "syn-option";
+Component.define("syn-option");
+var SynOption = createComponent({
+  displayName: "SynOption",
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName
+});
+
+export {
+  SynOption
+};
+//# sourceMappingURL=chunk.CJKK63W2.js.map

package/dist/chunks/chunk.CJKK63W2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option.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/option/option.component.js';\n\nconst tagName = 'syn-option';\nComponent.define('syn-option');\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport const SynOption = createComponent({\n  displayName: 'SynOption',\n  elementClass: Component,\n  events: {\n\n  },\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAoBtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.DLAIDGSD.js

@@ -0,0 +1,18 @@
+// ../react/src/components/optgroup.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/optgroup/optgroup.component.js";
+var tagName = "syn-optgroup";
+Component.define("syn-optgroup");
+var SynOptgroup = createComponent({
+  displayName: "SynOptgroup",
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName
+});
+
+export {
+  SynOptgroup
+};
+//# sourceMappingURL=chunk.DLAIDGSD.js.map

package/dist/chunks/chunk.DLAIDGSD.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/optgroup.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/optgroup/optgroup.component.js';\n\nconst tagName = 'syn-optgroup';\nComponent.define('syn-optgroup');\n\n/**\n * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs\n * @status stable\n * @since 1.3.0\n *\n * @dependency syn-divider\n *\n * @slot - The given options. Must be `<syn-option>` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the <syn-option> elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */\nexport const SynOptgroup = createComponent({\n  displayName: 'SynOptgroup',\n  elementClass: Component,\n  events: {\n\n  },\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AAwBxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.FB24BPQZ.js

@@ -0,0 +1,29 @@
+// ../react/src/components/select.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/select/select.component.js";
+var tagName = "syn-select";
+Component.define("syn-select");
+var SynSelect = createComponent({
+  displayName: "SynSelect",
+  elementClass: Component,
+  events: {
+    onSynChange: "syn-change",
+    onSynClear: "syn-clear",
+    onSynInput: "syn-input",
+    onSynFocus: "syn-focus",
+    onSynBlur: "syn-blur",
+    onSynShow: "syn-show",
+    onSynAfterShow: "syn-after-show",
+    onSynHide: "syn-hide",
+    onSynAfterHide: "syn-after-hide",
+    onSynInvalid: "syn-invalid"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynSelect
+};
+//# sourceMappingURL=chunk.FB24BPQZ.js.map

package/dist/chunks/chunk.FB24BPQZ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select.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/select/select.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynAfterHideEvent, SynAfterShowEvent, SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynHideEvent, SynInputEvent, SynInvalidEvent, SynShowEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-select';\nComponent.define('syn-select');\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\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-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */\nexport const SynSelect = createComponent({\n  displayName: 'SynSelect',\n  elementClass: Component,\n  events: {\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynClear: 'syn-clear' as EventName<SynClearEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynShow: 'syn-show' as EventName<SynShowEvent>,\n    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,\n    onSynHide: 'syn-hide' as EventName<SynHideEvent>,\n    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynClearEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynShowEvent } from '@synergy-design-system/components';\nexport type { SynAfterShowEvent } from '@synergy-design-system/components';\nexport type { SynHideEvent } from '@synergy-design-system/components';\nexport type { SynAfterHideEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AA+CtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/optgroup.d.ts

@@ -0,0 +1,24 @@
+import Component from '@synergy-design-system/components/components/optgroup/optgroup.component.js';
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export declare const SynOptgroup: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/optgroup.js

@@ -0,0 +1,7 @@
+import {
+  SynOptgroup
+} from "../chunks/chunk.DLAIDGSD.js";
+export {
+  SynOptgroup
+};
+//# sourceMappingURL=optgroup.js.map

package/dist/components/optgroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/option.d.ts

@@ -0,0 +1,20 @@
+import Component from '@synergy-design-system/components/components/option/option.component.js';
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @documentation https://synergy.style/components/option
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export declare const SynOption: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/option.js

@@ -0,0 +1,7 @@
+import {
+  SynOption
+} from "../chunks/chunk.CJKK63W2.js";
+export {
+  SynOption
+};
+//# sourceMappingURL=option.js.map

package/dist/components/option.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/select.d.ts

@@ -0,0 +1,70 @@
+import Component from '@synergy-design-system/components/components/select/select.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynHideEvent, SynInputEvent, SynInvalidEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Selects allow you to choose items from a menu of predefined options.
+ * @documentation https://synergy.style/components/select
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-tag
+ *
+ * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the control's value changes.
+ * @event syn-clear - Emitted when the control's value is cleared.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-show - Emitted when the select's menu opens.
+ * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event syn-hide - Emitted when the select's menu closes.
+ * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiselect` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ */
+export declare const SynSelect: import("@lit/react").ReactWebComponent<Component, {
+    onSynChange: EventName<SynChangeEvent>;
+    onSynClear: EventName<SynClearEvent>;
+    onSynInput: EventName<SynInputEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynShow: EventName<SynShowEvent>;
+    onSynAfterShow: EventName<SynAfterShowEvent>;
+    onSynHide: EventName<SynHideEvent>;
+    onSynAfterHide: EventName<SynAfterHideEvent>;
+    onSynInvalid: EventName<SynInvalidEvent>;
+}>;
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynClearEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

package/dist/components/select.js

@@ -0,0 +1,7 @@
+import {
+  SynSelect
+} from "../chunks/chunk.FB24BPQZ.js";
+export {
+  SynSelect
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -5,9 +5,12 @@ export { SynDivider } from './components/divider.js';
 export { SynIcon } from './components/icon.js';
 export { SynIconButton } from './components/icon-button.js';
 export { SynInput } from './components/input.js';
+export { SynOptgroup } from './components/optgroup.js';
+export { SynOption } from './components/option.js';
 export { SynRadio } from './components/radio.js';
 export { SynRadioButton } from './components/radio-button.js';
 export { SynRadioGroup } from './components/radio-group.js';
+export { SynSelect } from './components/select.js';
 export { SynSwitch } from './components/switch.js';
 export { SynTag } from './components/tag.js';
 export { SynTextarea } from './components/textarea.js';

package/dist/index.js

@@ -1,3 +1,12 @@
+import {
+  SynTextarea
+} from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynOptgroup
+} from "./chunks/chunk.DLAIDGSD.js";
+import {
+  SynOption
+} from "./chunks/chunk.CJKK63W2.js";
 import {
   SynRadioButton
 } from "./chunks/chunk.QBD4EIK5.js";
@@ -7,15 +16,15 @@ import {
 import {
   SynRadio
 } from "./chunks/chunk.AFCMSVBY.js";
+import {
+  SynSelect
+} from "./chunks/chunk.FB24BPQZ.js";
 import {
   SynSwitch
 } from "./chunks/chunk.TOR523VV.js";
 import {
   SynTag
 } from "./chunks/chunk.7T7PO2AE.js";
-import {
-  SynTextarea
-} from "./chunks/chunk.4YY6TGIA.js";
 import {
   SynButtonGroup
 } from "./chunks/chunk.6OTEQXZW.js";
@@ -45,9 +54,12 @@ export {
   SynIcon,
   SynIconButton,
   SynInput,
+  SynOptgroup,
+  SynOption,
   SynRadio,
   SynRadioButton,
   SynRadioGroup,
+  SynSelect,
   SynSwitch,
   SynTag,
   SynTextarea

package/package.json

@@ -4,8 +4,8 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@lit/react": "^1.0.0",
-    "@synergy-design-system/components": "^1.4.0"
+    "@lit/react": "^1.0.2",
+    "@synergy-design-system/components": "^1.5.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,9 +40,9 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "devDependencies": {
-    "@types/react": "^18.2.31",
+    "@types/react": "^18.2.48",
     "react": "^18.2.0"
   }
 }