pixel-react 1.10.5 → 1.10.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.
Files changed (34) hide show
  1. package/lib/components/MenuOption/types.d.ts +1 -1
  2. package/lib/components/Select/components/types.d.ts +6 -1
  3. package/lib/components/Select/types.d.ts +17 -0
  4. package/lib/components/Table/Table.d.ts +1 -1
  5. package/lib/components/Table/Types.d.ts +1 -0
  6. package/lib/index.d.ts +20 -3
  7. package/lib/index.esm.js +245 -93
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +245 -93
  10. package/lib/index.js.map +1 -1
  11. package/lib/tsconfig.tsbuildinfo +1 -1
  12. package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
  13. package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/components/MenuOption/MenuOption.scss +4 -0
  16. package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
  17. package/src/components/MenuOption/MenuOption.tsx +72 -60
  18. package/src/components/MenuOption/types.ts +1 -1
  19. package/src/components/Select/Select.stories.tsx +43 -1
  20. package/src/components/Select/Select.tsx +16 -1
  21. package/src/components/Select/components/Dropdown.scss +41 -1
  22. package/src/components/Select/components/Dropdown.tsx +52 -6
  23. package/src/components/Select/components/types.ts +7 -2
  24. package/src/components/Select/types.ts +22 -0
  25. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
  26. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  27. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
  28. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
  29. package/src/components/Table/Table.tsx +47 -0
  30. package/src/components/Table/Types.ts +4 -1
  31. package/src/components/TableTree/Components/TableBody.tsx +0 -1
  32. package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
  33. package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
  34. package/src/utils/getTreeDetails/getTreeDetails.ts +66 -13
