@onewelcome/react-lib-components 6.7.0 → 7.0.0

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.module.esm.js

@@ -0,0 +1,2 @@
+import l from "../../../lib/style-inject.js";var i='/*!\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_toolbar__SeZ6y{flex-wrap:wrap;padding-bottom:1rem;width:100%}.DataGridToolbar-module_toolbar__SeZ6y,.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_actions-wrapper__oEYeN{align-items:center;display:flex;gap:.5rem;justify-content:flex-start}.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_clear-button__4Zdc7{background:none;border:none;cursor:pointer}.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_clear-button__4Zdc7:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.DataGridToolbar-module_toolbar__SeZ6y .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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0YsdUNBT0Usa0JBQXNCLENBQ3RCLFFBQVMsQ0FMVCxVQUFXLENBRVgsV0FBWSxDQUNaLGVBQWdCLENBRmhCLFNBQVUsQ0FIVixpQkFBa0IsQ0FDbEIsU0FPRixDQUVBLHNDQUNFLFlBQ0YsQ0FFQSx3Q0FDRSw2REFDRixDQUNBLHVDQUNFLHdDQUNFLHVCQUNGLENBQ0YsQ0FFQSx5Q0FDRSw4REFDRixDQUNBLHVDQUNFLHlDQUNFLHVCQUNGLENBQ0YsQ0FFQSxrREFDRSxHQUNFLDJCQUNGLENBQ0EsR0FDRSx1QkFDRixDQUNGLENBQ0EsbURBQ0UsR0FDRSx1QkFDRixDQUNBLEdBQ0UsMkJBQ0YsQ0FDRixDQUNBLHVDQUlFLGNBQWUsQ0FHZixtQkFBb0IsQ0FEcEIsVUFFRixDQUNBLDZIQVBFLGtCQUFtQixDQURuQixZQUFhLENBSWIsU0FBVyxDQUZYLDBCQVdGLENBQ0EsbUZBQ0UsZUFBZ0IsQ0FDaEIsV0FBWSxDQUNaLGNBQ0YsQ0FDQSxpR0FHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0EsMEhBS0UsNkJBQThCLENBSDlCLG9DQUFxQyxDQUNyQyx3Q0FBeUMsQ0FGekMsUUFBUyxDQUdULHlCQUVGIiwiZmlsZSI6IkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLnRvb2xiYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAwLjVyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nLWJvdHRvbTogMXJlbTtcbn1cbi50b29sYmFyIC5hY3Rpb25zLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGdhcDogMC41cmVtO1xufVxuLnRvb2xiYXIgLmNsZWFyLWJ1dHRvbiB7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLnRvb2xiYXIgLmNsZWFyLWJ1dHRvbjpmb2N1cy12aXNpYmxlIHtcbiAgb3V0bGluZTogMC4xMjVyZW0gc29saWQgdmFyKC0tY29sb3ItZm9jdXMpO1xuICBvdXRsaW5lLW9mZnNldDogMDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZm9jdXMtYm9yZGVyLXJhZGl1cyk7XG59XG4udG9vbGJhciAuY2xlYXItYnV0dG9uIC5jYXB0aW9uIHtcbiAgbWFyZ2luOiAwO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1kYXRhLWdyaWQpO1xuICBsaW5lLWhlaWdodDogdmFyKC0tZGF0YS1ncmlkLWxpbmUtaGVpZ2h0KTtcbiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5NTAwKTtcbn0iXX0= */';var a={"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",toolbar:"DataGridToolbar-module_toolbar__SeZ6y","actions-wrapper":"DataGridToolbar-module_actions-wrapper__oEYeN","clear-button":"DataGridToolbar-module_clear-button__4Zdc7",caption:"DataGridToolbar-module_caption__Jf-jO"};l(i);export{a as default};
+//# sourceMappingURL=DataGridToolbar.module.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.module.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbar.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/DataGrid/DataGridHeader/DataGridHeader.esm.js

@@ -1,2 +1,2 @@
-import e,{useState as n,useEffect as t}from"react";import{DataGridHeaderCell as i}from"./DataGridHeaderCell.esm.js";import o from"./DataGridHeader.module.esm.js";const d=[void 0,"ASC","DESC"];const l=({initialSort:l,onSort:a,headers:r,disableContextMenuColumn:c,enableMultiSorting:s,spacing:m,...u},v)=>{const[g,f]=n(l!==null&&l!==void 0?l:[]);t((()=>{f(l!==null&&l!==void 0?l:[])}),[l]);const p=e=>{const n=d.findIndex((n=>n===e));return d[n+1%d.length]};const h=e=>{const n=g.find((n=>n.name===e));const t=s?g.filter((n=>n.name!==e)):[];const i=p(n===null||n===void 0?void 0:n.direction);return i?[{name:e,direction:i},...t]:t};const S=e=>{const n=h(e);a===null||a===void 0?void 0:a(n);f(n)};const x=r.map(((n,t)=>{var o,d;if(n.hidden)return null;let l={textAlign:(o=n.align)!==null&&o!==void 0?o:"left"};if(t===0)l.paddingLeft=m===null||m===void 0?void 0:m.paddingLeft;if(t===r.length-1&&c)l.paddingRight=m===null||m===void 0?void 0:m.paddingRight;const s=g.find((e=>e.name===n.name));return e.createElement(i,{key:n.name,name:n.name,headline:n.headline,disableSorting:(d=n.disableSorting)!==null&&d!==void 0?d:!a,onSort:S,activeSortDirection:s===null||s===void 0?void 0:s.direction,style:l})}));return e.createElement("thead",{...u,ref:v},e.createElement("tr",{className:o["row"]},x,!c&&e.createElement("td",{style:{paddingRight:m===null||m===void 0?void 0:m.paddingRight},"aria-label":"context menu",className:o["context-menu"]})))};const a=e.forwardRef(l);export{a as DataGridHeader};
+import e,{useState as n,useEffect as t}from"react";import{DataGridHeaderCell as i}from"./DataGridHeaderCell.esm.js";import o from"./DataGridHeader.module.esm.js";const d=[void 0,"ASC","DESC"];const l=({initialSort:l,onSort:a,headers:r,disableContextMenuColumn:c,enableExpandableRow:s,enableMultiSorting:m,spacing:u,...g},v)=>{const[f,p]=n(l!==null&&l!==void 0?l:[]);t((()=>{p(l!==null&&l!==void 0?l:[])}),[l]);const h=e=>{const n=d.findIndex((n=>n===e));return d[n+1%d.length]};const b=e=>{const n=f.find((n=>n.name===e));const t=m?f.filter((n=>n.name!==e)):[];const i=h(n===null||n===void 0?void 0:n.direction);return i?[{name:e,direction:i},...t]:t};const S=e=>{const n=b(e);a===null||a===void 0?void 0:a(n);p(n)};const x=r.map(((n,t)=>{var o,d;if(n.hidden)return null;let l={textAlign:(o=n.align)!==null&&o!==void 0?o:"left"};if(t===0)l.paddingLeft=u===null||u===void 0?void 0:u.paddingLeft;if(t===r.length-1&&c)l.paddingRight=u===null||u===void 0?void 0:u.paddingRight;const s=f.find((e=>e.name===n.name));return e.createElement(i,{key:n.name,name:n.name,headline:n.headline,disableSorting:(d=n.disableSorting)!==null&&d!==void 0?d:!a,onSort:S,activeSortDirection:s===null||s===void 0?void 0:s.direction,style:l})}));return e.createElement("thead",{...g,ref:v},e.createElement("tr",{className:o["row"]},s&&e.createElement("td",{style:{paddingRight:u===null||u===void 0?void 0:u.paddingRight},"aria-label":"expandable row"}),x,!c&&e.createElement("td",{style:{paddingRight:u===null||u===void 0?void 0:u.paddingRight},"aria-label":"context menu",className:o["context-menu"]})))};const a=e.forwardRef(l);export{a as DataGridHeader};
 //# sourceMappingURL=DataGridHeader.esm.js.map

