@onewelcome/react-lib-components 4.0.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Select.module.cjs.js"),t=require("react"),a=require("../Input/Input.cjs.js"),l=require("../../Icon/Icon.cjs.js"),s=require("../../src/hooks/useBodyClick.cjs.js"),r=require("../../src/readyclasses.module.cjs.js"),n=require("../../src/util/helper.cjs.js"),c=require("./SelectService.cjs.js"),u=require("../../src/hooks/useDetermineStatusIcon.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(t);const d=i.default.forwardRef((({children:o,name:d,disabled:p=!1,labeledBy:f,placeholder:h,describedBy:m,searchPlaceholder:v="Search item",searchInputProps:y,selectButtonProps:b,className:E,error:S=!1,success:C=!1,value:g,clearLabel:j="Clear selection",noResultsLabel:I="No results found",onChange:N,...x},w)=>{const[P,R]=t.useState(!1),[k,q]=t.useState(""),[A,L]=t.useState(""),B=t.useRef(null),$=t.useRef(null),[F,O]=t.useState(!1),[D,H]=t.useState(-1),[M,_]=t.useState(!1),[K,T]=t.useState(!1),[U]=t.useState(i.default.Children.count(o)),z=w||t.createRef(),G=t.useRef(null),J=e=>{z.current&&e&&(z.current.value=e.getAttribute("data-value"),z.current.dispatchEvent(new Event("change",{bubbles:!0}))),R(!1)},Q=t.useRef(null),{onArrowNavigation:V}=c.useArrowNavigation({expanded:P,setExpanded:R,isSearching:F,setIsSearching:O,setFocusedSelectItem:H,onOptionChangeHandler:J,childrenCount:U,setShouldClick:_,searchInputRef:G,renderSearchCondition:10}),{listPosition:W,opacity:X,optionsListMaxHeight:Y,setListPosition:Z,setOpacity:ee}=c.useSelectPositionList({expanded:P,optionListReference:$,containerReference:B}),te=P&&Array.isArray(o)&&o.length>10,ae=e=>{q(e.currentTarget.value)},le=u.useDetermineStatusIcon({success:C,error:S});t.useEffect((()=>{P&&(H(0),T(!0)),!P&&Q.current&&K&&(Q.current.focus(),T(!1))}),[P,Q.current,K]),t.useEffect((()=>{var e;e=g,i.default.Children.forEach(o,(t=>{t.props.value===e&&L(t.props.children)}))}),[g]),s.useBodyClick((e=>!e.target.closest(".custom-select")&&P),(()=>{R(!1),Z({top:0,bottom:"initial"}),ee(0)}),P);const se=[];return P&&se.push(e.default.expanded),S&&se.push(e.default.error),p&&se.push(e.default.disabled),E&&se.push(E),C&&se.push(e.default.success),i.default.createElement(t.Fragment,null,i.default.createElement("select",{...n.filterProps(x,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:z,name:d,onChange:e=>{null==N||N(e)},className:r.default["sr-only"]},i.default.createElement("option",{value:""}),i.default.Children.map(o,(e=>i.default.createElement("option",{value:e.props.value})))),i.default.createElement("div",{...n.filterProps(x,/^data-/),ref:B,onKeyDown:V,className:`custom-select ${e.default.select} ${se.join(" ")} ${null!=E?E:""}`},Array.isArray(o)&&o.length>10&&i.default.createElement(a.Input,{...y,ref:G,onFocus:()=>O(!0),onBlur:()=>O(!1),onChange:ae,className:e.default["select-search"],wrapperProps:{className:null===(re=null==y?void 0:y.wrapperProps)||void 0===re?void 0:re.className},style:{display:P?"block":"none"},type:"text",name:"search-option",placeholder:v}),i.default.createElement("button",{...b,onClick:()=>{R(!P)},ref:Q,type:"button",name:d,className:`${e.default["custom-select"]} ${se.join(" ")} `,style:{display:te?"none":"initial"},disabled:p,"aria-disabled":p,"aria-invalid":S,"aria-expanded":P,"aria-haspopup":"listbox","aria-labelledby":f,"aria-describedby":m},i.default.createElement("div",{"data-display":!0,className:e.default.selected},!g&&h&&i.default.createElement("span",{className:e.default.placeholder},h),(null==g?void 0:g.length)>0&&i.default.createElement("span",{"data-display-inner":!0},A)),i.default.createElement("div",{className:e.default.status},le||(P?i.default.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronUp}):i.default.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronDown})))),i.default.createElement("div",{ref:$,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:P?"block":"none",opacity:X,maxHeight:Y,pointerEvents:P?"auto":"none",...W}},i.default.createElement("ul",{role:"listbox"},(()=>{if(F||""!==k){const a=i.default.Children.toArray(o).filter((e=>null!==e.props.children.toLowerCase().match(k.toLowerCase())));return 0===t(a).length?i.default.createElement("li",{className:e.default["no-results"]},I):t(a)}return t(o);function t(e){return i.default.Children.map(e,((e,t)=>i.default.cloneElement(e,{onFocusChange:e=>{H(e)},onOptionSelect:e=>{J(e.current),_(!1)},isSelected:e.props.value===g,isSearching:F,selectOpened:P,childIndex:t,hasFocus:D===t,shouldClick:M})))}})()))));var re}));exports.Select=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Select.module.cjs.js"),t=require("react"),a=require("../Input/Input.cjs.js"),l=require("../../Icon/Icon.cjs.js"),s=require("../../src/hooks/useBodyClick.cjs.js"),r=require("../../src/readyclasses.module.cjs.js"),n=require("../../src/util/helper.cjs.js"),u=require("./SelectService.cjs.js"),c=require("../../src/hooks/useDetermineStatusIcon.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(t);const d=i.default.forwardRef((({children:o,name:d,disabled:p=!1,labeledBy:f,placeholder:h,describedBy:m,searchPlaceholder:v="Search item",searchInputProps:y,selectButtonProps:b,className:E,error:S=!1,success:C=!1,value:g,clearLabel:j="Clear selection",noResultsLabel:I="No results found",onChange:N,...x},w)=>{const[P,R]=t.useState(!1),[k,q]=t.useState(""),[A,L]=t.useState(""),B=t.useRef(null),$=t.useRef(null),[F,O]=t.useState(!1),[D,H]=t.useState(-1),[M,_]=t.useState(!1),[K,T]=t.useState(!1),U=w||t.createRef(),z=t.useRef(null),G=e=>{U.current&&e&&(U.current.value=e.getAttribute("data-value"),U.current.dispatchEvent(new Event("change",{bubbles:!0}))),R(!1)},J=t.useRef(null),{onArrowNavigation:Q}=u.useArrowNavigation({expanded:P,setExpanded:R,isSearching:F,setIsSearching:O,setFocusedSelectItem:H,onOptionChangeHandler:G,childrenCount:i.default.Children.count(o),setShouldClick:_,searchInputRef:z,renderSearchCondition:10}),{listPosition:V,opacity:W,optionsListMaxHeight:X,setListPosition:Y,setOpacity:Z}=u.useSelectPositionList({expanded:P,optionListReference:$,containerReference:B}),ee=P&&Array.isArray(o)&&o.length>10,te=e=>{q(e.currentTarget.value)},ae=c.useDetermineStatusIcon({success:C,error:S});t.useEffect((()=>{P&&(H(0),T(!0)),!P&&J.current&&K&&(J.current.focus(),T(!1))}),[P,J.current,K]),t.useEffect((()=>{var e;e=g,i.default.Children.forEach(o,(t=>{t.props.value===e&&L(t.props.children)}))}),[g]),s.useBodyClick((e=>!e.target.closest(".custom-select")&&P),(()=>{R(!1),Y({top:0,bottom:"initial"}),Z(0)}),P);t.useEffect((()=>{(null==y?void 0:y.reset)&&(q(""),O(!1),H(-1))}),[null==y?void 0:y.reset]);const le=[];return P&&le.push(e.default.expanded),S&&le.push(e.default.error),p&&le.push(e.default.disabled),E&&le.push(E),C&&le.push(e.default.success),i.default.createElement(t.Fragment,null,i.default.createElement("select",{...n.filterProps(x,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:U,name:d,onChange:e=>{null==N||N(e)},className:r.default["sr-only"]},i.default.createElement("option",{value:""}),i.default.Children.map(o,(e=>i.default.createElement("option",{value:e.props.value})))),i.default.createElement("div",{...n.filterProps(x,/^data-/),ref:B,onKeyDown:Q,className:`custom-select ${e.default.select} ${le.join(" ")} ${null!=E?E:""}`},Array.isArray(o)&&o.length>10&&i.default.createElement(a.Input,{...y,ref:z,onFocus:()=>O(!0),onBlur:()=>O(!1),onChange:te,className:e.default["select-search"],wrapperProps:{className:null===(se=null==y?void 0:y.wrapperProps)||void 0===se?void 0:se.className},style:{display:P?"block":"none"},type:"text",name:"search-option",placeholder:v}),i.default.createElement("button",{...b,onClick:()=>{R(!P)},ref:J,type:"button",name:d,className:`${e.default["custom-select"]} ${le.join(" ")} `,style:{display:ee?"none":"initial"},disabled:p,"aria-disabled":p,"aria-invalid":S,"aria-expanded":P,"aria-haspopup":"listbox","aria-labelledby":f,"aria-describedby":m},i.default.createElement("div",{"data-display":!0,className:e.default.selected},!g&&h&&i.default.createElement("span",{className:e.default.placeholder},h),(null==g?void 0:g.length)>0&&i.default.createElement("span",{"data-display-inner":!0},A)),i.default.createElement("div",{className:e.default.status},ae||(P?i.default.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronUp}):i.default.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronDown})))),i.default.createElement("div",{ref:$,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:P?"block":"none",opacity:W,maxHeight:X,pointerEvents:P?"auto":"none",...V}},i.default.createElement("ul",{role:"listbox"},(()=>{if(F||""!==k){const a=i.default.Children.toArray(o).filter((e=>null!==e.props.children.toLowerCase().match(k.toLowerCase())));return 0===t(a).length?i.default.createElement("li",{className:e.default["no-results"]},I):t(a)}return t(o);function t(e){return i.default.Children.map(e,((e,t)=>i.default.cloneElement(e,{onFocusChange:e=>{H(e)},onOptionSelect:e=>{G(e.current),_(!1)},isSelected:e.props.value===g,isSearching:F,selectOpened:P,childIndex:t,hasFocus:D===t,shouldClick:M})))}})()))));var se}));exports.Select=d;
2
2
  //# sourceMappingURL=Select.cjs.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Pagination.module.cjs.js"),a=require("../src/readyclasses.module.cjs.js"),l=require("../Button/IconButton.cjs.js"),n=require("../Icon/Icon.cjs.js"),r=require("../Form/Select/Select.cjs.js"),u=require("../Form/Select/Option.cjs.js"),c=require("../Form/Label/Label.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s,o=i(e);!function(e){e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on."}(s||(s={}));const d=o.default.forwardRef((({totalElements:i,pageSize:d=10,translate:m=s,currentPage:f,className:g,onPageChange:p,onPageSizeChange:v,...E},b)=>{const I=()=>i?Math.ceil(i/d)<1?1:Math.ceil(i/d):1,N=e=>{p(e)};return o.default.createElement("div",{...E,ref:b,className:`${t.default["pagination-wrapper"]} ${null!=g?g:""}`},o.default.createElement("div",{className:t.default.left},d&&o.default.createElement("div",{className:t.default["per-page"]},o.default.createElement(c.Label,{id:"page-size-select-label"},m.itemsPerPage),o.default.createElement(r.Select,{labeledBy:"page-size-select-label",className:`${t.default["form-element"]} ${t.default["page-size-select"]}`,value:d.toString(),onChange:e=>{const t=Number(e.target.value);v(t)}},o.default.createElement(u.Option,{value:"10"},"10"),o.default.createElement(u.Option,{value:"25"},"25"),o.default.createElement(u.Option,{value:"50"},"50"))),i&&o.default.createElement("div",{className:t.default.total},o.default.createElement("span",{tabIndex:0},i," ",m.totalItems))),o.default.createElement("div",{className:t.default.pagination},o.default.createElement(e.Fragment,null,i&&!!I()&&o.default.createElement("div",{className:t.default.page},o.default.createElement(c.Label,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${a.default["sr-only"]} ${t.default["current-value-select-label"]}`},m.currentPageLabel),o.default.createElement(r.Select,{"aria-labelledby":"current-value-input-label",key:"input",id:"current-value-input",size:null==f?void 0:f.toString().length,onChange:e=>N(Number(e.target.value)),name:"current-value-input",value:f.toString(),className:`${t.default["form-element"]} ${t.default["current-page-select"]}`},Array.from(Array(I()).keys()).map((e=>o.default.createElement(u.Option,{key:e,value:(e+1).toString()},(e+1).toString())))),o.default.createElement("span",{className:t.default["page-total"]},m.currentPage.replace("%1",Math.ceil(i/d).toString()))),!!f&&o.default.createElement("div",{className:t.default.previous},o.default.createElement(l.IconButton,{disabled:f<=2,title:"first",onClick:()=>N(0),"data-paginate":"first"},o.default.createElement(n.Icon,{icon:n.Icons.NavigationFirst})),o.default.createElement(l.IconButton,{disabled:f<=1,title:"previous",onClick:()=>N(f-1),"data-paginate":"previous"},o.default.createElement(n.Icon,{icon:n.Icons.ChevronLeft}))),o.default.createElement("div",{className:t.default.next},!(void 0===f&&(void 0===f||i))&&o.default.createElement(l.IconButton,{disabled:f>=I(),title:"next",onClick:()=>N(f+1),"data-paginate":"next"},o.default.createElement(n.Icon,{icon:n.Icons.ChevronRight})),!(!f||!i)&&o.default.createElement(l.IconButton,{disabled:f>=I()-1,title:"last",onClick:()=>N(Math.ceil(i/d)),"data-paginate":"last"},o.default.createElement(n.Icon,{icon:n.Icons.NavigationLast}))))))}));exports.Pagination=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Pagination.module.cjs.js"),a=require("../src/readyclasses.module.cjs.js"),l=require("../Button/IconButton.cjs.js"),n=require("../Icon/Icon.cjs.js"),r=require("../Form/Select/Select.cjs.js"),u=require("../Form/Select/Option.cjs.js"),c=require("../Form/Label/Label.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i,o=s(e);!function(e){e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on."}(i||(i={}));const d=o.default.forwardRef((({totalElements:s,pageSize:d=10,translate:m=i,currentPage:f,className:p,onPageChange:g,onPageSizeChange:v,...E},b)=>{const I=s?Math.ceil(s/d)<1?1:Math.ceil(s/d):1,[N,P]=e.useState(!1),h=e=>{g(e)};return e.useEffect((()=>{N&&P(!1)}),[N]),o.default.createElement("div",{...E,ref:b,className:`${t.default["pagination-wrapper"]} ${null!=p?p:""}`},o.default.createElement("div",{className:t.default.left},d&&o.default.createElement("div",{className:t.default["per-page"]},o.default.createElement(c.Label,{id:"page-size-select-label"},m.itemsPerPage),o.default.createElement(r.Select,{labeledBy:"page-size-select-label",className:`${t.default["form-element"]} ${t.default["page-size-select"]}`,value:d.toString(),onChange:e=>{const t=Number(e.target.value);P(!0),v(t)}},o.default.createElement(u.Option,{value:"10"},"10"),o.default.createElement(u.Option,{value:"25"},"25"),o.default.createElement(u.Option,{value:"50"},"50"))),s&&o.default.createElement("div",{className:t.default.total},o.default.createElement("span",{tabIndex:0},s," ",m.totalItems))),o.default.createElement("div",{className:t.default.pagination},o.default.createElement(e.Fragment,null,s&&!!I&&o.default.createElement("div",{className:t.default.page},o.default.createElement(c.Label,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${a.default["sr-only"]} ${t.default["current-value-select-label"]}`},m.currentPageLabel),o.default.createElement(r.Select,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:f.toString().length,onChange:e=>h(Number(e.target.value)),name:"current-value-input",value:f.toString(),className:`${t.default["form-element"]} ${t.default["current-page-select"]}`,searchInputProps:{wrapperProps:{className:t.default["search-input-wrapper"]},reset:N,autoComplete:"off"}},Array.from(Array(I).keys()).map((e=>o.default.createElement(u.Option,{key:e,value:(e+1).toString()},(e+1).toString())))),o.default.createElement("span",{className:t.default["page-total"]},m.currentPage.replace("%1",Math.ceil(s/d).toString()))),!!f&&o.default.createElement("div",{className:t.default.previous},o.default.createElement(l.IconButton,{disabled:f<=1,title:"first",onClick:()=>h(1),"data-paginate":"first"},o.default.createElement(n.Icon,{icon:n.Icons.NavigationFirst})),o.default.createElement(l.IconButton,{disabled:f<=1,title:"previous",onClick:()=>h(f-1),"data-paginate":"previous"},o.default.createElement(n.Icon,{icon:n.Icons.ChevronLeft}))),o.default.createElement("div",{className:t.default.next},!(void 0===f&&(void 0===f||s))&&o.default.createElement(l.IconButton,{disabled:f>=I,title:"next",onClick:()=>h(f+1),"data-paginate":"next"},o.default.createElement(n.Icon,{icon:n.Icons.ChevronRight})),!(!f||!s)&&o.default.createElement(l.IconButton,{disabled:f>=I,title:"last",onClick:()=>h(Math.ceil(s/d)),"data-paginate":"last"},o.default.createElement(n.Icon,{icon:n.Icons.NavigationLast}))))))}));exports.Pagination=d;
