@onewelcome/react-lib-components 4.1.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.
- package/dist/cjs/Form/Select/Select.cjs.js +1 -1
- package/dist/cjs/Pagination/Pagination.cjs.js +1 -1
- package/dist/cjs/Pagination/Pagination.module.cjs.js +1 -1
- package/dist/cjs/src/components/Form/Select/Select.d.ts +3 -1
- package/dist/esm/Form/Select/Select.esm.js +1 -1
- package/dist/esm/Pagination/Pagination.esm.js +1 -1
- package/dist/esm/Pagination/Pagination.module.esm.js +1 -1
- package/dist/esm/src/components/Form/Select/Select.d.ts +3 -1
- package/package.json +1 -1
- package/src/components/Form/Select/Select.tsx +12 -3
- package/src/components/Pagination/Pagination.module.scss +4 -0
- package/src/components/Pagination/Pagination.test.tsx +10 -10
- package/src/components/Pagination/Pagination.tsx +27 -9
|
@@ -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"),
|
|
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
|
|
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
|
|
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
|
|
@@ -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
|
-
import e from"./Select.module.esm.js";import t,{useState as r,useRef as
|
|
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
|
|
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
|
|
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
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -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);
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
import React, { useEffect, useRef } from "react";
|
|
18
18
|
import { Pagination, Props } from "./Pagination";
|
|
19
|
-
import {
|
|
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
|
|
64
|
-
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(
|
|
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
|
|
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
|
|
114
|
+
it("is on the second to last page and does render last", () => {
|
|
115
115
|
const { pagination } = createPagination(defaultParams => ({
|
|
116
116
|
...defaultParams,
|
|
117
|
-
currentPage:
|
|
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:
|
|
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, {
|
|
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 && !!
|
|
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
|
-
|
|
138
|
+
labeledBy="current-value-input-label"
|
|
126
139
|
key="input"
|
|
127
140
|
id="current-value-input"
|
|
128
|
-
size={currentPage
|
|
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(
|
|
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 <=
|
|
172
|
+
disabled={currentPage <= 1}
|
|
155
173
|
title="first"
|
|
156
|
-
onClick={() => onPageChangeHandler(
|
|
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 >=
|
|
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 >=
|
|
205
|
+
disabled={currentPage >= pagesAmount}
|
|
188
206
|
title="last"
|
|
189
207
|
onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
|
|
190
208
|
data-paginate="last"
|