package/dist/esm/DataGrid/DataGridHeader/DataGridHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeader.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeader.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, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useState } from \"react\";\nimport { Direction, HeaderCell, OnSortFunction, Sort } from \"../datagrid.interfaces\";\nimport { DataGridHeaderCell } from \"./DataGridHeaderCell\";\nimport classes from \"./DataGridHeader.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"thead\"> {\n  headers: HeaderCell[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  disableContextMenuColumn?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: React.CSSProperties;\n}\n\nconst sortingStates = [undefined, \"ASC\", \"DESC\"] as (Direction | undefined)[];\n\nconst DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (\n  {\n    initialSort,\n    onSort,\n    headers,\n    disableContextMenuColumn,\n    enableMultiSorting,\n    spacing,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [sortList, setSortList] = useState(initialSort ?? []);\n\n  useEffect(() => {\n    setSortList(initialSort ?? []);\n  }, [initialSort]);\n\n  const calculateNextSortState = (direction?: Direction) => {\n    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);\n    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];\n  };\n\n  /**\n   * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.\n   * Last modified sorting column has the highest priority.\n   */\n  const updateSortList = (name: string): Sort => {\n    const current = sortList.find(item => item.name === name);\n    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];\n    const newSortDirection = calculateNextSortState(current?.direction);\n    return newSortDirection\n      ? [{ name, direction: newSortDirection }, ...restSortList]\n      : restSortList;\n  };\n\n  const wrapOnSort = (name: string) => {\n    const newSort = updateSortList(name);\n    onSort?.(newSort);\n    setSortList(newSort);\n  };\n\n  const headerCells = headers.map((header, index) => {\n    if (header.hidden) {\n      return null;\n    }\n\n    let headerStyle: React.CSSProperties = {\n      textAlign: header.align ?? \"left\"\n    };\n\n    if (index === 0) {\n      headerStyle.paddingLeft = spacing?.paddingLeft;\n    }\n    if (index === headers.length - 1 && disableContextMenuColumn) {\n      headerStyle.paddingRight = spacing?.paddingRight;\n    }\n\n    const sort = sortList.find(item => item.name === header.name);\n    return (\n      <DataGridHeaderCell\n        key={header.name}\n        name={header.name}\n        headline={header.headline}\n        disableSorting={header.disableSorting ?? !onSort}\n        onSort={wrapOnSort}\n        activeSortDirection={sort?.direction}\n        style={headerStyle}\n      />\n    );\n  });\n\n  return (\n    <thead {...rest} ref={ref}>\n      <tr className={classes[\"row\"]}>\n        {headerCells}\n        {!disableContextMenuColumn && (\n          <td\n            style={{ paddingRight: spacing?.paddingRight }}\n            aria-label=\"context menu\"\n            className={classes[\"context-menu\"]}\n          ></td>\n        )}\n      </tr>\n    </thead>\n  );\n};\n\nexport const DataGridHeader = React.forwardRef(DataGridHeaderComponent);\n"],"names":["sortingStates","undefined","DataGridHeaderComponent","initialSort","onSort","headers","disableContextMenuColumn","enableMultiSorting","spacing","rest","ref","sortList","setSortList","useState","useEffect","calculateNextSortState","direction","currentDirectionIdx","findIndex","item","length","updateSortList","name","current","find","restSortList","filter","newSortDirection","wrapOnSort","newSort","headerCells","map","header","index","hidden","headerStyle","textAlign","_a","align","paddingLeft","paddingRight","sort","React","DataGridHeaderCell","key","headline","disableSorting","_b","activeSortDirection","style","createElement","className","classes","DataGridHeader","forwardRef"],"mappings":"kKA8BA,MAAMA,EAAgB,MAACC,EAAW,MAAO,QAEzC,MAAMC,EAAoF,EAEtFC,cACAC,SACAC,UACAC,2BACAC,qBACAC,aACGC,GAELC,KAEA,MAAOC,EAAUC,GAAeC,EAASV,IAAW,MAAXA,SAAA,EAAAA,EAAe,IAExDW,GAAU,KACRF,EAAYT,IAAA,MAAAA,WAAAA,EAAe,GAAG,GAC7B,CAACA,IAEJ,MAAMY,EAA0BC,IAC9B,MAAMC,EAAsBjB,EAAckB,WAAUC,GAAQA,IAASH,IACrE,OAAOhB,EAAciB,EAAuB,EAAIjB,EAAcoB,OAAQ,EAOxE,MAAMC,EAAkBC,IACtB,MAAMC,EAAUZ,EAASa,MAAKL,GAAQA,EAAKG,OAASA,IACpD,MAAMG,EAAelB,EAAqBI,EAASe,QAAOP,GAAQA,EAAKG,OAASA,IAAQ,GACxF,MAAMK,EAAmBZ,EAAuBQ,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASP,WACzD,OAAOW,EACH,CAAC,CAAEL,OAAMN,UAAWW,MAAuBF,GAC3CA,CAAY,EAGlB,MAAMG,EAAcN,IAClB,MAAMO,EAAUR,EAAeC,GAC/BlB,UAAAA,SAAM,OAAA,EAANA,EAASyB,GACTjB,EAAYiB,EAAQ,EAGtB,MAAMC,EAAczB,EAAQ0B,KAAI,CAACC,EAAQC,aACvC,GAAID,EAAOE,OACT,OAAO,KAGT,IAAIC,EAAmC,CACrCC,WAAWC,EAAAL,EAAOM,4BAAS,QAG7B,GAAIL,IAAU,EACZE,EAAYI,YAAc/B,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAAS+B,YAErC,GAAIN,IAAU5B,EAAQe,OAAS,GAAKd,EAClC6B,EAAYK,aAAehC,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAASgC,aAGtC,MAAMC,EAAO9B,EAASa,MAAKL,GAAQA,EAAKG,OAASU,EAAOV,OACxD,OACEoB,gBAACC,EAAkB,CACjBC,IAAKZ,EAAOV,KACZA,KAAMU,EAAOV,KACbuB,SAAUb,EAAOa,SACjBC,gBAAgBC,EAAAf,EAAOc,kBAAkB,MAAAC,SAAA,EAAAA,GAAC3C,EAC1CA,OAAQwB,EACRoB,oBAAqBP,UAAAA,SAAI,OAAA,EAAJA,EAAMzB,UAC3BiC,MAAOd,GAET,IAGJ,OACEO,EAAWQ,cAAA,QAAA,IAAAzC,EAAMC,IAAKA,GACpBgC,EAAAQ,cAAA,KAAA,CAAIC,UAAWC,EAAQ,QACpBtB,GACCxB,GACAoC,EAAAQ,cAAA,KAAA,CACED,MAAO,CAAET,aAAchC,IAAA,MAAAA,kBAAAA,EAASgC,cACrB,aAAA,eACXW,UAAWC,EAAQ,mBAK3B,EAGS,MAAAC,EAAiBX,EAAMY,WAAWpD"}
+{"version":3,"file":"DataGridHeader.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeader.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, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useState } from \"react\";\nimport { Direction, HeaderCell, OnSortFunction, Sort } from \"../datagrid.interfaces\";\nimport { DataGridHeaderCell } from \"./DataGridHeaderCell\";\nimport classes from \"./DataGridHeader.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"thead\"> {\n  headers: HeaderCell[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  enableExpandableRow?: boolean;\n  disableContextMenuColumn?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: React.CSSProperties;\n}\n\nconst sortingStates = [undefined, \"ASC\", \"DESC\"] as (Direction | undefined)[];\n\nconst DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (\n  {\n    initialSort,\n    onSort,\n    headers,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    enableMultiSorting,\n    spacing,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [sortList, setSortList] = useState(initialSort ?? []);\n\n  useEffect(() => {\n    setSortList(initialSort ?? []);\n  }, [initialSort]);\n\n  const calculateNextSortState = (direction?: Direction) => {\n    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);\n    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];\n  };\n\n  /**\n   * The sortList contains sorting columns objects. The order of those objects determines priorities of sorting.\n   * Last modified sorting column has the highest priority.\n   */\n  const updateSortList = (name: string): Sort => {\n    const current = sortList.find(item => item.name === name);\n    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];\n    const newSortDirection = calculateNextSortState(current?.direction);\n    return newSortDirection\n      ? [{ name, direction: newSortDirection }, ...restSortList]\n      : restSortList;\n  };\n\n  const wrapOnSort = (name: string) => {\n    const newSort = updateSortList(name);\n    onSort?.(newSort);\n    setSortList(newSort);\n  };\n\n  const headerCells = headers.map((header, index) => {\n    if (header.hidden) {\n      return null;\n    }\n\n    let headerStyle: React.CSSProperties = {\n      textAlign: header.align ?? \"left\"\n    };\n\n    if (index === 0) {\n      headerStyle.paddingLeft = spacing?.paddingLeft;\n    }\n    if (index === headers.length - 1 && disableContextMenuColumn) {\n      headerStyle.paddingRight = spacing?.paddingRight;\n    }\n\n    const sort = sortList.find(item => item.name === header.name);\n    return (\n      <DataGridHeaderCell\n        key={header.name}\n        name={header.name}\n        headline={header.headline}\n        disableSorting={header.disableSorting ?? !onSort}\n        onSort={wrapOnSort}\n        activeSortDirection={sort?.direction}\n        style={headerStyle}\n      />\n    );\n  });\n\n  return (\n    <thead {...rest} ref={ref}>\n      <tr className={classes[\"row\"]}>\n        {enableExpandableRow && (\n          <td style={{ paddingRight: spacing?.paddingRight }} aria-label=\"expandable row\"></td>\n        )}\n        {headerCells}\n        {!disableContextMenuColumn && (\n          <td\n            style={{ paddingRight: spacing?.paddingRight }}\n            aria-label=\"context menu\"\n            className={classes[\"context-menu\"]}\n          ></td>\n        )}\n      </tr>\n    </thead>\n  );\n};\n\nexport const DataGridHeader = React.forwardRef(DataGridHeaderComponent);\n"],"names":["sortingStates","undefined","DataGridHeaderComponent","initialSort","onSort","headers","disableContextMenuColumn","enableExpandableRow","enableMultiSorting","spacing","rest","ref","sortList","setSortList","useState","useEffect","calculateNextSortState","direction","currentDirectionIdx","findIndex","item","length","updateSortList","name","current","find","restSortList","filter","newSortDirection","wrapOnSort","newSort","headerCells","map","header","index","hidden","headerStyle","textAlign","_a","align","paddingLeft","paddingRight","sort","React","DataGridHeaderCell","key","headline","disableSorting","_b","activeSortDirection","style","createElement","className","classes","DataGridHeader","forwardRef"],"mappings":"kKA+BA,MAAMA,EAAgB,MAACC,EAAW,MAAO,QAEzC,MAAMC,EAAoF,EAEtFC,cACAC,SACAC,UACAC,2BACAC,sBACAC,qBACAC,aACGC,GAELC,KAEA,MAAOC,EAAUC,GAAeC,EAASX,IAAW,MAAXA,SAAA,EAAAA,EAAe,IAExDY,GAAU,KACRF,EAAYV,IAAA,MAAAA,WAAAA,EAAe,GAAG,GAC7B,CAACA,IAEJ,MAAMa,EAA0BC,IAC9B,MAAMC,EAAsBlB,EAAcmB,WAAUC,GAAQA,IAASH,IACrE,OAAOjB,EAAckB,EAAuB,EAAIlB,EAAcqB,OAAQ,EAOxE,MAAMC,EAAkBC,IACtB,MAAMC,EAAUZ,EAASa,MAAKL,GAAQA,EAAKG,OAASA,IACpD,MAAMG,EAAelB,EAAqBI,EAASe,QAAOP,GAAQA,EAAKG,OAASA,IAAQ,GACxF,MAAMK,EAAmBZ,EAAuBQ,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASP,WACzD,OAAOW,EACH,CAAC,CAAEL,OAAMN,UAAWW,MAAuBF,GAC3CA,CAAY,EAGlB,MAAMG,EAAcN,IAClB,MAAMO,EAAUR,EAAeC,GAC/BnB,UAAAA,SAAM,OAAA,EAANA,EAAS0B,GACTjB,EAAYiB,EAAQ,EAGtB,MAAMC,EAAc1B,EAAQ2B,KAAI,CAACC,EAAQC,aACvC,GAAID,EAAOE,OACT,OAAO,KAGT,IAAIC,EAAmC,CACrCC,WAAWC,EAAAL,EAAOM,4BAAS,QAG7B,GAAIL,IAAU,EACZE,EAAYI,YAAc/B,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAAS+B,YAErC,GAAIN,IAAU7B,EAAQgB,OAAS,GAAKf,EAClC8B,EAAYK,aAAehC,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAASgC,aAGtC,MAAMC,EAAO9B,EAASa,MAAKL,GAAQA,EAAKG,OAASU,EAAOV,OACxD,OACEoB,gBAACC,EAAkB,CACjBC,IAAKZ,EAAOV,KACZA,KAAMU,EAAOV,KACbuB,SAAUb,EAAOa,SACjBC,gBAAgBC,EAAAf,EAAOc,kBAAkB,MAAAC,SAAA,EAAAA,GAAC5C,EAC1CA,OAAQyB,EACRoB,oBAAqBP,UAAAA,SAAI,OAAA,EAAJA,EAAMzB,UAC3BiC,MAAOd,GAET,IAGJ,OACEO,EAAWQ,cAAA,QAAA,IAAAzC,EAAMC,IAAKA,GACpBgC,EAAAQ,cAAA,KAAA,CAAIC,UAAWC,EAAQ,QACpB9C,GACCoC,EAAAQ,cAAA,KAAA,CAAID,MAAO,CAAET,aAAchC,UAAAA,SAAO,OAAA,EAAPA,EAASgC,cAA2B,aAAA,mBAEhEV,GACCzB,GACAqC,EAAAQ,cAAA,KAAA,CACED,MAAO,CAAET,aAAchC,IAAA,MAAAA,kBAAAA,EAASgC,cACrB,aAAA,eACXW,UAAWC,EAAQ,mBAK3B,EAGS,MAAAC,EAAiBX,EAAMY,WAAWrD"}

package/dist/esm/Form/FileUpload/FileItem/FileItem.esm.js

@@ -1,2 +1,2 @@
-import e from"react";import t from"./FileItem.module.esm.js";import{Typography as n}from"../../../Typography/Typography.esm.js";import{Icons as o,Icon as a}from"../../../Icon/Icon.esm.js";import{ProgressBar as r}from"../../../ProgressBar/ProgressBar.esm.js";import{Button as c}from"../../../Button/Button.esm.js";import{Link as i}from"../../../Link/Link.esm.js";var l;(function(e){e["DELETE"]="delete";e["DOWNLOAD"]="download";e["REMOVE"]="remove";e["ABORT"]="abort";e["RETRY"]="retry"})(l||(l={}));var s;(function(e){e["COMPLETED"]="completed";e["UPLOADING"]="uploading";e["ERROR"]="error";e["RETRY"]="retry";e["READONLY"]="readonly"})(s||(s={}));const m=({name:m,status:p,error:E,progress:f,downloadFileLink:O,totalPercentage:y,onRequestedFileAction:I},d)=>{const N=e=>{switch(e){case s.COMPLETED:return{fileIcon:o.FileAltIcon,actionIcons:[{type:o.Trash,action:l.DELETE},{type:o.DownloadFile,action:l.DOWNLOAD}]};case s.ERROR:return{fileIcon:o.Error,actionIcons:[{type:o.Times,action:l.REMOVE}]};case s.UPLOADING:return{fileIcon:o.FileAltIcon,actionIcons:[{type:o.AbortFile,action:l.ABORT}]};case s.RETRY:return{fileIcon:o.FileAltIcon,actionIcons:[{type:o.Refresh,action:l.RETRY},{type:o.Trash,action:l.REMOVE}]};case s.READONLY:default:return{fileIcon:o.FileAltIcon}}};const R=N(p);const u=e=>{const t=e.indexOf(".");return{friendlyName:e.slice(0,t),extension:e.slice(t+1)}};const{friendlyName:A,extension:D}=u(m);const L=n=>e.createElement(a,{key:n.action,title:n.action,icon:n.type,className:t["action-icon"]});const T=(n,o=s.UPLOADING)=>n.map((n=>e.createElement(e.Fragment,null,n.action!==l.DOWNLOAD&&e.createElement(c,{color:"primary",startIcon:L(n),title:n.action!==l.ABORT?n.action:"",type:"button",variant:"text",onClick:()=>n&&I&&I(n.action,m)},n.action!==l.ABORT?n.action:""),n.action===l.DOWNLOAD&&O&&e.createElement(i,{color:"primary",display:"link",to:O,type:"download",target:"_blank",prefixIcon:e.createElement(a,{key:n.action,className:t["action-icon"],title:n.action,icon:n.type})},n.action))));const g=()=>e.createElement(n,{variant:"body",title:m,className:`${t["file-name"]} ${p?t[p]:""}`},p==="retry"&&e.createElement(a,{icon:o.Error,className:`${t["file-icon"]} ${p?t[p]:""}`}),e.createElement(a,{icon:R.fileIcon,className:t["file-icon"]}),e.createElement("span",{className:t["friendly-name"]},A),".",e.createElement("span",null,D));const b=()=>e.createElement(r,{className:t["progress-bar"],completed:f,label:`${A}.${D}`,percentage:y});return e.createElement("div",{ref:d,className:t["file-item-wrapper"],"aria-label":`${m}-wrapper`},e.createElement("div",{className:t["file-list-container"]},p!==s.UPLOADING&&g(),e.createElement("div",{className:`${p===s.UPLOADING?t["progress-with-action"]:""}`},p===s.UPLOADING&&b(),e.createElement("div",{className:t["action-button-wrapper"]},R.actionIcons&&T(R.actionIcons,p)))),E&&e.createElement(n,{variant:"sub-text",className:`${t["file-subtitle"]} ${p?t[p]:""}`},E))};const p=e.forwardRef(m);export{s as ACTION_STATUS,l as FILE_ACTION,p as FileItem};
+import e,{Fragment as t}from"react";import n from"./FileItem.module.esm.js";import{Typography as o}from"../../../Typography/Typography.esm.js";import{Icons as a,Icon as c}from"../../../Icon/Icon.esm.js";import{ProgressBar as r}from"../../../ProgressBar/ProgressBar.esm.js";import{Button as i}from"../../../Button/Button.esm.js";import{Link as l}from"../../../Link/Link.esm.js";var s;(function(e){e["DELETE"]="delete";e["DOWNLOAD"]="download";e["REMOVE"]="remove";e["ABORT"]="abort";e["RETRY"]="retry"})(s||(s={}));var m;(function(e){e["COMPLETED"]="completed";e["UPLOADING"]="uploading";e["ERROR"]="error";e["RETRY"]="retry";e["READONLY"]="readonly"})(m||(m={}));const p=({name:p,status:E,error:f,progress:y,downloadFileLink:O,totalPercentage:d,onRequestedFileAction:I},R)=>{const N=e=>{switch(e){case m.COMPLETED:return{fileIcon:a.FileAltIcon,actionIcons:[{type:a.Trash,action:s.DELETE},{type:a.DownloadFile,action:s.DOWNLOAD}]};case m.ERROR:return{fileIcon:a.Error,actionIcons:[{type:a.Times,action:s.REMOVE}]};case m.UPLOADING:return{fileIcon:a.FileAltIcon,actionIcons:[{type:a.AbortFile,action:s.ABORT}]};case m.RETRY:return{fileIcon:a.FileAltIcon,actionIcons:[{type:a.Refresh,action:s.RETRY},{type:a.Trash,action:s.REMOVE}]};case m.READONLY:default:return{fileIcon:a.FileAltIcon}}};const u=N(E);const A=e=>{const t=e.indexOf(".");return{friendlyName:e.slice(0,t),extension:e.slice(t+1)}};const{friendlyName:D,extension:L}=A(p);const T=t=>e.createElement(c,{key:t.action,title:t.action,icon:t.type,className:n["action-icon"]});const b=o=>o.map((o=>e.createElement(t,{key:o.action},o.action!==s.DOWNLOAD&&e.createElement(i,{color:"primary",startIcon:T(o),title:o.action!==s.ABORT?o.action:"",type:"button",variant:"text",onClick:()=>o&&I&&I(o.action,p)},o.action!==s.ABORT?o.action:""),o.action===s.DOWNLOAD&&O&&e.createElement(l,{color:"primary",display:"link",to:O,type:"download",target:"_blank",prefixIcon:e.createElement(c,{key:o.action,className:n["action-icon"],title:o.action,icon:o.type})},o.action))));const g=()=>e.createElement(o,{variant:"body",title:p,className:`${n["file-name"]} ${E?n[E]:""}`},E==="retry"&&e.createElement(c,{icon:a.Error,className:`${n["file-icon"]} ${E?n[E]:""}`}),e.createElement(c,{icon:u.fileIcon,className:n["file-icon"]}),e.createElement("span",{className:n["friendly-name"]},D),".",e.createElement("span",null,L));const v=()=>e.createElement(r,{className:n["progress-bar"],completed:y,label:`${D}.${L}`,percentage:d});return e.createElement("div",{ref:R,className:n["file-item-wrapper"],"aria-label":`${p}-wrapper`},e.createElement("div",{className:n["file-list-container"]},E!==m.UPLOADING&&g(),e.createElement("div",{className:`${E===m.UPLOADING?n["progress-with-action"]:""}`},E===m.UPLOADING&&v(),e.createElement("div",{className:n["action-button-wrapper"]},u.actionIcons&&b(u.actionIcons)))),f&&e.createElement(o,{variant:"sub-text",className:`${n["file-subtitle"]} ${E?n[E]:""}`},f))};const E=e.forwardRef(p);export{m as ACTION_STATUS,s as FILE_ACTION,E as FileItem};
 //# sourceMappingURL=FileItem.esm.js.map

