UNPKG

smart-dropzone-react

Version:

🚀 A production-ready React dropzone component with smart defaults, drag & drop reordering, chunked uploads, resume functionality, and comprehensive provider support (Cloudinary, AWS S3, Supabase)

2 lines • 8.5 kB
'use strict';var chunkBYLIBOAU_cjs=require('./chunk-BYLIBOAU.cjs');var o=class o{constructor(e={}){chunkBYLIBOAU_cjs.a(this,"config");chunkBYLIBOAU_cjs.a(this,"theme");chunkBYLIBOAU_cjs.a(this,"isHighContrast",false);chunkBYLIBOAU_cjs.a(this,"isReducedMotion",false);chunkBYLIBOAU_cjs.a(this,"isLargeText",false);this.config={enableHighContrast:true,enableScreenReader:true,enableKeyboardNavigation:true,enableFocusIndicators:true,enableReducedMotion:true,enableLargeText:true,enableColorBlindSupport:true,...e},this.theme={highContrast:{...o.DEFAULT_HIGH_CONTRAST},reducedMotion:{...o.DEFAULT_REDUCED_MOTION},largeText:{...o.DEFAULT_LARGE_TEXT}},this.initialize();}static getInstance(e){return o.instance||(o.instance=new o(e)),o.instance}initialize(){this.detectUserPreferences(),this.setupEventListeners(),this.applyAccessibilityFeatures();}detectUserPreferences(){this.config.enableHighContrast!==void 0?this.isHighContrast=this.config.enableHighContrast:this.isHighContrast=this.detectHighContrastPreference(),this.config.enableReducedMotion!==void 0?this.isReducedMotion=this.config.enableReducedMotion:this.isReducedMotion=this.detectReducedMotionPreference(),this.config.enableLargeText!==void 0?this.isLargeText=this.config.enableLargeText:this.isLargeText=this.detectLargeTextPreference();}detectHighContrastPreference(){return window.matchMedia?window.matchMedia("(prefers-contrast: high)").matches:false}detectReducedMotionPreference(){return window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false}detectLargeTextPreference(){return window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false}setupEventListeners(){if(window.matchMedia){let e=window.matchMedia("(prefers-contrast: high)"),t=window.matchMedia("(prefers-reduced-motion: reduce)");e.addEventListener("change",i=>{this.isHighContrast=i.matches,this.applyAccessibilityFeatures();}),t.addEventListener("change",i=>{this.isReducedMotion=i.matches,this.applyAccessibilityFeatures();});}this.config.enableKeyboardNavigation&&document.addEventListener("keydown",this.handleKeyboardNavigation.bind(this));}handleKeyboardNavigation(e){if(e.target.closest("[data-dropzone]"))switch(e.key){case "Tab":this.handleTabNavigation(e);break;case "Enter":case " ":this.handleActivation(e);break;case "Escape":this.handleEscape(e);break;case "ArrowUp":case "ArrowDown":this.handleArrowNavigation(e);break}}handleTabNavigation(e){this.config.enableFocusIndicators&&this.showFocusIndicator(e.target);}handleActivation(e){let t=e.target;t.hasAttribute("data-file-item")?this.activateFileItem(t):t.hasAttribute("data-upload-button")?this.activateUploadButton(t):t.hasAttribute("data-clear-button")&&this.activateClearButton(t);}handleEscape(e){let t=e.target.closest("[data-dropzone]");t&&t.focus();}handleArrowNavigation(e){let t=e.target,i=Array.from(t.closest("[data-dropzone]")?.querySelectorAll("[data-file-item]")||[]);if(i.length===0)return;let r=i.findIndex(s=>s===t);if(r===-1)return;let a;e.key==="ArrowDown"?a=(r+1)%i.length:a=r===0?i.length-1:r-1,i[a].focus();}activateFileItem(e){e.click();}activateUploadButton(e){e.click();}activateClearButton(e){e.click();}showFocusIndicator(e){e.style.outline=`2px solid ${this.theme.highContrast.focus}`,e.style.outlineOffset="2px",setTimeout(()=>{e.style.outline="",e.style.outlineOffset="";},3e3);}applyAccessibilityFeatures(){this.applyHighContrast(),this.applyReducedMotion(),this.applyLargeText(),this.applyScreenReaderSupport();}applyHighContrast(){if(!this.isHighContrast)return;let e=document.documentElement,t=this.theme.highContrast;e.style.setProperty("--ac-primary-color",t.primary),e.style.setProperty("--ac-secondary-color",t.secondary),e.style.setProperty("--ac-background-color",t.background),e.style.setProperty("--ac-text-color",t.text),e.style.setProperty("--ac-border-color",t.border),e.style.setProperty("--ac-focus-color",t.focus),e.style.setProperty("--ac-error-color",t.error),e.style.setProperty("--ac-success-color",t.success),e.style.setProperty("--ac-warning-color",t.warning),document.body.classList.add("ac-high-contrast");}applyReducedMotion(){if(!this.isReducedMotion)return;let e=document.documentElement,t=this.theme.reducedMotion;e.style.setProperty("--ac-transition-duration",t.transitionDuration),e.style.setProperty("--ac-animation-duration",t.animationDuration),document.body.classList.add("ac-reduced-motion");}applyLargeText(){if(!this.isLargeText)return;let e=document.documentElement,t=this.theme.largeText;e.style.setProperty("--ac-font-size",t.fontSize),e.style.setProperty("--ac-line-height",t.lineHeight),e.style.setProperty("--ac-spacing",t.spacing),document.body.classList.add("ac-large-text");}applyScreenReaderSupport(){this.config.enableScreenReader&&(this.addAriaLabels(),this.addAriaDescriptions(),this.addAriaLiveRegions());}addAriaLabels(){document.querySelectorAll("[data-dropzone]").forEach((i,r)=>{let a=i;a.setAttribute("aria-label",`File upload area ${r+1}`),a.setAttribute("aria-describedby",`dropzone-description-${r+1}`);}),document.querySelectorAll("[data-file-item]").forEach((i,r)=>{let a=i,s=a.getAttribute("data-file-name")||`File ${r+1}`;a.setAttribute("aria-label",`${s}, click to view details`);});}addAriaDescriptions(){document.querySelectorAll("[data-dropzone]").forEach((t,i)=>{let r=`dropzone-description-${i+1}`,a=document.createElement("div");a.id=r,a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.left="-10000px",a.style.width="1px",a.style.height="1px",a.style.overflow="hidden",a.textContent="Drag and drop files here or click to browse. Supported formats: images, PDFs, and text files.",t.appendChild(a);});}addAriaLiveRegions(){let e=document.createElement("div");e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),e.setAttribute("aria-relevant","additions removals"),e.style.position="absolute",e.style.left="-10000px",e.style.width="1px",e.style.height="1px",e.style.overflow="hidden",document.body.appendChild(e);}updateConfig(e){if("highContrast"in e||"reducedMotion"in e||"largeText"in e||"screenReader"in e){let t=e;this.config={...this.config,enableHighContrast:t.highContrast??this.config.enableHighContrast,enableReducedMotion:t.reducedMotion??this.config.enableReducedMotion,enableLargeText:t.largeText??this.config.enableLargeText,enableScreenReader:t.screenReader??this.config.enableScreenReader},t.highContrast!==void 0&&(this.isHighContrast=t.highContrast),t.reducedMotion!==void 0&&(this.isReducedMotion=t.reducedMotion),t.largeText!==void 0&&(this.isLargeText=t.largeText);}else this.config={...this.config,...e};this.initialize();}getConfig(){return {highContrast:this.isHighContrast,reducedMotion:this.isReducedMotion,largeText:this.isLargeText,screenReader:this.config.enableScreenReader}}generateAriaLabel(e,t){let i=e;return t.maxFiles&&(i+=`, maximum ${t.maxFiles} files`),t.acceptedTypes&&(i+=`, accepted types: ${t.acceptedTypes.join(", ")}`),i}enableHighContrast(){this.isHighContrast=true,this.applyAccessibilityFeatures();}disableHighContrast(){this.isHighContrast=false,this.applyAccessibilityFeatures();}enableReducedMotion(){this.isReducedMotion=true,this.applyAccessibilityFeatures();}disableReducedMotion(){this.isReducedMotion=false,this.applyAccessibilityFeatures();}enableLargeText(){this.isLargeText=true,this.applyAccessibilityFeatures();}disableLargeText(){this.isLargeText=false,this.applyAccessibilityFeatures();}updateTheme(e){this.theme={...this.theme,...e},this.applyAccessibilityFeatures();}getStatus(){return {isHighContrast:this.isHighContrast,isReducedMotion:this.isReducedMotion,isLargeText:this.isLargeText,isScreenReaderEnabled:this.config.enableScreenReader,isKeyboardNavigationEnabled:this.config.enableKeyboardNavigation}}announceToScreenReader(e){if(!this.config.enableScreenReader)return;let t=document.querySelector('[aria-live="polite"]');t&&(t.textContent=e,setTimeout(()=>{t.textContent="";},3e3));}};chunkBYLIBOAU_cjs.a(o,"instance"),chunkBYLIBOAU_cjs.a(o,"DEFAULT_HIGH_CONTRAST",{primary:"#ffffff",secondary:"#000000",background:"#000000",text:"#ffffff",border:"#ffffff",focus:"#ffff00",error:"#ff0000",success:"#00ff00",warning:"#ffff00"}),chunkBYLIBOAU_cjs.a(o,"DEFAULT_REDUCED_MOTION",{transitionDuration:"0.1s",animationDuration:"0.1s"}),chunkBYLIBOAU_cjs.a(o,"DEFAULT_LARGE_TEXT",{fontSize:"18px",lineHeight:"1.5",spacing:"1.2em"});var c=o;exports.a=c;//# sourceMappingURL=chunk-CREK7TLF.cjs.map //# sourceMappingURL=chunk-CREK7TLF.cjs.map