pixel-react 1.6.7 → 1.6.8

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 (73) hide show
  1. package/lib/components/AppHeader/types.d.ts +2 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
  4. package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
  5. package/lib/components/FileDropzone/types.d.ts +61 -0
  6. package/lib/components/MenuOption/types.d.ts +3 -2
  7. package/lib/components/Search/Search.d.ts +1 -1
  8. package/lib/components/Search/types.d.ts +4 -0
  9. package/lib/components/Table/Types.d.ts +1 -1
  10. package/lib/components/Tabs/types.d.ts +1 -0
  11. package/lib/index.d.ts +95 -23
  12. package/lib/index.esm.js +513 -294
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +514 -293
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/FormatString/FormatString.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
  20. package/src/assets/Themes/BaseTheme.scss +5 -3
  21. package/src/assets/Themes/DarkTheme.scss +5 -3
  22. package/src/assets/icons/window_maximize.svg +1 -2
  23. package/src/assets/icons/window_restore.svg +4 -0
  24. package/src/components/AppHeader/AppHeader.scss +33 -0
  25. package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
  26. package/src/components/AppHeader/AppHeader.tsx +111 -112
  27. package/src/components/AppHeader/types.ts +2 -0
  28. package/src/components/Charts/BarChart/BarChart.scss +4 -1
  29. package/src/components/Charts/BarChart/BarChart.tsx +23 -9
  30. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
  31. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
  32. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
  33. package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
  34. package/src/components/Charts/LineChart/LineChart.scss +13 -9
  35. package/src/components/Charts/LineChart/LineChart.tsx +6 -2
  36. package/src/components/DatePicker/DatePicker.scss +11 -0
  37. package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
  38. package/src/components/DatePicker/DatePicker.tsx +73 -22
  39. package/src/components/FileDropzone/Dropzone.tsx +76 -28
  40. package/src/components/FileDropzone/FileDropzone.scss +30 -2
  41. package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
  42. package/src/components/FileDropzone/FileDropzone.tsx +46 -13
  43. package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
  44. package/src/components/FileDropzone/types.ts +73 -0
  45. package/src/components/Icon/iconList.ts +2 -0
  46. package/src/components/Input/Input.scss +137 -125
  47. package/src/components/Input/Input.tsx +69 -63
  48. package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
  49. package/src/components/InputWithDropdown/types.ts +3 -3
  50. package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
  51. package/src/components/MenuOption/MenuOption.tsx +1 -1
  52. package/src/components/MenuOption/types.ts +4 -2
  53. package/src/components/ModulesChip/ModuleChip.scss +21 -8
  54. package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
  55. package/src/components/ModulesChip/ModuleChip.tsx +6 -9
  56. package/src/components/MultiSelect/Dropdown.tsx +12 -5
  57. package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
  58. package/src/components/MultiSelect/MultiSelect.tsx +10 -9
  59. package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
  60. package/src/components/Search/Search.stories.tsx +28 -9
  61. package/src/components/Search/Search.tsx +32 -29
  62. package/src/components/Search/types.ts +4 -0
  63. package/src/components/Table/Table.scss +6 -5
  64. package/src/components/Table/Types.ts +1 -1
  65. package/src/components/Tabs/Tabs.scss +58 -4
  66. package/src/components/Tabs/Tabs.stories.tsx +31 -12
  67. package/src/components/Tabs/Tabs.tsx +27 -18
  68. package/src/components/Tabs/types.ts +1 -1
  69. package/src/components/TextArea/Textarea.stories.tsx +1 -1
  70. package/src/hooks/useFileDropzone.tsx +2 -1
  71. package/src/index.ts +4 -0
  72. package/src/utils/FormatString/FormatString.stories.tsx +58 -0
  73. package/src/utils/FormatString/FormatString.tsx +41 -0
