@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 © 2025 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 Q=require("react"),r=require("prop-types"),V=require("@progress/kendo-react-animation"),N=require("@progress/kendo-react-common"),j=require("./ActionSheetItem.js"),K=require("./ActionSheetHeader.js"),W=require("./ActionSheetFooter.js"),X=require("./ActionSheetContent.js");function Y(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(m,s,d.get?d:{enumerable:!0,get:()=>e[s]})}}return m.default=e,Object.freeze(m)}const n=Y(Q),x=n.forwardRef((e,m)=>{var q,_;const{navigatableElements:s=v.navigatableElements,navigatable:d=v.navigatable,position:H=v.position,actions:C,filter:I}=e,F=(t,i,a)=>{a.preventDefault(),a.shiftKey?i.focusPrevious(t):i.focusNext(t)},L=(t,i,a)=>{if(t.ariaDisabled)return;const E=t.className&&t.className.indexOf?t.className.indexOf("k-actionsheet-item")!==-1:!1,y=i.elements.filter(o=>o.className.indexOf("k-actionsheet-item")!==-1);if(E&&e.onItemClick){a.preventDefault();const o=e.items[y.indexOf(t)];e.onItemClick.call(void 0,{syntheticEvent:a,item:o,title:o&&o.title})}if(E&&e.onItemSelect){a.preventDefault();const o=e.items[y.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:a,item:o,title:o&&o.title})}e.animation||u()},M=(t,i,a)=>{e.onOverlayClick&&(a.preventDefault(),e.onOverlayClick.call(void 0,a)),e.onClose&&(a.preventDefault(),e.onClose.call(void 0,a)),e.animation||u()},u=()=>{f({show:!1})},$=t=>{d&&h.current.triggerKeyboardEvent(t)},B=t=>{e.onOverlayClick&&e.onOverlayClick.call(void 0,t),e.onClose&&e.onClose.call(void 0,t),e.animation||u()},D=t=>{e.onItemClick&&e.onItemClick.call(void 0,t),e.onItemSelect&&e.onItemSelect.call(void 0,t),e.animation||u()},z=t=>{const i={};return n.Children.forEach(t,a=>{a&&(i[a.type.displayName]=a)}),i},R=n.useRef(null),S=n.useRef(null);n.useImperativeHandle(R,()=>({props:e})),n.useImperativeHandle(m,()=>R.current);const h=n.useRef(),U=n.useRef(e.animationDuration||300),g=n.useRef({bottom:"0",width:"100%"}),O=n.useRef(),[l,G]=n.useState({show:!1,slide:!1}),f=t=>{G(i=>({...i,...t}))};n.useEffect(()=>{e.expand&&!l.show&&f({show:!0})},[]),n.useEffect(()=>{const t=S.current;if(e.expand&&!l.show&&f({show:!0}),e.expand&&l.show&&!l.slide&&f({slide:!0}),!e.expand&&l.show&&l.slide&&f({slide:!1}),O!==l&&l.slide&&t&&!e.className&&(t.style.setProperty("--kendo-actionsheet-height","auto"),t.style.setProperty("--kendo-actionsheet-max-height","none")),t&&d){const a=[".k-actionsheet-item",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-titlebar"].map(E=>N.FOCUSABLE_ELEMENTS.concat(s).map(y=>`${E} ${y}`)).flat()];h.current=new N.Navigation({tabIndex:e.tabIndex||0,root:S,rovingTabIndex:!1,selectors:a,keyboardEvents:{keydown:{Tab:F,Enter:L,Escape:M}}}),h.current.focusElement(h.current.first,null)}O.current={...l}});const w="k-actionsheet-title",A=w,c=(q=e.items)==null?void 0:q.filter(t=>!t.group||t.group==="top"),b=(_=e.items)==null?void 0:_.filter(t=>t.group==="bottom"),J=c&&c.length>0&&b&&b.length>0,k=z(e.children),T=e.animationDuration||U.current,P=l.slide&&n.createElement("div",{className:N.classNames(`k-actionsheet k-actionsheet-${H}`,e.className),role:"dialog","aria-modal":"true","aria-hidden":!1,"aria-labelledby":A,ref:S,onKeyDown:$},k[K.headerDisplayName]&&!e.title&&!e.subTitle&&k[K.headerDisplayName],(e.title||e.subTitle)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},n.createElement("div",{className:w,id:A},n.createElement("div",{className:"k-text-center"},e.title),n.createElement("div",{className:"k-actionsheet-subtitle k-text-center"},e.subTitle)),C&&n.createElement("div",{className:"k-actionsheet-actions"},C)),I&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},I)),k[X.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul",role:"group"},c&&c.map((t,i)=>n.createElement(j.ActionSheetItem,{...t,id:i,key:i,item:t,tabIndex:e.tabIndex||0,onClick:D})),J&&n.createElement("hr",{className:"k-hr"}),b&&b.map((t,i)=>n.createElement(j.ActionSheetItem,{...t,id:i+((c==null?void 0:c.length)||0),key:i,item:t,tabIndex:e.tabIndex||0,onClick:D})))),k[W.footerDisplayName]);return n.createElement(n.Fragment,null,e.expand||l.show?n.createElement("div",{className:"k-actionsheet-container"},n.createElement("div",{className:"k-overlay",onClick:B}),e.animation?n.createElement(V.Animation,{transitionName:l.slide?"slide-up":"slide-down",onExited:u,transitionEnterDuration:T,transitionExitDuration:T,animationEnteringStyle:e.animationStyles||g.current,animationEnteredStyle:e.animationStyles||g.current,animationExitingStyle:e.animationStyles||g.current,exit:!0,enter:!0,appear:!1},P):P):null)}),v={navigatable:!0,navigatableElements:[],position:"bottom"};x.propTypes={items:r.array,subTitle:r.string,title:r.string,navigatable:r.bool,navigatableElements:r.array,position:r.oneOf(["top","bottom","left","right","fullscreen"])};x.displayName="KendoReactActionSheet";exports.ActionSheet=x;exports.actionSheetDefaultProps=v;