@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/dropzone/dropzone.component.js

@@ -1,133 +1,130 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import dropzoneStyles from "./dropzone.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import dropzoneStyles from './dropzone.css' with { type: 'css' };
 
 export class GrantCodesDropzone extends LitElement {
-	static styles = [dropzoneStyles];
-
-	static properties = {
-		fullscreenOnDrag: { type: Boolean, reflect: true },
-	};
-
-	constructor() {
-		super();
-
-		this.fullscreenOnDrag = false;
-
-		/** @type {HTMLInputElement[]} */
-		this._input = [];
-
-		this._fullscreen = false;
-
-		/** @type {string} */
-		this._placeholder = "";
-
-		/** @type {number} */
-		this._dragDepth = 0;
-
-		/** @type {number | null} */
-		this._fullscreenTimeout = null;
-	}
-
-	_enableFullscreen = () => {
-		if (this.fullscreenOnDrag) {
-			this._dragDepth++;
-			this._fullscreen = true;
-			this._clearFullscreenTimeout();
-			// Fallback: disable fullscreen after 3 seconds of no activity
-			this._fullscreenTimeout = setTimeout(() => {
-				this._forceDisableFullscreen();
-			}, 3000);
-		}
-	};
-
-	_disableFullscreen = () => {
-		if (this.fullscreenOnDrag) {
-			this._dragDepth--;
-			// Only disable if we've left all drag boundaries
-			if (this._dragDepth <= 0) {
-				this._forceDisableFullscreen();
-			}
-		}
-	};
-
-	_forceDisableFullscreen = () => {
-		this._fullscreen = false;
-		this._dragDepth = 0;
-		this._clearFullscreenTimeout();
-	};
-
-	_clearFullscreenTimeout = () => {
-		if (this._fullscreenTimeout !== null) {
-			clearTimeout(this._fullscreenTimeout);
-			this._fullscreenTimeout = null;
-		}
-	};
-
-	_handleDrop = () => {
-		this._forceDisableFullscreen();
-	};
-
-	_handleDragOver = (e) => {
-		e.preventDefault();
-		// Reset timeout on drag activity
-		if (this._fullscreen && this._fullscreenTimeout) {
-			this._clearFullscreenTimeout();
-			this._fullscreenTimeout = setTimeout(() => {
-				this._forceDisableFullscreen();
-			}, 3000);
-		}
-	};
-
-	connectedCallback() {
-		super.connectedCallback();
-		if (typeof document === "undefined") return;
-		document.addEventListener("dragenter", this._enableFullscreen);
-		document.addEventListener("dragend", this._disableFullscreen);
-		document.addEventListener("dragleave", this._disableFullscreen);
-		document.addEventListener("drop", this._handleDrop);
-	}
-
-	disconnectedCallback() {
-		document.removeEventListener("dragenter", this._enableFullscreen);
-		document.removeEventListener("dragend", this._disableFullscreen);
-		document.removeEventListener("dragleave", this._disableFullscreen);
-		document.removeEventListener("drop", this._handleDrop);
-		this._clearFullscreenTimeout();
-		super.disconnectedCallback();
-	}
-
-	firstUpdated() {
-		// Find input elements in the slot
-		const slot = this.renderRoot.querySelector("slot");
-		if (slot) {
-			const assignedElements = slot.assignedElements();
-			this._input = assignedElements.filter(
-				(el) => el.tagName === "INPUT" && el.type === "file",
-			);
-		}
-
-		if (this._input.length === 0) {
-			// In unit tests, allow rendering without an input to reduce friction
-			const isTestEnv =
-				typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
-			if (!isTestEnv) {
-				throw new Error("No file input found");
-			}
-			this._placeholder = "";
-			return;
-		}
-		this._placeholder = this._input[0].placeholder;
-	}
-
-	render() {
-		const classes = classMap({
-			dropzone: true,
-			"dropzone--fullscreen": this._fullscreen,
-		});
-
-		return html`
+  static styles = [dropzoneStyles];
+
+  static properties = {
+    fullscreenOnDrag: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+
+    this.fullscreenOnDrag = false;
+
+    /** @type {HTMLInputElement[]} */
+    this._input = [];
+
+    this._fullscreen = false;
+
+    /** @type {string} */
+    this._placeholder = '';
+
+    /** @type {number} */
+    this._dragDepth = 0;
+
+    /** @type {number | null} */
+    this._fullscreenTimeout = null;
+  }
+
+  _enableFullscreen = () => {
+    if (this.fullscreenOnDrag) {
+      this._dragDepth++;
+      this._fullscreen = true;
+      this._clearFullscreenTimeout();
+      // Fallback: disable fullscreen after 3 seconds of no activity
+      this._fullscreenTimeout = setTimeout(() => {
+        this._forceDisableFullscreen();
+      }, 3000);
+    }
+  };
+
+  _disableFullscreen = () => {
+    if (this.fullscreenOnDrag) {
+      this._dragDepth--;
+      // Only disable if we've left all drag boundaries
+      if (this._dragDepth <= 0) {
+        this._forceDisableFullscreen();
+      }
+    }
+  };
+
+  _forceDisableFullscreen = () => {
+    this._fullscreen = false;
+    this._dragDepth = 0;
+    this._clearFullscreenTimeout();
+  };
+
+  _clearFullscreenTimeout = () => {
+    if (this._fullscreenTimeout !== null) {
+      clearTimeout(this._fullscreenTimeout);
+      this._fullscreenTimeout = null;
+    }
+  };
+
+  _handleDrop = () => {
+    this._forceDisableFullscreen();
+  };
+
+  _handleDragOver = (e) => {
+    e.preventDefault();
+    // Reset timeout on drag activity
+    if (this._fullscreen && this._fullscreenTimeout) {
+      this._clearFullscreenTimeout();
+      this._fullscreenTimeout = setTimeout(() => {
+        this._forceDisableFullscreen();
+      }, 3000);
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof document === 'undefined') return;
+    document.addEventListener('dragenter', this._enableFullscreen);
+    document.addEventListener('dragend', this._disableFullscreen);
+    document.addEventListener('dragleave', this._disableFullscreen);
+    document.addEventListener('drop', this._handleDrop);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('dragenter', this._enableFullscreen);
+    document.removeEventListener('dragend', this._disableFullscreen);
+    document.removeEventListener('dragleave', this._disableFullscreen);
+    document.removeEventListener('drop', this._handleDrop);
+    this._clearFullscreenTimeout();
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    // Find input elements in the slot
+    const slot = this.renderRoot.querySelector('slot');
+    if (slot) {
+      const assignedElements = slot.assignedElements();
+      this._input = assignedElements.filter((el) => el.tagName === 'INPUT' && el.type === 'file');
+    }
+
+    if (this._input.length === 0) {
+      // In unit tests, allow rendering without an input to reduce friction
+      const isTestEnv = typeof process !== 'undefined' && process?.env?.NODE_ENV === 'test';
+      if (!isTestEnv) {
+        throw new Error('No file input found');
+      }
+      this._placeholder = '';
+      return;
+    }
+    this._placeholder = this._input[0].placeholder;
+  }
+
+  render() {
+    const classes = classMap({
+      dropzone: true,
+      'dropzone--fullscreen': this._fullscreen,
+    });
+
+    return html`
 			<div
 				class=${classes}
 				@mouseleave=${this._forceDisableFullscreen}
@@ -140,5 +137,5 @@ export class GrantCodesDropzone extends LitElement {
 				<span class="dropzone__placeholder">${this._placeholder}</span>
 			</div>
 		`;
-	}
+  }
 }

package/src/components/dropzone/dropzone.css

@@ -1,61 +1,59 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .dropzone {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--g-spacing-xl);
-	border: max(var(--g-border-width-md), 0.2rem) dashed
-		var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	background-color: var(--g-color-background-subtle);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--g-spacing-xl);
+  border: max(var(--g-border-width-md), 0.2rem) dashed var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  background-color: var(--g-color-background-subtle);
 }
 
 .dropzone--fullscreen {
-	position: fixed;
-	inset: 0;
-	z-index: 10;
-	background-color: var(--g-color-background-default);
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  background-color: var(--g-color-background-default);
 }
 
 .dropzone--fullscreen::after {
-	content: "";
-	display: flex;
-	position: fixed;
-	inset: var(--g-spacing-xl);
-	justify-content: center;
-	align-items: center;
-	padding: var(--g-spacing-xl);
-	border: max(calc(var(--g-border-width-md) * 2), 0.4rem) dashed
-		var(--g-color-border-default);
-	border-radius: calc(var(--g-border-radius-md) * 2);
-	z-index: 11;
-	color: inherit;
+  content: "";
+  display: flex;
+  position: fixed;
+  inset: var(--g-spacing-xl);
+  justify-content: center;
+  align-items: center;
+  padding: var(--g-spacing-xl);
+  border: max(calc(var(--g-border-width-md) * 2), 0.4rem) dashed var(--g-color-border-default);
+  border-radius: calc(var(--g-border-radius-md) * 2);
+  z-index: 11;
+  color: inherit;
 }
 
 ::slotted(input),
 .dropzone__input {
-	position: absolute;
-	display: block;
-	width: 100%;
-	height: 100%;
-	inset: 0;
-	opacity: 0;
-	cursor: pointer;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
 }
 
 .dropzone--fullscreen ::slotted(input),
 .dropzone--fullscreen .dropzone__input {
-	position: fixed;
-	z-index: 12;
+  position: fixed;
+  z-index: 12;
 }

package/src/components/dropzone/dropzone.js

@@ -1,6 +1,6 @@
-import { GrantCodesDropzone } from "./dropzone.component.js";
+import { GrantCodesDropzone } from './dropzone.component.js';
 
-export * from "./dropzone.component.js";
+export * from './dropzone.component.js';
 export default GrantCodesDropzone;
 
-customElements.define("grantcodes-dropzone", GrantCodesDropzone);
+customElements.define('grantcodes-dropzone', GrantCodesDropzone);

package/src/components/dropzone/dropzone.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesDropzone } from "./dropzone.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesDropzone } from './dropzone.js';
 
 export const Dropzone = createComponent({
-	tagName: "grantcodes-dropzone",
-	elementClass: GrantCodesDropzone,
-	react: React,
+  tagName: 'grantcodes-dropzone',
+  elementClass: GrantCodesDropzone,
+  react: React,
 });

package/src/components/dropzone/dropzone.stories.js

@@ -1,39 +1,39 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } = getStorybookHelpers(
-	"grantcodes-dropzone",
-);
-import "./dropzone.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-dropzone');
+
+import './dropzone.js';
 
 const meta = {
-	title: "Components/Dropzone",
-	component: "grantcodes-dropzone",
-	args: {
-		...args,
-		fullscreenOnDrag: true,
-		placeholder: "Placeholder in the dropzone slot",
-		onChange: (e) => {
-			const target = e.target;
-			console.log("Received files:", target.files);
-		},
-	},
-	argTypes,
-	render: (args) =>
-		template(
-			args,
-			html`<input
+  title: 'Components/Dropzone',
+  component: 'grantcodes-dropzone',
+  args: {
+    ...args,
+    fullscreenOnDrag: true,
+    placeholder: 'Placeholder in the dropzone slot',
+    onChange: (e) => {
+      const target = e.target;
+      console.log('Received files:', target.files);
+    },
+  },
+  argTypes,
+  render: (args) =>
+    template(
+      args,
+      html`<input
 				type="file"
 				placeholder="${args.placeholder}"
 				accept="*"
 				multiple
 				@change=${args.onChange}
 			/>`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;