react-miui 0.34.0 → 0.35.0

package/esm/components/ui/modal/Modal.js

@@ -1,49 +1,100 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
 import { fnWithProps } from "../../../types/fnWithProps.js";
+import { HandleEsc } from "../../utils/HandleEsc.js";
 import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled.js";
-const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, }, ref) => {
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex=\"-1\"])",
+].join(",");
+const prefersReducedMotion = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full, ...rest }, ref) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef(null);
     const containerRef = useForwardedRef(ref);
+    const previouslyFocusedRef = useRef(null);
+    const titleId = useId();
     useEffect(() => {
-        if (!isOpen || !closeOnEsc) {
+        if (isOpen) {
+            setIsRendered(true);
+            setIsClosing(false);
             return;
         }
-        const onKeyDown = (e) => {
-            if (e.key === "Escape") {
-                onClose();
-            }
-        };
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [isOpen, closeOnEsc, onClose]);
-    useEffect(() => {
-        if (!isOpen) {
-            setIsClosing(true);
+        if (prefersReducedMotion()) {
+            setIsRendered(false);
+            setIsClosing(false);
             return;
         }
-        setIsRendered(true);
-        setIsClosing(false);
+        setIsClosing(true);
     }, [isOpen]);
     useEffect(() => {
         if (!isClosing) {
             return;
         }
-        if (!overlayRef.current || !containerRef.current) {
+        const overlay = overlayRef.current;
+        const container = containerRef.current;
+        if (!overlay || !container) {
             return;
         }
-        overlayRef.current.style.animation = "none";
-        containerRef.current.style.animation = "none";
-        overlayRef.current.offsetHeight;
-        overlayRef.current.style.removeProperty("animation");
-        containerRef.current.style.removeProperty("animation");
+        overlay.style.animation = "none";
+        container.style.animation = "none";
+        overlay.offsetHeight;
+        overlay.style.removeProperty("animation");
+        container.style.removeProperty("animation");
     }, [isClosing, containerRef]);
-    const titleElem = title ? React.createElement(TitleStyled, null, title) : null;
+    useEffect(() => {
+        var _a;
+        if (!isOpen || !isRendered) {
+            return;
+        }
+        const container = containerRef.current;
+        const overlay = overlayRef.current;
+        if (!container || !overlay) {
+            return;
+        }
+        previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
+            ? document.activeElement
+            : null;
+        const focusables = container.querySelectorAll(FOCUSABLE_SELECTOR);
+        ((_a = focusables[0]) !== null && _a !== void 0 ? _a : container).focus();
+        const inerted = [];
+        let cursor = overlay;
+        while (cursor !== document.body) {
+            const parentEl = cursor.parentElement;
+            if (!parentEl) {
+                break;
+            }
+            for (const child of Array.from(parentEl.children)) {
+                if (child === cursor || !(child instanceof HTMLElement)) {
+                    continue;
+                }
+                if (!child.hasAttribute("inert")) {
+                    child.setAttribute("inert", "");
+                    inerted.push(child);
+                }
+            }
+            cursor = parentEl;
+        }
+        return () => {
+            var _a;
+            inerted.forEach((el) => {
+                el.removeAttribute("inert");
+            });
+            (_a = previouslyFocusedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }, [isOpen, isRendered, containerRef]);
+    const titleElem = title ? React.createElement(TitleStyled, { id: titleId }, title) : null;
     const handleOverlayClick = useCallback((e) => {
         if (e.target !== e.currentTarget) {
             return;
@@ -51,11 +102,14 @@ const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onO
         if (onOverlayClick === "close") {
             onClose();
         }
-        if (typeof onOverlayClick === "function") {
+        else if (typeof onOverlayClick === "function") {
             onOverlayClick();
         }
     }, [onOverlayClick, onClose]);
-    const handleAnimationEnd = useCallback(() => {
+    const handleAnimationEnd = useCallback((e) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
         if (isOpen) {
             return;
         }
@@ -65,31 +119,37 @@ const ModalBase = forwardRef(({ children, onClose, isOpen, title, className, onO
         return null;
     }
     const overlayVariants = {};
-    isClosing && (overlayVariants.isClosing = true);
-    position != null && (overlayVariants.position = position);
+    if (isClosing) {
+        overlayVariants.isClosing = true;
+    }
+    if (position != null) {
+        overlayVariants.position = position;
+    }
     const containerVariants = {};
-    isClosing && (containerVariants.isClosing = true);
-    full != null && (containerVariants.full = full);
+    if (isClosing) {
+        containerVariants.isClosing = true;
+    }
+    if (full != null) {
+        containerVariants.full = full;
+    }
     const childrenCount = React.Children.count(children);
     const chld = React.Children.map(children, (child, index) => {
         var _a;
-        if (React.isValidElement(child)) {
-            if (child.type === RemovePadding) {
-                const css = (_a = child.props.css) !== null && _a !== void 0 ? _a : {};
-                if (index === 0 && titleElem == null) {
-                    css.marginTop = NEGATIVE_PADDING;
-                }
-                if (index === childrenCount - 1) {
-                    css.marginBottom = NEGATIVE_PADDING;
-                }
-                return React.cloneElement(child, { css });
+        if (React.isValidElement(child) && child.type === RemovePadding) {
+            const css = { ...((_a = child.props.css) !== null && _a !== void 0 ? _a : {}) };
+            if (index === 0 && titleElem == null) {
+                css.marginTop = NEGATIVE_PADDING;
+            }
+            if (index === childrenCount - 1) {
+                css.marginBottom = NEGATIVE_PADDING;
             }
-            return child;
+            return React.cloneElement(child, { css });
         }
         return child;
     });
     const tree = (React.createElement(OverlayStyled, { ...overlayVariants, onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd },
-        React.createElement(ContainerStyled, { className: className, ...containerVariants, ref: containerRef },
+        closeOnEsc ? React.createElement(HandleEsc, { onPress: onClose }) : null,
+        React.createElement(ContainerStyled, { role: "dialog", "aria-modal": true, "aria-labelledby": titleElem ? titleId : undefined, tabIndex: -1, className: className, ...containerVariants, ref: containerRef, ...rest },
             titleElem,
             chld)));
     if (portal) {

package/esm/components/ui/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/modal/Modal.styled.d.ts

@@ -260,7 +260,7 @@ declare const ContainerStyled: import("../../../../node_modules/@stitches/react/
         height: string | number;
     };
 }>>;
-declare const TitleStyled: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
+declare const TitleStyled: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"h2", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: "white";
         mainColor: "#008ad2";

package/esm/components/ui/modal/Modal.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,QAAe,CAAC;AAWtC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BjB,CAAC;AAaH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAC;AAEH,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BnB,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKf,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}
+{"version":3,"file":"Modal.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,QAAe,CAAC;AAWtC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCjB,CAAC;AAaH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAC;AAEH,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCnB,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAMf,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}

package/esm/components/ui/modal/Modal.styled.js

@@ -10,19 +10,23 @@ const overlay = keyframes({
     },
 });
 const OverlayStyled = styled("div", {
-    position: "fixed",
-    zIndex: 4,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    animation: `${overlay.toString()} 300ms`,
-    animationFillMode: "forwards",
-    backdropFilter: "blur(5px)",
-    variants: {
+    "position": "fixed",
+    "zIndex": 4,
+    "top": 0,
+    "bottom": 0,
+    "left": 0,
+    "right": 0,
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "animation": `${overlay.toString()} 300ms`,
+    "animationFillMode": "forwards",
+    "backdropFilter": "blur(5px)",
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        background: "rgba($background, 0.3)",
+    },
+    "variants": {
         position: {
             bottom: {
                 alignItems: "flex-end",
@@ -50,17 +54,27 @@ const RemovePadding = styled("div", {
     mx: NEGATIVE_PADDING,
 });
 const ContainerStyled = styled("div", {
-    background: "$modalBg",
-    borderRadius: dimensionsPxToRem(12),
-    maxWidth: pxToRem(333),
-    maxHeight: "100%",
-    width: "calc(100% - 30px)",
-    padding: PADDING,
-    position: "relative",
-    boxSizing: "border-box",
-    animation: `${container.toString()} 300ms`,
-    animationFillMode: "forwards",
-    variants: {
+    "background": "$modalBg",
+    "borderRadius": dimensionsPxToRem(12),
+    "maxWidth": pxToRem(333),
+    "maxHeight": "100%",
+    "width": "calc(100% - 30px)",
+    "padding": PADDING,
+    "position": "relative",
+    "boxSizing": "border-box",
+    "overflowY": "auto",
+    "overscrollBehavior": "contain",
+    "animation": `${container.toString()} 300ms`,
+    "animationFillMode": "forwards",
+    "&:focus": {
+        outline: "none",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        opacity: 1,
+        transform: "none",
+    },
+    "variants": {
         full: {
             true: {
                 width: "calc(100vw - 30px)",
@@ -74,11 +88,12 @@ const ContainerStyled = styled("div", {
         },
     },
 });
-const TitleStyled = styled("div", {
+const TitleStyled = styled("h2", {
     fontSize: fontPxToRem(40),
     textAlign: "center",
     color: "$text3",
     margin: `${dimensionsPxToRem(90)} 0`,
+    fontWeight: "inherit",
 });
 export { OverlayStyled, RemovePadding, ContainerStyled, TitleStyled, NEGATIVE_PADDING, };
 //# sourceMappingURL=Modal.styled.js.map

package/esm/components/ui/modal/Modal.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE5F,MAAM,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,OAAO,GAAG,SAAS,CAAC;IACtB,IAAI,EAAE;QACF,UAAU,EAAE,sBAAsB;KACrC;IACD,EAAE,EAAE;QACA,UAAU,EAAE,wBAAwB;KACvC;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,QAAQ;IACxC,iBAAiB,EAAE,UAAU;IAC7B,cAAc,EAAE,WAAW;IAE3B,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,MAAM,EAAE;gBACJ,UAAU,EAAE,UAAU;gBACtB,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;aACvC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,SAAS,CAAC;IACxB,IAAI,EAAE;QACF,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,CAAC;KACb;IACD,EAAE,EAAE;QACA,SAAS,EAAE,eAAe;QAC1B,OAAO,EAAE,CAAC;KACb;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,EAAE,EAAE,gBAAgB;CACvB,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,EAAE;IAClC,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC;IACtB,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAC1C,iBAAiB,EAAE,UAAU;IAE7B,QAAQ,EAAE;QAEN,IAAI,EAAE;YACF,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;gBAC3B,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC;aACpC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,EAAE;IAC9B,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,IAAI;CACvC,CAAC,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}
+{"version":3,"file":"Modal.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE5F,MAAM,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,OAAO,GAAG,SAAS,CAAC;IACtB,IAAI,EAAE;QACF,UAAU,EAAE,sBAAsB;KACrC;IACD,EAAE,EAAE;QACA,UAAU,EAAE,wBAAwB;KACvC;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,WAAW,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,QAAQ;IAC1C,mBAAmB,EAAE,UAAU;IAC/B,gBAAgB,EAAE,WAAW;IAE7B,yCAAyC,EAAE;QACvC,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,wBAAwB;KACvC;IAED,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,MAAM,EAAE;gBACJ,UAAU,EAAE,UAAU;gBACtB,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;aACvC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,SAAS,CAAC;IACxB,IAAI,EAAE;QACF,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,CAAC;KACb;IACD,EAAE,EAAE;QACA,SAAS,EAAE,eAAe;QAC1B,OAAO,EAAE,CAAC;KACb;CACJ,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAChC,EAAE,EAAE,gBAAgB;CACvB,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,EAAE;IAClC,YAAY,EAAE,UAAU;IACxB,cAAc,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACrC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC;IACxB,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,mBAAmB;IAC5B,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,YAAY;IACzB,WAAW,EAAE,MAAM;IACnB,oBAAoB,EAAE,SAAS;IAC/B,WAAW,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAC5C,mBAAmB,EAAE,UAAU;IAK/B,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;KAClB;IAED,yCAAyC,EAAE;QACvC,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,MAAM;KACpB;IAED,UAAU,EAAE;QAER,IAAI,EAAE;YACF,IAAI,EAAE;gBACF,KAAK,EAAE,oBAAoB;gBAC3B,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC;aACpC;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,kBAAkB,EAAE,SAAS;aAChC;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,EAAE;IAC7B,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,IAAI;IACpC,UAAU,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}

package/esm/theme.css-global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAYtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAWtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/esm/theme.css-global.js

@@ -6,7 +6,6 @@ const injectGlobalStyles = globalCss({
     "*:focus-visible:focus-visible": {
         outline: "none !important",
         borderColor: "$focusColor",
-        backgroundColor: "var(--focus-bg-set)",
     },
     "body": {
         color: "$text",

package/esm/theme.css-global.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css-global.js","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,kBAAkB,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE;QACP,OAAO,EAAE,iBAAiB;KAC7B;IACD,+BAA+B,EAAE;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,WAAW,EAAE,aAAa;QAC1B,eAAe,EAAE,qBAAqB;KACzC;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"theme.css-global.js","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,kBAAkB,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE;QACP,OAAO,EAAE,iBAAiB;KAC7B;IACD,+BAA+B,EAAE;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,WAAW,EAAE,aAAa;KAC7B;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/esm/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./toObjectValue";
 export * from "./useKeyPress";
+export * from "./useNativeValidity";
 export * from "./useTailSpin";
 //# sourceMappingURL=index.d.ts.map

package/esm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/esm/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./toObjectValue.js";
 export * from "./useKeyPress.js";
+export * from "./useNativeValidity.js";
 export * from "./useTailSpin.js";
 //# sourceMappingURL=index.js.map

package/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/esm/utils/useNativeValidity.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+interface UseNativeValidityResult {
+    finalError: boolean;
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onInvalid: () => void;
+    revalidate: (input: HTMLInputElement | null) => void;
+}
+declare const useNativeValidity: (error: boolean | undefined) => UseNativeValidityResult;
+export { useNativeValidity };
+//# sourceMappingURL=useNativeValidity.d.ts.map

package/esm/utils/useNativeValidity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeValidity.d.ts","sourceRoot":"","sources":["../../src/utils/useNativeValidity.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,uBAAuB;IAE7B,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAExD,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE3D,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AASD,QAAA,MAAM,iBAAiB,GAAI,OAAO,OAAO,GAAG,SAAS,KAAG,uBA8BvD,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/utils/useNativeValidity.js

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+const useNativeValidity = (error) => {
+    const [nativeInvalid, setNativeInvalid] = useState(false);
+    const onBlur = useCallback((e) => {
+        setNativeInvalid(!e.currentTarget.checkValidity());
+    }, []);
+    const onChange = useCallback((e) => {
+        if (e.currentTarget.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+    const onInvalid = useCallback(() => {
+        setNativeInvalid(true);
+    }, []);
+    const revalidate = useCallback((input) => {
+        if (input === null || input === void 0 ? void 0 : input.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+    return {
+        finalError: Boolean(error) || nativeInvalid,
+        onBlur,
+        onChange,
+        onInvalid,
+        revalidate,
+    };
+};
+export { useNativeValidity };
+//# sourceMappingURL=useNativeValidity.js.map

package/esm/utils/useNativeValidity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeValidity.js","sourceRoot":"","sources":["../../src/utils/useNativeValidity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwB9C,MAAM,iBAAiB,GAAG,CAAC,KAA0B,EAA2B,EAAE;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACjE,gBAAgB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACpE,IAAI,CAAC,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,CAAC;YAClC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QAC9D,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,EAAE,EAAE,CAAC;YACzB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,aAAa;QAC3C,MAAM;QACN,QAAQ;QACR,SAAS;QACT,UAAU;KACb,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/form/index.ts

@@ -1 +1,2 @@
 export * from "./input/Input";
+export * from "./timepicker/TimePicker";

package/src/components/form/input/Input.stories.tsx

@@ -103,8 +103,54 @@ const InputRef: Story = {
     },
 };
 
+const Validation: Story = {
+    render: () => {
+        const [submitted, setSubmitted] = React.useState<Record<string, string> | null>(null);
+        return (
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    const data = new FormData(e.currentTarget);
+                    const result: Record<string, string> = {};
+                    data.forEach((v, k) => {
+                        if (typeof v === "string") {
+                            result[k] = v;
+                        }
+                    });
+                    setSubmitted(result);
+                }}
+            >
+                <Gap>
+                    <div>
+                        {"Every input reads native validity (pattern / required / type)."
+                            + " Type something, blur the field or hit Submit — invalid fields turn red on their own."}
+                    </div>
+                    <Input name={"email"} label={"Email"} type={"email"} required={true} />
+                    <Input name={"required"} label={"Required text"} required={true} />
+                    <Input
+                        name={"digits"}
+                        label={"4 digits only"}
+                        pattern={"\\d{4}"}
+                        placeholder={"1234"}
+                    />
+                    <Input
+                        name={"short"}
+                        label={"Min 5 characters"}
+                        minLength={5}
+                        defaultValue={"abc"}
+                    />
+                    <Button type={"submit"}>{"Submit"}</Button>
+                    {submitted
+                        ? <div>{"Submitted: " + JSON.stringify(submitted)}</div>
+                        : null}
+                </Gap>
+            </form>
+        );
+    },
+};
+
 export {
-    Primary, Mixed, WithLabel, FloatingLabel, InputRef,
+    Primary, Mixed, WithLabel, FloatingLabel, InputRef, Validation,
 };
 
 export default meta;

package/src/components/form/input/Input.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useId, useRef, useState } from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
+import { useNativeValidity } from "../../../utils";
 import { Suggestions } from "../Suggestions";
 import {
     StyledInput,
@@ -53,6 +54,8 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     const isControlled = props.value !== undefined;
     const hasValue = isControlled ? Boolean(props.value) : internalHasValue;
 
+    const validity = useNativeValidity(error);
+
     const suggestionsId = useId();
     const generatedInputId = useId();
     const inputId = id ?? (label ? generatedInputId : undefined);
@@ -65,8 +68,9 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
 
     const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
         setFocused(false);
+        validity.onBlur(e);
         onBlur?.(e);
-    }, [onBlur]);
+    }, [onBlur, validity]);
 
     const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -80,6 +84,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         if (!isControlled) {
             setInternalHasValue(Boolean(e.currentTarget.value));
         }
+        validity.onChange(e);
         if (!suggestions) {
             onChange?.(e);
             return;
@@ -96,7 +101,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         }
         infoRef.current.picked = false;
         onChange?.(e);
-    }, [isControlled, suggestions, onChange, onSuggestionMatch]);
+    }, [isControlled, suggestions, onChange, onSuggestionMatch, validity]);
 
     const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
     const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
@@ -115,7 +120,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             <StyledLabel
                 htmlFor={inputId}
                 floating={floating}
-                error={Boolean(error)}
+                error={validity.finalError}
             >
                 {label}
             </StyledLabel>
@@ -128,7 +133,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             focused={focused}
             disabled={Boolean(props.disabled)}
             readOnly={Boolean(props.readOnly)}
-            error={Boolean(error)}
+            error={validity.finalError}
         >
             {prefixElem}
             <StyledInputContainer>
@@ -143,7 +148,8 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
                     onKeyDown={handleKeyDown}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
-                    data-error={Boolean(error)}
+                    onInvalid={validity.onInvalid}
+                    data-error={validity.finalError}
                 />
                 <Suggestions id={suggestionsId} suggestions={suggestions} />
             </StyledInputContainer>