pixel-react 1.6.0 → 1.6.2

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 (112) hide show
  1. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  2. package/lib/components/AppHeader/types.d.ts +18 -6
  3. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  6. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  7. package/lib/components/MachineInputField/types.d.ts +1 -1
  8. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  9. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  10. package/lib/components/PopUpModal/types.d.ts +14 -0
  11. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  14. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  15. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  16. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  17. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  18. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  19. package/lib/components/TableTree/data.d.ts +36 -2
  20. package/lib/components/TableTree/types.d.ts +3 -4
  21. package/lib/index.d.ts +56 -17
  22. package/lib/index.esm.js +917 -552
  23. package/lib/index.esm.js.map +1 -1
  24. package/lib/index.js +917 -551
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/Themes/BaseTheme.scss +5 -14
  29. package/src/assets/Themes/DarkTheme.scss +5 -2
  30. package/src/assets/icons/approval_pending.svg +8 -8
  31. package/src/assets/icons/arrow_up.svg +1 -1
  32. package/src/assets/icons/configuration.svg +3 -3
  33. package/src/assets/icons/defects.svg +8 -8
  34. package/src/assets/icons/element.svg +4 -4
  35. package/src/assets/icons/project_element.svg +4 -4
  36. package/src/assets/icons/step_group.svg +10 -10
  37. package/src/assets/icons/variable.svg +3 -3
  38. package/src/assets/icons/web_service_icon.svg +3 -3
  39. package/src/assets/styles/_fonts.scss +4 -2
  40. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  41. package/src/components/AppHeader/AppHeader.tsx +158 -139
  42. package/src/components/AppHeader/types.ts +19 -6
  43. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  44. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  45. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  46. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  47. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  48. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  49. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  50. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  51. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  52. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  53. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  54. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  55. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  56. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  57. package/src/components/DatePicker/DatePicker.scss +15 -1
  58. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  59. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  62. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  63. package/src/components/Icon/Icons.scss +1 -1
  64. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  65. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  66. package/src/components/MachineInputField/types.ts +1 -1
  67. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  68. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  69. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  70. package/src/components/PopUpModal/types.ts +14 -0
  71. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  72. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  73. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  74. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  75. package/src/components/Select/Select.tsx +2 -3
  76. package/src/components/Select/components/Dropdown.tsx +34 -34
  77. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  78. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  79. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  80. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  81. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  82. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  83. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  84. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  85. package/src/components/TableTree/TableTree.stories.tsx +145 -98
  86. package/src/components/TableTree/TableTree.tsx +49 -14
  87. package/src/components/TableTree/data.ts +32 -391
  88. package/src/components/TableTree/types.ts +3 -4
  89. package/src/index.ts +3 -0
  90. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  91. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  94. package/lib/components/AddButton/AddButton.d.ts +0 -5
  95. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  96. package/lib/components/AddButton/index.d.ts +0 -1
  97. package/lib/components/AddButton/types.d.ts +0 -4
  98. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  99. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  100. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  101. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  102. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  103. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  104. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  105. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  106. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  107. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  108. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  109. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  110. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  111. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  112. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -13,7 +13,7 @@
13
13
  border-radius: 4px;
14
14
  display: flex;
15
15
  align-items: center;
16
- justify-content: space-around;
16
+ justify-content: space-between;
17
17
 
18
18
  .ff-machine-icon-text-wrapper,
19
19
  .ff-machine-icon-text-wrapper-reverse {
@@ -23,8 +23,21 @@
23
23
  .ff-machine-icon {
24
24
  margin-left: 4px;
25
25
  }
26
+
27
+ .ff-machine-text-reverse,
28
+ .ff-machine-text {
29
+ overflow: hidden;
30
+ white-space: nowrap;
31
+ text-overflow: ellipsis;
32
+ min-width: 30px;
33
+ max-width: 70px;
34
+ }
35
+
36
+ .ff-machine-text-reverse {
37
+ direction: ltr;
38
+ }
26
39
  }
27
-
40
+
28
41
  .ff-machine-icon-text-wrapper-reverse {
29
42
  flex-direction: row-reverse;
30
43
  }
