@edifice.io/react 2.6.5-develop-pedago.20260911135210 → 2.6.5-develop-b2school.20260914145143
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/Form/FormText.js +11 -6
- package/dist/components/Input/Input.d.ts +11 -2
- package/dist/components/Input/Input.js +38 -21
- package/dist/components/Label/Label.js +4 -4
- package/dist/components/LinkPill/LinkPill.d.ts +45 -0
- package/dist/components/LinkPill/LinkPill.js +27 -0
- package/dist/components/LinkPill/index.d.ts +2 -0
- package/dist/components/ModalBeta/ModalBeta.d.ts +47 -0
- package/dist/components/ModalBeta/ModalBeta.js +62 -0
- package/dist/components/ModalBeta/ModalBetaBody.d.ts +19 -0
- package/dist/components/ModalBeta/ModalBetaBody.js +15 -0
- package/dist/components/ModalBeta/ModalBetaContext.d.ts +7 -0
- package/dist/components/ModalBeta/ModalBetaContext.js +15 -0
- package/dist/components/ModalBeta/ModalBetaFooter.d.ts +13 -0
- package/dist/components/ModalBeta/ModalBetaFooter.js +7 -0
- package/dist/components/ModalBeta/ModalBetaHeader.d.ts +23 -0
- package/dist/components/ModalBeta/ModalBetaHeader.js +31 -0
- package/dist/components/ModalBeta/index.d.ts +2 -0
- package/dist/components/Table/components/Table.d.ts +2 -2
- package/dist/components/Table/components/TableTd.d.ts +1 -1
- package/dist/components/Table/components/TableTh.d.ts +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/homepage.js +12 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useClickOutside/useClickOutside.d.ts +1 -1
- package/dist/hooks/useClickOutside/useClickOutside.js +3 -2
- package/dist/hooks/useUploadFiles/index.d.ts +0 -1
- package/dist/hooks/useUploadFiles/useUploadFiles.d.ts +1 -11
- package/dist/hooks/useUploadFiles/useUploadFiles.js +7 -12
- package/dist/hooks/useUserPreferences/index.d.ts +1 -0
- package/dist/hooks/useUserPreferences/useUserPreferences.d.ts +9 -0
- package/dist/hooks/useUserPreferences/useUserPreferences.js +39 -0
- package/dist/index.js +166 -160
- package/dist/modules/homepage/components/Header/Header.js +11 -4
- package/dist/modules/homepage/components/UsefulLinks/LinkForm.d.ts +13 -0
- package/dist/modules/homepage/components/UsefulLinks/LinkForm.js +67 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinks.d.ts +6 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinks.js +29 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinksContainer.d.ts +1 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinksContainer.js +40 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinksModal.d.ts +11 -0
- package/dist/modules/homepage/components/UsefulLinks/UsefulLinksModal.js +65 -0
- package/dist/modules/homepage/components/UsefulLinks/hooks/useUsefulLinksContainer.d.ts +19 -0
- package/dist/modules/homepage/components/UsefulLinks/hooks/useUsefulLinksContainer.js +26 -0
- package/dist/modules/homepage/components/UsefulLinks/index.d.ts +5 -0
- package/dist/modules/homepage/components/UsefulLinks/services/api/index.d.ts +6 -0
- package/dist/modules/homepage/components/UsefulLinks/services/api/index.js +5 -0
- package/dist/modules/homepage/components/UsefulLinks/services/api/usefulLinksService.d.ts +31 -0
- package/dist/modules/homepage/components/UsefulLinks/services/api/usefulLinksService.js +50 -0
- package/dist/modules/homepage/components/UsefulLinks/services/queries/usefulLinks.d.ts +20 -0
- package/dist/modules/homepage/components/UsefulLinks/services/queries/usefulLinks.js +65 -0
- package/dist/modules/homepage/components/UserSpace/hooks/useProfileLinks.js +18 -8
- package/dist/modules/homepage/components/index.d.ts +1 -0
- package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.js +7 -34
- package/dist/modules/multimedia/UploadFiles/UploadFiles.d.ts +1 -2
- package/package.json +6 -6
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import clsx from "clsx";
|
|
3
|
+
import SvgIconError from "../../modules/icons/components/IconError.js";
|
|
4
|
+
import SvgIconSuccessOutline from "../../modules/icons/components/IconSuccessOutline.js";
|
|
3
5
|
import { useFormControl } from "./FormContext.js";
|
|
4
6
|
const FormText = ({
|
|
5
7
|
children
|
|
6
8
|
}) => {
|
|
7
9
|
const {
|
|
8
10
|
status
|
|
9
|
-
} = useFormControl(), classes = clsx("
|
|
10
|
-
"
|
|
11
|
-
valid: status === "valid"
|
|
12
|
-
});
|
|
13
|
-
return /* @__PURE__ */
|
|
11
|
+
} = useFormControl(), classes = clsx("input-message", {
|
|
12
|
+
"input-message--invalid": status === "invalid",
|
|
13
|
+
"input-message--valid": status === "valid"
|
|
14
|
+
}), Icon = status === "invalid" ? SvgIconError : status === "valid" ? SvgIconSuccessOutline : null;
|
|
15
|
+
return /* @__PURE__ */ jsxs("p", { className: classes, children: [
|
|
16
|
+
Icon && /* @__PURE__ */ jsx(Icon, { className: "input-message__icon", "aria-hidden": "true" }),
|
|
17
|
+
children
|
|
18
|
+
] });
|
|
14
19
|
};
|
|
15
20
|
export {
|
|
16
21
|
FormText as default
|
|
@@ -2,7 +2,8 @@ import { Size } from '../../types';
|
|
|
2
2
|
export type OmitInputProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
|
|
3
3
|
export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, OmitInputProps> {
|
|
4
4
|
/**
|
|
5
|
-
* Control size of input
|
|
5
|
+
* Control size of input. `sm` and `md` share the same visual size
|
|
6
|
+
* ("Medium" in the design system); only `lg` ("Big") differs.
|
|
6
7
|
*/
|
|
7
8
|
size: Size;
|
|
8
9
|
/**
|
|
@@ -18,7 +19,8 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
|
|
|
18
19
|
*/
|
|
19
20
|
disabled?: boolean;
|
|
20
21
|
/**
|
|
21
|
-
*
|
|
22
|
+
* @deprecated Validation icons no longer render inside the field —
|
|
23
|
+
* this prop has no effect and will be removed in a future major version.
|
|
22
24
|
*/
|
|
23
25
|
noValidationIcon?: boolean;
|
|
24
26
|
/**
|
|
@@ -33,6 +35,13 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
|
|
|
33
35
|
* Browser autocomplete feature
|
|
34
36
|
*/
|
|
35
37
|
autoComplete?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Show a built-in clear (×) button while the field is focused. Opt-in:
|
|
40
|
+
* several consumers render their own clear affordance already (e.g.
|
|
41
|
+
* `SearchBar`), and a broad audit of every `Input` usage hasn't been done
|
|
42
|
+
* yet — see INPUT-MIGRATION-PLAN.md §07.
|
|
43
|
+
*/
|
|
44
|
+
clearable?: boolean;
|
|
36
45
|
}
|
|
37
46
|
/**
|
|
38
47
|
* Input Form Component
|
|
@@ -1,40 +1,57 @@
|
|
|
1
|
-
import { jsxs,
|
|
2
|
-
import { forwardRef, useState } from "react";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useRef, useState } from "react";
|
|
3
3
|
import clsx from "clsx";
|
|
4
|
+
import { useTranslation } from "react-i18next";
|
|
5
|
+
import SvgIconClose from "../../modules/icons/components/IconClose.js";
|
|
4
6
|
import { useFormControl } from "../Form/FormContext.js";
|
|
5
|
-
import Textcounter from "../TextCounter/TextCounter.js";
|
|
6
7
|
const Input = /* @__PURE__ */ forwardRef(({
|
|
7
|
-
noValidationIcon,
|
|
8
8
|
placeholder,
|
|
9
9
|
size = "md",
|
|
10
10
|
type = "text",
|
|
11
11
|
className,
|
|
12
12
|
showCounter = !1,
|
|
13
13
|
autoComplete = "off",
|
|
14
|
+
clearable = !1,
|
|
15
|
+
noValidationIcon: _noValidationIcon,
|
|
14
16
|
...restProps
|
|
15
|
-
},
|
|
17
|
+
}, forwardedRef) => {
|
|
16
18
|
var _a;
|
|
17
19
|
const {
|
|
18
20
|
id,
|
|
19
21
|
isRequired,
|
|
20
22
|
isReadOnly,
|
|
21
23
|
status
|
|
22
|
-
} = useFormControl(),
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
}, className)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
24
|
+
} = useFormControl(), {
|
|
25
|
+
t
|
|
26
|
+
} = useTranslation(), inputRef = useRef(null), [currentLength, setCurrentLength] = useState(((_a = restProps.defaultValue) == null ? void 0 : _a.toString().length) || 0), setRefs = (node) => {
|
|
27
|
+
inputRef.current = node, typeof forwardedRef == "function" ? forwardedRef(node) : forwardedRef && (forwardedRef.current = node);
|
|
28
|
+
}, wrapperClasses = clsx("input", {
|
|
29
|
+
"input--lg": size === "lg",
|
|
30
|
+
"input--invalid": status === "invalid",
|
|
31
|
+
"input--valid": status === "valid",
|
|
32
|
+
"input--plaintext": isReadOnly
|
|
33
|
+
}, className), handleChange = (e) => {
|
|
34
|
+
var _a2;
|
|
35
|
+
setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
|
|
36
|
+
}, handleClear = () => {
|
|
37
|
+
var _a2;
|
|
38
|
+
const node = inputRef.current;
|
|
39
|
+
if (!node) return;
|
|
40
|
+
const nativeSetter = (_a2 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a2.set;
|
|
41
|
+
nativeSetter == null || nativeSetter.call(node, ""), node.dispatchEvent(new Event("input", {
|
|
42
|
+
bubbles: !0
|
|
43
|
+
})), node.focus();
|
|
44
|
+
}, maxLength = restProps.maxLength ?? 0;
|
|
45
|
+
return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
|
|
46
|
+
/* @__PURE__ */ jsx("input", { ref: setRefs, id, className: "input__field", type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps, onChange: handleChange, autoComplete }),
|
|
47
|
+
clearable && !isReadOnly && /* @__PURE__ */ jsx("button", { type: "button", className: "input__clear", onClick: handleClear, "aria-label": t("clear"), children: /* @__PURE__ */ jsx(SvgIconClose, {}) }),
|
|
48
|
+
showCounter && /* @__PURE__ */ jsxs("span", { className: clsx("input__counter", {
|
|
49
|
+
"input__counter--max": currentLength === maxLength
|
|
50
|
+
}), children: [
|
|
51
|
+
currentLength,
|
|
52
|
+
" / ",
|
|
53
|
+
maxLength
|
|
54
|
+
] })
|
|
38
55
|
] });
|
|
39
56
|
});
|
|
40
57
|
export {
|
|
@@ -16,8 +16,8 @@ const Label = /* @__PURE__ */ forwardRef(({
|
|
|
16
16
|
isRequired
|
|
17
17
|
} = useFormControl(), {
|
|
18
18
|
t
|
|
19
|
-
} = useTranslation(), classes = clsx("
|
|
20
|
-
"has-icon": leftIcon
|
|
19
|
+
} = useTranslation(), classes = clsx("input-label", {
|
|
20
|
+
"input-label--has-icon": leftIcon
|
|
21
21
|
}, className), optionalState = isOptional && !isRequired, requiredState = isRequired && !isOptional;
|
|
22
22
|
return useEffect(() => {
|
|
23
23
|
if (isOptional && isRequired)
|
|
@@ -25,11 +25,11 @@ const Label = /* @__PURE__ */ forwardRef(({
|
|
|
25
25
|
}, [isOptional, isRequired]), /* @__PURE__ */ jsxs("label", { ref, htmlFor: id, className: classes, children: [
|
|
26
26
|
leftIcon,
|
|
27
27
|
children,
|
|
28
|
-
optionalState && /* @__PURE__ */ jsxs("em", { className: "
|
|
28
|
+
optionalState && /* @__PURE__ */ jsxs("em", { className: "input-label__optional", children: [
|
|
29
29
|
"- ",
|
|
30
30
|
optionalText ?? t("explorer.optional")
|
|
31
31
|
] }),
|
|
32
|
-
requiredState && /* @__PURE__ */ jsx("em", { className: "
|
|
32
|
+
requiredState && /* @__PURE__ */ jsx("em", { className: "input-label__required", children: requiredText })
|
|
33
33
|
] });
|
|
34
34
|
});
|
|
35
35
|
export {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type LinkPillIllustrationType = 'icon' | 'img';
|
|
3
|
+
export type LinkPillIllustrationPosition = 'left' | 'right';
|
|
4
|
+
export interface LinkPillProps {
|
|
5
|
+
/**
|
|
6
|
+
* URL opened in a new tab when the pill is clicked.
|
|
7
|
+
*/
|
|
8
|
+
href: string;
|
|
9
|
+
/**
|
|
10
|
+
* Text displayed inside the pill (single line, ellipsis on overflow).
|
|
11
|
+
*/
|
|
12
|
+
label: string;
|
|
13
|
+
/**
|
|
14
|
+
* Optional second line displayed below the label (single line, ellipsis
|
|
15
|
+
* on overflow). Does not affect the label's font size.
|
|
16
|
+
*/
|
|
17
|
+
subtitle?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Illustration node. Defaults to `<IconLink />` for the `icon` type.
|
|
20
|
+
* For the `img` type, the caller must provide an `<img>` element.
|
|
21
|
+
*/
|
|
22
|
+
illustration?: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* `icon` (default): illustration wrapped in a small rounded box.
|
|
25
|
+
* `img`: illustration rendered as a 36x36 rounded square (e.g. a favicon).
|
|
26
|
+
*/
|
|
27
|
+
illustrationType?: LinkPillIllustrationType;
|
|
28
|
+
/**
|
|
29
|
+
* Side the illustration is displayed on.
|
|
30
|
+
*/
|
|
31
|
+
illustrationPosition?: LinkPillIllustrationPosition;
|
|
32
|
+
/**
|
|
33
|
+
* Optional class for styling purpose
|
|
34
|
+
*/
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* LinkPill – design system component used to display a link to an
|
|
39
|
+
* external resource as a small rounded pill.
|
|
40
|
+
*/
|
|
41
|
+
declare const LinkPill: {
|
|
42
|
+
({ href, label, subtitle, illustration, illustrationType, illustrationPosition, className, }: LinkPillProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
displayName: string;
|
|
44
|
+
};
|
|
45
|
+
export default LinkPill;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import SvgIconLink from "../../modules/icons/components/IconLink.js";
|
|
4
|
+
const LinkPill = ({
|
|
5
|
+
href,
|
|
6
|
+
label,
|
|
7
|
+
subtitle,
|
|
8
|
+
illustration,
|
|
9
|
+
illustrationType = "icon",
|
|
10
|
+
illustrationPosition = "left",
|
|
11
|
+
className
|
|
12
|
+
}) => {
|
|
13
|
+
const illustrationNode = illustrationType === "icon" ? /* @__PURE__ */ jsx("span", { className: "link-pill-icon", children: illustration ?? /* @__PURE__ */ jsx(SvgIconLink, {}) }) : /* @__PURE__ */ jsx("span", { className: "link-pill-image", children: illustration }), contentNode = /* @__PURE__ */ jsxs("span", { className: "link-pill-content", children: [
|
|
14
|
+
/* @__PURE__ */ jsx("span", { className: "link-pill-label", title: label, children: label }),
|
|
15
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "link-pill-subtitle", title: subtitle, children: subtitle })
|
|
16
|
+
] });
|
|
17
|
+
return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", "data-testid": "link-pill", className: clsx("link-pill", `link-pill--illustration-${illustrationPosition}`, className), children: illustrationPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
18
|
+
illustrationNode,
|
|
19
|
+
contentNode
|
|
20
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
21
|
+
contentNode,
|
|
22
|
+
illustrationNode
|
|
23
|
+
] }) });
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
LinkPill as default
|
|
27
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
export type ModalBetaElement = HTMLDivElement;
|
|
2
|
+
export type ModalBetaSize = 's' | 'm' | 'l' | 'xl';
|
|
3
|
+
export interface ModalBetaProps {
|
|
4
|
+
/**
|
|
5
|
+
* Modal id (useful when multiple modal on the same page)
|
|
6
|
+
*/
|
|
7
|
+
id: string;
|
|
8
|
+
/**
|
|
9
|
+
* Modal testid
|
|
10
|
+
*/
|
|
11
|
+
['data-testid']?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Is Modal Open
|
|
14
|
+
*/
|
|
15
|
+
isOpen: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Function to call when closing modal
|
|
18
|
+
*/
|
|
19
|
+
onModalClose: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Size of the modal (width, padding and corner radius)
|
|
22
|
+
*/
|
|
23
|
+
size?: ModalBetaSize;
|
|
24
|
+
/**
|
|
25
|
+
* ID of the HTML element to receive focus when modal is active.
|
|
26
|
+
*/
|
|
27
|
+
focusId?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Children
|
|
30
|
+
*/
|
|
31
|
+
children: React.ReactNode;
|
|
32
|
+
}
|
|
33
|
+
declare const ModalBeta: import('react').ForwardRefExoticComponent<ModalBetaProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
34
|
+
Header: {
|
|
35
|
+
({ onModalClose, children, subtitle, }: import('./ModalBetaHeader').ModalBetaHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
Body: {
|
|
39
|
+
({ children, className }: import('./ModalBetaBody').ModalBetaBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
42
|
+
Footer: {
|
|
43
|
+
({ children }: import('./ModalBetaFooter').ModalBetaFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
displayName: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
export default ModalBeta;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback, useEffect } from "react";
|
|
3
|
+
import { useTransition, animated } from "@react-spring/web";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import ModalBetaBody from "./ModalBetaBody.js";
|
|
6
|
+
import { ModalBetaContext } from "./ModalBetaContext.js";
|
|
7
|
+
import ModalBetaFooter from "./ModalBetaFooter.js";
|
|
8
|
+
import ModalBetaHeader from "./ModalBetaHeader.js";
|
|
9
|
+
import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
|
|
10
|
+
import useTrapFocus from "../../hooks/useTrapFocus/useTrapFocus.js";
|
|
11
|
+
import useKeyPress from "../../hooks/useKeyPress/useKeyPress.js";
|
|
12
|
+
const Root = /* @__PURE__ */ forwardRef(({
|
|
13
|
+
id,
|
|
14
|
+
isOpen,
|
|
15
|
+
onModalClose,
|
|
16
|
+
size = "m",
|
|
17
|
+
focusId,
|
|
18
|
+
children,
|
|
19
|
+
...otherDivProps
|
|
20
|
+
}, ref) => {
|
|
21
|
+
const ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose, void 0, void 0, isOpen), trapRef = useTrapFocus(isOpen), setDialogRef = useCallback((node) => {
|
|
22
|
+
modalRef.current = node, trapRef.current = node;
|
|
23
|
+
}, [modalRef, trapRef]);
|
|
24
|
+
useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
|
|
25
|
+
if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
|
|
26
|
+
const elem = document.getElementById(focusId);
|
|
27
|
+
elem == null || elem.focus();
|
|
28
|
+
}
|
|
29
|
+
return () => {
|
|
30
|
+
document.body.style.overflow = "";
|
|
31
|
+
};
|
|
32
|
+
}, [focusId, isOpen]);
|
|
33
|
+
const modalClasses = clsx("modal-beta", `modal-beta--${size}`), modalContextValue = {
|
|
34
|
+
ariaLabelId,
|
|
35
|
+
ariaDescriptionId,
|
|
36
|
+
focusId
|
|
37
|
+
}, transition = useTransition(isOpen, {
|
|
38
|
+
from: {
|
|
39
|
+
y: -20,
|
|
40
|
+
opacity: 0
|
|
41
|
+
},
|
|
42
|
+
enter: {
|
|
43
|
+
y: 0,
|
|
44
|
+
opacity: 1
|
|
45
|
+
},
|
|
46
|
+
leave: {
|
|
47
|
+
y: 20,
|
|
48
|
+
opacity: 0
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
return /* @__PURE__ */ jsx(ModalBetaContext.Provider, { value: modalContextValue, children: transition((style, isOpen2) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
+
isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, ...otherDivProps, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: setDialogRef, className: "modal-beta-dialog", children: /* @__PURE__ */ jsx("div", { className: "modal-beta-content", children }) }) }),
|
|
53
|
+
isOpen2 && /* @__PURE__ */ jsx("div", { className: "modal-beta-backdrop" })
|
|
54
|
+
] })) });
|
|
55
|
+
}), ModalBeta = Object.assign(Root, {
|
|
56
|
+
Header: ModalBetaHeader,
|
|
57
|
+
Body: ModalBetaBody,
|
|
58
|
+
Footer: ModalBetaFooter
|
|
59
|
+
});
|
|
60
|
+
export {
|
|
61
|
+
ModalBeta as default
|
|
62
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ModalBetaBodyProps {
|
|
3
|
+
/**
|
|
4
|
+
* Children
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Optional class for styling purpose
|
|
9
|
+
*/
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* ModalBeta Body
|
|
14
|
+
*/
|
|
15
|
+
declare const ModalBetaBody: {
|
|
16
|
+
({ children, className }: ModalBetaBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
};
|
|
19
|
+
export default ModalBetaBody;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { useModalBetaContext } from "./ModalBetaContext.js";
|
|
4
|
+
const ModalBetaBody = ({
|
|
5
|
+
children,
|
|
6
|
+
className
|
|
7
|
+
}) => {
|
|
8
|
+
const {
|
|
9
|
+
ariaDescriptionId
|
|
10
|
+
} = useModalBetaContext();
|
|
11
|
+
return /* @__PURE__ */ jsx("div", { id: ariaDescriptionId, className: clsx("modal-beta-body", className), children });
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
ModalBetaBody as default
|
|
15
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface ModalBetaContextProps {
|
|
2
|
+
ariaLabelId: string;
|
|
3
|
+
ariaDescriptionId: string;
|
|
4
|
+
focusId: string | undefined;
|
|
5
|
+
}
|
|
6
|
+
export declare const ModalBetaContext: import('react').Context<ModalBetaContextProps>;
|
|
7
|
+
export declare const useModalBetaContext: () => ModalBetaContextProps;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const ModalBetaContext = /* @__PURE__ */ createContext({
|
|
3
|
+
ariaLabelId: "",
|
|
4
|
+
ariaDescriptionId: "",
|
|
5
|
+
focusId: ""
|
|
6
|
+
}), useModalBetaContext = () => {
|
|
7
|
+
const context = useContext(ModalBetaContext);
|
|
8
|
+
if (!context)
|
|
9
|
+
throw new Error("Cannot be rendered outside the ModalBeta component");
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
ModalBetaContext,
|
|
14
|
+
useModalBetaContext
|
|
15
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ModalBetaFooterProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* ModalBeta Footer — right-aligns its children, typically two ButtonBeta
|
|
7
|
+
* (a ghost/tertiary action followed by the primary filled action).
|
|
8
|
+
*/
|
|
9
|
+
declare const ModalBetaFooter: {
|
|
10
|
+
({ children }: ModalBetaFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default ModalBetaFooter;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ModalBetaHeaderProps {
|
|
3
|
+
/**
|
|
4
|
+
* Method called on modal close
|
|
5
|
+
*/
|
|
6
|
+
onModalClose: () => void;
|
|
7
|
+
/**
|
|
8
|
+
* Modal title
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Optional text displayed below the title
|
|
13
|
+
*/
|
|
14
|
+
subtitle?: ReactNode;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* ModalBeta Header
|
|
18
|
+
*/
|
|
19
|
+
declare const ModalBetaHeader: {
|
|
20
|
+
({ onModalClose, children, subtitle, }: ModalBetaHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
23
|
+
export default ModalBetaHeader;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useEffect } from "react";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
import SvgIconClose from "../../modules/icons/components/IconClose.js";
|
|
5
|
+
import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
|
|
6
|
+
import { useModalBetaContext } from "./ModalBetaContext.js";
|
|
7
|
+
const ModalBetaHeader = ({
|
|
8
|
+
onModalClose,
|
|
9
|
+
children,
|
|
10
|
+
subtitle
|
|
11
|
+
}) => {
|
|
12
|
+
const {
|
|
13
|
+
ariaLabelId,
|
|
14
|
+
focusId
|
|
15
|
+
} = useModalBetaContext(), closeButtonRef = useRef(null), {
|
|
16
|
+
t
|
|
17
|
+
} = useTranslation();
|
|
18
|
+
return useEffect(() => {
|
|
19
|
+
var _a;
|
|
20
|
+
focusId || (_a = closeButtonRef.current) == null || _a.focus();
|
|
21
|
+
}, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-beta-header", children: [
|
|
22
|
+
/* @__PURE__ */ jsxs("div", { className: "modal-beta-title-row", children: [
|
|
23
|
+
/* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-beta-title", tabIndex: -1, children }),
|
|
24
|
+
/* @__PURE__ */ jsx(ButtonBeta, { ref: closeButtonRef, "aria-label": t("close"), title: t("close"), type: "button", variant: "ghost", color: "tertiary", leftIcon: /* @__PURE__ */ jsx(SvgIconClose, {}), onClick: onModalClose })
|
|
25
|
+
] }),
|
|
26
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "modal-beta-subtitle", children: subtitle })
|
|
27
|
+
] });
|
|
28
|
+
};
|
|
29
|
+
export {
|
|
30
|
+
ModalBetaHeader as default
|
|
31
|
+
};
|
|
@@ -13,7 +13,7 @@ declare const Table: import('react').ForwardRefExoticComponent<{
|
|
|
13
13
|
displayName: string;
|
|
14
14
|
};
|
|
15
15
|
Th: {
|
|
16
|
-
(props: React.
|
|
16
|
+
(props: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
};
|
|
19
19
|
Tbody: {
|
|
@@ -25,7 +25,7 @@ declare const Table: import('react').ForwardRefExoticComponent<{
|
|
|
25
25
|
displayName: string;
|
|
26
26
|
};
|
|
27
27
|
Td: {
|
|
28
|
-
(props: React.
|
|
28
|
+
(props: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
@@ -28,6 +28,7 @@ export * from './Image';
|
|
|
28
28
|
export * from './Input';
|
|
29
29
|
export * from './Label';
|
|
30
30
|
export * from './Layout';
|
|
31
|
+
export * from './LinkPill';
|
|
31
32
|
export * from './List';
|
|
32
33
|
export * from './Loading';
|
|
33
34
|
export * from './LoadingScreen';
|
|
@@ -36,6 +37,7 @@ export * from './LogoBeta';
|
|
|
36
37
|
export * from './MediaViewer';
|
|
37
38
|
export * from './Menu';
|
|
38
39
|
export * from './Modal';
|
|
40
|
+
export * from './ModalBeta';
|
|
39
41
|
export * from './PageLayout';
|
|
40
42
|
export * from './Pagination';
|
|
41
43
|
export * from './Popover';
|
package/dist/homepage.js
CHANGED
|
@@ -12,8 +12,13 @@ import { Favorites } from "./modules/homepage/components/Favorites/Favorites.js"
|
|
|
12
12
|
import { FavoritesContainer } from "./modules/homepage/components/Favorites/FavoritesContainer.js";
|
|
13
13
|
import { LastInfosContainer } from "./modules/homepage/components/LastInfos/LastInfosContainer.js";
|
|
14
14
|
import { LastInfosList } from "./modules/homepage/components/LastInfos/LastInfosList.js";
|
|
15
|
+
import { LinkForm } from "./modules/homepage/components/UsefulLinks/LinkForm.js";
|
|
16
|
+
import { MAX_USEFUL_LINKS, useUsefulLinksContainer } from "./modules/homepage/components/UsefulLinks/hooks/useUsefulLinksContainer.js";
|
|
15
17
|
import { MessageFlashListContainer } from "./modules/homepage/components/MessageFlashList/MessageFlashListContainer.js";
|
|
16
18
|
import { SchoolSpaceContainer } from "./modules/homepage/components/SchoolSpace/SchoolSpaceContainer.js";
|
|
19
|
+
import { UsefulLinks } from "./modules/homepage/components/UsefulLinks/UsefulLinks.js";
|
|
20
|
+
import { UsefulLinksContainer } from "./modules/homepage/components/UsefulLinks/UsefulLinksContainer.js";
|
|
21
|
+
import { UsefulLinksModal } from "./modules/homepage/components/UsefulLinks/UsefulLinksModal.js";
|
|
17
22
|
import { UserSpaceContainer } from "./modules/homepage/components/UserSpace/UserSpaceContainer.js";
|
|
18
23
|
export {
|
|
19
24
|
Favorites,
|
|
@@ -23,6 +28,8 @@ export {
|
|
|
23
28
|
default4 as LastInfos,
|
|
24
29
|
LastInfosContainer,
|
|
25
30
|
LastInfosList,
|
|
31
|
+
LinkForm,
|
|
32
|
+
MAX_USEFUL_LINKS,
|
|
26
33
|
default5 as MessageFlash,
|
|
27
34
|
default6 as MessageFlashList,
|
|
28
35
|
MessageFlashListContainer,
|
|
@@ -31,6 +38,10 @@ export {
|
|
|
31
38
|
NotificationListContainer,
|
|
32
39
|
default9 as SchoolSpace,
|
|
33
40
|
SchoolSpaceContainer,
|
|
41
|
+
UsefulLinks,
|
|
42
|
+
UsefulLinksContainer,
|
|
43
|
+
UsefulLinksModal,
|
|
34
44
|
default10 as UserSpace,
|
|
35
|
-
UserSpaceContainer
|
|
45
|
+
UserSpaceContainer,
|
|
46
|
+
useUsefulLinksContainer
|
|
36
47
|
};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export * from './useUiOverride';
|
|
|
34
34
|
export * from './useUpload';
|
|
35
35
|
export * from './useUploadFiles';
|
|
36
36
|
export * from './useUser';
|
|
37
|
+
export * from './useUserPreferences';
|
|
37
38
|
export * from './useWorkspaceFile';
|
|
38
39
|
export * from './useWorkspaceFolders';
|
|
39
40
|
export * from './useWorkspaceSearch';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: Array<HTMLElement | null
|
|
1
|
+
export default function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: Array<HTMLElement | null>, enabled?: boolean): import('react').MutableRefObject<T | null>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useRef, useEffect } from "react";
|
|
2
2
|
const DEFAULT_EVENTS = ["mousedown", "touchstart"];
|
|
3
|
-
function useClickOutside(handler, events, nodes) {
|
|
3
|
+
function useClickOutside(handler, events, nodes, enabled = !0) {
|
|
4
4
|
const ref = useRef(null);
|
|
5
5
|
return useEffect(() => {
|
|
6
|
+
if (!enabled) return;
|
|
6
7
|
const listener = (event) => {
|
|
7
8
|
const {
|
|
8
9
|
target
|
|
@@ -19,7 +20,7 @@ function useClickOutside(handler, events, nodes) {
|
|
|
19
20
|
document.removeEventListener(fn, listener);
|
|
20
21
|
});
|
|
21
22
|
};
|
|
22
|
-
}, [ref, handler, nodes, events]), ref;
|
|
23
|
+
}, [ref, handler, nodes, events, enabled]), ref;
|
|
23
24
|
}
|
|
24
25
|
export {
|
|
25
26
|
useClickOutside as default
|
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/client';
|
|
2
|
-
/**
|
|
3
|
-
* Snapshot of a source file taken at upload time, so the upload result can be
|
|
4
|
-
* re-ordered later on against the original file metadata.
|
|
5
|
-
*/
|
|
6
|
-
export interface UploadSourceFileInfo {
|
|
7
|
-
/** Original file name. */
|
|
8
|
-
name: string;
|
|
9
|
-
/** `File.lastModified` of the source file (ms since epoch). */
|
|
10
|
-
lastModified: number;
|
|
11
|
-
}
|
|
12
2
|
declare const useUploadFiles: ({ handleOnChange, visibility, application, }: {
|
|
13
|
-
handleOnChange: (uploadedFiles: WorkspaceElement[]
|
|
3
|
+
handleOnChange: (uploadedFiles: WorkspaceElement[]) => void;
|
|
14
4
|
visibility?: WorkspaceVisibility;
|
|
15
5
|
application?: string;
|
|
16
6
|
}) => {
|