@kosmeo-ui/react 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/overlays/modal/index.d.ts +1 -1
- package/dist/components/overlays/modal/index.d.ts.map +1 -1
- package/dist/components/overlays/modal/index.js +3 -2
- package/dist/components/overlays/modal/index.js.map +1 -1
- package/dist/hooks/useListKeyboard.d.ts.map +1 -1
- package/dist/hooks/useListKeyboard.js +4 -0
- package/dist/hooks/useListKeyboard.js.map +1 -1
- package/package.json +1 -1
- package/src/components/overlays/modal/index.tsx +14 -2
- package/src/hooks/useListKeyboard.ts +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { PropsWithChildren } from "react";
|
|
2
1
|
import "./styles.css";
|
|
2
|
+
import React, { PropsWithChildren } from "react";
|
|
3
3
|
export type ModalSize = "sm" | "md" | "lg" | "full";
|
|
4
4
|
interface ModalProps extends PropsWithChildren {
|
|
5
5
|
/** A function that is called when the modal is closed */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/modal/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpD,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,yDAAyD;IACzD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6JAA6J;IAC7J,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,GAAI,OAAO,UAAU,6BAkF/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
4
3
|
import useFocusTrap from "../../../hooks/useFocusTrap.js";
|
|
5
4
|
import Button from "../../buttons/button/index.js";
|
|
6
5
|
import Portal from "../portal/index.js";
|
|
7
6
|
import "./styles.css";
|
|
7
|
+
import React, { useEffect, useId, useRef, useState, } from "react";
|
|
8
8
|
const Modal = (props) => {
|
|
9
9
|
const { size = "md", dismissible = true } = props;
|
|
10
10
|
const [shouldRender, setShouldRender] = useState(props.show);
|
|
11
11
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
12
12
|
const contentRef = useRef(null);
|
|
13
13
|
const pressStartedOnOverlay = useRef(false);
|
|
14
|
+
const titleId = useId();
|
|
14
15
|
useEffect(() => {
|
|
15
16
|
if (props.show) {
|
|
16
17
|
setIsAnimating(false);
|
|
@@ -46,7 +47,7 @@ const Modal = (props) => {
|
|
|
46
47
|
e.target === e.currentTarget) {
|
|
47
48
|
props.onClose();
|
|
48
49
|
}
|
|
49
|
-
}, children: _jsxs("div", { ref: contentRef, className: `k-modal-content ${isAnimating ? "closing" : ""} ${size}`, role: "dialog", "aria-modal": "true", children: [props.title && _jsx("div", { className: "k-modal-header", children: props.title }), _jsx("div", { className: "k-modal-body", children: props.children }), _jsx("div", { className: "k-modal-footer", children: props.footerButtons ? (props.footerButtons.map((button, index) => (_jsx(React.Fragment, { children: button }, index)))) : (_jsx(Button, { onClick: props.onClose, variant: "secondary", children: "Close" })) })] }) }) }));
|
|
50
|
+
}, children: _jsxs("div", { ref: contentRef, className: `k-modal-content ${isAnimating ? "closing" : ""} ${size}`, role: "dialog", "aria-modal": "true", "aria-labelledby": props.title ? titleId : undefined, children: [props.title && (_jsx("div", { id: titleId, className: "k-modal-header", children: props.title })), _jsx("div", { className: "k-modal-body", children: props.children }), _jsx("div", { className: "k-modal-footer", children: props.footerButtons ? (props.footerButtons.map((button, index) => (_jsx(React.Fragment, { children: button }, index)))) : (_jsx(Button, { onClick: props.onClose, variant: "secondary", children: "Close" })) })] }) }) }));
|
|
50
51
|
};
|
|
51
52
|
export default Modal;
|
|
52
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/overlays/modal/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/overlays/modal/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListKeyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useListKeyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;AAE7E,UAAU,sBAAsB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,QAAA,MAAM,eAAe,GAAI,4FAQtB,sBAAsB,SAEjB,aAAa,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"useListKeyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useListKeyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;AAE7E,UAAU,sBAAsB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,QAAA,MAAM,eAAe,GAAI,4FAQtB,sBAAsB,SAEjB,aAAa,CAAC,WAAW,CAAC,SAuC/B,CAAC;AAEJ,eAAe,eAAe,CAAC"}
|
|
@@ -28,6 +28,10 @@ const useListKeyboard = ({ isOpen, length, highlightedIndex, setHighlightedIndex
|
|
|
28
28
|
}
|
|
29
29
|
break;
|
|
30
30
|
case "Escape":
|
|
31
|
+
// Keep the press from also reaching an enclosing Modal's document
|
|
32
|
+
// listener, which would close the dialog along with the list.
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
e.stopPropagation();
|
|
31
35
|
onClose();
|
|
32
36
|
setHighlightedIndex(-1);
|
|
33
37
|
break;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListKeyboard.js","sourceRoot":"","sources":["../../src/hooks/useListKeyboard.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAA2C,WAAW,EAAE,MAAM,OAAO,CAAC;AAa7E;;;;GAIG;AACH,MAAM,eAAe,GAAG,CAAC,EACvB,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,KAAK,GACI,EAAE,EAAE,CAC3B,WAAW,CACT,CAAC,CAA6B,EAAE,EAAE;IAChC,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;QACd,KAAK,WAAW;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,mBAAmB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YAC9D,MAAM;QACR,KAAK,SAAS;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,mBAAmB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;YACrD,MAAM;QACR,KAAK,OAAO;YACV,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YACtD,MAAM;QACR,KAAK,KAAK;YACR,IAAI,WAAW,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9B,QAAQ,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzD,CAAC;YACD,MAAM;QACR,KAAK,QAAQ;YACX,OAAO,EAAE,CAAC;YACV,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;YACxB,MAAM;IACV,CAAC;AACH,CAAC,EACD;IACE,MAAM;IACN,MAAM;IACN,gBAAgB;IAChB,mBAAmB;IACnB,QAAQ;IACR,OAAO;IACP,WAAW;CACZ,CACF,CAAC;AAEJ,eAAe,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"useListKeyboard.js","sourceRoot":"","sources":["../../src/hooks/useListKeyboard.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAA2C,WAAW,EAAE,MAAM,OAAO,CAAC;AAa7E;;;;GAIG;AACH,MAAM,eAAe,GAAG,CAAC,EACvB,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,KAAK,GACI,EAAE,EAAE,CAC3B,WAAW,CACT,CAAC,CAA6B,EAAE,EAAE;IAChC,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;QACd,KAAK,WAAW;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,mBAAmB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YAC9D,MAAM;QACR,KAAK,SAAS;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,mBAAmB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;YACrD,MAAM;QACR,KAAK,OAAO;YACV,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YACtD,MAAM;QACR,KAAK,KAAK;YACR,IAAI,WAAW,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9B,QAAQ,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzD,CAAC;YACD,MAAM;QACR,KAAK,QAAQ;YACX,kEAAkE;YAClE,8DAA8D;YAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO,EAAE,CAAC;YACV,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;YACxB,MAAM;IACV,CAAC;AACH,CAAC,EACD;IACE,MAAM;IACN,MAAM;IACN,gBAAgB;IAChB,mBAAmB;IACnB,QAAQ;IACR,OAAO;IACP,WAAW;CACZ,CACF,CAAC;AAEJ,eAAe,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
|
|
4
3
|
import useFocusTrap from "../../../hooks/useFocusTrap.js";
|
|
5
4
|
import Button from "../../buttons/button/index.js";
|
|
6
5
|
import Portal from "../portal/index.js";
|
|
7
6
|
import "./styles.css";
|
|
7
|
+
import React, {
|
|
8
|
+
PropsWithChildren,
|
|
9
|
+
useEffect,
|
|
10
|
+
useId,
|
|
11
|
+
useRef,
|
|
12
|
+
useState,
|
|
13
|
+
} from "react";
|
|
8
14
|
|
|
9
15
|
export type ModalSize = "sm" | "md" | "lg" | "full";
|
|
10
16
|
|
|
@@ -33,6 +39,7 @@ const Modal = (props: ModalProps) => {
|
|
|
33
39
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
34
40
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
35
41
|
const pressStartedOnOverlay = useRef(false);
|
|
42
|
+
const titleId = useId();
|
|
36
43
|
|
|
37
44
|
useEffect(() => {
|
|
38
45
|
if (props.show) {
|
|
@@ -85,8 +92,13 @@ const Modal = (props: ModalProps) => {
|
|
|
85
92
|
className={`k-modal-content ${isAnimating ? "closing" : ""} ${size}`}
|
|
86
93
|
role="dialog"
|
|
87
94
|
aria-modal="true"
|
|
95
|
+
aria-labelledby={props.title ? titleId : undefined}
|
|
88
96
|
>
|
|
89
|
-
{props.title &&
|
|
97
|
+
{props.title && (
|
|
98
|
+
<div id={titleId} className="k-modal-header">
|
|
99
|
+
{props.title}
|
|
100
|
+
</div>
|
|
101
|
+
)}
|
|
90
102
|
<div className="k-modal-body">{props.children}</div>
|
|
91
103
|
<div className="k-modal-footer">
|
|
92
104
|
{props.footerButtons ? (
|
|
@@ -49,6 +49,10 @@ const useListKeyboard = ({
|
|
|
49
49
|
}
|
|
50
50
|
break;
|
|
51
51
|
case "Escape":
|
|
52
|
+
// Keep the press from also reaching an enclosing Modal's document
|
|
53
|
+
// listener, which would close the dialog along with the list.
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
e.stopPropagation();
|
|
52
56
|
onClose();
|
|
53
57
|
setHighlightedIndex(-1);
|
|
54
58
|
break;
|