@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
18
18
  ref
19
19
  ) => {
20
20
  const getIcon: Record<MachineType['type'], string> = {
21
- Local: 'browser_stack_icon',
21
+ Local: 'local',
22
+ Browserstack: 'browserstack_icon',
23
+ SauceLabs: 'sause_lab',
24
+ LambdaTest: 'lambda_icon',
22
25
  mac: 'mac_icon',
23
26
  android: 'android_icon',
27
+ linux: 'linux',
24
28
  'Google Chrome': 'chrome_icon',
29
+ 'Mozilla Firefox': 'fire_fox',
30
+ 'Microsoft Edge': 'edge',
31
+ 'Internet Explorer': 'internet_explorer',
32
+ Safari: 'safari_icon',
33
+ Opera: 'opera',
25
34
  };
26
35
 
27
36
  return (
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
53
62
  'ff-machine-icon-text-wrapper-reverse': contentReverse,
54
63
  })}
55
64
  >
56
- <Icon name={getIcon[type]} className="ff-machine-icon" />
65
+ <Icon
66
+ name={getIcon[type] || 'local'}
67
+ className="ff-machine-icon"
68
+ />
57
69
  <Typography
58
- className="ff-machine-text"
70
+ className={classNames('ff-machine-text', {
71
+ 'ff-machine-text-reverse': contentReverse,
72
+ })}
59
73
  color="var(--ff-machine-input-field-text-color)"
60
74
  >
61
75
  {label}
@@ -1,5 +1,5 @@
1
1
  export interface MachineType {
2
- type: 'Local' | 'mac' | 'android' | 'Google Chrome';
2
+ type: string;
3
3
  label: string;
4
4
  }
5
5
 
