@sellmate/design-system-react 1.0.33 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/components.d.ts +30 -1
  2. package/dist/components/components.js +51 -0
  3. package/dist/components/components.server.d.ts +30 -1
  4. package/dist/components/components.server.js +69 -6
  5. package/lib/components/components.server.ts +96 -7
  6. package/lib/components/components.ts +73 -1
  7. package/package.json +2 -2
package/dist/components/components.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2UpdateDetail } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
@@ -37,6 +37,11 @@ import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-sy
37
37
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
38
38
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
39
39
  import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
40
+ import { SdSelectV2ListItemSearch as SdSelectV2ListItemSearchElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item-search.js";
41
+ import { SdSelectV2ListItem as SdSelectV2ListItemElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item.js";
42
+ import { SdSelectV2Listbox as SdSelectV2ListboxElement } from "@sellmate/design-system/dist/components/sd-select-v2-listbox.js";
43
+ import { SdSelectV2Trigger as SdSelectV2TriggerElement } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
44
+ import { SdSelectV2 as SdSelectV2Element } from "@sellmate/design-system/dist/components/sd-select-v2.js";
40
45
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
41
46
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
42
47
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
@@ -213,6 +218,30 @@ export type SdSelectSearchInputEvents = {
213
218
  onSdSearchFocus: EventName<CustomEvent<void>>;
214
219
  };
215
220
  export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
221
+ export type SdSelectV2Events = {
222
+ onSdUpdate: EventName<SdSelectV2CustomEvent<SelectV2UpdateDetail>>;
223
+ onSdDropDownShow: EventName<CustomEvent<{
224
+ isOpen: boolean;
225
+ }>>;
226
+ };
227
+ export declare const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Events>;
228
+ export type SdSelectV2ListItemEvents = {
229
+ onSdListItemClick: EventName<SdSelectV2ListItemCustomEvent<SelectV2Option>>;
230
+ };
231
+ export declare const SdSelectV2ListItem: StencilReactComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents>;
232
+ export type SdSelectV2ListItemSearchEvents = {
233
+ onSdSearchFilter: EventName<CustomEvent<string>>;
234
+ onSdSearchFocus: EventName<CustomEvent<void>>;
235
+ };
236
+ export declare const SdSelectV2ListItemSearch: StencilReactComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents>;
237
+ export type SdSelectV2ListboxEvents = {
238
+ onSdOptionSelect: EventName<SdSelectV2ListboxCustomEvent<SelectV2Option>>;
239
+ };
240
+ export declare const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>;
241
+ export type SdSelectV2TriggerEvents = {
242
+ onSdTriggerClick: EventName<CustomEvent<void>>;
243
+ };
244
+ export declare const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>;
216
245
  export type SdTabsEvents = {
217
246
  onSdUpdate: EventName<CustomEvent<string>>;
218
247
  };
package/dist/components/components.js CHANGED
@@ -33,6 +33,11 @@ import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as def
33
33
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
34
34
  import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
35
35
  import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
36
+ import { SdSelectV2ListItemSearch as SdSelectV2ListItemSearchElement, defineCustomElement as defineSdSelectV2ListItemSearch } from "@sellmate/design-system/dist/components/sd-select-v2-list-item-search.js";
37
+ import { SdSelectV2ListItem as SdSelectV2ListItemElement, defineCustomElement as defineSdSelectV2ListItem } from "@sellmate/design-system/dist/components/sd-select-v2-list-item.js";
38
+ import { SdSelectV2Listbox as SdSelectV2ListboxElement, defineCustomElement as defineSdSelectV2Listbox } from "@sellmate/design-system/dist/components/sd-select-v2-listbox.js";
39
+ import { SdSelectV2Trigger as SdSelectV2TriggerElement, defineCustomElement as defineSdSelectV2Trigger } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
40
+ import { SdSelectV2 as SdSelectV2Element, defineCustomElement as defineSdSelectV2 } from "@sellmate/design-system/dist/components/sd-select-v2.js";
36
41
  import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
37
42
  import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
38
43
  import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
@@ -372,6 +377,52 @@ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
372
377
  },
373
378
  defineCustomElement: defineSdSelectSearchInput
374
379
  });