2
2
  //# sourceMappingURL=Pagination.cjs.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=".Pagination_module_paginationWrapper__52695df9{color:var(--greyed-out);display:flex;flex-direction:column;font-family:var(--font-family);font-size:var(--font-size);justify-content:space-between;line-height:var(--default-line-height)}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_left__52695df9{display:flex}.Pagination_module_paginationWrapper__52695df9 label{margin-bottom:0}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_formElement__52695df9{height:2.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_formElement__52695df9 button{min-height:2.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9{align-items:center;display:flex;flex:1 0 auto;justify-content:center}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9 span{color:var(--color-blue-grey500)}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9{align-items:center;display:flex;flex:1 0 auto;justify-content:center;margin-top:1rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_next__52695df9,.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_previous__52695df9{align-items:center;display:flex}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_next__52695df9 button span:before,.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_previous__52695df9 button span:before{font-size:.75rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9{align-items:center;display:none}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9 label{color:var(--color-blue-grey900);font-weight:500}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9+.Pagination_module_total__52695df9{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_page__52695df9{align-items:center;display:flex;flex-basis:min-content;padding-right:1rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageTotal__52695df9{color:var(--color-blue-grey900);display:inline-block;font-weight:500;margin-left:.5rem;white-space:nowrap}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_page__52695df9+.Pagination_module_previous__52695df9{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9{margin:0 .25rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button{min-width:3.75rem;padding:0}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button div[data-display]{left:.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button div:not([data-display]){right:.5rem}.Pagination_module_currentPageSelect__52695df9 button{min-width:3.75rem;padding:0}.Pagination_module_currentPageSelect__52695df9 button div[data-display]{left:.5rem}.Pagination_module_currentPageSelect__52695df9 button div:not([data-display]){right:.5rem}@media screen and (min-width:30em){.Pagination_module_paginationWrapper__52695df9{flex-direction:row}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9{justify-content:flex-start}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9{justify-content:flex-end;margin-top:0}}@media screen and (min-width:48em){.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9{display:flex;margin-right:1rem}}";require("../node_modules/rollup-plugin-styles/dist/runtime/inject-css.cjs.js").default(a,{}),exports.css=a,exports.default={"pagination-wrapper":"Pagination_module_paginationWrapper__52695df9",left:"Pagination_module_left__52695df9","form-element":"Pagination_module_formElement__52695df9",total:"Pagination_module_total__52695df9",pagination:"Pagination_module_pagination__52695df9",previous:"Pagination_module_previous__52695df9",next:"Pagination_module_next__52695df9","per-page":"Pagination_module_perPage__52695df9",page:"Pagination_module_page__52695df9","page-total":"Pagination_module_pageTotal__52695df9","page-size-select":"Pagination_module_pageSizeSelect__52695df9","current-page-select":"Pagination_module_currentPageSelect__52695df9"};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=".Pagination_module_paginationWrapper__97e9bc7b{color:var(--greyed-out);display:flex;flex-direction:column;font-family:var(--font-family);font-size:var(--font-size);justify-content:space-between;line-height:var(--default-line-height)}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_left__97e9bc7b{display:flex}.Pagination_module_paginationWrapper__97e9bc7b label{margin-bottom:0}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b{height:2.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b .Pagination_module_searchInputWrapper__97e9bc7b{width:2.75rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b button{min-height:2.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b{align-items:center;display:flex;flex:1 0 auto;justify-content:center}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b span{color:var(--color-blue-grey500)}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b{align-items:center;display:flex;flex:1 0 auto;justify-content:center;margin-top:1rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_next__97e9bc7b,.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_previous__97e9bc7b{align-items:center;display:flex}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_next__97e9bc7b button span:before,.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_previous__97e9bc7b button span:before{font-size:.75rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b{align-items:center;display:none}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b label{color:var(--color-blue-grey900);font-weight:500}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b+.Pagination_module_total__97e9bc7b{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_page__97e9bc7b{align-items:center;display:flex;flex-basis:min-content;padding-right:1rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageTotal__97e9bc7b{color:var(--color-blue-grey900);display:inline-block;font-weight:500;margin-left:.5rem;white-space:nowrap}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_page__97e9bc7b+.Pagination_module_previous__97e9bc7b{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b{margin:0 .25rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button{min-width:3.75rem;padding:0}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button div[data-display]{left:.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button div:not([data-display]){right:.5rem}.Pagination_module_currentPageSelect__97e9bc7b button{min-width:3.75rem;padding:0}.Pagination_module_currentPageSelect__97e9bc7b button div[data-display]{left:.5rem}.Pagination_module_currentPageSelect__97e9bc7b button div:not([data-display]){right:.5rem}@media screen and (min-width:30em){.Pagination_module_paginationWrapper__97e9bc7b{flex-direction:row}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b{justify-content:flex-start}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b{justify-content:flex-end;margin-top:0}}@media screen and (min-width:48em){.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b{display:flex;margin-right:1rem}}";require("../node_modules/rollup-plugin-styles/dist/runtime/inject-css.cjs.js").default(e,{}),exports.css=e,exports.default={"pagination-wrapper":"Pagination_module_paginationWrapper__97e9bc7b",left:"Pagination_module_left__97e9bc7b","form-element":"Pagination_module_formElement__97e9bc7b","search-input-wrapper":"Pagination_module_searchInputWrapper__97e9bc7b",total:"Pagination_module_total__97e9bc7b",pagination:"Pagination_module_pagination__97e9bc7b",previous:"Pagination_module_previous__97e9bc7b",next:"Pagination_module_next__97e9bc7b","per-page":"Pagination_module_perPage__97e9bc7b",page:"Pagination_module_page__97e9bc7b","page-total":"Pagination_module_pageTotal__97e9bc7b","page-size-select":"Pagination_module_pageSizeSelect__97e9bc7b","current-page-select":"Pagination_module_currentPageSelect__97e9bc7b"};