@@ -19,9 +19,9 @@ export interface InputWithDropdownProps {
19
19
  /**
20
20
  * value | input field value
21
21
  */
22
- value?: string | number
22
+ value?: string | number;
23
23
 
24
- type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'
24
+ type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
25
25
 
26
26
  /**
27
27
  * variants to set color/style of the input field
@@ -109,5 +109,5 @@ export interface InputWithDropdownProps {
109
109
  */
110
110
  optionsRequired?: boolean;
111
111
 
112
- dropdownPosition?: 'left' | 'right'
112
+ dropdownPosition?: 'left' | 'right';
113
113
  }
@@ -1,7 +1,8 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import MenuOption from './MenuOption';
3
3
  import './MenuOption.scss';
4
- import React from 'react';
4
+ import React, { ReactNode } from 'react';
5
+ import Icon from '../Icon';
5
6
 
6
7
  const meta: Meta<typeof MenuOption> = {
7
8
  title: 'Components/MenuOption',
@@ -48,7 +49,7 @@ const meta: Meta<typeof MenuOption> = {
48
49
  type Story = StoryObj<typeof MenuOption>;
49
50
 
50
51
  const options = [
51
- { label: 'Option 1', value: 'opt1', icon: 'success' },
52
+ { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
52
53
  { label: 'Option 2', value: 'opt2', icon: 'success' },
53
54
  {
54
55
  label: 'Delete',
@@ -58,7 +59,7 @@ const options = [
58
59
  },
59
60
  ];
60
61
 
61
- const handleOptionClick = (option: { label: string }) => {
62
+ const handleOptionClick = (option: { label: string|ReactNode }) => {
62
63
  alert(`Option clicked: ${option.label}`);
63
64
  };
64
65
 
@@ -106,7 +106,7 @@ const OptionCard = ({
106
106
  ref={optionCardRef}
107
107
  >
108
108
  {options.map((opt) => (
109
- <Option key={opt.label} option={opt} onClick={onClick} />
109
+ <Option key={opt.value} option={opt} onClick={onClick} />
110
110
  ))}
111
111
  </div>,
112
112
  document.body
@@ -1,10 +1,12 @@
1
+ import { ReactNode } from "react";
2
+
1
3
  interface OptionClick {
2
4
  /**
3
5
  * The label displayed for the option.
4
6
  * @type {string}
5
7
  * @required
6
8
  */
7
- label: string;
9
+ label: string |ReactNode;
8
10
 
9
11
  /**
10
12
  * The value(s) associated with the option, which can be a single string or an array of strings.
@@ -24,7 +26,7 @@ interface OptionType extends OptionClick {
24
26
 
25
27
  iconColor?: string;
26
28
 
27
- name?: string;
29
+ name?: string | ReactNode;
28
30
 
29
31
  /**
30
32
  * Indicates whether the option is disabled.
@@ -2,19 +2,32 @@
2
2
  @use '../../assets/styles/mixins';
3
3
 
4
4
  .ff-Module-chip {
5
- width: 75px;
6
- height: 32px;
7
- border: 0.5px solid;
5
+ width: 68px;
6
+ height: 30px;
7
+ color: var(--table-column-text-color);
8
+ border: 1px solid var(--ff-editor-line-bg);
8
9
  border-radius: 16px;
9
- color: var(--brand-color);
10
10
  cursor: pointer;
11
11
  @include mixins.center-content();
12
- .ff-Module-label-chip {
13
- &--active {
14
- color: var(--ff-header-text-color);
15
- }
12
+ .module-typography {
13
+ color: var(--table-column-text-color);
16
14
  }
17
15
  &--active {
16
+ border: 0.5px solid var(--brand-color);
18
17
  background: var(--brand-color);
18
+ .module-typography {
19
+ color: var(--base-bg-color);
20
+ font-weight: 600;
21
+ }
22
+ }
23
+ &--hover {
24
+ &:hover {
25
+ border: 0.5px solid var(--brand-color);
26
+ background-color: var(--hover-color);
27
+ .module-typography {
28
+ color: var(--table-column-text-color);
29
+ font-weight: 600;
30
+ }
31
+ }
19
32
  }
20
33
  }
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import ModuleChip from './ModuleChip';
3
4
  import { useState } from 'react';
@@ -6,7 +7,7 @@ const meta: Meta<typeof ModuleChip> = {
6
7
  title: 'Components/ModuleChip',
7
8
  component: ModuleChip,
8
9
  parameters: {
9
- layout: 'center',
10
+ layout: 'centered',
10
11
  },
11
12
  argTypes: {
12
13
  isActive: Boolean,
@@ -18,7 +19,6 @@ type Story = StoryObj<typeof ModuleChip>;
18
19
 
19
20
  const defaultArgs = {
20
21
  label: 'Modules',
21
- isActive: false,
22
22
  };
23
23
 
24
24
  export const Controlled: Story = {
@@ -12,18 +12,15 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
12
12
  <div
13
13
  className={classNames('ff-Module-chip', {
14
14
  'ff-Module-chip--active': isActive,
15
+ 'ff-Module-chip--hover': !isActive,
15
16
  })}
16
17
  onClick={onClick}
17
18
  >
18
- <div
19
- className={classNames(`ff-Module-label-chip `, {
20
- 'ff-Module-label-chip--active': isActive,
21
- })}
22
- >
23
- <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
24
- {label}
25
- </Typography>
26
- </div>
19
+ <Typography
20
+ lineHeight="18px"
21
+ className="module-typography"
22
+ children={label}
23
+ />
27
24
  </div>
28
25
  );
29
26
  };
@@ -9,7 +9,7 @@ import Typography from '../Typography';
9
9
  import Checkbox from '../Checkbox';
10
10
  import Tooltip from '../Tooltip';
11
11
  import { truncateText } from '../../utils/truncateText/truncateText';
12
- import { getLabel } from '../../utils/getSelectOptionValue/getSelectOptionValue';
12
+ import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
13
13
 
14
14
  const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
15
15
  (
@@ -20,13 +20,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
20
20
  dropdownPosition = {},
21
21
  zIndex,
22
22
  withSelectButton,
23
- labelAccessor,
23
+ labelAccessor='label',
24
+ valueAccessor='value'
24
25
  },
25
26
  ref
26
27
  ) => {
27
28
  const filteredOptions = options
28
29
  ? options.filter((option) =>
29
- getLabel(option, labelAccessor)
30
+ getValue(option, valueAccessor)
30
31
  ?.toLowerCase()
31
32
  .includes(searchedKeyword.toLowerCase())
32
33
  )
@@ -38,6 +39,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
38
39
  e.stopPropagation();
39
40
  handleOptionChange({}, false);
40
41
  };
42
+ const renderOption=(info:any, labelAccessor:string)=>{
43
+ if(typeof info[labelAccessor] ==='string'){
44
+ return truncateText(getLabel(info, labelAccessor), 25)
45
+ }
46
+ return info[labelAccessor]
47
+ }
41
48
  const topPosition = useMemo(() => {
42
49
  let calculatedDropdownHeight = Math.min(
43
50
  filteredOptions.length * optionHeight,
@@ -107,14 +114,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
107
114
  <Tooltip
108
115
  zIndex={zIndex + 1}
109
116
  title={
110
- getLabel(info, labelAccessor).length > 25
117
+ typeof info[labelAccessor]==='string' && getLabel(info, labelAccessor)?.length > 25
111
118
  ? getLabel(info, labelAccessor)
112
119
  : ''
113
120
  }
114
121
  children={
115
122
  <Typography
116
123
  className="dropdown-option-label"
117
- children={truncateText(getLabel(info, labelAccessor), 25)}
124
+ children={renderOption(info,labelAccessor)}
118
125
  />
119
126
  }
120
127
  />
@@ -80,11 +80,7 @@ export const NameAccessor: Story = {
80
80
  },
81
81
  };
82
82
 
83
- export const Default3: Story = {
84
- args: {
85
- ...defaultArgs,
86
- },
87
- };
83
+
88
84
  export const EmailGroup: Story = {
89
85
  render: () => {
90
86
  const [options, setOptions] = useState([
@@ -124,6 +120,7 @@ export const EmailGroup: Story = {
124
120
  acceptNewOption={true}
125
121
  displayCount={true}
126
122
  labelAccessor="label"
123
+ valueAccessor='value'
127
124
  onEnter={onEnter}
128
125
  />
129
126
  );
@@ -234,19 +231,19 @@ export const Machines: Story = {
234
231
  render: () => {
235
232
  const [options] = useState<Option[]>([
236
233
  {
237
- label: 'Machine 1',
234
+ label: <h2>Machine 1</h2>,
238
235
  value: 'machine 1',
239
236
  },
240
237
  {
241
- label: 'Machine 2',
238
+ label: <h2>Machine 2</h2>,
242
239
  value: 'machine 2',
243
240
  },
244
241
  {
245
- label: 'Machine 3',
242
+ label: <h2>Machine 3</h2>,
246
243
  value: 'machine 3',
247
244
  },
248
245
  {
249
- label: 'Machine 4',
246
+ label: <h2>Machine 4</h2>,
250
247
  value: 'machine 4',
251
248
  },
252
249
  ]);
@@ -265,6 +262,8 @@ export const Machines: Story = {
265
262
  key={index}
266
263
  label="Machines"
267
264
  variant="machines"
265
+ // labelAccessor='label'
266
+ // valueAccessor='value'
268
267
  options={options}
269
268
  onSelectButtonClick={handleSelectChange}
270
269
  highlightedMachine={machine.label}
@@ -273,6 +272,8 @@ export const Machines: Story = {
273
272
  ))}
274
273
  <MultiSelect
275
274
  label="Machines"
275
+ labelAccessor='label'
276
+ valueAccessor='value'
276
277
  withSelectButton
277
278
  options={options}
278
279
  onSelectButtonClick={handleSelectChange}
@@ -284,4 +285,6 @@ export const Machines: Story = {
284
285
  },
285
286
  };
286
287
 
288
+
289
+
287
290
  export default meta;
@@ -38,7 +38,8 @@ const ChipElement = ({
38
38
  zIndex={zIndex + 1}
39
39
  >
40
40
  <Typography fontSize={10} lineHeight={'14px'} className="stye">
41
- {truncateText(label, 25)}
41
+
42
+ {typeof label==='string'? truncateText(label, 25):label}
42
43
  </Typography>
43
44
  </Tooltip>
44
45
  </span>
@@ -73,9 +74,9 @@ const MultiSelect = ({
73
74
  onManageLabelsClick = () => { },
74
75
  className = '',
75
76
  highlightedMachine = '',
76
- onSelectButtonClick = () => { },
77
- labelAccessor = '',
78
- valueAccessor = labelAccessor,
77
+ onSelectButtonClick = () => {},
78
+ labelAccessor = 'label',
79
+ valueAccessor = 'value',
79
80
  withSelectButton = variant === 'machines' ? true : false,
80
81
  onEnter = () => { },
81
82
  }: MultiSelectProps) => {
@@ -203,7 +204,7 @@ const MultiSelect = ({
203
204
  if (input.length > 2) {
204
205
  const matchedOption = allOptions.find(
205
206
  (option) =>
206
- getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase()
207
+ getLabel(option, valueAccessor)?.toLowerCase() === input.toLowerCase()
207
208
  );
208
209
  setDisplayIcon(!matchedOption);
209
210
  } else {
@@ -256,10 +257,10 @@ const MultiSelect = ({
256
257
  };
257
258
  }, [isOpen]);
258
259
  useEffect(() => {
259
- if (!checkEmpty(options?.length)) {
260
- let initializeOptions = options;
261
- if (!checkEmpty(selectedOptions?.length)) {
262
- initializeOptions = options.map((option) => ({
260
+ if (!checkEmpty(options)) {
261
+ let initializeOptions=options;
262
+ if(!checkEmpty(selectedOptions)){
263
+ initializeOptions = options.map((option) => ({
263
264
  ...option,
264
265
  isChecked: selectedOptions.some(
265
266
  (selectedOption) =>
@@ -24,7 +24,7 @@ const defaultArgs = {
24
24
  secondButtonLabel: "Continue",
25
25
  buttonVariant: "warning",
26
26
  border: '1px solid var(--warning-modal-border-color)',
27
- colorForTitleMessage: 'var(--select-license-header-text-color)'
27
+ colorForTitleMessage: 'var(--status-button-bg-warning)'
28
28
  }
29
29
 
30
30
  export const DefaultModal: Story = {
@@ -1,6 +1,6 @@
1
-
2
1
  import type { Meta, StoryObj } from '@storybook/react';
3
2
  import Search from './Search';
3
+ import React,{ useState } from 'react';
4
4
  const meta: Meta<typeof Search> = {
5
5
  title: 'Components/Search',
6
6
  component: Search,
@@ -11,15 +11,34 @@ const meta: Meta<typeof Search> = {
11
11
  };
12
12
 
13
13
  type Story = StoryObj<typeof Search>;
14
- const defaultArgs = {
15
- placeholder: 'Search',
16
- onSearch: (query: string) => alert(`Searching for: ${query}`),
17
- disabled: false,
18
- width: 200,
19
- };
20
14
  export const Default: Story = {
21
- args: {
22
- ...defaultArgs,
15
+ render: () => {
16
+ const [isExpand, setIsExpand] = useState(false);
17
+ const [searchValue, setSearchValue] = useState('');
18
+
19
+ const handleSearch = (value: string) => {
20
+ alert(`Searching for: ${value}`);
21
+ setSearchValue(value);
22
+ };
23
+
24
+ const handleClose = () => {
25
+ setIsExpand(false);
26
+ setSearchValue('');
27
+ };
28
+ return (
29
+ <div>
30
+ <Search
31
+ placeholder="Search here..."
32
+ isExpand={isExpand}
33
+ value={searchValue}
34
+ onSearch={handleSearch}
35
+ onExpand={(expand) => setIsExpand(expand)}
36
+ onClose={handleClose}
37
+ disabled={false}
38
+ width={200}
39
+ />
40
+ </div>
41
+ );
23
42
  },
24
43
  };
25
44
 
@@ -7,22 +7,29 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
7
7
  import Typography from '../Typography';
8
8
  import Tooltip from '../Tooltip';
9
9
 
10
-
11
10
  const Search = ({
12
11
  placeholder = 'Search',
13
12
  onSearch,
14
13
  disabled = false,
15
14
  width = 150,
15
+ value = '',
16
+ isExpand = false,
17
+ onClose,
18
+ onExpand,
16
19
  }: SearchProps) => {
17
- const [isExpanded, setIsExpanded] = useState<boolean>(false);
18
- const [searchValue, setSearchValue] = useState<string>('');
20
+ const [searchValue, setSearchValue] = useState<string>(value);
19
21
  const inputRef = useRef<HTMLInputElement>(null);
20
22
 
21
23
  useEffect(() => {
22
- if (isExpanded && inputRef.current) {
24
+ if (isExpand && inputRef.current) {
23
25
  inputRef.current.focus();
24
26
  }
25
- }, [isExpanded]);
27
+ setSearchValue('');
28
+ }, [isExpand]);
29
+
30
+ useEffect(() => {
31
+ setSearchValue(value);
32
+ }, [value]);
26
33
 
27
34
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
28
35
  if (event.key === 'Enter' && !checkEmpty(searchValue)) {
@@ -31,72 +38,67 @@ const Search = ({
31
38
  handleSearchClearAndClose('Close');
32
39
  }
33
40
  };
34
- const onChange = (value: string) => {
35
- setSearchValue(value);
36
- if (value === '') {
37
- onSearch('');
38
- }
39
- };
40
- const handleIconClick = () => {
41
- setIsExpanded(!disabled);
42
- };
41
+
43
42
  const handleSearchClearAndClose = (label: string) => {
44
43
  setSearchValue('');
45
44
  onSearch('');
46
45
  if (label === 'Close') {
47
- setIsExpanded(false);
46
+ onClose?.();
48
47
  }
49
- if (label === 'Clear' && isExpanded && inputRef.current) {
48
+ if (label === 'Clear' && isExpand && inputRef.current) {
50
49
  inputRef.current.focus();
51
50
  }
52
51
  };
53
52
 
53
+ const handleIconClick = () => {
54
+ if (!disabled) {
55
+ onExpand?.(!isExpand);
56
+ }
57
+ };
58
+
54
59
  return (
55
60
  <div
56
61
  className={classNames('ff-search-container', {
57
- expanded: isExpanded,
62
+ expanded: isExpand,
58
63
  disabled: disabled,
59
64
  })}
60
65
  >
61
66
  <div
62
- className={classNames('ff-search-icon', { expanded: isExpanded })}
67
+ className={classNames('ff-search-icon', { expanded: isExpand })}
63
68
  onClick={handleIconClick}
64
69
  >
65
70
  <Tooltip title="Search">
66
71
  <Icon
67
72
  name="search"
68
- height={isExpanded ? 14 : 16}
69
- width={isExpanded ? 14 : 16}
73
+ height={isExpand ? 14 : 16}
74
+ width={isExpand ? 14 : 16}
70
75
  />
71
76
  </Tooltip>
72
77
  </div>
73
78
  <div
74
79
  className={classNames('ff-vertical-line', {
75
- expanded: isExpanded,
80
+ expanded: isExpand,
76
81
  })}
77
82
  ></div>
78
83
  <input
79
84
  className="ff-search-input"
80
85
  name="input"
81
- style={{ width: isExpanded ? `${width}px` : '0px' }}
86
+ style={{ width: isExpand ? `${width}px` : '0px' }}
82
87
  placeholder={placeholder}
83
88
  type="text"
84
89
  value={searchValue}
85
90
  disabled={disabled}
86
91
  ref={inputRef}
87
- onChange={(e) => {
88
- onChange(e.target.value);
89
- }}
92
+ autoComplete="off"
93
+ onChange={(e) => setSearchValue(e.target.value)}
90
94
  onKeyDown={handleKeyDown}
91
95
  />
92
96
 
93
- {isExpanded && (
97
+ {isExpand && (
94
98
  <>
95
99
  <div
96
100
  className="ff-search-clear-button"
97
- onClick={() => {
98
- handleSearchClearAndClose('Clear');
99
- }}
101
+ onClick={() => handleSearchClearAndClose('Clear')}
100
102
  >
101
103
  {searchValue !== '' && (
102
104
  <Typography
@@ -124,4 +126,5 @@ const Search = ({
124
126
  </div>
125
127
  );
126
128
  };
129
+
127
130
  export default Search;
@@ -12,4 +12,8 @@ export interface SearchProps {
12
12
  */
13
13
  disabled?: boolean;
14
14
  width?: number;
15
+ value: string;
16
+ isExpand: boolean;
17
+ onClose: () => void;
18
+ onExpand: (isExpand: boolean) => void;
15
19
  }
@@ -1,5 +1,3 @@
1
-
2
-
3
1
  .ff-fixed-header-table {
4
2
  overflow-y: auto;
5
3
  }
@@ -24,8 +22,8 @@
24
22
  th {
25
23
  border-bottom: 1px solid var(--slider-table-color);
26
24
  }
27
- th{
28
- .ff-label-checkbox-container{
25
+ th {
26
+ .ff-label-checkbox-container {
29
27
  display: flex;
30
28
  align-items: center;
31
29
  .ff-table-checkbox {
@@ -64,7 +62,7 @@
64
62
  cursor: pointer;
65
63
  }
66
64
  }
67
- td{
65
+ td {
68
66
  .ff-data-checkbox-container {
69
67
  display: flex;
70
68
  align-items: center;
@@ -81,6 +79,9 @@
81
79
  .secondary-bg {
82
80
  background-color: var(--slider-table-color);
83
81
  }
82
+ .tertiary-bg {
83
+ background-color: var(--custom-table-header-bg-color);
84
+ }
84
85
  .default-bg {
85
86
  background-color: transparent;
86
87
  }
@@ -48,7 +48,7 @@ export interface TableProps {
48
48
  /**
49
49
  * Header type to have different background color
50
50
  */
51
- headerType: 'default' | 'primary' | 'secondary';
51
+ headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
52
52
  /**
53
53
  * withFixedHeader prop to have non-scrollable fixed table header
54
54
  */