diff --git a/apps/widget/package.json b/apps/widget/package.json index 9e7a7fa4b..9b683e885 100644 --- a/apps/widget/package.json +++ b/apps/widget/package.json @@ -39,7 +39,7 @@ "dependencies": { "@craco/craco": "^6.4.5", "@emotion/react": "^11.10.5", - "@handsontable/react": "^13.1.0", + "@handsontable/react": "^14.2.0", "@impler/client": "^0.17.0", "@impler/shared": "^0.17.0", "@mantine/core": "6.0.21", @@ -55,7 +55,7 @@ "bootstrap": "4.6.0", "cross-env": "^7.0.3", "file-saver": "^2.0.5", - "handsontable": "^13.1.0", + "handsontable": "^14.2.0", "http-server": "^14.1.1", "jquery": "^3.7.1", "moment": "^2.29.4", diff --git a/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css b/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css index 2c20459df..371638426 100644 --- a/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css +++ b/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css @@ -1,50 +1,3 @@ -/*! - * Copyright (c) HANDSONCODE sp. z o. o. - * - * HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o., a Polish corporation based in - * Gdynia, Poland, at Aleja Zwyciestwa 96-98, registered by the District Court in Gdansk under number - * 538651, EU tax ID number: PL5862294002, share capital: PLN 62,800.00. - * - * This software is protected by applicable copyright laws, including international treaties, and dual- - * licensed - depending on whether your use for commercial purposes, meaning intended for or - * resulting in commercial advantage or monetary compensation, or not. - * - * If your use is strictly personal or solely for evaluation purposes, meaning for the purposes of testing - * the suitability, performance, and usefulness of this software outside the production environment, - * you agree to be bound by the terms included in the "handsontable-non-commercial-license.pdf" file. - * - * Your use of this software for commercial purposes is subject to the terms included in an applicable - * license agreement. - * - * In any case, you must not make any such use of this software as to develop software which may be - * considered competitive with this software. - * - * UNLESS EXPRESSLY AGREED OTHERWISE, HANDSONCODE PROVIDES THIS SOFTWARE ON AN "AS IS" - * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, AND IN NO EVENT AND UNDER NO - * LEGAL THEORY, SHALL HANDSONCODE BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT, - * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM - * USE OR INABILITY TO USE THIS SOFTWARE. - * - * Version: 13.1.0 - * Release date: 31/08/2023 (built at 31/08/2023 08:24:01) - */.handsontable .table td,.handsontable .table th{border-top:none}.handsontable tr{background:#fff}.handsontable td{background-color:inherit}.handsontable .table caption+thead tr:first-child td,.handsontable .table caption+thead tr:first-child th,.handsontable .table colgroup+thead tr:first-child td,.handsontable .table colgroup+thead tr:first-child th,.handsontable .table thead:first-child tr:first-child td,.handsontable .table thead:first-child tr:first-child th{border-top:1px solid #ccc}.handsontable .table-bordered{border:0;border-collapse:separate}.handsontable .table-bordered td,.handsontable .table-bordered th{border-left:none}.handsontable .table-bordered td:first-child,.handsontable .table-bordered th:first-child{border-left:1px solid #ccc}.handsontable .table>tbody>tr>td,.handsontable .table>tbody>tr>th,.handsontable .table>tfoot>tr>td,.handsontable .table>tfoot>tr>th,.handsontable .table>thead>tr>td,.handsontable .table>thead>tr>th{line-height:21px;padding:0}.col-lg-1.handsontable,.col-lg-10.handsontable,.col-lg-11.handsontable,.col-lg-12.handsontable,.col-lg-2.handsontable,.col-lg-3.handsontable,.col-lg-4.handsontable,.col-lg-5.handsontable,.col-lg-6.handsontable,.col-lg-7.handsontable,.col-lg-8.handsontable,.col-lg-9.handsontable,.col-md-1.handsontable,.col-md-10.handsontable,.col-md-11.handsontable,.col-md-12.handsontable,.col-md-2.handsontable,.col-md-3.handsontable,.col-md-4.handsontable,.col-md-5.handsontable,.col-md-6.handsontable,.col-md-7.handsontable,.col-md-8.handsontable,.col-md-9.handsontable .col-sm-1.handsontable,.col-sm-10.handsontable,.col-sm-11.handsontable,.col-sm-12.handsontable,.col-sm-2.handsontable,.col-sm-3.handsontable,.col-sm-4.handsontable,.col-sm-5.handsontable,.col-sm-6.handsontable,.col-sm-7.handsontable,.col-sm-8.handsontable,.col-sm-9.handsontable .col-xs-1.handsontable,.col-xs-10.handsontable,.col-xs-11.handsontable,.col-xs-12.handsontable,.col-xs-2.handsontable,.col-xs-3.handsontable,.col-xs-4.handsontable,.col-xs-5.handsontable,.col-xs-6.handsontable,.col-xs-7.handsontable,.col-xs-8.handsontable,.col-xs-9.handsontable{padding-left:0;padding-right:0}.handsontable .table-striped>tbody>tr:nth-of-type(2n){background-color:#fff}.handsontable{position:relative}.handsontable .hide{display:none}.handsontable .relative{position:relative}.handsontable .wtHider{width:0}.handsontable .wtSpreader{height:auto;position:relative;width:0}.handsontable div,.handsontable input,.handsontable table,.handsontable tbody,.handsontable td,.handsontable textarea,.handsontable th,.handsontable thead{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.handsontable input,.handsontable textarea{min-height:auto}.handsontable table.htCore{border-collapse:separate;border-spacing:0;border-width:0;cursor:default;margin:0;max-height:none;max-width:none;outline-width:0;table-layout:fixed;width:0}.handsontable col,.handsontable col.rowHeader{width:50px}.handsontable td,.handsontable th{background-color:#fff;border-bottom:1px solid #ccc;border-left-width:0;border-right:1px solid #ccc;border-top-width:0;empty-cells:show;height:22px;line-height:21px;outline-width:0;overflow:hidden;padding:0 4px;vertical-align:top;white-space:pre-wrap}[dir=rtl].handsontable td,[dir=rtl].handsontable th{border-left:1px solid #ccc;border-right-width:0}.handsontable th:last-child{border-bottom:1px solid #ccc;border-left:none;border-right:1px solid #ccc}[dir=rtl].handsontable th:last-child{border-left:1px solid #ccc;border-right:none}.handsontable td:first-of-type,.handsontable th:first-child,.handsontable th:nth-child(2){border-left:1px solid #ccc}[dir=rtl].handsontable td:first-of-type,[dir=rtl].handsontable th:first-child,[dir=rtl].handsontable th:nth-child(2){border-right:1px solid #ccc}.handsontable .ht_clone_top th:nth-child(2){border-left-width:0;border-right:1px solid #ccc}[dir=rtl].handsontable .ht_clone_top th:nth-child(2){border-left:1px solid #ccc;border-right-width:0}.handsontable.htRowHeaders thead tr th:nth-child(2){border-left:1px solid #ccc}[dir=rtl].handsontable.htRowHeaders thead tr th:nth-child(2){border-right:1px solid #ccc}.handsontable tr:first-child td,.handsontable tr:first-child th{border-top:1px solid #ccc}.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable tbody tr th,.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top) thead tr th:first-child{border-left:1px solid #ccc;border-right-width:0}[dir=rtl].ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable tbody tr th,[dir=rtl].ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top) thead tr th:first-child{border-left-width:0;border-right:1px solid #ccc}.ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr.lastChild th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr:last-child th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr.lastChild th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr:last-child th{border-bottom-width:0}.handsontable th{background-color:#f0f0f0;color:#222;font-weight:400;text-align:center;white-space:nowrap}.handsontable thead th{padding:0}.handsontable th.active{background-color:#ccc}.handsontable thead th .relative{padding:2px 4px}.handsontable span.colHeader{display:inline-block;line-height:1.1}.handsontable .wtBorder{font-size:0;position:absolute}.handsontable .wtBorder.hidden{display:none!important}.handsontable .wtBorder.current{z-index:10}.handsontable .wtBorder.area{z-index:8}.handsontable .wtBorder.fill{z-index:6}.handsontable .wtBorder.corner{cursor:crosshair;font-size:0}.ht_clone_master{z-index:100}.ht_clone_inline_start{z-index:120}.ht_clone_bottom{z-index:130}.ht_clone_bottom_inline_start_corner{z-index:150}.ht_clone_top{z-index:160}.ht_clone_top_inline_start_corner{z-index:180}.handsontable col.hidden{width:0!important}.handsontable tr.hidden,.handsontable tr.hidden td,.handsontable tr.hidden th{display:none}.ht_clone_bottom,.ht_clone_inline_start,.ht_clone_top,.ht_master{overflow:hidden}.ht_master .wtHolder{overflow:auto}.handsontable .ht_clone_inline_start thead,.handsontable .ht_master thead,.handsontable .ht_master tr th{visibility:hidden}.ht_clone_bottom .wtHolder,.ht_clone_inline_start .wtHolder,.ht_clone_top .wtHolder{overflow:hidden}.handsontable{color:#373737;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:400;touch-action:manipulation}.handsontable a{color:#104acc}.handsontable.htAutoSize{left:-99000px;position:absolute;top:-99000px;visibility:hidden}.handsontable td.htInvalid{background-color:#fdebeb!important}.handsontable td.htNoWrap{white-space:nowrap}.hot-display-license-info{color:#373737;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:400;padding:5px 0 3px;text-align:left}.hot-display-license-info a{color:#104acc;font-size:10px}.handsontable .manualColumnResizer{cursor:col-resize;height:25px;position:absolute;top:0;width:5px;z-index:210}.handsontable .manualRowResizer{cursor:row-resize;height:5px;left:0;position:absolute;width:50px;z-index:210}.handsontable .manualColumnResizer.active,.handsontable .manualColumnResizer:hover,.handsontable .manualRowResizer.active,.handsontable .manualRowResizer:hover{background-color:#34a9db}.handsontable .manualColumnResizerGuide{background-color:#34a9db;border-left:none;border-right:1px dashed #777;display:none;margin-left:5px;margin-right:unset;position:absolute;right:unset;top:0;width:0}[dir=rtl].handsontable .manualColumnResizerGuide{border-left:1px dashed #777;border-right:none;left:unset;margin-left:unset;margin-right:5px}.handsontable .manualRowResizerGuide{background-color:#34a9db;border-bottom:1px dashed #777;bottom:0;display:none;height:0;left:0;margin-top:5px;position:absolute}.handsontable .manualColumnResizerGuide.active,.handsontable .manualRowResizerGuide.active{display:block;z-index:209}.handsontable .columnSorting{position:relative}.handsontable .columnSorting.sortAction:hover{cursor:pointer;text-decoration:underline}.handsontable span.colHeader.columnSorting:before{background-position-x:right;background-repeat:no-repeat;background-size:contain;content:"";height:10px;left:unset;margin-top:-6px;padding-left:8px;padding-right:0;position:absolute;right:-9px;top:50%;width:5px}[dir=rtl].handsontable span.colHeader.columnSorting:before{background-position-x:left;left:-9px;padding-left:0;padding-right:8px;right:unset}.handsontable span.colHeader.columnSorting.ascending:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFNJREFUeAHtzjkSgCAUBNHPgsoy97+ulGXRqJE5L+xkxoYt2UdsLb5bqFINz+aLuuLn5rIu2RkO3fZpWENimNgiw6iBYRTPMLJjGFxQZ1hxxb/xBI1qC8k39CdKAAAAAElFTkSuQmCC)}.handsontable span.colHeader.columnSorting.descending:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFJJREFUeAHtzjkSgCAQRNFmQYUZ7n9dKUvru0TmvPAn3br0QfgdZ5xx6x+rQn23GqTYnq1FDcnuzZIO2WmedVqIRVxgGKEyjNgYRjKGkZ1hFIZ3I70LyM0VtU8AAAAASUVORK5CYII=)}.htGhostTable .htCore span.colHeader.columnSorting:not(.indicatorDisabled):after{content:"*";display:inline-block;padding-right:20px;position:relative}.handsontable td.area,.handsontable td.area-1,.handsontable td.area-2,.handsontable td.area-3,.handsontable td.area-4,.handsontable td.area-5,.handsontable td.area-6,.handsontable td.area-7{position:relative}.handsontable td.area-1:before,.handsontable td.area-2:before,.handsontable td.area-3:before,.handsontable td.area-4:before,.handsontable td.area-5:before,.handsontable td.area-6:before,.handsontable td.area-7:before,.handsontable td.area:before{background:#005eff;bottom:0;bottom:-100%\9;content:"";left:0;position:absolute;right:0;top:0}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.handsontable td.area-1:before,.handsontable td.area-2:before,.handsontable td.area-3:before,.handsontable td.area-4:before,.handsontable td.area-5:before,.handsontable td.area-6:before,.handsontable td.area-7:before,.handsontable td.area:before{bottom:-100%}}.handsontable td.area:before{opacity:.1}.handsontable td.area-1:before{opacity:.2}.handsontable td.area-2:before{opacity:.27}.handsontable td.area-3:before{opacity:.35}.handsontable td.area-4:before{opacity:.41}.handsontable td.area-5:before{opacity:.47}.handsontable td.area-6:before{opacity:.54}.handsontable td.area-7:before{opacity:.58}.handsontable tbody th.ht__highlight,.handsontable thead th.ht__highlight{background-color:#dcdcdc}.handsontable tbody th.ht__active_highlight,.handsontable thead th.ht__active_highlight{background-color:#8eb0e7;color:#000}.handsontableInput{background-color:#fff;border:none;border-radius:0;box-shadow:inset 0 0 0 2px #5292f7;color:#000;display:block;font-family:inherit;font-size:inherit;line-height:21px;margin:0;outline-width:0;padding:1px 5px 0;resize:none}.handsontableInput:focus{outline:none}.handsontableInputHolder{left:0;position:absolute;top:0}.htSelectEditor{-webkit-appearance:menulist-button!important;position:absolute;width:auto;background-color:#ffffff;color:#373737;}.htSelectEditor:focus{outline:none}.handsontable .htDimmed{color:#777}.handsontable .htSubmenu{position:relative}.handsontable .htSubmenu :after{color:#777;content:"▶";font-size:9px;position:absolute;right:5px}[dir=rtl].handsontable .htSubmenu :after{content:""}[dir=rtl].handsontable .htSubmenu :before{color:#777;content:"◀";font-size:9px;left:5px;position:absolute}.handsontable .htLeft{text-align:left}.handsontable .htCenter{text-align:center}.handsontable .htRight{text-align:right}.handsontable .htJustify{text-align:justify}.handsontable .htTop{vertical-align:top}.handsontable .htMiddle{vertical-align:middle}.handsontable .htBottom{vertical-align:bottom}.handsontable .htPlaceholder{color:#999}.handsontable.listbox{margin:0}.handsontable.listbox .ht_master table{background:#fff;border:1px solid #ccc;border-collapse:separate}.handsontable.listbox td,.handsontable.listbox th,.handsontable.listbox tr:first-child td,.handsontable.listbox tr:first-child th,.handsontable.listbox tr:last-child th{border-color:transparent!important}.handsontable.listbox td,.handsontable.listbox th{text-overflow:ellipsis;white-space:nowrap}.handsontable.listbox td.htDimmed{color:inherit;cursor:default;font-style:inherit}.handsontable.listbox .wtBorder{visibility:hidden}.handsontable.listbox tr td.current,.handsontable.listbox tr:hover td{background:#eee}.ht_editor_hidden{z-index:-1}.ht_editor_visible{z-index:200}.handsontable td.htSearchResult{background:#fcedd9;color:#583707}.handsontable .collapsibleIndicator{background:#eee;border:1px solid #a6a6a6;border-radius:10px;-webkit-box-shadow:0 0 0 6px #eee;-moz-box-shadow:0 0 0 6px #eee;box-shadow:0 0 0 6px #eee;color:#222;cursor:pointer;font-size:10px;height:10px;left:unset;line-height:8px;position:absolute;right:5px;text-align:center;top:50%;transform:translateY(-50%);width:10px}[dir=rtl].handsontable .collapsibleIndicator{left:5px;right:unset}.handsontable.mobile,.handsontable.mobile .wtHolder{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.handsontable.mobile .handsontableInput:focus{-webkit-appearance:none;-webkit-box-shadow:inset 0 0 0 2px #5292f7;-moz-box-shadow:inset 0 0 0 2px #5292f7;box-shadow:inset 0 0 0 2px #5292f7}.handsontable .bottomSelectionHandle,.handsontable .bottomSelectionHandle-HitArea,.handsontable .topSelectionHandle,.handsontable .topSelectionHandle-HitArea{left:-10000px;right:unset;top:-10000px;z-index:9999}[dir=rtl].handsontable .bottomSelectionHandle,[dir=rtl].handsontable .bottomSelectionHandle-HitArea,[dir=rtl].handsontable .topSelectionHandle,[dir=rtl].handsontable .topSelectionHandle-HitArea{left:unset;right:-10000px}.handsontable.hide-tween{-webkit-animation:opacity-hide .3s;animation:opacity-hide .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.handsontable.show-tween{-webkit-animation:opacity-show .3s;animation:opacity-show .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards} -/*! - * Pikaday - * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/ - */.pika-single{background:#fff;border:1px solid;border-color:#ccc #ccc #bbb;color:#333;display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;position:relative;z-index:9999}.pika-single:after,.pika-single:before{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{box-shadow:0 5px 15px -5px rgba(0,0,0,.5);position:absolute}.pika-lendar{float:left;margin:8px;width:240px}.pika-title{position:relative;text-align:center}.pika-label{background-color:#fff;display:inline-block;font-size:14px;font-weight:700;line-height:20px;margin:0;overflow:hidden;padding:5px 3px;position:relative;z-index:9999}.pika-title select{cursor:pointer;left:0;margin:0;opacity:0;position:absolute;top:5px;z-index:9998}.pika-next,.pika-prev{background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:75% 75%;border:0;cursor:pointer;display:block;height:30px;opacity:.5;outline:none;overflow:hidden;padding:0;position:relative;text-indent:20px;white-space:nowrap;width:20px}.pika-next:hover,.pika-prev:hover{opacity:1}.is-rtl .pika-next,.pika-prev{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);float:left}.is-rtl .pika-prev,.pika-next{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);float:right}.pika-next.is-disabled,.pika-prev.is-disabled{cursor:default;opacity:.2}.pika-select{display:inline-block}.pika-table{border:0;border-collapse:collapse;border-spacing:0;width:100%}.pika-table td,.pika-table th{padding:0;width:14.2857142857%}.pika-table th{color:#999;font-size:12px;font-weight:700;line-height:25px;text-align:center}.pika-button{background:#f5f5f5;border:0;box-sizing:border-box;-moz-box-sizing:border-box;color:#666;cursor:pointer;display:block;font-size:12px;height:auto;line-height:15px;margin:0;outline:none;padding:5px;text-align:right;width:100%}.pika-week{color:#999;font-size:11px}.is-today .pika-button{color:#3af;font-weight:700}.has-event .pika-button,.is-selected .pika-button{background:#3af;border-radius:3px;box-shadow:inset 0 1px 3px #178fe5;color:#fff;font-weight:700}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#d5e9f7}.is-startrange .pika-button{background:#6cb31d;border-radius:3px;box-shadow:none;color:#fff}.is-endrange .pika-button{background:#3af;border-radius:3px;box-shadow:none;color:#fff}.is-disabled .pika-button{color:#999;cursor:default;opacity:.3;pointer-events:none}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{cursor:default;pointer-events:none}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{background:#ff8000;border-radius:3px;box-shadow:none;color:#fff}.pika-table abbr{border-bottom:none;cursor:help}.handsontable .htAutocompleteArrow{color:#eee;cursor:default;float:right;font-size:10px;text-align:center;width:16px}[dir=rtl].handsontable .htAutocompleteArrow{float:left}.handsontable td .htAutocompleteArrow:hover{color:#777}.handsontable td.area .htAutocompleteArrow{color:#d3d3d3}.handsontable .htCheckboxRendererInput{display:inline-block}.handsontable .htCheckboxRendererInput.noValue{opacity:.5}.handsontable .htCheckboxRendererLabel{cursor:pointer;display:inline-block;font-size:inherit;vertical-align:middle}.handsontable .htCheckboxRendererLabel.fullWidth{width:100%}.handsontable .htCommentCell{position:relative}.handsontable .htCommentCell:after{border-left:6px solid transparent;border-right:none;border-top:6px solid #000;content:"";left:unset;position:absolute;right:0;top:0}[dir=rtl].handsontable .htCommentCell:after{border-left:none;border-right:6px solid transparent;left:0;right:unset}.htCommentsContainer .htComments{display:none;position:absolute;z-index:1059}.htCommentsContainer .htCommentTextArea{-webkit-appearance:none;background-color:#fff;border:none;border-left:3px solid #ccc;box-shadow:0 1px 3px rgba(0,0,0,.118),0 1px 2px rgba(0,0,0,.239);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:12px;height:90px;outline:0!important;padding:5px;width:215px}[dir=rtl].htCommentsContainer .htCommentTextArea{border-left:none;border-right:3px solid #ccc}.htCommentsContainer .htCommentTextArea:focus{border-left:3px solid #5292f7;border-right:none;box-shadow:0 1px 3px rgba(0,0,0,.118),0 1px 2px rgba(0,0,0,.239),inset 0 0 0 1px #5292f7}[dir=rtl].htCommentsContainer .htCommentTextArea:focus{border-left:none;border-right:3px solid #5292f7} -/*! - * Handsontable ContextMenu - */.htContextMenu:not(.htGhostTable){display:none;position:absolute;z-index:1060}.htContextMenu .ht_clone_bottom,.htContextMenu .ht_clone_bottom_inline_start_corner,.htContextMenu .ht_clone_inline_start,.htContextMenu .ht_clone_top,.htContextMenu .ht_clone_top_inline_start_corner{display:none}.htContextMenu .ht_master table.htCore{border-color:#ccc;border-style:solid;border-width:1px 2px 2px 1px}[dir=rtl].htContextMenu .ht_master table.htCore{border-left-width:2px;border-right-width:1px}.htContextMenu .wtBorder{visibility:hidden}.htContextMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htContextMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htContextMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htContextMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htContextMenu table tbody tr td.current,.htContextMenu table tbody tr td.zeroclipboard-is-hover{background:#f3f3f3}.htContextMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;cursor:default;height:0;padding:0}.htContextMenu table tbody tr td.htDisabled{color:#999;cursor:default}.htContextMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htContextMenu table tbody tr.htHidden{display:none}.htContextMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:6px}[dir=rtl].htContextMenu table tbody tr td .htItemWrapper{margin-left:6px;margin-right:10px}.htContextMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute;right:0}[dir=rtl].htContextMenu table tbody tr td div span.selected{left:0;right:4px}.htContextMenu .ht_master .wtHolder{overflow:hidden}textarea.HandsontableCopyPaste{opacity:0;outline:0 none!important;overflow:hidden;position:fixed!important;right:100%!important;top:0!important} -/*! - * Handsontable DropdownMenu - */.handsontable .changeType{background:#eee;border:1px solid #bbb;border-radius:2px;color:#bbb;float:right;font-size:9px;line-height:9px;margin:3px 1px 0 5px;padding:2px}[dir=rtl].handsontable .changeType{float:left}.handsontable .changeType:before{content:"▼ "}.handsontable .changeType:hover{border:1px solid #777;color:#777;cursor:pointer}.htDropdownMenu:not(.htGhostTable){display:none;position:absolute;z-index:1060}.htDropdownMenu .ht_clone_bottom,.htDropdownMenu .ht_clone_bottom_inline_start_corner,.htDropdownMenu .ht_clone_inline_start,.htDropdownMenu .ht_clone_top,.htDropdownMenu .ht_clone_top_inline_start_corner{display:none}.htDropdownMenu table.htCore{border-color:#ccc;border-style:solid;border-width:1px 2px 2px 1px}[dir=rtl].htDropdownMenu table.htCore{border-left-width:2px;border-right-width:1px}.htDropdownMenu .wtBorder{visibility:hidden}.htDropdownMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htDropdownMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htDropdownMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htDropdownMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htDropdownMenu table tbody tr td.current,.htDropdownMenu table tbody tr td.zeroclipboard-is-hover{background:#e9e9e9}.htDropdownMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;cursor:default;height:0;padding:0}.htDropdownMenu table tbody tr td.htDisabled{color:#999}.htDropdownMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htDropdownMenu:not(.htGhostTable) table tbody tr.htHidden{display:none}.htDropdownMenu table tbody tr td .htItemWrapper,[dir=rtl].htDropdownMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:10px}.htDropdownMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute;right:0}[dir=rtl].htDropdownMenu table tbody tr td div span.selected{left:0;right:4px}.htDropdownMenu .ht_master .wtHolder{overflow:hidden} -/*! - * Handsontable Filters - */.htFiltersConditionsMenu:not(.htGhostTable){display:none;position:absolute;z-index:1070}.htFiltersConditionsMenu .ht_clone_bottom,.htFiltersConditionsMenu .ht_clone_bottom_inline_start_corner,.htFiltersConditionsMenu .ht_clone_inline_start,.htFiltersConditionsMenu .ht_clone_top,.htFiltersConditionsMenu .ht_clone_top_inline_start_corner{display:none}.htFiltersConditionsMenu table.htCore{border-color:#bbb;border-style:solid;border-width:1px 2px 2px 1px}.htFiltersConditionsMenu .wtBorder{visibility:hidden}.htFiltersConditionsMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htFiltersConditionsMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htFiltersConditionsMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htFiltersConditionsMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htFiltersConditionsMenu table tbody tr td.current,.htFiltersConditionsMenu table tbody tr td.zeroclipboard-is-hover{background:#e9e9e9}.htFiltersConditionsMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;height:0;padding:0}.htFiltersConditionsMenu table tbody tr td.htDisabled{color:#999}.htFiltersConditionsMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htFiltersConditionsMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:10px}.htFiltersConditionsMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute}.htFiltersConditionsMenu .ht_master .wtHolder{overflow:hidden}.handsontable .htMenuFiltering{border-bottom:1px dotted #ccc;height:135px;overflow:hidden}.handsontable .ht_master table td.htCustomMenuRenderer{background-color:#fff;cursor:auto}.handsontable .htFiltersMenuLabel{font-size:.75em}.handsontable .htFiltersMenuActionBar{padding-bottom:3px;padding-top:10px;text-align:center}.handsontable .htFiltersMenuCondition.border{border-bottom:1px dotted #ccc!important}.handsontable .htFiltersMenuCondition .htUIInput{padding:0 0 5px}.handsontable .htFiltersMenuValue{border-bottom:1px dotted #ccc!important}.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch{padding:0}.handsontable .htFiltersMenuCondition .htUIInput input,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input{box-sizing:border-box;font-family:inherit;font-size:.75em;padding:4px;width:100%}.htUIMultipleSelect .ht_master .wtHolder{overflow-y:scroll}.handsontable .htFiltersActive .changeType{background-color:#d2e0d9;border:1px solid #509272;color:#18804e}.handsontable .htUISelectAll{margin-left:0;margin-right:10px}[dir=rtl].handsontable .htUISelectAll{margin-left:10px;margin-right:0}.handsontable .htUIClearAll,.handsontable .htUISelectAll{display:inline-block}.handsontable .htUIClearAll a,.handsontable .htUISelectAll a{font-size:.75em}.handsontable .htUISelectionControls{text-align:right}[dir=rtl].handsontable .htUISelectionControls{text-align:left}.handsontable .htCheckboxRendererInput{height:1em;margin:0 5px 0 0;vertical-align:middle}[dir=rtl].handsontable .htCheckboxRendererInput{margin-left:5px;margin-right:0}.handsontable .htUIInput{padding:3px 0 7px;position:relative;text-align:center}.handsontable .htUIInput input{border:1px solid #d2d1d1;border-radius:2px}.handsontable .htUIInput input:focus{outline:0}.handsontable .htUIInputIcon{position:absolute}.handsontable .htUIInput.htUIButton{cursor:pointer;display:inline-block}.handsontable .htUIInput.htUIButton input{background-color:#eee;color:#000;cursor:pointer;font-family:inherit;font-size:.75em;font-weight:700;height:19px;min-width:64px}.handsontable .htUIInput.htUIButton input:hover{border-color:#b9b9b9}.handsontable .htUIInput.htUIButtonOK{margin-left:0;margin-right:10px}[dir=rtl].handsontable .htUIInput.htUIButtonOK{margin-left:10px;margin-right:0}.handsontable .htUIInput.htUIButtonOK input{background-color:#0f9d58;border-color:#18804e;color:#fff}.handsontable .htUIInput.htUIButtonOK input:hover{border-color:#1a6f46}.handsontable .htUISelect{cursor:pointer;margin-bottom:7px;position:relative}.handsontable .htUISelectCaption{background-color:#e8e8e8;border:1px solid #d2d1d1;border-radius:2px;font-family:inherit;font-size:.75em;font-weight:700;overflow:hidden;padding:3px 20px 3px 10px;text-overflow:ellipsis;white-space:nowrap}.handsontable .htUISelectCaption:hover{background-color:#e8e8e8;border:1px solid #b9b9b9}.handsontable .htUISelectDropdown:after{content:"▲";font-size:7px;position:absolute;right:10px;top:0}.handsontable .htUISelectDropdown:before{content:"▼";font-size:7px;position:absolute;right:10px;top:8px}.handsontable .htUIMultipleSelect .handsontable .htCore{border:none}.handsontable .htUIMultipleSelect .handsontable .htCore td:hover{background-color:#f5f5f5}.handsontable .htUIMultipleSelectSearch input{border:1px solid #d2d1d1;border-radius:2px;padding:3px}.handsontable .htUIRadio{display:inline-block;height:100%;margin-left:0;margin-right:5px}[dir=rtl].handsontable .htUIRadio{margin-left:5px;margin-right:0}.handsontable .htUIRadio:last-child{margin-right:0}.handsontable .htUIRadio>input[type=radio]{margin-left:0;margin-right:.5ex}[dir=rtl].handsontable .htUIRadio>input[type=radio]{margin-left:.5ex;margin-right:0}.handsontable .htUIRadio label{vertical-align:middle}.handsontable .htFiltersMenuOperators{padding-bottom:5px}.handsontable th.beforeHiddenColumn{position:relative}.handsontable th.afterHiddenColumn:before,.handsontable th.beforeHiddenColumn:after{color:#bbb;font-size:5pt;position:absolute;top:50%;transform:translateY(-50%)}.handsontable th.afterHiddenColumn{position:relative}.handsontable th.beforeHiddenColumn:after{content:"◀";right:1px}[dir=rtl].handsontable th.beforeHiddenColumn:after{content:"▶";left:1px;right:auto}.handsontable th.afterHiddenColumn:before{content:"▶";left:1px}[dir=rtl].handsontable th.afterHiddenColumn:before{content:"◀";left:auto;right:1px} -/*! - * Handsontable HiddenRows - */.handsontable th.afterHiddenRow:after,.handsontable th.beforeHiddenRow:before{color:#bbb;font-size:6pt;left:2px;line-height:6pt;position:absolute}.handsontable th.afterHiddenRow,.handsontable th.beforeHiddenRow{position:relative}.handsontable th.beforeHiddenRow:before{bottom:2px;content:"▲"}.handsontable th.afterHiddenRow:after{content:"▼";top:2px}.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight:after,.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight:before{color:#eee}.handsontable td.afterHiddenRow.firstVisibleRow,.handsontable th.afterHiddenRow.firstVisibleRow{border-top:1px solid #ccc}.htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_inline_start td:first-of-type,.htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_top_inline_start_corner th:nth-child(2){border-left:0}.handsontable.ht__manualColumnMove.after-selection--columns thead th.ht__highlight{cursor:move;cursor:-moz-grab;cursor:-webkit-grab;cursor:grab}.handsontable.ht__manualColumnMove.on-moving--columns,.handsontable.ht__manualColumnMove.on-moving--columns thead th.ht__highlight{cursor:move;cursor:-moz-grabbing;cursor:-webkit-grabbing;cursor:grabbing}.handsontable.ht__manualColumnMove.on-moving--columns .manualColumnResizer{display:none}.handsontable .ht__manualColumnMove--backlight,.handsontable .ht__manualColumnMove--guideline{display:none;height:100%;position:absolute}.handsontable .ht__manualColumnMove--guideline{background:#757575;margin-inline-end:0;margin-inline-start:-1px;top:0;width:2px;z-index:205}.handsontable .ht__manualColumnMove--backlight{background:#343434;background:rgba(52,52,52,.25);display:none;pointer-events:none;z-index:205}.handsontable.on-moving--columns .ht__manualColumnMove--backlight,.handsontable.on-moving--columns.show-ui .ht__manualColumnMove--guideline{display:block}.handsontable .wtHider{position:relative}.handsontable.ht__manualRowMove.after-selection--rows tbody th.ht__highlight{cursor:move;cursor:-moz-grab;cursor:-webkit-grab;cursor:grab}.handsontable.ht__manualRowMove.on-moving--rows,.handsontable.ht__manualRowMove.on-moving--rows tbody th.ht__highlight{cursor:move;cursor:-moz-grabbing;cursor:-webkit-grabbing;cursor:grabbing}.handsontable.ht__manualRowMove.on-moving--rows .manualRowResizer{display:none}.handsontable .ht__manualRowMove--backlight,.handsontable .ht__manualRowMove--guideline{display:none;position:absolute;width:100%}.handsontable .ht__manualRowMove--guideline{background:#757575;height:2px;left:0;margin-top:-1px;z-index:205}.handsontable .ht__manualRowMove--backlight{background:#343434;background:rgba(52,52,52,.25);display:none;pointer-events:none;z-index:205}.handsontable.on-moving--rows .ht__manualRowMove--backlight,.handsontable.on-moving--rows.show-ui .ht__manualRowMove--guideline{display:block}.handsontable tbody td[rowspan][class*=area][class*=highlight]:not([class*=fullySelectedMergedCell]):before{opacity:0}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-0]:before,.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-multiple]:before{opacity:.1}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-1]:before{opacity:.2}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-2]:before{opacity:.27}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-3]:before{opacity:.35}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-4]:before{opacity:.41}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-5]:before{opacity:.47}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-6]:before{opacity:.54}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-7]:before{opacity:.58}.handsontable span.colHeader.columnSorting:after{font-size:8px;height:8px;left:unset;line-height:1.1;margin-top:-2px;padding-left:5px;padding-right:unset;position:absolute;right:-15px;text-decoration:underline;top:50%}[dir=rtl].handsontable span.colHeader.columnSorting:after{left:-15px;padding-left:unset;padding-right:5px;right:unset}.handsontable span.colHeader.columnSorting:after{text-decoration:none}.handsontable span.colHeader.columnSorting[class*=" sort-"]:after,.handsontable span.colHeader.columnSorting[class^=sort-]:after{content:"+"}.handsontable span.colHeader.columnSorting.sort-1:after{content:"1"}.handsontable span.colHeader.columnSorting.sort-2:after{content:"2"}.handsontable span.colHeader.columnSorting.sort-3:after{content:"3"}.handsontable span.colHeader.columnSorting.sort-4:after{content:"4"}.handsontable span.colHeader.columnSorting.sort-5:after{content:"5"}.handsontable span.colHeader.columnSorting.sort-6:after{content:"6"}.handsontable span.colHeader.columnSorting.sort-7:after{content:"7"}.htGhostTable th div button.changeType+span.colHeader.columnSorting:not(.indicatorDisabled){padding-right:5px}.handsontable thead th.hiddenHeader:not(:first-of-type){display:none}.handsontable th.ht_nestingLevels{padding-left:7px;text-align:left}[dir=rtl].handsontable th.ht_nestingLevels{padding-right:7px;text-align:right}.handsontable th div.ht_nestingLevels{display:inline-block;left:11px;position:absolute;right:unset}[dir=rtl].handsontable th div.ht_nestingLevels{left:unset;right:11px}.handsontable.innerBorderInlineStart th div.ht_nestingLevels,.handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingLevels{left:unset;right:10px}[dir=rtl].handsontable.innerBorderInlineStart th div.ht_nestingLevels,[dir=rtl].handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingLevels{left:10px;right:unset}.handsontable th span.ht_nestingLevel{display:inline-block}.handsontable th span.ht_nestingLevel_empty{display:inline-block;float:left;height:1px;width:10px}[dir=rtl].handsontable th span.ht_nestingLevel_empty{float:right}.handsontable th span.ht_nestingLevel:after{bottom:3px;content:"┐";display:inline-block;font-size:9px;position:relative}.handsontable th div.ht_nestingButton{cursor:pointer;display:inline-block;left:unset;position:absolute;right:-2px}[dir=rtl].handsontable th div.ht_nestingButton{left:-2px;right:unset}.handsontable th div.ht_nestingButton.ht_nestingExpand:after{content:"+"}.handsontable th div.ht_nestingButton.ht_nestingCollapse:after{content:"-"}.handsontable.innerBorderInlineStart th div.ht_nestingButton,.handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingButton{left:unset;right:0}[dir=rtl].handsontable.innerBorderInlineStart th div.ht_nestingButton,[dir=rtl].handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingButton{left:0;right:unset} - .custom-cell { text-align: center; padding: 5px !important; @@ -70,4 +23,57 @@ } .del-btn:hover { background-color: #d00; +} + +.list-wrapper { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09); + background-color: #fff; + opacity: 1; + z-index: 300; + position: absolute; +} + +.list-wrapper:hover .option:not(:hover) { + background-color: transparent !important; +} +.list-dropdown { + max-height: 250px; + overflow: auto; + z-index: 999; + top: 100%; + left: 0; + border: 1px solid #ddd; +} + +.dd-searchbox { + padding: 0.5rem; + background-color: #fff; + color: #000; + border: none; + outline: none; +} +.dd-searchbox:focus { + border-color:#12CBC4; + box-shadow: inset 0 0 0 2px #5292f7; + color: #000; +} + +.list-wrapper ul { + padding: 0; +} + +.option { + cursor: pointer; + outline: none; + padding: 0.5rem; + list-style: none; +} + +.option:hover, .option:focus { + background-color: #f6f6f6 !important; +} + +.option.selected { + font-weight: 600; + background-color: #f6f6f6 !important; } \ No newline at end of file diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx index 787fbb4ad..33aa8a1ab 100644 --- a/apps/widget/src/components/Common/Table/Table.tsx +++ b/apps/widget/src/components/Common/Table/Table.tsx @@ -1,6 +1,6 @@ /* eslint-disable max-len */ import { forwardRef } from 'react'; -import { HotTable } from '@handsontable/react'; +import { HotTable, HotTableClass } from '@handsontable/react'; // eslint-disable-next-line id-length import $ from 'jquery'; @@ -40,6 +40,7 @@ registerEditor(BaseEditor); registerValidator(dateValidator); +import 'handsontable/dist/handsontable.full.min.css'; import './HandsonTable.styles.min.css'; interface TableProps { @@ -115,7 +116,7 @@ Handsontable.renderers.registerRenderer('del', function renderer(instance, TD, r return TD; }); -export const Table = forwardRef( +export const Table = forwardRef( ( { afterRender, diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx index 3c7bd5cbf..94145cf2f 100644 --- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx +++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx @@ -1,5 +1,5 @@ import { Stack } from '@mantine/core'; -import { HotTable } from '@handsontable/react'; +import { HotTableClass } from '@handsontable/react'; import { useRef, useState, useEffect } from 'react'; import { PhasesEnum } from '@types'; @@ -21,7 +21,7 @@ interface IPhase3Props { } export function Phase3(props: IPhase3Props) { - const tableRef = useRef(null); + const tableRef = useRef(null); const { onNextClick, onPrevClick } = props; const { page, diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx index bb9221f74..a9a4c44c0 100644 --- a/apps/widget/src/hooks/Phase3/usePhase3.tsx +++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { BaseEditor } from 'handsontable/editors'; import { useMutation, useQuery } from '@tanstack/react-query'; import { notifier } from '@util'; @@ -7,6 +8,7 @@ import { HotItemSchema } from '@types'; import { logAmplitudeEvent } from '@amplitude'; import { useAPIState } from '@store/api.context'; import { useAppState } from '@store/app.context'; +import { CellProperties } from 'handsontable/settings'; import { ColumnTypesEnum, ISchemaColumn, @@ -23,6 +25,109 @@ interface IUsePhase3Props { const defaultPage = 1; +class SelectEditor extends BaseEditor { + [x: string]: any; + timer: any; + focus() { + this.selectInput.focus(); + } + close() { + this._opened = false; + this.listDiv.style.display = 'none'; + } + getValue() { + return this.selectInput.value; + } + setValue(value) { + this.selectInput.value = value; + } + open() { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const { top, start, width } = this.getEditedCellRect(); + this._opened = true; + this.selectInput.focus(); + + this.listDiv.classList.add('open'); + const selectStyle = this.listDiv.style; + + selectStyle.top = `${top}px`; + selectStyle.minWidth = `${width}px`; + selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`; + selectStyle.margin = '0px'; + selectStyle.display = ''; + } + prepare( + row: number, + column: number, + prop: string | number, + TD: HTMLTableCellElement, + originalValue: any, + cellProperties: CellProperties + ): void { + super.prepare(row, column, prop, TD, originalValue, cellProperties); + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + this.prepareOptions(this.cellProperties.selectOptions); + } + prepareOptions(options: string[], search?: string) { + this.selectUl.innerHTML = ''; + + if (!options || !options.length) return; + + if (search) { + options = options.filter((key) => key.toLowerCase().includes(search.toLowerCase())); + } + + options.forEach((key) => { + const liElement = this.hot.rootDocument.createElement('li'); + liElement.classList.add('option'); + liElement.dataset.value = key; + liElement.dataset.displayText = key; + liElement.innerText = key; + liElement.onclick = () => { + this.selectInput.value = key; + this.finishEditing(); + }; + this.selectUl.appendChild(liElement); + }); + } + search() { + const text = this.selectInput.value; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + this.prepareOptions(this.cellProperties.selectOptions, text); + } + init() { + const listDiv = this.hot.rootDocument.createElement('div'); + listDiv.classList.add('list-wrapper'); + + const input = this.hot.rootDocument.createElement('input'); + input.classList.add('dd-searchbox'); + input.type = 'search'; + input.onkeydown = () => { + this.timer = setTimeout(() => { + this.search(); + }, 200); + }; + + listDiv.appendChild(input); + + const listDropdownWrapper = this.hot.rootDocument.createElement('div'); + listDropdownWrapper.classList.add('list-dropdown'); + this.selectUl = this.hot.rootDocument.createElement('ul'); + listDropdownWrapper.appendChild(this.selectUl); + listDiv.appendChild(listDropdownWrapper); + + this.listDiv = listDiv; + this.selectInput = input; + + this.hot.rootElement.appendChild(this.listDiv); + } +} + export function usePhase3({ onNext }: IUsePhase3Props) { const { api } = useAPIState(); const [page, setPage] = useState(defaultPage); @@ -66,7 +171,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) { break; case ColumnTypesEnum.SELECT: columnItem.type = 'text'; - columnItem.editor = 'select'; + columnItem.editor = SelectEditor; columnItem.renderer = 'custom'; columnItem.selectOptions = column.selectValues; break; diff --git a/apps/widget/src/types/utility.types.ts b/apps/widget/src/types/utility.types.ts index 6c9755e76..fcb6a09fb 100644 --- a/apps/widget/src/types/utility.types.ts +++ b/apps/widget/src/types/utility.types.ts @@ -7,7 +7,7 @@ export type HotItemSchema = { data: string; className?: string; readOnly?: boolean; - editor?: 'base' | 'select' | boolean; + editor?: 'base' | 'select' | boolean | any; dateFormat?: string; correctFormat?: boolean; selectOptions?: string[]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60ea8d5c2..5e24eb397 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -533,8 +533,8 @@ importers: specifier: ^11.10.5 version: 11.11.4(@types/react@18.2.61)(react@18.2.0) '@handsontable/react': - specifier: ^13.1.0 - version: 13.1.0(handsontable@13.1.0) + specifier: ^14.2.0 + version: 14.2.0(handsontable@14.2.0) '@impler/client': specifier: ^0.17.0 version: link:../../packages/client @@ -581,8 +581,8 @@ importers: specifier: ^2.0.5 version: 2.0.5 handsontable: - specifier: ^13.1.0 - version: 13.1.0 + specifier: ^14.2.0 + version: 14.2.0 http-server: specifier: ^14.1.1 version: 14.1.1 @@ -3745,12 +3745,16 @@ packages: /@gar/promisify@1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} - /@handsontable/react@13.1.0(handsontable@13.1.0): - resolution: {integrity: sha512-dl5r1VHw2A8UTIprigfIc/DaXXrKovpMcn8s9GDHpdpqBPwOCDsp5ETdqiSeZ2y+TiNydUeJhb/z+N2T+rsP+g==} + /@handsontable/pikaday@1.0.0: + resolution: {integrity: sha512-1VN6N38t5/DcjJ7y7XUYrDx1LuzvvzlrFdBdMG90Qo1xc8+LXHqbWbsTEm5Ec5gXTEbDEO53vUT35R+2COmOyg==} + dev: false + + /@handsontable/react@14.2.0(handsontable@14.2.0): + resolution: {integrity: sha512-LKu5NJ9BU3gk21LXRvdtgUqYfyP5fbCTcFntZk0G6x25D7hPvnLJqH9jk+tj8esyff+Xpe9dDIVbqoxfngsc8w==} peerDependencies: - handsontable: '>=13.0.0' + handsontable: '>=14.0.0' dependencies: - handsontable: 13.1.0 + handsontable: 14.2.0 dev: false /@humanwhocodes/config-array@0.11.14: @@ -14965,9 +14969,10 @@ packages: optionalDependencies: uglify-js: 3.17.4 - /handsontable@13.1.0: - resolution: {integrity: sha512-KqJtS3rJeOWsFWCffnDlM8fcLMTqmW+Vbc7OCVM4X7dYDpfefgFerjNLIxLfT9xohcQoUOS1jcvXwV8dwSppVQ==} + /handsontable@14.2.0: + resolution: {integrity: sha512-zVb7nFja1plmlRsDuBkDskn/EwO7iutplFqlmvIgXrd9NIGmeI+5tBXHH8UNCp2cARGc05UijcK5p43MxXZR9A==} dependencies: + '@handsontable/pikaday': 1.0.0 '@types/pikaday': 1.7.4 core-js: 3.36.0 dompurify: 2.4.7 @@ -20002,6 +20007,7 @@ packages: /path-dirname@1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} + requiresBuild: true /path-exists@2.1.0: resolution: {integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==}