@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

package/lib/cjs/utils/widget.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stateWidgetInitializer = exports.dataWidgetReducer = exports.actionWidgetTypes = void 0;
+const utils_1 = require("@selfcommunity/utils");
+/**
+ * @hidden
+ * We have complex state logic that involves multiple sub-values,
+ * so useReducer is preferable to useState.
+ * Define all possible auth action types label
+ * Use this to export actions and dispatch an action
+ */
+exports.actionWidgetTypes = {
+    LOADING_NEXT: '_loading_next',
+    LOADING_PREVIOUS: '_loading_previous',
+    LOAD_NEXT_SUCCESS: '_load_next_success',
+    LOAD_PREVIOUS_SUCCESS: '_load_previous_success',
+    LOAD_NEXT_FAILURE: '_load_next_failure',
+    LOAD_PREVIOUS_FAILURE: '_load_previous_failure',
+    SET_RESULTS: '_set_results',
+    SET_VISIBLE_ITEMS: '_set_visible_items',
+    RESET: '_reset'
+};
+/**
+ * Manage tools state reducer
+ * @param state
+ * @param action
+ */
+function dataWidgetReducer(state, action) {
+    var _a;
+    let _state = Object.assign({}, state);
+    switch (action.type) {
+        case exports.actionWidgetTypes.LOADING_NEXT:
+            _state = Object.assign(Object.assign({}, state), { isLoadingNext: true, errorLoadNext: null });
+            break;
+        case exports.actionWidgetTypes.LOADING_PREVIOUS:
+            _state = Object.assign(Object.assign({}, state), { isLoadingPrevious: true, errorLoadPrevious: null });
+            break;
+        case exports.actionWidgetTypes.LOAD_NEXT_SUCCESS:
+            _state = Object.assign(Object.assign({}, state), { isLoadingNext: false, count: action.payload.count, next: action.payload.next ? action.payload.next : null, results: [...state.results, ...action.payload.results], errorLoadNext: null, initialized: ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.initialized) || true });
+            break;
+        case exports.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS:
+            _state = Object.assign(Object.assign({}, state), { isLoadingPrevious: false, count: action.payload.count, previous: action.payload.previous ? action.payload.previous : null, results: [...action.payload.results, ...state.results], errorPreviousNext: null });
+            break;
+        case exports.actionWidgetTypes.SET_RESULTS:
+            _state = Object.assign(Object.assign(Object.assign({}, state), { results: [...action.payload.results] }), (action.payload.count ? { count: action.payload.count } : {}));
+            break;
+        case exports.actionWidgetTypes.SET_VISIBLE_ITEMS:
+            _state = Object.assign(Object.assign({}, state), { visibleItems: action.payload.visibleItems });
+            break;
+        case exports.actionWidgetTypes.LOAD_NEXT_FAILURE:
+            _state = Object.assign(Object.assign({}, state), { isLoadingNext: false, errorLoadNext: action.payload.error });
+            break;
+        case exports.actionWidgetTypes.LOAD_PREVIOUS_FAILURE:
+            _state = Object.assign(Object.assign({}, state), { isLoadingNext: false, errorLoadPrevious: action.payload.error });
+            break;
+        case exports.actionWidgetTypes.RESET:
+            _state = { isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false };
+            break;
+    }
+    utils_1.LRUCache.set(_state.cacheKey, _state);
+    return _state;
+}
+exports.dataWidgetReducer = dataWidgetReducer;
+/**
+ * Define initial tools state
+ * @param data
+ */
+function stateWidgetInitializer(data) {
+    let _initState = {
+        cacheKey: data.cacheKey ? data.cacheKey : null,
+        count: data.count ? data.count : 0,
+        results: data.results ? data.results : [],
+        next: data.next ? data.next : null,
+        previous: data.previous ? data.previous : null,
+        isLoadingNext: data.isLoadingNext ? data.isLoadingNext : false,
+        isLoadingPrevious: data.isLoadingPrevious ? data.isLoadingPrevious : false,
+        visibleItems: data.visibleItems ? data.visibleItems : null,
+        initialized: false
+    };
+    if (_initState.cacheKey && utils_1.LRUCache.hasKey(_initState.cacheKey) && data.cacheStrategy !== utils_1.CacheStrategies.NETWORK_ONLY) {
+        const _cachedStateData = utils_1.LRUCache.get(_initState.cacheKey);
+        return Object.assign(Object.assign({}, _initState), _cachedStateData);
+    }
+    return _initState;
+}
+exports.stateWidgetInitializer = stateWidgetInitializer;