380
+ export const SdSelectV2 = /*@__PURE__*/ createComponent({
381
+ tagName: 'sd-select-v2',
382
+ elementClass: SdSelectV2Element,
383
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
384
+ react: React,
385
+ events: {
386
+ onSdUpdate: 'sdUpdate',
387
+ onSdDropDownShow: 'sdDropDownShow'
388
+ },
389
+ defineCustomElement: defineSdSelectV2
390
+ });
391
+ export const SdSelectV2ListItem = /*@__PURE__*/ createComponent({
392
+ tagName: 'sd-select-v2-list-item',
393
+ elementClass: SdSelectV2ListItemElement,
394
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
395
+ react: React,
396
+ events: { onSdListItemClick: 'sdListItemClick' },
397
+ defineCustomElement: defineSdSelectV2ListItem
398
+ });
399
+ export const SdSelectV2ListItemSearch = /*@__PURE__*/ createComponent({
400
+ tagName: 'sd-select-v2-list-item-search',
401
+ elementClass: SdSelectV2ListItemSearchElement,
402
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
403
+ react: React,
404
+ events: {
405
+ onSdSearchFilter: 'sdSearchFilter',
406
+ onSdSearchFocus: 'sdSearchFocus'
407
+ },
408
+ defineCustomElement: defineSdSelectV2ListItemSearch
409
+ });
410
+ export const SdSelectV2Listbox = /*@__PURE__*/ createComponent({
411
+ tagName: 'sd-select-v2-listbox',
412
+ elementClass: SdSelectV2ListboxElement,
413
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
414
+ react: React,
415
+ events: { onSdOptionSelect: 'sdOptionSelect' },
416
+ defineCustomElement: defineSdSelectV2Listbox
417
+ });
418
+ export const SdSelectV2Trigger = /*@__PURE__*/ createComponent({
419
+ tagName: 'sd-select-v2-trigger',
420
+ elementClass: SdSelectV2TriggerElement,
421
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
422
+ react: React,
423
+ events: { onSdTriggerClick: 'sdTriggerClick' },
424
+ defineCustomElement: defineSdSelectV2Trigger
425
+ });
375
426
  export const SdTabs = /*@__PURE__*/ createComponent({
376
427
  tagName: 'sd-tabs',
377
428
  elementClass: SdTabsElement,
package/dist/components/components.server.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2UpdateDetail } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
@@ -37,6 +37,11 @@ import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-sy
37
37
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
38
38
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
39
39
  import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
40
+ import { SdSelectV2ListItemSearch as SdSelectV2ListItemSearchElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item-search.js";
41
+ import { SdSelectV2ListItem as SdSelectV2ListItemElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item.js";
42
+ import { SdSelectV2Listbox as SdSelectV2ListboxElement } from "@sellmate/design-system/dist/components/sd-select-v2-listbox.js";
43
+ import { SdSelectV2Trigger as SdSelectV2TriggerElement } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
44
+ import { SdSelectV2 as SdSelectV2Element } from "@sellmate/design-system/dist/components/sd-select-v2.js";
40
45
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
41
46
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
42
47
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
@@ -215,6 +220,30 @@ export type SdSelectSearchInputEvents = {
215
220
  onSdSearchFocus: EventName<CustomEvent<void>>;
216
221
  };
217
222
  export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
223
+ export type SdSelectV2Events = {
224
+ onSdUpdate: EventName<SdSelectV2CustomEvent<SelectV2UpdateDetail>>;
225
+ onSdDropDownShow: EventName<CustomEvent<{
226
+ isOpen: boolean;
227
+ }>>;
228
+ };
229
+ export declare const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Events>;
230
+ export type SdSelectV2ListItemEvents = {
231
+ onSdListItemClick: EventName<SdSelectV2ListItemCustomEvent<SelectV2Option>>;
232
+ };
233
+ export declare const SdSelectV2ListItem: StencilReactComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents>;
234
+ export type SdSelectV2ListItemSearchEvents = {
235
+ onSdSearchFilter: EventName<CustomEvent<string>>;
236
+ onSdSearchFocus: EventName<CustomEvent<void>>;
237
+ };
238
+ export declare const SdSelectV2ListItemSearch: StencilReactComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents>;
239
+ export type SdSelectV2ListboxEvents = {
240
+ onSdOptionSelect: EventName<SdSelectV2ListboxCustomEvent<SelectV2Option>>;
241
+ };
242
+ export declare const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>;
243
+ export type SdSelectV2TriggerEvents = {
244
+ onSdTriggerClick: EventName<CustomEvent<void>>;
245
+ };
246
+ export declare const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>;
218
247
  export type SdTabsEvents = {
219
248
  onSdUpdate: EventName<CustomEvent<string>>;
220
249
  };
package/dist/components/components.server.js CHANGED
@@ -143,7 +143,6 @@ export const SdField = /*@__PURE__*/ createComponent({
143
143
  status: 'status',
144
144
  label: 'label',
145
145
  insideLabel: 'inside-label',
146
- useLabelRequired: 'use-label-required',
147
146
  labelTooltip: 'label-tooltip',
148
147
  rules: 'rules'
149
148
  },
@@ -230,7 +229,6 @@ export const SdInput = /*@__PURE__*/ createComponent({
230
229
  focused: 'focused',
231
230
  hovered: 'hovered',
232
231
  label: 'label',
233
- useLabelRequired: 'use-label-required',
234
232
  labelTooltip: 'label-tooltip',
235
233
  rules: 'rules'
236
234
  },
@@ -324,6 +322,7 @@ export const SdPortal = /*@__PURE__*/ createComponent({
324
322
  tagName: 'sd-portal',
325
323
  properties: {
326
324
  to: 'to',
325
+ viewportPadding: 'viewport-padding',
327
326
  zIndex: 'z-index',
328
327
  open: 'open'
329
328
  },
@@ -397,7 +396,6 @@ export const SdSelect = /*@__PURE__*/ createComponent({
397
396
  searchable: 'searchable',
398
397
  label: 'label',
399
398
  insideLabel: 'inside-label',
400
- useLabelRequired: 'use-label-required',
401
399
  labelTooltip: 'label-tooltip',
402
400
  error: 'error',
403
401
  options: 'options',
@@ -438,7 +436,6 @@ export const SdSelectGroup = /*@__PURE__*/ createComponent({
438
436
  searchable: 'searchable',
439
437
  label: 'label',
440
438
  insideLabel: 'inside-label',
441
- useLabelRequired: 'use-label-required',
442
439
  labelTooltip: 'label-tooltip',
443
440
  error: 'error',
444
441
  options: 'options',
@@ -462,7 +459,6 @@ export const SdSelectMultiple = /*@__PURE__*/ createComponent({
462
459
  useAll: 'use-all',
463
460
  useCheckbox: 'use-checkbox',
464
461
  label: 'label',
465
- useLabelRequired: 'use-label-required',
466
462
  labelTooltip: 'label-tooltip',
467
463
  error: 'error',
468
464
  value: 'value',
@@ -488,7 +484,6 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ createComponent({
488
484
  allCheckedLabel: 'all-checked-label',
489
485
  allCheckOptionLabel: 'all-check-option-label',
490
486
  label: 'label',
491
- useLabelRequired: 'use-label-required',
492
487
  labelTooltip: 'label-tooltip',
493
488
  error: 'error',
494
489
  value: 'value',
@@ -536,6 +531,74 @@ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
536
531
  clientModule: clientComponents.SdSelectSearchInput,
537
532
  serializeShadowRoot,
538
533
  });
534
+ export const SdSelectV2 = /*@__PURE__*/ createComponent({
535
+ tagName: 'sd-select-v2',
536
+ properties: {
537
+ name: 'name',
538
+ value: 'value',
539
+ placeholder: 'placeholder',
540
+ width: 'width',
541
+ maxDropdownWidth: 'max-dropdown-width',
542
+ dropdownHeight: 'dropdown-height',
543
+ disabled: 'disabled',
544
+ label: 'label',
545
+ addonLabel: 'addon-label',
546
+ error: 'error',
547
+ fieldName: 'field-name',
548
+ labelTooltip: 'label-tooltip',
549
+ options: 'options',
550
+ rules: 'rules'
551
+ },
552
+ hydrateModule: import('@sellmate/design-system/hydrate'),
553
+ clientModule: clientComponents.SdSelectV2,
554
+ serializeShadowRoot,
555
+ });
556
+ export const SdSelectV2ListItem = /*@__PURE__*/ createComponent({
557
+ tagName: 'sd-select-v2-list-item',
558
+ properties: {
559
+ depth: 'depth',
560
+ isSelected: 'is-selected',
561
+ isFocused: 'is-focused',
562
+ useCheckbox: 'use-checkbox'
563
+ },
564
+ hydrateModule: import('@sellmate/design-system/hydrate'),
565
+ clientModule: clientComponents.SdSelectV2ListItem,
566
+ serializeShadowRoot,
567
+ });
568
+ export const SdSelectV2ListItemSearch = /*@__PURE__*/ createComponent({
569
+ tagName: 'sd-select-v2-list-item-search',
570
+ properties: { isScrolled: 'is-scrolled' },
571
+ hydrateModule: import('@sellmate/design-system/hydrate'),
572
+ clientModule: clientComponents.SdSelectV2ListItemSearch,
573
+ serializeShadowRoot,
574
+ });
575
+ export const SdSelectV2Listbox = /*@__PURE__*/ createComponent({
576
+ tagName: 'sd-select-v2-listbox',
577
+ properties: {
578
+ name: 'name',
579
+ value: 'value',
580
+ triggerWidth: 'trigger-width',
581
+ maxWidth: 'max-width',
582
+ maxHeight: 'max-height',
583
+ options: 'options'
584
+ },
585
+ hydrateModule: import('@sellmate/design-system/hydrate'),
586
+ clientModule: clientComponents.SdSelectV2Listbox,
587
+ serializeShadowRoot,
588
+ });
589
+ export const SdSelectV2Trigger = /*@__PURE__*/ createComponent({
590
+ tagName: 'sd-select-v2-trigger',
591
+ properties: {
592
+ displayText: 'display-text',
593
+ placeholder: 'placeholder',
594
+ disabled: 'disabled',
595
+ isOpen: 'is-open',
596
+ addonLabel: 'addon-label'
597
+ },
598
+ hydrateModule: import('@sellmate/design-system/hydrate'),
599
+ clientModule: clientComponents.SdSelectV2Trigger,
600
+ serializeShadowRoot,
601
+ });
539
602
  export const SdTabs = /*@__PURE__*/ createComponent({
540
603
  tagName: 'sd-tabs',
541
604
  properties: {
package/lib/components/components.server.ts CHANGED
@@ -8,7 +8,7 @@
8
8
  // @ts-ignore - ignore potential type issues as the project is importing itself
9
9
  import * as clientComponents from '@sellmate/design-system-react';
10
10
 
11
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
11
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2UpdateDetail } from "@sellmate/design-system";
12
12
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
13
13
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
14
14
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
@@ -43,6 +43,11 @@ import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-sy
43
43
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
44
44
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
45
45
  import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
46
+ import { SdSelectV2ListItemSearch as SdSelectV2ListItemSearchElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item-search.js";
47
+ import { SdSelectV2ListItem as SdSelectV2ListItemElement } from "@sellmate/design-system/dist/components/sd-select-v2-list-item.js";
48
+ import { SdSelectV2Listbox as SdSelectV2ListboxElement } from "@sellmate/design-system/dist/components/sd-select-v2-listbox.js";
49
+ import { SdSelectV2Trigger as SdSelectV2TriggerElement } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
50
+ import { SdSelectV2 as SdSelectV2Element } from "@sellmate/design-system/dist/components/sd-select-v2.js";
46
51
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
47
52
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
48
53
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
@@ -240,7 +245,6 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
240
245
  status: 'status',
241
246
  label: 'label',
242
247
  insideLabel: 'inside-label',
243
- useLabelRequired: 'use-label-required',
244
248
  labelTooltip: 'label-tooltip',
245
249
  rules: 'rules'
246
250
  },
@@ -352,7 +356,6 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
352
356
  focused: 'focused',
353
357
  hovered: 'hovered',
354
358
  label: 'label',
355
- useLabelRequired: 'use-label-required',
356
359
  labelTooltip: 'label-tooltip',
357
360
  rules: 'rules'
358
361
  },
@@ -471,6 +474,7 @@ export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> =
471
474
  tagName: 'sd-portal',
472
475
  properties: {
473
476
  to: 'to',
477
+ viewportPadding: 'viewport-padding',
474
478
  zIndex: 'z-index',
475
479
  open: 'open'
476
480
  },
@@ -562,7 +566,6 @@ export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> =
562
566
  searchable: 'searchable',
563
567
  label: 'label',
564
568
  insideLabel: 'inside-label',
565
- useLabelRequired: 'use-label-required',
566
569
  labelTooltip: 'label-tooltip',
567
570
  error: 'error',
568
571
  options: 'options',
@@ -620,7 +623,6 @@ export const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelect
620
623
  searchable: 'searchable',
621
624
  label: 'label',
622
625
  insideLabel: 'inside-label',
623
- useLabelRequired: 'use-label-required',
624
626
  labelTooltip: 'label-tooltip',
625
627
  error: 'error',
626
628
  options: 'options',
@@ -650,7 +652,6 @@ export const SdSelectMultiple: StencilReactComponent<SdSelectMultipleElement, Sd
650
652
  useAll: 'use-all',
651
653
  useCheckbox: 'use-checkbox',
652
654
  label: 'label',
653
- useLabelRequired: 'use-label-required',
654
655
  labelTooltip: 'label-tooltip',
655
656
  error: 'error',
656
657
  value: 'value',
@@ -682,7 +683,6 @@ export const SdSelectMultipleGroup: StencilReactComponent<SdSelectMultipleGroupE
682
683
  allCheckedLabel: 'all-checked-label',
683
684
  allCheckOptionLabel: 'all-check-option-label',
684
685
  label: 'label',
685
- useLabelRequired: 'use-label-required',
686
686
  labelTooltip: 'label-tooltip',
687
687
  error: 'error',
688
688
  value: 'value',
@@ -756,6 +756,95 @@ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputEleme
756
756
  serializeShadowRoot,
757
757
  });
758
758
 
759
+ export type SdSelectV2Events = {
760
+ onSdUpdate: EventName<SdSelectV2CustomEvent<SelectV2UpdateDetail>>,
761
+ onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
762
+ };
763
+
764
+ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Events> = /*@__PURE__*/ createComponent<SdSelectV2Element, SdSelectV2Events>({
765
+ tagName: 'sd-select-v2',
766
+ properties: {
767
+ name: 'name',
768
+ value: 'value',
769
+ placeholder: 'placeholder',
770
+ width: 'width',
771
+ maxDropdownWidth: 'max-dropdown-width',
772
+ dropdownHeight: 'dropdown-height',
773
+ disabled: 'disabled',
774
+ label: 'label',
775
+ addonLabel: 'addon-label',
776
+ error: 'error',
777
+ fieldName: 'field-name',
778
+ labelTooltip: 'label-tooltip',
779
+ options: 'options',
780
+ rules: 'rules'
781
+ },
782
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
783
+ clientModule: clientComponents.SdSelectV2 as ReactWebComponent<SdSelectV2Element, SdSelectV2Events>,
784
+ serializeShadowRoot,
785
+ });
786
+
787
+ export type SdSelectV2ListItemEvents = { onSdListItemClick: EventName<SdSelectV2ListItemCustomEvent<SelectV2Option>> };
788
+
789
+ export const SdSelectV2ListItem: StencilReactComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents>({
790
+ tagName: 'sd-select-v2-list-item',
791
+ properties: {
792
+ depth: 'depth',
793
+ isSelected: 'is-selected',
794
+ isFocused: 'is-focused',
795
+ useCheckbox: 'use-checkbox'
796
+ },
797
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
798
+ clientModule: clientComponents.SdSelectV2ListItem as ReactWebComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents>,
799
+ serializeShadowRoot,
800
+ });
801
+
802
+ export type SdSelectV2ListItemSearchEvents = {
803
+ onSdSearchFilter: EventName<CustomEvent<string>>,
804
+ onSdSearchFocus: EventName<CustomEvent<void>>
805
+ };
806
+
807
+ export const SdSelectV2ListItemSearch: StencilReactComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents>({
808
+ tagName: 'sd-select-v2-list-item-search',
809
+ properties: { isScrolled: 'is-scrolled' },
810
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
811
+ clientModule: clientComponents.SdSelectV2ListItemSearch as ReactWebComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents>,
812
+ serializeShadowRoot,
813
+ });
814
+
815
+ export type SdSelectV2ListboxEvents = { onSdOptionSelect: EventName<SdSelectV2ListboxCustomEvent<SelectV2Option>> };
816
+
817
+ export const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>({
818
+ tagName: 'sd-select-v2-listbox',
819
+ properties: {
820
+ name: 'name',
821
+ value: 'value',
822
+ triggerWidth: 'trigger-width',
823
+ maxWidth: 'max-width',
824
+ maxHeight: 'max-height',
825
+ options: 'options'
826
+ },
827
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
828
+ clientModule: clientComponents.SdSelectV2Listbox as ReactWebComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>,
829
+ serializeShadowRoot,
830
+ });
831
+
832
+ export type SdSelectV2TriggerEvents = { onSdTriggerClick: EventName<CustomEvent<void>> };
833
+
834
+ export const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents> = /*@__PURE__*/ createComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>({
835
+ tagName: 'sd-select-v2-trigger',
836
+ properties: {
837
+ displayText: 'display-text',
838
+ placeholder: 'placeholder',
839
+ disabled: 'disabled',
840
+ isOpen: 'is-open',
841
+ addonLabel: 'addon-label'
842
+ },
843
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
844
+ clientModule: clientComponents.SdSelectV2Trigger as ReactWebComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>,
845
+ serializeShadowRoot,
846
+ });
847
+
759
848
  export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
760
849
 
761
850
  export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
package/lib/components/components.ts CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
10
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2UpdateDetail } from "@sellmate/design-system";
11
11
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
12
12
  import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
13
13
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
@@ -42,6 +42,11 @@ import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as def
42
42
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
43
43
  import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
44
44
  import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
45
+ import { SdSelectV2ListItemSearch as SdSelectV2ListItemSearchElement, defineCustomElement as defineSdSelectV2ListItemSearch } from "@sellmate/design-system/dist/components/sd-select-v2-list-item-search.js";
46
+ import { SdSelectV2ListItem as SdSelectV2ListItemElement, defineCustomElement as defineSdSelectV2ListItem } from "@sellmate/design-system/dist/components/sd-select-v2-list-item.js";
47
+ import { SdSelectV2Listbox as SdSelectV2ListboxElement, defineCustomElement as defineSdSelectV2Listbox } from "@sellmate/design-system/dist/components/sd-select-v2-listbox.js";
48
+ import { SdSelectV2Trigger as SdSelectV2TriggerElement, defineCustomElement as defineSdSelectV2Trigger } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
49
+ import { SdSelectV2 as SdSelectV2Element, defineCustomElement as defineSdSelectV2 } from "@sellmate/design-system/dist/components/sd-select-v2.js";
45
50
  import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
46
51
  import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
47
52
  import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
@@ -553,6 +558,73 @@ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputEleme
553
558
  defineCustomElement: defineSdSelectSearchInput
554
559
  });
555
560
 
561
+ export type SdSelectV2Events = {
562
+ onSdUpdate: EventName<SdSelectV2CustomEvent<SelectV2UpdateDetail>>,
563
+ onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
564
+ };
565
+
566
+ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Events> = /*@__PURE__*/ createComponent<SdSelectV2Element, SdSelectV2Events>({
567
+ tagName: 'sd-select-v2',
568
+ elementClass: SdSelectV2Element,
569
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
570
+ react: React,
571
+ events: {
572
+ onSdUpdate: 'sdUpdate',
573
+ onSdDropDownShow: 'sdDropDownShow'
574
+ } as SdSelectV2Events,
575
+ defineCustomElement: defineSdSelectV2
576
+ });
577
+
578
+ export type SdSelectV2ListItemEvents = { onSdListItemClick: EventName<SdSelectV2ListItemCustomEvent<SelectV2Option>> };
579
+
580
+ export const SdSelectV2ListItem: StencilReactComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListItemElement, SdSelectV2ListItemEvents>({
581
+ tagName: 'sd-select-v2-list-item',
582
+ elementClass: SdSelectV2ListItemElement,
583
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
584
+ react: React,
585
+ events: { onSdListItemClick: 'sdListItemClick' } as SdSelectV2ListItemEvents,
586
+ defineCustomElement: defineSdSelectV2ListItem
587
+ });
588
+
589
+ export type SdSelectV2ListItemSearchEvents = {
590
+ onSdSearchFilter: EventName<CustomEvent<string>>,
591
+ onSdSearchFocus: EventName<CustomEvent<void>>
592
+ };
593
+
594
+ export const SdSelectV2ListItemSearch: StencilReactComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListItemSearchElement, SdSelectV2ListItemSearchEvents>({
595
+ tagName: 'sd-select-v2-list-item-search',
596
+ elementClass: SdSelectV2ListItemSearchElement,
597
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
598
+ react: React,
599
+ events: {
600
+ onSdSearchFilter: 'sdSearchFilter',
601
+ onSdSearchFocus: 'sdSearchFocus'
602
+ } as SdSelectV2ListItemSearchEvents,
603
+ defineCustomElement: defineSdSelectV2ListItemSearch
604
+ });
605
+
606
+ export type SdSelectV2ListboxEvents = { onSdOptionSelect: EventName<SdSelectV2ListboxCustomEvent<SelectV2Option>> };
607
+
608
+ export const SdSelectV2Listbox: StencilReactComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents> = /*@__PURE__*/ createComponent<SdSelectV2ListboxElement, SdSelectV2ListboxEvents>({
609
+ tagName: 'sd-select-v2-listbox',
610
+ elementClass: SdSelectV2ListboxElement,
611
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
612
+ react: React,
613
+ events: { onSdOptionSelect: 'sdOptionSelect' } as SdSelectV2ListboxEvents,
614
+ defineCustomElement: defineSdSelectV2Listbox
615
+ });
616
+
617
+ export type SdSelectV2TriggerEvents = { onSdTriggerClick: EventName<CustomEvent<void>> };
618
+
619
+ export const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents> = /*@__PURE__*/ createComponent<SdSelectV2TriggerElement, SdSelectV2TriggerEvents>({
620
+ tagName: 'sd-select-v2-trigger',
621
+ elementClass: SdSelectV2TriggerElement,
622
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
623
+ react: React,
624
+ events: { onSdTriggerClick: 'sdTriggerClick' } as SdSelectV2TriggerEvents,
625
+ defineCustomElement: defineSdSelectV2Trigger
626
+ });
627
+
556
628
  export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
557
629
 
558
630
  export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "1.0.33",
3
+ "version": "1.0.35",
4
4
  "description": "Design System - React Component Wrappers",
5
5
  "keywords": [
6
6
  "react",
@@ -54,7 +54,7 @@
54
54
  "dev": "tsc --watch"
55
55
  },
56
56
  "dependencies": {
57
- "@sellmate/design-system": "^1.0.33",
57
+ "@sellmate/design-system": "^1.0.35",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {