@rmwc/list - npm Package Compare versions

Comparing version 14.0.7 to 14.0.8

collapsible-list.js

		@@ -1,1 +0,1 @@
		"use strict";var e=require("./collapsible-list.css");require("@material/list/dist/mdc.list.css");require("@rmwc/icon/styles");require("@rmwc/ripple/styles");
		"use strict";var r=require("./collapsible-list.css");require("@material/list/dist/mdc.list.css");require("@rmwc/icon/styles");require("@rmwc/ripple/styles");;/* empty css */

index.js

		@@ -1,4 +0,4 @@
		"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),u=require("react"),c=require("@rmwc/base"),l=require("@material/list"),M=require("@rmwc/ripple"),R=require("@rmwc/icon");function B(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const V=B(u),v=n=>{if(!n)return!1;const e=n.getAttribute("tabindex");return e&&Number(e)>=0?(n.focus(),!0):!1},k=(n,e)=>{if(!n)return null;const t=e?n.previousElementSibling:n.nextElementSibling;return t===null?k(n.parentElement,e):t};class j extends u.Component{constructor(e){super(e),this.childContainer=null,this.root=null,this.rafId=null,this.timerId=null,this.state={open:!!this.props.defaultOpen\|\|!!this.props.open,childrenStyle:{}},this.handleClick=this.handleClick.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this)}static getDerivedStateFromProps(e,t){return e.open!==void 0&&e.open!==t.open?{...t,open:e.open}:t}componentDidMount(){this.syncOpenState()}componentDidUpdate(e,t){t.open!==this.state.open&&this.syncOpenState()}componentWillUnmount(){this.rafId&&window.cancelAnimationFrame(this.rafId),this.timerId&&window.clearTimeout(this.timerId)}syncOpenState(){const{onOpen:e,onClose:t}=this.props,a={maxHeight:this.childContainer?`${this.childContainer.offsetHeight}px`:"0px"};this.setState({childrenStyle:a},()=>{this.state.open?(e&&e(),this.timerId=window.setTimeout(()=>{this.state.open&&this.setState({childrenStyle:{maxHeight:"none"}})},300)):(t&&t(),this.rafId=window.requestAnimationFrame(()=>{this.setState({childrenStyle:{}})}))})}correctFocus(e){this.rafId=window.requestAnimationFrame(()=>{if(!this.state.open&&this.root&&this.root.contains(document.activeElement)){const t=k(this.root,e);if(v(t))return;if(t){const a=t.querySelectorAll("[tabindex]");for(let f=0;f<a.length&&!v(a[f]);f++);}}})}toggleOpen(e){this.setState({open:e})}handleClick(e){const{handle:t}=this.props;t.props.onClick&&t.props.onClick(e),this.toggleOpen(!this.state.open)}handleKeydown(e){const{handle:t}=this.props;switch(t.props.onKeyDown&&t.props.onKeyDown(e),e.key){case"Enter":this.toggleOpen(!this.state.open);return;case"ArrowRight":this.toggleOpen(!0);return;case"ArrowUp":case"ArrowDown":case"Tab":const a=e.shiftKey\|\|e.key==="ArrowUp";this.correctFocus(a);return;case"ArrowLeft":this.toggleOpen(!1);return}}handleFocus(e){if(!this.state.open&&this.root&&this.childContainer&&this.childContainer.contains(document.activeElement)){const t=this.root.querySelector(".rmwc-collapsible-list__handle .mdc-deprecated-list-item");t&&t.focus()}}render(){const{children:e,handle:t,onOpen:a,onClose:f,open:I,defaultOpen:p,className:m,...g}=this.props,{open:C,childrenStyle:L}=this.state;return h.jsxs(c.Tag,{...g,onFocus:this.handleFocus,ref:S=>this.root=S,className:c.classNames("rmwc-collapsible-list",m,{"rmwc-collapsible-list--open":C}),children:[h.jsx("div",{className:"rmwc-collapsible-list__handle",children:u.cloneElement(t,{...t.props,onClick:this.handleClick,onKeyDown:this.handleKeydown})}),h.jsx("div",{className:"rmwc-collapsible-list__children",style:L,children:h.jsx("div",{className:"rmwc-collapsible-list__children-inner",ref:S=>this.childContainer=S,children:e})})]})}}j.displayName="CollapsibleList";const $=n=>{const e=u.useCallback(i=>i?[].slice.call(i.querySelectorAll(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]}`)):[],[]),t=i=>{const o=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS]}`);if(o)return(o==null?void 0:o.textContent)??"";const s=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_TEXT_CLASS]}`);return s&&s.textContent\|\|""},[a,f]=u.useState({}),[I,p]=u.useState(void 0),{foundation:m,...g}=c.useFoundation({props:n,api:({rootEl:i,foundation:o})=>{const s=o.adapter;return{listElements:()=>e(i.ref),focusRoot:()=>i==null?void 0:i.ref.focus(),getClasses:()=>l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS],addClassToElementIndex:s.addClassForElementIndex,removeClassFromElementAtIndex:s.removeClassForElementIndex,setAttributeForElementIndex:s.setAttributeForElementIndex,getListItemCount:s.getListItemCount,focusItemAtIndex:s.focusItemAtIndex,selectedIndex:l.MDCListFoundation.numbers.UNSET_INDEX,setSelectedIndex:d=>o.setSelectedIndex(d)}},elements:{rootEl:!0},foundation:({rootEl:i,emit:o})=>new l.MDCListFoundation({getListItemCount:()=>e(i.ref).length,getFocusedElementIndex:()=>e(i.ref).indexOf(document.activeElement),getAttributeForElementIndex:(s,d)=>e(i.ref)[s].getAttribute(d),listItemAtIndexHasClass:(s,d)=>{const r=e(i.ref)[s];return!!(r!=null&&r.classList.contains(l.deprecatedClassNameMap[d]))},setAttributeForElementIndex:(s,d,r)=>{d==="tabindex"&&(d="tabIndex");const b=e(i.ref)[s];b&&b.setAttribute(d,String(r))},addClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?r:r[s]&&r[s].indexOf(d)===-1?{...r,[s]:[...r[s],d]}:{...r,[s]:[d]})},removeClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?{...r,[s]:r[s].filter(b=>b!==d)}:r)},focusItemAtIndex:s=>{const d=e(i.ref)[s];d&&d.focus()},setTabIndexForListItemChildren:(s,d)=>{const r=e(i.ref)[s];[].slice.call(r.querySelectorAll(l.MDCListFoundation.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(A=>A.setAttribute("tabindex",String(d)))},hasCheckboxAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),hasRadioAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR),isCheckboxCheckedAtIndex:s=>{const r=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR);return r?r.checked:!1},setCheckedCheckboxOrRadioAtIndex:(s,d)=>{const b=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);if(b){b.checked=d;const A=document.createEvent("Event");A.initEvent("change",!0,!0),b.dispatchEvent(A)}},notifyAction:s=>o("onAction",{index:s}),notifySelectionChange:s=>o(l.strings.SELECTION_CHANGE_EVENT,{changedIndices:s},!0),isFocusInsideList:()=>{var s;return!!((s=i.ref)!=null&&s.contains(document.activeElement))},isRootFocused:()=>document.activeElement===i.ref,getPrimaryTextAtIndex:s=>t(e(i.ref)[s])})}),{rootEl:C}=g,L=u.useCallback(i=>{let o=i.target,s=-1;for(;o&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.ROOT]);)o=o.parentElement;return o&&o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&(s=e(C.ref).indexOf(o)),s},[e,C.ref]),{onClick:S}=n,O=u.useCallback(i=>{S==null\|\|S(i);const o=L(i),s=!c.matches(i.target,l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);m.handleClick(o,s)},[L,m,S]),{onKeyDown:E}=n,F=u.useCallback(i=>{E==null\|\|E(i);const o=L(i);o>=0&&m.handleKeydown(i,i.target instanceof Element&&i.target.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]),o)},[L,m,E]),{onFocus:x}=n,_=u.useCallback(i=>{x==null\|\|x(i),m.handleFocusIn(L(i))},[L,m,x]),{onBlur:y}=n,T=u.useCallback(i=>{y==null\|\|y(i),m.handleFocusOut(L(i))},[L,m,y]);C.setProp("onClick",O,!0),C.setProp("onKeyDown",F,!0),C.setProp("onFocus",_,!0),C.setProp("onBlur",T,!0);const N=u.useCallback(()=>{if(n.role)return p(n.role);if(!C.ref)return;const i=!!n.selectedIndex\|\|!!C.ref.querySelector(`
		"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),u=require("react"),c=require("@rmwc/base"),l=require("@material/list"),M=require("@rmwc/ripple"),j=require("@rmwc/icon");function V(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const $=V(u),k=n=>{if(!n)return!1;const e=n.getAttribute("tabindex");return e&&Number(e)>=0?(n.focus(),!0):!1},q=(n,e)=>{if(!n)return null;const t=e?n.previousElementSibling:n.nextElementSibling;return t===null?q(n.parentElement,e):t},v=class v extends u.Component{constructor(e){super(e),this.childContainer=null,this.root=null,this.rafId=null,this.timerId=null,this.state={open:!!this.props.defaultOpen\|\|!!this.props.open,childrenStyle:{}},this.handleClick=this.handleClick.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this)}static getDerivedStateFromProps(e,t){return e.open!==void 0&&e.open!==t.open?{...t,open:e.open}:t}componentDidMount(){this.syncOpenState()}componentDidUpdate(e,t){t.open!==this.state.open&&this.syncOpenState()}componentWillUnmount(){this.rafId&&window.cancelAnimationFrame(this.rafId),this.timerId&&window.clearTimeout(this.timerId)}syncOpenState(){const{onOpen:e,onClose:t}=this.props,a={maxHeight:this.childContainer?`${this.childContainer.offsetHeight}px`:"0px"};this.setState({childrenStyle:a},()=>{this.state.open?(e&&e(),this.timerId=window.setTimeout(()=>{this.state.open&&this.setState({childrenStyle:{maxHeight:"none"}})},300)):(t&&t(),this.rafId=window.requestAnimationFrame(()=>{this.setState({childrenStyle:{}})}))})}correctFocus(e){this.rafId=window.requestAnimationFrame(()=>{if(!this.state.open&&this.root&&this.root.contains(document.activeElement)){const t=q(this.root,e);if(k(t))return;if(t){const a=t.querySelectorAll("[tabindex]");for(let f=0;f<a.length&&!k(a[f]);f++);}}})}toggleOpen(e){this.setState({open:e})}handleClick(e){const{handle:t}=this.props;t.props.onClick&&t.props.onClick(e),this.toggleOpen(!this.state.open)}handleKeydown(e){const{handle:t}=this.props;switch(t.props.onKeyDown&&t.props.onKeyDown(e),e.key){case"Enter":this.toggleOpen(!this.state.open);return;case"ArrowRight":this.toggleOpen(!0);return;case"ArrowUp":case"ArrowDown":case"Tab":const a=e.shiftKey\|\|e.key==="ArrowUp";this.correctFocus(a);return;case"ArrowLeft":this.toggleOpen(!1);return}}handleFocus(e){if(!this.state.open&&this.root&&this.childContainer&&this.childContainer.contains(document.activeElement)){const t=this.root.querySelector(".rmwc-collapsible-list__handle .mdc-deprecated-list-item");t&&t.focus()}}render(){const{children:e,handle:t,onOpen:a,onClose:f,open:I,defaultOpen:p,className:m,...g}=this.props,{open:C,childrenStyle:L}=this.state;return h.jsxs(c.Tag,{...g,onFocus:this.handleFocus,ref:S=>this.root=S,className:c.classNames("rmwc-collapsible-list",m,{"rmwc-collapsible-list--open":C}),children:[h.jsx("div",{className:"rmwc-collapsible-list__handle",children:u.cloneElement(t,{...t.props,onClick:this.handleClick,onKeyDown:this.handleKeydown})}),h.jsx("div",{className:"rmwc-collapsible-list__children",style:L,children:h.jsx("div",{className:"rmwc-collapsible-list__children-inner",ref:S=>this.childContainer=S,children:e})})]})}};v.displayName="CollapsibleList";let w=v;const U=n=>{const e=u.useCallback(i=>i?[].slice.call(i.querySelectorAll(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]}`)):[],[]),t=i=>{const o=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS]}`);if(o)return(o==null?void 0:o.textContent)??"";const s=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_TEXT_CLASS]}`);return s&&s.textContent\|\|""},[a,f]=u.useState({}),[I,p]=u.useState(void 0),{foundation:m,...g}=c.useFoundation({props:n,api:({rootEl:i,foundation:o})=>{const s=o.adapter;return{listElements:()=>e(i.ref),focusRoot:()=>i==null?void 0:i.ref.focus(),getClasses:()=>l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS],addClassToElementIndex:s.addClassForElementIndex,removeClassFromElementAtIndex:s.removeClassForElementIndex,setAttributeForElementIndex:s.setAttributeForElementIndex,getListItemCount:s.getListItemCount,focusItemAtIndex:s.focusItemAtIndex,selectedIndex:l.MDCListFoundation.numbers.UNSET_INDEX,setSelectedIndex:d=>o.setSelectedIndex(d)}},elements:{rootEl:!0},foundation:({rootEl:i,emit:o})=>new l.MDCListFoundation({getListItemCount:()=>e(i.ref).length,getFocusedElementIndex:()=>e(i.ref).indexOf(document.activeElement),getAttributeForElementIndex:(s,d)=>e(i.ref)[s].getAttribute(d),listItemAtIndexHasClass:(s,d)=>{const r=e(i.ref)[s];return!!(r!=null&&r.classList.contains(l.deprecatedClassNameMap[d]))},setAttributeForElementIndex:(s,d,r)=>{d==="tabindex"&&(d="tabIndex");const b=e(i.ref)[s];b&&b.setAttribute(d,String(r))},addClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?r:r[s]&&r[s].indexOf(d)===-1?{...r,[s]:[...r[s],d]}:{...r,[s]:[d]})},removeClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?{...r,[s]:r[s].filter(b=>b!==d)}:r)},focusItemAtIndex:s=>{const d=e(i.ref)[s];d&&d.focus()},setTabIndexForListItemChildren:(s,d)=>{const r=e(i.ref)[s];[].slice.call(r.querySelectorAll(l.MDCListFoundation.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(A=>A.setAttribute("tabindex",String(d)))},hasCheckboxAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),hasRadioAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR),isCheckboxCheckedAtIndex:s=>{const r=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR);return r?r.checked:!1},setCheckedCheckboxOrRadioAtIndex:(s,d)=>{const b=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);if(b){b.checked=d;const A=document.createEvent("Event");A.initEvent("change",!0,!0),b.dispatchEvent(A)}},notifyAction:s=>o("onAction",{index:s}),notifySelectionChange:s=>o(l.strings.SELECTION_CHANGE_EVENT,{changedIndices:s},!0),isFocusInsideList:()=>{var s;return!!((s=i.ref)!=null&&s.contains(document.activeElement))},isRootFocused:()=>document.activeElement===i.ref,getPrimaryTextAtIndex:s=>t(e(i.ref)[s])})}),{rootEl:C}=g,L=u.useCallback(i=>{let o=i.target,s=-1;for(;o&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.ROOT]);)o=o.parentElement;return o&&o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&(s=e(C.ref).indexOf(o)),s},[e,C.ref]),{onClick:S}=n,O=u.useCallback(i=>{S==null\|\|S(i);const o=L(i),s=!c.matches(i.target,l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);m.handleClick(o,s)},[L,m,S]),{onKeyDown:E}=n,F=u.useCallback(i=>{E==null\|\|E(i);const o=L(i);o>=0&&m.handleKeydown(i,i.target instanceof Element&&i.target.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]),o)},[L,m,E]),{onFocus:x}=n,_=u.useCallback(i=>{x==null\|\|x(i),m.handleFocusIn(L(i))},[L,m,x]),{onBlur:y}=n,T=u.useCallback(i=>{y==null\|\|y(i),m.handleFocusOut(L(i))},[L,m,y]);C.setProp("onClick",O,!0),C.setProp("onKeyDown",F,!0),C.setProp("onFocus",_,!0),C.setProp("onBlur",T,!0);const N=u.useCallback(()=>{if(n.role)return p(n.role);if(!C.ref)return;const i=!!n.selectedIndex\|\|!!C.ref.querySelector(`
		.${l.MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS},
		.${l.MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS}
		`),o=!!C.ref.querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),s=!!C.ref.querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR);if(o)return p("group");if(s)return p("radiogroup");if(i)return p("listbox")},[n.role,n.selectedIndex,C.ref]);return u.useEffect(()=>{m.layout(),N()},[m,N]),u.useEffect(()=>{m.setWrapFocus(n.wrapFocus\|\|n.wrapFocus===void 0)},[m,n.wrapFocus]),u.useEffect(()=>{m.setVerticalOrientation(n.vertical\|\|n.vertical===void 0)},[m,n.vertical]),u.useEffect(()=>{n.selectedIndex!==void 0&&m.setSelectedIndex(n.selectedIndex)},[m,n.selectedIndex]),u.useEffect(()=>{I&&m.setSingleSelection(I==="listbox")},[m,I]),{...g,listItemClasses:a,setEnabled:(i,o)=>{m.setEnabled(i,o)},role:I}},q=V.createContext({getClassName:n=>[],setEnabled:(n,e)=>{}}),U=c.createComponent(function(e,t){const{dense:a,twoLine:f,avatarList:I,apiRef:p,nonInteractive:m,onAction:g,foundationRef:C,wrapFocus:L,vertical:S,selectedIndex:O,children:E,...F}=e,{rootEl:x,listItemClasses:_,setEnabled:y,role:T}=$(e),N=()=>T==="group"?{role:"checkbox"}:T==="radiogroup"?{role:"radio"}:T==="listbox"?{role:"option"}:{},D={getClassName:r=>_[r]\|\|[],setEnabled:y},i=c.useClassNames(e,["mdc-deprecated-list",{"mdc-deprecated-list--dense":a,"mdc-deprecated-list--two-line":f,"mdc-deprecated-list--avatar-list":I,"mdc-deprecated-list--non-interactive":m}]),o=()=>["group","radiogroup","listbox"].some(r=>r===T),s=r=>c.getDisplayName(r)==="ListItem",d=r=>s(r)?u.cloneElement(r,{...N(),...u.isValidElement(r)?r.props:{}}):r;return h.jsx(q.Provider,{value:D,children:h.jsx(c.Tag,{tag:"ul",...F,element:x,role:T,className:i,ref:t,children:o()?u.Children.map(E,d):E})})}),w=M.withRipple({surface:!1})(c.createComponent(function(e,t){const a=u.createRef(),f=t?c.mergeRefs(t,a):a,I=u.useContext(q),[p,m]=u.useState(-1),g=u.useCallback(()=>{const x=C(a.current);return x?x.indexOf(a.current):-1},[a]),C=x=>{var _;return x?[].slice.call((_=x.parentNode)==null?void 0:_.querySelectorAll(".mdc-deprecated-list-item")):[]};u.useEffect(()=>{a.current&&p===-1&&m(g())},[a,p,g]),u.useEffect(()=>{p>-1&&e.disabled!==void 0&&I.setEnabled(p,!e.disabled)},[p,e.disabled,I]);const{selected:L,activated:S,disabled:O,...E}=e,F=c.useClassNames(e,["mdc-deprecated-list-item",{"mdc-deprecated-list-item--selected":e.selected,"mdc-deprecated-list-item--activated":e.activated,"mdc-deprecated-list-item--disabled":e.disabled}]);return h.jsxs(c.Tag,{tag:"li",tabIndex:0,...E,className:F,ref:f,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),E.children]})}));w.displayName="ListItem";const P=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),K=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__primary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),G=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__secondary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),H=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__graphic"]);return h.jsx(R.Icon,{...e,"aria-hidden":"true",ref:t,className:a})}),X=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__meta"]);if(e.icon)return h.jsx(R.Icon,{...e,"aria-hidden":"true",ref:t,className:a});if(u.isValidElement(e.children)){const{children:f,...I}=e;return u.cloneElement(e.children,{...I,...e.children.props,className:c.classNames(a,e.children.props.className)})}return h.jsx(c.Tag,{...e,ref:t,className:a})}),W=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),z=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group__subheader"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),Y=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-divider"]);return h.jsx(c.Tag,{tag:"li",role:"separator",...e,ref:t,className:a})}),J=c.createComponent(({text:n,secondaryText:e,graphic:t,metaIcon:a,meta:f,children:I,...p},m)=>{const g=n&&e!==void 0?h.jsx(K,{children:n}):n,C=e!==void 0?h.jsx(G,{children:e}):null;return h.jsxs(w,{...p,ref:m,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),t!==void 0&&h.jsx(H,{icon:t}),C!==null?h.jsxs(P,{children:[g,C]}):g,(!!f\|\|!!a)&&h.jsx(X,{icon:a,children:f}),I]})});exports.CollapsibleList=j;exports.List=U;exports.ListDivider=Y;exports.ListGroup=W;exports.ListGroupSubheader=z;exports.ListItem=w;exports.ListItemGraphic=H;exports.ListItemMeta=X;exports.ListItemPrimaryText=K;exports.ListItemSecondaryText=G;exports.ListItemText=P;exports.SimpleListItem=J;
		`),o=!!C.ref.querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),s=!!C.ref.querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR);if(o)return p("group");if(s)return p("radiogroup");if(i)return p("listbox")},[n.role,n.selectedIndex,C.ref]);return u.useEffect(()=>{m.layout(),N()},[m,N]),u.useEffect(()=>{m.setWrapFocus(n.wrapFocus\|\|n.wrapFocus===void 0)},[m,n.wrapFocus]),u.useEffect(()=>{m.setVerticalOrientation(n.vertical\|\|n.vertical===void 0)},[m,n.vertical]),u.useEffect(()=>{n.selectedIndex!==void 0&&m.setSelectedIndex(n.selectedIndex)},[m,n.selectedIndex]),u.useEffect(()=>{I&&m.setSingleSelection(I==="listbox")},[m,I]),{...g,listItemClasses:a,setEnabled:(i,o)=>{m.setEnabled(i,o)},role:I}},P=$.createContext({getClassName:n=>[],setEnabled:(n,e)=>{}}),W=c.createComponent(function(e,t){const{dense:a,twoLine:f,avatarList:I,apiRef:p,nonInteractive:m,onAction:g,foundationRef:C,wrapFocus:L,vertical:S,selectedIndex:O,children:E,...F}=e,{rootEl:x,listItemClasses:_,setEnabled:y,role:T}=U(e),N=()=>T==="group"?{role:"checkbox"}:T==="radiogroup"?{role:"radio"}:T==="listbox"?{role:"option"}:{},R={getClassName:r=>_[r]\|\|[],setEnabled:y},i=c.useClassNames(e,["mdc-deprecated-list",{"mdc-deprecated-list--dense":a,"mdc-deprecated-list--two-line":f,"mdc-deprecated-list--avatar-list":I,"mdc-deprecated-list--non-interactive":m}]),o=()=>["group","radiogroup","listbox"].some(r=>r===T),s=r=>c.getDisplayName(r)==="ListItem",d=r=>s(r)?u.cloneElement(r,{...N(),...u.isValidElement(r)?r.props:{}}):r;return h.jsx(P.Provider,{value:R,children:h.jsx(c.Tag,{tag:"ul",...F,element:x,role:T,className:i,ref:t,children:o()?u.Children.map(E,d):E})})}),D=M.withRipple({surface:!1})(c.createComponent(function(e,t){const a=u.createRef(),f=t?c.mergeRefs(t,a):a,I=u.useContext(P),[p,m]=u.useState(-1),g=u.useCallback(()=>{const x=C(a.current);return x?x.indexOf(a.current):-1},[a]),C=x=>{var _;return x?[].slice.call((_=x.parentNode)==null?void 0:_.querySelectorAll(".mdc-deprecated-list-item")):[]};u.useEffect(()=>{a.current&&p===-1&&m(g())},[a,p,g]),u.useEffect(()=>{p>-1&&e.disabled!==void 0&&I.setEnabled(p,!e.disabled)},[p,e.disabled,I]);const{selected:L,activated:S,disabled:O,...E}=e,F=c.useClassNames(e,["mdc-deprecated-list-item",{"mdc-deprecated-list-item--selected":e.selected,"mdc-deprecated-list-item--activated":e.activated,"mdc-deprecated-list-item--disabled":e.disabled}]);return h.jsxs(c.Tag,{tag:"li",tabIndex:0,...E,className:F,ref:f,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),E.children]})}));D.displayName="ListItem";const K=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),G=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__primary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),H=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__secondary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),X=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__graphic"]);return h.jsx(j.Icon,{...e,"aria-hidden":"true",ref:t,className:a})}),B=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__meta"]);if(e.icon)return h.jsx(j.Icon,{...e,"aria-hidden":"true",ref:t,className:a});if(u.isValidElement(e.children)){const{children:f,...I}=e;return u.cloneElement(e.children,{...I,...e.children.props,className:c.classNames(a,e.children.props.className)})}return h.jsx(c.Tag,{...e,ref:t,className:a})}),z=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),Y=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group__subheader"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),J=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-divider"]);return h.jsx(c.Tag,{tag:"li",role:"separator",...e,ref:t,className:a})}),Q=c.createComponent(({text:n,secondaryText:e,graphic:t,metaIcon:a,meta:f,children:I,...p},m)=>{const g=n&&e!==void 0?h.jsx(G,{children:n}):n,C=e!==void 0?h.jsx(H,{children:e}):null;return h.jsxs(D,{...p,ref:m,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),t!==void 0&&h.jsx(X,{icon:t}),C!==null?h.jsxs(K,{children:[g,C]}):g,(!!f\|\|!!a)&&h.jsx(B,{icon:a,children:f}),I]})});exports.CollapsibleList=w;exports.List=W;exports.ListDivider=J;exports.ListGroup=z;exports.ListGroupSubheader=Y;exports.ListItem=D;exports.ListItemGraphic=X;exports.ListItemMeta=B;exports.ListItemPrimaryText=G;exports.ListItemSecondaryText=H;exports.ListItemText=K;exports.SimpleListItem=Q;

