@edifice.io/react 2.6.9-develop-b2school.20261013134048 → 2.6.9-develop-pedago.20261013143657
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/Layout/Layout.js +4 -12
- package/dist/components/Layout/components/Header.js +4 -4
- package/dist/components/Layout/components/NavLink.d.ts +3 -3
- package/dist/components/Layout/components/NavLink.js +3 -5
- package/dist/components/index.d.ts +0 -1
- package/dist/homepage.js +0 -10
- package/dist/hooks/useZendeskGuide/useZendeskGuide.d.ts +6 -2
- package/dist/hooks/useZendeskGuide/useZendeskGuide.js +8 -11
- package/dist/icons.js +402 -404
- package/dist/index.js +136 -138
- package/dist/modules/HelpZone/HelpZone.js +8 -6
- package/dist/modules/HelpZone/HelpZoneContainer.js +5 -2
- package/dist/modules/homepage/components/Header/Header.js +11 -27
- package/dist/modules/homepage/components/HomeCard/HomeCardHeader.d.ts +1 -5
- package/dist/modules/homepage/components/HomeCard/HomeCardHeader.js +1 -1
- package/dist/modules/homepage/components/MessageFlashList/MessageFlash.js +1 -1
- package/dist/modules/homepage/components/Notifications/NotificationList.js +5 -5
- package/dist/modules/homepage/components/Notifications/NotificationSkeleton.js +2 -2
- package/dist/modules/homepage/components/Notifications/components/NotificationFilterMenu.js +5 -1
- package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.js +12 -10
- package/dist/modules/homepage/components/Notifications/components/NotificationOptionsMenu.js +9 -3
- package/dist/modules/homepage/components/Notifications/components/ReportNotificationModal.js +12 -6
- package/dist/modules/homepage/components/Notifications/components/notificationAdapter.js +10 -12
- package/dist/modules/homepage/components/Notifications/hooks/useNotificationList.js +10 -9
- package/dist/modules/homepage/components/UserSpace/UserSpace.d.ts +1 -3
- package/dist/modules/homepage/components/UserSpace/UserSpace.js +7 -13
- package/dist/modules/homepage/components/UserSpace/UserSpaceContainer.d.ts +2 -4
- package/dist/modules/homepage/components/UserSpace/UserSpaceContainer.js +2 -3
- package/dist/modules/homepage/components/index.d.ts +1 -3
- package/dist/modules/icons/components/index.d.ts +0 -1
- package/dist/modules/multimedia/MediaLibrary/MediaLibrary.d.ts +2 -0
- package/dist/modules/multimedia/MediaLibrary/MediaLibrary.js +2 -0
- package/dist/modules/multimedia/MediaLibrary/MediaLibraryContext.d.ts +4 -0
- package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.js +2 -1
- package/dist/modules/multimedia/MediaLibrary/innertabs/Workspace.js +3 -0
- package/package.json +6 -6
- package/dist/components/RadioTile/RadioTile.d.ts +0 -35
- package/dist/components/RadioTile/RadioTile.js +0 -22
- package/dist/components/RadioTile/index.d.ts +0 -2
- package/dist/modules/homepage/components/Agenda/Agenda.d.ts +0 -10
- package/dist/modules/homepage/components/Agenda/Agenda.js +0 -54
- package/dist/modules/homepage/components/Agenda/AgendaContainer.d.ts +0 -1
- package/dist/modules/homepage/components/Agenda/AgendaContainer.js +0 -14
- package/dist/modules/homepage/components/Agenda/AgendaEventCard.d.ts +0 -10
- package/dist/modules/homepage/components/Agenda/AgendaEventCard.js +0 -30
- package/dist/modules/homepage/components/Agenda/hooks/useAgendaContainer.d.ts +0 -14
- package/dist/modules/homepage/components/Agenda/hooks/useAgendaContainer.js +0 -27
- package/dist/modules/homepage/components/Agenda/index.d.ts +0 -3
- package/dist/modules/homepage/components/Agenda/services/api/agendaService.d.ts +0 -24
- package/dist/modules/homepage/components/Agenda/services/api/agendaService.js +0 -45
- package/dist/modules/homepage/components/Agenda/services/api/index.d.ts +0 -4
- package/dist/modules/homepage/components/Agenda/services/api/index.js +0 -5
- package/dist/modules/homepage/components/Agenda/services/queries/agenda.d.ts +0 -19
- package/dist/modules/homepage/components/Agenda/services/queries/agenda.js +0 -26
- package/dist/modules/homepage/components/Header/MyAppsPopover.d.ts +0 -5
- package/dist/modules/homepage/components/Header/MyAppsPopover.js +0 -28
- package/dist/modules/homepage/components/Header/useSafeHoverPopover.js +0 -32
- package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetToggle.d.ts +0 -16
- package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetToggle.js +0 -15
- package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetsPersonalizationPanel.d.ts +0 -21
- package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetsPersonalizationPanel.js +0 -47
- package/dist/modules/homepage/components/WidgetsPersonalizationPanel/index.d.ts +0 -2
- package/dist/modules/icons/components/IconAddWidget.d.ts +0 -7
- package/dist/modules/icons/components/IconAddWidget.js +0 -12
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { CalendarEvent } from '@edifice.io/client';
|
|
2
|
-
/** Number of upcoming events shown by the widget. */
|
|
3
|
-
export declare const MAX_VISIBLE_EVENTS = 3;
|
|
4
|
-
export interface UseAgendaContainerReturn {
|
|
5
|
-
events: CalendarEvent[];
|
|
6
|
-
isLoading: boolean;
|
|
7
|
-
error: Error | null;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Loads the current user's calendars, then their events, and keeps only the
|
|
11
|
-
* next `MAX_VISIBLE_EVENTS` events that haven't fully elapsed yet — an event
|
|
12
|
-
* still in progress (end date in the future) counts as "upcoming" too.
|
|
13
|
-
*/
|
|
14
|
-
export declare const useAgendaContainer: () => UseAgendaContainerReturn;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import dayjs from "dayjs";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
|
-
import { useCalendars, useEvents } from "../services/queries/agenda.js";
|
|
4
|
-
const MAX_VISIBLE_EVENTS = 3, useAgendaContainer = () => {
|
|
5
|
-
const {
|
|
6
|
-
data: calendars,
|
|
7
|
-
isLoading: isLoadingCalendars,
|
|
8
|
-
error: calendarsError
|
|
9
|
-
} = useCalendars(), calendarIds = useMemo(() => (calendars == null ? void 0 : calendars.map((calendar) => calendar.id)) ?? [], [calendars]), {
|
|
10
|
-
data: rawEvents,
|
|
11
|
-
isLoading: isLoadingEvents,
|
|
12
|
-
error: eventsError
|
|
13
|
-
} = useEvents(calendarIds, MAX_VISIBLE_EVENTS);
|
|
14
|
-
return {
|
|
15
|
-
events: useMemo(() => {
|
|
16
|
-
if (!rawEvents) return [];
|
|
17
|
-
const now = dayjs();
|
|
18
|
-
return rawEvents.filter((event) => dayjs(event.endMoment).isAfter(now)).sort((a, b) => dayjs(a.startMoment).diff(dayjs(b.startMoment))).slice(0, MAX_VISIBLE_EVENTS);
|
|
19
|
-
}, [rawEvents]),
|
|
20
|
-
isLoading: isLoadingCalendars || isLoadingEvents,
|
|
21
|
-
error: calendarsError ?? eventsError
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
export {
|
|
25
|
-
MAX_VISIBLE_EVENTS,
|
|
26
|
-
useAgendaContainer
|
|
27
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Calendar, CalendarEvent } from '@edifice.io/client';
|
|
2
|
-
/**
|
|
3
|
-
* Creates an agenda service with methods to fetch the current user's
|
|
4
|
-
* calendars and upcoming events (homepage "Agenda" widget).
|
|
5
|
-
*
|
|
6
|
-
* Backend contract (provisional, see IMPULS-5880/IMPULS-6095): `GET
|
|
7
|
-
* /calendar/calendars` lists the user's calendars, `GET
|
|
8
|
-
* /calendar/events/widget?calendarId=...&nb=N` returns up to `N` events for
|
|
9
|
-
* the given calendars. Whether that second endpoint already excludes past
|
|
10
|
-
* (fully elapsed) events isn't guaranteed, so callers should re-apply that
|
|
11
|
-
* filter themselves.
|
|
12
|
-
*
|
|
13
|
-
* @param baseURL The base URL for the agenda service API.
|
|
14
|
-
*/
|
|
15
|
-
export declare const createAgendaService: (baseURL: string) => {
|
|
16
|
-
/**
|
|
17
|
-
* Get the calendars the current user can see events from.
|
|
18
|
-
*/
|
|
19
|
-
getCalendars(): Promise<Calendar[]>;
|
|
20
|
-
/**
|
|
21
|
-
* Get up to `nb` events for the given calendars, in no particular order.
|
|
22
|
-
*/
|
|
23
|
-
getEvents(calendarIds: string[], nb: number): Promise<CalendarEvent[]>;
|
|
24
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { odeServices } from "@edifice.io/client";
|
|
2
|
-
const toCalendar = ({
|
|
3
|
-
_id,
|
|
4
|
-
title,
|
|
5
|
-
color,
|
|
6
|
-
isExternal
|
|
7
|
-
}) => ({
|
|
8
|
-
id: _id,
|
|
9
|
-
title,
|
|
10
|
-
color,
|
|
11
|
-
isExternal
|
|
12
|
-
}), toCalendarEvent = ({
|
|
13
|
-
_id,
|
|
14
|
-
title,
|
|
15
|
-
allday,
|
|
16
|
-
startMoment,
|
|
17
|
-
endMoment,
|
|
18
|
-
calendar
|
|
19
|
-
}) => ({
|
|
20
|
-
id: _id,
|
|
21
|
-
calendarId: calendar[0],
|
|
22
|
-
title,
|
|
23
|
-
startMoment,
|
|
24
|
-
endMoment,
|
|
25
|
-
allDay: allday
|
|
26
|
-
}), createAgendaService = (baseURL) => ({
|
|
27
|
-
/**
|
|
28
|
-
* Get the calendars the current user can see events from.
|
|
29
|
-
*/
|
|
30
|
-
async getCalendars() {
|
|
31
|
-
return (await odeServices.http().get(`${baseURL}/calendar/calendars`)).map(toCalendar);
|
|
32
|
-
},
|
|
33
|
-
/**
|
|
34
|
-
* Get up to `nb` events for the given calendars, in no particular order.
|
|
35
|
-
*/
|
|
36
|
-
async getEvents(calendarIds, nb) {
|
|
37
|
-
if (calendarIds.length === 0)
|
|
38
|
-
return [];
|
|
39
|
-
const query = new URLSearchParams();
|
|
40
|
-
return calendarIds.forEach((id) => query.append("calendarId", id)), query.set("nb", String(nb)), (await odeServices.http().get(`${baseURL}/calendar/events/widget?${query.toString()}`)).map(toCalendarEvent);
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
export {
|
|
44
|
-
createAgendaService
|
|
45
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Calendar, CalendarEvent } from '@edifice.io/client';
|
|
2
|
-
export declare const agendaQueryKeys: {
|
|
3
|
-
calendars: () => readonly ["agenda", "calendars"];
|
|
4
|
-
events: (calendarIds: string[], nb: number) => readonly ["agenda", "events", string[], number];
|
|
5
|
-
};
|
|
6
|
-
export declare const agendaQueryOptions: {
|
|
7
|
-
getCalendars(): import('@tanstack/react-query').OmitKeyof<import('@tanstack/react-query').UseQueryOptions<Calendar[], Error, Calendar[], import('@tanstack/react-query').QueryKey>, "queryFn"> & {
|
|
8
|
-
queryFn?: import('@tanstack/react-query').QueryFunction<Calendar[], import('@tanstack/react-query').QueryKey, never> | undefined;
|
|
9
|
-
} & {
|
|
10
|
-
queryKey: import('@tanstack/react-query').DataTag<import('@tanstack/react-query').QueryKey, Calendar[]>;
|
|
11
|
-
};
|
|
12
|
-
getEvents(calendarIds: string[], nb: number): import('@tanstack/react-query').OmitKeyof<import('@tanstack/react-query').UseQueryOptions<CalendarEvent[], Error, CalendarEvent[], import('@tanstack/react-query').QueryKey>, "queryFn"> & {
|
|
13
|
-
queryFn?: import('@tanstack/react-query').QueryFunction<CalendarEvent[], import('@tanstack/react-query').QueryKey, never> | undefined;
|
|
14
|
-
} & {
|
|
15
|
-
queryKey: import('@tanstack/react-query').DataTag<import('@tanstack/react-query').QueryKey, CalendarEvent[]>;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export declare const useCalendars: () => import('@tanstack/react-query').UseQueryResult<Calendar[], Error>;
|
|
19
|
-
export declare const useEvents: (calendarIds: string[], nb: number) => import('@tanstack/react-query').UseQueryResult<CalendarEvent[], Error>;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useQuery, queryOptions } from "@tanstack/react-query";
|
|
2
|
-
import { agendaService } from "../api/index.js";
|
|
3
|
-
const agendaQueryKeys = {
|
|
4
|
-
calendars: () => ["agenda", "calendars"],
|
|
5
|
-
events: (calendarIds, nb) => ["agenda", "events", calendarIds, nb]
|
|
6
|
-
}, agendaQueryOptions = {
|
|
7
|
-
getCalendars() {
|
|
8
|
-
return queryOptions({
|
|
9
|
-
queryKey: agendaQueryKeys.calendars(),
|
|
10
|
-
queryFn: async () => agendaService.getCalendars()
|
|
11
|
-
});
|
|
12
|
-
},
|
|
13
|
-
getEvents(calendarIds, nb) {
|
|
14
|
-
return queryOptions({
|
|
15
|
-
queryKey: agendaQueryKeys.events(calendarIds, nb),
|
|
16
|
-
queryFn: async () => agendaService.getEvents(calendarIds, nb),
|
|
17
|
-
enabled: calendarIds.length > 0
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
}, useCalendars = () => useQuery(agendaQueryOptions.getCalendars()), useEvents = (calendarIds, nb) => useQuery(agendaQueryOptions.getEvents(calendarIds, nb));
|
|
21
|
-
export {
|
|
22
|
-
agendaQueryKeys,
|
|
23
|
-
agendaQueryOptions,
|
|
24
|
-
useCalendars,
|
|
25
|
-
useEvents
|
|
26
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { IWebApp } from '@edifice.io/client';
|
|
2
|
-
export declare const MyAppsPopoverFooter: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare const MyAppsPopoverBody: ({ bookmarkedApps, }: {
|
|
4
|
-
bookmarkedApps: IWebApp[] | undefined;
|
|
5
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useTranslation } from "react-i18next";
|
|
3
|
-
import illuEmptyFavorite from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-favorite.svg";
|
|
4
|
-
import Flex from "../../../../components/Flex/Flex.js";
|
|
5
|
-
import AppIcon from "../../../../components/AppIcon/AppIcon.js";
|
|
6
|
-
const MAX_VISIBLE_APPS = 10, appToOpenOnBlank = ["Administration"], MyAppsPopoverFooter = () => {
|
|
7
|
-
const {
|
|
8
|
-
t
|
|
9
|
-
} = useTranslation();
|
|
10
|
-
return /* @__PURE__ */ jsx("a", { href: "/welcome", className: "btn-beta btn-beta-tertiary btn-beta--ghost btn-beta--small", "data-testid": "header-my-apps-popover-more", children: /* @__PURE__ */ jsx("span", { children: t("homepage.header.myapps.seeMore") }) });
|
|
11
|
-
}, MyAppsPopoverBody = ({
|
|
12
|
-
bookmarkedApps
|
|
13
|
-
}) => {
|
|
14
|
-
const {
|
|
15
|
-
t
|
|
16
|
-
} = useTranslation(), getAppName = (app) => app.prefix && app.prefix.length > 1 ? t(app.prefix.substring(1)) : t(app.displayName) || "";
|
|
17
|
-
return bookmarkedApps != null && bookmarkedApps.length ? /* @__PURE__ */ jsx("div", { className: "my-apps-popover-grid", "data-testid": "header-my-apps-popover", children: bookmarkedApps.slice(0, MAX_VISIBLE_APPS).map((app, index) => {
|
|
18
|
-
const opensInNewTab = appToOpenOnBlank.includes(app.name) || app.isExternal || app.target === "_blank", appName = getAppName(app);
|
|
19
|
-
return /* @__PURE__ */ jsx("a", { href: app.address, title: appName, "aria-label": appName, className: "my-apps-popover-item", "data-testid": "header-my-apps-popover-item", target: opensInNewTab ? "_blank" : void 0, rel: opensInNewTab ? "noopener noreferrer" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index);
|
|
20
|
-
}) }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "8", children: [
|
|
21
|
-
/* @__PURE__ */ jsx("img", { src: illuEmptyFavorite, alt: "", width: 50, height: 50 }),
|
|
22
|
-
/* @__PURE__ */ jsx("span", { className: "my-apps-popover-empty-text text-center", children: t("homepage.header.myapps.empty") })
|
|
23
|
-
] });
|
|
24
|
-
};
|
|
25
|
-
export {
|
|
26
|
-
MyAppsPopoverBody,
|
|
27
|
-
MyAppsPopoverFooter
|
|
28
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
2
|
-
import { useFloating, useHover, safePolygon, useClick, useDismiss, useFocus, useInteractions } from "@floating-ui/react";
|
|
3
|
-
function useSafeHoverPopover({
|
|
4
|
-
hoverEnabled = !0,
|
|
5
|
-
clickEnabled = !1
|
|
6
|
-
} = {}) {
|
|
7
|
-
const [open, setOpen] = useState(!1), {
|
|
8
|
-
refs,
|
|
9
|
-
context
|
|
10
|
-
} = useFloating({
|
|
11
|
-
open,
|
|
12
|
-
onOpenChange: setOpen
|
|
13
|
-
}), hover = useHover(context, {
|
|
14
|
-
enabled: hoverEnabled,
|
|
15
|
-
handleClose: safePolygon()
|
|
16
|
-
}), click = useClick(context, {
|
|
17
|
-
enabled: clickEnabled
|
|
18
|
-
}), dismiss = useDismiss(context), focus = useFocus(context), {
|
|
19
|
-
getReferenceProps,
|
|
20
|
-
getFloatingProps
|
|
21
|
-
} = useInteractions([hover, click, dismiss, focus]);
|
|
22
|
-
return {
|
|
23
|
-
open,
|
|
24
|
-
setReference: refs.setReference,
|
|
25
|
-
setFloating: refs.setFloating,
|
|
26
|
-
getReferenceProps,
|
|
27
|
-
getFloatingProps
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
export {
|
|
31
|
-
useSafeHoverPopover
|
|
32
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
export interface WidgetToggleProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'type' | 'role' | 'aria-checked'> {
|
|
3
|
-
'checked': boolean;
|
|
4
|
-
'onChange': () => void;
|
|
5
|
-
'aria-label': string;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* Dedicated on/off control for a widget row in `WidgetsPersonalizationPanel`.
|
|
9
|
-
* The generic `Switch` component doesn't match this panel's design (size,
|
|
10
|
-
* filled-vs-outlined states), so this is a small purpose-built control
|
|
11
|
-
* rather than a `Switch` variant.
|
|
12
|
-
*/
|
|
13
|
-
export declare function WidgetToggle({ checked, onChange, disabled, ...rest }: WidgetToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare namespace WidgetToggle {
|
|
15
|
-
var displayName: string;
|
|
16
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
function WidgetToggle({
|
|
4
|
-
checked,
|
|
5
|
-
onChange,
|
|
6
|
-
disabled,
|
|
7
|
-
...rest
|
|
8
|
-
}) {
|
|
9
|
-
return /* @__PURE__ */ jsx("button", { type: "button", role: "switch", "aria-checked": checked, disabled, className: clsx("widget-toggle", {
|
|
10
|
-
"widget-toggle--checked": checked
|
|
11
|
-
}), onClick: onChange, ...rest, children: /* @__PURE__ */ jsx("span", { className: "widget-toggle__knob" }) });
|
|
12
|
-
}
|
|
13
|
-
export {
|
|
14
|
-
WidgetToggle
|
|
15
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export interface WidgetPersonalizationItem {
|
|
3
|
-
id: string;
|
|
4
|
-
label: string;
|
|
5
|
-
icon: ReactNode;
|
|
6
|
-
checked: boolean;
|
|
7
|
-
/** When true, the widget is pinned by an admin: no toggle, lock icon instead. */
|
|
8
|
-
locked?: boolean;
|
|
9
|
-
}
|
|
10
|
-
export interface WidgetsPersonalizationPanelProps {
|
|
11
|
-
items: WidgetPersonalizationItem[];
|
|
12
|
-
isLoading?: boolean;
|
|
13
|
-
onToggle: (id: string) => void;
|
|
14
|
-
onClose: () => void;
|
|
15
|
-
title?: string;
|
|
16
|
-
description?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare function WidgetsPersonalizationPanel({ items, isLoading, onToggle, onClose, title, description, }: WidgetsPersonalizationPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export declare namespace WidgetsPersonalizationPanel {
|
|
20
|
-
var displayName: string;
|
|
21
|
-
}
|
package/dist/modules/homepage/components/WidgetsPersonalizationPanel/WidgetsPersonalizationPanel.js
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useTranslation } from "react-i18next";
|
|
3
|
-
import clsx from "clsx";
|
|
4
|
-
import SvgIconClose from "../../../icons/components/IconClose.js";
|
|
5
|
-
import SvgIconLock from "../../../icons/components/IconLock.js";
|
|
6
|
-
import { WidgetToggle } from "./WidgetToggle.js";
|
|
7
|
-
import Heading from "../../../../components/Heading/Heading.js";
|
|
8
|
-
import IconButton from "../../../../components/Button/IconButton.js";
|
|
9
|
-
import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
|
|
10
|
-
const SKELETON_ROWS = 5;
|
|
11
|
-
function WidgetsPersonalizationPanel({
|
|
12
|
-
items,
|
|
13
|
-
isLoading = !1,
|
|
14
|
-
onToggle,
|
|
15
|
-
onClose,
|
|
16
|
-
title,
|
|
17
|
-
description
|
|
18
|
-
}) {
|
|
19
|
-
const {
|
|
20
|
-
t
|
|
21
|
-
} = useTranslation();
|
|
22
|
-
return /* @__PURE__ */ jsxs("div", { className: "widgets-personalization-panel", children: [
|
|
23
|
-
/* @__PURE__ */ jsxs("div", { className: "widgets-personalization-panel__header", children: [
|
|
24
|
-
/* @__PURE__ */ jsx(Heading, { level: "h2", headingStyle: "h5", className: "widgets-personalization-panel__title", children: title ?? t("homepage.widgetsPersonalization.title") }),
|
|
25
|
-
/* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, {}), variant: "ghost", color: "tertiary", "aria-label": t("close"), onClick: onClose, "data-testid": "widgetspersonalization-button-close" })
|
|
26
|
-
] }),
|
|
27
|
-
/* @__PURE__ */ jsx("p", { className: "widgets-personalization-panel__description", children: description ?? t("homepage.widgetsPersonalization.description") }),
|
|
28
|
-
isLoading ? /* @__PURE__ */ jsx("ul", { className: "widgets-personalization-panel__list", "aria-hidden": "true", children: Array.from({
|
|
29
|
-
length: SKELETON_ROWS
|
|
30
|
-
}).map((_, index) => /* @__PURE__ */ jsxs("li", { className: "widgets-personalization-panel__item widgets-personalization-panel__item--skeleton", children: [
|
|
31
|
-
/* @__PURE__ */ jsx(TextSkeleton, { className: "widgets-personalization-panel__item-icon-skeleton" }),
|
|
32
|
-
/* @__PURE__ */ jsx(TextSkeleton, { className: "widgets-personalization-panel__item-label-skeleton" })
|
|
33
|
-
] }, index)) }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "widgets-personalization-panel__empty", children: /* @__PURE__ */ jsx("p", { className: "widgets-personalization-panel__empty-text", children: t("homepage.widgetsPersonalization.empty") }) }) : /* @__PURE__ */ jsx("ul", { className: "widgets-personalization-panel__list", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: clsx("widgets-personalization-panel__item", {
|
|
34
|
-
"widgets-personalization-panel__item--checked": item.checked && !item.locked,
|
|
35
|
-
"widgets-personalization-panel__item--locked": item.locked
|
|
36
|
-
}), "data-testid": `widgetspersonalization-item-${item.id}`, children: [
|
|
37
|
-
/* @__PURE__ */ jsx("span", { className: "widgets-personalization-panel__item-icon", "aria-hidden": "true", children: item.icon }),
|
|
38
|
-
/* @__PURE__ */ jsx("span", { className: "widgets-personalization-panel__item-label", children: item.label }),
|
|
39
|
-
item.locked ? /* @__PURE__ */ jsx("span", { className: "widgets-personalization-panel__item-lock", role: "img", "aria-label": t("homepage.widgetsPersonalization.locked"), "data-testid": `widgetspersonalization-lock-${item.id}`, children: /* @__PURE__ */ jsx(SvgIconLock, {}) }) : /* @__PURE__ */ jsx(WidgetToggle, { checked: item.checked, onChange: () => onToggle(item.id), "aria-label": t("homepage.widgetsPersonalization.toggle", {
|
|
40
|
-
label: item.label
|
|
41
|
-
}), "data-testid": `widgetspersonalization-toggle-${item.id}` })
|
|
42
|
-
] }, item.id)) })
|
|
43
|
-
] });
|
|
44
|
-
}
|
|
45
|
-
export {
|
|
46
|
-
WidgetsPersonalizationPanel
|
|
47
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { SVGProps } from 'react';
|
|
2
|
-
interface SVGRProps {
|
|
3
|
-
title?: string;
|
|
4
|
-
titleId?: string;
|
|
5
|
-
}
|
|
6
|
-
declare const SvgIconAddWidget: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export default SvgIconAddWidget;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
const SvgIconAddWidget = ({
|
|
3
|
-
title,
|
|
4
|
-
titleId,
|
|
5
|
-
...props
|
|
6
|
-
}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 20 20", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
|
|
7
|
-
title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
|
|
8
|
-
/* @__PURE__ */ jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.834 10.833c.46 0 .833.373.833.834v2.5h2.5a.833.833 0 0 1 0 1.666h-2.5v2.5a.833.833 0 0 1-1.667 0v-2.5h-2.5a.833.833 0 0 1 0-1.666H15v-2.5c0-.46.373-.834.834-.834M8.333 3.333A.833.833 0 0 0 7.5 2.5h-5a.833.833 0 0 0-.833.833v13.334c0 .46.373.833.833.833h5c.46 0 .833-.373.833-.833zM10 16.667a2.5 2.5 0 0 1-2.5 2.5h-5a2.5 2.5 0 0 1-2.5-2.5V3.333a2.5 2.5 0 0 1 2.5-2.5h5a2.5 2.5 0 0 1 2.5 2.5zM18.334 3.333A.833.833 0 0 0 17.5 2.5h-3.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H17.5c.46 0 .834-.373.834-.833zM20 6.667a2.5 2.5 0 0 1-2.5 2.5h-3.333a2.5 2.5 0 0 1-2.5-2.5V3.333a2.5 2.5 0 0 1 2.5-2.5H17.5a2.5 2.5 0 0 1 2.5 2.5z", clipRule: "evenodd" })
|
|
9
|
-
] });
|
|
10
|
-
export {
|
|
11
|
-
SvgIconAddWidget as default
|
|
12
|
-
};
|