package/lib/esm/components/AccountChangeMailValidation/AccountChangeMailValidation.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+export interface AccountChangeMailValidationProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Validation code sent by email to the user
+     * @default empty string
+     */
+    validationCode: string;
+    /**
+     * Id (userId) sent by email to the user
+     * @default null
+     */
+    userId: number;
+    /**
+     * New email sent by email to the user
+     * @default null
+     */
+    newEmail: string;
+    /**
+     * Callback triggered on success
+     * @default null
+     */
+    onSuccess?: (res: any) => void;
+    /**
+     * Action component to display after success message
+     * */
+    successAction?: React.ReactNode;
+    /**
+     * Callback triggered on error
+     * @default null
+     */
+    onError?: (res: any) => void;
+    /**
+     * Action component to display after error message
+     * */
+    errorAction?: React.ReactNode;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS AccountChangeMailValidation component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {AccountChangeMailValidation} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountChangeMailValidation` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountChangeMailValidation-root|Styles applied to the root element.|
+ |success|.SCAccountChangeMailValidation-success|Styles applied to the success Alert.|
+ |error|.SCAccountChangeMailValidation-error|Styles applied to the error Alert.|
+
+ *
+ * @param inProps
+ */
+export default function AccountChangeMailValidation(inProps: AccountChangeMailValidationProps): JSX.Element;

package/lib/esm/components/AccountChangeMailValidation/AccountChangeMailValidation.js

@@ -0,0 +1,92 @@
+import { __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useSCUser } from '@selfcommunity/react-core';
+import { Alert, Box, CircularProgress } from '@mui/material';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { UserService } from '@selfcommunity/api-services';
+import { FormattedMessage } from 'react-intl';
+const PREFIX = 'SCAccountChangeMailValidation';
+const classes = {
+    root: `${PREFIX}-root`,
+    success: `${PREFIX}-success`,
+    error: `${PREFIX}-error`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    [`&.${classes.root}`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+}));
+/**
+ * > API documentation for the Community-JS AccountChangeMailValidation component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {AccountChangeMailValidation} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountChangeMailValidation` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountChangeMailValidation-root|Styles applied to the root element.|
+ |success|.SCAccountChangeMailValidation-success|Styles applied to the success Alert.|
+ |error|.SCAccountChangeMailValidation-error|Styles applied to the error Alert.|
+
+ *
+ * @param inProps
+ */
+export default function AccountChangeMailValidation(inProps) {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // PROPS
+    const { className, onSuccess, onError, validationCode, userId, newEmail, successAction = null, errorAction = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "validationCode", "userId", "newEmail", "successAction", "errorAction"]);
+    // STATE
+    const [succeed, setSucceed] = useState(false);
+    const [error, setError] = useState(false);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // EFFECTS
+    useEffect(() => {
+        if (scUserContext.user === undefined || !validationCode || !newEmail || isNaN(userId) || succeed) {
+            return;
+        }
+        setError(false);
+        UserService.confirmChangeUserMail(userId, newEmail, validationCode)
+            .then((res) => {
+            setSucceed(true);
+            onSuccess && onSuccess(res);
+        })
+            .catch((error) => {
+            setError(true);
+            onError && onError(error);
+        });
+    }, [validationCode, userId, newEmail, scUserContext.user, succeed]);
+    if (scUserContext.user === undefined) {
+        return null;
+    }
+    // RENDER
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), succeed ? (React.createElement(Alert, { severity: "success", className: classes.success },
+        typeof succeed === 'string' ? (succeed) : (React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })),
+        successAction)) : error ? (React.createElement(Alert, { severity: "error", className: classes.error },
+        React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }),
+        errorAction)) : (React.createElement(React.Fragment, null,
+        React.createElement(CircularProgress, null),
+        React.createElement(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })))));
+}

package/lib/esm/components/AccountChangeMailValidation/index.d.ts

@@ -0,0 +1,3 @@
+import AccountChangeMailValidation, { AccountChangeMailValidationProps } from './AccountChangeMailValidation';
+export default AccountChangeMailValidation;
+export { AccountChangeMailValidationProps };

package/lib/esm/components/AccountChangeMailValidation/index.js

@@ -0,0 +1,2 @@
+import AccountChangeMailValidation from './AccountChangeMailValidation';
+export default AccountChangeMailValidation;

package/lib/esm/components/AccountDataPortability/AccountDataPortability.d.ts