@@ -1 +1 @@
1
- {"root":["../src/index.ts","../src/componentprops/treenodeprops.ts","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addresourcebutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachimage/attachimage.tsx","../src/components/attachimage/index.ts","../src/components/attachimage/types.ts","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/types.ts","../src/components/avatar/avatar.tsx","../src/components/avatar/index.ts","../src/components/avatar/types.ts","../src/components/browsertabs/browsertabs.tsx","../src/components/browsertabs/index.ts","../src/components/browsertabs/types.ts","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/barchart/barchart.tsx","../src/components/charts/barchart/index.ts","../src/components/charts/barchart/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/iconradialchart/iconradialchart.tsx","../src/components/charts/iconradialchart/index.ts","../src/components/charts/iconradialchart/types.ts","../src/components/charts/linechart/linechart.tsx","../src/components/charts/linechart/index.ts","../src/components/charts/linechart/types.ts","../src/components/charts/multiradialchart/multiradialchart.tsx","../src/components/charts/multiradialchart/index.ts","../src/components/charts/multiradialchart/types.ts","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/choosefile/choosefile.tsx","../src/components/choosefile/types.ts","../src/components/comment/comments.tsx","../src/components/comment/index.ts","../src/components/comment/type.ts","../src/components/comment/comment/comment.tsx","../src/components/comment/comment/usenode.ts","../src/components/conditionaldropdown/conditionaldropdown.tsx","../src/components/conditionaldropdown/optionsdropdown.tsx","../src/components/conditionaldropdown/index.ts","../src/components/conditionaldropdown/types.ts","../src/components/connectingbranch/connectingbranch.tsx","../src/components/connectingbranch/data.tsx","../src/components/connectingbranch/index.ts","../src/components/connectingbranch/types.ts","../src/components/connectingbranch/branchcomponents/machineinstances.tsx","../src/components/createvariable/createvariableslider.tsx","../src/components/createvariable/index.ts","../src/components/createvariable/types.ts","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/downloadclient/downloadclient.tsx","../src/components/downloadclient/index.ts","../src/components/downloadclient/type.ts","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/edittextfield/edittextfield.tsx","../src/components/edittextfield/index.ts","../src/components/edittextfield/types.ts","../src/components/editor/editor.tsx","../src/components/editor/variabledropdown.tsx","../src/components/editor/constants.ts","../src/components/editor/index.ts","../src/components/editor/types.ts","../src/components/excel/types.ts","../src/components/excel/dataconversion.ts","../src/components/excel/index.ts","../src/components/excel/colorbarselector/colorbarselector.tsx","../src/components/excel/excelcontextmenu/excelcontextmenu.tsx","../src/components/excel/excelfile/excelfile.tsx","../src/components/excel/excelfile/excelfilecomponents/activecell.tsx","../src/components/excel/excelfile/excelfilecomponents/cell.tsx","../src/components/excel/excelfile/excelfilecomponents/columnindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/copied.tsx","../src/components/excel/excelfile/excelfilecomponents/cornerindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/dataeditor.tsx","../src/components/excel/excelfile/excelfilecomponents/dataviewer.tsx","../src/components/excel/excelfile/excelfilecomponents/floatingrect.tsx","../src/components/excel/excelfile/excelfilecomponents/headerrow.tsx","../src/components/excel/excelfile/excelfilecomponents/row.tsx","../src/components/excel/excelfile/excelfilecomponents/rowindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/selected.tsx","../src/components/excel/excelfile/excelfilecomponents/spreadsheet.tsx","../src/components/excel/excelfile/excelfilecomponents/table.tsx","../src/components/excel/excelfile/excelfilecomponents/actions.ts","../src/components/excel/excelfile/excelfilecomponents/aremodelsequal.ts","../src/components/excel/excelfile/excelfilecomponents/context.ts","../src/components/excel/excelfile/excelfilecomponents/index.ts","../src/components/excel/excelfile/excelfilecomponents/matrix.ts","../src/components/excel/excelfile/excelfilecomponents/point-range.ts","../src/components/excel/excelfile/excelfilecomponents/point.ts","../src/components/excel/excelfile/excelfilecomponents/reducer.ts","../src/components/excel/excelfile/excelfilecomponents/reducerfunctions.ts","../src/components/excel/excelfile/excelfilecomponents/selection.ts","../src/components/excel/excelfile/excelfilecomponents/types.ts","../src/components/excel/excelfile/excelfilecomponents/use-dispatch.ts","../src/components/excel/excelfile/excelfilecomponents/use-selector.ts","../src/components/excel/excelfile/excelfilecomponents/util.ts","../src/components/excel/excelfile/excelfilecomponents/engine/engine.ts","../src/components/excel/excelfile/excelfilecomponents/engine/formula.ts","../src/components/excel/excelfile/excelfilecomponents/engine/index.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-graph.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-hash.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-set.ts","../src/components/excel/excelfile/excelfilecomponents/typings/fast-formula-parser.d.ts","../src/components/excel/exceltoolbar/exceltoolbar.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/fieldset/fieldset.tsx","../src/components/fieldset/index.ts","../src/components/fieldset/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/radiofilepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.ts","../src/components/form/forms.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/iconradiogroup/iconradiogroup.tsx","../src/components/iconradiogroup/index.ts","../src/components/iconradiogroup/type.ts","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/labeledittextfield/labeledittextfield.tsx","../src/components/labeledittextfield/index.ts","../src/components/labeledittextfield/types.ts","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/mobileskin/mobileskin.tsx","../src/components/mobileskin/mobileskininterface.ts","../src/components/mobileskin/index.ts","../src/components/mobileskin/types.ts","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/moduleschip/modulechip.tsx","../src/components/moduleschip/index.ts","../src/components/moduleschip/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/sampledata.ts","../src/components/nlpinput/types.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/phoneinput/phoneinput.tsx","../src/components/phoneinput/index.ts","../src/components/phoneinput/types.ts","../src/components/popupmodal/popupmodal.tsx","../src/components/popupmodal/types.ts","../src/components/progressbar/progressbar.tsx","../src/components/progressbar/index.ts","../src/components/progressbar/types.ts","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/scriptswitchbutton/scriptswitchbutton.tsx","../src/components/scriptswitchbutton/index.ts","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown.tsx","../src/components/select/components/types.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasettooltip/datasettooltip.tsx","../src/components/sequentialconnectingbranch/components/datasettooltip/types.ts","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/statuscard/statuscard.tsx","../src/components/statuscard/index.ts","../src/components/statuscard/types.ts","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabletree/types.ts","../src/components/tabletree/components/tablebody.tsx","../src/components/tabletree/components/tablecell.tsx","../src/components/tabletree/components/tablehead.tsx","../src/components/tabletree/components/tablerow.tsx","../src/components/tabletree/components/addmodule/addmodule.tsx","../src/components/tabletree/utils/addnewrow.ts","../src/components/tabletree/utils/getallchildids.ts","../src/components/tabletree/utils/renderspaces.ts","../src/components/tablewithaccordion/tablewithaccordion.tsx","../src/components/tablewithaccordion/data.ts","../src/components/tablewithaccordion/index.ts","../src/components/tablewithaccordion/types.ts","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toastify/toastify.tsx","../src/components/toastify/index.ts","../src/components/toastify/types.ts","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/toggleswitch/toggleswitch.tsx","../src/components/toggleswitch/index.ts","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useintersectionobserver.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/formatstring/formatstring.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/capitalize/capitalize.tsx","../src/utils/checkduplicates/checkduplicates.ts","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.ts","../src/utils/downloadfile/savefilefromblob.ts","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.ts","../src/utils/formdata/convertformdatatoobject.ts","../src/utils/functioncheck/functioncheck.ts","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.ts","../src/utils/getselectoptionvalue/getselectoptionvalue.ts","../src/utils/getsequentialpayload/getsequentialpayload.ts","../src/utils/getsequentialpayload/types.ts","../src/utils/gettreedetails/gettreedetails.ts","../src/utils/handletreenodeselect/handletreenodeselect.ts","../src/utils/indexdbstore/indexdb.ts","../src/utils/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/swaparrayitem/draganddroputils.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.7.2"}
1
+ {"root":["../src/index.ts","../src/componentprops/treenodeprops.ts","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addresourcebutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachimage/attachimage.tsx","../src/components/attachimage/index.ts","../src/components/attachimage/types.ts","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/types.ts","../src/components/avatar/avatar.tsx","../src/components/avatar/index.ts","../src/components/avatar/types.ts","../src/components/browsertabs/browsertabs.tsx","../src/components/browsertabs/index.ts","../src/components/browsertabs/types.ts","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/barchart/barchart.tsx","../src/components/charts/barchart/index.ts","../src/components/charts/barchart/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/iconradialchart/iconradialchart.tsx","../src/components/charts/iconradialchart/index.ts","../src/components/charts/iconradialchart/types.ts","../src/components/charts/linechart/linechart.tsx","../src/components/charts/linechart/index.ts","../src/components/charts/linechart/types.ts","../src/components/charts/multiradialchart/multiradialchart.tsx","../src/components/charts/multiradialchart/index.ts","../src/components/charts/multiradialchart/types.ts","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/choosefile/choosefile.tsx","../src/components/choosefile/types.ts","../src/components/comment/comments.tsx","../src/components/comment/index.ts","../src/components/comment/type.ts","../src/components/comment/comment/comment.tsx","../src/components/comment/comment/usenode.ts","../src/components/conditionaldropdown/conditionaldropdown.tsx","../src/components/conditionaldropdown/optionsdropdown.tsx","../src/components/conditionaldropdown/index.ts","../src/components/conditionaldropdown/types.ts","../src/components/connectingbranch/connectingbranch.tsx","../src/components/connectingbranch/data.tsx","../src/components/connectingbranch/index.ts","../src/components/connectingbranch/types.ts","../src/components/connectingbranch/branchcomponents/machineinstances.tsx","../src/components/createvariable/createvariableslider.tsx","../src/components/createvariable/index.ts","../src/components/createvariable/types.ts","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/downloadclient/downloadclient.tsx","../src/components/downloadclient/index.ts","../src/components/downloadclient/type.ts","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/edittextfield/edittextfield.tsx","../src/components/edittextfield/index.ts","../src/components/edittextfield/types.ts","../src/components/editor/editor.tsx","../src/components/editor/variabledropdown.tsx","../src/components/editor/constants.ts","../src/components/editor/index.ts","../src/components/editor/types.ts","../src/components/excel/types.ts","../src/components/excel/dataconversion.ts","../src/components/excel/index.ts","../src/components/excel/colorbarselector/colorbarselector.tsx","../src/components/excel/excelcontextmenu/excelcontextmenu.tsx","../src/components/excel/excelfile/excelfile.tsx","../src/components/excel/excelfile/excelfilecomponents/activecell.tsx","../src/components/excel/excelfile/excelfilecomponents/cell.tsx","../src/components/excel/excelfile/excelfilecomponents/columnindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/copied.tsx","../src/components/excel/excelfile/excelfilecomponents/cornerindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/dataeditor.tsx","../src/components/excel/excelfile/excelfilecomponents/dataviewer.tsx","../src/components/excel/excelfile/excelfilecomponents/floatingrect.tsx","../src/components/excel/excelfile/excelfilecomponents/headerrow.tsx","../src/components/excel/excelfile/excelfilecomponents/row.tsx","../src/components/excel/excelfile/excelfilecomponents/rowindicator.tsx","../src/components/excel/excelfile/excelfilecomponents/selected.tsx","../src/components/excel/excelfile/excelfilecomponents/spreadsheet.tsx","../src/components/excel/excelfile/excelfilecomponents/table.tsx","../src/components/excel/excelfile/excelfilecomponents/actions.ts","../src/components/excel/excelfile/excelfilecomponents/aremodelsequal.ts","../src/components/excel/excelfile/excelfilecomponents/context.ts","../src/components/excel/excelfile/excelfilecomponents/index.ts","../src/components/excel/excelfile/excelfilecomponents/matrix.ts","../src/components/excel/excelfile/excelfilecomponents/point-range.ts","../src/components/excel/excelfile/excelfilecomponents/point.ts","../src/components/excel/excelfile/excelfilecomponents/reducer.ts","../src/components/excel/excelfile/excelfilecomponents/reducerfunctions.ts","../src/components/excel/excelfile/excelfilecomponents/selection.ts","../src/components/excel/excelfile/excelfilecomponents/types.ts","../src/components/excel/excelfile/excelfilecomponents/use-dispatch.ts","../src/components/excel/excelfile/excelfilecomponents/use-selector.ts","../src/components/excel/excelfile/excelfilecomponents/util.ts","../src/components/excel/excelfile/excelfilecomponents/engine/engine.ts","../src/components/excel/excelfile/excelfilecomponents/engine/formula.ts","../src/components/excel/excelfile/excelfilecomponents/engine/index.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-graph.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-hash.ts","../src/components/excel/excelfile/excelfilecomponents/engine/point-set.ts","../src/components/excel/excelfile/excelfilecomponents/typings/fast-formula-parser.d.ts","../src/components/excel/exceltoolbar/exceltoolbar.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/fieldset/fieldset.tsx","../src/components/fieldset/index.ts","../src/components/fieldset/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/radiofilepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.ts","../src/components/form/forms.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/iconradiogroup/iconradiogroup.tsx","../src/components/iconradiogroup/index.ts","../src/components/iconradiogroup/type.ts","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/labeledittextfield/labeledittextfield.tsx","../src/components/labeledittextfield/index.ts","../src/components/labeledittextfield/types.ts","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/mobileskin/mobileskin.tsx","../src/components/mobileskin/mobileskininterface.ts","../src/components/mobileskin/index.ts","../src/components/mobileskin/types.ts","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/moduleschip/modulechip.tsx","../src/components/moduleschip/index.ts","../src/components/moduleschip/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/sampledata.ts","../src/components/nlpinput/types.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/phoneinput/phoneinput.tsx","../src/components/phoneinput/index.ts","../src/components/phoneinput/types.ts","../src/components/popupmodal/popupmodal.tsx","../src/components/popupmodal/types.ts","../src/components/progressbar/progressbar.tsx","../src/components/progressbar/index.ts","../src/components/progressbar/types.ts","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/scriptswitchbutton/scriptswitchbutton.tsx","../src/components/scriptswitchbutton/index.ts","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown.tsx","../src/components/select/components/types.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasettooltip/datasettooltip.tsx","../src/components/sequentialconnectingbranch/components/datasettooltip/types.ts","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/statuscard/statuscard.tsx","../src/components/statuscard/index.ts","../src/components/statuscard/types.ts","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabletree/types.ts","../src/components/tabletree/components/tablebody.tsx","../src/components/tabletree/components/tablecell.tsx","../src/components/tabletree/components/tablehead.tsx","../src/components/tabletree/components/tablerow.tsx","../src/components/tabletree/components/addmodule/addmodule.tsx","../src/components/tabletree/utils/addnewrow.ts","../src/components/tabletree/utils/getallchildids.ts","../src/components/tabletree/utils/renderspaces.ts","../src/components/tablewithaccordion/tablewithaccordion.tsx","../src/components/tablewithaccordion/data.ts","../src/components/tablewithaccordion/index.ts","../src/components/tablewithaccordion/types.ts","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toastify/toastify.tsx","../src/components/toastify/index.ts","../src/components/toastify/types.ts","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/toggleswitch/toggleswitch.tsx","../src/components/toggleswitch/index.ts","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useintersectionobserver.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/formatstring/formatstring.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/capitalize/capitalize.tsx","../src/utils/checkduplicates/checkduplicates.ts","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.ts","../src/utils/downloadfile/savefilefromblob.ts","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.ts","../src/utils/formdata/convertformdatatoobject.ts","../src/utils/functioncheck/functioncheck.ts","../src/utils/getanchorelement/getanchorelement.ts","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.ts","../src/utils/getselectoptionvalue/getselectoptionvalue.ts","../src/utils/getsequentialpayload/getsequentialpayload.ts","../src/utils/getsequentialpayload/types.ts","../src/utils/gettreedetails/gettreedetails.ts","../src/utils/handletreenodeselect/handletreenodeselect.ts","../src/utils/indexdbstore/indexdb.ts","../src/utils/keyboardactionutil/usekeyboardactions.tsx","../src/utils/keyboardactionutil/types.ts","../src/utils/swaparrayitem/draganddroputils.ts","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.ts","../src/utils/validatefile/validatefile.ts","../src/validations/regex.ts"],"version":"5.7.2"}
@@ -0,0 +1 @@
1
+ export declare const getAnchorElement: (anchorRef: React.RefObject<HTMLElement> | string) => HTMLElement | null;
@@ -7,4 +7,4 @@ export interface TreeDetailsResult {
7
7
  endId: string;
8
8
  root?: TreeNode;
9
9
  }
10
- export declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start", oldData: TreeNode[], newData: TreeNode[], index?: number) => TreeDetailsResult;
10
+ export declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start" | "addAbove" | "addBelow", oldData: TreeNode[], newData: TreeNode[], index?: number, sourceId?: string) => TreeDetailsResult;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.10.5",
4
+ "version": "1.10.7",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -95,3 +95,7 @@
95
95
  }