2
2
  //# sourceMappingURL=Pagination.module.cjs.js.map
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../Icon/Icon.cjs.js"),r=require("./Tag.module.cjs.js"),t=require("../Typography/Typography.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);const n=e.forwardRef((({children:e,variant:o,icon:n,backgroundColor:c,color:i,...d},s)=>{var u;return l.default.createElement("div",{ref:s,className:`${"enabled"===o?r.default["tag-enabled"]:"disabled"===o?r.default["tag-disabled"]:void 0} ${r.default.tag} ${null!==(u=d.className)&&void 0!==u?u:""}`,style:{backgroundColor:c,color:i},...d},n?l.default.createElement(a.Icon,{size:"inherit",icon:n}):"enabled"===o?l.default.createElement(a.Icon,{size:"inherit",icon:a.Icons.CheckmarkCircleAlt}):"disabled"===o?l.default.createElement(a.Icon,{size:"inherit",icon:a.Icons.Forbidden}):void 0,l.default.createElement(t.Typography,{spacing:{marginBottom:0},variant:"body",className:r.default.label},e))}));exports.Tag=n;
2
+ //# sourceMappingURL=Tag.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=".Tag_module_tag__18af6da0{align-items:center;border-radius:3.125rem;display:inline-flex;font-size:.75rem;gap:.25rem;padding:.375rem .7rem}.Tag_module_tag__18af6da0.Tag_module_tagEnabled__18af6da0{background-color:var(--color-green100)}.Tag_module_tag__18af6da0.Tag_module_tagDisabled__18af6da0{background-color:var(--color-blue-grey100)}.Tag_module_tag__18af6da0 .Tag_module_label__18af6da0{color:inherit;font-size:inherit;line-height:.75rem}";require("../node_modules/rollup-plugin-styles/dist/runtime/inject-css.cjs.js").default(a,{}),exports.css=a,exports.default={tag:"Tag_module_tag__18af6da0","tag-enabled":"Tag_module_tagEnabled__18af6da0","tag-disabled":"Tag_module_tagDisabled__18af6da0",label:"Tag_module_label__18af6da0"};
2
+ //# sourceMappingURL=Tag.module.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.module.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -9,7 +9,9 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
9
9
  describedBy?: string;
10
10
  placeholder?: string;
11
11
  searchPlaceholder?: string;
12
- searchInputProps?: PartialInputProps;
12
+ searchInputProps?: PartialInputProps & {
13
+ reset?: boolean;
14
+ };
13
15
  selectButtonProps?: ComponentPropsWithRef<"button">;
14
16
  className?: string;
