genesys-react-components 1.0.6 → 1.1.0-devengage-3187-id-prop.758

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 (29) hide show
  1. package/build/alertblock/AlertBlock.d.ts +2 -1
  2. package/build/codefence/CodeFence.d.ts +2 -1
  3. package/build/copybutton/CopyButton.d.ts +2 -1
  4. package/build/datatable/DataTable.d.ts +2 -2
  5. package/build/dxaccordion/DxAccordionGroup.d.ts +2 -1
  6. package/build/dxbutton/DxButton.d.ts +2 -2
  7. package/build/dxitemgroup/DxCheckbox.d.ts +2 -2
  8. package/build/dxlabel/DxLabel.d.ts +2 -1
  9. package/build/index.d.ts +10 -7
  10. package/build/index.js +33 -33
  11. package/build/index.js.map +1 -1
  12. package/build/loadingplaceholder/LoadingPlaceholder.d.ts +2 -1
  13. package/package.json +58 -58
  14. package/src/alertblock/AlertBlock.tsx +4 -1
  15. package/src/codefence/CodeFence.tsx +3 -2
  16. package/src/copybutton/CopyButton.tsx +4 -2
  17. package/src/datatable/DataTable.tsx +7 -5
  18. package/src/dxaccordion/DxAccordion.tsx +2 -1
  19. package/src/dxaccordion/DxAccordionGroup.tsx +8 -2
  20. package/src/dxbutton/DxButton.tsx +4 -3
  21. package/src/dxitemgroup/DxCheckbox.tsx +4 -3
  22. package/src/dxitemgroup/DxItemGroup.tsx +6 -4
  23. package/src/dxlabel/DxLabel.tsx +10 -4
  24. package/src/dxtabbedcontent/DxTabPanel.tsx +5 -1
  25. package/src/dxtabbedcontent/DxTabbedContent.tsx +1 -1
  26. package/src/dxtextbox/DxTextbox.tsx +1 -1
  27. package/src/dxtoggle/DxToggle.tsx +3 -2
  28. package/src/index.ts +11 -7
  29. package/src/loadingplaceholder/LoadingPlaceholder.tsx +4 -2
package/build/alertblock/AlertBlock.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
+ import { BaseComponentProps } from '..';
2
3
  import './AlertBlock.scss';
3
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
4
5
  title?: string;
5
6
  alertType?: 'info' | 'success' | 'critical' | 'warning' | 'toast';
6
7
  collapsible?: boolean;
package/build/codefence/CodeFence.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
+ import { BaseComponentProps } from '..';
2
3
  import './CodeFence.scss';
3
4
  declare global {
4
5
  interface Window {
5
6
  Prism: any;
6
7
  }
7
8
  }
