@onewelcome/react-lib-components 7.1.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DataGrid/DataGrid.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGrid.cjs.js.map +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridBody.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridBody.cjs.js.map +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridCell/DataGridCell.cjs.js.map +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGridBody/DataGridRow/DataGridRow.cjs.js.map +1 -1
- package/dist/cjs/DataGrid/DataGridFilters/DataGridSearchbar.cjs.js +2 -0
- package/dist/cjs/DataGrid/DataGridFilters/DataGridSearchbar.cjs.js.map +1 -0
- package/dist/cjs/DataGrid/DataGridFilters/DataGridToolbar.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGridFilters/DataGridToolbar.cjs.js.map +1 -1
- package/dist/cjs/DataGrid/DataGridFilters/DataGridToolbar.module.scss.cjs.js +1 -1
- package/dist/cjs/DataGrid/DataGridFilters/DataGridToolbarWrapper.cjs.js +2 -0
- package/dist/cjs/DataGrid/DataGridFilters/DataGridToolbarWrapper.cjs.js.map +1 -0
- package/dist/cjs/Form/FileUpload/FileUpload.module.scss.cjs.js +1 -1
- package/dist/cjs/Form/Select/MultiSelect/MultiSelect.cjs.js +1 -1
- package/dist/cjs/Form/Select/MultiSelect/MultiSelect.cjs.js.map +1 -1
- package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js +1 -1
- package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js.map +1 -1
- package/dist/cjs/src/components/DataGrid/DataGrid.d.ts +3 -4
- package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridBody.d.ts +1 -0
- package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.d.ts +1 -0
- package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.d.ts +1 -0
- package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridSearchbar.d.ts +10 -0
- package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts +3 -4
- package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.d.ts +7 -0
- package/dist/esm/DataGrid/DataGrid.esm.js +7 -3
- package/dist/esm/DataGrid/DataGrid.esm.js.map +1 -1
- package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js +2 -1
- package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js.map +1 -1
- package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js +22 -3
- package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js.map +1 -1
- package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js +2 -1
- package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js.map +1 -1
- package/dist/esm/DataGrid/DataGridFilters/DataGridSearchbar.esm.js +43 -0
- package/dist/esm/DataGrid/DataGridFilters/DataGridSearchbar.esm.js.map +1 -0
- package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js +4 -5
- package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js.map +1 -1
- package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.module.scss.esm.js +2 -2
- package/dist/esm/DataGrid/DataGridFilters/DataGridToolbarWrapper.esm.js +25 -0
- package/dist/esm/DataGrid/DataGridFilters/DataGridToolbarWrapper.esm.js.map +1 -0
- package/dist/esm/Form/FileUpload/FileUpload.module.scss.esm.js +1 -1
- package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js +1 -1
- package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js.map +1 -1
- package/dist/esm/Form/Select/SingleSelect/Select.esm.js +1 -1
- package/dist/esm/Form/Select/SingleSelect/Select.esm.js.map +1 -1
- package/dist/esm/src/components/DataGrid/DataGrid.d.ts +3 -4
- package/dist/esm/src/components/DataGrid/DataGridBody/DataGridBody.d.ts +1 -0
- package/dist/esm/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.d.ts +1 -0
- package/dist/esm/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.d.ts +1 -0
- package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridSearchbar.d.ts +10 -0
- package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts +3 -4
- package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.d.ts +7 -0
- package/package.json +1 -1
- package/src/components/DataGrid/DataGrid.tsx +11 -6
- package/src/components/DataGrid/DataGridBody/DataGridBody.tsx +3 -0
- package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx +34 -2
- package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx +3 -0
- package/src/components/DataGrid/DataGridFilters/DataGridSearchbar.tsx +68 -0
- package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss +6 -1
- package/src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx +13 -22
- package/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.tsx +33 -0
- package/src/components/Form/FileUpload/FileUpload.module.scss +1 -2
- package/src/components/Form/Select/MultiSelect/MultiSelect.tsx +1 -3
- package/src/components/Form/Select/SingleSelect/Select.tsx +1 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.DataGridToolbar-module_sr-only__Xirwy{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DataGridToolbar-module_hidden__cjs5x{display:none}.DataGridToolbar-module_slide-in__t3lbD{animation:DataGridToolbar-module_slide-in__t3lbD .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-in__t3lbD{animation-duration:.1ms}}.DataGridToolbar-module_slide-out__-mEfY{animation:DataGridToolbar-module_slide-out__-mEfY .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-out__-mEfY{animation-duration:.1ms}}@keyframes DataGridToolbar-module_slide-in__t3lbD{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar-module_slide-out__-mEfY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.DataGridToolbar-
|
|
4
|
-
var classes = {"sr-only":"DataGridToolbar-module_sr-only__Xirwy","hidden":"DataGridToolbar-module_hidden__cjs5x","slide-in":"DataGridToolbar-module_slide-in__t3lbD","slide-out":"DataGridToolbar-module_slide-out__-mEfY","
|
|
3
|
+
var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.DataGridToolbar-module_sr-only__Xirwy{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DataGridToolbar-module_hidden__cjs5x{display:none}.DataGridToolbar-module_slide-in__t3lbD{animation:DataGridToolbar-module_slide-in__t3lbD .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-in__t3lbD{animation-duration:.1ms}}.DataGridToolbar-module_slide-out__-mEfY{animation:DataGridToolbar-module_slide-out__-mEfY .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-out__-mEfY{animation-duration:.1ms}}@keyframes DataGridToolbar-module_slide-in__t3lbD{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar-module_slide-out__-mEfY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.DataGridToolbar-module_wrapper__wEHlo{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-start;padding-bottom:1rem;width:100%}.DataGridToolbar-module_wrapper__wEHlo .DataGridToolbar-module_searchbar__PnKiv{flex-basis:15rem;min-width:7rem}.DataGridToolbar-module_wrapper__wEHlo .DataGridToolbar-module_actions-wrapper__oEYeN{align-items:center;display:flex;gap:.5rem;justify-content:flex-start}.DataGridToolbar-module_wrapper__wEHlo .DataGridToolbar-module_clear-button__4Zdc7{background:none;border:none;cursor:pointer}.DataGridToolbar-module_wrapper__wEHlo .DataGridToolbar-module_clear-button__4Zdc7:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.DataGridToolbar-module_wrapper__wEHlo .DataGridToolbar-module_clear-button__4Zdc7 .DataGridToolbar-module_caption__Jf-jO{color:var(--color-primary500);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;text-decoration:underline}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0YsdUNBT0Usa0JBQXNCLENBQ3RCLFFBQVMsQ0FMVCxVQUFXLENBRVgsV0FBWSxDQUNaLGVBQWdCLENBRmhCLFNBQVUsQ0FIVixpQkFBa0IsQ0FDbEIsU0FPRixDQUVBLHNDQUNFLFlBQ0YsQ0FFQSx3Q0FDRSw2REFDRixDQUNBLHVDQUNFLHdDQUNFLHVCQUNGLENBQ0YsQ0FFQSx5Q0FDRSw4REFDRixDQUNBLHVDQUNFLHlDQUNFLHVCQUNGLENBQ0YsQ0FFQSxrREFDRSxHQUNFLDJCQUNGLENBQ0EsR0FDRSx1QkFDRixDQUNGLENBQ0EsbURBQ0UsR0FDRSx1QkFDRixDQUNBLEdBQ0UsMkJBQ0YsQ0FDRixDQUNBLHVDQUVFLGtCQUFtQixDQURuQixZQUFhLENBR2IsY0FBZSxDQUNmLFNBQVcsQ0FGWCwwQkFBMkIsQ0FJM0IsbUJBQW9CLENBRHBCLFVBRUYsQ0FDQSxnRkFFRSxnQkFBaUIsQ0FEakIsY0FFRixDQUNBLHNGQUVFLGtCQUFtQixDQURuQixZQUFhLENBR2IsU0FBVyxDQURYLDBCQUVGLENBQ0EsbUZBQ0UsZUFBZ0IsQ0FDaEIsV0FBWSxDQUNaLGNBQ0YsQ0FDQSxpR0FHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0EsMEhBS0UsNkJBQThCLENBSDlCLG9DQUFxQyxDQUNyQyx3Q0FBeUMsQ0FGekMsUUFBUyxDQUdULHlCQUVGIiwiZmlsZSI6IkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLndyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAwLjVyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nLWJvdHRvbTogMXJlbTtcbn1cbi53cmFwcGVyIC5zZWFyY2hiYXIge1xuICBtaW4td2lkdGg6IDdyZW07XG4gIGZsZXgtYmFzaXM6IDE1cmVtO1xufVxuLndyYXBwZXIgLmFjdGlvbnMtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgZ2FwOiAwLjVyZW07XG59XG4ud3JhcHBlciAuY2xlYXItYnV0dG9uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4ud3JhcHBlciAuY2xlYXItYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICBvdXRsaW5lOiAwLjEyNXJlbSBzb2xpZCB2YXIoLS1jb2xvci1mb2N1cyk7XG4gIG91dGxpbmUtb2Zmc2V0OiAwO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1mb2N1cy1ib3JkZXItcmFkaXVzKTtcbn1cbi53cmFwcGVyIC5jbGVhci1idXR0b24gLmNhcHRpb24ge1xuICBtYXJnaW46IDA7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWRhdGEtZ3JpZCk7XG4gIGxpbmUtaGVpZ2h0OiB2YXIoLS1kYXRhLWdyaWQtbGluZS1oZWlnaHQpO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnk1MDApO1xufSJdfQ== */";
|
|
4
|
+
var classes = {"sr-only":"DataGridToolbar-module_sr-only__Xirwy","hidden":"DataGridToolbar-module_hidden__cjs5x","slide-in":"DataGridToolbar-module_slide-in__t3lbD","slide-out":"DataGridToolbar-module_slide-out__-mEfY","wrapper":"DataGridToolbar-module_wrapper__wEHlo","searchbar":"DataGridToolbar-module_searchbar__PnKiv","actions-wrapper":"DataGridToolbar-module_actions-wrapper__oEYeN","clear-button":"DataGridToolbar-module_clear-button__4Zdc7","caption":"DataGridToolbar-module_caption__Jf-jO"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { classes as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classes from './DataGridToolbar.module.scss.esm.js';
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
* Copyright 2022 OneWelcome B.V.
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
*/
|
|
19
|
+
const DataGridToolbarWrapperComponent = ({ children, ...rest }, ref) => {
|
|
20
|
+
return (React.createElement("div", { ref: ref, className: classes["wrapper"], ...rest }, children));
|
|
21
|
+
};
|
|
22
|
+
const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);
|
|
23
|
+
|
|
24
|
+
export { DataGridToolbarWrapper, DataGridToolbarWrapperComponent };
|
|
25
|
+
//# sourceMappingURL=DataGridToolbarWrapper.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataGridToolbarWrapper.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ForwardRefRenderFunction } from \"react\";\nimport classes from \"./DataGridToolbar.module.scss\";\n\ntype Props = ComponentPropsWithRef<\"div\">;\n\nexport const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n { children, ...rest },\n ref\n) => {\n return (\n <div ref={ref} className={classes[\"wrapper\"]} {...rest}>\n {children}\n </div>\n );\n};\n\nexport const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AAOI,MAAM,+BAA+B,GAAoD,CAC9F,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACrB,GAAG,KACD;AACF,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAM,GAAA,IAAI,IACnD,QAAQ,CACL,EACN;AACJ,EAAE;AAEW,MAAA,sBAAsB,GAAG,KAAK,CAAC,UAAU,CAAC,+BAA+B;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.FileUpload-module_sr-only__Awag4{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.FileUpload-module_hidden__JayBD{display:none}.FileUpload-module_slide-in__w7j8k{animation:FileUpload-module_slide-in__w7j8k .5s forwards}@media (prefers-reduced-motion:reduce){.FileUpload-module_slide-in__w7j8k{animation-duration:.1ms}}.FileUpload-module_slide-out__tZ-rV{animation:FileUpload-module_slide-out__tZ-rV .5s forwards}@media (prefers-reduced-motion:reduce){.FileUpload-module_slide-out__tZ-rV{animation-duration:.1ms}}@keyframes FileUpload-module_slide-in__w7j8k{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes FileUpload-module_slide-out__tZ-rV{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.FileUpload-module_file-upload-wrapper__CIx-a{display:flex;flex-direction:column}.FileUpload-module_file-dropzone__O-VP-{background-color:var(--input-background-color);border-radius:var(--input-border-radius);padding:.25rem 1.25rem;position:relative;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in-out}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_file-upload-title__CEPD-{font-size:.875rem;font-weight:400;margin:0 0 .25rem}@media (prefers-reduced-motion:reduce){.FileUpload-module_file-dropzone__O-VP-{transition-duration:.1ms}}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 .FileUpload-module_file-upload-title__CEPD-,.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 span[data-icon-status]{color:var(--error)}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 .FileUpload-module_file-select__sW1Pn{border-color:var(--error)}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_success__GqO-7 span[data-icon-status]{color:var(--success)}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_disabled__hvZQb{pointer-events:none}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_disabled__hvZQb p{color:var(--color-blue-grey400)}.FileUpload-module_file-dropzone__O-VP- span[data-icon-status]{font-size:1.25rem;position:absolute;right:2rem;top:auto}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_file-upload-title-mandatory__xEZ-6{color:var(--color-red500)}.FileUpload-module_upload-button-wrapper__vVTvg{background:var(--color-blue-grey25);padding:4px}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U{background-color:var(--color-primary-light);border:var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey500);border-radius:var(--input-border-radius);inset:0;margin:0;padding:0;pointer-events:none;position:absolute;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in-out}@media (prefers-reduced-motion:reduce){.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U{transition-duration:.1ms}}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U:before{color:var(--color-primary);content:\"Drop here\";display:block;padding-top:2rem;text-align:center}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR:hover .FileUpload-module_outline__QfJ8U{background-color:var(--color-primary-light)}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_file-select__sW1Pn{position:relative}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_error__q2B-7 .FileUpload-module_outline__QfJ8U{border-color:var(--error)}.FileUpload-module_file-selector-sub-text__nCXMq{color:var(--greyed-out);padding:0 1.25rem}.FileUpload-module_file-selector-sub-text__nCXMq.FileUpload-module_error__q2B-7{color:var(--error);display:block}.FileUpload-module_file-select__sW1Pn{align-items:center;border:var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey100);display:flex;flex-direction:row;justify-content:center;padding:1.25rem}.FileUpload-module_file-select__sW1Pn [class*=file]{font-size:1.25rem;margin-left:.5rem}.FileUpload-module_file-select__sW1Pn [class*=typography]{margin-bottom:0}.FileUpload-module_upload-input__wteSl{border:none;bottom:0;cursor:pointer;display:block;left:0;opacity:0;position:absolute;right:0;text-transform:none;top:0;width:100%}.FileUpload-module_upload-input__wteSl:focus{outline:none}.FileUpload-module_file-upload-btn__M2Fg-{position:relative}.FileUpload-module_file-list__GLggq{list-style:none;margin:.25rem 0;padding:0}.FileUpload-module_file-list__GLggq li:not(:last-child){margin-bottom:.5rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVVcGxvYWQubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0U7QUFDRjs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLGtDQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSxpQ0FDRSxZQUNGLENBRUEsbUNBQ0Usd0RBQ0YsQ0FFQSx1Q0FDRSxtQ0FDRSx1QkFDRixDQUNGLENBQ0Esb0NBQ0UseURBQ0YsQ0FFQSx1Q0FDRSxvQ0FDRSx1QkFDRixDQUNGLENBQ0EsNkNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLDhDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YsQ0FDQSw4Q0FDRSxZQUFhLENBQ2IscUJBQ0YsQ0FFQSx3Q0FFRSw4Q0FBK0MsQ0FEL0Msd0NBQXlDLENBRXpDLHNCQUF3QixDQUN4QixpQkFBa0IsQ0FFbEIsdUJBQXlCLENBRHpCLHVCQUF3QixDQUV4QixzQ0FDRixDQUNBLG9GQUVFLGlCQUFtQixDQUNuQixlQUFnQixDQUZoQixpQkFHRixDQUNBLHVDQUNFLHdDQUNFLHdCQUNGLENBQ0YsQ0FDQSxpTkFFRSxrQkFDRixDQUNBLDZHQUNFLHlCQUNGLENBQ0EsZ0dBQ0Usb0JBQ0YsQ0FDQSwwSEFDRSxtQkFDRixDQUNBLDRIQUNFLCtCQUNGLENBQ0EsK0RBQ0UsaUJBQWtCLENBQ2xCLGlCQUFrQixDQUVsQixVQUFXLENBRFgsUUFFRixDQUNBLDhGQUNFLHlCQUNGLENBRUEsZ0RBQ0UsbUNBQW9DLENBQ3BDLFdBQ0YsQ0FDQSx1SEFRRSwyQ0FBNEMsQ0FGNUMsOEZBQStGLENBQy9GLHdDQUF5QyxDQUZ6QyxPQUFRLENBRlIsUUFBUyxDQUNULFNBQVUsQ0FIVixtQkFBb0IsQ0FDcEIsaUJBQWtCLENBUWxCLHVCQUF5QixDQUR6Qix1QkFBd0IsQ0FFeEIsc0NBQ0YsQ0FDQSx1Q0FDRSx1SEFDRSx3QkFDRixDQUNGLENBQ0EsOEhBSUUsMEJBQTJCLENBSDNCLG1CQUFvQixDQUVwQixhQUFjLENBRWQsZ0JBQWlCLENBSGpCLGlCQUlGLENBQ0EsNkhBQ0UsMkNBQ0YsQ0FDQSwySEFDRSxpQkFDRixDQUNBLHVKQUNFLHlCQUNGLENBRUEsaURBQ0UsdUJBQXdCLENBQ3hCLGlCQUNGLENBQ0EsZ0ZBQ0Usa0JBQW1CLENBQ25CLGFBQ0YsQ0FFQSxzQ0FFRSxrQkFBbUIsQ0FHbkIsOEZBQStGLENBSi9GLFlBQWEsQ0FFYixrQkFBbUIsQ0FDbkIsc0JBQXVCLENBRXZCLGVBQ0YsQ0FDQSxvREFDRSxpQkFBa0IsQ0FDbEIsaUJBQ0YsQ0FDQSwwREFDRSxlQUNGLENBRUEsdUNBR0UsV0FBWSxDQU1aLFFBQVMsQ0FFVCxjQUFlLENBVmYsYUFBYyxDQU1kLE1BQU8sQ0FHUCxTQUFVLENBTFYsaUJBQWtCLENBR2xCLE9BQVEsQ0FKUixtQkFBb0IsQ0FFcEIsS0FBTSxDQUpOLFVBVUYsQ0FDQSw2Q0FDRSxZQUNGLENBRUEsMENBQ0UsaUJBQ0YsQ0FFQSxvQ0FDRSxlQUFnQixDQUVoQixlQUFpQixDQURqQixTQUVGLENBQ0Esd0RBQ0UsbUJBQ0YiLCJmaWxlIjoiRmlsZVVwbG9hZC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cblxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLWluIHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cblxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLW91dCB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLmZpbGUtdXBsb2FkLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uZmlsZS1kcm9wem9uZSB7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWlucHV0LWJvcmRlci1yYWRpdXMpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1pbnB1dC1iYWNrZ3JvdW5kLWNvbG9yKTtcbiAgcGFkZGluZzogMC4yNXJlbSAxLjI1cmVtO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC4ycztcbiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0O1xufVxuLmZpbGUtZHJvcHpvbmUgLmZpbGUtdXBsb2FkLXRpdGxlIHtcbiAgbWFyZ2luOiAwIDAgMC4yNXJlbSAwO1xuICBmb250LXNpemU6IDAuODc1cmVtO1xuICBmb250LXdlaWdodDogNDAwO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLmZpbGUtZHJvcHpvbmUge1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4uZmlsZS1kcm9wem9uZS5lcnJvciBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdLFxuLmZpbGUtZHJvcHpvbmUuZXJyb3IgLmZpbGUtdXBsb2FkLXRpdGxlIHtcbiAgY29sb3I6IHZhcigtLWVycm9yKTtcbn1cbi5maWxlLWRyb3B6b25lLmVycm9yIC5maWxlLXNlbGVjdCB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuLmZpbGUtZHJvcHpvbmUuc3VjY2VzcyBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdIHtcbiAgY29sb3I6IHZhcigtLXN1Y2Nlc3MpO1xufVxuLmZpbGUtZHJvcHpvbmUgLnVwbG9hZC1idXR0b24td3JhcHBlci5kaXNhYmxlZCB7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xufVxuLmZpbGUtZHJvcHpvbmUgLnVwbG9hZC1idXR0b24td3JhcHBlci5kaXNhYmxlZCBwIHtcbiAgY29sb3I6IHZhcigtLWNvbG9yLWJsdWUtZ3JleTQwMCk7XG59XG4uZmlsZS1kcm9wem9uZSBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdIHtcbiAgZm9udC1zaXplOiAxLjI1cmVtO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogYXV0bztcbiAgcmlnaHQ6IDJyZW07XG59XG4uZmlsZS1kcm9wem9uZSAuZmlsZS11cGxvYWQtdGl0bGUtbWFuZGF0b3J5IHtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXJlZDUwMCk7XG59XG5cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1jb2xvci1ibHVlLWdyZXkyNSk7XG4gIHBhZGRpbmc6IDRweDtcbn1cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLm91dGxpbmUge1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIGluc2V0OiAwO1xuICBib3JkZXI6IHZhcigtLWZpbGUtdXBsb2FkLWJvcmRlci13aWR0aCkgdmFyKC0tZHJhZy1kcm9wLWJvcmRlci1zdHlsZSkgdmFyKC0tY29sb3ItYmx1ZS1ncmV5NTAwKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0taW5wdXQtYm9yZGVyLXJhZGl1cyk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnktbGlnaHQpO1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBhbGw7XG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMnM7XG4gIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDtcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLm91dGxpbmUge1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlIC5vdXRsaW5lOjpiZWZvcmUge1xuICBjb250ZW50OiBcIkRyb3AgaGVyZVwiO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBjb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeSk7XG4gIHBhZGRpbmctdG9wOiAycmVtO1xufVxuLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZTpob3ZlciAub3V0bGluZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnktbGlnaHQpO1xufVxuLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZSAuZmlsZS1zZWxlY3Qge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlIC5lcnJvciAub3V0bGluZSB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuXG4uZmlsZS1zZWxlY3Rvci1zdWItdGV4dCB7XG4gIGNvbG9yOiB2YXIoLS1ncmV5ZWQtb3V0KTtcbiAgcGFkZGluZzogMCAxLjI1cmVtO1xufVxuLmZpbGUtc2VsZWN0b3Itc3ViLXRleHQuZXJyb3Ige1xuICBjb2xvcjogdmFyKC0tZXJyb3IpO1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLmZpbGUtc2VsZWN0IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlcjogdmFyKC0tZmlsZS11cGxvYWQtYm9yZGVyLXdpZHRoKSB2YXIoLS1kcmFnLWRyb3AtYm9yZGVyLXN0eWxlKSB2YXIoLS1jb2xvci1ibHVlLWdyZXkxMDApO1xuICBwYWRkaW5nOiAxLjI1cmVtO1xufVxuLmZpbGUtc2VsZWN0IFtjbGFzcyo9ZmlsZV0ge1xuICBmb250LXNpemU6IDEuMjVyZW07XG4gIG1hcmdpbi1sZWZ0OiAwLjVyZW07XG59XG4uZmlsZS1zZWxlY3QgW2NsYXNzKj10eXBvZ3JhcGh5XSB7XG4gIG1hcmdpbi1ib3R0b206IDA7XG59XG5cbi51cGxvYWQtaW5wdXQge1xuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlcjogbm9uZTtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBvcGFjaXR5OiAwO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4udXBsb2FkLWlucHV0OmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cblxuLmZpbGUtdXBsb2FkLWJ0biB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmZpbGUtbGlzdCB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMC4yNXJlbSAwO1xufVxuLmZpbGUtbGlzdCBsaTpub3QoOmxhc3QtY2hpbGQpIHtcbiAgbWFyZ2luLWJvdHRvbTogMC41cmVtO1xufSJdfQ== */";
|
|
3
|
+
var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.FileUpload-module_sr-only__Awag4{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.FileUpload-module_hidden__JayBD{display:none}.FileUpload-module_slide-in__w7j8k{animation:FileUpload-module_slide-in__w7j8k .5s forwards}@media (prefers-reduced-motion:reduce){.FileUpload-module_slide-in__w7j8k{animation-duration:.1ms}}.FileUpload-module_slide-out__tZ-rV{animation:FileUpload-module_slide-out__tZ-rV .5s forwards}@media (prefers-reduced-motion:reduce){.FileUpload-module_slide-out__tZ-rV{animation-duration:.1ms}}@keyframes FileUpload-module_slide-in__w7j8k{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes FileUpload-module_slide-out__tZ-rV{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.FileUpload-module_file-upload-wrapper__CIx-a{display:flex;flex-direction:column}.FileUpload-module_file-dropzone__O-VP-{background-color:var(--input-background-color);border-radius:var(--input-border-radius);position:relative;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in-out}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_file-upload-title__CEPD-{font-size:.875rem;font-weight:400;margin:0 0 .25rem}@media (prefers-reduced-motion:reduce){.FileUpload-module_file-dropzone__O-VP-{transition-duration:.1ms}}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 .FileUpload-module_file-upload-title__CEPD-,.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 span[data-icon-status]{color:var(--error)}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_error__q2B-7 .FileUpload-module_file-select__sW1Pn{border-color:var(--error)}.FileUpload-module_file-dropzone__O-VP-.FileUpload-module_success__GqO-7 span[data-icon-status]{color:var(--success)}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_disabled__hvZQb{pointer-events:none}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_disabled__hvZQb p{color:var(--color-blue-grey400)}.FileUpload-module_file-dropzone__O-VP- span[data-icon-status]{font-size:1.25rem;position:absolute;right:2rem;top:auto}.FileUpload-module_file-dropzone__O-VP- .FileUpload-module_file-upload-title-mandatory__xEZ-6{color:var(--color-red500)}.FileUpload-module_upload-button-wrapper__vVTvg{background:var(--color-blue-grey25);padding:4px}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U{background-color:var(--color-primary-light);border:var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey500);border-radius:var(--input-border-radius);inset:0;margin:0;padding:0;pointer-events:none;position:absolute;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in-out}@media (prefers-reduced-motion:reduce){.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U{transition-duration:.1ms}}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_outline__QfJ8U:before{color:var(--color-primary);content:\"Drop here\";display:block;padding-top:2rem;text-align:center}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR:hover .FileUpload-module_outline__QfJ8U{background-color:var(--color-primary-light)}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_file-select__sW1Pn{position:relative}.FileUpload-module_upload-button-wrapper__vVTvg.FileUpload-module_drag-active__MRJJR .FileUpload-module_error__q2B-7 .FileUpload-module_outline__QfJ8U{border-color:var(--error)}.FileUpload-module_file-selector-sub-text__nCXMq{color:var(--greyed-out)}.FileUpload-module_file-selector-sub-text__nCXMq.FileUpload-module_error__q2B-7{color:var(--error);display:block}.FileUpload-module_file-select__sW1Pn{align-items:center;border:var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey100);display:flex;flex-direction:row;justify-content:center;padding:1.25rem}.FileUpload-module_file-select__sW1Pn [class*=file]{font-size:1.25rem;margin-left:.5rem}.FileUpload-module_file-select__sW1Pn [class*=typography]{margin-bottom:0}.FileUpload-module_upload-input__wteSl{border:none;bottom:0;cursor:pointer;display:block;left:0;opacity:0;position:absolute;right:0;text-transform:none;top:0;width:100%}.FileUpload-module_upload-input__wteSl:focus{outline:none}.FileUpload-module_file-upload-btn__M2Fg-{position:relative}.FileUpload-module_file-list__GLggq{list-style:none;margin:.25rem 0;padding:0}.FileUpload-module_file-list__GLggq li:not(:last-child){margin-bottom:.5rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVVcGxvYWQubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0U7QUFDRjs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLGtDQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSxpQ0FDRSxZQUNGLENBRUEsbUNBQ0Usd0RBQ0YsQ0FFQSx1Q0FDRSxtQ0FDRSx1QkFDRixDQUNGLENBQ0Esb0NBQ0UseURBQ0YsQ0FFQSx1Q0FDRSxvQ0FDRSx1QkFDRixDQUNGLENBQ0EsNkNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLDhDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YsQ0FDQSw4Q0FDRSxZQUFhLENBQ2IscUJBQ0YsQ0FFQSx3Q0FFRSw4Q0FBK0MsQ0FEL0Msd0NBQXlDLENBRXpDLGlCQUFrQixDQUVsQix1QkFBeUIsQ0FEekIsdUJBQXdCLENBRXhCLHNDQUNGLENBQ0Esb0ZBRUUsaUJBQW1CLENBQ25CLGVBQWdCLENBRmhCLGlCQUdGLENBQ0EsdUNBQ0Usd0NBQ0Usd0JBQ0YsQ0FDRixDQUNBLGlOQUVFLGtCQUNGLENBQ0EsNkdBQ0UseUJBQ0YsQ0FDQSxnR0FDRSxvQkFDRixDQUNBLDBIQUNFLG1CQUNGLENBQ0EsNEhBQ0UsK0JBQ0YsQ0FDQSwrREFDRSxpQkFBa0IsQ0FDbEIsaUJBQWtCLENBRWxCLFVBQVcsQ0FEWCxRQUVGLENBQ0EsOEZBQ0UseUJBQ0YsQ0FFQSxnREFDRSxtQ0FBb0MsQ0FDcEMsV0FDRixDQUNBLHVIQVFFLDJDQUE0QyxDQUY1Qyw4RkFBK0YsQ0FDL0Ysd0NBQXlDLENBRnpDLE9BQVEsQ0FGUixRQUFTLENBQ1QsU0FBVSxDQUhWLG1CQUFvQixDQUNwQixpQkFBa0IsQ0FRbEIsdUJBQXlCLENBRHpCLHVCQUF3QixDQUV4QixzQ0FDRixDQUNBLHVDQUNFLHVIQUNFLHdCQUNGLENBQ0YsQ0FDQSw4SEFJRSwwQkFBMkIsQ0FIM0IsbUJBQW9CLENBRXBCLGFBQWMsQ0FFZCxnQkFBaUIsQ0FIakIsaUJBSUYsQ0FDQSw2SEFDRSwyQ0FDRixDQUNBLDJIQUNFLGlCQUNGLENBQ0EsdUpBQ0UseUJBQ0YsQ0FFQSxpREFDRSx1QkFDRixDQUNBLGdGQUNFLGtCQUFtQixDQUNuQixhQUNGLENBRUEsc0NBRUUsa0JBQW1CLENBR25CLDhGQUErRixDQUovRixZQUFhLENBRWIsa0JBQW1CLENBQ25CLHNCQUF1QixDQUV2QixlQUNGLENBQ0Esb0RBQ0UsaUJBQWtCLENBQ2xCLGlCQUNGLENBQ0EsMERBQ0UsZUFDRixDQUVBLHVDQUdFLFdBQVksQ0FNWixRQUFTLENBRVQsY0FBZSxDQVZmLGFBQWMsQ0FNZCxNQUFPLENBR1AsU0FBVSxDQUxWLGlCQUFrQixDQUdsQixPQUFRLENBSlIsbUJBQW9CLENBRXBCLEtBQU0sQ0FKTixVQVVGLENBQ0EsNkNBQ0UsWUFDRixDQUVBLDBDQUNFLGlCQUNGLENBRUEsb0NBQ0UsZUFBZ0IsQ0FFaEIsZUFBaUIsQ0FEakIsU0FFRixDQUNBLHdEQUNFLG1CQUNGIiwiZmlsZSI6IkZpbGVVcGxvYWQubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn1cbi5maWxlLXVwbG9hZC13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbn1cblxuLmZpbGUtZHJvcHpvbmUge1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1pbnB1dC1ib3JkZXItcmFkaXVzKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0taW5wdXQtYmFja2dyb3VuZC1jb2xvcik7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogYWxsO1xuICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjJzO1xuICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7XG59XG4uZmlsZS1kcm9wem9uZSAuZmlsZS11cGxvYWQtdGl0bGUge1xuICBtYXJnaW46IDAgMCAwLjI1cmVtIDA7XG4gIGZvbnQtc2l6ZTogMC44NzVyZW07XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuZmlsZS1kcm9wem9uZSB7XG4gICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cbi5maWxlLWRyb3B6b25lLmVycm9yIHNwYW5bZGF0YS1pY29uLXN0YXR1c10sXG4uZmlsZS1kcm9wem9uZS5lcnJvciAuZmlsZS11cGxvYWQtdGl0bGUge1xuICBjb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuLmZpbGUtZHJvcHpvbmUuZXJyb3IgLmZpbGUtc2VsZWN0IHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1lcnJvcik7XG59XG4uZmlsZS1kcm9wem9uZS5zdWNjZXNzIHNwYW5bZGF0YS1pY29uLXN0YXR1c10ge1xuICBjb2xvcjogdmFyKC0tc3VjY2Vzcyk7XG59XG4uZmlsZS1kcm9wem9uZSAudXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRpc2FibGVkIHtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG4uZmlsZS1kcm9wem9uZSAudXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRpc2FibGVkIHAge1xuICBjb2xvcjogdmFyKC0tY29sb3ItYmx1ZS1ncmV5NDAwKTtcbn1cbi5maWxlLWRyb3B6b25lIHNwYW5bZGF0YS1pY29uLXN0YXR1c10ge1xuICBmb250LXNpemU6IDEuMjVyZW07XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiBhdXRvO1xuICByaWdodDogMnJlbTtcbn1cbi5maWxlLWRyb3B6b25lIC5maWxlLXVwbG9hZC10aXRsZS1tYW5kYXRvcnkge1xuICBjb2xvcjogdmFyKC0tY29sb3ItcmVkNTAwKTtcbn1cblxuLnVwbG9hZC1idXR0b24td3JhcHBlciB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yLWJsdWUtZ3JleTI1KTtcbiAgcGFkZGluZzogNHB4O1xufVxuLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZSAub3V0bGluZSB7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgaW5zZXQ6IDA7XG4gIGJvcmRlcjogdmFyKC0tZmlsZS11cGxvYWQtYm9yZGVyLXdpZHRoKSB2YXIoLS1kcmFnLWRyb3AtYm9yZGVyLXN0eWxlKSB2YXIoLS1jb2xvci1ibHVlLWdyZXk1MDApO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1pbnB1dC1ib3JkZXItcmFkaXVzKTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeS1saWdodCk7XG4gIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC4ycztcbiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0O1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZSAub3V0bGluZSB7XG4gICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLm91dGxpbmU6OmJlZm9yZSB7XG4gIGNvbnRlbnQ6IFwiRHJvcCBoZXJlXCI7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5KTtcbiAgcGFkZGluZy10b3A6IDJyZW07XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlOmhvdmVyIC5vdXRsaW5lIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeS1saWdodCk7XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlIC5maWxlLXNlbGVjdCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLmVycm9yIC5vdXRsaW5lIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1lcnJvcik7XG59XG5cbi5maWxlLXNlbGVjdG9yLXN1Yi10ZXh0IHtcbiAgY29sb3I6IHZhcigtLWdyZXllZC1vdXQpO1xufVxuLmZpbGUtc2VsZWN0b3Itc3ViLXRleHQuZXJyb3Ige1xuICBjb2xvcjogdmFyKC0tZXJyb3IpO1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLmZpbGUtc2VsZWN0IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlcjogdmFyKC0tZmlsZS11cGxvYWQtYm9yZGVyLXdpZHRoKSB2YXIoLS1kcmFnLWRyb3AtYm9yZGVyLXN0eWxlKSB2YXIoLS1jb2xvci1ibHVlLWdyZXkxMDApO1xuICBwYWRkaW5nOiAxLjI1cmVtO1xufVxuLmZpbGUtc2VsZWN0IFtjbGFzcyo9ZmlsZV0ge1xuICBmb250LXNpemU6IDEuMjVyZW07XG4gIG1hcmdpbi1sZWZ0OiAwLjVyZW07XG59XG4uZmlsZS1zZWxlY3QgW2NsYXNzKj10eXBvZ3JhcGh5XSB7XG4gIG1hcmdpbi1ib3R0b206IDA7XG59XG5cbi51cGxvYWQtaW5wdXQge1xuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlcjogbm9uZTtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBvcGFjaXR5OiAwO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4udXBsb2FkLWlucHV0OmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cblxuLmZpbGUtdXBsb2FkLWJ0biB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmZpbGUtbGlzdCB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMC4yNXJlbSAwO1xufVxuLmZpbGUtbGlzdCBsaTpub3QoOmxhc3QtY2hpbGQpIHtcbiAgbWFyZ2luLWJvdHRvbTogMC41cmVtO1xufSJdfQ== */";
|
|
4
4
|
var classes = {"sr-only":"FileUpload-module_sr-only__Awag4","hidden":"FileUpload-module_hidden__JayBD","slide-in":"FileUpload-module_slide-in__w7j8k","slide-out":"FileUpload-module_slide-out__tZ-rV","file-upload-wrapper":"FileUpload-module_file-upload-wrapper__CIx-a","file-dropzone":"FileUpload-module_file-dropzone__O-VP-","file-upload-title":"FileUpload-module_file-upload-title__CEPD-","error":"FileUpload-module_error__q2B-7","file-select":"FileUpload-module_file-select__sW1Pn","success":"FileUpload-module_success__GqO-7","upload-button-wrapper":"FileUpload-module_upload-button-wrapper__vVTvg","disabled":"FileUpload-module_disabled__hvZQb","file-upload-title-mandatory":"FileUpload-module_file-upload-title-mandatory__xEZ-6","drag-active":"FileUpload-module_drag-active__MRJJR","outline":"FileUpload-module_outline__QfJ8U","file-selector-sub-text":"FileUpload-module_file-selector-sub-text__nCXMq","upload-input":"FileUpload-module_upload-input__wteSl","file-upload-btn":"FileUpload-module_file-upload-btn__M2Fg-","file-list":"FileUpload-module_file-list__GLggq"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -215,7 +215,7 @@ const MultiSelectComponent = ({ id, children, name, disabled = false, labeledBy,
|
|
|
215
215
|
React.createElement("select", { ...filterProps(rest, /^data-/, false), tabIndex: -1, multiple: true, "aria-hidden": "true", ref: nativeSelect, name: name, onChange: nativeOnChangeHandler, className: readyclasses["sr-only"] },
|
|
216
216
|
React.createElement("option", { value: "" }),
|
|
217
217
|
React.Children.map(children, child => (React.createElement("option", { value: child.props.value })))),
|
|
218
|
-
React.createElement("div", { ...filterProps(rest, /^data-/), id: multiSelectId.current, ref: containerReference, onKeyDown: onArrowNavigation, className: `custom-select ${classes.select} ${additionalClasses.join(" ")}
|
|
218
|
+
React.createElement("div", { ...filterProps(rest, /^data-/), id: multiSelectId.current, ref: containerReference, onKeyDown: onArrowNavigation, className: `custom-select ${classes.select} ${additionalClasses.join(" ")}` },
|
|
219
219
|
React.createElement("div", { className: `${classes["custom-select"]} ${additionalClasses.join(" ")} `, style: { display: "flex" } },
|
|
220
220
|
React.createElement("div", { className: classes["display-container"], "data-display": true },
|
|
221
221
|
React.createElement(SelectButton, { ...selectButtonProps, onClick: onSelectButtonClick, name: name, ref: customSelectButtonRef, disabled: disabled, "aria-disabled": disabled, "aria-invalid": error, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-labelledby": labeledBy, "aria-describedby": describedBy }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n createRef,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { escapeRegExp, filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n {\n id,\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps = {},\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search = { enabled: true, renderThreshold: 0, searchPlaceholder: \"Search item\" },\n ...rest\n }: MultiSelectProps,\n ref\n) => {\n const multiSelectId = useRef(id ?? generateID(20));\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState<Display[]>([]);\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n const [shouldClick, setShouldClick] =\n useState(\n false\n ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n React.Children.count(children) - display.length\n );\n const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n selectId: multiSelectId.current,\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount: optionsVisibleCount,\n focusedSelectItem,\n setFocusedSelectItem,\n describedBy,\n getOptionId,\n getListboxId\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n id: getOptionId(multiSelectId.current, optionsVisibleCount),\n addNew,\n filter,\n focusedSelectItem,\n optionsCount: optionsVisibleCount,\n searchInputRef,\n shouldClick,\n onClickCallback: () => {\n setShouldClick(false);\n resetSearchState();\n }\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n if (nativeSelect.current && optionElement) {\n const value = optionElement.getAttribute(\"data-value\")!;\n const options = [...nativeSelect.current.options];\n const lastSelectedOptionValues = options\n .filter(option => option.selected)\n .map(option => option.value);\n options.forEach(option => {\n if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n option.selected = true;\n }\n });\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n setExpanded(false);\n resetSearchState();\n };\n\n const onSelectedOptionRemoveHandler = (value: string) => {\n if (nativeSelect.current) {\n const options = [...nativeSelect.current.options];\n options.find(option => option.value === value)!.selected = false;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n setFocusedSelectItem,\n childrenCount: optionsVisibleCount,\n setShouldClick,\n addBtnRef,\n searchInputRef,\n customSelectButtonRef,\n onClose: resetSearchState\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (values: string[]) => {\n const options = React.Children.map(children, child => child);\n const displayArray: Display[] = values.map(value => {\n const option = options.find(option => option.props.value === value);\n return { value, label: option?.props.children, fixed: option?.props.fixed };\n });\n setDisplay(displayArray);\n };\n\n const syncSelectedOption = (vals: string[]) => {\n if (nativeSelect.current) {\n const options = [...nativeSelect.current.options];\n options.forEach(option => {\n if (vals.includes(option.value)) {\n option.selected = true;\n } else {\n option.selected = false;\n }\n });\n }\n };\n\n /**\n * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n */\n const renderOptions = () => {\n type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n return internalChildren.filter(\n child =>\n typeof child === \"object\" &&\n \"props\" in child &&\n !display.find(option => option.value === child.props.value)\n );\n };\n\n let results;\n if (filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children\n .toLowerCase()\n .match(escapeRegExp(filter.toLowerCase())) !== null\n );\n\n results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n } else {\n results = _internalRenderChildren(\n filterOutSelectedChildren(React.Children.toArray(children))\n );\n }\n\n optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n if (results.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return results;\n\n function _internalRenderChildren(internalChildren: ReactChildrenType) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child as ReactElement, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setExpanded(false);\n setShouldClick(false);\n },\n isSearching: false,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n id: getOptionId(multiSelectId.current, index)\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded && searchInputRef.current) {\n setShouldFocusButtonAfterClose(true);\n searchInputRef.current.focus();\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n setShouldFocusButtonAfterClose(false);\n customSelectButtonRef.current.focus();\n }\n }, [\n expanded,\n customSelectButtonRef.current,\n shouldFocusButtonAfterClose,\n searchInputRef.current\n ]);\n\n useEffect(() => {\n syncDisplayValue(value);\n syncSelectedOption(value);\n }, [value]);\n\n useBodyClick(\n (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n () => {\n setExpanded(false);\n setListPosition({ top: 0, bottom: \"initial\" });\n setOpacity(0);\n },\n expanded\n );\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n const onSelectButtonClick = () => {\n setExpanded(expanded => !expanded);\n setShouldClick(false);\n };\n\n /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <Fragment>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n multiple={true}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n id={multiSelectId.current}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n className ?? \"\"\n }`}\n >\n <div\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: \"flex\" }}\n >\n <div className={classes[\"display-container\"]} data-display>\n <SelectButton\n {...selectButtonProps}\n onClick={onSelectButtonClick}\n name={name}\n ref={customSelectButtonRef}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n />\n {value?.length === 0 && placeholder && (\n <span className={classes[\"placeholder\"]}>{placeholder}</span>\n )}\n {value?.length > 0 && (\n <SelectedOptions\n disabled={disabled}\n display={display}\n onClick={onSelectButtonClick}\n onRemove={onSelectedOptionRemoveHandler}\n />\n )}\n {searchVisible && renderSearch()}\n </div>\n <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n </div>\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n ...listPosition\n }}\n >\n <ul\n id={getListboxId(multiSelectId.current)}\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n aria-multiselectable=\"true\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </Fragment>\n );\n};\n\nexport const MultiSelect = React.forwardRef(MultiSelectComponent);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelect.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n createRef,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { escapeRegExp, filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n {\n id,\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps = {},\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search = { enabled: true, renderThreshold: 0, searchPlaceholder: \"Search item\" },\n ...rest\n }: MultiSelectProps,\n ref\n) => {\n const multiSelectId = useRef(id ?? generateID(20));\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState<Display[]>([]);\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n const [shouldClick, setShouldClick] =\n useState(\n false\n ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n React.Children.count(children) - display.length\n );\n const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n selectId: multiSelectId.current,\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount: optionsVisibleCount,\n focusedSelectItem,\n setFocusedSelectItem,\n describedBy,\n getOptionId,\n getListboxId\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n id: getOptionId(multiSelectId.current, optionsVisibleCount),\n addNew,\n filter,\n focusedSelectItem,\n optionsCount: optionsVisibleCount,\n searchInputRef,\n shouldClick,\n onClickCallback: () => {\n setShouldClick(false);\n resetSearchState();\n }\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n if (nativeSelect.current && optionElement) {\n const value = optionElement.getAttribute(\"data-value\")!;\n const options = [...nativeSelect.current.options];\n const lastSelectedOptionValues = options\n .filter(option => option.selected)\n .map(option => option.value);\n options.forEach(option => {\n if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n option.selected = true;\n }\n });\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n setExpanded(false);\n resetSearchState();\n };\n\n const onSelectedOptionRemoveHandler = (value: string) => {\n if (nativeSelect.current) {\n const options = [...nativeSelect.current.options];\n options.find(option => option.value === value)!.selected = false;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n setFocusedSelectItem,\n childrenCount: optionsVisibleCount,\n setShouldClick,\n addBtnRef,\n searchInputRef,\n customSelectButtonRef,\n onClose: resetSearchState\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (values: string[]) => {\n const options = React.Children.map(children, child => child);\n const displayArray: Display[] = values.map(value => {\n const option = options.find(option => option.props.value === value);\n return { value, label: option?.props.children, fixed: option?.props.fixed };\n });\n setDisplay(displayArray);\n };\n\n const syncSelectedOption = (vals: string[]) => {\n if (nativeSelect.current) {\n const options = [...nativeSelect.current.options];\n options.forEach(option => {\n if (vals.includes(option.value)) {\n option.selected = true;\n } else {\n option.selected = false;\n }\n });\n }\n };\n\n /**\n * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n */\n const renderOptions = () => {\n type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n return internalChildren.filter(\n child =>\n typeof child === \"object\" &&\n \"props\" in child &&\n !display.find(option => option.value === child.props.value)\n );\n };\n\n let results;\n if (filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children\n .toLowerCase()\n .match(escapeRegExp(filter.toLowerCase())) !== null\n );\n\n results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n } else {\n results = _internalRenderChildren(\n filterOutSelectedChildren(React.Children.toArray(children))\n );\n }\n\n optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n if (results.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return results;\n\n function _internalRenderChildren(internalChildren: ReactChildrenType) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child as ReactElement, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setExpanded(false);\n setShouldClick(false);\n },\n isSearching: false,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n id: getOptionId(multiSelectId.current, index)\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded && searchInputRef.current) {\n setShouldFocusButtonAfterClose(true);\n searchInputRef.current.focus();\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n setShouldFocusButtonAfterClose(false);\n customSelectButtonRef.current.focus();\n }\n }, [\n expanded,\n customSelectButtonRef.current,\n shouldFocusButtonAfterClose,\n searchInputRef.current\n ]);\n\n useEffect(() => {\n syncDisplayValue(value);\n syncSelectedOption(value);\n }, [value]);\n\n useBodyClick(\n (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n () => {\n setExpanded(false);\n setListPosition({ top: 0, bottom: \"initial\" });\n setOpacity(0);\n },\n expanded\n );\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n const onSelectButtonClick = () => {\n setExpanded(expanded => !expanded);\n setShouldClick(false);\n };\n\n /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <Fragment>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n multiple={true}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n id={multiSelectId.current}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n >\n <div\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: \"flex\" }}\n >\n <div className={classes[\"display-container\"]} data-display>\n <SelectButton\n {...selectButtonProps}\n onClick={onSelectButtonClick}\n name={name}\n ref={customSelectButtonRef}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n />\n {value?.length === 0 && placeholder && (\n <span className={classes[\"placeholder\"]}>{placeholder}</span>\n )}\n {value?.length > 0 && (\n <SelectedOptions\n disabled={disabled}\n display={display}\n onClick={onSelectButtonClick}\n onRemove={onSelectedOptionRemoveHandler}\n />\n )}\n {searchVisible && renderSearch()}\n </div>\n <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n </div>\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n ...listPosition\n }}\n >\n <ul\n id={getListboxId(multiSelectId.current)}\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n aria-multiselectable=\"true\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </Fragment>\n );\n};\n\nexport const MultiSelect = React.forwardRef(MultiSelectComponent);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AA0BH,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,WAAmB,KAC7D,CAAG,EAAA,aAAa,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC;AAE1C,MAAM,YAAY,GAAG,CAAC,aAAqB,KAAK,CAAA,EAAG,aAAa,CAAA,QAAA,CAAU,CAAC;AAE3E,MAAM,oBAAoB,GAAkE,CAC1F,EACE,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,WAAW,EACX,WAAW,EACX,iBAAiB,GAAG,EAAE,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,GAAG,iBAAiB,EAC9B,cAAc,GAAG,kBAAkB,EACnC,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAChF,GAAG,IAAI,EACU,EACnB,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;AACtD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GACjC,QAAQ,CACN,KAAK,CACN,CAAC;IACJ,MAAM,CAAC,2BAA2B,EAAE,8BAA8B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,MAAM,CAChD,CAAC;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;QAC1F,QAAQ,EAAE,aAAa,CAAC,OAAO;QAC/B,QAAQ;QACR,MAAM;AACN,QAAA,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAAC;AAC9C,QAAA,YAAY,EAAE,mBAAmB;QACjC,iBAAiB;QACjB,oBAAoB;QACpB,WAAW;QACX,WAAW;QACX,YAAY;AACb,KAAA,CAAC,CAAC;IACH,MAAM,EAAE,SAAS,EAAE,kCAAkC,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;QACnF,EAAE,EAAE,WAAW,CAAC,aAAa,CAAC,OAAO,EAAE,mBAAmB,CAAC;QAC3D,MAAM;QACN,MAAM;QACN,iBAAiB;AACjB,QAAA,YAAY,EAAE,mBAAmB;QACjC,cAAc;QACd,WAAW;QACX,eAAe,EAAE,MAAK;YACpB,cAAc,CAAC,KAAK,CAAC,CAAC;AACtB,YAAA,gBAAgB,EAAE,CAAC;SACpB;AACF,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,YAAY,GAAI,GAA0C,IAAI,SAAS,EAAE,CAAC;AAEhF,IAAA,MAAM,qBAAqB,GAAG,CAAC,aAAiC,KAAI;AAClE,QAAA,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,EAAE;YACzC,MAAM,KAAK,GAAG,aAAa,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC;YACxD,MAAM,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAClD,MAAM,wBAAwB,GAAG,OAAO;iBACrC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC;iBACjC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/B,YAAA,OAAO,CAAC,OAAO,CAAC,MAAM,IAAG;AACvB,gBAAA,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,wBAAwB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC7E,oBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACxB;AACH,aAAC,CAAC,CAAC;AACH,YAAA,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SAC5E;QACD,WAAW,CAAC,KAAK,CAAC,CAAC;AACnB,QAAA,gBAAgB,EAAE,CAAC;AACrB,KAAC,CAAC;AAEF,IAAA,MAAM,6BAA6B,GAAG,CAAC,KAAa,KAAI;AACtD,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAM,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAClD,YAAA,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;AACjE,YAAA,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SAC5E;AACH,KAAC,CAAC;AAEF,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AAC9D,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,kBAAkB,CAAC;QAC/C,QAAQ;QACR,WAAW;QACX,oBAAoB;AACpB,QAAA,aAAa,EAAE,mBAAmB;QAClC,cAAc;QACd,SAAS;QACT,cAAc;QACd,qBAAqB;AACrB,QAAA,OAAO,EAAE,gBAAgB;AAC1B,KAAA,CAAC,CAAC;IAEH,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,UAAU,EAAE,GAChF,qBAAqB,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC;AAE1F,IAAA,MAAM,gBAAgB,GAAG,CAAC,MAAgB,KAAI;AAC5C,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAc,MAAM,CAAC,GAAG,CAAC,KAAK,IAAG;AACjD,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;YACpE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,KAAK,CAAC,KAAK,EAAE,CAAC;AAC9E,SAAC,CAAC,CAAC;QACH,UAAU,CAAC,YAAY,CAAC,CAAC;AAC3B,KAAC,CAAC;AAEF,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAAc,KAAI;AAC5C,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAM,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAClD,YAAA,OAAO,CAAC,OAAO,CAAC,MAAM,IAAG;gBACvB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AAC/B,oBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACxB;qBAAM;AACL,oBAAA,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACzB;AACH,aAAC,CAAC,CAAC;SACJ;AACH,KAAC,CAAC;AAEF;;;AAGG;IACH,MAAM,aAAa,GAAG,MAAK;AAGzB,QAAA,MAAM,yBAAyB,GAAG,CAAC,gBAAmC,KAAI;YACxE,OAAO,gBAAgB,CAAC,MAAM,CAC5B,KAAK,IACH,OAAO,KAAK,KAAK,QAAQ;AACzB,gBAAA,OAAO,IAAI,KAAK;AAChB,gBAAA,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAC9D,CAAC;AACJ,SAAC,CAAC;AAEF,QAAA,IAAI,OAAO,CAAC;AACZ,QAAA,IAAI,MAAM,KAAK,EAAE,EAAE;YACjB,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9D,KAAK,IACF,KAAsB,CAAC,KAAK,CAAC,QAAQ;AACnC,iBAAA,WAAW,EAAE;AACb,iBAAA,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CACxD,CAAC;YAEF,OAAO,GAAG,uBAAuB,CAAC,yBAAyB,CAAC,gBAAgB,CAAC,CAAC,CAAC;SAChF;aAAM;AACL,YAAA,OAAO,GAAG,uBAAuB,CAC/B,yBAAyB,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAC5D,CAAC;SACH;QAED,mBAAmB,KAAK,OAAO,CAAC,MAAM,IAAI,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAEjF,QAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACxB,OAAO,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,EAAA,EAAG,cAAc,CAAM,CAAC;SACpE;AAED,QAAA,OAAO,OAAO,CAAC;QAEf,SAAS,uBAAuB,CAAC,gBAAmC,EAAA;AAClE,YAAA,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAI;AAC3D,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAqB,EAAE;AAC/C,oBAAA,aAAa,EAAE,CAAC,UAAkB,KAAI;wBACpC,oBAAoB,CAAC,UAAU,CAAC,CAAC;qBAClC;AACD,oBAAA,cAAc,EAAE,CAAC,SAAyC,KAAI;AAC5D,wBAAA,qBAAqB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;wBACzC,WAAW,CAAC,KAAK,CAAC,CAAC;wBACnB,cAAc,CAAC,KAAK,CAAC,CAAC;qBACvB;AACD,oBAAA,WAAW,EAAE,KAAK;AAClB,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,UAAU,EAAE,KAAK;oBACjB,QAAQ,EAAE,iBAAiB,KAAK,KAAK;AACrC,oBAAA,WAAW,EAAE,WAAW;oBACxB,EAAE,EAAE,WAAW,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC9C,iBAAA,CAAC,CAAC;AACL,aAAC,CAAC,CAAC;SACJ;AACH,KAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,OAAO,QAAQ,IACb,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAA,CAAI,KAEnE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAA,CAAI,CACtE,CAAC;AACJ,KAAC,CAAC;IAEF,MAAM,IAAI,GAAG,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AAExD,IAAA,MAAM,qBAAqB,GAAG,CAAC,KAA2C,KAAI;AAC5E,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;AACpB,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,IAAI,cAAc,CAAC,OAAO,EAAE;YACtC,8BAA8B,CAAC,IAAI,CAAC,CAAC;AACrC,YAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,IAAI,qBAAqB,CAAC,OAAO,IAAI,2BAA2B,EAAE;YAC7E,8BAA8B,CAAC,KAAK,CAAC,CAAC;AACtC,YAAA,qBAAqB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACvC;AACH,KAAC,EAAE;QACD,QAAQ;AACR,QAAA,qBAAqB,CAAC,OAAO;QAC7B,2BAA2B;AAC3B,QAAA,cAAc,CAAC,OAAO;AACvB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;QACb,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAC5B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAEZ,IAAA,YAAY,CACV,CAAC,KAAiB,KAAK,CAAE,KAAK,CAAC,MAAkB,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,QAAQ,EACvF,MAAK;QACH,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QAC/C,UAAU,CAAC,CAAC,CAAC,CAAC;KACf,EACD,QAAQ,CACT,CAAC;IAEF,MAAM,iBAAiB,GAAG,EAAE,CAAC;IAC7B,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,KAAK,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AACrD,IAAA,SAAS,IAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/C,OAAO,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,MAAK;QAC/B,WAAW,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,KAAC,CAAC;;IAGF,QACE,oBAAC,QAAQ,EAAA,IAAA;AACP,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EACtC,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,IAAI,EAAA,aAAA,EACF,MAAM,EAClB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,qBAAqB,EAC/B,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,EAAA;YAElC,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,EAAE,EAAU,CAAA;YACzB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,KACjC,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAW,CAC5C,CAAC,CACK;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC/B,EAAE,EAAE,aAAa,CAAC,OAAO,EACzB,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,iBAAiB,OAAO,CAAC,MAAM,CAAA,CAAA,EAAI,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,CAAA,EAAA;YAE3E,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,eAAe,CAAC,CAAI,CAAA,EAAA,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EACxE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA;AAE1B,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,mBAAmB,CAAC,EAAA,cAAA,EAAA,IAAA,EAAA;AAC1C,oBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GACP,iBAAiB,EACrB,OAAO,EAAE,mBAAmB,EAC5B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,qBAAqB,EAC1B,QAAQ,EAAE,QAAQ,EACH,eAAA,EAAA,QAAQ,kBACT,KAAK,EAAA,eAAA,EACJ,QAAQ,EAAA,eAAA,EACT,SAAS,EAAA,iBAAA,EACN,SAAS,EAAA,kBAAA,EACR,WAAW,EAC7B,CAAA;oBACD,CAAA,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,MAAM,MAAK,CAAC,IAAI,WAAW,KACjC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EAAA,EAAG,WAAW,CAAQ,CAC9D;AACA,oBAAA,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,MAAM,IAAG,CAAC,KAChB,KAAA,CAAA,aAAA,CAAC,eAAe,EACd,EAAA,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,6BAA6B,GACvC,CACH;oBACA,aAAa,IAAI,YAAY,EAAE,CAC5B;AACN,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAG,EAAA,IAAI,IAAI,iBAAiB,EAAE,CAAO,CAClE;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,CAAA,aAAA,EAAgB,OAAO,CAAC,cAAc,CAAC,CAAE,CAAA,EACpD,KAAK,EAAE;oBACL,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM;AACpC,oBAAA,OAAO,EAAE,OAAO;oBAChB,SAAS,EAAE,oBAAoB,CAAC,OAAO;oBACvC,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM;AACzC,oBAAA,GAAG,YAAY;AAChB,iBAAA,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,EAAE,EAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,SAAS,EAAE,kCAAkC,EAC7C,IAAI,EAAC,SAAS,EAAA,sBAAA,EACO,MAAM,EAC3B,KAAK,EAAE,EAAE,SAAS,EAAE,oBAAoB,CAAC,IAAI,EAAE,EAE9C,EAAA,aAAa,EAAE,CACb;AACJ,gBAAA,YAAY,EAAE,CACX,CACF,CACG,EACX;AACJ,CAAC,CAAC;AAEW,MAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,oBAAoB;;;;"}
|
|
@@ -150,7 +150,7 @@ const SelectComponent = ({ children, name, disabled = false, labeledBy, placehol
|
|
|
150
150
|
React.createElement("select", { ...filterProps(rest, /^data-/, false), tabIndex: -1, "aria-hidden": "true", ref: nativeSelect, name: name, onChange: nativeOnChangeHandler, className: readyclasses["sr-only"] },
|
|
151
151
|
React.createElement("option", { value: "" }),
|
|
152
152
|
React.Children.map(children, child => (React.createElement("option", { value: child.props.value })))),
|
|
153
|
-
React.createElement("div", { ...filterProps(rest, /^data-/), ref: containerReference, onKeyDown: onArrowNavigation, className: `custom-select ${classes.select} ${additionalClasses.join(" ")}
|
|
153
|
+
React.createElement("div", { ...filterProps(rest, /^data-/), ref: containerReference, onKeyDown: onArrowNavigation, className: `custom-select ${classes.select} ${additionalClasses.join(" ")}` },
|
|
154
154
|
searchVisible && renderSearch(),
|
|
155
155
|
React.createElement("button", { ...selectButtonProps, onClick: () => {
|
|
156
156
|
setExpanded(!expanded);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n createRef,\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n {\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps,\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search,\n ...rest\n }: SingleSelectProps,\n ref\n) => {\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState(\"\");\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n const [shouldClick, setShouldClick] = useState(false);\n /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const optionsCount = React.Children.count(children);\n const {\n filter,\n isSearching,\n renderSearch,\n searchInputRef,\n setIsSearching,\n searchThreshold,\n searchVisible\n } = useSearch({\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount,\n setFocusedSelectItem\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n addNew,\n filter,\n focusedSelectItem,\n optionsCount,\n searchInputRef\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n if (nativeSelect.current && optionElement) {\n nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n setExpanded(false);\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n isSearching,\n setIsSearching,\n setFocusedSelectItem,\n onOptionChangeHandler,\n childrenCount: optionsCount,\n setShouldClick,\n searchInputRef,\n addBtnRef,\n renderThreshold: searchThreshold\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (val: string) => {\n React.Children.forEach(children, child => {\n if (child.props.value === val) {\n setDisplay(child.props.children);\n }\n });\n };\n\n /**\n * @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n */\n const renderOptions = () => {\n if (isSearching || filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n );\n\n const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n if (internalChildren.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return _internalRenderChildren(filteredChildren as ReactElement[]);\n }\n\n return _internalRenderChildren(children);\n\n function _internalRenderChildren(internalChildren: ReactElement[]) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setShouldClick(false);\n },\n isSelected: child.props.value === value,\n isSearching: isSearching,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n isAddBtnFocused: addBtnRef.current === document.activeElement\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded) {\n setFocusedSelectItem(0);\n setShouldFocusButtonAfterClose(true);\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n customSelectButtonRef.current.focus();\n setShouldFocusButtonAfterClose(false);\n }\n }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n useEffect(() => {\n syncDisplayValue(value);\n }, [value]);\n\n useBodyClick(\n (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n () => {\n setExpanded(false);\n setListPosition({ top: 0, bottom: \"initial\" });\n setOpacity(0);\n },\n expanded\n );\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <Fragment>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n className ?? \"\"\n }`}\n >\n {searchVisible && renderSearch()}\n <button\n {...selectButtonProps}\n onClick={() => {\n setExpanded(!expanded);\n }}\n ref={customSelectButtonRef}\n type=\"button\"\n name={name}\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n >\n <div data-display className={classes[\"selected\"]}>\n {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n {value?.length > 0 && <span data-display-inner>{display}</span>}\n </div>\n <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n </button>\n\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n ...listPosition\n }}\n >\n <ul\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </Fragment>\n );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n createRef,\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n {\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps,\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search,\n ...rest\n }: SingleSelectProps,\n ref\n) => {\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState(\"\");\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n const [shouldClick, setShouldClick] = useState(false);\n /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const optionsCount = React.Children.count(children);\n const {\n filter,\n isSearching,\n renderSearch,\n searchInputRef,\n setIsSearching,\n searchThreshold,\n searchVisible\n } = useSearch({\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount,\n setFocusedSelectItem\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n addNew,\n filter,\n focusedSelectItem,\n optionsCount,\n searchInputRef\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n if (nativeSelect.current && optionElement) {\n nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n setExpanded(false);\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n isSearching,\n setIsSearching,\n setFocusedSelectItem,\n onOptionChangeHandler,\n childrenCount: optionsCount,\n setShouldClick,\n searchInputRef,\n addBtnRef,\n renderThreshold: searchThreshold\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (val: string) => {\n React.Children.forEach(children, child => {\n if (child.props.value === val) {\n setDisplay(child.props.children);\n }\n });\n };\n\n /**\n * @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n */\n const renderOptions = () => {\n if (isSearching || filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n );\n\n const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n if (internalChildren.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return _internalRenderChildren(filteredChildren as ReactElement[]);\n }\n\n return _internalRenderChildren(children);\n\n function _internalRenderChildren(internalChildren: ReactElement[]) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setShouldClick(false);\n },\n isSelected: child.props.value === value,\n isSearching: isSearching,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n isAddBtnFocused: addBtnRef.current === document.activeElement\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded) {\n setFocusedSelectItem(0);\n setShouldFocusButtonAfterClose(true);\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n customSelectButtonRef.current.focus();\n setShouldFocusButtonAfterClose(false);\n }\n }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n useEffect(() => {\n syncDisplayValue(value);\n }, [value]);\n\n useBodyClick(\n (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n () => {\n setExpanded(false);\n setListPosition({ top: 0, bottom: \"initial\" });\n setOpacity(0);\n },\n expanded\n );\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <Fragment>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n >\n {searchVisible && renderSearch()}\n <button\n {...selectButtonProps}\n onClick={() => {\n setExpanded(!expanded);\n }}\n ref={customSelectButtonRef}\n type=\"button\"\n name={name}\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n >\n <div data-display className={classes[\"selected\"]}>\n {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n {value?.length > 0 && <span data-display-inner>{display}</span>}\n </div>\n <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n </button>\n\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n ...listPosition\n }}\n >\n <ul\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </Fragment>\n );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
|
|
|
4
4
|
import { Props as PaginationProps } from "../Pagination/Pagination";
|
|
5
5
|
import { Spacing } from "../../hooks/useSpacing";
|
|
6
6
|
import { DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
|
|
7
|
+
import { DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
|
|
7
8
|
export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
|
|
8
9
|
children: ({ item, index }: {
|
|
9
10
|
item: T;
|
|
@@ -26,10 +27,8 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
|
|
|
26
27
|
paginationProps?: PaginationProps;
|
|
27
28
|
disableContextMenuColumn?: boolean;
|
|
28
29
|
enableExpandableRow?: boolean;
|
|
29
|
-
filters?:
|
|
30
|
-
|
|
31
|
-
filtersProps: DataGridToolbarProps;
|
|
32
|
-
};
|
|
30
|
+
filters?: DataGridToolbarProps;
|
|
31
|
+
search?: DataGridSearchbarProps;
|
|
33
32
|
isLoading?: boolean;
|
|
34
33
|
enableMultiSorting?: boolean;
|
|
35
34
|
spacing?: Spacing;
|
|
@@ -3,6 +3,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
|
|
|
3
3
|
children?: ReactElement | string | number;
|
|
4
4
|
isLoading?: boolean;
|
|
5
5
|
spacing?: React.CSSProperties;
|
|
6
|
+
searchValue?: string;
|
|
6
7
|
cellIndex?: number;
|
|
7
8
|
columnLength?: number;
|
|
8
9
|
disableContextMenuColumn?: boolean;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { InputWrapperProps } from "../../..";
|
|
3
|
+
export interface DataGridSearchbarProps {
|
|
4
|
+
onSearch: (value: string) => void;
|
|
5
|
+
initialSearchValue?: string;
|
|
6
|
+
debounceTime?: number;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
inputWrapperProps?: InputWrapperProps;
|
|
9
|
+
}
|
|
10
|
+
export declare const DataGridSearchbar: ({ onSearch, initialSearchValue, debounceTime, inputWrapperProps, placeholder }: DataGridSearchbarProps) => React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
|
|
3
|
-
export interface DataGridToolbarProps
|
|
3
|
+
export interface DataGridToolbarProps {
|
|
4
4
|
columnsMetadata: DataGridColumnMetadata[];
|
|
5
5
|
filterValues?: Filter[];
|
|
6
6
|
translations?: FiltersTranslations;
|
|
@@ -9,5 +9,4 @@ export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
|
|
|
9
9
|
onFilterDelete?: (id: string) => void;
|
|
10
10
|
onFiltersClear?: () => void;
|
|
11
11
|
}
|
|
12
|
-
export declare const
|
|
13
|
-
export declare const DataGridToolbar: React.ForwardRefExoticComponent<Omit<DataGridToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear }: DataGridToolbarProps) => React.JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
|
|
2
|
+
type Props = ComponentPropsWithRef<"div">;
|
|
3
|
+
export declare const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
|
|
4
|
+
export declare const DataGridToolbarWrapper: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
5
|
+
ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
6
|
+
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export {};
|
package/package.json
CHANGED
|
@@ -24,6 +24,8 @@ import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
|
|
|
24
24
|
import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
|
|
25
25
|
import { Spacing, useSpacing } from "../../hooks/useSpacing";
|
|
26
26
|
import { DataGridToolbar, DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
|
|
27
|
+
import { DataGridToolbarWrapper } from "./DataGridFilters/DataGridToolbarWrapper";
|
|
28
|
+
import { DataGridSearchbar, DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
|
|
27
29
|
|
|
28
30
|
export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
|
|
29
31
|
children: ({ item, index }: { item: T; index: number }) => ReactElement;
|
|
@@ -44,10 +46,8 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
|
|
|
44
46
|
paginationProps?: PaginationProps;
|
|
45
47
|
disableContextMenuColumn?: boolean;
|
|
46
48
|
enableExpandableRow?: boolean;
|
|
47
|
-
filters?:
|
|
48
|
-
|
|
49
|
-
filtersProps: DataGridToolbarProps;
|
|
50
|
-
};
|
|
49
|
+
filters?: DataGridToolbarProps;
|
|
50
|
+
search?: DataGridSearchbarProps;
|
|
51
51
|
isLoading?: boolean;
|
|
52
52
|
enableMultiSorting?: boolean;
|
|
53
53
|
spacing?: Spacing;
|
|
@@ -65,6 +65,7 @@ const DataGridInner = <T extends {}>(
|
|
|
65
65
|
disableContextMenuColumn,
|
|
66
66
|
enableExpandableRow,
|
|
67
67
|
filters,
|
|
68
|
+
search,
|
|
68
69
|
isLoading,
|
|
69
70
|
enableMultiSorting,
|
|
70
71
|
emptyLabel,
|
|
@@ -132,8 +133,11 @@ const DataGridInner = <T extends {}>(
|
|
|
132
133
|
paddingBottom: styleWithSpacing?.paddingBottom
|
|
133
134
|
}}
|
|
134
135
|
>
|
|
135
|
-
{filters
|
|
136
|
-
<
|
|
136
|
+
{filters || search ? (
|
|
137
|
+
<DataGridToolbarWrapper>
|
|
138
|
+
{search && <DataGridSearchbar {...search} />}
|
|
139
|
+
{filters && <DataGridToolbar {...filters} />}
|
|
140
|
+
</DataGridToolbarWrapper>
|
|
137
141
|
) : (
|
|
138
142
|
<DataGridActions
|
|
139
143
|
{...actions}
|
|
@@ -164,6 +168,7 @@ const DataGridInner = <T extends {}>(
|
|
|
164
168
|
disableContextMenuColumn={disableContextMenuColumn}
|
|
165
169
|
emptyLabel={emptyLabel}
|
|
166
170
|
spacing={styleWithSpacing}
|
|
171
|
+
searchValue={search?.initialSearchValue}
|
|
167
172
|
>
|
|
168
173
|
{children}
|
|
169
174
|
</DataGridBody>
|
|
@@ -27,6 +27,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
|
|
|
27
27
|
headers: HeaderCell[];
|
|
28
28
|
isLoading?: boolean;
|
|
29
29
|
disableContextMenuColumn?: boolean;
|
|
30
|
+
searchValue?: string;
|
|
30
31
|
emptyLabel?: string;
|
|
31
32
|
spacing?: React.CSSProperties;
|
|
32
33
|
}
|
|
@@ -42,6 +43,7 @@ const DataGridBodyInner = <T extends {}>(
|
|
|
42
43
|
disableContextMenuColumn,
|
|
43
44
|
emptyLabel,
|
|
44
45
|
spacing,
|
|
46
|
+
searchValue,
|
|
45
47
|
...rest
|
|
46
48
|
}: Props<T>,
|
|
47
49
|
ref: Ref<HTMLTableSectionElement>
|
|
@@ -77,6 +79,7 @@ const DataGridBodyInner = <T extends {}>(
|
|
|
77
79
|
|
|
78
80
|
return data?.map((item, index) => {
|
|
79
81
|
return React.cloneElement(children({ item, index }), {
|
|
82
|
+
searchValue: searchValue,
|
|
80
83
|
headers,
|
|
81
84
|
spacing,
|
|
82
85
|
disableContextMenuColumn
|