96
96
  }
97
97
  }
98
+
99
+ .ff-menu-parent-hover {
100
+ background-color: var(--hover-color) !important;
101
+ }
@@ -81,13 +81,13 @@ export const ControlledMenuOption: Story = {
81
81
  render: (args) => {
82
82
  const moreRef = useRef<HTMLDivElement>(null);
83
83
  return (
84
- <div ref={moreRef}>
84
+ <div ref={moreRef} style={{display:'flex', height:'100vh', alignItems:'center'}}>
85
85
  <MenuOption
86
86
  {...args}
87
87
  options={options}
88
88
  targetRef={moreRef} // Make sure targetRef is passed properly here
89
89
  onOptionClick={handleOptionClick}
90
- dropdownPlacement="left" // Dropdown placement for testing
90
+ dropdownPlacement="down" // Dropdown placement for testing
91
91
  />
92
92
  </div>
93
93
  );
@@ -3,16 +3,17 @@ import './MenuOption.scss';
3
3
  import Icon from '../Icon';
4
4
  import classNames from 'classnames';
5
5
  import Tooltip from '../Tooltip';
6
+ import Typography from '../Typography';
7
+ import { createPortal } from 'react-dom';
8
+ import { ThemeContext } from '../ThemeProvider/ThemeProvider';
9
+ import useClickOutside from '../../hooks/useClickOutside';
10
+ import { getAnchorElement } from '../../utils/getAnchorElement/getAnchorElement';
6
11
  import {
7
12
  OptionCardProps,
8
13
  OptionProps,
9
14
  MenuOptionProps,
10
15
  OptionClick,
11
16
  } from './types';
12
- import Typography from '../Typography';
13
- import { createPortal } from 'react-dom';
14
- import { ThemeContext } from '../ThemeProvider/ThemeProvider';
15
- import useClickOutside from '../../hooks/useClickOutside';
16
17
 
17
18
  const Option = ({ option, onClick }: OptionProps) => (
18
19
  <div
@@ -39,6 +40,42 @@ const Option = ({ option, onClick }: OptionProps) => (
39
40
  </div>
40
41
  );
41
42
 
43
+ const calculatePosition = (
44
+ menuPosition: { top: any; left: any; height: any; width: any },
45
+ dropdownPlacement: string | undefined,
46
+ optionCardHeight: number
47
+ ) => {
48
+ const { top, left, height, width } = menuPosition;
49
+ const availableSpace = {
50
+ top,
51
+ bottom: window.innerHeight - (top + height),
52
+ left,
53
+ right: window.innerWidth - (left + width),
54
+ };
55
+ const gap = 8; // Required gap
56
+
57
+ switch (dropdownPlacement) {
58
+ case 'top':
59
+ return availableSpace.top > optionCardHeight + gap
60
+ ? { top: top - optionCardHeight - gap, left }
61
+ : { top: top + height + gap, left };
62
+ case 'down':
63
+ return availableSpace.bottom > optionCardHeight + gap
64
+ ? { top: top + height + gap, left }
65
+ : { top: top - optionCardHeight - gap, left };
66
+ case 'left':
67
+ return availableSpace.left > width + gap
68
+ ? { top, left: left - width - gap }
69
+ : { top, left: left + width + gap };
70
+ case 'right':
71
+ return availableSpace.right > width + gap
72
+ ? { top, left: left + width + gap }
73
+ : { top, left: left - width - gap };
74
+ default:
75
+ return { top, left };
76
+ }
77
+ };
78
+
42
79
  const OptionCard = ({
43
80
  options,
44
81
  onClick,
@@ -51,55 +88,21 @@ const OptionCard = ({
51
88
  }: OptionCardProps) => {
52
89
  const themeContext = useContext(ThemeContext);
53
90
  const currentTheme = themeContext?.currentTheme;
54
- const [optionsHeight, setOptionsHeight] = useState(0);
55
- const [optionsWidth, setOptionsWidth] = useState(0);
56
91
  const optionCardRef = useRef<HTMLDivElement>(null);
57
-
58
- useEffect(() => {
59
- if (optionCardRef?.current) {
60
- const rect = optionCardRef?.current?.getBoundingClientRect();
61
- setOptionsHeight(rect?.height);
62
- setOptionsWidth(rect?.width);
63
- }
64
- }, []);
65
-
66
92
  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
67
93
 
68
- const style = (() => {
69
- switch (dropdownPlacement) {
70
- case 'top':
71
- return {
72
- top: menuPosition.top - optionsHeight - 7,
73
- left: menuPosition.left - 4,
74
- };
75
- case 'down':
76
- return {
77
- top: menuPosition.top + 20,
78
- left: menuPosition.left - 4,
79
- };
80
- case 'left':
81
- return {
82
- top: menuPosition.top - 4,
83
- left: menuPosition.left - optionsWidth - 8,
84
- };
85
- case 'right':
86
- return {
87
- top: menuPosition.top - 4,
88
- left: menuPosition.left + 20,
89
- };
90
- default:
91
- return {
92
- top: menuPosition.bottom,
93
- left: menuPosition.rightSpaceAvailable + 12,
94
- };
95
- }
96
- })();
94
+ const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
95
+ const style = calculatePosition(
96
+ menuPosition,
97
+ dropdownPlacement,
98
+ optionCardHeight
99
+ );
97
100
 
98
101
  return createPortal(
99
102
  <div
100
103
  className={classNames(
101
104
  'ff-option-card',
102
- [{ 'ff-option-card--primary': variant === 'primary' }],
105
+ { 'ff-option-card--primary': variant === 'primary' },
103
106
  currentTheme
104
107
  )}
105
108
  style={{ ...style, zIndex }}
@@ -128,20 +131,36 @@ const MenuOption = ({
128
131
  zIndex = 99,
129
132
  dropdownPlacement = 'down',
130
133
  optionCardVariant,
131
- targetRef,
134
+ targetRef = null,
132
135
  treeRowRef,
133
136
  }: MenuOptionProps) => {
134
137
  const [isClicked, setIsClicked] = useState(false);
135
138
  const menuRef = useRef<HTMLDivElement>(null);
139
+ const menuIconRef = useRef<HTMLDivElement>(null);
136
140
  const [menuPosition, setMenuPosition] = useState({
137
141
  top: 0,
138
142
  left: 0,
139
143
  height: 0,
140
144
  right: 0,
145
+ width: 0,
141
146
  });
142
147
 
143
148
  const closeDropDown = () => setIsClicked(false);
144
149
 
150
+ useEffect(() => {
151
+ if (targetRef) {
152
+ const parentDom = getAnchorElement(targetRef);
153
+ parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
154
+ }
155
+
156
+ return () => {
157
+ if (targetRef) {
158
+ const parentDom = getAnchorElement(targetRef);
159
+ parentDom?.classList.remove('ff-menu-parent-hover');
160
+ }
161
+ };
162
+ }, [isClicked, targetRef]);
163
+
145
164
  const onIconClickHandler = () => {
146
165
  onClick();
147
166
  calculateDims();
@@ -149,28 +168,22 @@ const MenuOption = ({
149
168
  };
150
169
 
151
170
  const handleOptionClick = (option: OptionClick) => {
152
- const actionContainer = treeRowRef?.current?.children[0]
153
- ?.children[2] as HTMLElement;
154
- actionContainer.classList.remove('table-row-add-button');
171
+ treeRowRef?.current?.children[0]?.children[2]?.classList.remove(
172
+ 'table-row-add-button'
173
+ );
155
174
  onOptionClick(option);
156
175
  closeDropDown();
157
176
  };
158
177
 
159
178
  const calculateDims = () => {
160
- let targetElement: HTMLElement | null = null;
161
- if (typeof targetRef === 'string') {
162
- targetElement = document.getElementById(targetRef);
163
- } else if (targetRef && targetRef.current) {
164
- targetElement = targetRef.current;
165
- }
166
-
167
- if (targetElement) {
168
- const rect = targetElement.getBoundingClientRect();
179
+ if (menuIconRef.current) {
180
+ const rect = menuIconRef.current.getBoundingClientRect();
169
181
  setMenuPosition({
170
182
  top: rect.top + window.scrollY,
171
183
  left: rect.left + window.scrollX,
172
184
  height: rect.height,
173
185
  right: rect.right,
186
+ width: rect.width,
174
187
  });
175
188
  }
176
189
  };
@@ -184,13 +197,12 @@ const MenuOption = ({
184
197
  'ff-menuicon-container-clicked': isClicked,
185
198
  dark: variant === 'dark',
186
199
  })}
200
+ ref={menuIconRef}
187
201
  onClick={onIconClickHandler}
188
202
  style={{
189
203
  width: `${iconButtonSize}px`,
190
204
  height: `${iconButtonSize}px`,
191
205
  borderRadius: `${iconButtonBorderRadius}px`,
192
- display: 'flex',
193
- flexDirection: 'column',
194
206
  }}
195
207
  >
196
208
  <Icon
@@ -208,7 +208,7 @@ interface MenuOptionProps {
208
208
  * @optional
209
209
  */
210
210
  optionCardVariant?: 'primary';
211
- targetRef?: string | React.RefObject<HTMLElement>;
211
+ targetRef?: string | React.RefObject<HTMLElement> | null;
212
212
  treeRowRef?: React.RefObject<any | null>;
213
213
  }
214
214
 
@@ -44,6 +44,11 @@ export const Primary: Story = {
44
44
  value: 'fire-flink-LIC4999',
45
45
  name: 'lambda test',
46
46
  },
47
+ {
48
+ label: 'fire-flink-LIC4999',
49
+ value: 'fire-flink-LIC4999',
50
+ name: 'lambda test',
51
+ },
47
52
  ],
48
53
  },
49
54
  };
@@ -160,6 +165,22 @@ export const OptionSelection: Story = {
160
165
  label: 'fire-flink-LIC4999',
161
166
  value: 'fire-flink-LIC4999',
162
167
  },
168
+ {
169
+ label: 'fire-flink-LIC4999',
170
+ value: 'fire-flink-LIC4999',
171
+ },
172
+ {
173
+ label: 'fire-flink-LIC4999',
174
+ value: 'fire-flink-LIC4999',
175
+ },
176
+ {
177
+ label: 'fire-flink-LIC4999',
178
+ value: 'fire-flink-LIC4999',
179
+ },
180
+ {
181
+ label: 'fire-flink-LIC4999',
182
+ value: 'fire-flink-LIC4999',
183
+ },
163
184
  ];
164
185
 
165
186
  const [selectedOption, setSelectedOption] = useState<Option>({
@@ -412,10 +433,23 @@ export const SelectWithToolTip: Story = {
412
433
  label: 'fire-flink-LIC4937',
413
434
  value: 'fire-flink-LIC4937',
414
435
  },
436
+ {
437
+ label: 'fire-flink-LIC5937',
438
+ value: 'fire-flink-LIC5937',
439
+ },
440
+ {
441
+ label: 'fire-flink-LIC6937',
442
+ value: 'fire-flink-LIC6937',
443
+ },
444
+ {
445
+ label: 'fire-flink-LIC7937',
446
+ value: 'fire-flink-LIC7937',
447
+ },
415
448
  {
416
449
  label: 'fire-flink-LIC4999',
417
450
  value: 'fire-flink-LIC4999',
418
- },
451
+ recurrence: true,
452
+ },
419
453
  ];
420
454
 
421
455
  const [selectedOption, setSelectedOption] = useState<Option>({
@@ -427,6 +461,12 @@ export const SelectWithToolTip: Story = {
427
461
  setSelectedOption(option);
428
462
  };
429
463
 
464
+ const getMiniModalJSX = () => (
465
+ <>
466
+ <h1>Test Mini Modal</h1>
467
+ </>
468
+ );
469
+
430
470
  return (
431
471
  <Select
432
472
  optionsList={optionsList}
@@ -434,6 +474,8 @@ export const SelectWithToolTip: Story = {
434
474
  onChange={handleChange}
435
475
  label="Select Option"
436
476
  showToolTip={true}
477
+ modalJSXProps={getMiniModalJSX()}
478
+ recurrence
437
479
  />
438
480
  );
439
481
  },
@@ -34,10 +34,15 @@ const Select: FC<SelectProps> = ({
34
34
  showIcon = false,
35
35
  placeHolder = '',
36
36
  showToolTip = false,
37
+ onCancelModal = () => {},
38
+ onSaveModal = () => {},
39
+ modalJSXProps = <></>,
40
+ recurrence = false,
37
41
  }) => {
38
42
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
39
43
 
40
44
  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
45
+ const [customRecurrence, setCustomRecurrence] = useState(false);
41
46
  const [searchedOption, setSearchedOption] = useState<any>({
42
47
  searchedText: '',
43
48
  searchedIcon: '',
@@ -124,12 +129,14 @@ const Select: FC<SelectProps> = ({
124
129
  searchedIcon: selectedOption.iconName,
125
130
  });
126
131
  setSelectOptionList(optionsList);
132
+ setCustomRecurrence(false);
127
133
  onBlur();
128
134
  };
129
135
 
130
136
  const onSelectOptionSelector = (option: Option): void => {
131
137
  if (disabled) return;
132
- onSelectBlur();
138
+ const isCustomRecurrence = option?.recurrence || false;
139
+ setCustomRecurrence(isCustomRecurrence);
133
140
  setSearchedOption({
134
141
  searchedText: getValue(selectedOption, valueAccessor),
135
142
  searchedIcon: selectedOption.iconName,
@@ -137,6 +144,9 @@ const Select: FC<SelectProps> = ({
137
144
  if (onChange) {
138
145
  onChange(option);
139
146
  }
147
+ if (!isCustomRecurrence) {
148
+ onSelectBlur();
149
+ }
140
150
  };
141
151
 
142
152
  const handleResizeOrScroll = () => onSelectUpdatePosition();
@@ -277,6 +287,11 @@ const Select: FC<SelectProps> = ({
277
287
  selectedOption={searchedText}
278
288
  showIcon={showIcon}
279
289
  showToolTip={showToolTip}
290
+ customReccurenece={customRecurrence}
291
+ onSaveModal={onSaveModal}
292
+ onCancelModal={onCancelModal}
293
+ modalJSXProps={modalJSXProps}
294
+ recurrence={recurrence}
280
295
  />,
281
296
  document.body
282
297
  )}
@@ -1,4 +1,5 @@
1
- .ff-select-dropdown-wrapper {
1
+ .ff-select-dropdown-wrapper,
2
+ .ff-select-dropdown-mini-modal-wrapper {
2
3
  max-height: 160px;
3
4
  z-index: 999999;
4
5
  position: absolute;
@@ -59,3 +60,42 @@
59
60
  cursor: not-allowed;
60
61
  }
61
62
  }
63
+
64
+ .ff-select-dropdown-modal-wrapper {
65
+ max-height: 256px;
66
+ }
67
+
68
+ .ff-select-dropdown-mini-modal-wrapper {
69
+ display: flex;
70
+ justify-content: space-between;
71
+
72
+ .ff-select-label-minimodal-wrapper {
73
+ width: calc(50% - 4px);
74
+ }
75
+ .ff-select-mini-modal-wrapper {
76
+ width: 50%;
77
+ padding: 8px 2px 0px 4px;
78
+ display: flex;
79
+ align-items: flex-end;
80
+ margin-left: 4px;
81
+ border-left: 1px dashed var(--border-color);
82
+
83
+ .ff-select-modal-wrapper {
84
+ height: fit-content;
85
+ width: calc(100% - 4px);
86
+ border-radius: 8px;
87
+ border: 1px solid var(--ff-select-background-color);
88
+ box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);
89
+ border: 1px solid var(--border-color);
90
+
91
+ .ff-select-mini-modal-footer {
92
+ min-height: 32px;
93
+ border-top: 1px solid var(--border-color);
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: flex-end;
97
+ gap: 8px;
98
+ }
99
+ }
100
+ }
101
+ }