package.json

		{
		"name": "@rmwc/list",
		"version": "14.0.7",
		"version": "14.0.8",
		"description": "RMWC List component",
		@@ -48,8 +48,8 @@ "main": "./index.js",
		"@material/list": "^14.0.0",
		"@rmwc/base": "14.0.7",
		"@rmwc/icon": "14.0.7",
		"@rmwc/provider": "14.0.7",
		"@rmwc/ripple": "14.0.7",
		"@rmwc/types": "14.0.7"
		"@rmwc/base": "14.0.8",
		"@rmwc/icon": "14.0.8",
		"@rmwc/provider": "14.0.8",
		"@rmwc/ripple": "14.0.8",
		"@rmwc/types": "14.0.8"
		}
		}

styles.js

		@@ -1,1 +0,1 @@
		"use strict";var e=require("./styles.css");require("@material/list/dist/mdc.list.css");require("@rmwc/icon/styles");require("@rmwc/ripple/styles");require("./collapsible-list.js");
		"use strict";var r=require("./styles.css");require("@material/list/dist/mdc.list.css");require("@rmwc/icon/styles");require("@rmwc/ripple/styles");;/* empty css */

collapsible-list.mjs

Sorry, the diff of this file is not supported yet

index.mjs

Sorry, the diff of this file is not supported yet