15
17
  value: string;
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),s=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),t=require("../ContextMenu/ContextMenuItem.cjs.js"),a=require("../Link/Link.cjs.js"),i=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),n=require("../Tabs/Tab.cjs.js"),c=require("../Tabs/Tabs.cjs.js"),j=require("../TextEllipsis/TextEllipsis.cjs.js"),u=require("../Tiles/Tile.cjs.js"),l=require("../Tiles/Tiles.cjs.js"),d=require("../Tooltip/Tooltip.cjs.js"),x=require("../Typography/Typography.cjs.js"),q=require("../ProgressBar/ProgressBar.cjs.js"),B=require("../Skeleton/Skeleton.cjs.js"),b=require("../StatusIndicator/StatusIndicator.cjs.js"),T=require("../Pagination/Pagination.cjs.js"),W=require("./hooks/useRepeater.cjs.js"),S=require("./hooks/useDebouncedCallback.cjs.js"),m=require("./util/helper.cjs.js"),C=require("../Notifications/BaseModal/BaseModal.cjs.js"),F=require("../Notifications/Snackbar/useSnackbar.cjs.js"),M=require("../Notifications/Dialog/Dialog.cjs.js"),g=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),k=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),I=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),D=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),h=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),f=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),z=require("../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.cjs.js"),G=require("../Form/Checkbox/Checkbox.cjs.js"),N=require("../Form/Fieldset/Fieldset.cjs.js"),P=require("../Form/Form.cjs.js"),y=require("../Form/FormControl/FormControl.cjs.js"),R=require("../Form/FormGroup/FormGroup.cjs.js"),v=require("../Form/FormHelperText/FormHelperText.cjs.js"),A=require("../Form/Input/Input.cjs.js"),H=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),L=require("../Form/Label/Label.cjs.js"),O=require("../Form/Select/Option.cjs.js"),E=require("../Form/Radio/Radio.cjs.js"),_=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),w=require("../Form/Select/Select.cjs.js"),J=require("../Form/Textarea/Textarea.cjs.js"),K=require("../Form/Toggle/Toggle.cjs.js"),Q=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),U=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),V=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),X=require("../Wizard/Wizard.cjs.js"),Y=require("../Wizard/WizardActions/WizardActions.cjs.js"),Z=require("../Wizard/WizardSteps/WizardSteps.cjs.js"),$=require("../Wizard/BaseWizardSteps/BaseWizardSteps.cjs.js"),ee=require("../DataGrid/DataGrid.cjs.js"),re=require("../DataGrid/DataGridBody/DataGridRow.cjs.js"),se=require("../DataGrid/DataGridBody/DataGridCell.cjs.js"),oe=require("../Notifications/Banner/Banner.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=s.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=t.ContextMenuItem,exports.Link=a.Link,exports.Icon=i.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return i.Icons}}),exports.IconButton=p.IconButton,exports.Tab=n.Tab,exports.Tabs=c.Tabs,exports.TextEllipsis=j.TextEllipsis,exports.Tile=u.Tile,exports.Tiles=l.Tiles,exports.Tooltip=d.Tooltip,exports.Typography=x.Typography,exports.ProgressBar=q.ProgressBar,exports.Skeleton=B.Skeleton,exports.StatusIndicator=b.StatusIndicator,exports.Pagination=T.Pagination,exports.useRepeater=W.useRepeater,exports.useDebouncedCallback=S.useDebouncedCallback,exports.debounce=m.debounce,exports.generateID=m.generateID,exports.throttle=m.throttle,exports.Modal=C.BaseModal,exports.useSnackbar=F.useSnackbar,exports.Dialog=M.Dialog,exports.DiscardChangesModal=g.DiscardChangesModal,exports.ModalActions=k.BaseModalActions,exports.ModalContent=I.BaseModalContent,exports.ModalHeader=D.BaseModalHeader,exports.NotificationProvider=h.NotificationProvider,exports.useNotificationContext=h.useNotificationContext,exports.SlideInModal=f.SlideInModal,exports.SnackbarProvider=z.SnackbarProvider,exports.Checkbox=G.Checkbox,exports.Fieldset=N.Fieldset,exports.Form=P.Form,exports.FormControl=y.FormControl,exports.FormGroup=R.FormGroup,exports.FormHelperText=v.FormHelperText,exports.Input=A.Input,exports.InputWrapper=H.InputWrapper,exports.Label=L.Label,exports.Option=O.Option,exports.Radio=E.Radio,exports.RadioWrapper=_.RadioWrapper,exports.Select=w.Select,exports.Textarea=J.Textarea,exports.Toggle=K.Toggle,exports.CheckboxWrapper=Q.CheckboxWrapper,exports.TextareaWrapper=U.TextareaWrapper,exports.SelectWrapper=V.SelectWrapper,exports.Wizard=X.Wizard,exports.WizardActions=Y.WizardActions,exports.WizardSteps=Z.WizardSteps,exports.BaseWizardSteps=$.BaseWizardSteps,exports.DataGrid=ee.DataGrid,exports.DataGridRow=re.DataGridRow,exports.DataGridCell=se.DataGridCell,exports.Banner=oe.Banner;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_BaseStyling_/BaseStyling.cjs.js"),r=require("../Button/Button.cjs.js"),s=require("../Breadcrumbs/Breadcrumbs.cjs.js"),o=require("../ContextMenu/ContextMenu.cjs.js"),t=require("../ContextMenu/ContextMenuItem.cjs.js"),a=require("../Link/Link.cjs.js"),i=require("../Icon/Icon.cjs.js"),p=require("../Button/IconButton.cjs.js"),n=require("../Tabs/Tab.cjs.js"),c=require("../Tabs/Tabs.cjs.js"),j=require("../Tag/Tag.cjs.js"),u=require("../TextEllipsis/TextEllipsis.cjs.js"),l=require("../Tiles/Tile.cjs.js"),d=require("../Tiles/Tiles.cjs.js"),x=require("../Tooltip/Tooltip.cjs.js"),q=require("../Typography/Typography.cjs.js"),T=require("../ProgressBar/ProgressBar.cjs.js"),B=require("../Skeleton/Skeleton.cjs.js"),b=require("../StatusIndicator/StatusIndicator.cjs.js"),W=require("../Pagination/Pagination.cjs.js"),S=require("./hooks/useRepeater.cjs.js"),m=require("./hooks/useDebouncedCallback.cjs.js"),g=require("./util/helper.cjs.js"),C=require("../Notifications/BaseModal/BaseModal.cjs.js"),F=require("../Notifications/Snackbar/useSnackbar.cjs.js"),M=require("../Notifications/Dialog/Dialog.cjs.js"),k=require("../Notifications/DiscardChangesModal/DiscardChangesModal.cjs.js"),I=require("../Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js"),D=require("../Notifications/BaseModal/BaseModalContent/BaseModalContent.cjs.js"),h=require("../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.cjs.js"),f=require("../Notifications/NotificationProvider/NotificationContext.cjs.js"),z=require("../Notifications/SlideInModal/SlideInModal.cjs.js"),G=require("../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.cjs.js"),N=require("../Form/Checkbox/Checkbox.cjs.js"),P=require("../Form/Fieldset/Fieldset.cjs.js"),y=require("../Form/Form.cjs.js"),R=require("../Form/FormControl/FormControl.cjs.js"),v=require("../Form/FormGroup/FormGroup.cjs.js"),A=require("../Form/FormHelperText/FormHelperText.cjs.js"),H=require("../Form/Input/Input.cjs.js"),L=require("../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),O=require("../Form/Label/Label.cjs.js"),E=require("../Form/Select/Option.cjs.js"),_=require("../Form/Radio/Radio.cjs.js"),w=require("../Form/Wrapper/RadioWrapper/RadioWrapper.cjs.js"),J=require("../Form/Select/Select.cjs.js"),K=require("../Form/Textarea/Textarea.cjs.js"),Q=require("../Form/Toggle/Toggle.cjs.js"),U=require("../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.cjs.js"),V=require("../Form/Wrapper/TextareaWrapper/TextareaWrapper.cjs.js"),X=require("../Form/Wrapper/SelectWrapper/SelectWrapper.cjs.js"),Y=require("../Wizard/Wizard.cjs.js"),Z=require("../Wizard/WizardActions/WizardActions.cjs.js"),$=require("../Wizard/WizardSteps/WizardSteps.cjs.js"),ee=require("../Wizard/BaseWizardSteps/BaseWizardSteps.cjs.js"),re=require("../DataGrid/DataGrid.cjs.js"),se=require("../DataGrid/DataGridBody/DataGridRow.cjs.js"),oe=require("../DataGrid/DataGridBody/DataGridCell.cjs.js"),te=require("../Notifications/Banner/Banner.cjs.js");exports.BaseStyling=e.BaseStyling,exports.Button=r.Button,exports.Breadcrumbs=s.Breadcrumbs,exports.ContextMenu=o.ContextMenu,exports.ContextMenuItem=t.ContextMenuItem,exports.Link=a.Link,exports.Icon=i.Icon,Object.defineProperty(exports,"Icons",{enumerable:!0,get:function(){return i.Icons}}),exports.IconButton=p.IconButton,exports.Tab=n.Tab,exports.Tabs=c.Tabs,exports.Tag=j.Tag,exports.TextEllipsis=u.TextEllipsis,exports.Tile=l.Tile,exports.Tiles=d.Tiles,exports.Tooltip=x.Tooltip,exports.Typography=q.Typography,exports.ProgressBar=T.ProgressBar,exports.Skeleton=B.Skeleton,exports.StatusIndicator=b.StatusIndicator,exports.Pagination=W.Pagination,exports.useRepeater=S.useRepeater,exports.useDebouncedCallback=m.useDebouncedCallback,exports.debounce=g.debounce,exports.generateID=g.generateID,exports.throttle=g.throttle,exports.Modal=C.BaseModal,exports.useSnackbar=F.useSnackbar,exports.Dialog=M.Dialog,exports.DiscardChangesModal=k.DiscardChangesModal,exports.ModalActions=I.BaseModalActions,exports.ModalContent=D.BaseModalContent,exports.ModalHeader=h.BaseModalHeader,exports.NotificationProvider=f.NotificationProvider,exports.useNotificationContext=f.useNotificationContext,exports.SlideInModal=z.SlideInModal,exports.SnackbarProvider=G.SnackbarProvider,exports.Checkbox=N.Checkbox,exports.Fieldset=P.Fieldset,exports.Form=y.Form,exports.FormControl=R.FormControl,exports.FormGroup=v.FormGroup,exports.FormHelperText=A.FormHelperText,exports.Input=H.Input,exports.InputWrapper=L.InputWrapper,exports.Label=O.Label,exports.Option=E.Option,exports.Radio=_.Radio,exports.RadioWrapper=w.RadioWrapper,exports.Select=J.Select,exports.Textarea=K.Textarea,exports.Toggle=Q.Toggle,exports.CheckboxWrapper=U.CheckboxWrapper,exports.TextareaWrapper=V.TextareaWrapper,exports.SelectWrapper=X.SelectWrapper,exports.Wizard=Y.Wizard,exports.WizardActions=Z.WizardActions,exports.WizardSteps=$.WizardSteps,exports.BaseWizardSteps=ee.BaseWizardSteps,exports.DataGrid=re.DataGrid,exports.DataGridRow=se.DataGridRow,exports.DataGridCell=oe.DataGridCell,exports.Banner=te.Banner;
2
2
  //# sourceMappingURL=index.cjs.js.map
@@ -17,6 +17,8 @@ export { Tab } from "./components/Tabs/Tab";
17
17
  export type { Props as TabProps } from "./components/Tabs/Tab";
18
18
  export { Tabs } from "./components/Tabs/Tabs";
19
19
  export type { Props as TabsProps } from "./components/Tabs/Tabs";
20
+ export { Tag } from "./components/Tag/Tag";
21
+ export type { Props as TagProps } from "./components/Tag/Tag";
20
22
  export { TextEllipsis } from "./components/TextEllipsis/TextEllipsis";
21
23
  export type { Props as TextEllipsisProps } from "./components/TextEllipsis/TextEllipsis";
22
24
  export { Tile } from "./components/Tiles/Tile";
@@ -1,2 +1,2 @@
1
- import e from"./Select.module.esm.js";import t,{useState as r,useRef as a,createRef as s,useEffect as n,Fragment as l}from"react";import{Input as o}from"../Input/Input.esm.js";import{Icon as c,Icons as i}from"../../Icon/Icon.esm.js";import{useBodyClick as p}from"../../src/hooks/useBodyClick.esm.js";import u from"../../src/readyclasses.module.esm.js";import{filterProps as d}from"../../src/util/helper.esm.js";import{useSelectPositionList as m,useArrowNavigation as h}from"./SelectService.esm.js";import{useDetermineStatusIcon as v}from"../../src/hooks/useDetermineStatusIcon.esm.js";const y=t.forwardRef((({children:y,name:f,disabled:b=!1,labeledBy:E,placeholder:C,describedBy:g,searchPlaceholder:N="Search item",searchInputProps:x,selectButtonProps:S,className:w,error:I=!1,success:j=!1,value:k,clearLabel:A="Clear selection",noResultsLabel:L="No results found",onChange:P,...$},B)=>{const[R,F]=r(!1),[O,D]=r(""),[H,K]=r(""),M=a(null),T=a(null),[U,q]=r(!1),[z,G]=r(-1),[J,Q]=r(!1),[V,W]=r(!1),[X]=r(t.Children.count(y)),Y=B||s(),Z=a(null),_=e=>{Y.current&&e&&(Y.current.value=e.getAttribute("data-value"),Y.current.dispatchEvent(new Event("change",{bubbles:!0}))),F(!1)},ee=a(null),{onArrowNavigation:te}=h({expanded:R,setExpanded:F,isSearching:U,setIsSearching:q,setFocusedSelectItem:G,onOptionChangeHandler:_,childrenCount:X,setShouldClick:Q,searchInputRef:Z,renderSearchCondition:10}),{listPosition:re,opacity:ae,optionsListMaxHeight:se,setListPosition:ne,setOpacity:le}=m({expanded:R,optionListReference:T,containerReference:M}),oe=R&&Array.isArray(y)&&y.length>10,ce=e=>{D(e.currentTarget.value)},ie=v({success:j,error:I});n((()=>{R&&(G(0),W(!0)),!R&&ee.current&&V&&(ee.current.focus(),W(!1))}),[R,ee.current,V]),n((()=>{var e;e=k,t.Children.forEach(y,(t=>{t.props.value===e&&K(t.props.children)}))}),[k]),p((e=>!e.target.closest(".custom-select")&&R),(()=>{F(!1),ne({top:0,bottom:"initial"}),le(0)}),R);const pe=[];return R&&pe.push(e.expanded),I&&pe.push(e.error),b&&pe.push(e.disabled),w&&pe.push(w),j&&pe.push(e.success),t.createElement(l,null,t.createElement("select",{...d($,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:Y,name:f,onChange:e=>{null==P||P(e)},className:u["sr-only"]},t.createElement("option",{value:""}),t.Children.map(y,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...d($,/^data-/),ref:M,onKeyDown:te,className:`custom-select ${e.select} ${pe.join(" ")} ${null!=w?w:""}`},Array.isArray(y)&&y.length>10&&t.createElement(o,{...x,ref:Z,onFocus:()=>q(!0),onBlur:()=>q(!1),onChange:ce,className:e["select-search"],wrapperProps:{className:null===(ue=null==x?void 0:x.wrapperProps)||void 0===ue?void 0:ue.className},style:{display:R?"block":"none"},type:"text",name:"search-option",placeholder:N}),t.createElement("button",{...S,onClick:()=>{F(!R)},ref:ee,type:"button",name:f,className:`${e["custom-select"]} ${pe.join(" ")} `,style:{display:oe?"none":"initial"},disabled:b,"aria-disabled":b,"aria-invalid":I,"aria-expanded":R,"aria-haspopup":"listbox","aria-labelledby":E,"aria-describedby":g},t.createElement("div",{"data-display":!0,className:e.selected},!k&&C&&t.createElement("span",{className:e.placeholder},C),(null==k?void 0:k.length)>0&&t.createElement("span",{"data-display-inner":!0},H)),t.createElement("div",{className:e.status},ie||(R?t.createElement(c,{className:e["chevron-icon"],icon:i.ChevronUp}):t.createElement(c,{className:e["chevron-icon"],icon:i.ChevronDown})))),t.createElement("div",{ref:T,className:`list-wrapper ${e["list-wrapper"]}`,style:{display:R?"block":"none",opacity:ae,maxHeight:se,pointerEvents:R?"auto":"none",...re}},t.createElement("ul",{role:"listbox"},(()=>{if(U||""!==O){const a=t.Children.toArray(y).filter((e=>null!==e.props.children.toLowerCase().match(O.toLowerCase())));return 0===r(a).length?t.createElement("li",{className:e["no-results"]},L):r(a)}return r(y);function r(e){return t.Children.map(e,((e,r)=>t.cloneElement(e,{onFocusChange:e=>{G(e)},onOptionSelect:e=>{_(e.current),Q(!1)},isSelected:e.props.value===k,isSearching:U,selectOpened:R,childIndex:r,hasFocus:z===r,shouldClick:J})))}})()))));var ue}));export{y as Select};
1
+ import e from"./Select.module.esm.js";import t,{useState as r,useRef as s,createRef as a,useEffect as n,Fragment as l}from"react";import{Input as o}from"../Input/Input.esm.js";import{Icon as c,Icons as i}from"../../Icon/Icon.esm.js";import{useBodyClick as u}from"../../src/hooks/useBodyClick.esm.js";import d from"../../src/readyclasses.module.esm.js";import{filterProps as p}from"../../src/util/helper.esm.js";import{useArrowNavigation as m,useSelectPositionList as h}from"./SelectService.esm.js";import{useDetermineStatusIcon as v}from"../../src/hooks/useDetermineStatusIcon.esm.js";const y=t.forwardRef((({children:y,name:f,disabled:b=!1,labeledBy:E,placeholder:C,describedBy:g,searchPlaceholder:N="Search item",searchInputProps:x,selectButtonProps:S,className:w,error:I=!1,success:j=!1,value:k,clearLabel:A="Clear selection",noResultsLabel:L="No results found",onChange:P,...$},B)=>{const[R,F]=r(!1),[O,D]=r(""),[H,K]=r(""),M=s(null),T=s(null),[U,q]=r(!1),[z,G]=r(-1),[J,Q]=r(!1),[V,W]=r(!1),X=B||a(),Y=s(null),Z=e=>{X.current&&e&&(X.current.value=e.getAttribute("data-value"),X.current.dispatchEvent(new Event("change",{bubbles:!0}))),F(!1)},_=s(null),{onArrowNavigation:ee}=m({expanded:R,setExpanded:F,isSearching:U,setIsSearching:q,setFocusedSelectItem:G,onOptionChangeHandler:Z,childrenCount:t.Children.count(y),setShouldClick:Q,searchInputRef:Y,renderSearchCondition:10}),{listPosition:te,opacity:re,optionsListMaxHeight:se,setListPosition:ae,setOpacity:ne}=h({expanded:R,optionListReference:T,containerReference:M}),le=R&&Array.isArray(y)&&y.length>10,oe=e=>{D(e.currentTarget.value)},ce=v({success:j,error:I});n((()=>{R&&(G(0),W(!0)),!R&&_.current&&V&&(_.current.focus(),W(!1))}),[R,_.current,V]),n((()=>{var e;e=k,t.Children.forEach(y,(t=>{t.props.value===e&&K(t.props.children)}))}),[k]),u((e=>!e.target.closest(".custom-select")&&R),(()=>{F(!1),ae({top:0,bottom:"initial"}),ne(0)}),R);n((()=>{(null==x?void 0:x.reset)&&(D(""),q(!1),G(-1))}),[null==x?void 0:x.reset]);const ie=[];return R&&ie.push(e.expanded),I&&ie.push(e.error),b&&ie.push(e.disabled),w&&ie.push(w),j&&ie.push(e.success),t.createElement(l,null,t.createElement("select",{...p($,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:X,name:f,onChange:e=>{null==P||P(e)},className:d["sr-only"]},t.createElement("option",{value:""}),t.Children.map(y,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...p($,/^data-/),ref:M,onKeyDown:ee,className:`custom-select ${e.select} ${ie.join(" ")} ${null!=w?w:""}`},Array.isArray(y)&&y.length>10&&t.createElement(o,{...x,ref:Y,onFocus:()=>q(!0),onBlur:()=>q(!1),onChange:oe,className:e["select-search"],wrapperProps:{className:null===(ue=null==x?void 0:x.wrapperProps)||void 0===ue?void 0:ue.className},style:{display:R?"block":"none"},type:"text",name:"search-option",placeholder:N}),t.createElement("button",{...S,onClick:()=>{F(!R)},ref:_,type:"button",name:f,className:`${e["custom-select"]} ${ie.join(" ")} `,style:{display:le?"none":"initial"},disabled:b,"aria-disabled":b,"aria-invalid":I,"aria-expanded":R,"aria-haspopup":"listbox","aria-labelledby":E,"aria-describedby":g},t.createElement("div",{"data-display":!0,className:e.selected},!k&&C&&t.createElement("span",{className:e.placeholder},C),(null==k?void 0:k.length)>0&&t.createElement("span",{"data-display-inner":!0},H)),t.createElement("div",{className:e.status},ce||(R?t.createElement(c,{className:e["chevron-icon"],icon:i.ChevronUp}):t.createElement(c,{className:e["chevron-icon"],icon:i.ChevronDown})))),t.createElement("div",{ref:T,className:`list-wrapper ${e["list-wrapper"]}`,style:{display:R?"block":"none",opacity:re,maxHeight:se,pointerEvents:R?"auto":"none",...te}},t.createElement("ul",{role:"listbox"},(()=>{if(U||""!==O){const s=t.Children.toArray(y).filter((e=>null!==e.props.children.toLowerCase().match(O.toLowerCase())));return 0===r(s).length?t.createElement("li",{className:e["no-results"]},L):r(s)}return r(y);function r(e){return t.Children.map(e,((e,r)=>t.cloneElement(e,{onFocusChange:e=>{G(e)},onOptionSelect:e=>{Z(e.current),Q(!1)},isSelected:e.props.value===k,isSearching:U,selectOpened:R,childIndex:r,hasFocus:z===r,shouldClick:J})))}})()))));var ue}));export{y as Select};
2
2
  //# sourceMappingURL=Select.esm.js.map
@@ -1,2 +1,2 @@
1
- import e,{Fragment as t}from"react";import a from"./Pagination.module.esm.js";import l from"../src/readyclasses.module.esm.js";import{IconButton as r}from"../Button/IconButton.esm.js";import{Icon as n,Icons as i}from"../Icon/Icon.esm.js";import{Select as m}from"../Form/Select/Select.esm.js";import{Option as c}from"../Form/Select/Option.esm.js";import{Label as s}from"../Form/Label/Label.esm.js";var o;!function(e){e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on."}(o||(o={}));const u=e.forwardRef((({totalElements:u,pageSize:p=10,translate:g=o,currentPage:d,className:v,onPageChange:E,onPageSizeChange:b,...f},N)=>{const h=()=>u?Math.ceil(u/p)<1?1:Math.ceil(u/p):1,P=e=>{E(e)};return e.createElement("div",{...f,ref:N,className:`${a["pagination-wrapper"]} ${null!=v?v:""}`},e.createElement("div",{className:a.left},p&&e.createElement("div",{className:a["per-page"]},e.createElement(s,{id:"page-size-select-label"},g.itemsPerPage),e.createElement(m,{labeledBy:"page-size-select-label",className:`${a["form-element"]} ${a["page-size-select"]}`,value:p.toString(),onChange:e=>{const t=Number(e.target.value);b(t)}},e.createElement(c,{value:"10"},"10"),e.createElement(c,{value:"25"},"25"),e.createElement(c,{value:"50"},"50"))),u&&e.createElement("div",{className:a.total},e.createElement("span",{tabIndex:0},u," ",g.totalItems))),e.createElement("div",{className:a.pagination},e.createElement(t,null,u&&!!h()&&e.createElement("div",{className:a.page},e.createElement(s,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${l["sr-only"]} ${a["current-value-select-label"]}`},g.currentPageLabel),e.createElement(m,{"aria-labelledby":"current-value-input-label",key:"input",id:"current-value-input",size:null==d?void 0:d.toString().length,onChange:e=>P(Number(e.target.value)),name:"current-value-input",value:d.toString(),className:`${a["form-element"]} ${a["current-page-select"]}`},Array.from(Array(h()).keys()).map((t=>e.createElement(c,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:a["page-total"]},g.currentPage.replace("%1",Math.ceil(u/p).toString()))),!!d&&e.createElement("div",{className:a.previous},e.createElement(r,{disabled:d<=2,title:"first",onClick:()=>P(0),"data-paginate":"first"},e.createElement(n,{icon:i.NavigationFirst})),e.createElement(r,{disabled:d<=1,title:"previous",onClick:()=>P(d-1),"data-paginate":"previous"},e.createElement(n,{icon:i.ChevronLeft}))),e.createElement("div",{className:a.next},!(void 0===d&&(void 0===d||u))&&e.createElement(r,{disabled:d>=h(),title:"next",onClick:()=>P(d+1),"data-paginate":"next"},e.createElement(n,{icon:i.ChevronRight})),!(!d||!u)&&e.createElement(r,{disabled:d>=h()-1,title:"last",onClick:()=>P(Math.ceil(u/p)),"data-paginate":"last"},e.createElement(n,{icon:i.NavigationLast}))))))}));export{u as Pagination};
1
+ import e,{useState as t,useEffect as a,Fragment as r}from"react";import l from"./Pagination.module.esm.js";import n from"../src/readyclasses.module.esm.js";import{IconButton as s}from"../Button/IconButton.esm.js";import{Icon as m,Icons as i}from"../Icon/Icon.esm.js";import{Select as c}from"../Form/Select/Select.esm.js";import{Option as o}from"../Form/Select/Option.esm.js";import{Label as p}from"../Form/Label/Label.esm.js";var u;!function(e){e.totalItems="items in total",e.itemsPerPage="Items per page",e.currentPage="of %1 pages",e.itemsPerPageLabel="Select how many items per page you want to see.",e.currentPageLabel="What page you are currently on."}(u||(u={}));const g=e.forwardRef((({totalElements:g,pageSize:d=10,translate:v=u,currentPage:E,className:f,onPageChange:b,onPageSizeChange:N,...h},P)=>{const y=g?Math.ceil(g/d)<1?1:Math.ceil(g/d):1,[S,C]=t(!1),I=e=>{b(e)};return a((()=>{S&&C(!1)}),[S]),e.createElement("div",{...h,ref:P,className:`${l["pagination-wrapper"]} ${null!=f?f:""}`},e.createElement("div",{className:l.left},d&&e.createElement("div",{className:l["per-page"]},e.createElement(p,{id:"page-size-select-label"},v.itemsPerPage),e.createElement(c,{labeledBy:"page-size-select-label",className:`${l["form-element"]} ${l["page-size-select"]}`,value:d.toString(),onChange:e=>{const t=Number(e.target.value);C(!0),N(t)}},e.createElement(o,{value:"10"},"10"),e.createElement(o,{value:"25"},"25"),e.createElement(o,{value:"50"},"50"))),g&&e.createElement("div",{className:l.total},e.createElement("span",{tabIndex:0},g," ",v.totalItems))),e.createElement("div",{className:l.pagination},e.createElement(r,null,g&&!!y&&e.createElement("div",{className:l.page},e.createElement(p,{id:"current-value-input-label",htmlFor:"current-value-input",className:`${n["sr-only"]} ${l["current-value-select-label"]}`},v.currentPageLabel),e.createElement(c,{labeledBy:"current-value-input-label",key:"input",id:"current-value-input",size:E.toString().length,onChange:e=>I(Number(e.target.value)),name:"current-value-input",value:E.toString(),className:`${l["form-element"]} ${l["current-page-select"]}`,searchInputProps:{wrapperProps:{className:l["search-input-wrapper"]},reset:S,autoComplete:"off"}},Array.from(Array(y).keys()).map((t=>e.createElement(o,{key:t,value:(t+1).toString()},(t+1).toString())))),e.createElement("span",{className:l["page-total"]},v.currentPage.replace("%1",Math.ceil(g/d).toString()))),!!E&&e.createElement("div",{className:l.previous},e.createElement(s,{disabled:E<=1,title:"first",onClick:()=>I(1),"data-paginate":"first"},e.createElement(m,{icon:i.NavigationFirst})),e.createElement(s,{disabled:E<=1,title:"previous",onClick:()=>I(E-1),"data-paginate":"previous"},e.createElement(m,{icon:i.ChevronLeft}))),e.createElement("div",{className:l.next},!(void 0===E&&(void 0===E||g))&&e.createElement(s,{disabled:E>=y,title:"next",onClick:()=>I(E+1),"data-paginate":"next"},e.createElement(m,{icon:i.ChevronRight})),!(!E||!g)&&e.createElement(s,{disabled:E>=y,title:"last",onClick:()=>I(Math.ceil(g/d)),"data-paginate":"last"},e.createElement(m,{icon:i.NavigationLast}))))))}));export{g as Pagination};
2
2
  //# sourceMappingURL=Pagination.esm.js.map
@@ -1,2 +1,2 @@
1
- var containers=[],styleTags=[];const a = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var i=".Pagination_module_paginationWrapper__52695df9{color:var(--greyed-out);display:flex;flex-direction:column;font-family:var(--font-family);font-size:var(--font-size);justify-content:space-between;line-height:var(--default-line-height)}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_left__52695df9{display:flex}.Pagination_module_paginationWrapper__52695df9 label{margin-bottom:0}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_formElement__52695df9{height:2.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_formElement__52695df9 button{min-height:2.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9{align-items:center;display:flex;flex:1 0 auto;justify-content:center}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9 span{color:var(--color-blue-grey500)}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9{align-items:center;display:flex;flex:1 0 auto;justify-content:center;margin-top:1rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_next__52695df9,.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_previous__52695df9{align-items:center;display:flex}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_next__52695df9 button span:before,.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9 .Pagination_module_previous__52695df9 button span:before{font-size:.75rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9{align-items:center;display:none}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9 label{color:var(--color-blue-grey900);font-weight:500}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9+.Pagination_module_total__52695df9{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_page__52695df9{align-items:center;display:flex;flex-basis:min-content;padding-right:1rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageTotal__52695df9{color:var(--color-blue-grey900);display:inline-block;font-weight:500;margin-left:.5rem;white-space:nowrap}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_page__52695df9+.Pagination_module_previous__52695df9{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9{margin:0 .25rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button{min-width:3.75rem;padding:0}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button div[data-display]{left:.5rem}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pageSizeSelect__52695df9 button div:not([data-display]){right:.5rem}.Pagination_module_currentPageSelect__52695df9 button{min-width:3.75rem;padding:0}.Pagination_module_currentPageSelect__52695df9 button div[data-display]{left:.5rem}.Pagination_module_currentPageSelect__52695df9 button div:not([data-display]){right:.5rem}@media screen and (min-width:30em){.Pagination_module_paginationWrapper__52695df9{flex-direction:row}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_total__52695df9{justify-content:flex-start}.Pagination_module_paginationWrapper__52695df9 .Pagination_module_pagination__52695df9{justify-content:flex-end;margin-top:0}}@media screen and (min-width:48em){.Pagination_module_paginationWrapper__52695df9 .Pagination_module_perPage__52695df9{display:flex;margin-right:1rem}}",n={"pagination-wrapper":"Pagination_module_paginationWrapper__52695df9",left:"Pagination_module_left__52695df9","form-element":"Pagination_module_formElement__52695df9",total:"Pagination_module_total__52695df9",pagination:"Pagination_module_pagination__52695df9",previous:"Pagination_module_previous__52695df9",next:"Pagination_module_next__52695df9","per-page":"Pagination_module_perPage__52695df9",page:"Pagination_module_page__52695df9","page-total":"Pagination_module_pageTotal__52695df9","page-size-select":"Pagination_module_pageSizeSelect__52695df9","current-page-select":"Pagination_module_currentPageSelect__52695df9"};a(i,{});export{i as css,n as default};
1
+ var containers=[],styleTags=[];const e = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var a=".Pagination_module_paginationWrapper__97e9bc7b{color:var(--greyed-out);display:flex;flex-direction:column;font-family:var(--font-family);font-size:var(--font-size);justify-content:space-between;line-height:var(--default-line-height)}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_left__97e9bc7b{display:flex}.Pagination_module_paginationWrapper__97e9bc7b label{margin-bottom:0}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b{height:2.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b .Pagination_module_searchInputWrapper__97e9bc7b{width:2.75rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_formElement__97e9bc7b button{min-height:2.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b{align-items:center;display:flex;flex:1 0 auto;justify-content:center}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b span{color:var(--color-blue-grey500)}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b{align-items:center;display:flex;flex:1 0 auto;justify-content:center;margin-top:1rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_next__97e9bc7b,.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_previous__97e9bc7b{align-items:center;display:flex}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_next__97e9bc7b button span:before,.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b .Pagination_module_previous__97e9bc7b button span:before{font-size:.75rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b{align-items:center;display:none}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b label{color:var(--color-blue-grey900);font-weight:500}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b+.Pagination_module_total__97e9bc7b{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_page__97e9bc7b{align-items:center;display:flex;flex-basis:min-content;padding-right:1rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageTotal__97e9bc7b{color:var(--color-blue-grey900);display:inline-block;font-weight:500;margin-left:.5rem;white-space:nowrap}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_page__97e9bc7b+.Pagination_module_previous__97e9bc7b{border-left:1px solid var(--color-blue-grey100);padding-left:.9375rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b{margin:0 .25rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button{min-width:3.75rem;padding:0}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button div[data-display]{left:.5rem}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pageSizeSelect__97e9bc7b button div:not([data-display]){right:.5rem}.Pagination_module_currentPageSelect__97e9bc7b button{min-width:3.75rem;padding:0}.Pagination_module_currentPageSelect__97e9bc7b button div[data-display]{left:.5rem}.Pagination_module_currentPageSelect__97e9bc7b button div:not([data-display]){right:.5rem}@media screen and (min-width:30em){.Pagination_module_paginationWrapper__97e9bc7b{flex-direction:row}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_total__97e9bc7b{justify-content:flex-start}.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_pagination__97e9bc7b{justify-content:flex-end;margin-top:0}}@media screen and (min-width:48em){.Pagination_module_paginationWrapper__97e9bc7b .Pagination_module_perPage__97e9bc7b{display:flex;margin-right:1rem}}",i={"pagination-wrapper":"Pagination_module_paginationWrapper__97e9bc7b",left:"Pagination_module_left__97e9bc7b","form-element":"Pagination_module_formElement__97e9bc7b","search-input-wrapper":"Pagination_module_searchInputWrapper__97e9bc7b",total:"Pagination_module_total__97e9bc7b",pagination:"Pagination_module_pagination__97e9bc7b",previous:"Pagination_module_previous__97e9bc7b",next:"Pagination_module_next__97e9bc7b","per-page":"Pagination_module_perPage__97e9bc7b",page:"Pagination_module_page__97e9bc7b","page-total":"Pagination_module_pageTotal__97e9bc7b","page-size-select":"Pagination_module_pageSizeSelect__97e9bc7b","current-page-select":"Pagination_module_currentPageSelect__97e9bc7b"};e(a,{});export{a as css,i as default};
2
2
  //# sourceMappingURL=Pagination.module.esm.js.map
@@ -0,0 +1,2 @@
1
+ import e,{forwardRef as r}from"react";import{Icon as o,Icons as a}from"../Icon/Icon.esm.js";import i from"./Tag.module.esm.js";import{Typography as t}from"../Typography/Typography.esm.js";const n=r((({children:r,variant:n,icon:l,backgroundColor:c,color:m,...s},d)=>{var b;return e.createElement("div",{ref:d,className:`${"enabled"===n?i["tag-enabled"]:"disabled"===n?i["tag-disabled"]:void 0} ${i.tag} ${null!==(b=s.className)&&void 0!==b?b:""}`,style:{backgroundColor:c,color:m},...s},l?e.createElement(o,{size:"inherit",icon:l}):"enabled"===n?e.createElement(o,{size:"inherit",icon:a.CheckmarkCircleAlt}):"disabled"===n?e.createElement(o,{size:"inherit",icon:a.Forbidden}):void 0,e.createElement(t,{spacing:{marginBottom:0},variant:"body",className:i.label},r))}));export{n as Tag};
2
+ //# sourceMappingURL=Tag.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var containers=[],styleTags=[];const a = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var e=".Tag_module_tag__18af6da0{align-items:center;border-radius:3.125rem;display:inline-flex;font-size:.75rem;gap:.25rem;padding:.375rem .7rem}.Tag_module_tag__18af6da0.Tag_module_tagEnabled__18af6da0{background-color:var(--color-green100)}.Tag_module_tag__18af6da0.Tag_module_tagDisabled__18af6da0{background-color:var(--color-blue-grey100)}.Tag_module_tag__18af6da0 .Tag_module_label__18af6da0{color:inherit;font-size:inherit;line-height:.75rem}",_={tag:"Tag_module_tag__18af6da0","tag-enabled":"Tag_module_tagEnabled__18af6da0","tag-disabled":"Tag_module_tagDisabled__18af6da0",label:"Tag_module_label__18af6da0"};a(e,{});export{e as css,_ as default};
2
+ //# sourceMappingURL=Tag.module.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -9,7 +9,9 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
9
9
  describedBy?: string;
10
10
  placeholder?: string;
11
11
  searchPlaceholder?: string;
12
- searchInputProps?: PartialInputProps;
12
+ searchInputProps?: PartialInputProps & {
13
+ reset?: boolean;
14
+ };
13
15
  selectButtonProps?: ComponentPropsWithRef<"button">;
14
16
  className?: string;
15
17
  value: string;
@@ -17,6 +17,8 @@ export { Tab } from "./components/Tabs/Tab";
17
17
  export type { Props as TabProps } from "./components/Tabs/Tab";
18
18
  export { Tabs } from "./components/Tabs/Tabs";
19
19
  export type { Props as TabsProps } from "./components/Tabs/Tabs";
20
+ export { Tag } from "./components/Tag/Tag";
21
+ export type { Props as TagProps } from "./components/Tag/Tag";
20
22
  export { TextEllipsis } from "./components/TextEllipsis/TextEllipsis";
21
23
  export type { Props as TextEllipsisProps } from "./components/TextEllipsis/TextEllipsis";
22
24
  export { Tile } from "./components/Tiles/Tile";
@@ -1,2 +1,2 @@
1
- export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
1
+ export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{Tag}from"../Tag/Tag.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
2
2
  //# sourceMappingURL=index.esm.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "homepage": "http://onewelcome.github.io/react-lib-components",
3
3
  "name": "@onewelcome/react-lib-components",
4
- "version": "4.0.0",
4
+ "version": "4.1.1",
5
5
  "license": "Apache-2.0",
6
6
  "author": "OneWelcome B.V.",
7
7
  "main": "dist/cjs/src/index.cjs.js",
@@ -44,7 +44,7 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
44
44
  describedBy?: string;
45
45
  placeholder?: string;
46
46
  searchPlaceholder?: string;
47
- searchInputProps?: PartialInputProps;
47
+ searchInputProps?: PartialInputProps & { reset?: boolean };
48
48
  selectButtonProps?: ComponentPropsWithRef<"button">;
49
49
  className?: string;
50
50
  value: string;
@@ -90,7 +90,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
90
90
  false
91
91
  ); /** 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. */
92
92
  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
93
- const [childrenCount] = useState(React.Children.count(children));
94
93
 
95
94
  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
96
95
  const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,7 +111,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
112
111
  setIsSearching,
113
112
  setFocusedSelectItem,
114
113
  onOptionChangeHandler,
115
- childrenCount,
114
+ childrenCount: React.Children.count(children),
116
115
  setShouldClick,
117
116
  searchInputRef,
118
117
  renderSearchCondition
@@ -239,6 +238,16 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
239
238
  expanded
240
239
  );
241
240
 
241
+ const resetSearchState = () => {
242
+ setFilter("");
243
+ setIsSearching(false);
244
+ setFocusedSelectItem(-1);
245
+ };
246
+
247
+ useEffect(() => {
248
+ searchInputProps?.reset && resetSearchState();
249
+ }, [searchInputProps?.reset]);
250
+
242
251
  const additionalClasses = [];
243
252
  expanded && additionalClasses.push(classes.expanded);
244
253
  error && additionalClasses.push(classes.error);
@@ -34,6 +34,10 @@
34
34
  .form-element {
35
35
  height: 2.5rem;
36
36
 
37
+ .search-input-wrapper {
38
+ width: 2.75rem;
39
+ }
40
+
37
41
  button {
38
42
  min-height: 2.5rem;
39
43
  }
@@ -16,7 +16,7 @@
16
16
 
17
17
  import React, { useEffect, useRef } from "react";
18
18
  import { Pagination, Props } from "./Pagination";
19
- import { act, render, waitFor } from "@testing-library/react";
19
+ import { render, waitFor } from "@testing-library/react";
20
20
  import userEvent from "@testing-library/user-event";
21
21
 
22
22
  const defaultParams: Props = {
@@ -60,8 +60,8 @@ describe("Pagination events", () => {
60
60
  const { pagination } = createPagination(defaultParams => ({
61
61
  ...defaultParams,
62
62
  currentPage: 10,
63
- onPageChange: onPageChange,
64
- onPageSizeChange: onPageSizeChange
63
+ onPageChange,
64
+ onPageSizeChange
65
65
  }));
66
66
 
67
67
  const next = pagination.querySelector('[data-paginate="next"]')!;
@@ -79,7 +79,7 @@ describe("Pagination events", () => {
79
79
  await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
80
80
 
81
81
  await userEvent.click(first);
82
- await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(0));
82
+ await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(1));
83
83
 
84
84
  await userEvent.click(last);
85
85
  await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
@@ -102,28 +102,28 @@ describe("different current pages and their effect on what renders", () => {
102
102
  expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
103
103
  });
104
104
 
105
- it("is on the second page and does not render first", async () => {
105
+ it("is on the second page and does render first", async () => {
106
106
  const { pagination } = createPagination(defaultParams => ({
107
107
  ...defaultParams,
108
108
  currentPage: 2
109
109
  }));
110
110
 
111
- expect(pagination.querySelector('[data-paginate="first"]')).toHaveAttribute("disabled");
111
+ expect(pagination.querySelector('[data-paginate="first"]')).not.toHaveAttribute("disabled");
112
112
  });
113
113
 
114
- it("is on the second to last page and does not render last", () => {
114
+ it("is on the second to last page and does render last", () => {
115
115
  const { pagination } = createPagination(defaultParams => ({
116
116
  ...defaultParams,
117
- currentPage: 499
117
+ currentPage: 49
118
118
  }));
119
119
 
120
- expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
120
+ expect(pagination.querySelector('[data-paginate="last"]')).not.toHaveAttribute("disabled");
121
121
  });
122
122
 
123
123
  it("is on the last page and does not render next & last", () => {
124
124
  const { pagination } = createPagination(defaultParams => ({
125
125
  ...defaultParams,
126
- currentPage: 500
126
+ currentPage: 50
127
127
  }));
128
128
 
129
129
  expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
@@ -14,7 +14,13 @@
14
14
  * limitations under the License.
15
15
  */
16
16
 
17
- import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
17
+ import React, {
18
+ ForwardRefRenderFunction,
19
+ ComponentPropsWithRef,
20
+ Fragment,
21
+ useState,
22
+ useEffect
23
+ } from "react";
18
24
  import classes from "./Pagination.module.scss";
19
25
  import readyclasses from "../../readyclasses.module.scss";
20
26
  import { IconButton } from "../Button/IconButton";
@@ -74,9 +80,12 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
74
80
 
75
81
  return Math.ceil(totalElements / pageSize);
76
82
  };
83
+ const pagesAmount = calculateAmountOfPages();
84
+ const [resetPageNoSelect, setResetPageNoSelect] = useState(false);
77
85
 
78
86
  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
79
87
  const pageSizeNumber = Number(event.target.value) as PageSize;
88
+ setResetPageNoSelect(true);
80
89
  onPageSizeChange(pageSizeNumber);
81
90
  };
82
91
 
@@ -84,6 +93,10 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
84
93
  onPageChange(pageToGoTo);
85
94
  };
86
95
 
96
+ useEffect(() => {
97
+ resetPageNoSelect && setResetPageNoSelect(false);
98
+ }, [resetPageNoSelect]);
99
+
87
100
  return (
88
101
  <div {...rest} ref={ref} className={`${classes["pagination-wrapper"]} ${className ?? ""}`}>
89
102
  <div className={classes["left"]}>
@@ -112,7 +125,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
112
125
  </div>
113
126
  <div className={classes["pagination"]}>
114
127
  <Fragment>
115
- {totalElements && !!calculateAmountOfPages() && (
128
+ {totalElements && !!pagesAmount && (
116
129
  <div className={classes["page"]}>
117
130
  <Label
118
131
  id="current-value-input-label"
@@ -122,18 +135,23 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
122
135
  {translate.currentPageLabel}
123
136
  </Label>
124
137
  <Select
125
- aria-labelledby="current-value-input-label"
138
+ labeledBy="current-value-input-label"
126
139
  key="input"
127
140
  id="current-value-input"
128
- size={currentPage?.toString().length}
141
+ size={currentPage.toString().length}
129
142
  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
130
143
  onPageChangeHandler(Number(e.target.value))
131
144
  }
132
145
  name="current-value-input"
133
146
  value={currentPage.toString()}
134
147
  className={`${classes["form-element"]} ${classes["current-page-select"]}`}
148
+ searchInputProps={{
149
+ wrapperProps: { className: classes["search-input-wrapper"] },
150
+ reset: resetPageNoSelect,
151
+ autoComplete: "off"
152
+ }}
135
153
  >
136
- {Array.from(Array(calculateAmountOfPages()!).keys()).map(page => (
154
+ {Array.from(Array(pagesAmount).keys()).map(page => (
137
155
  <Option key={page} value={(page + 1).toString()}>
138
156
  {(page + 1).toString()}
139
157
  </Option>
@@ -151,9 +169,9 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
151
169
  <div className={classes["previous"]}>
152
170
  {
153
171
  <IconButton
154
- disabled={currentPage <= 2}
172
+ disabled={currentPage <= 1}
155
173
  title="first"
156
- onClick={() => onPageChangeHandler(0)}
174
+ onClick={() => onPageChangeHandler(1)}
157
175
  data-paginate="first"
158
176
  >
159
177
  <Icon icon={Icons.NavigationFirst} />
@@ -174,7 +192,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
174
192
  <div className={classes["next"]}>
175
193
  {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (
176
194
  <IconButton
177
- disabled={currentPage >= calculateAmountOfPages()!}
195
+ disabled={currentPage >= pagesAmount}
178
196
  title="next"
179
197
  onClick={() => onPageChangeHandler(currentPage + 1)}
180
198
  data-paginate="next"
@@ -184,7 +202,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
184
202
  )}
185
203
  {!!(currentPage && totalElements) && (
186
204
  <IconButton
187
- disabled={currentPage >= calculateAmountOfPages()! - 1}
205
+ disabled={currentPage >= pagesAmount}
188
206
  title="last"
189
207
  onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
190
208
  data-paginate="last"
package/src/index.ts CHANGED
@@ -34,6 +34,8 @@ export { Tab } from "./components/Tabs/Tab";
34
34
  export type { Props as TabProps } from "./components/Tabs/Tab";
35
35
  export { Tabs } from "./components/Tabs/Tabs";
36
36
  export type { Props as TabsProps } from "./components/Tabs/Tabs";
37
+ export { Tag } from "./components/Tag/Tag";
38
+ export type { Props as TagProps } from "./components/Tag/Tag";
37
39
  export { TextEllipsis } from "./components/TextEllipsis/TextEllipsis";
38
40
  export type { Props as TextEllipsisProps } from "./components/TextEllipsis/TextEllipsis";
39
41
  export { Tile } from "./components/Tiles/Tile";