package/dist/esm/Form/FileUpload/FileItem/FileItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.esm.js","sources":["../../../../../../../src/components/Form/FileUpload/FileItem/FileItem.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 \"./FileItem.module.scss\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { ProgressBar } from \"../../../ProgressBar/ProgressBar\";\nimport { FileType } from \"../FileUpload\";\nimport { Button } from \"../../../Button/Button\";\nimport { Link } from \"../../../Link/Link\";\nexport type UploadProgress = \"uploading\" | \"completed\" | \"error\" | \"readonly\" | \"retry\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  name: string;\n  status?: UploadProgress;\n  progress?: number;\n  error?: string;\n  downloadFileLink?: string;\n  totalPercentage?: number;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n}\ninterface FileItemIcons {\n  fileIcon: Icons;\n  actionIcons?: { type: Icons; action: FILE_ACTION }[];\n}\n\nexport enum FILE_ACTION {\n  DELETE = \"delete\",\n  DOWNLOAD = \"download\",\n  REMOVE = \"remove\",\n  ABORT = \"abort\",\n  RETRY = \"retry\"\n}\n\nexport enum ACTION_STATUS {\n  COMPLETED = \"completed\",\n  UPLOADING = \"uploading\",\n  ERROR = \"error\",\n  RETRY = \"retry\",\n  READONLY = \"readonly\"\n}\n\nconst FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    name,\n    status,\n    error,\n    progress,\n    downloadFileLink,\n    totalPercentage,\n    onRequestedFileAction\n  }: Props,\n  ref\n) => {\n  const determineIcons = (status?: UploadProgress): FileItemIcons => {\n    switch (status) {\n      case ACTION_STATUS.COMPLETED:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.DELETE\n            },\n            {\n              type: Icons.DownloadFile,\n              action: FILE_ACTION.DOWNLOAD\n            }\n          ]\n        };\n      case ACTION_STATUS.ERROR:\n        return {\n          fileIcon: Icons.Error,\n          actionIcons: [\n            {\n              type: Icons.Times,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.UPLOADING:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.AbortFile,\n              action: FILE_ACTION.ABORT\n            }\n          ]\n        };\n      case ACTION_STATUS.RETRY:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Refresh,\n              action: FILE_ACTION.RETRY\n            },\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.READONLY:\n      default:\n        return { fileIcon: Icons.FileAltIcon };\n    }\n  };\n\n  const icons = determineIcons(status);\n\n  const getFriendlyNameAndExtension = (name: string) => {\n    const index = name.indexOf(\".\");\n    return { friendlyName: name.slice(0, index), extension: name.slice(index + 1) };\n  };\n\n  const { friendlyName, extension } = getFriendlyNameAndExtension(name);\n\n  const getStartIcon = (icon: { type: Icons; action: FILE_ACTION }) => (\n    <Icon\n      key={icon.action}\n      title={icon.action}\n      icon={icon.type}\n      className={classes[\"action-icon\"]}\n    ></Icon>\n  );\n\n  const renderActionIcons = (\n    actionIcons: { type: Icons; action: FILE_ACTION }[],\n    status: UploadProgress = ACTION_STATUS.UPLOADING\n  ) => {\n    return actionIcons.map(icon => (\n      <>\n        {icon.action !== FILE_ACTION.DOWNLOAD && (\n          <Button\n            color=\"primary\"\n            startIcon={getStartIcon(icon)}\n            title={icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n            type=\"button\"\n            variant=\"text\"\n            onClick={() =>\n              icon && onRequestedFileAction && onRequestedFileAction(icon.action, name)\n            }\n          >\n            {icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n          </Button>\n        )}\n\n        {icon.action === FILE_ACTION.DOWNLOAD && downloadFileLink && (\n          <Link\n            color=\"primary\"\n            display=\"link\"\n            to={downloadFileLink}\n            type=\"download\"\n            target=\"_blank\"\n            prefixIcon={\n              <Icon\n                key={icon.action}\n                className={classes[\"action-icon\"]}\n                title={icon.action}\n                icon={icon.type}\n              ></Icon>\n            }\n          >\n            {icon.action}\n          </Link>\n        )}\n      </>\n    ));\n  };\n\n  const getUploadedFileInfo = () => {\n    return (\n      <Typography\n        variant={\"body\"}\n        title={name}\n        className={`${classes[\"file-name\"]} ${status ? classes[status] : \"\"}`}\n      >\n        {status === \"retry\" && (\n          <Icon\n            icon={Icons.Error}\n            className={`${classes[\"file-icon\"]} ${status ? classes[status] : \"\"}`}\n          />\n        )}\n        <Icon icon={icons.fileIcon} className={classes[\"file-icon\"]} />\n        <span className={classes[\"friendly-name\"]}>{friendlyName}</span>.<span>{extension}</span>\n      </Typography>\n    );\n  };\n\n  const getProgressBar = () => {\n    return (\n      <ProgressBar\n        className={classes[\"progress-bar\"]}\n        completed={progress}\n        label={`${friendlyName}.${extension}`}\n        percentage={totalPercentage}\n      />\n    );\n  };\n\n  return (\n    <div ref={ref} className={classes[\"file-item-wrapper\"]} aria-label={`${name}-wrapper`}>\n      <div className={classes[\"file-list-container\"]}>\n        {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}\n\n        <div\n          className={`${status === ACTION_STATUS.UPLOADING ? classes[\"progress-with-action\"] : \"\"}`}\n        >\n          {status === ACTION_STATUS.UPLOADING && getProgressBar()}\n\n          <div className={classes[\"action-button-wrapper\"]}>\n            {icons.actionIcons && renderActionIcons(icons.actionIcons, status)}\n          </div>\n        </div>\n      </div>\n      {error && (\n        <Typography\n          variant={\"sub-text\"}\n          className={`${classes[\"file-subtitle\"]} ${status ? classes[status] : \"\"}`}\n        >\n          {error}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport const FileItem = React.forwardRef(FileItemComponent);\n"],"names":["FILE_ACTION","ACTION_STATUS","FileItemComponent","name","status","error","progress","downloadFileLink","totalPercentage","onRequestedFileAction","ref","determineIcons","COMPLETED","fileIcon","Icons","FileAltIcon","actionIcons","type","Trash","action","DELETE","DownloadFile","DOWNLOAD","ERROR","Error","Times","REMOVE","UPLOADING","AbortFile","ABORT","RETRY","Refresh","READONLY","icons","getFriendlyNameAndExtension","index","indexOf","friendlyName","slice","extension","getStartIcon","icon","React","createElement","Icon","key","title","className","classes","renderActionIcons","map","Fragment","Button","color","startIcon","variant","onClick","Link","display","to","target","prefixIcon","getUploadedFileInfo","Typography","getProgressBar","ProgressBar","completed","label","percentage","FileItem","forwardRef"],"mappings":"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"}
+{"version":3,"file":"FileItem.esm.js","sources":["../../../../../../../src/components/Form/FileUpload/FileItem/FileItem.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, Fragment } from \"react\";\nimport classes from \"./FileItem.module.scss\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { ProgressBar } from \"../../../ProgressBar/ProgressBar\";\nimport { FileType } from \"../FileUpload\";\nimport { Button } from \"../../../Button/Button\";\nimport { Link } from \"../../../Link/Link\";\nexport type UploadProgress = \"uploading\" | \"completed\" | \"error\" | \"readonly\" | \"retry\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  name: string;\n  status?: UploadProgress;\n  progress?: number;\n  error?: string;\n  downloadFileLink?: string;\n  totalPercentage?: number;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n}\ninterface FileItemIcons {\n  fileIcon: Icons;\n  actionIcons?: { type: Icons; action: FILE_ACTION }[];\n}\n\nexport enum FILE_ACTION {\n  DELETE = \"delete\",\n  DOWNLOAD = \"download\",\n  REMOVE = \"remove\",\n  ABORT = \"abort\",\n  RETRY = \"retry\"\n}\n\nexport enum ACTION_STATUS {\n  COMPLETED = \"completed\",\n  UPLOADING = \"uploading\",\n  ERROR = \"error\",\n  RETRY = \"retry\",\n  READONLY = \"readonly\"\n}\n\nconst FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    name,\n    status,\n    error,\n    progress,\n    downloadFileLink,\n    totalPercentage,\n    onRequestedFileAction\n  }: Props,\n  ref\n) => {\n  const determineIcons = (status?: UploadProgress): FileItemIcons => {\n    switch (status) {\n      case ACTION_STATUS.COMPLETED:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.DELETE\n            },\n            {\n              type: Icons.DownloadFile,\n              action: FILE_ACTION.DOWNLOAD\n            }\n          ]\n        };\n      case ACTION_STATUS.ERROR:\n        return {\n          fileIcon: Icons.Error,\n          actionIcons: [\n            {\n              type: Icons.Times,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.UPLOADING:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.AbortFile,\n              action: FILE_ACTION.ABORT\n            }\n          ]\n        };\n      case ACTION_STATUS.RETRY:\n        return {\n          fileIcon: Icons.FileAltIcon,\n          actionIcons: [\n            {\n              type: Icons.Refresh,\n              action: FILE_ACTION.RETRY\n            },\n            {\n              type: Icons.Trash,\n              action: FILE_ACTION.REMOVE\n            }\n          ]\n        };\n      case ACTION_STATUS.READONLY:\n      default:\n        return { fileIcon: Icons.FileAltIcon };\n    }\n  };\n\n  const icons = determineIcons(status);\n\n  const getFriendlyNameAndExtension = (name: string) => {\n    const index = name.indexOf(\".\");\n    return { friendlyName: name.slice(0, index), extension: name.slice(index + 1) };\n  };\n\n  const { friendlyName, extension } = getFriendlyNameAndExtension(name);\n\n  const getStartIcon = (icon: { type: Icons; action: FILE_ACTION }) => (\n    <Icon\n      key={icon.action}\n      title={icon.action}\n      icon={icon.type}\n      className={classes[\"action-icon\"]}\n    ></Icon>\n  );\n\n  const renderActionIcons = (actionIcons: { type: Icons; action: FILE_ACTION }[]) => {\n    return actionIcons.map(icon => (\n      <Fragment key={icon.action}>\n        {icon.action !== FILE_ACTION.DOWNLOAD && (\n          <Button\n            color=\"primary\"\n            startIcon={getStartIcon(icon)}\n            title={icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n            type=\"button\"\n            variant=\"text\"\n            onClick={() =>\n              icon && onRequestedFileAction && onRequestedFileAction(icon.action, name)\n            }\n          >\n            {icon.action !== FILE_ACTION.ABORT ? icon.action : \"\"}\n          </Button>\n        )}\n\n        {icon.action === FILE_ACTION.DOWNLOAD && downloadFileLink && (\n          <Link\n            color=\"primary\"\n            display=\"link\"\n            to={downloadFileLink}\n            type=\"download\"\n            target=\"_blank\"\n            prefixIcon={\n              <Icon\n                key={icon.action}\n                className={classes[\"action-icon\"]}\n                title={icon.action}\n                icon={icon.type}\n              ></Icon>\n            }\n          >\n            {icon.action}\n          </Link>\n        )}\n      </Fragment>\n    ));\n  };\n\n  const getUploadedFileInfo = () => {\n    return (\n      <Typography\n        variant={\"body\"}\n        title={name}\n        className={`${classes[\"file-name\"]} ${status ? classes[status] : \"\"}`}\n      >\n        {status === \"retry\" && (\n          <Icon\n            icon={Icons.Error}\n            className={`${classes[\"file-icon\"]} ${status ? classes[status] : \"\"}`}\n          />\n        )}\n        <Icon icon={icons.fileIcon} className={classes[\"file-icon\"]} />\n        <span className={classes[\"friendly-name\"]}>{friendlyName}</span>.<span>{extension}</span>\n      </Typography>\n    );\n  };\n\n  const getProgressBar = () => {\n    return (\n      <ProgressBar\n        className={classes[\"progress-bar\"]}\n        completed={progress}\n        label={`${friendlyName}.${extension}`}\n        percentage={totalPercentage}\n      />\n    );\n  };\n\n  return (\n    <div ref={ref} className={classes[\"file-item-wrapper\"]} aria-label={`${name}-wrapper`}>\n      <div className={classes[\"file-list-container\"]}>\n        {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}\n\n        <div\n          className={`${status === ACTION_STATUS.UPLOADING ? classes[\"progress-with-action\"] : \"\"}`}\n        >\n          {status === ACTION_STATUS.UPLOADING && getProgressBar()}\n\n          <div className={classes[\"action-button-wrapper\"]}>\n            {icons.actionIcons && renderActionIcons(icons.actionIcons)}\n          </div>\n        </div>\n      </div>\n      {error && (\n        <Typography\n          variant={\"sub-text\"}\n          className={`${classes[\"file-subtitle\"]} ${status ? classes[status] : \"\"}`}\n        >\n          {error}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport const FileItem = React.forwardRef(FileItemComponent);\n"],"names":["FILE_ACTION","ACTION_STATUS","FileItemComponent","name","status","error","progress","downloadFileLink","totalPercentage","onRequestedFileAction","ref","determineIcons","COMPLETED","fileIcon","Icons","FileAltIcon","actionIcons","type","Trash","action","DELETE","DownloadFile","DOWNLOAD","ERROR","Error","Times","REMOVE","UPLOADING","AbortFile","ABORT","RETRY","Refresh","READONLY","icons","getFriendlyNameAndExtension","index","indexOf","friendlyName","slice","extension","getStartIcon","icon","React","createElement","Icon","key","title","className","classes","renderActionIcons","map","Fragment","Button","color","startIcon","variant","onClick","Link","display","to","target","prefixIcon","getUploadedFileInfo","Typography","getProgressBar","ProgressBar","completed","label","percentage","FileItem","forwardRef"],"mappings":"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"}