8
- interface IProps {
9
+ interface IProps extends BaseComponentProps {
9
10
  value: string;
10
11
  noCollapse?: boolean;
11
12
  noHeader?: boolean;
package/build/copybutton/CopyButton.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
+ import { BaseComponentProps } from '..';
2
3
  import './CopyButton.scss';
3
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
4
5
  copyText: string;
5
6
  className?: string;
6
7
  tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
package/build/datatable/DataTable.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- import { DataTableRow } from '..';
2
+ import { BaseComponentProps, DataTableRow } from '..';
3
3
  import './DataTable.scss';
4
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
5
5
  rows: DataTableRow[];
6
6
  headerRow?: DataTableRow;
7
7
  className?: string;
package/build/dxaccordion/DxAccordionGroup.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
+ import { BaseComponentProps } from '..';
2
3
  import './DxAccordionGroup.scss';
3
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
4
5
  children: React.ReactNode;
5
6
  className?: string;
6
7
  }
package/build/dxbutton/DxButton.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- import { VoidEventCallback } from '..';
2
+ import { BaseComponentProps, VoidEventCallback } from '..';
3
3
  import './DxButton.scss';
4
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
5
5
  type?: 'primary' | 'secondary' | 'link';
6
6
  disabled?: boolean;
7
7
  children?: React.ReactNode;
package/build/dxitemgroup/DxCheckbox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- import { CheckedChangedCallback } from '..';
2
+ import { BaseComponentProps, CheckedChangedCallback } from '..';
3
3
  import './DxCheckbox.scss';
4
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
5
5
  label: string;
6
6
  itemValue: string;
7
7
  description?: string;
package/build/dxlabel/DxLabel.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
+ import { BaseComponentProps } from '..';
2
3
  import './DxLabel.scss';
3
- interface IProps {
4
+ interface IProps extends BaseComponentProps {
4
5
  label?: string;
5
6
  description?: string;
6
7
  useFieldset?: boolean;
package/build/index.d.ts CHANGED
@@ -29,6 +29,9 @@ export interface CheckedChangedCallback {
29
29
  export interface VoidEventCallback {
30
30
  (): void;
31
31
  }
32
+ export interface BaseComponentProps {
33
+ id?: string;
34
+ }
32
35
  export interface DxItemGroupItem {
33
36
  label: string;
34
37
  value: string;
@@ -45,7 +48,7 @@ export interface ItemChangedCallback {
45
48
  export interface ItemGroupChangedCallback {
46
49
  (items: DxItemGroupItemValue[]): void;
47
50
  }
48
- export interface DxToggleProps {
51
+ export interface DxToggleProps extends BaseComponentProps {
49
52
  isTriState?: boolean;
50
53
  initialValue?: boolean;
51
54
  value?: boolean;
@@ -58,7 +61,7 @@ export interface DxToggleProps {
58
61
  className?: string;
59
62
  }
60
63
  export type DxTextboxType = 'text' | 'textarea' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
61
- export interface DxTextboxProps {
64
+ export interface DxTextboxProps extends BaseComponentProps {
62
65
  initialValue?: string;
63
66
  value?: string;
64
67
  inputType?: DxTextboxType;
@@ -80,18 +83,18 @@ export interface DxTextboxProps {
80
83
  (event: KeyboardEvent): void;
81
84
  };
82
85
  }
83
- export interface DxAccordionProps {
86
+ export interface DxAccordionProps extends BaseComponentProps {
87
+ containerId?: string;
84
88
  title: React.ReactNode;
85
89
  children: React.ReactNode;
86
90
  showOpen?: boolean;
87
91
  className?: string;
88
92
  expandTrigger?: any;
89
93
  showOpenTrigger?: any;
90
- containerId?: string;
91
94
  headingIcon?: any;
92
95
  headingColor?: string;
93
96
  }
94
- export interface DxItemGroupProps {
97
+ export interface DxItemGroupProps extends BaseComponentProps {
95
98
  title?: string;
96
99
  description?: string;
97
100
  format: DxItemGroupFormat;
@@ -102,12 +105,12 @@ export interface DxItemGroupProps {
102
105
  onItemsChanged?: ItemGroupChangedCallback;
103
106
  }
104
107
  export type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
105
- export interface DxTabbedContentProps {
108
+ export interface DxTabbedContentProps extends BaseComponentProps {
106
109
  children: React.ReactNode;
107
110
  initialTabId?: number;
108
111
  className?: string;
109
112
  }
110
- export interface DxTabPanelProps {
113
+ export interface DxTabPanelProps extends BaseComponentProps {
111
114
  title: React.ReactNode;
112
115
  children: React.ReactNode;
113
116
  className?: string;
package/build/index.js CHANGED
@@ -63,7 +63,7 @@ function DxAccordion(props) {
63
63
  let icon;
64
64
  if (props.headingIcon)
65
65
  icon = React.createElement(GenesysDevIcon, { icon: props.headingIcon, className: "heading-icon" });
66
- return (React.createElement("div", { id: props.containerId || undefined, className: `dx-accordion${props.className ? ' ' + props.className : ''}` },
66
+ return (React.createElement("div", { id: props.id || props.containerId || undefined, className: `dx-accordion${props.className ? ' ' + props.className : ''}` },
67
67
  React.createElement("div", { className: "accordion-heading", style: style, onClick: () => setIsOpen(!isOpen) },
68
68
  React.createElement("span", { className: "accordion-heading__left" },
69
69
  icon,
@@ -78,7 +78,7 @@ var css_248z$h = ".dx-accordion-group {\n margin: 40px 0;\n}";
78
78
  styleInject(css_248z$h);
79
79
 
80
80
  function DxAccordionGroup(props) {
81
- return React.createElement("div", { className: `dx-accordion-group${props.className ? ' ' + props.className : ''}` }, props.children);
81
+ return (React.createElement("div", { id: props.id, className: `dx-accordion-group${props.className ? ' ' + props.className : ''}` }, props.children));
82
82
  }
83
83
 
84
84
  var css_248z$g = ".dx-button {\n margin: 15px 10px;\n border-radius: 2px;\n padding: 8px 15px;\n cursor: pointer;\n font-weight: 500;\n}\n.dx-button-primary {\n color: var(--theme-dxbutton-primary-text-color);\n border: 1px solid var(--theme-dxbutton-primary-background-color);\n background-color: var(--theme-dxbutton-primary-background-color);\n}\n.dx-button-primary:hover {\n background-color: var(--theme-dxbutton-primary-hover-background-color);\n border-color: var(--theme-dxbutton-primary-hover-background-color);\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: var(--theme-dxbutton-primary-background-color);\n border-color: var(--theme-dxbutton-primary-background-color);\n box-shadow: 0 0 0 2px var(--theme-dxbutton-primary-shadow-color);\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: var(--theme-dxbutton-primary-disabled-background-color);\n border-color: var(--theme-dxbutton-primary-disabled-background-color);\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-secondary {\n background-color: var(--theme-dxbutton-secondary-background-color);\n border: 1px solid var(--theme-dxbutton-secondary-border-color);\n color: var(--theme-dxbutton-secondary-border-color);\n}\n.dx-button-secondary:hover {\n color: var(--theme-dxbutton-secondary-hover-border-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: var(--theme-dxbutton-secondary-border-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n box-shadow: 0 0 0 2px var(--theme-dxbutton-secondary-shadow-color);\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n background-color: var(--theme-dxbutton-secondary-disabled-background-color);\n border-color: var(--theme-dxbutton-secondary-disabled-background-color);\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-link {\n color: var(--theme-core-link-color);\n background: transparent;\n margin: 0;\n padding: 0 2px;\n border: 0;\n}\n.dx-button-link:hover {\n color: var(--theme-core-link-hover-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n}\n.dx-button-link:disabled {\n color: #8a9a9e;\n transition: 0.1s;\n cursor: not-allowed;\n text-decoration: line-through;\n}";
@@ -103,43 +103,31 @@ function DxButton(props) {
103
103
  return;
104
104
  }
105
105
  };
106
- return (React.createElement("button", { className: classNames.join(' '), type: "button", onClick: handleClick, disabled: props.disabled === true }, props.children));
106
+ return (React.createElement("button", { id: props.id, className: classNames.join(' '), type: "button", onClick: handleClick, disabled: props.disabled === true }, props.children));
107
107
  }
108
108
 
109
- var css_248z$f = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}";
109
+ var css_248z$f = ".dx-label {\n margin: 20px 0;\n display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n display: block;\n font-family: Roboto;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-label-color);\n}\n.dx-label .label-text {\n margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n padding: 6px 20px;\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n}\n.dx-label .input-description .icon {\n color: var(--theme-alertblock-info-icon-color);\n line-height: 0;\n}";
110
110
  styleInject(css_248z$f);
111
111
 
112
- var css_248z$e = "";
113
- styleInject(css_248z$e);
114
-
115
- var css_248z$d = "@charset \"UTF-8\";\n.dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"⌄\";\n font-size: 8px;\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n pointer-events: none;\n}\n.dx-select-group.disabled::after {\n color: var(--theme-core-control-disabled-text-color);\n}\n.dx-select-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n color: var(--theme-core-control-disabled-text-color);\n cursor: not-allowed;\n}";
116
- styleInject(css_248z$d);
117
-
118
- var css_248z$c = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-multiselect-group select option {\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n -webkit-appearance: none;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 31px;\n padding: 8px 12px;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-multiselect-group select option:checked {\n color: var(--theme-core-tag-text-color);\n background-color: var(--theme-core-tag-background-color);\n}\n.dx-multiselect-group select option:disabled {\n color: #8a9a9e;\n cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n color: var(--theme-core-control-disabled-text-color);\n}";
119
- styleInject(css_248z$c);
120
-
121
- var css_248z$b = ".dx-label {\n margin: 20px 0;\n display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n display: block;\n font-family: Roboto;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-label-color);\n}\n.dx-label .label-text {\n margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n padding: 6px 20px;\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n}\n.dx-label .input-description .icon {\n color: var(--theme-alertblock-info-icon-color);\n line-height: 0;\n}";
122
- styleInject(css_248z$b);
123
-
124
112
  function DxLabel(props) {
125
113
  const hasLabel = props.label && props.label !== '';
126
- const description = props.description ? (React.createElement("div", { className: 'input-description' },
114
+ const description = props.description ? (React.createElement("div", { className: "input-description" },
127
115
  React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppInfoSolid }),
128
116
  React.createElement("span", null, props.description))) : undefined;
129
117
  const contents = (React.createElement(React.Fragment, null,
130
118
  ' ',
131
- hasLabel ? React.createElement("span", { className: 'label-text' }, props.label) : undefined,
119
+ hasLabel ? React.createElement("span", { className: "label-text" }, props.label) : undefined,
132
120
  props.children,
133
121
  description));
134
122
  const className = `dx-label${props.className ? ' ' + props.className : ''}`;
135
123
  if (props.useFieldset) {
136
124
  return React.createElement("fieldset", { className: className }, contents);
137
125
  }
138
- return React.createElement("label", { className: className }, contents);
126
+ return (React.createElement("label", { id: props.id, className: className }, contents));
139
127
  }
140
128
 
141
- var css_248z$a = "@charset \"UTF-8\";\n.dx-checkbox {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n margin-top: 0;\n}\n.dx-checkbox .label-text {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n color: var(--theme-core-text-color);\n}\n.dx-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n background-color: var(--theme-core-control-background-color);\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n display: block;\n position: relative;\n top: 7px;\n left: 3px;\n font-size: 9px;\n line-height: 0;\n color: var(--theme-core-control-punch-color);\n content: \"✓\";\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox input[type=radio] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 8px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n content: \"\";\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 8px;\n position: relative;\n top: 2px;\n left: 2px;\n background-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox.disabled {\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n background-color: var(--theme-core-control-disabled-background-color);\n cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n margin: 0;\n}";
142
- styleInject(css_248z$a);
129
+ var css_248z$e = "@charset \"UTF-8\";\n.dx-checkbox {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n margin-top: 0;\n}\n.dx-checkbox .label-text {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n color: var(--theme-core-text-color);\n}\n.dx-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n background-color: var(--theme-core-control-background-color);\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n display: block;\n position: relative;\n top: 7px;\n left: 3px;\n font-size: 9px;\n line-height: 0;\n color: var(--theme-core-control-punch-color);\n content: \"✓\";\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox input[type=radio] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 8px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n content: \"\";\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 8px;\n position: relative;\n top: 2px;\n left: 2px;\n background-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox.disabled {\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n background-color: var(--theme-core-control-disabled-background-color);\n cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n margin: 0;\n}";
130
+ styleInject(css_248z$e);
143
131
 
144
132
  function DxCheckbox(props) {
145
133
  let initialValue = props.checked !== undefined ? props.checked : props.initiallyChecked || false;
@@ -153,11 +141,23 @@ function DxCheckbox(props) {
153
141
  if (props.onCheckChanged)
154
142
  props.onCheckChanged(checked);
155
143
  }, [checked]);
156
- return (React.createElement("label", { className: `dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}` },
144
+ return (React.createElement("label", { id: props.id, className: `dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}` },
157
145
  React.createElement("input", { type: props.useRadioType ? 'radio' : 'checkbox', name: props.name, value: props.itemValue, checked: checked, onChange: (e) => setChecked(e.target.checked), disabled: props.disabled === true, title: props.description }),
158
146
  React.createElement("span", { className: "label-text", title: props.description }, props.label)));
159
147
  }
160
148
 
149
+ var css_248z$d = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}";
150
+ styleInject(css_248z$d);
151
+
152
+ var css_248z$c = "";
153
+ styleInject(css_248z$c);
154
+
155
+ var css_248z$b = "@charset \"UTF-8\";\n.dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"⌄\";\n font-size: 8px;\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n pointer-events: none;\n}\n.dx-select-group.disabled::after {\n color: var(--theme-core-control-disabled-text-color);\n}\n.dx-select-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n color: var(--theme-core-control-disabled-text-color);\n cursor: not-allowed;\n}";
156
+ styleInject(css_248z$b);
157
+
158
+ var css_248z$a = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-multiselect-group select option {\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n -webkit-appearance: none;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 31px;\n padding: 8px 12px;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-multiselect-group select option:checked {\n color: var(--theme-core-tag-text-color);\n background-color: var(--theme-core-tag-background-color);\n}\n.dx-multiselect-group select option:disabled {\n color: #8a9a9e;\n cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n color: var(--theme-core-control-disabled-text-color);\n}";
159
+ styleInject(css_248z$a);
160
+
161
161
  function DxItemGroup(props) {
162
162
  var _a, _b;
163
163
  const [data, setData] = useState(props.items.map((item) => {
@@ -219,7 +219,7 @@ function DxItemGroup(props) {
219
219
  case 'multiselect':
220
220
  case 'dropdown': {
221
221
  const isMulti = format === 'multiselect';
222
- return (React.createElement(DxLabel, { label: title, description: description, className: className },
222
+ return (React.createElement(DxLabel, { id: props.id, label: title, description: description, className: className },
223
223
  React.createElement("div", { className: `dx-item-group${isMulti ? ' dx-multiselect-group' : ' dx-select-group'}${disabled ? ' disabled' : ''}` },
224
224
  React.createElement("select", { multiple: isMulti, disabled: disabled === true, onChange: (e) => selectChanged(e), value: isMulti
225
225
  ? (_a = data.filter((item) => item.isSelected)) === null || _a === void 0 ? void 0 : _a.map((item) => item.item.value)
@@ -228,7 +228,7 @@ function DxItemGroup(props) {
228
228
  case 'checkbox':
229
229
  case 'radio':
230
230
  default: {
231
- return (React.createElement(DxLabel, { label: title, description: description, className: `dx-item-group${disabled ? ' disabled' : ''}${className ? ' ' + className : ''}`, useFieldset: true },
231
+ return (React.createElement(DxLabel, { id: props.id, label: title, description: description, className: `dx-item-group${disabled ? ' disabled' : ''}${className ? ' ' + className : ''}`, useFieldset: true },
232
232
  React.createElement("div", { onChange: (e) => {
233
233
  var _a;
234
234
  const i = data.findIndex((d) => { var _a; return d.item.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); });
@@ -245,7 +245,7 @@ styleInject(css_248z$9);
245
245
 
246
246
  function DxTabbedContent(props) {
247
247
  const [activeTab, setActiveTab] = useState(props.initialTabId || 0);
248
- return (React.createElement("div", { className: `dx-tabbed-content${props.className ? ' ' + props.className : ''}` },
248
+ return (React.createElement("div", { id: props.id, className: `dx-tabbed-content${props.className ? ' ' + props.className : ''}` },
249
249
  React.createElement("div", { className: "tab-titles" }, React.Children.toArray(props.children).map((child, i) => {
250
250
  if (!child)
251
251
  return;
@@ -259,7 +259,7 @@ var css_248z$8 = "";
259
259
  styleInject(css_248z$8);
260
260
 
261
261
  function DxTabPanel(props) {
262
- return React.createElement("div", { className: `dx-tab-panel${props.className ? ' ' + props.className : ''}` }, props.children);
262
+ return (React.createElement("div", { id: props.id, className: `dx-tab-panel${props.className ? ' ' + props.className : ''}` }, props.children));
263
263
  }
264
264
 
265
265
  var css_248z$7 = ".dx-textbox {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\n background-color: var(--theme-core-control-alt-background-color);\n}\n.dx-textbox.with-label {\n margin-top: 0;\n}\n.dx-textbox:focus-within {\n outline: #aac9ff solid 2px;\n}\n.dx-textbox .icon {\n display: block;\n flex: none;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textbox .icon.input-icon {\n font-size: 14px;\n line-height: 0;\n}\n.dx-textbox .icon.clear-icon {\n font-size: 11px;\n line-height: 0;\n cursor: pointer;\n padding: 4px;\n margin-right: -4px;\n}\n.dx-textbox .dx-input {\n flex-grow: 1;\n border: 0;\n background: transparent;\n box-sizing: border-box;\n height: 32px;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textbox .dx-input:focus-visible {\n outline: 0;\n}\n.dx-textbox .dx-input::placeholder {\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-placeholder-text-color);\n}\n.dx-textbox.disabled {\n background-color: var(--theme-dxbutton-secondary-disabled-background-color);\n cursor: not-allowed;\n}\n.dx-textbox.disabled input {\n cursor: not-allowed;\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n}\n.dx-textbox.disabled .icon,\n.dx-textbox.disabled input::placeholder {\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n}\n\n.dx-textarea {\n padding: 10px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n width: 100%;\n font-family: \"Roboto\", sans-serif;\n box-sizing: border-box;\n background-color: var(--theme-core-control-alt-background-color);\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textarea:focus-within {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-textarea::placeholder {\n font-family: \"Roboto\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-placeholder-text-color);\n}";
@@ -413,7 +413,7 @@ function DxTextbox(props) {
413
413
  }
414
414
  }
415
415
  // Render
416
- return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className }, component));
416
+ return (React.createElement(DxLabel, { id: props.id, label: props.label, description: props.description, className: props.className }, component));
417
417
  }
418
418
 
419
419
  var css_248z$6 = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n border: 1px solid var(--theme-core-control-border-color);\n background: var(--theme-core-control-background-color);\n border-radius: 6px;\n height: 26px;\n padding: 0px 4px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 2px;\n cursor: pointer;\n}\n.dx-toggle-container .dx-toggle:hover .slider {\n border-color: var(--theme-core-control-focus-color);\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: var(--theme-core-control-border-color);\n}\n.dx-toggle-container .dx-toggle .clear-placeholder {\n width: 19px;\n padding: 0 1px 0 0;\n margin: 0;\n display: block;\n}\n.dx-toggle-container .dx-toggle .slider {\n height: 22px;\n width: 22px;\n border-radius: 22px;\n background-color: var(--theme-core-control-punch-color);\n box-shadow: 0px 1px 2px var(--theme-core-box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n}\n.dx-toggle-container .dx-toggle .slider .icon {\n font-size: 10px;\n line-height: 0;\n color: var(--theme-core-control-background-color);\n padding: 0;\n margin: 0;\n}\n.dx-toggle-container.disabled .dx-toggle {\n cursor: not-allowed;\n opacity: 0.7;\n border-color: var(--theme-core-control-border-color);\n color: var(--theme-core-control-background-color);\n}\n.dx-toggle-container.disabled .dx-toggle:hover .slider {\n border-color: transparent;\n}\n.dx-toggle-container.disabled .dx-toggle .slider {\n opacity: 0.7;\n color: var(--theme-core-control-background-color);\n background-color: var(--theme-core-control-punch-color);\n}";
@@ -463,7 +463,7 @@ function DxToggle(props) {
463
463
  if (value === false)
464
464
  return 'false';
465
465
  };
466
- return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className },
466
+ return (React.createElement(DxLabel, { id: props.id, label: props.label, description: props.description, className: props.className },
467
467
  React.createElement("div", { "aria-checked": getToggleValue(), className: `dx-toggle-container${props.disabled ? ' disabled' : ''}` },
468
468
  React.createElement("div", { className: "dx-toggle", onClick: setToggleValue },
469
469
  value !== false ? React.createElement(GenesysDevIcon, { icon: falseIcon }) : undefined,
@@ -506,7 +506,7 @@ function AlertBlock(props) {
506
506
  icon = (React.createElement("span", { className: "clickable", onClick: () => setIsCollapsed(!isCollapsed) }, icon));
507
507
  }
508
508
  //TODO: remove the card fence classes and build a proper collapser
509
- return (React.createElement("div", { className: `alert-container${props.indentation && props.indentation > 0 ? ` indent-${props.indentation}` : ''} ${props.className || ''}` },
509
+ return (React.createElement("div", { id: props.id, className: `alert-container${props.indentation && props.indentation > 0 ? ` indent-${props.indentation}` : ''} ${props.className || ''}` },
510
510
  React.createElement("div", { className: `alert alert-${props.alertType}`, role: "alert" },
511
511
  icon,
512
512
  React.createElement("div", { className: "alert-content" },
@@ -612,7 +612,7 @@ const MESSAGES = [
612
612
  'Unable to Reveal Current Activity',
613
613
  ];
614
614
  function LoadingPlaceholder(props) {
615
- return (React.createElement("div", { className: "loading-placeholder" },
615
+ return (React.createElement("div", { id: props.id, className: "loading-placeholder" },
616
616
  React.createElement("span", { className: "text" }, props.text || MESSAGES[Math.floor(Math.random() * (MESSAGES.length - 1))]),
617
617
  React.createElement("div", null),
618
618
  React.createElement("div", null)));
@@ -675,7 +675,7 @@ function CopyButton(props) {
675
675
  buttonClasses.push(props.className);
676
676
  return (React.createElement(React.Fragment, null,
677
677
  React.createElement(Tooltip, { isShowing: copyState, text: "Copied", position: props.tooltipPosition },
678
- React.createElement("button", { type: "button", className: buttonClasses.join(' '), onClick: copyCode, onMouseOut: loseFocus },
678
+ React.createElement("button", { id: props.id, type: "button", className: buttonClasses.join(' '), onClick: copyCode, onMouseOut: loseFocus },
679
679
  React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppCopy })))));
680
680
  }
681
681
 
@@ -968,7 +968,7 @@ function DataTable(props) {
968
968
  React.createElement("div", { className: "filter-container" },
969
969
  React.createElement("div", { className: "filter-toggle", style: { visibility: isFilterable ? 'visible' : 'hidden' } },
970
970
  React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppFilter, onClick: () => setIsFilterOpen(!isFilterOpen) })),
971
- React.createElement("table", { className: tableClassName, cellSpacing: "0" },
971
+ React.createElement("table", { id: props.id, className: tableClassName, cellSpacing: "0" },
972
972
  thead,
973
973
  React.createElement("tbody", null, rows.map((row, i) => {
974
974
  var _a;
@@ -998,7 +998,7 @@ function CodeFence(props) {
998
998
  if (props.jsonEditor)
999
999
  classNames.push('json-editor-fence');
1000
1000
  const disableHighlighting = props.disableSyntaxHighlighting || props.value.length > 100000;
1001
- return (React.createElement("div", { className: classNames.join(' ') },
1001
+ return (React.createElement("div", { id: props.id, className: classNames.join(' ') },
1002
1002
  props.noHeader || typeof props.value !== 'string' ? ('') : (React.createElement("div", { className: `fence-header${props.noCollapse ? '' : ' clickable'}`, onClick: () => setCollapsed(props.noCollapse ? false : !collapsed) },
1003
1003
  props.noCollapse ? undefined : (React.createElement(GenesysDevIcon, { icon: collapsed ? GenesysDevIcons.AppChevronDown : GenesysDevIcons.AppChevronUp })),
1004
1004
  React.createElement(CopyButton, { copyText: props.value }),