@@ -0,0 +1,36 @@
1
+ .warning_modal_container {
2
+ height: 100%;
3
+ }
4
+ .warning_modal_content {
5
+ display: flex;
6
+ height: 80%;
7
+ width: 100%;
8
+ }
9
+ .warning_modal_icon {
10
+ position: relative;
11
+ bottom: 16px;
12
+ right: 4px;
13
+ }
14
+ .warning_modal_title_wrapper {
15
+ line-height: 30px;
16
+ }
17
+ .warning_modal_message_wrapper {
18
+ padding-top: 8px;
19
+ display: flex;
20
+ height: 100%;
21
+ flex-direction: column;
22
+ justify-content: space-between;
23
+ }
24
+ .warning_modal_message {
25
+ display: flex;
26
+ flex-direction: column;
27
+ line-height: 24px;
28
+ }
29
+ .warning_modal_footer_button {
30
+ height: 20%;
31
+ width: 100%;
32
+ display: flex;
33
+ align-items: flex-end;
34
+ justify-content: flex-end;
35
+ gap: 8px;
36
+ }
@@ -0,0 +1,61 @@
1
+ import React, { useState } from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+ import PopUpModal from './PopUpModal';
4
+ import Button from '../Button';
5
+
6
+ const meta: Meta<typeof PopUpModal> = {
7
+ title: 'Components/PopUpModal',
8
+ component: PopUpModal,
9
+ parameters: {
10
+ layout: 'centered',
11
+ },
12
+ tags: ['autodocs'],
13
+ };
14
+
15
+ type Story = StoryObj<typeof PopUpModal>;
16
+
17
+ const defaultArgs = {
18
+ iconName:"license_warning",
19
+ titleMessage:"Warning!",
20
+ subTitleMessage:"Unsaved Changes.",
21
+ modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
22
+ footerMessage:"How do you want to proceed?",
23
+ firstButtonLabel:"Cancel",
24
+ secondButtonLabel:"Continue",
25
+ buttonVariant:"warning",
26
+ border:'1px solid var(--warning-modal-border-color)'
27
+ }
28
+
29
+ export const DefaultModal: Story = {
30
+ args: {
31
+ isOpen: true,
32
+ onClose: () => alert('Closed'),
33
+ onContinue: () => alert('Continued'),
34
+ iconName: 'license_warning',
35
+ titleMessage: 'Warning!',
36
+ subTitleMessage: 'Unsaved Changes.',
37
+ },
38
+ };
39
+
40
+ export const ControlledPopUp: Story = {
41
+ render: () => {
42
+ const [isOpen, setIsOpen] = useState(false);
43
+ const handleContinue = () => {
44
+ alert('Continued!');
45
+ setIsOpen(false);
46
+ };
47
+ return (
48
+ <>
49
+ <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
50
+ <PopUpModal
51
+ {...defaultArgs}
52
+ isOpen={isOpen}
53
+ onClose={() => setIsOpen(false)}
54
+ onContinue={handleContinue}
55
+ />
56
+ </>
57
+ );
58
+ },
59
+ };
60
+
61
+ export default meta;
@@ -0,0 +1,85 @@
1
+ import { FC } from 'react';
2
+ import './PopUpModal.scss';
3
+ import Modal from '../Modal';
4
+ import Icon from '../Icon';
5
+ import Typography from '../Typography';
6
+ import Button from '../Button';
7
+ import { PopUpModalProps } from './types';
8
+
9
+ const PopUpModal: FC<PopUpModalProps> = ({
10
+ isOpen,
11
+ onClose,
12
+ onContinue,
13
+ titleMessage = 'Warning!',
14
+ subTitleMessage = 'Unsaved Changes.',
15
+ iconName,
16
+ modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
17
+ footerMessage = 'How do you want to proceed?',
18
+ firstButtonLabel = 'Cancel',
19
+ secondButtonLabel = 'Continue',
20
+ buttonVariant = 'warning',
21
+ border = '1px solid var(--warning-modal-border-color)',
22
+ }) => {
23
+ return (
24
+ <Modal
25
+ overlayClassName="custom-overlay"
26
+ isOpen={isOpen}
27
+ onClose={onClose}
28
+ isHeaderDisplayed={false}
29
+ children={
30
+ <div className={'warning_modal_container'}>
31
+ <div className={'warning_modal_content'}>
32
+ <Icon
33
+ name={iconName}
34
+ className={'warning_modal_icon'}
35
+ width={94}
36
+ height={94}
37
+ />
38
+ <div className={'warning_modal_message'}>
39
+ <Typography
40
+ fontSize={20}
41
+ fontWeight="semi-bold"
42
+ className="warning_modal_title_wrapper"
43
+ >
44
+ {' '}
45
+ <Typography
46
+ color="var(--status-button-bg-warning)"
47
+ fontSize={20}
48
+ fontWeight="semi-bold"
49
+ >
50
+ {' '}
51
+ {titleMessage}{' '}
52
+ </Typography>{' '}
53
+ {subTitleMessage}
54
+ </Typography>
55
+ <div className="warning_modal_message_wrapper">
56
+ <Typography fontSize={16}>{modalMessage}</Typography>
57
+ <Typography fontSize={16}>{footerMessage}</Typography>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div className={'warning_modal_footer_button'}>
62
+ <Button
63
+ variant="secondary"
64
+ label={firstButtonLabel}
65
+ onClick={onClose}
66
+ />
67
+ <Button
68
+ variant={buttonVariant || 'warning'}
69
+ label={secondButtonLabel}
70
+ onClick={onContinue}
71
+ />
72
+ </div>
73
+ </div>
74
+ }
75
+ ariaHideApp
76
+ isFooterDisplayed={false}
77
+ customWidth="420px"
78
+ customHeight="226px"
79
+ boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
80
+ border={border}
81
+ />
82
+ );
83
+ };
84
+
85
+ export default PopUpModal;
@@ -0,0 +1,14 @@
1
+ export interface PopUpModalProps {
2
+ isOpen: boolean;
3
+ onClose: () => void;
4
+ onContinue?: () => void;
5
+ titleMessage:string,
6
+ subTitleMessage?:string,
7
+ iconName:string,
8
+ modalMessage:string,
9
+ footerMessage:string,
10
+ firstButtonLabel?:string,
11
+ secondButtonLabel:string,
12
+ buttonVariant:any,
13
+ border:string,
14
+ }
@@ -3,3 +3,10 @@
3
3
  flex-direction: row;
