genesys-react-components 0.1.0-alpha.3 → 0.1.0-alpha.7

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.
package/README.md CHANGED
@@ -1,4 +1,111 @@
1
1
  # Genesys React Components
2
2
 
3
- A React component library containing standardized form elements.
3
+ A React component library containing standardized form elements. Check out the live demo and full documenation at https://purecloudlabs.github.io/genesys-react-components/
4
4
 
5
+ ## Installation
6
+
7
+ ```sh
8
+ npm i genesys-react-components
9
+ # install peer dependencies if necessary
10
+ npm i genesys-dev-icons uuid
11
+
12
+ # or
13
+
14
+ yarn add genesys-react-components
15
+ # install peer dependencies if necessary
16
+ yarn add genesys-dev-icons uuid
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ```js
22
+ import React, { useRef } from 'react';
23
+ import { DxTextbox } from 'genesys-react-components';
24
+ import { GenesysDevIcons } from 'genesys-dev-icons';
25
+
26
+ export default function App() {
27
+ const inputRef = useRef<HTMLInputElement>(null);
28
+ return (
29
+ <div className='app'>
30
+ <DxTextbox
31
+ label='1000ms debounce (default 300), removes focus on value change via onChange callback'
32
+ placeholder='Focus will clear 1 second after you stop typing'
33
+ icon={GenesysDevIcons.AppZoomZoomRight}
34
+ clearButton={true}
35
+ onChange={(value: string) => {
36
+ console.log('1000ms debouncer triggered, clearing focus', value);
37
+ inputRef.current?.blur();
38
+ }}
39
+ changeDebounceMs={1000}
40
+ inputRef={inputRef}
41
+ onFocus={() => console.log('focus')}
42
+ onBlur={() => console.log('blur')}
43
+ />
44
+ </div>
45
+ );
46
+ }
47
+ ```
48
+
49
+ ## Building Locally
50
+
51
+ ### `genesys-react-components` package
52
+
53
+ In the root of the repo, run:
54
+
55
+ ```sh
56
+ npm i
57
+ npm run build
58
+ ```
59
+
60
+ This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
61
+
62
+ When validating the package locally, run `npm link` in the root of this repo to create a local symlink in npm for `genesys-react-components` that points to the locally built package. Take note of the _Error: Invalid hook call_ notice in the troubleshooting section below.
63
+
64
+ ### Demo app
65
+
66
+ To build and serve the demo app locally, run:
67
+
68
+ ```sh
69
+ cd app
70
+ yarn install
71
+ yarn start
72
+ ```
73
+
74
+ To validate the local instance of the `genesys-react-components` package, run:
75
+
76
+ ```sh
77
+ cd app
78
+ # This removes the published dependency and uses npm link to add the local version
79
+ yarn linklib
80
+ yarn start
81
+ ```
82
+
83
+ Run `yarn unlinklib` to revert to using the latest published version of the package.
84
+
85
+ #### Publishing the demo app
86
+
87
+ Run the following command to publish the demo app to the GitHub Pages site:
88
+
89
+ ```
90
+ cd app
91
+ yarn unlink
92
+ yarn publish
93
+ ```
94
+
95
+ ## Troubleshooting
96
+
97
+ ### Error: Invalid hook call
98
+
99
+ The following error may be encountered at runtime while running a React app locally when using `npm link genesys-react-components` to load the local package:
100
+
101
+ ```
102
+ Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
103
+ 1. You might have mismatching versions of React and the renderer (such as React DOM)
104
+ 2. You might be breaking the Rules of Hooks
105
+ 3. You might have more than one copy of React in the same app
106
+ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
107
+ ```
108
+
109
+ The cause of the issue is the first reason. The react-dom dependency is sourced from different locations for the component package and the React app that's using it. The package loads `<thisrepo>/node_modules/react_dom/` but the React app loads `<thisrepo>/app/node_modules/react-dom/` causing them to be different packages even though the loaded versions are identical.
110
+
111
+ The solution is to delete `<thisrepo>/node_modules/` when using `npm link` in a any local React app. It doesn't seem to matter the order of operations as long as the folder is gone before `yarn start` is run to build the React app.
@@ -1,9 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { DxAccordionProps } from '..';
2
3
  import './DxAccordion.scss';
3
- interface IProps {
4
- title: React.ReactNode;
5
- children: React.ReactNode;
6
- showOpen?: boolean;
7
- }
8
- export default function DxAccordion(props: IProps): JSX.Element;
9
- export {};
4
+ export default function DxAccordion(props: DxAccordionProps): JSX.Element;
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import './DxAccordionGroup.scss';
3
3
  interface IProps {
4
4
  children: React.ReactNode;
5
+ className?: string;
5
6
  }
6
7
  export default function DxAccordionGroup(props: IProps): JSX.Element;
7
8
  export {};
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { CheckedChangedCallback } from '..';
3
+ import './DxCheckbox.scss';
4
+ interface IProps {
5
+ label: string;
6
+ itemValue: string;
7
+ description?: string;
8
+ checked?: boolean;
9
+ initiallyChecked?: boolean;
10
+ name?: string;
11
+ className?: string;
12
+ onCheckChanged?: CheckedChangedCallback;
13
+ useRadioType?: boolean;
14
+ disabled?: boolean;
15
+ }
16
+ export default function DxCheckbox(props: IProps): JSX.Element;
17
+ export {};
@@ -1,18 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { DxItemGroupItem, ItemChangedCallback, ItemGroupChangedCallback } from '..';
2
+ import { DxItemGroupProps } from '..';
3
3
  import './DxItemGroup.scss';
4
- import './checkbox.scss';
5
4
  import './radiobutton.scss';
6
5
  import './dropdown.scss';
7
6
  import './multiselect.scss';
8
- interface IProps {
9
- title?: string;
10
- description?: string;
11
- format: DxItemGroupFormat;
12
- items: DxItemGroupItem[];
13
- onItemChanged?: ItemChangedCallback;
14
- onItemsChanged?: ItemGroupChangedCallback;
15
- }
16
- export declare type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
17
- export default function DxItemGroup(props: IProps): JSX.Element;
18
- export {};
7
+ export default function DxItemGroup(props: DxItemGroupProps): JSX.Element;
@@ -1,8 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { DxTabPanelProps } from '..';
2
3
  import './DxTabPanel.scss';
3
- interface IProps {
4
- title: React.ReactNode;
5
- children: React.ReactNode;
6
- }
7
- export default function DxTabPanel(props: IProps): JSX.Element;
8
- export {};
4
+ export default function DxTabPanel(props: DxTabPanelProps): JSX.Element;
@@ -1,8 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
+ import { DxTabbedContentProps } from '..';
2
3
  import './DxTabbedContent.scss';
3
- interface IProps {
4
- children: React.ReactNode;
5
- initialTabId?: number;
6
- }
7
- export default function DxTabbedContent(props: IProps): JSX.Element;
8
- export {};
4
+ export default function DxTabbedContent(props: DxTabbedContentProps): JSX.Element;
@@ -1,20 +1,4 @@
1
- import { GenesysDevIcons } from 'genesys-dev-icons';
2
- import React from 'react';
3
- import { StringChangedCallback, VoidEventCallback } from '..';
1
+ /// <reference types="react" />
2
+ import { DxTextboxProps } from '..';
4
3
  import './DxTextbox.scss';
5
- export declare type DxTextboxType = 'text' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
6
- export interface DxTextboxProps {
7
- initialValue?: string;
8
- inputType?: DxTextboxType;
9
- label?: string;
10
- description?: string;
11
- placeholder?: string;
12
- icon?: GenesysDevIcons;
13
- clearButton?: boolean;
14
- onChange?: StringChangedCallback;
15
- changeDebounceMs?: number;
16
- inputRef?: React.RefObject<HTMLInputElement>;
17
- onFocus?: VoidEventCallback;
18
- onBlur?: VoidEventCallback;
19
- }
20
4
  export default function DxTextbox(props: DxTextboxProps): JSX.Element;
@@ -1,14 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { GenesysDevIcons } from 'genesys-dev-icons';
3
- import { BooleanChangedCallback } from '..';
2
+ import { DxToggleProps } from '..';
4
3
  import './DxToggle.scss';
5
- export interface DxToggleProps {
6
- isTriState?: boolean;
7
- initialValue?: boolean;
8
- label?: string;
9
- description?: string;
10
- trueIcon?: GenesysDevIcons;
11
- falseIcon?: GenesysDevIcons;
12
- onChange?: BooleanChangedCallback;
13
- }
14
4
  export default function DxToggle(props: DxToggleProps): JSX.Element;
package/build/index.d.ts CHANGED
@@ -1,25 +1,32 @@
1
+ /// <reference types="react" />
2
+ import { GenesysDevIcons } from 'genesys-dev-icons';
1
3
  import DxAccordion from './dxaccordion/DxAccordion';
2
4
  import DxAccordionGroup from './dxaccordion/DxAccordionGroup';
3
5
  import DxButton from './dxbutton/DxButton';
4
6
  import DxItemGroup from './dxitemgroup/DxItemGroup';
7
+ import DxCheckbox from './dxitemgroup/DxCheckbox';
5
8
  import DxLabel from './dxlabel/DxLabel';
6
9
  import DxTabbedContent from './dxtabbedcontent/DxTabbedContent';
7
10
  import DxTabPanel from './dxtabbedcontent/DxTabPanel';
8
11
  import DxTextbox from './dxtextbox/DxTextbox';
9
12
  import DxToggle from './dxtoggle/DxToggle';
10
- export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };
13
+ export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxCheckbox, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };
11
14
  export interface StringChangedCallback {
12
15
  (value: string): void;
13
16
  }
14
17
  export interface BooleanChangedCallback {
15
18
  (value?: boolean): void;
16
19
  }
20
+ export interface CheckedChangedCallback {
21
+ (checked: boolean): void;
22
+ }
17
23
  export interface VoidEventCallback {
18
24
  (): void;
19
25
  }
20
26
  export interface DxItemGroupItem {
21
27
  label: string;
22
28
  value: string;
29
+ disabled?: boolean;
23
30
  }
24
31
  export interface DxItemGroupItemValue {
25
32
  item: DxItemGroupItem;
@@ -31,3 +38,60 @@ export interface ItemChangedCallback {
31
38
  export interface ItemGroupChangedCallback {
32
39
  (items: DxItemGroupItemValue[]): void;
33
40
  }
41
+ export interface DxToggleProps {
42
+ isTriState?: boolean;
43
+ initialValue?: boolean;
44
+ value?: boolean;
45
+ label?: string;
46
+ description?: string;
47
+ trueIcon?: GenesysDevIcons;
48
+ falseIcon?: GenesysDevIcons;
49
+ disabled?: boolean;
50
+ onChange?: BooleanChangedCallback;
51
+ className?: string;
52
+ }
53
+ export declare type DxTextboxType = 'text' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
54
+ export interface DxTextboxProps {
55
+ initialValue?: string;
56
+ value?: string;
57
+ inputType?: DxTextboxType;
58
+ label?: string;
59
+ description?: string;
60
+ placeholder?: string;
61
+ icon?: GenesysDevIcons;
62
+ clearButton?: boolean;
63
+ onChange?: StringChangedCallback;
64
+ changeDebounceMs?: number;
65
+ inputRef?: React.RefObject<HTMLInputElement>;
66
+ onFocus?: VoidEventCallback;
67
+ onBlur?: VoidEventCallback;
68
+ disabled?: boolean;
69
+ className?: string;
70
+ }
71
+ export interface DxAccordionProps {
72
+ title: React.ReactNode;
73
+ children: React.ReactNode;
74
+ showOpen?: boolean;
75
+ className?: string;
76
+ }
77
+ export interface DxItemGroupProps {
78
+ title?: string;
79
+ description?: string;
80
+ format: DxItemGroupFormat;
81
+ items: DxItemGroupItem[];
82
+ disabled?: boolean;
83
+ className?: string;
84
+ onItemChanged?: ItemChangedCallback;
85
+ onItemsChanged?: ItemGroupChangedCallback;
86
+ }
87
+ export declare type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
88
+ export interface DxTabbedContentProps {
89
+ children: React.ReactNode;
90
+ initialTabId?: number;
91
+ className?: string;
92
+ }
93
+ export interface DxTabPanelProps {
94
+ title: React.ReactNode;
95
+ children: React.ReactNode;
96
+ className?: string;
97
+ }
package/build/index.js CHANGED
@@ -29,12 +29,12 @@ function styleInject(css, ref) {
29
29
  }
30
30
  }
31
31
 
32
- var css_248z$c = ".dx-accordion {\n margin: 0;\n}\n.dx-accordion .accordion-heading {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: #bfd4e4;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n color: #54565a;\n padding: 13px 20px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.dx-accordion .accordion-heading .icon {\n line-height: 0;\n}\n.dx-accordion .accordion-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-accordion .accordion-content *:first-child {\n margin-top: 0;\n}\n.dx-accordion .accordion-content *:last-child {\n margin-bottom: 0;\n}";
32
+ var css_248z$c = ".dx-accordion {\n margin: 0;\n}\n.dx-accordion .accordion-heading {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: #bfd4e4;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n color: #54565a;\n padding: 13px 20px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.dx-accordion .accordion-heading .icon {\n line-height: 0;\n}\n.dx-accordion .accordion-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-accordion .accordion-content > *:first-child {\n margin-top: 0;\n}\n.dx-accordion .accordion-content > *:last-child {\n margin-bottom: 0;\n}";
33
33
  styleInject(css_248z$c);
34
34
 
35
35
  function DxAccordion(props) {
36
36
  const [isOpen, setIsOpen] = useState(props.showOpen || false);
37
- return (React.createElement("div", { className: 'dx-accordion' },
37
+ return (React.createElement("div", { className: `dx-accordion${props.className ? ' ' + props.className : ''}` },
38
38
  React.createElement("div", { className: 'accordion-heading', onClick: () => setIsOpen(!isOpen) },
39
39
  props.title,
40
40
  " ",
@@ -46,10 +46,10 @@ var css_248z$b = ".dx-accordion-group {\n margin: 40px 0;\n}";
46
46
  styleInject(css_248z$b);
47
47
 
48
48
  function DxAccordionGroup(props) {
49
- return React.createElement("div", { className: 'dx-accordion-group' }, props.children);
49
+ return React.createElement("div", { className: `dx-accordion-group${props.className ? ' ' + props.className : ''}` }, props.children);
50
50
  }
51
51
 
52
- var css_248z$a = ".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: #ffffff;\n border: 1px solid #419bb2;\n background-color: #419bb2;\n}\n.dx-button-primary:hover {\n background-color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: #9aafb540;\n border-color: #9aafb540;\n transition: 0.1s;\n}\n.dx-button-secondary {\n color: #419bb2;\n border: 1px solid #419bb2;\n background-color: #ffffff;\n}\n.dx-button-secondary:hover {\n color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: #8a9a9e;\n background-color: #e0e6e8;\n border-color: #e0e6e8;\n transition: 0.1s;\n}";
52
+ var css_248z$a = ".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: #ffffff;\n border: 1px solid #419bb2;\n background-color: #419bb2;\n}\n.dx-button-primary:hover {\n background-color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: #9aafb540;\n border-color: #9aafb540;\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-secondary {\n color: #419bb2;\n border: 1px solid #419bb2;\n background-color: #ffffff;\n}\n.dx-button-secondary:hover {\n color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: #8a9a9e;\n background-color: #e0e6e8;\n border-color: #e0e6e8;\n transition: 0.1s;\n cursor: not-allowed;\n}";
53
53
  styleInject(css_248z$a);
54
54
 
55
55
  function DxButton(props) {
@@ -67,39 +67,56 @@ function DxButton(props) {
67
67
  return (React.createElement("button", { className: classNames.join(' '), type: 'button', onClick: handleClick, disabled: props.disabled === true }, props.children));
68
68
  }
69
69
 
70
- var css_248z$9 = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}\n.dx-item-group label {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n margin: 15px 0;\n}\n.dx-item-group label:first-of-type {\n margin-top: 0;\n}\n.dx-item-group label .label-text {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n color: #75757a;\n}";
70
+ var css_248z$9 = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}";
71
71
  styleInject(css_248z$9);
72
72
 
73
- var css_248z$8 = ".dx-item-group 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 #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n flex-shrink: 0;\n}\n.dx-item-group input[type=checkbox]::before {\n display: none;\n}\n.dx-item-group input[type=checkbox]:checked {\n background-color: #8a96a3;\n}\n.dx-item-group 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: #ffffff;\n content: \"\\f103\";\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-item-group input[type=checkbox]:not(:disabled):hover {\n border-color: #4d5061;\n}\n.dx-item-group input[type=checkbox]:not(:disabled):focus {\n outline: #aac9ff solid 2px;\n}\n.dx-item-group input[type=checkbox]:not(:disabled):focus-visible {\n outline: 0;\n}";
73
+ var css_248z$8 = "";
74
74
  styleInject(css_248z$8);
75
75
 
76
- var css_248z$7 = ".dx-item-group 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 #8a96a3;\n border-radius: 8px;\n background-color: #ffffff;\n flex-shrink: 0;\n}\n.dx-item-group input[type=radio]::before {\n display: none;\n}\n.dx-item-group 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: #8a96a3;\n}\n.dx-item-group input[type=radio]:not(:disabled):hover {\n border-color: #4d5061;\n}\n.dx-item-group input[type=radio]:not(:disabled):focus {\n outline: #aac9ff solid 2px;\n}\n.dx-item-group input[type=radio]:not(:disabled):focus-visible {\n outline: 0;\n}";
76
+ var css_248z$7 = ".dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid #aac9ff;\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"\\f104\";\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: #8a9a9e;\n}\n.dx-select-group.disabled select:disabled {\n background-color: #e6ebec;\n border-color: #e8eaed;\n color: #8a9a9e;\n cursor: not-allowed;\n}";
77
77
  styleInject(css_248z$7);
78
78
 
79
- var css_248z$6 = ".dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid #aac9ff;\n}\n.dx-select-group select option {\n background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"\\f104\";\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}";
79
+ var css_248z$6 = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid #aac9ff;\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: #75757a;\n}\n.dx-multiselect-group select option:checked {\n background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);\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: #e6ebec;\n border-color: #e8eaed;\n cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n color: #8a9a9e;\n}";
80
80
  styleInject(css_248z$6);
81
81
 
82
- var css_248z$5 = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid #aac9ff;\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: #75757a;\n}\n.dx-multiselect-group select option:checked {\n background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);\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}";
82
+ var css_248z$5 = ".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: #75757a;\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: #597393;\n line-height: 0;\n}";
83
83
  styleInject(css_248z$5);
84
84
 
85
- var css_248z$4 = ".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: #75757a;\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: #597393;\n line-height: 0;\n}";
86
- styleInject(css_248z$4);
87
-
88
85
  function DxLabel(props) {
89
86
  const hasLabel = props.label && props.label !== '';
90
87
  const description = props.description ? (React.createElement("div", { className: 'input-description' },
91
88
  React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppInfoSolid }),
92
89
  React.createElement("span", null, props.description))) : undefined;
93
- if (props.useFieldset) {
94
- return (React.createElement("fieldset", { className: 'dx-label ' + props.className || '' },
95
- props.label ? React.createElement("legend", { className: 'label-text' }, props.label) : undefined,
96
- props.children,
97
- description));
98
- }
99
- return (React.createElement("label", { className: 'dx-label ' + props.className || '' },
90
+ const contents = (React.createElement(React.Fragment, null,
91
+ ' ',
100
92
  hasLabel ? React.createElement("span", { className: 'label-text' }, props.label) : undefined,
101
93
  props.children,
102
94
  description));
95
+ const className = `dx-label${props.className ? ' ' + props.className : ''}`;
96
+ if (props.useFieldset) {
97
+ return React.createElement("fieldset", { className: className }, contents);
98
+ }
99
+ return React.createElement("label", { className: className }, contents);
100
+ }
101
+
102
+ var css_248z$4 = ".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: #75757a;\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 #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\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: #8a96a3;\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: #ffffff;\n content: \"\\f103\";\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: #4d5061;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n outline: #aac9ff 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 #8a96a3;\n border-radius: 8px;\n background-color: #ffffff;\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: #8a96a3;\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n border-color: #4d5061;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n outline: #aac9ff 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: #e8eaed;\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n background-color: #e8eaed;\n cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n margin: 0;\n}";
103
+ styleInject(css_248z$4);
104
+
105
+ function DxCheckbox(props) {
106
+ let initialValue = props.checked !== undefined ? props.checked : props.initiallyChecked || false;
107
+ const [checked, setChecked] = useState(initialValue);
108
+ useEffect(() => {
109
+ if (props.checked === undefined || props.checked === checked)
110
+ return;
111
+ setChecked(props.checked);
112
+ }, [props.checked]);
113
+ useEffect(() => {
114
+ if (props.onCheckChanged)
115
+ props.onCheckChanged(checked);
116
+ }, [checked]);
117
+ return (React.createElement("label", { className: `dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}` },
118
+ React.createElement("input", { type: props.useRadioType ? 'radio' : 'checkbox', name: props.name, id: props.label, value: props.itemValue, checked: checked, onChange: (e) => setChecked(e.target.checked), disabled: props.disabled === true }),
119
+ React.createElement("span", { className: 'label-text' }, props.label)));
103
120
  }
104
121
 
105
122
  function DxItemGroup(props) {
@@ -114,35 +131,33 @@ function DxItemGroup(props) {
114
131
  // eslint-disable-next-line react-hooks/exhaustive-deps
115
132
  }, [data]);
116
133
  // Handle checkbox changed
117
- const onChange = (idx, item, e) => {
134
+ const onChange = (idx, item, checked) => {
118
135
  if (props.onItemChanged)
119
- props.onItemChanged(item, e.target.checked);
136
+ props.onItemChanged(item, checked);
120
137
  let newData = [...data];
121
138
  // Unselect everything if it's radio buttons
122
139
  if (props.format === 'radio')
123
140
  newData.forEach((value) => (value.isSelected = false));
124
141
  // Set the selected state of the new item
125
- newData[idx].isSelected = e.target.checked;
142
+ newData[idx].isSelected = checked;
126
143
  setData(newData);
127
144
  };
128
145
  switch (props.format) {
129
146
  case 'multiselect':
130
147
  case 'dropdown': {
131
- return (React.createElement(DxLabel, { label: props.title, description: props.description },
132
- React.createElement("div", { className: `dx-item-group${props.format === 'multiselect' ? ' dx-multiselect-group' : ' dx-select-group'}` },
133
- React.createElement("select", { multiple: props.format === 'multiselect' }, data.map((d, i) => (React.createElement("option", { key: i, value: d.item.value }, d.item.label)))))));
148
+ return (React.createElement(DxLabel, { label: props.title, description: props.description, className: props.className },
149
+ React.createElement("div", { className: `dx-item-group${props.format === 'multiselect' ? ' dx-multiselect-group' : ' dx-select-group'}${props.disabled ? ' disabled' : ''}` },
150
+ React.createElement("select", { multiple: props.format === 'multiselect', disabled: props.disabled === true }, data.map((d, i) => (React.createElement("option", { key: i, value: d.item.value, disabled: d.item.disabled }, d.item.label)))))));
134
151
  }
135
152
  case 'checkbox':
136
153
  case 'radio':
137
154
  default: {
138
- return (React.createElement(DxLabel, { label: props.title, description: props.description, className: 'dx-item-group', useFieldset: true }, data.map((d, i) => (React.createElement("label", { key: i },
139
- React.createElement("input", { type: props.format, name: props.format === 'checkbox' ? `${id}-${i}` : id, id: d.item.label, value: d.item.value, checked: d.isSelected, onChange: (e) => onChange(i, d.item, e) }),
140
- React.createElement("span", { className: 'label-text' }, d.item.label))))));
155
+ return (React.createElement(DxLabel, { label: props.title, description: props.description, className: `dx-item-group${props.disabled ? ' disabled' : ''}${props.className ? ' ' + props.className : ''}`, useFieldset: true }, data.map((d, i) => (React.createElement(DxCheckbox, { key: i, name: props.format === 'checkbox' ? `${id}-${i}` : id, label: d.item.label, itemValue: d.item.value, initiallyChecked: d.isSelected, onCheckChanged: (checked) => onChange(i, d.item, checked), useRadioType: props.format === 'radio', disabled: props.disabled || d.item.disabled })))));
141
156
  }
142
157
  }
143
158
  }
144
159
 
145
- var css_248z$3 = ".dx-tabbed-content {\n margin: 40px 0;\n}\n.dx-tabbed-content .tab-titles {\n border-bottom: 1px solid #bfd4e4;\n font-weight: normal;\n font-size: 14px;\n line-height: 20px;\n}\n.dx-tabbed-content .tab-titles .tab-title {\n display: inline-block;\n padding: 5px 20px;\n border-bottom: 1px solid transparent;\n cursor: pointer;\n}\n.dx-tabbed-content .tab-titles .tab-title.active {\n border-bottom-color: #597393;\n font-weight: bold;\n}\n.dx-tabbed-content .tab-titles .tab-title p {\n margin: 0;\n display: inline;\n}\n.dx-tabbed-content .tab-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-tabbed-content .tab-content *:first-child {\n margin-top: 0;\n}\n.dx-tabbed-content .tab-content *:last-child {\n margin-bottom: 0;\n}";
160
+ var css_248z$3 = ".dx-tabbed-content {\n margin: 40px 0;\n}\n.dx-tabbed-content .tab-titles {\n border-bottom: 1px solid #bfd4e4;\n font-weight: normal;\n font-size: 14px;\n line-height: 20px;\n}\n.dx-tabbed-content .tab-titles .tab-title {\n display: inline-block;\n padding: 5px 20px;\n border-bottom: 1px solid transparent;\n cursor: pointer;\n}\n.dx-tabbed-content .tab-titles .tab-title:hover {\n border-color: #bfd4e4;\n}\n.dx-tabbed-content .tab-titles .tab-title.active {\n border-bottom-color: #597393;\n font-weight: bold;\n}\n.dx-tabbed-content .tab-titles .tab-title p {\n margin: 0;\n display: inline;\n}\n.dx-tabbed-content .tab-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-tabbed-content .tab-content > *:first-child {\n margin-top: 0;\n}\n.dx-tabbed-content .tab-content > *:last-child {\n margin-bottom: 0;\n}";
146
161
  styleInject(css_248z$3);
147
162
 
148
163
  function DxTabbedContent(props) {
@@ -154,7 +169,7 @@ function DxTabbedContent(props) {
154
169
  return 'Unknown title';
155
170
  return child.props.title;
156
171
  }));
157
- return (React.createElement("div", { className: 'dx-tabbed-content' },
172
+ return (React.createElement("div", { className: `dx-tabbed-content${props.className ? ' ' + props.className : ''}` },
158
173
  React.createElement("div", { className: 'tab-titles' }, titles.map((title, i) => (React.createElement("span", { key: i, className: `tab-title${i === activeTab ? ' active' : ''}`, onClick: () => setActiveTab(i) }, title)))),
159
174
  React.createElement("div", { className: 'tab-content' }, React.Children.toArray(props.children)[activeTab])));
160
175
  }
@@ -163,15 +178,15 @@ var css_248z$2 = "";
163
178
  styleInject(css_248z$2);
164
179
 
165
180
  function DxTabPanel(props) {
166
- return React.createElement("div", { className: 'dx-tab-panel' }, props.children);
181
+ return React.createElement("div", { className: `dx-tab-panel${props.className ? ' ' + props.className : ''}` }, props.children);
167
182
  }
168
183
 
169
- var css_248z$1 = ".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 #c6cbd1;\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\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: #75757a;\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 input {\n flex-grow: 1;\n border: 0;\n background: #ffffff;\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: #272d2d;\n}\n.dx-textbox input:focus-visible {\n outline: 0;\n}\n.dx-textbox input::placeholder {\n font-family: Roboto;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: #757576;\n}";
184
+ var css_248z$1 = ".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 #c6cbd1;\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\n background-color: #ffffff;\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: #75757a;\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 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: #272d2d;\n}\n.dx-textbox input:focus-visible {\n outline: 0;\n}\n.dx-textbox input::placeholder {\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: #757576;\n}\n.dx-textbox.disabled {\n background-color: #e6ebec;\n border-color: #e8eaed;\n cursor: not-allowed;\n}\n.dx-textbox.disabled input {\n cursor: not-allowed;\n color: #75757a;\n}\n.dx-textbox.disabled .icon,\n.dx-textbox.disabled input::placeholder {\n color: #ffffff;\n}";
170
185
  styleInject(css_248z$1);
171
186
 
172
187
  function DxTextbox(props) {
173
188
  const [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);
174
- const [value, setValue] = useState(props.initialValue || '');
189
+ const [value, setValue] = useState(props.initialValue || props.value || '');
175
190
  const [isFocused, setIsFocused] = useState(false);
176
191
  const [escapePressed, setEscapePressed] = useState(Date.now());
177
192
  const [step, setStep] = useState(undefined);
@@ -184,6 +199,10 @@ function DxTextbox(props) {
184
199
  document.removeEventListener('keydown', globalKeyBindings, false);
185
200
  };
186
201
  }, []);
202
+ // Value prop updated
203
+ useEffect(() => {
204
+ setValue(props.value || '');
205
+ }, [props.value]);
187
206
  // Escape pressed
188
207
  useEffect(() => {
189
208
  var _a;
@@ -244,7 +263,7 @@ function DxTextbox(props) {
244
263
  if (inputType === 'integer' || inputType === 'decimal')
245
264
  inputType = 'number';
246
265
  // TODO: handle props.inputType
247
- let component = (React.createElement("div", { className: `dx-textbox${hasLabel ? ' with-label' : ''}`, style: {} },
266
+ let component = (React.createElement("div", { className: `dx-textbox${hasLabel ? ' with-label' : ''}${props.disabled ? ' disabled' : ''}`, style: {} },
248
267
  props.icon ? React.createElement(GenesysDevIcon, { icon: props.icon, className: 'input-icon' }) : undefined,
249
268
  React.createElement("input", { className: 'dx-input', type: inputType, step: step, value: value, placeholder: props.placeholder, onChange: (e) => setValue(e.target.value), ref: inputRef, onFocus: () => {
250
269
  setIsFocused(true);
@@ -254,25 +273,35 @@ function DxTextbox(props) {
254
273
  setIsFocused(false);
255
274
  if (props.onBlur)
256
275
  props.onBlur();
257
- } }),
258
- props.clearButton && (value || isFocused) ? (React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppTimes, className: 'clear-icon', onClick: () => setValue('') })) : undefined));
276
+ }, disabled: props.disabled === true }),
277
+ props.clearButton && (value || isFocused) && !props.disabled ? (React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppTimes, className: 'clear-icon', onClick: () => setValue('') })) : undefined));
259
278
  // Render
260
- return (React.createElement(DxLabel, { label: props.label, description: props.description }, component));
279
+ return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className }, component));
261
280
  }
262
281
 
263
- var css_248z = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n background: #f5f8fb;\n border: 1px solid #c6cbd1;\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: #aac9ff;\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: #c4c4c4;\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: #419bb2;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);\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: #ffffff;\n padding: 0;\n margin: 0;\n}";
282
+ var css_248z = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n background: #f5f8fb;\n border: 1px solid #c6cbd1;\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: #aac9ff;\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: #c4c4c4;\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: #419bb2;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);\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: #ffffff;\n padding: 0;\n margin: 0;\n}\n.dx-toggle-container.disabled .dx-toggle {\n border-color: #e8eaed;\n color: #ffffff;\n cursor: not-allowed;\n}\n.dx-toggle-container.disabled .dx-toggle:hover .slider {\n border-color: transparent;\n}\n.dx-toggle-container.disabled .dx-toggle .slider {\n color: #8a9a9e;\n background-color: #e0e6e8;\n}";
264
283
  styleInject(css_248z);
265
284
 
266
285
  function DxToggle(props) {
267
- const [value, setValue] = useState(props.isTriState ? props.initialValue : props.initialValue || false);
286
+ let initialValue = props.value !== undefined ? props.value : props.initialValue;
287
+ if (!props.isTriState)
288
+ initialValue = initialValue || false;
289
+ const [value, setValue] = useState(initialValue);
268
290
  const trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;
269
291
  const falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;
292
+ useEffect(() => {
293
+ if (props.initialValue || props.value === value || (!props.isTriState && props.value === undefined))
294
+ return;
295
+ setValue(props.value);
296
+ }, [props.value]);
270
297
  useEffect(() => {
271
298
  if (props.onChange)
272
299
  props.onChange(value);
273
300
  // eslint-disable-next-line react-hooks/exhaustive-deps
274
301
  }, [value]);
275
302
  const toggleValue = () => {
303
+ if (props.disabled)
304
+ return;
276
305
  if (props.isTriState) {
277
306
  if (value === undefined)
278
307
  setValue(true);
@@ -285,8 +314,8 @@ function DxToggle(props) {
285
314
  setValue(!value);
286
315
  }
287
316
  };
288
- return (React.createElement(DxLabel, { label: props.label, description: props.description },
289
- React.createElement("div", { className: 'dx-toggle-container' },
317
+ return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className },
318
+ React.createElement("div", { className: `dx-toggle-container${props.disabled ? ' disabled' : ''}` },
290
319
  React.createElement("div", { className: 'dx-toggle', onClick: toggleValue },
291
320
  value !== false ? React.createElement(GenesysDevIcon, { icon: falseIcon }) : undefined,
292
321
  value === true && props.isTriState ? React.createElement("div", { className: 'clear-placeholder' }, "\u00A0") : undefined,
@@ -295,10 +324,5 @@ function DxToggle(props) {
295
324
  value !== true ? React.createElement(GenesysDevIcon, { icon: trueIcon }) : undefined))));
296
325
  }
297
326
 
298
- // Add this in your component file
299
- require('react-dom');
300
- window.React2 = require('react');
301
- console.log(window.React1 === window.React2);
302
-
303
- export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxLabel, DxTabPanel, DxTabbedContent, DxTextbox, DxToggle };
327
+ export { DxAccordion, DxAccordionGroup, DxButton, DxCheckbox, DxItemGroup, DxLabel, DxTabPanel, DxTabbedContent, DxTextbox, DxToggle };
304
328
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/dxaccordion/DxAccordion.tsx","../src/dxaccordion/DxAccordionGroup.tsx","../src/dxbutton/DxButton.tsx","../src/dxlabel/DxLabel.tsx","../src/dxitemgroup/DxItemGroup.tsx","../src/dxtabbedcontent/DxTabbedContent.tsx","../src/dxtabbedcontent/DxTabPanel.tsx","../src/dxtextbox/DxTextbox.tsx","../src/dxtoggle/DxToggle.tsx","../src/index.ts"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useState } from 'react';\n\nimport './DxAccordion.scss';\n\ninterface IProps {\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n\tshowOpen?: boolean;\n}\n\nexport default function DxAccordion(props: IProps) {\n\tconst [isOpen, setIsOpen] = useState(props.showOpen || false);\n\n\treturn (\n\t\t<div className='dx-accordion'>\n\t\t\t<div className='accordion-heading' onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t{props.title} <GenesysDevIcon icon={isOpen ? GenesysDevIcons.AppChevronUp : GenesysDevIcons.AppChevronDown} />\n\t\t\t</div>\n\t\t\t{isOpen ? <div className='accordion-content'>{props.children}</div> : undefined}\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxAccordionGroup.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n}\n\nexport default function DxAccordionGroup(props: IProps) {\n\treturn <div className='dx-accordion-group'>{props.children}</div>;\n}\n","import React from 'react';\nimport { VoidEventCallback } from '..';\n\nimport './DxButton.scss';\n\ninterface IProps {\n\ttype?: 'primary' | 'secondary';\n\tdisabled?: boolean;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonClick?: VoidEventCallback;\n}\n\nexport default function DxButton(props: IProps) {\n\tlet classNames = ['dx-button'];\n\tclassNames.push(`dx-button-${props.type || 'primary'}`);\n\tif (props.className) classNames.push(props.className);\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n\t\tif (!props.onClick) return;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tprops.onClick();\n\t};\n\n\treturn (\n\t\t<button className={classNames.join(' ')} type='button' onClick={handleClick} disabled={props.disabled === true}>\n\t\t\t{props.children}\n\t\t</button>\n\t);\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React from 'react';\n\nimport './DxLabel.scss';\n\ninterface IProps {\n\tlabel?: string;\n\tdescription?: string;\n\tuseFieldset?: boolean;\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxLabel(props: IProps) {\n\tconst hasLabel = props.label && props.label !== '';\n\n\tconst description = props.description ? (\n\t\t<div className='input-description'>\n\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />\n\t\t\t<span>{props.description}</span>\n\t\t</div>\n\t) : undefined;\n\n\tif (props.useFieldset) {\n\t\treturn (\n\t\t\t<fieldset className={'dx-label ' + props.className || ''}>\n\t\t\t\t{props.label ? <legend className='label-text'>{props.label}</legend> : undefined}\n\t\t\t\t{props.children}\n\t\t\t\t{description}\n\t\t\t</fieldset>\n\t\t);\n\t}\n\treturn (\n\t\t<label className={'dx-label ' + props.className || ''}>\n\t\t\t{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}\n\t\t\t{props.children}\n\t\t\t{description}\n\t\t</label>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { DxItemGroupItem, DxItemGroupItemValue, ItemChangedCallback, ItemGroupChangedCallback } from '..';\n\nimport './DxItemGroup.scss';\nimport './checkbox.scss';\nimport './radiobutton.scss';\nimport './dropdown.scss';\nimport './multiselect.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\ninterface IProps {\n\ttitle?: string;\n\tdescription?: string;\n\tformat: DxItemGroupFormat;\n\titems: DxItemGroupItem[];\n\tonItemChanged?: ItemChangedCallback;\n\tonItemsChanged?: ItemGroupChangedCallback;\n}\n\nexport type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';\n\nexport default function DxItemGroup(props: IProps) {\n\tconst [data, setData] = useState<DxItemGroupItemValue[]>(\n\t\tprops.items.map((item) => {\n\t\t\treturn { item, isSelected: false };\n\t\t})\n\t);\n\tconst [id] = useState(uuid());\n\n\t// data changed\n\tuseEffect(() => {\n\t\tif (props.onItemsChanged) props.onItemsChanged(data);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [data]);\n\n\t// Handle checkbox changed\n\tconst onChange = (idx: number, item: DxItemGroupItem, e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (props.onItemChanged) props.onItemChanged(item, e.target.checked);\n\t\tlet newData = [...data];\n\t\t// Unselect everything if it's radio buttons\n\t\tif (props.format === 'radio') newData.forEach((value) => (value.isSelected = false));\n\t\t// Set the selected state of the new item\n\t\tnewData[idx].isSelected = e.target.checked;\n\t\tsetData(newData);\n\t};\n\n\tswitch (props.format) {\n\t\tcase 'multiselect':\n\t\tcase 'dropdown': {\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description}>\n\t\t\t\t\t<div className={`dx-item-group${props.format === 'multiselect' ? ' dx-multiselect-group' : ' dx-select-group'}`}>\n\t\t\t\t\t\t<select multiple={props.format === 'multiselect'}>\n\t\t\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t\t\t<option key={i} value={d.item.value}>\n\t\t\t\t\t\t\t\t\t{d.item.label}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t\tcase 'checkbox':\n\t\tcase 'radio':\n\t\tdefault: {\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description} className='dx-item-group' useFieldset={true}>\n\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t<label key={i}>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype={props.format}\n\t\t\t\t\t\t\t\tname={props.format === 'checkbox' ? `${id}-${i}` : id}\n\t\t\t\t\t\t\t\tid={d.item.label}\n\t\t\t\t\t\t\t\tvalue={d.item.value}\n\t\t\t\t\t\t\t\tchecked={d.isSelected}\n\t\t\t\t\t\t\t\tonChange={(e) => onChange(i, d.item, e)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className='label-text'>{d.item.label}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t))}\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t}\n}\n","import React, { useState } from 'react';\n\nimport './DxTabbedContent.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n\tinitialTabId?: number;\n}\n\nexport default function DxTabbedContent(props: IProps) {\n\tconst [activeTab, setActiveTab] = useState(props.initialTabId || 0);\n\tconst [titles] = useState<React.ReactNode[]>(\n\t\t// Scrape titles from child elements\n\t\tReact.Children.toArray(props.children).map((child: any) => {\n\t\t\tif (!child || !child.props || !child.props.title) return 'Unknown title';\n\t\t\treturn child.props.title;\n\t\t})\n\t);\n\n\treturn (\n\t\t<div className='dx-tabbed-content'>\n\t\t\t<div className='tab-titles'>\n\t\t\t\t{titles.map((title, i) => (\n\t\t\t\t\t<span key={i} className={`tab-title${i === activeTab ? ' active' : ''}`} onClick={() => setActiveTab(i)}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className='tab-content'>{React.Children.toArray(props.children)[activeTab]}</div>\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxTabPanel.scss';\n\ninterface IProps {\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxTabPanel(props: IProps) {\n\treturn <div className='dx-tab-panel'>{props.children}</div>;\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport DxLabel from '../dxlabel/DxLabel';\nimport { StringChangedCallback, VoidEventCallback } from '..';\n\nimport './DxTextbox.scss';\n\n// export type DxTextboxType = 'text' | 'password' | 'integer' | 'decimal' | 'date' | 'time' | 'datetime';\nexport type DxTextboxType = 'text' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';\n\nexport interface DxTextboxProps {\n\tinitialValue?: string;\n\tinputType?: DxTextboxType;\n\tlabel?: string;\n\tdescription?: string;\n\tplaceholder?: string;\n\ticon?: GenesysDevIcons;\n\tclearButton?: boolean;\n\tonChange?: StringChangedCallback;\n\tchangeDebounceMs?: number;\n\tinputRef?: React.RefObject<HTMLInputElement>;\n\tonFocus?: VoidEventCallback;\n\tonBlur?: VoidEventCallback;\n}\n\nexport default function DxTextbox(props: DxTextboxProps) {\n\tconst [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);\n\tconst [value, setValue] = useState(props.initialValue || '');\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [escapePressed, setEscapePressed] = useState(Date.now());\n\tconst [step, setStep] = useState<string | number | undefined>(undefined);\n\tlet [timer, setTimer] = useState(undefined as unknown as ReturnType<typeof setTimeout>);\n\n\t// Constructor\n\tuseEffect(() => {\n\t\t// Register global key bindings\n\t\tdocument.addEventListener('keydown', globalKeyBindings, false);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', globalKeyBindings, false);\n\t\t};\n\t}, []);\n\n\t// Escape pressed\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\t\tsetValue('');\n\t\tinputRef.current?.blur();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [escapePressed]);\n\n\t// Value changed\n\tuseEffect(() => {\n\t\tif (props.inputType === 'decimal') {\n\t\t\t// Normalize step setting\n\t\t\tif (!isNaN(parseFloat(value))) {\n\t\t\t\tconst match = /\\.(.+)/.exec(value);\n\t\t\t\tconsole.log(match);\n\t\t\t\tif (match) {\n\t\t\t\t\tconst s = `0.${Array.apply(null, Array(match[1].length - 1))\n\t\t\t\t\t\t.map(() => '0')\n\t\t\t\t\t\t.join('')}1`;\n\t\t\t\t\tconsole.log(s);\n\t\t\t\t\tsetStep(s);\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (props.inputType === 'integer') {\n\t\t\t// Overwrite value as integer to forcibly truncate floating point numbers\n\t\t\tsetValue(parseInt(value).toString());\n\t\t}\n\n\t\t// Debounce onChange notification\n\t\tif (!props.onChange) return;\n\t\tclearTimeout(timer);\n\t\tsetTimer(setTimeout(() => (props.onChange ? props.onChange(value) : undefined), debounceMs));\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// Update state from props\n\tuseEffect(() => {\n\t\tsetDebounceMs(props.changeDebounceMs || 300);\n\t}, [props.changeDebounceMs]);\n\n\t// Normalize inputRef\n\tlet inputRef = useRef<HTMLInputElement>(null);\n\tif (props.inputRef) inputRef = props.inputRef;\n\tconst hasLabel = props.label && props.label !== '';\n\n\t// Global key bindings\n\tfunction globalKeyBindings(event: KeyboardEvent) {\n\t\t// Escape - cancel search\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\t\t\tsetEscapePressed(Date.now());\n\t\t\treturn;\n\t\t}\n\t}\n\n\t// Normalize input type\n\tlet inputType: React.HTMLInputTypeAttribute | undefined = props.inputType;\n\tif (inputType === 'integer' || inputType === 'decimal') inputType = 'number';\n\n\t// TODO: handle props.inputType\n\tlet component = (\n\t\t<div className={`dx-textbox${hasLabel ? ' with-label' : ''}`} style={{}}>\n\t\t\t{props.icon ? <GenesysDevIcon icon={props.icon} className='input-icon' /> : undefined}\n\t\t\t<input\n\t\t\t\tclassName='dx-input'\n\t\t\t\ttype={inputType}\n\t\t\t\tstep={step}\n\t\t\t\tvalue={value}\n\t\t\t\tplaceholder={props.placeholder}\n\t\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t\t\tref={inputRef}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tif (props.onFocus) props.onFocus();\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tif (props.onBlur) props.onBlur();\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{props.clearButton && (value || isFocused) ? (\n\t\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppTimes} className='clear-icon' onClick={() => setValue('')} />\n\t\t\t) : undefined}\n\t\t</div>\n\t);\n\n\t// Render\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description}>\n\t\t\t{component}\n\t\t</DxLabel>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport { BooleanChangedCallback } from '..';\n\nimport './DxToggle.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\nexport interface DxToggleProps {\n\tisTriState?: boolean;\n\tinitialValue?: boolean;\n\tlabel?: string;\n\tdescription?: string;\n\ttrueIcon?: GenesysDevIcons;\n\tfalseIcon?: GenesysDevIcons;\n\tonChange?: BooleanChangedCallback;\n}\n\nexport default function DxToggle(props: DxToggleProps) {\n\tconst [value, setValue] = useState(props.isTriState ? props.initialValue : props.initialValue || false);\n\n\tconst trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;\n\tconst falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;\n\n\tuseEffect(() => {\n\t\tif (props.onChange) props.onChange(value);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\tconst toggleValue = () => {\n\t\tif (props.isTriState) {\n\t\t\tif (value === undefined) setValue(true);\n\t\t\telse if (value === true) setValue(false);\n\t\t\telse setValue(undefined);\n\t\t} else {\n\t\t\tsetValue(!value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description}>\n\t\t\t<div className='dx-toggle-container'>\n\t\t\t\t<div className='dx-toggle' onClick={toggleValue}>\n\t\t\t\t\t{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}\n\t\t\t\t\t{value === true && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}\n\t\t\t\t\t<div className='slider'>{value !== undefined ? <GenesysDevIcon icon={value ? trueIcon : falseIcon} /> : undefined}</div>\n\t\t\t\t\t{value === false && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}\n\t\t\t\t\t{value !== true ? <GenesysDevIcon icon={trueIcon} /> : undefined}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DxLabel>\n\t);\n}\n","import DxAccordion from './dxaccordion/DxAccordion';\nimport DxAccordionGroup from './dxaccordion/DxAccordionGroup';\nimport DxButton from './dxbutton/DxButton';\nimport DxItemGroup from './dxitemgroup/DxItemGroup';\nimport DxLabel from './dxlabel/DxLabel';\nimport DxTabbedContent from './dxtabbedcontent/DxTabbedContent';\nimport DxTabPanel from './dxtabbedcontent/DxTabPanel';\nimport DxTextbox from './dxtextbox/DxTextbox';\nimport DxToggle from './dxtoggle/DxToggle';\n\nexport { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };\n\nexport interface StringChangedCallback {\n\t(value: string): void;\n}\n\nexport interface BooleanChangedCallback {\n\t(value?: boolean): void;\n}\n\nexport interface VoidEventCallback {\n\t(): void;\n}\n\n// Item in a DxItemGroup\nexport interface DxItemGroupItem {\n\tlabel: string;\n\tvalue: string;\n}\n\n// Item value of a DxItemGroupItem in a DxItemGroup\nexport interface DxItemGroupItemValue {\n\titem: DxItemGroupItem;\n\tisSelected: boolean;\n}\n\nexport interface ItemChangedCallback {\n\t(item: DxItemGroupItem, isSelected: boolean): void;\n}\n\nexport interface ItemGroupChangedCallback {\n\t(items: DxItemGroupItemValue[]): void;\n}\n\n// Add this in your component file\nrequire('react-dom');\n(window as any).React2 = require('react');\nconsole.log((window as any).React1 === (window as any).React2);\n"],"names":["uuid"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/dxaccordion/DxAccordion.tsx","../src/dxaccordion/DxAccordionGroup.tsx","../src/dxbutton/DxButton.tsx","../src/dxlabel/DxLabel.tsx","../src/dxitemgroup/DxCheckbox.tsx","../src/dxitemgroup/DxItemGroup.tsx","../src/dxtabbedcontent/DxTabbedContent.tsx","../src/dxtabbedcontent/DxTabPanel.tsx","../src/dxtextbox/DxTextbox.tsx","../src/dxtoggle/DxToggle.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useState } from 'react';\nimport { DxAccordionProps } from '..';\n\nimport './DxAccordion.scss';\n\nexport default function DxAccordion(props: DxAccordionProps) {\n\tconst [isOpen, setIsOpen] = useState(props.showOpen || false);\n\n\treturn (\n\t\t<div className={`dx-accordion${props.className ? ' ' + props.className : ''}`}>\n\t\t\t<div className='accordion-heading' onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t{props.title} <GenesysDevIcon icon={isOpen ? GenesysDevIcons.AppChevronUp : GenesysDevIcons.AppChevronDown} />\n\t\t\t</div>\n\t\t\t{isOpen ? <div className='accordion-content'>{props.children}</div> : undefined}\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxAccordionGroup.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nexport default function DxAccordionGroup(props: IProps) {\n\treturn <div className={`dx-accordion-group${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;\n}\n","import React from 'react';\nimport { VoidEventCallback } from '..';\n\nimport './DxButton.scss';\n\ninterface IProps {\n\ttype?: 'primary' | 'secondary';\n\tdisabled?: boolean;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonClick?: VoidEventCallback;\n}\n\nexport default function DxButton(props: IProps) {\n\tlet classNames = ['dx-button'];\n\tclassNames.push(`dx-button-${props.type || 'primary'}`);\n\tif (props.className) classNames.push(props.className);\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n\t\tif (!props.onClick) return;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tprops.onClick();\n\t};\n\n\treturn (\n\t\t<button className={classNames.join(' ')} type='button' onClick={handleClick} disabled={props.disabled === true}>\n\t\t\t{props.children}\n\t\t</button>\n\t);\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React from 'react';\n\nimport './DxLabel.scss';\n\ninterface IProps {\n\tlabel?: string;\n\tdescription?: string;\n\tuseFieldset?: boolean;\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxLabel(props: IProps) {\n\tconst hasLabel = props.label && props.label !== '';\n\n\tconst description = props.description ? (\n\t\t<div className='input-description'>\n\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />\n\t\t\t<span>{props.description}</span>\n\t\t</div>\n\t) : undefined;\n\n\tconst contents = (\n\t\t<React.Fragment>\n\t\t\t{' '}\n\t\t\t{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}\n\t\t\t{props.children}\n\t\t\t{description}\n\t\t</React.Fragment>\n\t);\n\n\tconst className = `dx-label${props.className ? ' ' + props.className : ''}`;\n\n\tif (props.useFieldset) {\n\t\treturn <fieldset className={className}>{contents}</fieldset>;\n\t}\n\treturn <label className={className}>{contents}</label>;\n}\n","import React, { useEffect, useState } from 'react';\nimport { CheckedChangedCallback } from '..';\n\nimport './DxCheckbox.scss';\n\ninterface IProps {\n\tlabel: string;\n\titemValue: string;\n\tdescription?: string;\n\tchecked?: boolean;\n\tinitiallyChecked?: boolean;\n\tname?: string;\n\tclassName?: string;\n\tonCheckChanged?: CheckedChangedCallback;\n\tuseRadioType?: boolean;\n\tdisabled?: boolean;\n}\n\nexport default function DxCheckbox(props: IProps) {\n\tlet initialValue: boolean = props.checked !== undefined ? props.checked : props.initiallyChecked || false;\n\n\tconst [checked, setChecked] = useState<boolean>(initialValue);\n\n\tuseEffect(() => {\n\t\tif (props.checked === undefined || props.checked === checked) return;\n\t\tsetChecked(props.checked);\n\t}, [props.checked]);\n\n\tuseEffect(() => {\n\t\tif (props.onCheckChanged) props.onCheckChanged(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<label className={`dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}`}>\n\t\t\t<input\n\t\t\t\ttype={props.useRadioType ? 'radio' : 'checkbox'}\n\t\t\t\tname={props.name}\n\t\t\t\tid={props.label}\n\t\t\t\tvalue={props.itemValue}\n\t\t\t\tchecked={checked}\n\t\t\t\tonChange={(e) => setChecked(e.target.checked)}\n\t\t\t\tdisabled={props.disabled === true}\n\t\t\t/>\n\t\t\t<span className='label-text'>{props.label}</span>\n\t\t</label>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { DxItemGroupItem, DxItemGroupItemValue, DxItemGroupProps, ItemChangedCallback, ItemGroupChangedCallback } from '..';\n\nimport './DxItemGroup.scss';\nimport './radiobutton.scss';\nimport './dropdown.scss';\nimport './multiselect.scss';\nimport DxLabel from '../dxlabel/DxLabel';\nimport DxCheckbox from './DxCheckbox';\n\nexport default function DxItemGroup(props: DxItemGroupProps) {\n\tconst [data, setData] = useState<DxItemGroupItemValue[]>(\n\t\tprops.items.map((item) => {\n\t\t\treturn { item, isSelected: false };\n\t\t})\n\t);\n\tconst [id] = useState(uuid());\n\n\t// data changed\n\tuseEffect(() => {\n\t\tif (props.onItemsChanged) props.onItemsChanged(data);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [data]);\n\n\t// Handle checkbox changed\n\tconst onChange = (idx: number, item: DxItemGroupItem, checked: boolean) => {\n\t\tif (props.onItemChanged) props.onItemChanged(item, checked);\n\t\tlet newData = [...data];\n\t\t// Unselect everything if it's radio buttons\n\t\tif (props.format === 'radio') newData.forEach((value) => (value.isSelected = false));\n\t\t// Set the selected state of the new item\n\t\tnewData[idx].isSelected = checked;\n\t\tsetData(newData);\n\t};\n\n\tswitch (props.format) {\n\t\tcase 'multiselect':\n\t\tcase 'dropdown': {\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description} className={props.className}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`dx-item-group${props.format === 'multiselect' ? ' dx-multiselect-group' : ' dx-select-group'}${\n\t\t\t\t\t\t\tprops.disabled ? ' disabled' : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<select multiple={props.format === 'multiselect'} disabled={props.disabled === true}>\n\t\t\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t\t\t<option key={i} value={d.item.value} disabled={d.item.disabled}>\n\t\t\t\t\t\t\t\t\t{d.item.label}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t\tcase 'checkbox':\n\t\tcase 'radio':\n\t\tdefault: {\n\t\t\treturn (\n\t\t\t\t<DxLabel\n\t\t\t\t\tlabel={props.title}\n\t\t\t\t\tdescription={props.description}\n\t\t\t\t\tclassName={`dx-item-group${props.disabled ? ' disabled' : ''}${props.className ? ' ' + props.className : ''}`}\n\t\t\t\t\tuseFieldset={true}\n\t\t\t\t>\n\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t<DxCheckbox\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tname={props.format === 'checkbox' ? `${id}-${i}` : id}\n\t\t\t\t\t\t\tlabel={d.item.label}\n\t\t\t\t\t\t\titemValue={d.item.value}\n\t\t\t\t\t\t\tinitiallyChecked={d.isSelected}\n\t\t\t\t\t\t\tonCheckChanged={(checked) => onChange(i, d.item, checked)}\n\t\t\t\t\t\t\tuseRadioType={props.format === 'radio'}\n\t\t\t\t\t\t\tdisabled={props.disabled || d.item.disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t}\n}\n","import React, { useState } from 'react';\nimport { DxTabbedContentProps } from '..';\n\nimport './DxTabbedContent.scss';\n\nexport default function DxTabbedContent(props: DxTabbedContentProps) {\n\tconst [activeTab, setActiveTab] = useState(props.initialTabId || 0);\n\tconst [titles] = useState<React.ReactNode[]>(\n\t\t// Scrape titles from child elements\n\t\tReact.Children.toArray(props.children).map((child: any) => {\n\t\t\tif (!child || !child.props || !child.props.title) return 'Unknown title';\n\t\t\treturn child.props.title;\n\t\t})\n\t);\n\n\treturn (\n\t\t<div className={`dx-tabbed-content${props.className ? ' ' + props.className : ''}`}>\n\t\t\t<div className='tab-titles'>\n\t\t\t\t{titles.map((title, i) => (\n\t\t\t\t\t<span key={i} className={`tab-title${i === activeTab ? ' active' : ''}`} onClick={() => setActiveTab(i)}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className='tab-content'>{React.Children.toArray(props.children)[activeTab]}</div>\n\t\t</div>\n\t);\n}\n","import React from 'react';\nimport { DxTabPanelProps } from '..';\n\nimport './DxTabPanel.scss';\n\nexport default function DxTabPanel(props: DxTabPanelProps) {\n\treturn <div className={`dx-tab-panel${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport DxLabel from '../dxlabel/DxLabel';\nimport { DxTextboxProps } from '..';\n\nimport './DxTextbox.scss';\n\nexport default function DxTextbox(props: DxTextboxProps) {\n\tconst [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);\n\tconst [value, setValue] = useState(props.initialValue || props.value || '');\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [escapePressed, setEscapePressed] = useState(Date.now());\n\tconst [step, setStep] = useState<string | number | undefined>(undefined);\n\tlet [timer, setTimer] = useState(undefined as unknown as ReturnType<typeof setTimeout>);\n\n\t// Constructor\n\tuseEffect(() => {\n\t\t// Register global key bindings\n\t\tdocument.addEventListener('keydown', globalKeyBindings, false);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', globalKeyBindings, false);\n\t\t};\n\t}, []);\n\n\t// Value prop updated\n\tuseEffect(() => {\n\t\tsetValue(props.value || '');\n\t}, [props.value]);\n\n\t// Escape pressed\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\t\tsetValue('');\n\t\tinputRef.current?.blur();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [escapePressed]);\n\n\t// Value changed\n\tuseEffect(() => {\n\t\tif (props.inputType === 'decimal') {\n\t\t\t// Normalize step setting\n\t\t\tif (!isNaN(parseFloat(value))) {\n\t\t\t\tconst match = /\\.(.+)/.exec(value);\n\t\t\t\tconsole.log(match);\n\t\t\t\tif (match) {\n\t\t\t\t\tconst s = `0.${Array.apply(null, Array(match[1].length - 1))\n\t\t\t\t\t\t.map(() => '0')\n\t\t\t\t\t\t.join('')}1`;\n\t\t\t\t\tconsole.log(s);\n\t\t\t\t\tsetStep(s);\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (props.inputType === 'integer') {\n\t\t\t// Overwrite value as integer to forcibly truncate floating point numbers\n\t\t\tsetValue(parseInt(value).toString());\n\t\t}\n\n\t\t// Debounce onChange notification\n\t\tif (!props.onChange) return;\n\t\tclearTimeout(timer);\n\t\tsetTimer(setTimeout(() => (props.onChange ? props.onChange(value) : undefined), debounceMs));\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// Update state from props\n\tuseEffect(() => {\n\t\tsetDebounceMs(props.changeDebounceMs || 300);\n\t}, [props.changeDebounceMs]);\n\n\t// Normalize inputRef\n\tlet inputRef = useRef<HTMLInputElement>(null);\n\tif (props.inputRef) inputRef = props.inputRef;\n\tconst hasLabel = props.label && props.label !== '';\n\n\t// Global key bindings\n\tfunction globalKeyBindings(event: KeyboardEvent) {\n\t\t// Escape - cancel search\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\t\t\tsetEscapePressed(Date.now());\n\t\t\treturn;\n\t\t}\n\t}\n\n\t// Normalize input type\n\tlet inputType: React.HTMLInputTypeAttribute | undefined = props.inputType;\n\tif (inputType === 'integer' || inputType === 'decimal') inputType = 'number';\n\n\t// TODO: handle props.inputType\n\tlet component = (\n\t\t<div className={`dx-textbox${hasLabel ? ' with-label' : ''}${props.disabled ? ' disabled' : ''}`} style={{}}>\n\t\t\t{props.icon ? <GenesysDevIcon icon={props.icon} className='input-icon' /> : undefined}\n\t\t\t<input\n\t\t\t\tclassName='dx-input'\n\t\t\t\ttype={inputType}\n\t\t\t\tstep={step}\n\t\t\t\tvalue={value}\n\t\t\t\tplaceholder={props.placeholder}\n\t\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t\t\tref={inputRef}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tif (props.onFocus) props.onFocus();\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tif (props.onBlur) props.onBlur();\n\t\t\t\t}}\n\t\t\t\tdisabled={props.disabled === true}\n\t\t\t/>\n\t\t\t{props.clearButton && (value || isFocused) && !props.disabled ? (\n\t\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppTimes} className='clear-icon' onClick={() => setValue('')} />\n\t\t\t) : undefined}\n\t\t</div>\n\t);\n\n\t// Render\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description} className={props.className}>\n\t\t\t{component}\n\t\t</DxLabel>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport { BooleanChangedCallback, DxToggleProps } from '..';\n\nimport './DxToggle.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\nexport default function DxToggle(props: DxToggleProps) {\n\tlet initialValue: boolean | undefined = props.value !== undefined ? props.value : props.initialValue;\n\tif (!props.isTriState) initialValue = initialValue || false;\n\n\tconst [value, setValue] = useState<boolean | undefined>(initialValue);\n\n\tconst trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;\n\tconst falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;\n\n\tuseEffect(() => {\n\t\tif (props.initialValue || props.value === value || (!props.isTriState && props.value === undefined)) return;\n\t\tsetValue(props.value);\n\t}, [props.value]);\n\n\tuseEffect(() => {\n\t\tif (props.onChange) props.onChange(value);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\tconst toggleValue = () => {\n\t\tif (props.disabled) return;\n\t\tif (props.isTriState) {\n\t\t\tif (value === undefined) setValue(true);\n\t\t\telse if (value === true) setValue(false);\n\t\t\telse setValue(undefined);\n\t\t} else {\n\t\t\tsetValue(!value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description} className={props.className}>\n\t\t\t<div className={`dx-toggle-container${props.disabled ? ' disabled' : ''}`}>\n\t\t\t\t<div className='dx-toggle' onClick={toggleValue}>\n\t\t\t\t\t{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}\n\t\t\t\t\t{value === true && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}\n\t\t\t\t\t<div className='slider'>{value !== undefined ? <GenesysDevIcon icon={value ? trueIcon : falseIcon} /> : undefined}</div>\n\t\t\t\t\t{value === false && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}\n\t\t\t\t\t{value !== true ? <GenesysDevIcon icon={trueIcon} /> : undefined}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DxLabel>\n\t);\n}\n"],"names":["uuid"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "genesys-react-components",
3
- "version": "0.1.0-alpha.3",
3
+ "version": "0.1.0-alpha.7",
4
4
  "description": "A React component library containing standardized form elements.",
5
5
  "main": "build/index.js",
6
6
  "module": "build/index.js",
@@ -20,7 +20,7 @@
20
20
  "bugs": {
21
21
  "url": "https://github.com/purecloudlabs/genesys-react-components/issues"
22
22
  },
23
- "homepage": "https://github.com/purecloudlabs/genesys-react-components#readme",
23
+ "homepage": "https://purecloudlabs.github.io/genesys-react-components",
24
24
  "devDependencies": {
25
25
  "@rollup/plugin-commonjs": "^21.0.1",
26
26
  "@rollup/plugin-node-resolve": "^13.0.6",