@@ -0,0 +1,34 @@
+import { BoxProps } from '@mui/material';
+export interface AccountDataPortabilityProps extends BoxProps {
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS AccountDataPortability component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component allows users to display the logic behind data portability of user data.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountDataPortability)
+
+ #### Import
+ ```jsx
+ import {AccountDataPortability} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCAccountDataPortability` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountDataPortability-root|Styles applied to the root element.|
+ |createButton|.SCAccountDataPortability-create-button|Styles applied to the create data portability button in the rejection section.|
+ |downloadButton|.SCAccountDataPortability-download-button|Styles applied to the download data portability button in the rejection section.|
+ |generationInfo|.SCAccountDataPortability-generation-info|Styles applied to the section with generation information.|
+
+ * @param inProps
+ */
+export default function AccountDataPortability(inProps: AccountDataPortabilityProps): JSX.Element;

package/lib/esm/components/AccountDataPortability/AccountDataPortability.js

@@ -0,0 +1,177 @@
+import { __rest } from "tslib";
+import React, { useContext, useEffect, useState } from 'react';
+import { useThemeProps } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { Box, Typography } from '@mui/material';
+import classNames from 'classnames';
+import Icon from '@mui/material/Icon';
+import { LoadingButton } from '@mui/lab';
+import { DataPortabilityService } from '@selfcommunity/api-services';
+import { capitalize, Logger } from '@selfcommunity/utils';
+import { SCUserContext } from '@selfcommunity/react-core';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { FormattedDate, FormattedMessage, FormattedTime, useIntl } from 'react-intl';
+import { differenceInHours, format, parseISO } from 'date-fns';
+const PREFIX = 'SCAccountDataPortability';
+const classes = {
+    root: `${PREFIX}-root`,
+    createButton: `${PREFIX}-create-button`,
+    downloadButton: `${PREFIX}-download-button`,
+    generationInfo: `${PREFIX}-generation-info`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS AccountDataPortability component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component allows users to display the logic behind data portability of user data.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountDataPortability)
+
+ #### Import
+ ```jsx
+ import {AccountDataPortability} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCAccountDataPortability` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountDataPortability-root|Styles applied to the root element.|
+ |createButton|.SCAccountDataPortability-create-button|Styles applied to the create data portability button in the rejection section.|
+ |downloadButton|.SCAccountDataPortability-download-button|Styles applied to the download data portability button in the rejection section.|
+ |generationInfo|.SCAccountDataPortability-generation-info|Styles applied to the section with generation information.|
+
+ * @param inProps
+ */
+export default function AccountDataPortability(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = __rest(props, ["className"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // STATE
+    const [dataPortability, setDataPortability] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [downloadingDataPortability, setDownloadingDataPortability] = useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // INTL
+    const intl = useIntl();
+    /**
+     * Handle create data portability
+     */
+    const handleCreateDataPortabilityFile = () => {
+        setLoading(true);
+        DataPortabilityService.generateDataPortability()
+            .then((res) => {
+            if (res) {
+                setDataPortability(dataPortability);
+            }
+        })
+            .catch((_error) => {
+            Logger.error(SCOPE_SC_UI, _error);
+        })
+            .then(() => setLoading(false));
+    };
+    /**
+     * Handle download data portability
+     */
+    const handleDownloadDataPortabilityFile = () => {
+        setDownloadingDataPortability(true);
+        DataPortabilityService.downloadDataPortability({ timeout: 30 * 60 * 1000 })
+            .then((res) => {
+            const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(format(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx"), {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric'
+            })}.zip`);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+            setDownloadingDataPortability(false);
+        })
+            .catch((_error) => {
+            setDownloadingDataPortability(false);
+            Logger.error(SCOPE_SC_UI, _error);
+        });
+    };
+    /**
+     * Fetch data portability status
+     */
+    const fetchDataPortabilityStatus = () => {
+        DataPortabilityService.dataPortabilityStatus()
+            .then((res) => {
+            if (res) {
+                if (!res.computing && res.generated_at) {
+                    setLoading(false);
+                }
+                setDataPortability(res);
+            }
+        })
+            .catch((_error) => {
+            Logger.error(SCOPE_SC_UI, _error);
+        })
+            .then(() => setLoading(false));
+    };
+    /**
+     * Sync data portability status
+     */
+    useEffect(() => {
+        // TODO: ?????
+        let interval;
+        if (authUserId !== null) {
+            fetchDataPortabilityStatus();
+            interval = setInterval(() => {
+                fetchDataPortabilityStatus();
+            }, 5000);
+        }
+        return () => interval && clearInterval(interval);
+    }, [authUserId]);
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
+        React.createElement(Typography, { variant: "h6" },
+            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } })),
+        React.createElement(Typography, { variant: "body2", component: "div" },
+            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    li: (chunks) => React.createElement("li", null, chunks),
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    ul: (chunks) => React.createElement("ul", null, chunks)
+                } })),
+        React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                (dataPortability &&
+                    (dataPortability.computing ||
+                        (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: React.createElement(Icon, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
+        dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: React.createElement(Icon, null, "cloud_download_outlined"), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile },
+            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
+        React.createElement("br", null),
+        dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(Typography, { className: classes.generationInfo, variant: "body2" },
+            React.createElement(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                    date: React.createElement(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
+                    time: React.createElement(FormattedTime, { value: dataPortability.requested_at })
+                } })))));
+}

package/lib/esm/components/AccountDataPortability/index.d.ts

@@ -0,0 +1,3 @@
+import AccountDataPortability, { AccountDataPortabilityProps } from './AccountDataPortability';
+export default AccountDataPortability;
+export { AccountDataPortabilityProps };

package/lib/esm/components/AccountDataPortability/index.js

@@ -0,0 +1,2 @@
+import AccountDataPortability from './AccountDataPortability';
+export default AccountDataPortability;

package/lib/esm/components/AccountDataPortabilityButton/AccountDataPortabilityButton.d.ts

@@ -0,0 +1,33 @@
+import { ButtonProps } from '@mui/material';
+export interface AccountDataPortabilityButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Account Data Portability Button component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component display a button that open a Dialog that display the [AccountDataPortability](/docs/sdk/community-js/react-ui/Components/AccountDataPortability) component.
+
+ #### Import
+
+ ```jsx
+ import {AccountDataPortabilityButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountDataPortabilityButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountDataPortabilityButtonn-root|Styles applied to the root element.|
+ |dialogRoot|.SCAccountDataPortabilityButtonn-dialog-root|Styles applied to the dialog root element.|
+ * @param inProps
+ */
+export default function AccountDataPortabilityButton(inProps: AccountDataPortabilityButtonProps): JSX.Element;

package/lib/esm/components/AccountDataPortabilityButton/AccountDataPortabilityButton.js

@@ -0,0 +1,78 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { Button } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { useSCUser } from '@selfcommunity/react-core';
+import BaseDialog from '../../shared/BaseDialog';
+import AccountDataPortability from '../AccountDataPortability';
+const PREFIX = 'SCAccountDataPortabilityButtonn';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root, styles.voted]
+})(({ theme }) => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Account Data Portability Button component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component display a button that open a Dialog that display the [AccountDataPortability](/docs/sdk/community-js/react-ui/Components/AccountDataPortability) component.
+
+ #### Import
+
+ ```jsx
+ import {AccountDataPortabilityButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountDataPortabilityButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountDataPortabilityButtonn-root|Styles applied to the root element.|
+ |dialogRoot|.SCAccountDataPortabilityButtonn-dialog-root|Styles applied to the dialog root element.|
+ * @param inProps
+ */
+export default function AccountDataPortabilityButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = __rest(props, ["className"]);
+    // STATE
+    const [open, setOpen] = useState(false);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // HANDLERS
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    // RENDER
+    if (!scUserContext.user) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest),
+            React.createElement(FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" })),
+        open && (React.createElement(DialogRoot, { title: React.createElement(FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {} },
+            React.createElement(AccountDataPortability, null)))));
+}

package/lib/esm/components/AccountDataPortabilityButton/index.d.ts

@@ -0,0 +1,3 @@
+import AccountDataPortabilityButton, { AccountDataPortabilityButtonProps } from './AccountDataPortabilityButton';
+export default AccountDataPortabilityButton;
+export { AccountDataPortabilityButtonProps };

package/lib/esm/components/AccountDataPortabilityButton/index.js

@@ -0,0 +1,2 @@
+import AccountDataPortabilityButton from './AccountDataPortabilityButton';
+export default AccountDataPortabilityButton;

package/lib/esm/components/AccountDelete/AccountDelete.d.ts

@@ -0,0 +1,42 @@
+import { BoxProps } from '@mui/material';
+export interface AccountDeleteProps extends BoxProps {
+    /**
+     * Callback when logout rejecting policy document
+     */
+    onLogout?: () => void;
+    /**
+     * Callback when delete account rejecting policy document
+     */
+    onDeleteAccount?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS AccountDelete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component allows users to display the logic behind user deletion.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountDelete)
+
+ #### Import
+ ```jsx
+ import {AccountDelete} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCAccountDelete` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountDelete-root|Styles applied to the root element.|
+ |message|.SCAccountDelete-message|Styles applied to the message element section.|
+ |confirm|.SCAccountDelete-confirm|Styles applied to the confirm element section.|
+ |button|.SCAccountDelete-button|Styles applied to the button element.|
+
+ * @param inProps
+ */
+export default function AccountDelete(inProps: AccountDeleteProps): JSX.Element;