package/dist/esm/Form/FileUpload/FileUpload.esm.js

@@ -1,2 +1,2 @@
-import e,{useRef as t,useState as a,useEffect as l}from"react";import{Button as o}from"../../Button/Button.esm.js";import{FileItem as s}from"./FileItem/FileItem.esm.js";import{Typography as r}from"../../Typography/Typography.esm.js";import n from"./FileUpload.module.esm.js";import{useDetermineStatusIcon as i}from"../../src/hooks/useDetermineStatusIcon.esm.js";const d=({name:d,accept:c,error:p,success:m,maxFileSize:u,multiple:f,id:v,title:g,labeledBy:h,disabled:E=false,onChange:b,dragAndDropText:N="Drag and drop or",selectButtonText:x="Browse file",onDragOver:y,onDragLeave:D,wrapperProps:T,onDrop:z,subText:j,onRequestedFileAction:w,exceedingMaxSizeErrorText:F,fileList:$,downloadFileLink:k,isRequired:B=true,invalidDropErrorMessage:L="Invalid file format. Supported formats are: $accept.",...P},A)=>{const I=t(null);const[R,S]=a(false);const[q,C]=a("");const[M,O]=a(false);const U=i({success:m,error:p});let _=[n["file-dropzone"]];let G=[n["upload-button-wrapper"]];let H=[n["file-selector-sub-text"]];let J=[n["file-selector-sub-text"]];R&&G.push(n["drag-active"]);const K=M||p||q;if(K){const e=n["error"];_.push(e);H.push(e);J.push(e)}E&&_.push(n["disabled"]);m&&!p&&_.push(n["success"]);const Q=e=>{let t=$?[...$]:[];const a=$.map((e=>e.name));(e===null||e===void 0?void 0:e.length)&&Array.from(e).forEach((e=>{if(!a.includes(e.name))t=f?[...t,{...X(e),data:e}]:[{...X(e),data:e}]}));return t};const V=e=>{e.preventDefault();e.stopPropagation();let t=Q(e.target.files);t.length&&W(t[t.length-1])&&(b===null||b===void 0?void 0:b(t))};const W=e=>{const t=e.name.split(".").pop();return t&&c.includes(t)};const X=e=>{const t={name:e.name,size:e.size,type:e.type};let a=false;if(u&&e.size&&e.size>=u){const e=(u/(1024*1024)).toFixed(2);t.error=F!==null&&F!==void 0?F:`The maximum allowed file size is ${e}MB. Upload a smaller file.`;t.status="error";a=true}O(a);return t};l((()=>{if($.length){const e=$.map((e=>X(e)));b===null||b===void 0?void 0:b(e)}}),[]);const Y=e=>{e.preventDefault();e.stopPropagation();if(!R)S(true);y===null||y===void 0?void 0:y(e)};const Z=e=>{e.preventDefault();e.stopPropagation();const t=e.target;if(t===null||t===void 0?void 0:t.classList.contains(n["file-dropzone"]))S(false);D===null||D===void 0?void 0:D(e)};const ee=e=>{var t,a,l;e.preventDefault();e.stopPropagation();if(((t=e===null||e===void 0?void 0:e.dataTransfer)===null||t===void 0?void 0:t.files)&&e.dataTransfer.files.length){const t=(l=(a=e===null||e===void 0?void 0:e.dataTransfer)===null||a===void 0?void 0:a.files[0])===null||l===void 0?void 0:l.name.split(".").pop();if(t&&c&&!c.includes(t)){C(L.replace("$accept",c));S(false);return}else C("");const o=Q(e.dataTransfer.files);z===null||z===void 0?void 0:z(o)}S(false)};return e.createElement("div",{className:n["file-upload-wrapper"],...T},e.createElement("div",{className:n["dropzone-wrapper"]},e.createElement("div",{className:_.join(" ")},e.createElement(r,{variant:"body-bold",className:n["file-upload-title"],ref:I},g," ",B&&e.createElement("span",{className:n["file-upload-title-mandatory"]},"*")),($===null||$===void 0?void 0:$.length)>0&&e.createElement("ul",{className:n["file-list"]},$.map((({name:t,status:a,progress:l,error:o})=>e.createElement("li",{key:t,className:a,id:t},e.createElement(s,{name:t,key:`${t}_${a}`,status:a,progress:l,error:o,downloadFileLink:k,onRequestedFileAction:w}))))),e.createElement("div",{className:G.join(" "),onDragOver:e=>!E&&Y(e),onDragLeave:e=>!E&&Z(e),onDrop:e=>!E&&ee(e)},e.createElement("div",{className:n["file-select"]},e.createElement(r,{variant:"body",className:"drag-and-drop-text"},N),e.createElement("div",{className:n["file-upload-btn"]},e.createElement(o,{variant:"outline",disabled:E},x,e.createElement("input",{...P,className:`${n["upload-input"]} ${P.className}`,ref:A,"aria-labelledby":h,type:"file",name:d,multiple:f,disabled:E,accept:c,onChange:V,spellCheck:false}))),!E&&U,e.createElement("span",{className:n["outline"]})))),j&&e.createElement(r,{variant:"sub-text",className:H.join(" ")},j),q&&e.createElement(r,{variant:"sub-text",className:J.join(" ")},q)))};const c=e.forwardRef(d);export{c as FileUpload};
+import e,{useRef as t,useState as a,useEffect as l}from"react";import{Button as o}from"../../Button/Button.esm.js";import{FileItem as s}from"./FileItem/FileItem.esm.js";import{Typography as r}from"../../Typography/Typography.esm.js";import n from"./FileUpload.module.esm.js";import{useDetermineStatusIcon as i}from"../../src/hooks/useDetermineStatusIcon.esm.js";const d=({name:d,accept:c,error:p,success:m,maxFileSizeInBytes:u,multiple:f,id:v,title:g,labeledBy:h,disabled:E=false,onChange:b,dragAndDropText:y="Drag and drop or",selectButtonText:x="Browse file",onDragOver:N,onDragLeave:D,wrapperProps:T,onDrop:F,subText:z,onRequestedFileAction:j,exceedingMaxSizeErrorText:w,fileList:$,downloadFileLink:B,isRequired:k=true,invalidDropErrorMessage:L="Invalid file format. Supported formats are: $accept.",noMultipleFileDropErrorMessage:P="You can upload only a single file.",...I},M)=>{const A=t(null);const[R,S]=a(false);const[q,C]=a("");const[O,U]=a(false);const K=i({success:m,error:p});let Y=[n["file-dropzone"]];let _=[n["upload-button-wrapper"]];let G=[n["file-selector-sub-text"]];let H=[n["file-selector-sub-text"]];R&&_.push(n["drag-active"]);const J=O||p||q;if(J){const e=n["error"];Y.push(e);G.push(e);H.push(e)}E&&_.push(n["disabled"]);m&&!p&&Y.push(n["success"]);const Q=e=>{let t=$?[...$]:[];const a=$.map((e=>e.name));(e===null||e===void 0?void 0:e.length)&&Array.from(e).forEach((e=>{if(!a.includes(e.name))t=f?[...t,{...X(e),data:e}]:[{...X(e),data:e}]}));return t};const V=e=>{e.preventDefault();e.stopPropagation();let t=Q(e.target.files);const a=t.length&&W(t[t.length-1]);if(a)C("");a&&(b===null||b===void 0?void 0:b(t))};const W=e=>{const t=e.name.split(".").pop();return t&&c.includes(t)};const X=e=>{const t={name:e.name,size:e.size,type:e.type};let a=false;if(u&&e.size&&e.size>=u){let e;const l=u>=1024*1024;if(l)e=`${(u/(1024*1024)).toFixed(2)}MB`;else e=`${(u/1024).toFixed(2)}KB`;t.error=w!==null&&w!==void 0?w:`The maximum allowed file size is ${e}. Upload a smaller file.`;t.status="error";a=true}U(a);return t};l((()=>{if($.length){const e=$.map((e=>X(e)));b===null||b===void 0?void 0:b(e)}}),[]);const Z=e=>{e.preventDefault();e.stopPropagation();if(!R)S(true);N===null||N===void 0?void 0:N(e)};const ee=e=>{var t;e.preventDefault();e.stopPropagation();const a=e.target;if((t=a===null||a===void 0?void 0:a.offsetParent)===null||t===void 0?void 0:t.classList.contains(n["file-dropzone"]))S(false);D===null||D===void 0?void 0:D(e)};const te=e=>{var t,a,l;e.preventDefault();e.stopPropagation();if(((t=e===null||e===void 0?void 0:e.dataTransfer)===null||t===void 0?void 0:t.files)&&e.dataTransfer.files.length){const t=(l=(a=e===null||e===void 0?void 0:e.dataTransfer)===null||a===void 0?void 0:a.files[0])===null||l===void 0?void 0:l.name.split(".").pop();if(t&&c&&!c.includes(t)){C(L.replace("$accept",c));S(false);return}else if(!f&&e.dataTransfer.files.length>1){C(P);S(false);return}else C("");const o=Q(e.dataTransfer.files);F?F===null||F===void 0?void 0:F(o):b===null||b===void 0?void 0:b(o)}S(false)};return e.createElement("div",{className:n["file-upload-wrapper"],...T},e.createElement("div",{className:n["dropzone-wrapper"]},e.createElement("div",{className:Y.join(" ")},e.createElement(r,{variant:"body-bold",className:n["file-upload-title"],ref:A},g," ",k&&e.createElement("span",{className:n["file-upload-title-mandatory"]},"*")),($===null||$===void 0?void 0:$.length)>0&&e.createElement("ul",{className:n["file-list"]},$.map((({name:t,status:a,progress:l,error:o})=>e.createElement("li",{key:t,className:a,id:t},e.createElement(s,{name:t,key:`${t}_${a}`,status:a,progress:l,error:o,downloadFileLink:B,onRequestedFileAction:j}))))),e.createElement("div",{className:_.join(" "),onDragOver:e=>!E&&Z(e),onDragLeave:e=>!E&&ee(e),onDrop:e=>!E&&te(e)},e.createElement("div",{className:n["file-select"]},e.createElement(r,{variant:"body",className:"drag-and-drop-text"},y),e.createElement("div",{className:n["file-upload-btn"]},e.createElement(o,{variant:"outline",disabled:E},x,e.createElement("input",{...I,className:`${n["upload-input"]} ${I.className}`,ref:M,"aria-labelledby":h,type:"file",name:d,multiple:f,disabled:E,accept:c,onChange:V,spellCheck:false}))),!E&&K,e.createElement("span",{className:n["outline"]})))),q&&e.createElement(r,{variant:"sub-text",className:H.join(" ")},q),z&&e.createElement(r,{variant:"sub-text",className:G.join(" ")},z)))};const c=e.forwardRef(d);export{c as FileUpload};
 //# sourceMappingURL=FileUpload.esm.js.map

