cherry-styled-components 0.2.1 → 0.2.2

package/dist/modal.d.ts

@@ -5,6 +5,11 @@ export interface ModalProps {
     $onClose: () => void;
     $title?: string;
     $width?: number;
+    $hideCloseButton?: boolean;
+    /** Enables restyling via styled(Modal); applied to the overlay root. The
+        inner parts expose class hooks: .modal-inner, .modal-close, .modal-title,
+        .modal-content. */
+    className?: string;
 }
-declare function Modal({ children, $isOpen, $onClose, $title, $width }: ModalProps): React.ReactPortal | null;
+declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, }: ModalProps): React.ReactPortal | null;
 export { Modal };

package/dist/modal.js

@@ -6,8 +6,8 @@ import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { Icon } from "./icon.js";
 import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
-import styled, { css } from "styled-components";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import styled, { css, keyframes } from "styled-components";
 import { rgba } from "polished";
 import { createPortal } from "react-dom";
 //#region src/lib/modal.tsx
@@ -15,26 +15,31 @@ var emptySubscribe = () => () => {};
 function useIsClient() {
 	return useSyncExternalStore(emptySubscribe, () => true, () => false);
 }
+var overlayFadeIn = keyframes([`from{opacity:0;}to{opacity:1;}`]);
+var overlayFadeOut = keyframes([`from{opacity:1;}to{opacity:0;}`]);
+var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:translateY(0);}`]);
+var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-43ca5273-0"
+	componentId: "sc-e8a3a913-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
-	`;display:flex;justify-content:center;align-items:center;z-index:1010;pointer-events:none;opacity:0;transition:all 0.3s ease;`,
+	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
+	` 0.3s ease both;`,
 	` & .modal-inner{background:`,
 	`;border-radius:`,
-	`;padding:20px;max-width:calc(100% - 40px);width:100%;margin:auto;position:relative;transform:translateY(40px);transition:all 0.3s ease;`,
-	` `,
+	`;padding:20px;max-width:calc(100% - 40px);width:100%;margin:auto;position:relative;animation:`,
+	` 0.3s ease both;`,
 	`{max-width:500px;`,
 	`}}`
-], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isOpen }) => $isOpen && css([`opacity:1;pointer-events:all;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isOpen }) => $isOpen && css([`transform:translateY(0);`]), mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
+], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-43ca5273-1"
+	componentId: "sc-e8a3a913-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-43ca5273-2"
+	componentId: "sc-e8a3a913-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -43,16 +48,19 @@ var StyledModalTitle = styled.h2.withConfig({
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
 var StyledModalContent = styled.div.withConfig({
 	displayName: "modal__StyledModalContent",
-	componentId: "sc-43ca5273-3"
+	componentId: "sc-e8a3a913-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,
 	`;& hr{margin:20px 0;border:none;border-bottom:solid 1px var(--divider-color);}`
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => styledText(theme));
-function Modal({ children, $isOpen, $onClose, $title, $width }) {
+function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className }) {
 	const wrapperRef = useRef(null);
 	const elmRef = useRef(null);
 	const isClient = useIsClient();
+	const [shouldRender, setShouldRender] = useState($isOpen);
+	if ($isOpen && !shouldRender) setShouldRender(true);
+	const isClosing = !$isOpen && shouldRender;
 	const closeModal = useCallback(() => {
 		$onClose();
 	}, [$onClose]);
@@ -68,15 +76,24 @@ function Modal({ children, $isOpen, $onClose, $title, $width }) {
 		return () => document.removeEventListener("keydown", handleKeydown);
 	}, [$isOpen, closeModal]);
 	useOnClickOutside([elmRef, wrapperRef], $isOpen ? closeModal : () => {});
-	if (!isClient) return null;
+	const handleAnimationEnd = useCallback((event) => {
+		if (event.target !== event.currentTarget) return;
+		if (!$isOpen) setShouldRender(false);
+	}, [$isOpen]);
+	if (!isClient || !shouldRender) return null;
 	return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(StyledModal, {
-		$isOpen,
+		$isClosing: isClosing,
 		$width,
+		className,
+		onAnimationEnd: handleAnimationEnd,
 		children: /*#__PURE__*/ jsxs("div", {
 			className: "modal-inner",
 			ref: wrapperRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": $title,
 			children: [
-				/*#__PURE__*/ jsx("span", {
+				!$hideCloseButton && /*#__PURE__*/ jsx("span", {
 					ref: elmRef,
 					children: /*#__PURE__*/ jsx(StyledModalClose, {
 						$size: "small",
@@ -86,8 +103,14 @@ function Modal({ children, $isOpen, $onClose, $title, $width }) {
 						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
 					})
 				}),
-				$title && /*#__PURE__*/ jsx(StyledModalTitle, { children: $title }),
-				/*#__PURE__*/ jsx(StyledModalContent, { children })
+				$title && /*#__PURE__*/ jsx(StyledModalTitle, {
+					className: "modal-title",
+					children: $title
+				}),
+				/*#__PURE__*/ jsx(StyledModalContent, {
+					className: "modal-content",
+					children
+				})
 			]
 		})
 	}), document.body);

package/dist/utils/use-on-click-outside.js

@@ -1,17 +1,28 @@
 "use client";
 "use client";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 //#region src/lib/utils/use-on-click-outside.tsx
 function useOnClickOutside(refs, cb) {
+	const latest = useRef({
+		refs,
+		cb
+	});
+	useEffect(() => {
+		latest.current = {
+			refs,
+			cb
+		};
+	});
 	useEffect(() => {
 		function handleClickOutside(event) {
-			if (refs && refs.map((ref) => ref && ref.current && ref.current.contains(event.target)).every((i) => i === false)) cb();
+			const { refs, cb } = latest.current;
+			if (refs.every((ref) => !ref.current || !ref.current.contains(event.target))) cb();
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => {
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
-	}, [refs, cb]);
+	}, []);
 }
 //#endregion
 export { useOnClickOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",