pixel-react 1.10.6 → 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.
@@ -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.6",
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
 
@@ -33,7 +33,6 @@ const TableBody = ({
33
33
  onRowClick={onRowClick}
34
34
  onToggleExpand={(node) => onToggleExpand(node, index)}
35
35
  onCheckBoxChange={onCheckBoxChange}
36
- index={index}
37
36
  onAddConfirm={onAddConfirm}
38
37
  onAddCancel={onAddCancel}
39
38
  />
@@ -0,0 +1,7 @@
1
+ // Helper function to get the anchor element
2
+ export const getAnchorElement = (anchorRef: React.RefObject<HTMLElement> | string) => {
3
+ if (typeof anchorRef === 'string') {
4
+ return document.getElementById(anchorRef);
5
+ }
6
+ return anchorRef?.current || null;
7
+ };
@@ -1,13 +1,14 @@
1
1
  import { useState } from 'react';
2
- import { getTreeDetails, TreeNode, TreeDetailsResult } from './getTreeDetails';
2
+ import { getTreeDetails, TreeDetailsResult } from './getTreeDetails';
3
3
  import React from 'react';
4
+ import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
4
5
 
5
6
  export default {
6
7
  title: 'Utils/getTreeDetails',
7
8
  component: getTreeDetails,
8
9
  };
9
10
 
10
- const initialData: TreeNode[] = [
11
+ const initialData: TreeNodeProps[] = [
11
12
  {
12
13
  createdBy: 'USR4705',
13
14
  modifiedBy: '--',
@@ -65,15 +66,31 @@ const initialData: TreeNode[] = [
65
66
  ];
66
67
 
67
68
  export const InteractivePlayground = () => {
68
- const [data, setData] = useState<TreeNode[]>(initialData);
69
- const [newData, setNewData] = useState<TreeNode[]>([]);
70
- const [action, setAction] = useState<'above' | 'below' | 'expand' | 'collapse' | 'start'>('below');
69
+ const [data, setData] = useState<TreeNodeProps[]>(initialData);
70
+ const [newData, setNewData] = useState<TreeNodeProps[]>([]);
71
+ const [action, setAction] = useState<
72
+ | 'above'
73
+ | 'below'
74
+ | 'expand'
75
+ | 'collapse'
76
+ | 'start'
77
+ | 'addAbove'
78
+ | 'addBelow'
79
+ >('below');
71
80
  const [index, setIndex] = useState<number | undefined>(undefined);
81
+ const [sourceId, setSourceId] = useState<string | undefined>(undefined); // State for sourceId
72
82
  const [result, setResult] = useState<TreeDetailsResult | null>(null);
73
83
 
74
84
  const handleGetTreeDetails = () => {
75
85
  try {
76
- const treeDetails = getTreeDetails(action, data, newData, index);
86
+ // If sourceId exists, we pass it, otherwise we pass the index
87
+ const treeDetails = getTreeDetails(
88
+ action,
89
+ data,
90
+ newData,
91
+ index,
92
+ sourceId
93
+ );
77
94
  setData(treeDetails.treeDataList);
78
95
  setResult(treeDetails);
79
96
  } catch (error) {
@@ -91,7 +108,16 @@ export const InteractivePlayground = () => {
91
108
  id="action"
92
109
  value={action}
93
110
  onChange={(e) =>
94
- setAction(e.target.value as 'above' | 'below' | 'expand' | 'collapse' | 'start')
111
+ setAction(
112
+ e.target.value as
113
+ | 'above'
114
+ | 'below'
115
+ | 'expand'
116
+ | 'collapse'
117
+ | 'start'
118
+ | 'addAbove'
119
+ | 'addBelow'
120
+ )
95
121
  }
96
122
  >
97
123
  <option value="above">Above</option>
@@ -99,10 +125,32 @@ export const InteractivePlayground = () => {
99
125
  <option value="expand">Expand</option>
100
126
  <option value="collapse">Collapse</option>
101
127
  <option value="start">Start</option>
128
+ <option value="addAbove">Add Above</option>
129
+ <option value="addBelow">Add Below</option>
102
130
  </select>
103
131
  </div>
104
132
 
105
- {(action === 'expand' || action === 'collapse') && (
133
+ {/* Input for sourceId, if action requires it */}
134
+ {(action === 'expand' ||
135
+ action === 'collapse' ||
136
+ action === 'addAbove' ||
137
+ action === 'addBelow') && (
138
+ <div>
139
+ <label htmlFor="sourceId">
140
+ Source ID (for expand/collapse/addAbove/addBelow):
141
+ </label>
142
+ <input
143
+ type="text"
144
+ id="sourceId"
145
+ value={sourceId || ''}
146
+ onChange={(e) => setSourceId(e.target.value)}
147
+ placeholder="Enter Source ID"
148
+ />
149
+ </div>
150
+ )}
151
+
152
+ {/* Input for index, for actions requiring index */}
153
+ {(action === 'expand' || action === 'collapse') && !sourceId && (
106
154
  <div>
107
155
  <label htmlFor="index">Index (for expand/collapse):</label>
108
156
  <input
@@ -110,7 +158,9 @@ export const InteractivePlayground = () => {
110
158
  id="index"
111
159
  value={index !== undefined ? index : ''}
112
160
  onChange={(e) =>
113
- setIndex(e.target.value ? parseInt(e.target.value, 10) : undefined)
161
+ setIndex(
162
+ e.target.value ? parseInt(e.target.value, 10) : undefined
163
+ )
114
164
  }
115
165
  disabled={action !== 'expand' && action !== 'collapse'}
116
166
  />
@@ -11,14 +11,37 @@ export interface TreeDetailsResult {
11
11
  }
12
12
 
13
13
  export const getTreeDetails = (
14
- action: 'above' | 'below' | 'expand' | 'collapse' | 'start',
14
+ action:
15
+ | 'above'
16
+ | 'below'
17
+ | 'expand'
18
+ | 'collapse'
19
+ | 'start'
20
+ | 'addAbove'
21
+ | 'addBelow',
15
22
  oldData: TreeNode[],
16
23
  newData: TreeNode[],
17
- index?: number
24
+ index?: number,
25
+ sourceId?: string
18
26
  ): TreeDetailsResult => {
19
27
  let treeDataList: TreeNode[];
20
28
  let root: TreeNode | undefined = undefined;
21
29
 
30
+ const findIndexByKey = (data: TreeNode[], key: string): number => {
31
+ return data.findIndex((node) => node.key === key);
32
+ };
33
+
34
+ const getIndex = (): number | undefined => {
35
+ if (sourceId) {
36
+ const indexByKey = findIndexByKey(oldData, sourceId);
37
+ if (indexByKey === -1) {
38
+ throw new Error(`Key "${sourceId}" not found in oldData.`);
39
+ }
40
+ return indexByKey;
41
+ }
42
+ return index; // Use index if sourceId is not provided
43
+ };
44
+
22
45
  switch (action) {
23
46
  case 'above':
24
47
  treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -28,13 +51,39 @@ export const getTreeDetails = (
28
51
  break;
29
52
  case 'expand':
30
53
  case 'collapse':
31
- if (typeof index === 'number') {
32
- treeDataList = [...oldData.slice(0, index), ...newData];
33
- } else {
54
+ const actionIndex = getIndex();
55
+ if (actionIndex === undefined) {
34
56
  throw new Error(
35
- "Index is required for 'expand' or 'collapse' actions."
57
+ "Both sourceId and index are required for 'expand' or 'collapse' actions."
36
58
  );
37
59
  }
60
+ treeDataList = [...oldData.slice(0, actionIndex), ...newData];
61
+ break;
62
+ case 'addAbove':
63
+ const addAboveIndex = getIndex();
64
+ if (addAboveIndex === undefined) {
65
+ throw new Error(
66
+ "Both sourceId and index are required for 'addAbove' action."
67
+ );
68
+ }
69
+ treeDataList = [
70
+ ...oldData.slice(0, addAboveIndex),
71
+ ...newData,
72
+ ...oldData.slice(addAboveIndex),
73
+ ];
74
+ break;
75
+ case 'addBelow':
76
+ const addBelowIndex = getIndex();
77
+ if (addBelowIndex === undefined) {
78
+ throw new Error(
79
+ "Both sourceId and index are required for 'addBelow' action."
80
+ );
81
+ }
82
+ treeDataList = [
83
+ ...oldData.slice(0, addBelowIndex + 1),
84
+ ...newData,
85
+ ...oldData.slice(addBelowIndex + 1),
86
+ ];
38
87
  break;
39
88
  case 'start':
40
89
  if (!checkEmpty(newData)) {
@@ -53,7 +102,10 @@ export const getTreeDetails = (
53
102
  }
54
103
 
55
104
  const firstNode = treeDataList[0] || root!;
56
- const lastNode = treeDataList[treeDataList.length - 1]!;
105
+ const lastNode = treeDataList[treeDataList.length - 1] || {
106
+ lastResource: true,
107
+ key: '',
108
+ };
57
109
 
58
110
  return {
59
111
  treeDataList,