package/dist/esm/Form/FileUpload/FileUpload.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.esm.js","sources":["../../../../../../src/components/Form/FileUpload/FileUpload.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, {\n  DragEvent,\n  DragEventHandler,\n  ForwardRefRenderFunction,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Button } from \"../../Button/Button\";\nimport { FILE_ACTION, FileItem, Props as FileConfig } from \"./FileItem/FileItem\";\nimport { Props as InputProps } from \"../Input/Input\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./FileUpload.module.scss\";\nimport { useDetermineStatusIcon } from \"../../../hooks/useDetermineStatusIcon\";\n\ntype FileUploadType = Omit<InputProps, \"onDrop\" | \"type\" | \"onChange\" | \"suffix\" | \"prefix\">;\nexport type FileType = Omit<FileConfig, \"onRequestedFileAction\"> &\n  Pick<File, \"size\" | \"type\"> & { data?: any };\n\nexport interface Props extends FileUploadType {\n  accept: string;\n  title: string;\n  multiple: boolean;\n  fileList: FileType[];\n  exceedingMaxSizeErrorText?: string;\n  maxFileSize?: number;\n  selectButtonText?: string;\n  dragAndDropText?: string;\n  subText?: string;\n  onDragOver?: DragEventHandler;\n  onDragEnter?: DragEventHandler;\n  onDragLeave?: DragEventHandler;\n  onDrop?: (e: FileType[]) => void;\n  onChange?: (e: FileType[]) => void;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n  downloadFileLink?: string;\n  isRequired?: boolean;\n  invalidDropErrorMessage?: string;\n}\n\nconst FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n  {\n    name,\n    accept,\n    error,\n    success,\n    maxFileSize,\n    multiple,\n    id,\n    title,\n    labeledBy,\n    disabled = false,\n    onChange,\n    dragAndDropText = \"Drag and drop or\",\n    selectButtonText = \"Browse file\",\n    onDragOver,\n    onDragLeave,\n    wrapperProps,\n    onDrop,\n    subText,\n    onRequestedFileAction,\n    exceedingMaxSizeErrorText,\n    fileList,\n    downloadFileLink,\n    isRequired = true,\n    invalidDropErrorMessage = \"Invalid file format. Supported formats are: $accept.\",\n    ...rest\n  }: Props,\n  ref\n) => {\n  const labelRef = useRef(null);\n  const [dragActive, setDragActive] = useState(false);\n  const [errorMsg, setErrorMsg] = useState(\"\");\n  const [inputError, setInputError] = useState(false);\n  const icon = useDetermineStatusIcon({ success, error });\n  let dropzoneClassNames = [classes[\"file-dropzone\"]];\n  let dropzoneContainerClassNames = [classes[\"upload-button-wrapper\"]];\n  let subTextClass = [classes[\"file-selector-sub-text\"]];\n  let errorTextClass = [classes[\"file-selector-sub-text\"]];\n  dragActive && dropzoneContainerClassNames.push(classes[\"drag-active\"]);\n  const hasError = inputError || error || errorMsg;\n  if (hasError) {\n    const errorClass = classes[\"error\"];\n    dropzoneClassNames.push(errorClass);\n    subTextClass.push(errorClass);\n    errorTextClass.push(errorClass);\n  }\n  disabled && dropzoneClassNames.push(classes[\"disabled\"]);\n  success && !error && dropzoneClassNames.push(classes[\"success\"]);\n\n  const getFileList = (files: FileList | null): FileType[] => {\n    let savedFiles = fileList ? [...fileList] : [];\n    const fileNames = fileList.map(el => el.name);\n    files?.length &&\n      Array.from(files as ArrayLike<File>).forEach(el => {\n        if (!fileNames.includes(el.name)) {\n          savedFiles = multiple\n            ? [\n                ...savedFiles,\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ]\n            : [\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ];\n        }\n      });\n    return savedFiles;\n  };\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    let files = getFileList(e.target.files);\n    files.length && verifyExtensionValidity(files[files.length - 1]) && onChange?.(files);\n  };\n\n  const verifyExtensionValidity = (file: FileType) => {\n    const extension = file.name.split(\".\").pop();\n    return extension && accept.includes(extension);\n  };\n\n  const validateUpload = (file: FileType) => {\n    const result: FileType = {\n      name: file.name,\n      size: file.size,\n      type: file.type\n    };\n\n    let err = false;\n    if (maxFileSize && file.size && file.size >= maxFileSize) {\n      const mb = (maxFileSize / (1024 * 1024)).toFixed(2);\n      result.error =\n        exceedingMaxSizeErrorText ??\n        `The maximum allowed file size is ${mb}MB. Upload a smaller file.`;\n      result.status = \"error\";\n      err = true;\n    }\n    setInputError(err);\n    return result;\n  };\n\n  useEffect(() => {\n    if (fileList.length) {\n      const validatedFiles = fileList.map(file => validateUpload(file));\n      onChange?.(validatedFiles);\n    }\n  }, []);\n\n  const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!dragActive) {\n      setDragActive(true);\n    }\n    onDragOver?.(e);\n  };\n\n  const handleOnDragLeave = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const target = e.target as HTMLElement;\n    if (target?.classList.contains(classes[\"file-dropzone\"])) {\n      setDragActive(false);\n    }\n    onDragLeave?.(e);\n  };\n\n  const handleOnDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e?.dataTransfer?.files && e.dataTransfer.files.length) {\n      const extension = e?.dataTransfer?.files[0]?.name.split(\".\").pop();\n      if (extension && accept && !accept.includes(extension)) {\n        setErrorMsg(invalidDropErrorMessage.replace(\"$accept\", accept));\n        setDragActive(false);\n        return;\n      } else {\n        setErrorMsg(\"\");\n      }\n      const validatedFiles = getFileList(e.dataTransfer.files);\n      onDrop?.(validatedFiles);\n    }\n    setDragActive(false);\n  };\n\n  return (\n    <div className={classes[\"file-upload-wrapper\"]} {...wrapperProps}>\n      <div className={classes[\"dropzone-wrapper\"]}>\n        <div className={dropzoneClassNames.join(\" \")}>\n          <Typography variant=\"body-bold\" className={classes[\"file-upload-title\"]} ref={labelRef}>\n            {title}{\" \"}\n            {isRequired && <span className={classes[\"file-upload-title-mandatory\"]}>*</span>}\n          </Typography>\n\n          {fileList?.length > 0 && (\n            <ul className={classes[\"file-list\"]}>\n              {fileList.map(({ name, status, progress, error }) => (\n                <li key={name} className={status} id={name}>\n                  <FileItem\n                    name={name}\n                    key={`${name}_${status}`}\n                    status={status}\n                    progress={progress}\n                    error={error}\n                    downloadFileLink={downloadFileLink}\n                    onRequestedFileAction={onRequestedFileAction}\n                  />\n                </li>\n              ))}\n            </ul>\n          )}\n\n          <div\n            className={dropzoneContainerClassNames.join(\" \")}\n            onDragOver={e => !disabled && handleOnDragOver(e)}\n            onDragLeave={e => !disabled && handleOnDragLeave(e)}\n            onDrop={e => !disabled && handleOnDrop(e)}\n          >\n            <div className={classes[\"file-select\"]}>\n              <Typography variant=\"body\" className={\"drag-and-drop-text\"}>\n                {dragAndDropText}\n              </Typography>\n\n              <div className={classes[\"file-upload-btn\"]}>\n                <Button variant=\"outline\" disabled={disabled}>\n                  {selectButtonText}\n                  <input\n                    {...rest}\n                    className={`${classes[\"upload-input\"]} ${rest.className}`}\n                    ref={ref}\n                    aria-labelledby={labeledBy}\n                    type=\"file\"\n                    name={name}\n                    multiple={multiple}\n                    disabled={disabled}\n                    accept={accept}\n                    onChange={onInputChange}\n                    spellCheck={false}\n                  />\n                </Button>\n              </div>\n              {!disabled && icon}\n              <span className={classes[\"outline\"]}></span>\n            </div>\n          </div>\n        </div>\n        {subText && (\n          <Typography variant={\"sub-text\"} className={subTextClass.join(\" \")}>\n            {subText}\n          </Typography>\n        )}\n\n        {errorMsg && (\n          <Typography variant={\"sub-text\"} className={errorTextClass.join(\" \")}>\n            {errorMsg}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FileUpload = React.forwardRef(FileUploadComponent);\n"],"names":["FileUploadComponent","name","accept","error","success","maxFileSize","multiple","id","title","labeledBy","disabled","onChange","dragAndDropText","selectButtonText","onDragOver","onDragLeave","wrapperProps","onDrop","subText","onRequestedFileAction","exceedingMaxSizeErrorText","fileList","downloadFileLink","isRequired","invalidDropErrorMessage","rest","ref","labelRef","useRef","dragActive","setDragActive","useState","errorMsg","setErrorMsg","inputError","setInputError","icon","useDetermineStatusIcon","dropzoneClassNames","classes","dropzoneContainerClassNames","subTextClass","errorTextClass","push","hasError","errorClass","getFileList","files","savedFiles","fileNames","map","el","length","Array","from","forEach","includes","validateUpload","data","onInputChange","e","preventDefault","stopPropagation","target","verifyExtensionValidity","file","extension","split","pop","result","size","type","err","mb","toFixed","status","useEffect","validatedFiles","handleOnDragOver","handleOnDragLeave","classList","contains","handleOnDrop","dataTransfer","_a","_c","_b","replace","React","className","createElement","join","Typography","variant","progress","key","FileItem","Button","spellCheck","FileUpload","forwardRef"],"mappings":"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"}
+{"version":3,"file":"FileUpload.esm.js","sources":["../../../../../../src/components/Form/FileUpload/FileUpload.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, {\n  DragEvent,\n  DragEventHandler,\n  ForwardRefRenderFunction,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Button } from \"../../Button/Button\";\nimport { FILE_ACTION, FileItem, Props as FileConfig } from \"./FileItem/FileItem\";\nimport { Props as InputProps } from \"../Input/Input\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./FileUpload.module.scss\";\nimport { useDetermineStatusIcon } from \"../../../hooks/useDetermineStatusIcon\";\n\ntype FileUploadType = Omit<InputProps, \"onDrop\" | \"type\" | \"onChange\" | \"suffix\" | \"prefix\">;\nexport type FileType = Omit<FileConfig, \"onRequestedFileAction\"> &\n  Pick<File, \"size\" | \"type\"> & { data?: any };\n\nexport interface Props extends FileUploadType {\n  accept: string;\n  title: string;\n  multiple: boolean;\n  fileList: FileType[];\n  exceedingMaxSizeErrorText?: string;\n  maxFileSizeInBytes?: number;\n  selectButtonText?: string;\n  dragAndDropText?: string;\n  subText?: string;\n  onDragOver?: DragEventHandler;\n  onDragEnter?: DragEventHandler;\n  onDragLeave?: DragEventHandler;\n  onDrop?: (e: FileType[]) => void;\n  onChange?: (e: FileType[]) => void;\n  onRequestedFileAction?: (action: FILE_ACTION, name: FileType[\"name\"]) => void;\n  downloadFileLink?: string;\n  isRequired?: boolean;\n  invalidDropErrorMessage?: string;\n  noMultipleFileDropErrorMessage?: string;\n}\n\nconst FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (\n  {\n    name,\n    accept,\n    error,\n    success,\n    maxFileSizeInBytes,\n    multiple,\n    id,\n    title,\n    labeledBy,\n    disabled = false,\n    onChange,\n    dragAndDropText = \"Drag and drop or\",\n    selectButtonText = \"Browse file\",\n    onDragOver,\n    onDragLeave,\n    wrapperProps,\n    onDrop,\n    subText,\n    onRequestedFileAction,\n    exceedingMaxSizeErrorText,\n    fileList,\n    downloadFileLink,\n    isRequired = true,\n    invalidDropErrorMessage = \"Invalid file format. Supported formats are: $accept.\",\n    noMultipleFileDropErrorMessage = \"You can upload only a single file.\",\n    ...rest\n  }: Props,\n  ref\n) => {\n  const labelRef = useRef(null);\n  const [dragActive, setDragActive] = useState(false);\n  const [errorMsg, setErrorMsg] = useState(\"\");\n  const [inputError, setInputError] = useState(false);\n  const icon = useDetermineStatusIcon({ success, error });\n  let dropzoneClassNames = [classes[\"file-dropzone\"]];\n  let dropzoneContainerClassNames = [classes[\"upload-button-wrapper\"]];\n  let subTextClass = [classes[\"file-selector-sub-text\"]];\n  let errorTextClass = [classes[\"file-selector-sub-text\"]];\n  dragActive && dropzoneContainerClassNames.push(classes[\"drag-active\"]);\n  const hasError = inputError || error || errorMsg;\n  if (hasError) {\n    const errorClass = classes[\"error\"];\n    dropzoneClassNames.push(errorClass);\n    subTextClass.push(errorClass);\n    errorTextClass.push(errorClass);\n  }\n  disabled && dropzoneContainerClassNames.push(classes[\"disabled\"]);\n  success && !error && dropzoneClassNames.push(classes[\"success\"]);\n\n  const getFileList = (files: FileList | null): FileType[] => {\n    let savedFiles = fileList ? [...fileList] : [];\n    const fileNames = fileList.map(el => el.name);\n    files?.length &&\n      Array.from(files as ArrayLike<File>).forEach(el => {\n        if (!fileNames.includes(el.name)) {\n          savedFiles = multiple\n            ? [\n                ...savedFiles,\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ]\n            : [\n                {\n                  ...validateUpload(el),\n                  data: el\n                }\n              ];\n        }\n      });\n    return savedFiles;\n  };\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    let files = getFileList(e.target.files);\n    const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);\n    if (isFileValid) {\n      setErrorMsg(\"\");\n    }\n    isFileValid && onChange?.(files);\n  };\n\n  const verifyExtensionValidity = (file: FileType) => {\n    const extension = file.name.split(\".\").pop();\n    return extension && accept.includes(extension);\n  };\n\n  const validateUpload = (file: FileType) => {\n    const result: FileType = {\n      name: file.name,\n      size: file.size,\n      type: file.type\n    };\n\n    let err = false;\n\n    if (maxFileSizeInBytes && file.size && file.size >= maxFileSizeInBytes) {\n      let sizeMessage: string;\n      const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;\n\n      if (isAtLeastOneMb) {\n        sizeMessage = `${(maxFileSizeInBytes / (1024 * 1024)).toFixed(2)}MB`;\n      } else {\n        sizeMessage = `${(maxFileSizeInBytes / 1024).toFixed(2)}KB`;\n      }\n\n      result.error =\n        exceedingMaxSizeErrorText ??\n        `The maximum allowed file size is ${sizeMessage}. Upload a smaller file.`;\n      result.status = \"error\";\n      err = true;\n    }\n\n    setInputError(err);\n    return result;\n  };\n\n  useEffect(() => {\n    if (fileList.length) {\n      const validatedFiles = fileList.map(file => validateUpload(file));\n      onChange?.(validatedFiles);\n    }\n  }, []);\n\n  const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!dragActive) {\n      setDragActive(true);\n    }\n    onDragOver?.(e);\n  };\n\n  const handleOnDragLeave = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const target = e.target as HTMLElement;\n    if (target?.offsetParent?.classList.contains(classes[\"file-dropzone\"])) {\n      setDragActive(false);\n    }\n    onDragLeave?.(e);\n  };\n\n  const handleOnDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e?.dataTransfer?.files && e.dataTransfer.files.length) {\n      const extension = e?.dataTransfer?.files[0]?.name.split(\".\").pop();\n      if (extension && accept && !accept.includes(extension)) {\n        setErrorMsg(invalidDropErrorMessage.replace(\"$accept\", accept));\n        setDragActive(false);\n        return;\n      } else if (!multiple && e.dataTransfer.files.length > 1) {\n        setErrorMsg(noMultipleFileDropErrorMessage);\n        setDragActive(false);\n        return;\n      } else {\n        setErrorMsg(\"\");\n      }\n      const validatedFiles = getFileList(e.dataTransfer.files);\n      onDrop ? onDrop?.(validatedFiles) : onChange?.(validatedFiles);\n    }\n    setDragActive(false);\n  };\n\n  return (\n    <div className={classes[\"file-upload-wrapper\"]} {...wrapperProps}>\n      <div className={classes[\"dropzone-wrapper\"]}>\n        <div className={dropzoneClassNames.join(\" \")}>\n          <Typography variant=\"body-bold\" className={classes[\"file-upload-title\"]} ref={labelRef}>\n            {title}{\" \"}\n            {isRequired && <span className={classes[\"file-upload-title-mandatory\"]}>*</span>}\n          </Typography>\n\n          {fileList?.length > 0 && (\n            <ul className={classes[\"file-list\"]}>\n              {fileList.map(({ name, status, progress, error }) => (\n                <li key={name} className={status} id={name}>\n                  <FileItem\n                    name={name}\n                    key={`${name}_${status}`}\n                    status={status}\n                    progress={progress}\n                    error={error}\n                    downloadFileLink={downloadFileLink}\n                    onRequestedFileAction={onRequestedFileAction}\n                  />\n                </li>\n              ))}\n            </ul>\n          )}\n\n          <div\n            className={dropzoneContainerClassNames.join(\" \")}\n            onDragOver={e => !disabled && handleOnDragOver(e)}\n            onDragLeave={e => !disabled && handleOnDragLeave(e)}\n            onDrop={e => !disabled && handleOnDrop(e)}\n          >\n            <div className={classes[\"file-select\"]}>\n              <Typography variant=\"body\" className={\"drag-and-drop-text\"}>\n                {dragAndDropText}\n              </Typography>\n\n              <div className={classes[\"file-upload-btn\"]}>\n                <Button variant=\"outline\" disabled={disabled}>\n                  {selectButtonText}\n                  <input\n                    {...rest}\n                    className={`${classes[\"upload-input\"]} ${rest.className}`}\n                    ref={ref}\n                    aria-labelledby={labeledBy}\n                    type=\"file\"\n                    name={name}\n                    multiple={multiple}\n                    disabled={disabled}\n                    accept={accept}\n                    onChange={onInputChange}\n                    spellCheck={false}\n                  />\n                </Button>\n              </div>\n              {!disabled && icon}\n              <span className={classes[\"outline\"]}></span>\n            </div>\n          </div>\n        </div>\n        {errorMsg && (\n          <Typography variant={\"sub-text\"} className={errorTextClass.join(\" \")}>\n            {errorMsg}\n          </Typography>\n        )}\n        {subText && (\n          <Typography variant={\"sub-text\"} className={subTextClass.join(\" \")}>\n            {subText}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FileUpload = React.forwardRef(FileUploadComponent);\n"],"names":["FileUploadComponent","name","accept","error","success","maxFileSizeInBytes","multiple","id","title","labeledBy","disabled","onChange","dragAndDropText","selectButtonText","onDragOver","onDragLeave","wrapperProps","onDrop","subText","onRequestedFileAction","exceedingMaxSizeErrorText","fileList","downloadFileLink","isRequired","invalidDropErrorMessage","noMultipleFileDropErrorMessage","rest","ref","labelRef","useRef","dragActive","setDragActive","useState","errorMsg","setErrorMsg","inputError","setInputError","icon","useDetermineStatusIcon","dropzoneClassNames","classes","dropzoneContainerClassNames","subTextClass","errorTextClass","push","hasError","errorClass","getFileList","files","savedFiles","fileNames","map","el","length","Array","from","forEach","includes","validateUpload","data","onInputChange","e","preventDefault","stopPropagation","target","isFileValid","verifyExtensionValidity","file","extension","split","pop","result","size","type","err","sizeMessage","isAtLeastOneMb","toFixed","status","useEffect","validatedFiles","handleOnDragOver","handleOnDragLeave","offsetParent","_a","classList","contains","handleOnDrop","dataTransfer","_c","_b","replace","React","className","createElement","join","Typography","variant","progress","key","FileItem","Button","spellCheck","FileUpload","forwardRef"],"mappings":"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"}