4
4
  gap: 12px;
5
5
  }
6
+ .ff-radio-label-wrapper {
7
+ position: relative;
8
+ top: 2px;
9
+ }
10
+ .ff-required-asterisk {
11
+ color: var(--input-error-text-color);
12
+ }
@@ -121,4 +121,30 @@ export const WithToolTipIcon: Story = {
121
121
  },
122
122
  };
123
123
 
124
+ export const WithLabelled: Story = {
125
+ render: () => {
126
+ const [selectedOption, setSelectedOption] = useState('restApi');
127
+ const radioOptions = [
128
+ { value: 'restApi', label: 'RestAPI' },
129
+ { value: 'snippets', label: 'Snippet' },
130
+ { value: 'history', label: 'History' },
131
+ ];
132
+ const handleOptionChange = (option: Option) => {
133
+ setSelectedOption(option.value);
134
+ };
135
+ return (
136
+ <RadioGroup
137
+ options={radioOptions}
138
+ onChange={handleOptionChange}
139
+ name="option"
140
+ selectedValue={selectedOption}
141
+ isAsteriskRequired
142
+ isLabel
143
+ label={'Web Services'}
144
+ classNameForLabel='ff-radio-label-wrapper'
145
+ />
146
+ );
147
+ },
148
+ };
149
+
124
150
  export default meta;
@@ -2,16 +2,32 @@ import React from 'react';
2
2
  import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
3
3
  import './RadioGroup.scss';
4
4
  import classNames from 'classnames';
5
+ import Typography from '../Typography';
5
6
 
