pixel-react 1.6.5 → 1.6.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/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/types.d.ts +12 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Checkbox/types.d.ts +4 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/Comment/Comments.d.ts +4 -0
- package/lib/components/Comment/comment/Comment.d.ts +11 -0
- package/lib/components/Comment/comment/useNode.d.ts +7 -0
- package/lib/components/Comment/index.d.ts +1 -0
- package/lib/components/Comment/type.d.ts +25 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Editor/constants.d.ts +1 -1
- package/lib/components/Editor/types.d.ts +10 -2
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.d.ts +1 -2
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconButton/types.d.ts +1 -1
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.d.ts +1 -1
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/PhoneInput/PhoneInput.d.ts +6 -0
- package/lib/components/PhoneInput/index.d.ts +1 -0
- package/lib/components/PhoneInput/types.d.ts +10 -0
- package/lib/components/PopUpModal/types.d.ts +1 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/TableWithAccordion/TableWithAccordion.d.ts +5 -0
- package/lib/components/TableWithAccordion/data.d.ts +8 -0
- package/lib/components/TableWithAccordion/index.d.ts +1 -0
- package/lib/components/TableWithAccordion/types.d.ts +67 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +186 -12
- package/lib/index.esm.js +2842 -385
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +2846 -384
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +2 -1
- package/src/assets/Themes/BaseTheme.scss +9 -0
- package/src/assets/Themes/DarkTheme.scss +62 -41
- package/src/assets/icons/add_file.svg +4 -17
- package/src/assets/icons/add_variable.svg +11 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/authorization.svg +4 -0
- package/src/assets/icons/capture_icon.svg +2 -5
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/depends_on_script.svg +7 -0
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/email_group.svg +3 -0
- package/src/assets/icons/executions_icon.svg +3 -0
- package/src/assets/icons/labels.svg +8 -0
- package/src/assets/icons/machine_disable_icon.svg +18 -0
- package/src/assets/icons/machine_enable_icon.svg +10 -0
- package/src/assets/icons/parameters.svg +3 -0
- package/src/assets/icons/pre_post_condition.svg +8 -0
- package/src/assets/icons/program_element.svg +8 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/suites_icon.svg +3 -0
- package/src/assets/icons/tap_icon.svg +3 -3
- package/src/assets/icons/test_data.svg +5 -0
- package/src/assets/icons/test_data_set.svg +7 -0
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/variable_set.svg +5 -0
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +4 -0
- package/src/components/Accordion/Accordion.tsx +7 -1
- package/src/components/Accordion/types.ts +12 -0
- package/src/components/AddVariables/AddVariables.scss +14 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
- package/src/components/AddVariables/AddVariables.tsx +113 -0
- package/src/components/AddVariables/index.ts +1 -0
- package/src/components/AddVariables/types.ts +36 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/types.ts +8 -9
- package/src/components/Checkbox/Checkbox.scss +57 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +91 -15
- package/src/components/Checkbox/Checkbox.tsx +4 -1
- package/src/components/Checkbox/types.ts +4 -0
- package/src/components/Comment/Comments.scss +166 -0
- package/src/components/Comment/Comments.stories.tsx +212 -0
- package/src/components/Comment/Comments.tsx +51 -0
- package/src/components/Comment/comment/Comment.tsx +206 -0
- package/src/components/Comment/comment/useNode.ts +51 -0
- package/src/components/Comment/index.ts +1 -0
- package/src/components/Comment/type.ts +36 -0
- package/src/components/Drawer/Drawer.scss +2 -1
- package/src/components/Editor/Editor.stories.tsx +2 -2
- package/src/components/Editor/Editor.tsx +4 -2
- package/src/components/Editor/VariableDropdown.scss +8 -2
- package/src/components/Editor/VariableDropdown.tsx +15 -7
- package/src/components/Editor/constants.ts +1 -1
- package/src/components/Editor/types.ts +12 -2
- package/src/components/FieldSet/FieldSet.scss +2 -1
- package/src/components/FieldSet/FieldSet.stories.tsx +2 -1
- package/src/components/Icon/iconList.ts +29 -2
- package/src/components/IconButton/IconButton.stories.tsx +1 -0
- package/src/components/IconButton/IconButton.tsx +5 -8
- package/src/components/IconButton/types.ts +2 -2
- package/src/components/IconRadioGroup/IconRadioGroup.scss +2 -1
- package/src/components/Input/Input.tsx +99 -88
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +1 -1
- package/src/components/Modal/Modal.stories.tsx +2 -1
- package/src/components/MultiSelect/MultiSelect.scss +29 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +19 -5
- package/src/components/MultiSelect/MultiSelect.tsx +29 -19
- package/src/components/PhoneInput/PhoneInput.d.ts +3 -0
- package/src/components/PhoneInput/PhoneInput.stories.tsx +95 -0
- package/src/components/PhoneInput/PhoneInput.tsx +90 -0
- package/src/components/PhoneInput/index.ts +1 -0
- package/src/components/PhoneInput/phoneInput.scss +3 -0
- package/src/components/PhoneInput/types.ts +10 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +14 -13
- package/src/components/PopUpModal/PopUpModal.tsx +2 -1
- package/src/components/PopUpModal/types.ts +14 -13
- package/src/components/Select/Select.stories.tsx +2 -2
- package/src/components/TableWithAccordion/TableWithAccordion.scss +54 -0
- package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx +94 -0
- package/src/components/TableWithAccordion/TableWithAccordion.tsx +174 -0
- package/src/components/TableWithAccordion/data.ts +37 -0
- package/src/components/TableWithAccordion/index.ts +1 -0
- package/src/components/TableWithAccordion/types.ts +70 -0
- package/src/components/Tabs/Tabs.scss +0 -1
- package/src/index.ts +12 -1
- package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
- package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
- package/lib/components/TableTree/TableTree copy.d.ts +0 -25
@@ -87,7 +87,7 @@ export const Default3: Story = {
|
|
87
87
|
};
|
88
88
|
export const EmailGroup: Story = {
|
89
89
|
render: () => {
|
90
|
-
const [options,setOptions] = useState([
|
90
|
+
const [options, setOptions] = useState([
|
91
91
|
{
|
92
92
|
label: 'Sample1@gmail.com',
|
93
93
|
value: 'sample1@gmail.com',
|
@@ -109,9 +109,9 @@ export const EmailGroup: Story = {
|
|
109
109
|
) => {
|
110
110
|
setSelectedOptions(options);
|
111
111
|
};
|
112
|
-
const onEnter=(newOption:string)=>{
|
113
|
-
setOptions(prev=>[...prev,{label:newOption,value:newOption}])
|
114
|
-
setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
|
112
|
+
const onEnter = (newOption: string) => {
|
113
|
+
setOptions(prev => [...prev, { label: newOption, value: newOption }])
|
114
|
+
setSelectedOptions(prev => [...prev, { label: newOption, value: newOption }])
|
115
115
|
}
|
116
116
|
return (
|
117
117
|
<MultiSelect
|
@@ -153,8 +153,21 @@ export const Controlled: Story = {
|
|
153
153
|
{ label: 'Kiwi', value: 'kiwi' },
|
154
154
|
{ label: 'Mango', value: 'mango' },
|
155
155
|
{ label: 'Orange', value: 'orange' },
|
156
|
-
{ label: '
|
156
|
+
{ label: 'Plum', value: 'plum' },
|
157
|
+
{ label: 'Berry', value: 'berry' },
|
158
|
+
{ label: 'Watermelon', value: 'watermelon' },
|
159
|
+
{ label: 'Guava', value: 'guava' },
|
160
|
+
{ label: 'Pineapple', value: 'pineapple' },
|
157
161
|
{ label: 'Strawberry', value: 'strawberry' },
|
162
|
+
{ label: 'Pear', value: 'pear' },
|
163
|
+
{ label: 'Peach', value: 'peach' },
|
164
|
+
{ label: 'Lemon', value: 'lemon' },
|
165
|
+
{ label: 'Papaya', value: 'papaya' },
|
166
|
+
{ label: 'Apricot', value: 'apricot' },
|
167
|
+
{ label: 'Raspberry', value: 'raspberry' },
|
168
|
+
{ label: 'Pomegranate', value: 'pomegranate' },
|
169
|
+
{ label: 'Cantaloupe', value: 'cantaloupe' },
|
170
|
+
{ label: 'Lychee', value: 'lychee' }
|
158
171
|
]);
|
159
172
|
}, []);
|
160
173
|
return (
|
@@ -162,6 +175,7 @@ export const Controlled: Story = {
|
|
162
175
|
label={'Fruits'}
|
163
176
|
required
|
164
177
|
options={options}
|
178
|
+
displayCount
|
165
179
|
selectedOptions={selectedOptions}
|
166
180
|
onChange={onChange}
|
167
181
|
/>
|
@@ -29,9 +29,8 @@ const ChipElement = ({
|
|
29
29
|
return (
|
30
30
|
<div className="ff-multiselect-chip">
|
31
31
|
<span
|
32
|
-
className={`ff-multiselect-chip-label ${
|
33
|
-
|
34
|
-
}`}
|
32
|
+
className={`ff-multiselect-chip-label ${disableChip && 'label-padding'
|
33
|
+
}`}
|
35
34
|
>
|
36
35
|
<Tooltip
|
37
36
|
placement="bottom"
|
@@ -59,26 +58,26 @@ const MultiSelect = ({
|
|
59
58
|
options = [],
|
60
59
|
type = 'text',
|
61
60
|
selectedOptions = [],
|
62
|
-
onChange = () => {},
|
61
|
+
onChange = () => { },
|
63
62
|
acceptNewOption = false,
|
64
63
|
zIndex = 100,
|
65
64
|
label = '',
|
66
|
-
onSearch = () => {},
|
65
|
+
onSearch = () => { },
|
67
66
|
required = false,
|
68
67
|
disabled = false,
|
69
68
|
errorMessage = 'Fill this field',
|
70
|
-
displayCount = false,
|
69
|
+
displayCount: initialDisplayCount = false,
|
71
70
|
placeholderForSearching = 'Search',
|
72
71
|
variant = 'default',
|
73
|
-
onLabelPlusIconClick = () => {},
|
74
|
-
onManageLabelsClick = () => {},
|
72
|
+
onLabelPlusIconClick = () => { },
|
73
|
+
onManageLabelsClick = () => { },
|
75
74
|
className = '',
|
76
75
|
highlightedMachine = '',
|
77
|
-
onSelectButtonClick = () => {},
|
76
|
+
onSelectButtonClick = () => { },
|
78
77
|
labelAccessor = '',
|
79
78
|
valueAccessor = labelAccessor,
|
80
79
|
withSelectButton = variant === 'machines' ? true : false,
|
81
|
-
onEnter=()=>{}
|
80
|
+
onEnter = () => { },
|
82
81
|
}: MultiSelectProps) => {
|
83
82
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
84
83
|
const [allOptions, setAllOptions] = useState(options);
|
@@ -88,6 +87,8 @@ const MultiSelect = ({
|
|
88
87
|
useState<boolean>(false);
|
89
88
|
const [inputError, setInputError] = useState<string>('');
|
90
89
|
const [displayIcon, setDisplayIcon] = useState<boolean>(false);
|
90
|
+
const [displayCount, setDisplayCount] =
|
91
|
+
useState<boolean>(initialDisplayCount);
|
91
92
|
|
92
93
|
const [dropdownPosition, setDropdownPosition] = useState<{
|
93
94
|
top: number;
|
@@ -109,7 +110,7 @@ const MultiSelect = ({
|
|
109
110
|
|
110
111
|
let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
|
111
112
|
|
112
|
-
const maxVisibleChips =
|
113
|
+
const maxVisibleChips = 12;
|
113
114
|
const hiddenCount = selectedOptions.length - maxVisibleChips;
|
114
115
|
|
115
116
|
const handleClick = () => {
|
@@ -132,7 +133,7 @@ const MultiSelect = ({
|
|
132
133
|
inputRef.current?.focus();
|
133
134
|
const updatedOptions = allOptions.map((option) =>
|
134
135
|
getValue(option, valueAccessor) ===
|
135
|
-
|
136
|
+
getValue(selectedOption, valueAccessor)
|
136
137
|
? { ...option, isChecked }
|
137
138
|
: option
|
138
139
|
);
|
@@ -169,7 +170,7 @@ const MultiSelect = ({
|
|
169
170
|
return;
|
170
171
|
}
|
171
172
|
}
|
172
|
-
|
173
|
+
onEnter?.(searchedKeyword);
|
173
174
|
setSearchedKeyword('');
|
174
175
|
setIsOpen(false);
|
175
176
|
}
|
@@ -209,10 +210,16 @@ const MultiSelect = ({
|
|
209
210
|
setDisplayIcon(false);
|
210
211
|
}
|
211
212
|
};
|
213
|
+
|
214
|
+
const handleHiddenChips = () => {
|
215
|
+
setIsOpen(false);
|
216
|
+
setDisplayCount(false);
|
217
|
+
};
|
212
218
|
useEffect(() => {
|
213
219
|
const rect = dropdownWrapper.current?.getBoundingClientRect();
|
214
220
|
setDropdownPosition((prev) => ({ ...prev, width: rect?.width as number }));
|
215
221
|
}, [displayIcon]);
|
222
|
+
|
216
223
|
useEffect(() => {
|
217
224
|
if (isOpen) {
|
218
225
|
calculatePosition();
|
@@ -250,14 +257,14 @@ const MultiSelect = ({
|
|
250
257
|
}, [isOpen]);
|
251
258
|
useEffect(() => {
|
252
259
|
if (!checkEmpty(options?.length)) {
|
253
|
-
let initializeOptions=options;
|
254
|
-
if(!checkEmpty(selectedOptions?.length)){
|
255
|
-
|
260
|
+
let initializeOptions = options;
|
261
|
+
if (!checkEmpty(selectedOptions?.length)) {
|
262
|
+
initializeOptions = options.map((option) => ({
|
256
263
|
...option,
|
257
264
|
isChecked: selectedOptions.some(
|
258
265
|
(selectedOption) =>
|
259
266
|
getValue(selectedOption, valueAccessor) ===
|
260
|
-
|
267
|
+
getValue(option, valueAccessor)
|
261
268
|
),
|
262
269
|
}));
|
263
270
|
}
|
@@ -392,7 +399,10 @@ const MultiSelect = ({
|
|
392
399
|
)}
|
393
400
|
</div>
|
394
401
|
{hiddenCount > 0 && displayCount && (
|
395
|
-
<div
|
402
|
+
<div
|
403
|
+
className="ff-multiselect-more-chip"
|
404
|
+
onClick={handleHiddenChips}
|
405
|
+
>
|
396
406
|
<Typography
|
397
407
|
fontSize={12}
|
398
408
|
fontWeight="semi-bold"
|
@@ -431,7 +441,7 @@ const MultiSelect = ({
|
|
431
441
|
className="error-text"
|
432
442
|
/>
|
433
443
|
)}
|
434
|
-
{displayIcon && variant==='labels' && (
|
444
|
+
{displayIcon && variant === 'labels' && (
|
435
445
|
<Typography
|
436
446
|
onClick={onManageLabelsClick}
|
437
447
|
fontSize={8}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import { PhoneInputProps } from './types';
|
3
|
+
import PhoneInputField from './PhoneInput';
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: 'Components/PhoneInputComponent',
|
7
|
+
component: PhoneInputField,
|
8
|
+
};
|
9
|
+
|
10
|
+
const Template = ({
|
11
|
+
value,
|
12
|
+
country,
|
13
|
+
width,
|
14
|
+
onChange,
|
15
|
+
placeholder,
|
16
|
+
onFocus,
|
17
|
+
onBlur,
|
18
|
+
isValid,
|
19
|
+
}: PhoneInputProps) => {
|
20
|
+
const [phone, setPhone] = useState<string>(value || '');
|
21
|
+
const [valid, setValid] = useState(true);
|
22
|
+
|
23
|
+
const handlePhoneChange = (newPhone: string) => {
|
24
|
+
setPhone(newPhone);
|
25
|
+
const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
|
26
|
+
const phoneIsValid = newPhone.length === validPhoneNumberLength;
|
27
|
+
setValid(phoneIsValid);
|
28
|
+
onChange(newPhone);
|
29
|
+
};
|
30
|
+
|
31
|
+
return (
|
32
|
+
<PhoneInputField
|
33
|
+
value={phone}
|
34
|
+
country={country}
|
35
|
+
onChange={handlePhoneChange}
|
36
|
+
width={width}
|
37
|
+
placeholder={placeholder}
|
38
|
+
onFocus={onFocus}
|
39
|
+
onBlur={onBlur}
|
40
|
+
isValid={valid}
|
41
|
+
/>
|
42
|
+
);
|
43
|
+
};
|
44
|
+
|
45
|
+
// Default story
|
46
|
+
export const Default = Template.bind({});
|
47
|
+
Default.args = {
|
48
|
+
country: 'IN',
|
49
|
+
value: '9134567890',
|
50
|
+
width: '400px',
|
51
|
+
placeholder: 'Enter phone number',
|
52
|
+
onChange: () => {},
|
53
|
+
onFocus: () => {},
|
54
|
+
onBlur: () => {},
|
55
|
+
isValid: true,
|
56
|
+
};
|
57
|
+
|
58
|
+
// Story with initial value
|
59
|
+
export const WithInitialValue = Template.bind({});
|
60
|
+
WithInitialValue.args = {
|
61
|
+
country: 'IN',
|
62
|
+
value: '9176543210',
|
63
|
+
width: '300px',
|
64
|
+
onChange: () => {},
|
65
|
+
placeholder: 'Enter phone number',
|
66
|
+
onFocus: () => {},
|
67
|
+
onBlur: () => {},
|
68
|
+
isValid: true,
|
69
|
+
};
|
70
|
+
|
71
|
+
// Story with a custom country
|
72
|
+
export const WithCustomCountry = Template.bind({});
|
73
|
+
WithCustomCountry.args = {
|
74
|
+
country: 'IN',
|
75
|
+
value: '9176543210',
|
76
|
+
width: '300px',
|
77
|
+
onChange: () => {},
|
78
|
+
placeholder: 'Enter phone number',
|
79
|
+
onFocus: () => {},
|
80
|
+
onBlur: () => {},
|
81
|
+
isValid: true,
|
82
|
+
};
|
83
|
+
|
84
|
+
// Story with empty value
|
85
|
+
export const EmptyValue = Template.bind({});
|
86
|
+
EmptyValue.args = {
|
87
|
+
country: 'IN',
|
88
|
+
value: '91',
|
89
|
+
width: '500px',
|
90
|
+
onChange: () => {},
|
91
|
+
placeholder: 'Enter phone number',
|
92
|
+
onFocus: () => {},
|
93
|
+
onBlur: () => {},
|
94
|
+
isValid: false,
|
95
|
+
};
|
@@ -0,0 +1,90 @@
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
2
|
+
import PhoneInput from 'react-phone-input-2';
|
3
|
+
import 'react-phone-input-2/lib/style.css';
|
4
|
+
import { PhoneInputProps } from './types';
|
5
|
+
import Typography from '../Typography';
|
6
|
+
import './PhoneInput.scss';
|
7
|
+
|
8
|
+
const PhoneInputField: React.FC<PhoneInputProps> = ({
|
9
|
+
country,
|
10
|
+
value,
|
11
|
+
onChange,
|
12
|
+
width = '100%',
|
13
|
+
placeholder = 'Enter phone number',
|
14
|
+
onFocus,
|
15
|
+
onBlur,
|
16
|
+
}) => {
|
17
|
+
const [phone, setPhone] = useState<string>(value);
|
18
|
+
const [isFocused, setIsFocused] = useState(false);
|
19
|
+
const [error, setError] = useState<string>('');
|
20
|
+
|
21
|
+
useEffect(() => {
|
22
|
+
if (value !== phone) {
|
23
|
+
setPhone(value);
|
24
|
+
}
|
25
|
+
}, [value]);
|
26
|
+
|
27
|
+
const handlePhoneChange = (phone: string) => {
|
28
|
+
const numericPhone = phone.replace(/[^0-9+]/g, '');
|
29
|
+
const countryCode = numericPhone.startsWith('+')
|
30
|
+
? numericPhone.substring(0, 3)
|
31
|
+
: '';
|
32
|
+
let phoneNumber = numericPhone.replace(countryCode, '');
|
33
|
+
|
34
|
+
let validPhoneNumberLength = 10;
|
35
|
+
if (country === 'IN') {
|
36
|
+
if (phoneNumber.length < validPhoneNumberLength) {
|
37
|
+
setError('Phone number should be exactly 10 digits');
|
38
|
+
} else {
|
39
|
+
setError('');
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
if (phoneNumber.length <= validPhoneNumberLength) {
|
44
|
+
setPhone(numericPhone);
|
45
|
+
onChange(numericPhone);
|
46
|
+
}
|
47
|
+
};
|
48
|
+
|
49
|
+
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
|
50
|
+
setIsFocused(true);
|
51
|
+
if (onFocus) onFocus(event);
|
52
|
+
};
|
53
|
+
|
54
|
+
const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
|
55
|
+
setIsFocused(false);
|
56
|
+
if (onBlur) onBlur(event);
|
57
|
+
};
|
58
|
+
|
59
|
+
return (
|
60
|
+
<div>
|
61
|
+
<PhoneInput
|
62
|
+
country={country}
|
63
|
+
value={phone}
|
64
|
+
onChange={handlePhoneChange}
|
65
|
+
inputStyle={{
|
66
|
+
width,
|
67
|
+
height: '32px',
|
68
|
+
border: isFocused
|
69
|
+
? '1px solid var(--brand-color)'
|
70
|
+
: error
|
71
|
+
? '1px solid var(--error_light)'
|
72
|
+
: '1px solid var(--default-color)',
|
73
|
+
borderRadius: '4px',
|
74
|
+
fontSize: '14px',
|
75
|
+
transition: 'border-color 0.3s ease',
|
76
|
+
}}
|
77
|
+
placeholder={placeholder}
|
78
|
+
onFocus={handleFocus}
|
79
|
+
onBlur={handleBlur}
|
80
|
+
/>
|
81
|
+
{error && !isFocused && (
|
82
|
+
<Typography color={'var(--error_light)'} className="error">
|
83
|
+
{error}
|
84
|
+
</Typography>
|
85
|
+
)}
|
86
|
+
</div>
|
87
|
+
);
|
88
|
+
};
|
89
|
+
|
90
|
+
export default PhoneInputField;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './PhoneInput';
|
@@ -0,0 +1,10 @@
|
|
1
|
+
export interface PhoneInputProps {
|
2
|
+
country: string;
|
3
|
+
value: string;
|
4
|
+
onChange: (phone: string) => void;
|
5
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
6
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
7
|
+
width?: string;
|
8
|
+
placeholder?: string;
|
9
|
+
isValid: any;
|
10
|
+
}
|
@@ -15,15 +15,16 @@ const meta: Meta<typeof PopUpModal> = {
|
|
15
15
|
type Story = StoryObj<typeof PopUpModal>;
|
16
16
|
|
17
17
|
const defaultArgs = {
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
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
|
+
colorForTitleMessage: 'var(--select-license-header-text-color)'
|
27
28
|
}
|
28
29
|
|
29
30
|
export const DefaultModal: Story = {
|
@@ -41,12 +42,12 @@ export const ControlledPopUp: Story = {
|
|
41
42
|
render: () => {
|
42
43
|
const [isOpen, setIsOpen] = useState(false);
|
43
44
|
const handleContinue = () => {
|
44
|
-
|
45
|
-
|
46
|
-
|
45
|
+
alert('Continued!');
|
46
|
+
setIsOpen(false);
|
47
|
+
};
|
47
48
|
return (
|
48
49
|
<>
|
49
|
-
<Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
|
50
|
+
<Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
|
50
51
|
<PopUpModal
|
51
52
|
{...defaultArgs}
|
52
53
|
isOpen={isOpen}
|
@@ -19,6 +19,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
|
|
19
19
|
secondButtonLabel = 'Continue',
|
20
20
|
buttonVariant = 'warning',
|
21
21
|
border = '1px solid var(--warning-modal-border-color)',
|
22
|
+
colorForTitleMessage = 'var(--status-button-bg-warning)'
|
22
23
|
}) => {
|
23
24
|
return (
|
24
25
|
<Modal
|
@@ -43,7 +44,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
|
|
43
44
|
>
|
44
45
|
{' '}
|
45
46
|
<Typography
|
46
|
-
color=
|
47
|
+
color={`${colorForTitleMessage}`}
|
47
48
|
fontSize={20}
|
48
49
|
fontWeight="semi-bold"
|
49
50
|
>
|
@@ -1,14 +1,15 @@
|
|
1
1
|
export interface PopUpModalProps {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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
|
+
colorForTitleMessage?: string;
|
15
|
+
}
|
@@ -1,9 +1,9 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
|
1
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
4
|
import Select from './Select';
|
3
|
-
import React,{ useState } from 'react';
|
4
5
|
import { Option } from './types';
|
5
6
|
import RadioGroup from '../RadioGroup';
|
6
|
-
import React from 'react';
|
7
7
|
|
8
8
|
const meta: Meta<typeof Select> = {
|
9
9
|
title: 'Components/Select',
|
@@ -0,0 +1,54 @@
|
|
1
|
+
@use '../../assets/styles/fonts';
|
2
|
+
@use '../../assets/styles/colors';
|
3
|
+
|
4
|
+
.ff-accordion-table-container {
|
5
|
+
overflow-y: auto;
|
6
|
+
.ff-accordion-table {
|
7
|
+
width: 100%;
|
8
|
+
.ff-table-header,
|
9
|
+
.ff-table-cell {
|
10
|
+
text-align: left;
|
11
|
+
padding: 9px;
|
12
|
+
}
|
13
|
+
.ff-table-header {
|
14
|
+
color: var(--text-color);
|
15
|
+
border-bottom: 1px solid var(--slider-table-color);
|
16
|
+
}
|
17
|
+
.ff-table-body {
|
18
|
+
.ff-table-row:hover {
|
19
|
+
background-color: var(--hover-color);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
&--primary-bg {
|
23
|
+
background-color: var(--table-with-accordion-header-primary-bg);
|
24
|
+
}
|
25
|
+
&--secondary-bg {
|
26
|
+
background-color: var(--secondary-bg);
|
27
|
+
}
|
28
|
+
&--default-bg {
|
29
|
+
background-color: var(--default-bg);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
.ff-accordion-fixed-header {
|
33
|
+
position: sticky;
|
34
|
+
top: 0;
|
35
|
+
z-index: 99;
|
36
|
+
background-color: var(--file-details-bg);
|
37
|
+
}
|
38
|
+
.column-table-accordion {
|
39
|
+
width: 100%;
|
40
|
+
.accordion-header {
|
41
|
+
display: flex;
|
42
|
+
align-items: center;
|
43
|
+
.header-title {
|
44
|
+
padding: 8px;
|
45
|
+
}
|
46
|
+
.accordion-arrow {
|
47
|
+
img {
|
48
|
+
height: 30px;
|
49
|
+
width: 35px;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import { StoryObj, Meta } from '@storybook/react';
|
2
|
+
import TableWithAccordion from './TableWithAccordion';
|
3
|
+
import { sampleData } from './data';
|
4
|
+
|
5
|
+
const meta: Meta<typeof TableWithAccordion> = {
|
6
|
+
title: 'Components/TableWithAccordion',
|
7
|
+
component: TableWithAccordion,
|
8
|
+
parameters: {
|
9
|
+
layout: 'centered',
|
10
|
+
},
|
11
|
+
tags: ['autodocs'],
|
12
|
+
};
|
13
|
+
|
14
|
+
type Story = StoryObj<typeof TableWithAccordion>;
|
15
|
+
const defaultArgs = {
|
16
|
+
tableMeta: [],
|
17
|
+
tableData: [],
|
18
|
+
};
|
19
|
+
|
20
|
+
const emptyData: never[] = [];
|
21
|
+
const columnsData = [
|
22
|
+
{
|
23
|
+
header: 'Description',
|
24
|
+
accessor: 'desc',
|
25
|
+
width: 100,
|
26
|
+
},
|
27
|
+
{
|
28
|
+
header: 'SUITE NAME',
|
29
|
+
accessor: 'suiteName',
|
30
|
+
width: 100,
|
31
|
+
},
|
32
|
+
{
|
33
|
+
header: 'SUITE TYPE',
|
34
|
+
accessor: 'suiteName',
|
35
|
+
width: 100,
|
36
|
+
},
|
37
|
+
{
|
38
|
+
header: 'SUITE ACCESS',
|
39
|
+
accessor: 'suiteName',
|
40
|
+
width: 100,
|
41
|
+
},
|
42
|
+
{
|
43
|
+
header: 'Modified By',
|
44
|
+
accessor: 'modifiedBy',
|
45
|
+
width: 100,
|
46
|
+
},
|
47
|
+
];
|
48
|
+
|
49
|
+
export const TableWithRowAccordion: Story = {
|
50
|
+
args: {
|
51
|
+
...defaultArgs,
|
52
|
+
tableMeta: columnsData,
|
53
|
+
tableData: sampleData,
|
54
|
+
accordionType: 'row',
|
55
|
+
TableAccordionStateIconWidth:4,
|
56
|
+
TableAccordionStateIconHeight:8,
|
57
|
+
},
|
58
|
+
};
|
59
|
+
export const TableWithColumnAccordion: Story = {
|
60
|
+
args: {
|
61
|
+
...defaultArgs,
|
62
|
+
tableMeta: columnsData,
|
63
|
+
tableData: sampleData,
|
64
|
+
accordionType: 'column',
|
65
|
+
TableAccordionStateIconWidth:4,
|
66
|
+
TableAccordionStateIconHeight:8,
|
67
|
+
},
|
68
|
+
};
|
69
|
+
|
70
|
+
export const EmtptyTableWithColumnAccordion: Story = {
|
71
|
+
args: {
|
72
|
+
...defaultArgs,
|
73
|
+
tableMeta: columnsData,
|
74
|
+
tableData: emptyData,
|
75
|
+
accordionType: 'column',
|
76
|
+
TableAccordionStateIconWidth:4,
|
77
|
+
TableAccordionStateIconHeight:8,
|
78
|
+
},
|
79
|
+
};
|
80
|
+
|
81
|
+
export const AccordionTableWithFixedHeader: Story = {
|
82
|
+
args: {
|
83
|
+
...defaultArgs,
|
84
|
+
tableMeta: columnsData,
|
85
|
+
tableData: sampleData,
|
86
|
+
accordionType: 'row',
|
87
|
+
height: '200px',
|
88
|
+
withFixedHeader: true,
|
89
|
+
TableAccordionStateIconWidth:4,
|
90
|
+
TableAccordionStateIconHeight:8,
|
91
|
+
},
|
92
|
+
};
|
93
|
+
|
94
|
+
export default meta;
|