package/dist/esm/Form/FileUpload/FileUpload.module.esm.js

@@ -1,2 +1,2 @@
-import l from "../../../lib/style-inject.js";var e='/*!\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_disabled__hvZQb{background-color:var(--disabled);color:var(--greyed-out);pointer-events:none}.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)}.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVVcGxvYWQubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0U7QUFDRjs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLGtDQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSxpQ0FDRSxZQUNGLENBRUEsbUNBQ0Usd0RBQ0YsQ0FFQSx1Q0FDRSxtQ0FDRSx1QkFDRixDQUNGLENBQ0Esb0NBQ0UseURBQ0YsQ0FFQSx1Q0FDRSxvQ0FDRSx1QkFDRixDQUNGLENBQ0EsNkNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLDhDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YsQ0FDQSw4Q0FDRSxZQUFhLENBQ2IscUJBQ0YsQ0FFQSx3Q0FFRSw4Q0FBK0MsQ0FEL0Msd0NBQXlDLENBRXpDLHNCQUF3QixDQUN4QixpQkFBa0IsQ0FFbEIsdUJBQXlCLENBRHpCLHVCQUF3QixDQUV4QixzQ0FDRixDQUNBLG9GQUVFLGlCQUFtQixDQUNuQixlQUFnQixDQUZoQixpQkFHRixDQUNBLHVDQUNFLHdDQUNFLHdCQUNGLENBQ0YsQ0FDQSxpTkFFRSxrQkFDRixDQUNBLDZHQUNFLHlCQUNGLENBQ0EsZ0dBQ0Usb0JBQ0YsQ0FDQSwwRUFFRSxnQ0FBaUMsQ0FDakMsdUJBQXdCLENBRnhCLG1CQUdGLENBQ0EsK0RBQ0UsaUJBQWtCLENBQ2xCLGlCQUFrQixDQUVsQixVQUFXLENBRFgsUUFFRixDQUNBLDhGQUNFLHlCQUNGLENBRUEsZ0RBQ0UsbUNBQW9DLENBQ3BDLFdBQ0YsQ0FDQSx1SEFRRSwyQ0FBNEMsQ0FGNUMsOEZBQStGLENBQy9GLHdDQUF5QyxDQUZ6QyxPQUFRLENBRlIsUUFBUyxDQUNULFNBQVUsQ0FIVixtQkFBb0IsQ0FDcEIsaUJBQWtCLENBUWxCLHVCQUF5QixDQUR6Qix1QkFBd0IsQ0FFeEIsc0NBQ0YsQ0FDQSx1Q0FDRSx1SEFDRSx3QkFDRixDQUNGLENBQ0EsOEhBSUUsMEJBQTJCLENBSDNCLG1CQUFvQixDQUVwQixhQUFjLENBRWQsZ0JBQWlCLENBSGpCLGlCQUlGLENBQ0EsNkhBQ0UsMkNBQ0YsQ0FDQSwySEFDRSxpQkFDRixDQUNBLHVKQUNFLHlCQUNGLENBRUEsaURBQ0UsdUJBQXdCLENBQ3hCLGlCQUNGLENBQ0EsZ0ZBQ0Usa0JBQ0YsQ0FFQSxzQ0FFRSxrQkFBbUIsQ0FHbkIsOEZBQStGLENBSi9GLFlBQWEsQ0FFYixrQkFBbUIsQ0FDbkIsc0JBQXVCLENBRXZCLGVBQ0YsQ0FDQSxvREFDRSxpQkFBa0IsQ0FDbEIsaUJBQ0YsQ0FDQSwwREFDRSxlQUNGLENBRUEsdUNBR0UsV0FBWSxDQU1aLFFBQVMsQ0FFVCxjQUFlLENBVmYsYUFBYyxDQU1kLE1BQU8sQ0FHUCxTQUFVLENBTFYsaUJBQWtCLENBR2xCLE9BQVEsQ0FKUixtQkFBb0IsQ0FFcEIsS0FBTSxDQUpOLFVBVUYsQ0FDQSw2Q0FDRSxZQUNGLENBRUEsMENBQ0UsaUJBQ0YsQ0FFQSxvQ0FDRSxlQUFnQixDQUVoQixlQUFpQixDQURqQixTQUVGLENBQ0Esd0RBQ0UsbUJBQ0YiLCJmaWxlIjoiRmlsZVVwbG9hZC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cblxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLWluIHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cblxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLnNsaWRlLW91dCB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLmZpbGUtdXBsb2FkLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uZmlsZS1kcm9wem9uZSB7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWlucHV0LWJvcmRlci1yYWRpdXMpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1pbnB1dC1iYWNrZ3JvdW5kLWNvbG9yKTtcbiAgcGFkZGluZzogMC4yNXJlbSAxLjI1cmVtO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDtcbiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC4ycztcbiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0O1xufVxuLmZpbGUtZHJvcHpvbmUgLmZpbGUtdXBsb2FkLXRpdGxlIHtcbiAgbWFyZ2luOiAwIDAgMC4yNXJlbSAwO1xuICBmb250LXNpemU6IDAuODc1cmVtO1xuICBmb250LXdlaWdodDogNDAwO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLmZpbGUtZHJvcHpvbmUge1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4uZmlsZS1kcm9wem9uZS5lcnJvciBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdLFxuLmZpbGUtZHJvcHpvbmUuZXJyb3IgLmZpbGUtdXBsb2FkLXRpdGxlIHtcbiAgY29sb3I6IHZhcigtLWVycm9yKTtcbn1cbi5maWxlLWRyb3B6b25lLmVycm9yIC5maWxlLXNlbGVjdCB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuLmZpbGUtZHJvcHpvbmUuc3VjY2VzcyBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdIHtcbiAgY29sb3I6IHZhcigtLXN1Y2Nlc3MpO1xufVxuLmZpbGUtZHJvcHpvbmUuZGlzYWJsZWQge1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZGlzYWJsZWQpO1xuICBjb2xvcjogdmFyKC0tZ3JleWVkLW91dCk7XG59XG4uZmlsZS1kcm9wem9uZSBzcGFuW2RhdGEtaWNvbi1zdGF0dXNdIHtcbiAgZm9udC1zaXplOiAxLjI1cmVtO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogYXV0bztcbiAgcmlnaHQ6IDJyZW07XG59XG4uZmlsZS1kcm9wem9uZSAuZmlsZS11cGxvYWQtdGl0bGUtbWFuZGF0b3J5IHtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXJlZDUwMCk7XG59XG5cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1jb2xvci1ibHVlLWdyZXkyNSk7XG4gIHBhZGRpbmc6IDRweDtcbn1cbi51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLm91dGxpbmUge1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIGluc2V0OiAwO1xuICBib3JkZXI6IHZhcigtLWZpbGUtdXBsb2FkLWJvcmRlci13aWR0aCkgdmFyKC0tZHJhZy1kcm9wLWJvcmRlci1zdHlsZSkgdmFyKC0tY29sb3ItYmx1ZS1ncmV5NTAwKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0taW5wdXQtYm9yZGVyLXJhZGl1cyk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnktbGlnaHQpO1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBhbGw7XG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMnM7XG4gIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDtcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC51cGxvYWQtYnV0dG9uLXdyYXBwZXIuZHJhZy1hY3RpdmUgLm91dGxpbmUge1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlIC5vdXRsaW5lOjpiZWZvcmUge1xuICBjb250ZW50OiBcIkRyb3AgaGVyZVwiO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBjb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeSk7XG4gIHBhZGRpbmctdG9wOiAycmVtO1xufVxuLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZTpob3ZlciAub3V0bGluZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnktbGlnaHQpO1xufVxuLnVwbG9hZC1idXR0b24td3JhcHBlci5kcmFnLWFjdGl2ZSAuZmlsZS1zZWxlY3Qge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4udXBsb2FkLWJ1dHRvbi13cmFwcGVyLmRyYWctYWN0aXZlIC5lcnJvciAub3V0bGluZSB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuXG4uZmlsZS1zZWxlY3Rvci1zdWItdGV4dCB7XG4gIGNvbG9yOiB2YXIoLS1ncmV5ZWQtb3V0KTtcbiAgcGFkZGluZzogMCAxLjI1cmVtO1xufVxuLmZpbGUtc2VsZWN0b3Itc3ViLXRleHQuZXJyb3Ige1xuICBjb2xvcjogdmFyKC0tZXJyb3IpO1xufVxuXG4uZmlsZS1zZWxlY3Qge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYm9yZGVyOiB2YXIoLS1maWxlLXVwbG9hZC1ib3JkZXItd2lkdGgpIHZhcigtLWRyYWctZHJvcC1ib3JkZXItc3R5bGUpIHZhcigtLWNvbG9yLWJsdWUtZ3JleTEwMCk7XG4gIHBhZGRpbmc6IDEuMjVyZW07XG59XG4uZmlsZS1zZWxlY3QgW2NsYXNzKj1maWxlXSB7XG4gIGZvbnQtc2l6ZTogMS4yNXJlbTtcbiAgbWFyZ2luLWxlZnQ6IDAuNXJlbTtcbn1cbi5maWxlLXNlbGVjdCBbY2xhc3MqPXR5cG9ncmFwaHldIHtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbn1cblxuLnVwbG9hZC1pbnB1dCB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyOiBub25lO1xuICB0ZXh0LXRyYW5zZm9ybTogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIG9wYWNpdHk6IDA7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi51cGxvYWQtaW5wdXQ6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuXG4uZmlsZS11cGxvYWQtYnRuIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4uZmlsZS1saXN0IHtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwLjI1cmVtIDA7XG59XG4uZmlsZS1saXN0IGxpOm5vdCg6bGFzdC1jaGlsZCkge1xuICBtYXJnaW4tYm90dG9tOiAwLjVyZW07XG59Il19 */';var i={"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",disabled:"FileUpload-module_disabled__hvZQb","file-upload-title-mandatory":"FileUpload-module_file-upload-title-mandatory__xEZ-6","upload-button-wrapper":"FileUpload-module_upload-button-wrapper__vVTvg","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"};l(e);export{i as default};
+import l from "../../../lib/style-inject.js";var e='/*!\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== */';var i={"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"};l(e);export{i as default};
 //# sourceMappingURL=FileUpload.module.esm.js.map

package/dist/esm/Form/Select/MultiSelect/MultiOption.esm.js

@@ -1,2 +1,2 @@
-import e,{createRef as o,useEffect as t}from"react";import{Option as l}from"../SingleSelect/Option.esm.js";import i from"./MultiSelect.module.esm.js";const s=({fixed:s,hasFocus:n,className:r,...d},c)=>{let f=c||o();const a=[];r&&a.push(r);n&&a.push(i["focus"]);const u=e=>{var o,t,l;const i=e.parentElement;const s=(o=e.parentElement)===null||o===void 0?void 0:o.parentElement;const n=!!(s===null||s===void 0?void 0:s.style.maxHeight);if(n)s===null||s===void 0?void 0:s.scrollTo(0,e.offsetTop-((t=s===null||s===void 0?void 0:s.offsetHeight)!==null&&t!==void 0?t:1)/2);i===null||i===void 0?void 0:i.scrollTo(0,e.offsetTop-((l=i===null||i===void 0?void 0:i.offsetHeight)!==null&&l!==void 0?l:1)/2)};t((()=>{if(f.current&&n)u(f.current)}),[n,f]);return e.createElement(l,{ref:f,isSelected:n,disableDefaultSelectedStyle:true,className:a.join(" "),"aria-disabled":false,...d})};const n=e.forwardRef(s);export{n as MultiOption};
+import e,{createRef as o,useEffect as l}from"react";import{Option as t}from"../SingleSelect/Option.esm.js";import i from"./MultiSelect.module.esm.js";const s=({fixed:s,hasFocus:n,className:r,...d},c)=>{let u=c||o();const f=[];r&&f.push(r);n&&f.push(i["focus"]);const a=e=>{var o,l,t;const i=e.parentElement;const s=(o=e.parentElement)===null||o===void 0?void 0:o.parentElement;const n=!!(s===null||s===void 0?void 0:s.style.maxHeight);if(n)(s===null||s===void 0?void 0:s.scrollTo)&&(s===null||s===void 0?void 0:s.scrollTo(0,e.offsetTop-((l=s===null||s===void 0?void 0:s.offsetHeight)!==null&&l!==void 0?l:1)/2));(i===null||i===void 0?void 0:i.scrollTo)&&(i===null||i===void 0?void 0:i.scrollTo(0,e.offsetTop-((t=i===null||i===void 0?void 0:i.offsetHeight)!==null&&t!==void 0?t:1)/2))};l((()=>{if(u.current&&n)a(u.current)}),[n,u]);return e.createElement(t,{ref:u,isSelected:n,disableDefaultSelectedStyle:true,className:f.join(" "),"aria-disabled":false,...d})};const n=e.forwardRef(s);export{n as MultiOption};
 //# sourceMappingURL=MultiOption.esm.js.map