6
7
  const RadioGroup: React.FC<RadioGroupProps> = ({
7
8
  options,
8
9
  name,
9
10
  selectedValue,
10
11
  onChange,
12
+ label,
13
+ isLabel = false,
14
+ isAsteriskRequired = false,
11
15
  className,
16
+ classNameForLabel,
12
17
  }) => {
13
18
  return (
14
19
  <div className={classNames('ff-radio-group', className)}>
20
+ {isLabel && (
21
+ <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
22
+ {' '}
23
+ {isAsteriskRequired && (
24
+ <Typography className={classNames('ff-required-asterisk')}>
25
+ *{' '}
26
+ </Typography>
27
+ )}
28
+ {label}{' '}
29
+ </Typography>
30
+ )}
15
31
  {options.map((option) => (
16
32
  <RadioButton
17
33
  key={option.value}
@@ -64,9 +64,33 @@ interface RadioGroupProps {
64
64
  */
65
65
  onChange?: (option: Option) => void;
66
66
 
67
+ /**
68
+ * Provides a label at starting position when the string is passed.
69
+ * Optional.
70
+ */
71
+ label?: string,
72
+
73
+ /**
74
+ * if isLabel is true then we can display label if not then extra space is not added.
75
+ * Optional.
76
+ */
77
+ isLabel?: boolean,
78
+
79
+ /**
80
+ * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
81
+ * Optional.
82
+ */
83
+ isAsteriskRequired?:boolean,
84
+
67
85
  /**
68
86
  * Additional class names to apply to the radio group for custom styling.
69
87
  * Optional.
70
88
  */
71
89
  className?: string;
90
+
91
+ /**
92
+ * Additional class names to apply to the radio group Label for custom styling.
93
+ * Optional.
94
+ */
95
+ classNameForLabel?:string;
72
96
  }
@@ -142,7 +142,6 @@ const Select: FC<SelectProps> = ({
142
142
  }, [showDropdownOptions]);
143
143
 
144
144
  useEffect(() => {
145
- if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
146
145
  setSearchedOption(getValue(selectedOption, valueAccessor));
147
146
  }, [selectedOption]);
148
147
 
@@ -205,8 +204,8 @@ const Select: FC<SelectProps> = ({
205
204
  className={classNames('ff-select-labels', {
206
205
  'ff-select-labels__active': searchedOption,
207
206
  })}
208
- fontSize={searchedOption && 8}
209
- lineHeight={searchedOption && '8px'}
207
+ fontSize={searchedOption || showDropdownOptions ? 8 : 12}
208
+ lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
210
209
  required={required}
211
210
  >
212
211
  {label}
@@ -51,7 +51,7 @@ const Dropdown: FC<DropdownProps> = ({
51
51
  return {
52
52
  left: positionX,
53
53
  top: positionY + heightFromTop,
54
- width: width + 28,
54
+ width: width + 30,
55
55
  zIndex: optionZIndex,
56
56
  marginLeft: '-2px',
57
57
  };
@@ -59,7 +59,7 @@ const Dropdown: FC<DropdownProps> = ({
59
59
  return {
60
60
  zIndex: optionZIndex,
61
61
  left: positionX,
62
- width: width + 28,
62
+ width: width + 30,
63
63
  top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
64
64
  marginLeft: '-2px',
65
65
  };
@@ -67,10 +67,8 @@ const Dropdown: FC<DropdownProps> = ({
67
67
 
68
68
  const getOptionLabel = (label: any) => {
69
69
  if (React.isValidElement(label)) {
70
- console.log('test');
71
70
  return label;
72
71
  }
73
- console.log('test112');
74
72
  return (
75
73
  <Typography
76
74
  as="div"
@@ -88,37 +86,39 @@ const Dropdown: FC<DropdownProps> = ({
88
86
  ref={optionsWrapperRef}
89
87
  style={updateDropdownPosition()}
90
88
  >
91
- {!checkEmpty(options) ? (
92
- options.map((option) => (
93
- <div
94
- className={classNames(
95
- 'ff-select-dropdown-option',
96
- {
97
- 'ff-select-dropdown-option__selected':
98
- getValue(option, valueAccessor) === selectedOption,
99
- },
100
- currentTheme
101
- )}
102
- key={ffid()}
103
- onClick={() => {
104
- if ('disable' in option && option['disable']) return;
105
- onSelectOptionSelector(option);
106
- }}
89
+ <div>
90
+ {!checkEmpty(options) ? (
91
+ options.map((option) => (
92
+ <div
93
+ className={classNames(
94
+ 'ff-select-dropdown-option',
95
+ {
96
+ 'ff-select-dropdown-option__selected':
97
+ getValue(option, valueAccessor) === selectedOption,
98
+ },
99
+ currentTheme
100
+ )}
101
+ key={ffid()}
102
+ onClick={() => {
103
+ if ('disable' in option && option['disable']) return;
104
+ onSelectOptionSelector(option);
105
+ }}
106
+ >
107
+ {getOptionLabel(getLabel(option, labelAccessor))}
108
+ </div>
109
+ ))
110
+ ) : (
111
+ <Typography
112
+ textAlign="center"
113
+ as="div"
114
+ lineHeight="32px"
115
+ color="var(--ff-select-text-color)"
116
+ className={classNames('ff-select-no-option', currentTheme)}
107
117
  >
108
- {getOptionLabel(getLabel(option, labelAccessor))}
109
- </div>
110
- ))
111
- ) : (
112
- <Typography
113
- textAlign="center"
114
- as="div"
115
- lineHeight="32px"
116
- color="var(--ff-select-text-color)"
117
- className={classNames('ff-select-no-option', currentTheme)}
118
- >
119
- No Results found
120
- </Typography>
121
- )}
118
+ No Results found
119
+ </Typography>
120
+ )}
121
+ </div>
122
122
  </div>
123
123
  );
124
124
  };
@@ -93,11 +93,20 @@
93
93
  .ff-scope-wrapper {
94
94
  @include item-center;
95
95
  margin-right: 12px;
96
+
97
+ .ff-scope-text {
98
+ text-transform: capitalize;
99
+ margin: 0;
100
+ }
96
101
  }
97
102
 
98
103
  .ff-datalist-wrapper {
99
104
  @include item-center;
100
105
 
106
+ #ff-sequential-machine-datalist {
107
+ @include item-center
108
+ }
109
+
101
110
  .ff-dataset-icon,
102
111
  .ff-run-delete-icon,
103
112
  .ff-datalist-text {