styles.mjs

Sorry, the diff of this file is not supported yet

		@@ -1,4 +0,4 @@
		"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),u=require("react"),c=require("@rmwc/base"),l=require("@material/list"),M=require("@rmwc/ripple"),R=require("@rmwc/icon");function B(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const V=B(u),v=n=>{if(!n)return!1;const e=n.getAttribute("tabindex");return e&&Number(e)>=0?(n.focus(),!0):!1},k=(n,e)=>{if(!n)return null;const t=e?n.previousElementSibling:n.nextElementSibling;return t===null?k(n.parentElement,e):t};class j extends u.Component{constructor(e){super(e),this.childContainer=null,this.root=null,this.rafId=null,this.timerId=null,this.state={open:!!this.props.defaultOpen\|\|!!this.props.open,childrenStyle:{}},this.handleClick=this.handleClick.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this)}static getDerivedStateFromProps(e,t){return e.open!==void 0&&e.open!==t.open?{...t,open:e.open}:t}componentDidMount(){this.syncOpenState()}componentDidUpdate(e,t){t.open!==this.state.open&&this.syncOpenState()}componentWillUnmount(){this.rafId&&window.cancelAnimationFrame(this.rafId),this.timerId&&window.clearTimeout(this.timerId)}syncOpenState(){const{onOpen:e,onClose:t}=this.props,a={maxHeight:this.childContainer?`${this.childContainer.offsetHeight}px`:"0px"};this.setState({childrenStyle:a},()=>{this.state.open?(e&&e(),this.timerId=window.setTimeout(()=>{this.state.open&&this.setState({childrenStyle:{maxHeight:"none"}})},300)):(t&&t(),this.rafId=window.requestAnimationFrame(()=>{this.setState({childrenStyle:{}})}))})}correctFocus(e){this.rafId=window.requestAnimationFrame(()=>{if(!this.state.open&&this.root&&this.root.contains(document.activeElement)){const t=k(this.root,e);if(v(t))return;if(t){const a=t.querySelectorAll("[tabindex]");for(let f=0;f<a.length&&!v(a[f]);f++);}}})}toggleOpen(e){this.setState({open:e})}handleClick(e){const{handle:t}=this.props;t.props.onClick&&t.props.onClick(e),this.toggleOpen(!this.state.open)}handleKeydown(e){const{handle:t}=this.props;switch(t.props.onKeyDown&&t.props.onKeyDown(e),e.key){case"Enter":this.toggleOpen(!this.state.open);return;case"ArrowRight":this.toggleOpen(!0);return;case"ArrowUp":case"ArrowDown":case"Tab":const a=e.shiftKey\|\|e.key==="ArrowUp";this.correctFocus(a);return;case"ArrowLeft":this.toggleOpen(!1);return}}handleFocus(e){if(!this.state.open&&this.root&&this.childContainer&&this.childContainer.contains(document.activeElement)){const t=this.root.querySelector(".rmwc-collapsible-list__handle .mdc-deprecated-list-item");t&&t.focus()}}render(){const{children:e,handle:t,onOpen:a,onClose:f,open:I,defaultOpen:p,className:m,...g}=this.props,{open:C,childrenStyle:L}=this.state;return h.jsxs(c.Tag,{...g,onFocus:this.handleFocus,ref:S=>this.root=S,className:c.classNames("rmwc-collapsible-list",m,{"rmwc-collapsible-list--open":C}),children:[h.jsx("div",{className:"rmwc-collapsible-list__handle",children:u.cloneElement(t,{...t.props,onClick:this.handleClick,onKeyDown:this.handleKeydown})}),h.jsx("div",{className:"rmwc-collapsible-list__children",style:L,children:h.jsx("div",{className:"rmwc-collapsible-list__children-inner",ref:S=>this.childContainer=S,children:e})})]})}}j.displayName="CollapsibleList";const $=n=>{const e=u.useCallback(i=>i?[].slice.call(i.querySelectorAll(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]}`)):[],[]),t=i=>{const o=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS]}`);if(o)return(o==null?void 0:o.textContent)??"";const s=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_TEXT_CLASS]}`);return s&&s.textContent\|\|""},[a,f]=u.useState({}),[I,p]=u.useState(void 0),{foundation:m,...g}=c.useFoundation({props:n,api:({rootEl:i,foundation:o})=>{const s=o.adapter;return{listElements:()=>e(i.ref),focusRoot:()=>i==null?void 0:i.ref.focus(),getClasses:()=>l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS],addClassToElementIndex:s.addClassForElementIndex,removeClassFromElementAtIndex:s.removeClassForElementIndex,setAttributeForElementIndex:s.setAttributeForElementIndex,getListItemCount:s.getListItemCount,focusItemAtIndex:s.focusItemAtIndex,selectedIndex:l.MDCListFoundation.numbers.UNSET_INDEX,setSelectedIndex:d=>o.setSelectedIndex(d)}},elements:{rootEl:!0},foundation:({rootEl:i,emit:o})=>new l.MDCListFoundation({getListItemCount:()=>e(i.ref).length,getFocusedElementIndex:()=>e(i.ref).indexOf(document.activeElement),getAttributeForElementIndex:(s,d)=>e(i.ref)[s].getAttribute(d),listItemAtIndexHasClass:(s,d)=>{const r=e(i.ref)[s];return!!(r!=null&&r.classList.contains(l.deprecatedClassNameMap[d]))},setAttributeForElementIndex:(s,d,r)=>{d==="tabindex"&&(d="tabIndex");const b=e(i.ref)[s];b&&b.setAttribute(d,String(r))},addClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?r:r[s]&&r[s].indexOf(d)===-1?{...r,[s]:[...r[s],d]}:{...r,[s]:[d]})},removeClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?{...r,[s]:r[s].filter(b=>b!==d)}:r)},focusItemAtIndex:s=>{const d=e(i.ref)[s];d&&d.focus()},setTabIndexForListItemChildren:(s,d)=>{const r=e(i.ref)[s];[].slice.call(r.querySelectorAll(l.MDCListFoundation.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(A=>A.setAttribute("tabindex",String(d)))},hasCheckboxAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),hasRadioAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR),isCheckboxCheckedAtIndex:s=>{const r=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR);return r?r.checked:!1},setCheckedCheckboxOrRadioAtIndex:(s,d)=>{const b=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);if(b){b.checked=d;const A=document.createEvent("Event");A.initEvent("change",!0,!0),b.dispatchEvent(A)}},notifyAction:s=>o("onAction",{index:s}),notifySelectionChange:s=>o(l.strings.SELECTION_CHANGE_EVENT,{changedIndices:s},!0),isFocusInsideList:()=>{var s;return!!((s=i.ref)!=null&&s.contains(document.activeElement))},isRootFocused:()=>document.activeElement===i.ref,getPrimaryTextAtIndex:s=>t(e(i.ref)[s])})}),{rootEl:C}=g,L=u.useCallback(i=>{let o=i.target,s=-1;for(;o&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.ROOT]);)o=o.parentElement;return o&&o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&(s=e(C.ref).indexOf(o)),s},[e,C.ref]),{onClick:S}=n,O=u.useCallback(i=>{S==null\|\|S(i);const o=L(i),s=!c.matches(i.target,l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);m.handleClick(o,s)},[L,m,S]),{onKeyDown:E}=n,F=u.useCallback(i=>{E==null\|\|E(i);const o=L(i);o>=0&&m.handleKeydown(i,i.target instanceof Element&&i.target.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]),o)},[L,m,E]),{onFocus:x}=n,_=u.useCallback(i=>{x==null\|\|x(i),m.handleFocusIn(L(i))},[L,m,x]),{onBlur:y}=n,T=u.useCallback(i=>{y==null\|\|y(i),m.handleFocusOut(L(i))},[L,m,y]);C.setProp("onClick",O,!0),C.setProp("onKeyDown",F,!0),C.setProp("onFocus",_,!0),C.setProp("onBlur",T,!0);const N=u.useCallback(()=>{if(n.role)return p(n.role);if(!C.ref)return;const i=!!n.selectedIndex\|\|!!C.ref.querySelector(`
		"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),u=require("react"),c=require("@rmwc/base"),l=require("@material/list"),M=require("@rmwc/ripple"),j=require("@rmwc/icon");function V(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const $=V(u),k=n=>{if(!n)return!1;const e=n.getAttribute("tabindex");return e&&Number(e)>=0?(n.focus(),!0):!1},q=(n,e)=>{if(!n)return null;const t=e?n.previousElementSibling:n.nextElementSibling;return t===null?q(n.parentElement,e):t},v=class v extends u.Component{constructor(e){super(e),this.childContainer=null,this.root=null,this.rafId=null,this.timerId=null,this.state={open:!!this.props.defaultOpen\|\|!!this.props.open,childrenStyle:{}},this.handleClick=this.handleClick.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this)}static getDerivedStateFromProps(e,t){return e.open!==void 0&&e.open!==t.open?{...t,open:e.open}:t}componentDidMount(){this.syncOpenState()}componentDidUpdate(e,t){t.open!==this.state.open&&this.syncOpenState()}componentWillUnmount(){this.rafId&&window.cancelAnimationFrame(this.rafId),this.timerId&&window.clearTimeout(this.timerId)}syncOpenState(){const{onOpen:e,onClose:t}=this.props,a={maxHeight:this.childContainer?`${this.childContainer.offsetHeight}px`:"0px"};this.setState({childrenStyle:a},()=>{this.state.open?(e&&e(),this.timerId=window.setTimeout(()=>{this.state.open&&this.setState({childrenStyle:{maxHeight:"none"}})},300)):(t&&t(),this.rafId=window.requestAnimationFrame(()=>{this.setState({childrenStyle:{}})}))})}correctFocus(e){this.rafId=window.requestAnimationFrame(()=>{if(!this.state.open&&this.root&&this.root.contains(document.activeElement)){const t=q(this.root,e);if(k(t))return;if(t){const a=t.querySelectorAll("[tabindex]");for(let f=0;f<a.length&&!k(a[f]);f++);}}})}toggleOpen(e){this.setState({open:e})}handleClick(e){const{handle:t}=this.props;t.props.onClick&&t.props.onClick(e),this.toggleOpen(!this.state.open)}handleKeydown(e){const{handle:t}=this.props;switch(t.props.onKeyDown&&t.props.onKeyDown(e),e.key){case"Enter":this.toggleOpen(!this.state.open);return;case"ArrowRight":this.toggleOpen(!0);return;case"ArrowUp":case"ArrowDown":case"Tab":const a=e.shiftKey\|\|e.key==="ArrowUp";this.correctFocus(a);return;case"ArrowLeft":this.toggleOpen(!1);return}}handleFocus(e){if(!this.state.open&&this.root&&this.childContainer&&this.childContainer.contains(document.activeElement)){const t=this.root.querySelector(".rmwc-collapsible-list__handle .mdc-deprecated-list-item");t&&t.focus()}}render(){const{children:e,handle:t,onOpen:a,onClose:f,open:I,defaultOpen:p,className:m,...g}=this.props,{open:C,childrenStyle:L}=this.state;return h.jsxs(c.Tag,{...g,onFocus:this.handleFocus,ref:S=>this.root=S,className:c.classNames("rmwc-collapsible-list",m,{"rmwc-collapsible-list--open":C}),children:[h.jsx("div",{className:"rmwc-collapsible-list__handle",children:u.cloneElement(t,{...t.props,onClick:this.handleClick,onKeyDown:this.handleKeydown})}),h.jsx("div",{className:"rmwc-collapsible-list__children",style:L,children:h.jsx("div",{className:"rmwc-collapsible-list__children-inner",ref:S=>this.childContainer=S,children:e})})]})}};v.displayName="CollapsibleList";let w=v;const U=n=>{const e=u.useCallback(i=>i?[].slice.call(i.querySelectorAll(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]}`)):[],[]),t=i=>{const o=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS]}`);if(o)return(o==null?void 0:o.textContent)??"";const s=i.querySelector(`.${l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_TEXT_CLASS]}`);return s&&s.textContent\|\|""},[a,f]=u.useState({}),[I,p]=u.useState(void 0),{foundation:m,...g}=c.useFoundation({props:n,api:({rootEl:i,foundation:o})=>{const s=o.adapter;return{listElements:()=>e(i.ref),focusRoot:()=>i==null?void 0:i.ref.focus(),getClasses:()=>l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS],addClassToElementIndex:s.addClassForElementIndex,removeClassFromElementAtIndex:s.removeClassForElementIndex,setAttributeForElementIndex:s.setAttributeForElementIndex,getListItemCount:s.getListItemCount,focusItemAtIndex:s.focusItemAtIndex,selectedIndex:l.MDCListFoundation.numbers.UNSET_INDEX,setSelectedIndex:d=>o.setSelectedIndex(d)}},elements:{rootEl:!0},foundation:({rootEl:i,emit:o})=>new l.MDCListFoundation({getListItemCount:()=>e(i.ref).length,getFocusedElementIndex:()=>e(i.ref).indexOf(document.activeElement),getAttributeForElementIndex:(s,d)=>e(i.ref)[s].getAttribute(d),listItemAtIndexHasClass:(s,d)=>{const r=e(i.ref)[s];return!!(r!=null&&r.classList.contains(l.deprecatedClassNameMap[d]))},setAttributeForElementIndex:(s,d,r)=>{d==="tabindex"&&(d="tabIndex");const b=e(i.ref)[s];b&&b.setAttribute(d,String(r))},addClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?r:r[s]&&r[s].indexOf(d)===-1?{...r,[s]:[...r[s],d]}:{...r,[s]:[d]})},removeClassForElementIndex:(s,d)=>{f(r=>r[s]&&r[s].indexOf(d)>-1?{...r,[s]:r[s].filter(b=>b!==d)}:r)},focusItemAtIndex:s=>{const d=e(i.ref)[s];d&&d.focus()},setTabIndexForListItemChildren:(s,d)=>{const r=e(i.ref)[s];[].slice.call(r.querySelectorAll(l.MDCListFoundation.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX)).forEach(A=>A.setAttribute("tabindex",String(d)))},hasCheckboxAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),hasRadioAtIndex:s=>!!e(i.ref)[s].querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR),isCheckboxCheckedAtIndex:s=>{const r=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR);return r?r.checked:!1},setCheckedCheckboxOrRadioAtIndex:(s,d)=>{const b=e(i.ref)[s].querySelector(l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);if(b){b.checked=d;const A=document.createEvent("Event");A.initEvent("change",!0,!0),b.dispatchEvent(A)}},notifyAction:s=>o("onAction",{index:s}),notifySelectionChange:s=>o(l.strings.SELECTION_CHANGE_EVENT,{changedIndices:s},!0),isFocusInsideList:()=>{var s;return!!((s=i.ref)!=null&&s.contains(document.activeElement))},isRootFocused:()=>document.activeElement===i.ref,getPrimaryTextAtIndex:s=>t(e(i.ref)[s])})}),{rootEl:C}=g,L=u.useCallback(i=>{let o=i.target,s=-1;for(;o&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&!o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.ROOT]);)o=o.parentElement;return o&&o.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS])&&(s=e(C.ref).indexOf(o)),s},[e,C.ref]),{onClick:S}=n,O=u.useCallback(i=>{S==null\|\|S(i);const o=L(i),s=!c.matches(i.target,l.MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR);m.handleClick(o,s)},[L,m,S]),{onKeyDown:E}=n,F=u.useCallback(i=>{E==null\|\|E(i);const o=L(i);o>=0&&m.handleKeydown(i,i.target instanceof Element&&i.target.classList.contains(l.deprecatedClassNameMap[l.MDCListFoundation.cssClasses.LIST_ITEM_CLASS]),o)},[L,m,E]),{onFocus:x}=n,_=u.useCallback(i=>{x==null\|\|x(i),m.handleFocusIn(L(i))},[L,m,x]),{onBlur:y}=n,T=u.useCallback(i=>{y==null\|\|y(i),m.handleFocusOut(L(i))},[L,m,y]);C.setProp("onClick",O,!0),C.setProp("onKeyDown",F,!0),C.setProp("onFocus",_,!0),C.setProp("onBlur",T,!0);const N=u.useCallback(()=>{if(n.role)return p(n.role);if(!C.ref)return;const i=!!n.selectedIndex\|\|!!C.ref.querySelector(`
		.${l.MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS},
		.${l.MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS}
		`),o=!!C.ref.querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),s=!!C.ref.querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR);if(o)return p("group");if(s)return p("radiogroup");if(i)return p("listbox")},[n.role,n.selectedIndex,C.ref]);return u.useEffect(()=>{m.layout(),N()},[m,N]),u.useEffect(()=>{m.setWrapFocus(n.wrapFocus\|\|n.wrapFocus===void 0)},[m,n.wrapFocus]),u.useEffect(()=>{m.setVerticalOrientation(n.vertical\|\|n.vertical===void 0)},[m,n.vertical]),u.useEffect(()=>{n.selectedIndex!==void 0&&m.setSelectedIndex(n.selectedIndex)},[m,n.selectedIndex]),u.useEffect(()=>{I&&m.setSingleSelection(I==="listbox")},[m,I]),{...g,listItemClasses:a,setEnabled:(i,o)=>{m.setEnabled(i,o)},role:I}},q=V.createContext({getClassName:n=>[],setEnabled:(n,e)=>{}}),U=c.createComponent(function(e,t){const{dense:a,twoLine:f,avatarList:I,apiRef:p,nonInteractive:m,onAction:g,foundationRef:C,wrapFocus:L,vertical:S,selectedIndex:O,children:E,...F}=e,{rootEl:x,listItemClasses:_,setEnabled:y,role:T}=$(e),N=()=>T==="group"?{role:"checkbox"}:T==="radiogroup"?{role:"radio"}:T==="listbox"?{role:"option"}:{},D={getClassName:r=>_[r]\|\|[],setEnabled:y},i=c.useClassNames(e,["mdc-deprecated-list",{"mdc-deprecated-list--dense":a,"mdc-deprecated-list--two-line":f,"mdc-deprecated-list--avatar-list":I,"mdc-deprecated-list--non-interactive":m}]),o=()=>["group","radiogroup","listbox"].some(r=>r===T),s=r=>c.getDisplayName(r)==="ListItem",d=r=>s(r)?u.cloneElement(r,{...N(),...u.isValidElement(r)?r.props:{}}):r;return h.jsx(q.Provider,{value:D,children:h.jsx(c.Tag,{tag:"ul",...F,element:x,role:T,className:i,ref:t,children:o()?u.Children.map(E,d):E})})}),w=M.withRipple({surface:!1})(c.createComponent(function(e,t){const a=u.createRef(),f=t?c.mergeRefs(t,a):a,I=u.useContext(q),[p,m]=u.useState(-1),g=u.useCallback(()=>{const x=C(a.current);return x?x.indexOf(a.current):-1},[a]),C=x=>{var _;return x?[].slice.call((_=x.parentNode)==null?void 0:_.querySelectorAll(".mdc-deprecated-list-item")):[]};u.useEffect(()=>{a.current&&p===-1&&m(g())},[a,p,g]),u.useEffect(()=>{p>-1&&e.disabled!==void 0&&I.setEnabled(p,!e.disabled)},[p,e.disabled,I]);const{selected:L,activated:S,disabled:O,...E}=e,F=c.useClassNames(e,["mdc-deprecated-list-item",{"mdc-deprecated-list-item--selected":e.selected,"mdc-deprecated-list-item--activated":e.activated,"mdc-deprecated-list-item--disabled":e.disabled}]);return h.jsxs(c.Tag,{tag:"li",tabIndex:0,...E,className:F,ref:f,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),E.children]})}));w.displayName="ListItem";const P=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),K=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__primary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),G=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__secondary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),H=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__graphic"]);return h.jsx(R.Icon,{...e,"aria-hidden":"true",ref:t,className:a})}),X=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__meta"]);if(e.icon)return h.jsx(R.Icon,{...e,"aria-hidden":"true",ref:t,className:a});if(u.isValidElement(e.children)){const{children:f,...I}=e;return u.cloneElement(e.children,{...I,...e.children.props,className:c.classNames(a,e.children.props.className)})}return h.jsx(c.Tag,{...e,ref:t,className:a})}),W=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),z=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group__subheader"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),Y=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-divider"]);return h.jsx(c.Tag,{tag:"li",role:"separator",...e,ref:t,className:a})}),J=c.createComponent(({text:n,secondaryText:e,graphic:t,metaIcon:a,meta:f,children:I,...p},m)=>{const g=n&&e!==void 0?h.jsx(K,{children:n}):n,C=e!==void 0?h.jsx(G,{children:e}):null;return h.jsxs(w,{...p,ref:m,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),t!==void 0&&h.jsx(H,{icon:t}),C!==null?h.jsxs(P,{children:[g,C]}):g,(!!f\|\|!!a)&&h.jsx(X,{icon:a,children:f}),I]})});exports.CollapsibleList=j;exports.List=U;exports.ListDivider=Y;exports.ListGroup=W;exports.ListGroupSubheader=z;exports.ListItem=w;exports.ListItemGraphic=H;exports.ListItemMeta=X;exports.ListItemPrimaryText=K;exports.ListItemSecondaryText=G;exports.ListItemText=P;exports.SimpleListItem=J;
		`),o=!!C.ref.querySelector(l.MDCListFoundation.strings.CHECKBOX_SELECTOR),s=!!C.ref.querySelector(l.MDCListFoundation.strings.RADIO_SELECTOR);if(o)return p("group");if(s)return p("radiogroup");if(i)return p("listbox")},[n.role,n.selectedIndex,C.ref]);return u.useEffect(()=>{m.layout(),N()},[m,N]),u.useEffect(()=>{m.setWrapFocus(n.wrapFocus\|\|n.wrapFocus===void 0)},[m,n.wrapFocus]),u.useEffect(()=>{m.setVerticalOrientation(n.vertical\|\|n.vertical===void 0)},[m,n.vertical]),u.useEffect(()=>{n.selectedIndex!==void 0&&m.setSelectedIndex(n.selectedIndex)},[m,n.selectedIndex]),u.useEffect(()=>{I&&m.setSingleSelection(I==="listbox")},[m,I]),{...g,listItemClasses:a,setEnabled:(i,o)=>{m.setEnabled(i,o)},role:I}},P=$.createContext({getClassName:n=>[],setEnabled:(n,e)=>{}}),W=c.createComponent(function(e,t){const{dense:a,twoLine:f,avatarList:I,apiRef:p,nonInteractive:m,onAction:g,foundationRef:C,wrapFocus:L,vertical:S,selectedIndex:O,children:E,...F}=e,{rootEl:x,listItemClasses:_,setEnabled:y,role:T}=U(e),N=()=>T==="group"?{role:"checkbox"}:T==="radiogroup"?{role:"radio"}:T==="listbox"?{role:"option"}:{},R={getClassName:r=>_[r]\|\|[],setEnabled:y},i=c.useClassNames(e,["mdc-deprecated-list",{"mdc-deprecated-list--dense":a,"mdc-deprecated-list--two-line":f,"mdc-deprecated-list--avatar-list":I,"mdc-deprecated-list--non-interactive":m}]),o=()=>["group","radiogroup","listbox"].some(r=>r===T),s=r=>c.getDisplayName(r)==="ListItem",d=r=>s(r)?u.cloneElement(r,{...N(),...u.isValidElement(r)?r.props:{}}):r;return h.jsx(P.Provider,{value:R,children:h.jsx(c.Tag,{tag:"ul",...F,element:x,role:T,className:i,ref:t,children:o()?u.Children.map(E,d):E})})}),D=M.withRipple({surface:!1})(c.createComponent(function(e,t){const a=u.createRef(),f=t?c.mergeRefs(t,a):a,I=u.useContext(P),[p,m]=u.useState(-1),g=u.useCallback(()=>{const x=C(a.current);return x?x.indexOf(a.current):-1},[a]),C=x=>{var _;return x?[].slice.call((_=x.parentNode)==null?void 0:_.querySelectorAll(".mdc-deprecated-list-item")):[]};u.useEffect(()=>{a.current&&p===-1&&m(g())},[a,p,g]),u.useEffect(()=>{p>-1&&e.disabled!==void 0&&I.setEnabled(p,!e.disabled)},[p,e.disabled,I]);const{selected:L,activated:S,disabled:O,...E}=e,F=c.useClassNames(e,["mdc-deprecated-list-item",{"mdc-deprecated-list-item--selected":e.selected,"mdc-deprecated-list-item--activated":e.activated,"mdc-deprecated-list-item--disabled":e.disabled}]);return h.jsxs(c.Tag,{tag:"li",tabIndex:0,...E,className:F,ref:f,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),E.children]})}));D.displayName="ListItem";const K=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),G=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__primary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),H=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__secondary-text"]);return h.jsx(c.Tag,{tag:"span",...e,ref:t,className:a})}),X=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__graphic"]);return h.jsx(j.Icon,{...e,"aria-hidden":"true",ref:t,className:a})}),B=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-item__meta"]);if(e.icon)return h.jsx(j.Icon,{...e,"aria-hidden":"true",ref:t,className:a});if(u.isValidElement(e.children)){const{children:f,...I}=e;return u.cloneElement(e.children,{...I,...e.children.props,className:c.classNames(a,e.children.props.className)})}return h.jsx(c.Tag,{...e,ref:t,className:a})}),z=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),Y=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-group__subheader"]);return h.jsx(c.Tag,{...e,ref:t,className:a})}),J=c.createComponent(function(e,t){const a=c.useClassNames(e,["mdc-deprecated-list-divider"]);return h.jsx(c.Tag,{tag:"li",role:"separator",...e,ref:t,className:a})}),Q=c.createComponent(({text:n,secondaryText:e,graphic:t,metaIcon:a,meta:f,children:I,...p},m)=>{const g=n&&e!==void 0?h.jsx(G,{children:n}):n,C=e!==void 0?h.jsx(H,{children:e}):null;return h.jsxs(D,{...p,ref:m,children:[h.jsx(M.RippleSurface,{className:"mdc-deprecated-list-item__ripple"}),t!==void 0&&h.jsx(X,{icon:t}),C!==null?h.jsxs(K,{children:[g,C]}):g,(!!f\|\|!!a)&&h.jsx(B,{icon:a,children:f}),I]})});exports.CollapsibleList=w;exports.List=W;exports.ListDivider=J;exports.ListGroup=z;exports.ListGroupSubheader=Y;exports.ListItem=D;exports.ListItemGraphic=X;exports.ListItemMeta=B;exports.ListItemPrimaryText=G;exports.ListItemSecondaryText=H;exports.ListItemText=K;exports.SimpleListItem=Q;

@rmwc/list - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes