@progress/kendo-react-layout/actionsheet/ActionSheet.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),Y=require("react-dom"),r=require("prop-types"),Z=require("@progress/kendo-react-animation"),N=require("@progress/kendo-react-common"),K=require("./ActionSheetItem.js"),F=require("./ActionSheetHeader.js"),p=require("./ActionSheetFooter.js"),ee=require("./ActionSheetContent.js"),H=require("./ActionSheetView.js");function V(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const m in e)if(m!=="default"){const f=Object.getOwnPropertyDescriptor(e,m);Object.defineProperty(d,m,f.get?f:{enumerable:!0,get:()=>e[m]})}}return d.default=e,Object.freeze(d)}const n=V(X),te=V(Y),R=n.forwardRef((e,d)=>{var _,M;const{navigatableElements:m=g.navigatableElements,navigatable:f=g.navigatable,position:L=g.position,animationDuration:l=300,prefixActions:D,suffixActions:w,filter:x}=e,$=(t,a,i)=>{i.preventDefault(),i.shiftKey?a.focusPrevious(t):a.focusNext(t)},B=(t,a,i)=>{if(t.ariaDisabled)return;const c=t.className&&t.className.indexOf?t.className.indexOf("k-actionsheet-item")!==-1:!1,A=a.elements.filter(b=>b.className.indexOf("k-actionsheet-item")!==-1);if(c&&e.onItemSelect){i.preventDefault();const b=e.items[A.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:i,item:b,title:b&&b.title})}e.animation||h()},U=(t,a,i)=>{e.onClose&&(i.preventDefault(),e.onClose.call(void 0,i)),e.animation||h()},h=()=>{y({show:!1})},z=t=>{f&&v.current.triggerKeyboardEvent(t)},G=t=>{e.onClose&&e.onClose.call(void 0,t),e.animation||h()},O=t=>{e.onItemSelect&&e.onItemSelect.call(void 0,t),e.animation||h()},J=t=>{const a={},i=[];return n.Children.forEach(t,c=>{c&&(c.type.displayName===H.ActionSheetViewDisplayName?i.push(c):a[c.type.displayName]=c)}),i.length>0?i:a},T=n.useRef(null),E=n.useRef(null);n.useImperativeHandle(T,()=>({props:e,element:E.current})),n.useImperativeHandle(d,()=>T.current);const v=n.useRef(void 0),k=n.useRef({bottom:"0",width:"100%"}),C=n.useRef(void 0),[o,Q]=n.useState({show:!1,slide:!1}),y=t=>{Q(a=>({...a,...t}))};n.useEffect(()=>{e.expand&&!o.show&&y({show:!0})},[]),n.useEffect(()=>{const t=E.current;if(e.expand&&!o.show&&y({show:!0}),e.expand&&o.show&&!o.slide&&y({slide:!0}),!e.expand&&o.show&&o.slide&&y({slide:!1}),C!==o&&o.slide&&t&&!e.className&&(t.style.setProperty("--kendo-actionsheet-height","auto"),t.style.setProperty("--kendo-actionsheet-max-height","none")),t&&f){const i=[".k-actionsheet-item",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-view",".k-actionsheet-titlebar"].map(c=>N.FOCUSABLE_ELEMENTS.concat(m).map(A=>`${c} ${A}`)).flat()];v.current=new N.Navigation({tabIndex:e.tabIndex||0,root:E,rovingTabIndex:!1,selectors:i,keyboardEvents:{keydown:{Tab:$,Enter:B,Escape:U}}}),v.current.focusElement(v.current.first,null)}C.current={...o}});const I="k-actionsheet-title",P=I,s=(_=e.items)==null?void 0:_.filter(t=>!t.group||t.group==="top"),S=(M=e.items)==null?void 0:M.filter(t=>t.group==="bottom"),W=s&&s.length>0&&S&&S.length>0,u=J(e.children),q=o.slide&&n.createElement("div",{className:N.classNames(`k-actionsheet k-actionsheet-${L}`,e.className),role:"dialog","aria-modal":"true",style:e.style,"aria-labelledby":P,ref:E,onKeyDown:z},Array.isArray(u)?n.createElement(n.Fragment,null,u.map(t=>t)):n.createElement(H.ActionSheetView,null,u[F.headerDisplayName]&&!e.title&&!e.subTitle&&u[F.headerDisplayName],(e.title||e.subTitle||D||w||x)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group"},D&&n.createElement("div",{className:"k-actionsheet-actions"},D),n.createElement("div",{className:I,id:P},n.createElement("div",{className:"k-text-center"},e.title),e.subTitle&&n.createElement("div",{className:"k-actionsheet-subtitle k-text-center"},e.subTitle)),w&&n.createElement("div",{className:"k-actionsheet-actions"},w)),x&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},x)),u[ee.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul"},s&&s.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a,key:a,item:t,onClick:O})),W&&n.createElement("hr",{className:"k-hr"}),S&&S.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a+((s==null?void 0:s.length)||0),key:a,item:t,onClick:O})))),u[p.footerDisplayName])),j=n.createElement(n.Fragment,null,e.expand||o.show?n.createElement("div",{className:"k-actionsheet-container"},n.createElement("div",{className:"k-overlay",onClick:G}),e.animation?n.createElement(Z.Animation,{transitionName:o.slide?"slide-up":"slide-down",onExited:h,transitionEnterDuration:typeof l=="object"&&Object.keys(l).length>0&&l.openDuration?Number(l.openDuration):Number(l),transitionExitDuration:typeof l=="object"&&Object.keys(l).length>0&&l.closeDuration?Number(l.closeDuration):Number(l),animationEnteringStyle:e.animationStyles||k.current,animationEnteredStyle:e.animationStyles||k.current,animationExitingStyle:e.animationStyles||k.current,exit:!0,enter:!0,appear:!1},q):n.createElement("div",{className:"k-animation-container k-animation-container-shown"},n.createElement("div",{className:"k-child-animation-container",style:e.animationStyles||k.current},q))):null);return e.appendTo&&N.canUseDOM?te.createPortal(j,e.appendTo):j}),g={navigatable:!0,navigatableElements:[],position:"bottom"};R.propTypes={items:r.array,subTitle:r.node,title:r.node,navigatable:r.bool,navigatableElements:r.array,position:r.oneOf(["top","bottom","left","right","fullscreen"]),appendTo:r.any};R.displayName="KendoReactActionSheet";exports.ActionSheet=R;exports.actionSheetDefaultProps=g;