package/dist/esm/Form/Select/MultiSelect/MultiOption.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiOption.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiOption.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, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from \"react\";\nimport { Props as SelectOptionProps, Option as SelectOption } from \"../SingleSelect/Option\";\n\nimport classes from \"./MultiSelect.module.scss\";\n\nexport interface Props extends SelectOptionProps {\n  fixed?: boolean;\n}\n\nconst MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (\n  { fixed: _fixed, hasFocus, className, ...rest }: Props,\n  ref\n) => {\n  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();\n\n  const additionalClasses = [];\n  className && additionalClasses.push(className);\n  hasFocus && additionalClasses.push(classes[\"focus\"]);\n\n  const scrollToSelectedElement = (element: HTMLLIElement) => {\n    const listbox = element.parentElement;\n    const listboxWrapper = element.parentElement?.parentElement;\n    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;\n    if (isListboxWrapperScrollable) {\n      listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);\n    }\n    listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);\n  };\n\n  useEffect(() => {\n    if (innerOptionRef.current && hasFocus) {\n      scrollToSelectedElement(innerOptionRef.current);\n    }\n  }, [hasFocus, innerOptionRef]);\n\n  return (\n    <SelectOption\n      ref={innerOptionRef}\n      isSelected={hasFocus}\n      disableDefaultSelectedStyle\n      className={additionalClasses.join(\" \")}\n      aria-disabled={false}\n      {...rest}\n    />\n  );\n};\n\nexport const MultiOption = React.forwardRef(MultiOptionComponent);\n"],"names":["MultiOptionComponent","fixed","_fixed","hasFocus","className","rest","ref","innerOptionRef","createRef","additionalClasses","push","classes","scrollToSelectedElement","element","listbox","parentElement","listboxWrapper","_a","isListboxWrapperScrollable","style","maxHeight","scrollTo","offsetTop","_b","offsetHeight","_c","useEffect","current","React","createElement","SelectOption","isSelected","disableDefaultSelectedStyle","join","MultiOption","forwardRef"],"mappings":"sJAyBA,MAAMA,EAAuE,EACzEC,MAAOC,EAAQC,WAAUC,eAAcC,GACzCC,KAEA,IAAIC,EAAkBD,GAAoCE,IAE1D,MAAMC,EAAoB,GAC1BL,GAAaK,EAAkBC,KAAKN,GACpCD,GAAYM,EAAkBC,KAAKC,EAAQ,UAE3C,MAAMC,EAA2BC,cAC/B,MAAMC,EAAUD,EAAQE,cACxB,MAAMC,GAAiBC,EAAAJ,EAAQE,iBAAa,MAAAE,SAAA,OAAA,EAAAA,EAAEF,cAC9C,MAAMG,KAA+BF,IAAc,MAAdA,SAAc,OAAA,EAAdA,EAAgBG,MAAMC,WAC3D,GAAIF,EACFF,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAgBK,SAAS,EAAGR,EAAQS,YAAaC,EAAAP,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAgBQ,gBAAgB,MAAAD,SAAA,EAAAA,EAAA,GAAK,GAExFT,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAASO,SAAS,EAAGR,EAAQS,YAAaG,EAAAX,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAASU,gBAAgB,MAAAC,SAAA,EAAAA,EAAA,GAAK,EAAE,EAG5EC,GAAU,KACR,GAAInB,EAAeoB,SAAWxB,EAC5BS,EAAwBL,EAAeoB,QACxC,GACA,CAACxB,EAAUI,IAEd,OACEqB,EAAAC,cAACC,EAAY,CACXxB,IAAKC,EACLwB,WAAY5B,EACZ6B,4BAA2B,KAC3B5B,UAAWK,EAAkBwB,KAAK,KACnB,gBAAA,SACX5B,GAEN,EAGS,MAAA6B,EAAcN,EAAMO,WAAWnC"}
+{"version":3,"file":"MultiOption.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiOption.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, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from \"react\";\nimport { Props as SelectOptionProps, Option as SelectOption } from \"../SingleSelect/Option\";\n\nimport classes from \"./MultiSelect.module.scss\";\n\nexport interface Props extends SelectOptionProps {\n  fixed?: boolean;\n}\n\nconst MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (\n  { fixed: _fixed, hasFocus, className, ...rest }: Props,\n  ref\n) => {\n  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();\n\n  const additionalClasses = [];\n  className && additionalClasses.push(className);\n  hasFocus && additionalClasses.push(classes[\"focus\"]);\n\n  const scrollToSelectedElement = (element: HTMLLIElement) => {\n    const listbox = element.parentElement;\n    const listboxWrapper = element.parentElement?.parentElement;\n    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;\n\n    if (isListboxWrapperScrollable) {\n      listboxWrapper?.scrollTo &&\n        listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);\n    }\n    listbox?.scrollTo && listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);\n  };\n\n  useEffect(() => {\n    if (innerOptionRef.current && hasFocus) {\n      scrollToSelectedElement(innerOptionRef.current);\n    }\n  }, [hasFocus, innerOptionRef]);\n\n  return (\n    <SelectOption\n      ref={innerOptionRef}\n      isSelected={hasFocus}\n      disableDefaultSelectedStyle\n      className={additionalClasses.join(\" \")}\n      aria-disabled={false}\n      {...rest}\n    />\n  );\n};\n\nexport const MultiOption = React.forwardRef(MultiOptionComponent);\n"],"names":["MultiOptionComponent","fixed","_fixed","hasFocus","className","rest","ref","innerOptionRef","createRef","additionalClasses","push","classes","scrollToSelectedElement","element","listbox","parentElement","listboxWrapper","_a","isListboxWrapperScrollable","style","maxHeight","scrollTo","offsetTop","_b","offsetHeight","_c","useEffect","current","React","createElement","SelectOption","isSelected","disableDefaultSelectedStyle","join","MultiOption","forwardRef"],"mappings":"sJAyBA,MAAMA,EAAuE,EACzEC,MAAOC,EAAQC,WAAUC,eAAcC,GACzCC,KAEA,IAAIC,EAAkBD,GAAoCE,IAE1D,MAAMC,EAAoB,GAC1BL,GAAaK,EAAkBC,KAAKN,GACpCD,GAAYM,EAAkBC,KAAKC,EAAQ,UAE3C,MAAMC,EAA2BC,cAC/B,MAAMC,EAAUD,EAAQE,cACxB,MAAMC,GAAiBC,EAAAJ,EAAQE,iBAAa,MAAAE,SAAA,OAAA,EAAAA,EAAEF,cAC9C,MAAMG,KAA+BF,IAAc,MAAdA,SAAc,OAAA,EAAdA,EAAgBG,MAAMC,WAE3D,GAAIF,GACFF,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAgBK,YACdL,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAgBK,SAAS,EAAGR,EAAQS,YAAaC,EAAAP,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAgBQ,gBAAgB,MAAAD,SAAA,EAAAA,EAAA,GAAK,KAE1FT,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAASO,YAAYP,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAASO,SAAS,EAAGR,EAAQS,YAAaG,EAAAX,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAASU,mCAAgB,GAAK,GAAE,EAGjGE,GAAU,KACR,GAAInB,EAAeoB,SAAWxB,EAC5BS,EAAwBL,EAAeoB,QACxC,GACA,CAACxB,EAAUI,IAEd,OACEqB,EAAAC,cAACC,EAAY,CACXxB,IAAKC,EACLwB,WAAY5B,EACZ6B,4BAA2B,KAC3B5B,UAAWK,EAAkBwB,KAAK,KACnB,gBAAA,SACX5B,GAEN,EAGS,MAAA6B,EAAcN,EAAMO,WAAWnC"}

package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js

@@ -1,2 +1,2 @@
-import e from"./MultiSelect.module.esm.js";import t,{useRef as s,useState as n,createRef as r,useEffect as o,Fragment as l}from"react";import{useBodyClick as a}from"../../../src/hooks/useBodyClick.esm.js";import{useDetermineStatusIcon as c}from"../../../src/hooks/useDetermineStatusIcon.esm.js";import i from"../../../src/readyclasses.module.esm.js";import{generateID as d,filterProps as u,escapeRegExp as m}from"../../../src/util/helper.esm.js";import{Icon as p,Icons as f}from"../../../Icon/Icon.esm.js";import{useAddNewBtn as h}from"../useAddNewBtn.esm.js";import{useSelectPositionList as v}from"../useSelectPositionList.esm.js";import{SelectButton as b}from"./SelectButton.esm.js";import{SelectedOptions as C}from"./SelectedOptions.esm.js";import{useArrowNavigation as E}from"./useArrowNavigation.esm.js";import{useSearch as y}from"./useSearch.esm.js";const N=(e,t)=>`${e}_option${t}`;const g=e=>`${e}_listbox`;const x=({id:x,children:I,name:S,disabled:w=false,labeledBy:j,placeholder:B,describedBy:R,searchPlaceholder:k="Search item",searchInputProps:L,selectButtonProps:$={},className:P,error:A=false,success:O=false,value:F,clearLabel:D="Clear selection",noResultsLabel:H="No results found",onChange:M,addNew:_,search:K={enabled:true,renderThreshold:0},...T},U)=>{const V=s(x!==null&&x!==void 0?x:d(20));const[q,z]=n(false);const[G,J]=n([]);const Q=s(null);const W=s(null);const[X,Y]=n(0);const[Z,ee]=n(false);const[te,se]=n(false);const[ne,re]=n(t.Children.count(I)-G.length);const{filter:oe,renderSearch:le,searchInputRef:ae,resetSearchState:ce,searchVisible:ie}=y({selectId:V.current,expanded:q,search:K,searchInputClassName:e["select-search"],optionsCount:ne,focusedSelectItem:X,setFocusedSelectItem:Y,searchInputProps:L,searchPlaceholder:k,describedBy:R,getOptionId:N,getListboxId:g});const{addBtnRef:de,addNewBtnOptionsContainerClassName:ue,renderAddNew:me}=h({id:N(V.current,ne),addNew:_,filter:oe,focusedSelectItem:X,optionsCount:ne,searchInputRef:ae,shouldClick:Z,onClickCallback:()=>{ee(false);ce()}});const pe=U||r();const fe=e=>{if(pe.current&&e){const t=e.getAttribute("data-value");const s=[...pe.current.options];const n=s.filter((e=>e.selected)).map((e=>e.value));s.forEach((e=>{if(e.value===t||n.includes(e.value))e.selected=true}));pe.current.dispatchEvent(new Event("change",{bubbles:true}))}z(false);ce()};const he=e=>{if(pe.current){const t=[...pe.current.options];t.find((t=>t.value===e)).selected=false;pe.current.dispatchEvent(new Event("change",{bubbles:true}))}};const ve=s(null);const{onArrowNavigation:be}=E({expanded:q,setExpanded:z,setFocusedSelectItem:Y,childrenCount:ne,setShouldClick:ee,addBtnRef:de,searchInputRef:ae,customSelectButtonRef:ve,onClose:ce});const{listPosition:Ce,opacity:Ee,optionsListMaxHeight:ye,setListPosition:Ne,setOpacity:ge}=v({expanded:q,optionListReference:W,containerReference:Q,addBtnRef:de});const xe=e=>{const s=t.Children.map(I,(e=>e));const n=e.map((e=>{const t=s.find((t=>t.props.value===e));return{value:e,label:t===null||t===void 0?void 0:t.props.children,fixed:t===null||t===void 0?void 0:t.props.fixed}}));J(n)};const Ie=e=>{if(pe.current){const t=[...pe.current.options];t.forEach((t=>{if(e.includes(t.value))t.selected=true;else t.selected=false}))}};const Se=()=>{const s=e=>e.filter((e=>typeof e==="object"&&"props"in e&&!G.find((t=>t.value===e.props.value))));let n;if(oe!==""){const e=t.Children.toArray(I).filter((e=>e.props.children.toLowerCase().match(m(oe.toLowerCase()))!==null));n=r(s(e))}else n=r(s(t.Children.toArray(I)));ne!==n.length&&re(n.length);if(n.length===0)return t.createElement("li",{className:e["no-results"]},H);return n;function r(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{Y(e)},onOptionSelect:e=>{fe(e.current);z(false);ee(false)},isSearching:false,selectOpened:q,childIndex:s,hasFocus:X===s,shouldClick:Z,id:N(V.current,s)})))}};const we=()=>q?t.createElement(p,{className:e["chevron-icon"],icon:f.ChevronUp}):t.createElement(p,{className:e["chevron-icon"],icon:f.ChevronDown});const je=c({success:O,error:A});const Be=e=>{M===null||M===void 0?void 0:M(e)};o((()=>{if(q&&ae.current){se(true);ae.current.focus()}if(!q&&ve.current&&te){se(false);ve.current.focus()}}),[q,ve.current,te,ae.current]);o((()=>{xe(F);Ie(F)}),[F]);a((e=>!e.target.closest(".custom-select")&&q),(()=>{z(false);Ne({top:0,bottom:"initial"});ge(0)}),q);const Re=[];q&&Re.push(e.expanded);A&&Re.push(e.error);w&&Re.push(e.disabled);P&&Re.push(P);O&&Re.push(e.success);const ke=()=>{z((e=>!e));ee(false)};return t.createElement(l,null,t.createElement("select",{...u(T,/^data-/,false),tabIndex:-1,multiple:true,"aria-hidden":"true",ref:pe,name:S,onChange:Be,className:i["sr-only"]},t.createElement("option",{value:""}),t.Children.map(I,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...u(T,/^data-/),id:V.current,ref:Q,onKeyDown:be,className:`custom-select ${e.select} ${Re.join(" ")} ${P!==null&&P!==void 0?P:""}`},t.createElement("div",{className:`${e["custom-select"]} ${Re.join(" ")} `,style:{display:"flex"}},t.createElement("div",{className:e["display-container"],"data-display":true},t.createElement(b,{...$,onClick:ke,name:S,ref:ve,disabled:w,"aria-disabled":w,"aria-invalid":A,"aria-expanded":q,"aria-haspopup":"listbox","aria-labelledby":j,"aria-describedby":R}),(F===null||F===void 0?void 0:F.length)===0&&B&&t.createElement("span",{className:e["placeholder"]},B),(F===null||F===void 0?void 0:F.length)>0&&t.createElement(C,{disabled:w,display:G,onClick:ke,onRemove:he}),ie&&le()),t.createElement("div",{className:e["status"]},je||we())),t.createElement("div",{ref:W,className:`list-wrapper ${e["list-wrapper"]}`,style:{display:q?"block":"none",opacity:Ee,maxHeight:ye.wrapper,pointerEvents:q?"auto":"none",...Ce}},t.createElement("ul",{id:g(V.current),className:ue,role:"listbox","aria-multiselectable":"true",style:{maxHeight:ye.list}},Se()),me())))};const I=t.forwardRef(x);export{I as MultiSelect};
+import e from"./MultiSelect.module.esm.js";import t,{useRef as s,useState as n,createRef as o,useEffect as r,Fragment as l}from"react";import{useBodyClick as a}from"../../../src/hooks/useBodyClick.esm.js";import{useDetermineStatusIcon as c}from"../../../src/hooks/useDetermineStatusIcon.esm.js";import i from"../../../src/readyclasses.module.esm.js";import{generateID as d,filterProps as u,escapeRegExp as m}from"../../../src/util/helper.esm.js";import{Icon as p,Icons as f}from"../../../Icon/Icon.esm.js";import{useAddNewBtn as h}from"../useAddNewBtn.esm.js";import{useSelectPositionList as v}from"../useSelectPositionList.esm.js";import{SelectButton as b}from"./SelectButton.esm.js";import{SelectedOptions as C}from"./SelectedOptions.esm.js";import{useArrowNavigation as E}from"./useArrowNavigation.esm.js";import{useSearch as y}from"./useSearch.esm.js";const N=(e,t)=>`${e}_option${t}`;const g=e=>`${e}_listbox`;const x=({id:x,children:S,name:w,disabled:I=false,labeledBy:j,placeholder:B,describedBy:R,selectButtonProps:k={},className:L,error:$=false,success:A=false,value:O,clearLabel:P="Clear selection",noResultsLabel:F="No results found",onChange:D,addNew:H,search:M={enabled:true,renderThreshold:0,searchPlaceholder:"Search item"},..._},K)=>{const T=s(x!==null&&x!==void 0?x:d(20));const[U,V]=n(false);const[q,z]=n([]);const G=s(null);const J=s(null);const[Q,W]=n(0);const[X,Y]=n(false);const[Z,ee]=n(false);const[te,se]=n(t.Children.count(S)-q.length);const{filter:ne,renderSearch:oe,searchInputRef:re,resetSearchState:le,searchVisible:ae}=y({selectId:T.current,expanded:U,search:M,searchInputClassName:e["select-search"],optionsCount:te,focusedSelectItem:Q,setFocusedSelectItem:W,describedBy:R,getOptionId:N,getListboxId:g});const{addBtnRef:ce,addNewBtnOptionsContainerClassName:ie,renderAddNew:de}=h({id:N(T.current,te),addNew:H,filter:ne,focusedSelectItem:Q,optionsCount:te,searchInputRef:re,shouldClick:X,onClickCallback:()=>{Y(false);le()}});const ue=K||o();const me=e=>{if(ue.current&&e){const t=e.getAttribute("data-value");const s=[...ue.current.options];const n=s.filter((e=>e.selected)).map((e=>e.value));s.forEach((e=>{if(e.value===t||n.includes(e.value))e.selected=true}));ue.current.dispatchEvent(new Event("change",{bubbles:true}))}V(false);le()};const pe=e=>{if(ue.current){const t=[...ue.current.options];t.find((t=>t.value===e)).selected=false;ue.current.dispatchEvent(new Event("change",{bubbles:true}))}};const fe=s(null);const{onArrowNavigation:he}=E({expanded:U,setExpanded:V,setFocusedSelectItem:W,childrenCount:te,setShouldClick:Y,addBtnRef:ce,searchInputRef:re,customSelectButtonRef:fe,onClose:le});const{listPosition:ve,opacity:be,optionsListMaxHeight:Ce,setListPosition:Ee,setOpacity:ye}=v({expanded:U,optionListReference:J,containerReference:G,addBtnRef:ce});const Ne=e=>{const s=t.Children.map(S,(e=>e));const n=e.map((e=>{const t=s.find((t=>t.props.value===e));return{value:e,label:t===null||t===void 0?void 0:t.props.children,fixed:t===null||t===void 0?void 0:t.props.fixed}}));z(n)};const ge=e=>{if(ue.current){const t=[...ue.current.options];t.forEach((t=>{if(e.includes(t.value))t.selected=true;else t.selected=false}))}};const xe=()=>{const s=e=>e.filter((e=>typeof e==="object"&&"props"in e&&!q.find((t=>t.value===e.props.value))));let n;if(ne!==""){const e=t.Children.toArray(S).filter((e=>e.props.children.toLowerCase().match(m(ne.toLowerCase()))!==null));n=o(s(e))}else n=o(s(t.Children.toArray(S)));te!==n.length&&se(n.length);if(n.length===0)return t.createElement("li",{className:e["no-results"]},F);return n;function o(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{W(e)},onOptionSelect:e=>{me(e.current);V(false);Y(false)},isSearching:false,selectOpened:U,childIndex:s,hasFocus:Q===s,shouldClick:X,id:N(T.current,s)})))}};const Se=()=>U?t.createElement(p,{className:e["chevron-icon"],icon:f.ChevronUp}):t.createElement(p,{className:e["chevron-icon"],icon:f.ChevronDown});const we=c({success:A,error:$});const Ie=e=>{D===null||D===void 0?void 0:D(e)};r((()=>{if(U&&re.current){ee(true);re.current.focus()}if(!U&&fe.current&&Z){ee(false);fe.current.focus()}}),[U,fe.current,Z,re.current]);r((()=>{Ne(O);ge(O)}),[O]);a((e=>!e.target.closest(".custom-select")&&U),(()=>{V(false);Ee({top:0,bottom:"initial"});ye(0)}),U);const je=[];U&&je.push(e.expanded);$&&je.push(e.error);I&&je.push(e.disabled);L&&je.push(L);A&&je.push(e.success);const Be=()=>{V((e=>!e));Y(false)};return t.createElement(l,null,t.createElement("select",{...u(_,/^data-/,false),tabIndex:-1,multiple:true,"aria-hidden":"true",ref:ue,name:w,onChange:Ie,className:i["sr-only"]},t.createElement("option",{value:""}),t.Children.map(S,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...u(_,/^data-/),id:T.current,ref:G,onKeyDown:he,className:`custom-select ${e.select} ${je.join(" ")} ${L!==null&&L!==void 0?L:""}`},t.createElement("div",{className:`${e["custom-select"]} ${je.join(" ")} `,style:{display:"flex"}},t.createElement("div",{className:e["display-container"],"data-display":true},t.createElement(b,{...k,onClick:Be,name:w,ref:fe,disabled:I,"aria-disabled":I,"aria-invalid":$,"aria-expanded":U,"aria-haspopup":"listbox","aria-labelledby":j,"aria-describedby":R}),(O===null||O===void 0?void 0:O.length)===0&&B&&t.createElement("span",{className:e["placeholder"]},B),(O===null||O===void 0?void 0:O.length)>0&&t.createElement(C,{disabled:I,display:q,onClick:Be,onRemove:pe}),ae&&oe()),t.createElement("div",{className:e["status"]},we||Se())),t.createElement("div",{ref:J,className:`list-wrapper ${e["list-wrapper"]}`,style:{display:U?"block":"none",opacity:be,maxHeight:Ce.wrapper,pointerEvents:U?"auto":"none",...ve}},t.createElement("ul",{id:g(T.current),className:ie,role:"listbox","aria-multiselectable":"true",style:{maxHeight:Ce.list}},xe()),de())))};const S=t.forwardRef(x);export{S as MultiSelect};
 //# sourceMappingURL=MultiSelect.esm.js.map

package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js.map

@@ -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    searchPlaceholder = \"Search item\",\n    searchInputProps,\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 },\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    searchInputProps,\n    searchPlaceholder,\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":["getOptionId","multiSelectId","optionIndex","getListboxId","MultiSelectComponent","id","children","name","disabled","labeledBy","placeholder","describedBy","searchPlaceholder","searchInputProps","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","containerReference","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","React","Children","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","onOptionChangeHandler","optionElement","getAttribute","options","lastSelectedOptionValues","option","selected","map","forEach","includes","dispatchEvent","Event","bubbles","onSelectedOptionRemoveHandler","find","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","values","child","displayArray","props","label","fixed","syncSelectedOption","vals","renderOptions","filterOutSelectedChildren","internalChildren","results","filteredChildren","toArray","toLowerCase","match","escapeRegExp","_internalRenderChildren","createElement","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSearching","selectOpened","hasFocus","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","onSelectButtonClick","Fragment","filterProps","tabIndex","multiple","readyclasses","onKeyDown","select","join","style","SelectButton","onClick","SelectedOptions","onRemove","maxHeight","wrapper","pointerEvents","role","list","MultiSelect","forwardRef"],"mappings":"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"}
+{"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":["getOptionId","multiSelectId","optionIndex","getListboxId","MultiSelectComponent","id","children","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","searchPlaceholder","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","containerReference","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","React","Children","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","onOptionChangeHandler","optionElement","getAttribute","options","lastSelectedOptionValues","option","selected","map","forEach","includes","dispatchEvent","Event","bubbles","onSelectedOptionRemoveHandler","find","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","values","child","displayArray","props","label","fixed","syncSelectedOption","vals","renderOptions","filterOutSelectedChildren","internalChildren","results","filteredChildren","toArray","toLowerCase","match","escapeRegExp","_internalRenderChildren","createElement","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSearching","selectOpened","hasFocus","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","onSelectButtonClick","Fragment","filterProps","tabIndex","multiple","readyclasses","onKeyDown","select","join","style","SelectButton","onClick","SelectedOptions","onRemove","maxHeight","wrapper","pointerEvents","role","list","MultiSelect","forwardRef"],"mappings":"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"}

package/dist/esm/Form/Select/MultiSelect/useSearch.esm.js

@@ -1,2 +1,2 @@
-import e,{useState as o,useRef as r,useEffect as t}from"react";const l=({selectId:l,search:n,optionsCount:a,searchPlaceholder:s,searchInputProps:d,searchInputClassName:i,expanded:c,setFocusedSelectItem:u,focusedSelectItem:v,describedBy:p,getOptionId:h,getListboxId:f})=>{var m,I;const[b,x]=o("");const C=0;const P=r(null);const y=(m=n===null||n===void 0?void 0:n.renderThreshold)!==null&&m!==void 0?m:C;const S=a>=y;const g=()=>{if(n===null||n===void 0?void 0:n.enabled)return S;if(n)return n.enabled;return a>C};const N=()=>{var o,r,t;return e.createElement("input",{...(r=(o=n===null||n===void 0?void 0:n.searchInputProps)!==null&&o!==void 0?o:d)!==null&&r!==void 0?r:{},ref:P,value:b,onChange:e=>x(e.currentTarget.value),className:[i,d===null||d===void 0?void 0:d.className].join(" "),style:{display:c?"block":"none"},type:"text",name:"search-option",placeholder:(t=n===null||n===void 0?void 0:n.searchPlaceholder)!==null&&t!==void 0?t:s,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-controls":f(l),"aria-describedby":p,"aria-autocomplete":"none","aria-expanded":c,"aria-activedescendant":h(l,v),"aria-haspopup":true})};const T=()=>{x("");u(0)};const k=g();t((()=>{var e;if(((e=n===null||n===void 0?void 0:n.searchInputProps)===null||e===void 0?void 0:e.reset)||(d===null||d===void 0?void 0:d.reset))T()}),[d===null||d===void 0?void 0:d.reset,(I=n===null||n===void 0?void 0:n.searchInputProps)===null||I===void 0?void 0:I.reset]);return{renderSearch:N,resetSearchState:T,searchVisible:k,searchThreshold:y,searchInputRef:P,filter:b}};export{l as useSearch};
+import e,{useState as o,useRef as r,useEffect as t}from"react";const n=({selectId:n,search:a,optionsCount:l,searchInputClassName:s,expanded:d,setFocusedSelectItem:c,focusedSelectItem:i,describedBy:u,getOptionId:v,getListboxId:p})=>{var h,f;const[m,I]=o("");const b=0;const x=r(null);const C=(h=a===null||a===void 0?void 0:a.renderThreshold)!==null&&h!==void 0?h:b;const y=l>=C;const P=()=>{if(a===null||a===void 0?void 0:a.enabled)return y;if(a)return a.enabled;return l>b};const S=()=>{var o,r;return e.createElement("input",{...(o=a===null||a===void 0?void 0:a.searchInputProps)!==null&&o!==void 0?o:{},ref:x,value:m,onChange:e=>I(e.currentTarget.value),className:[s,(r=a===null||a===void 0?void 0:a.searchInputProps)===null||r===void 0?void 0:r.className].join(" "),style:{display:d?"block":"none"},type:"text",name:"search-option",placeholder:a===null||a===void 0?void 0:a.searchPlaceholder,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-controls":p(n),"aria-describedby":u,"aria-autocomplete":"none","aria-expanded":d,"aria-activedescendant":v(n,i),"aria-haspopup":true})};const g=()=>{I("");c(0)};const N=P();t((()=>{var e;if((e=a===null||a===void 0?void 0:a.searchInputProps)===null||e===void 0?void 0:e.reset)g()}),[(f=a===null||a===void 0?void 0:a.searchInputProps)===null||f===void 0?void 0:f.reset]);return{renderSearch:S,resetSearchState:g,searchVisible:N,searchThreshold:C,searchInputRef:x,filter:m}};export{n as useSearch};
 //# sourceMappingURL=useSearch.esm.js.map