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

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

@@ -0,0 +1,49 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { AutocompleteProps } from '@mui/material';
+import { SCCategoryType } from '@selfcommunity/types/src/index';
+export interface CategoryAutocompleteProps extends Pick<AutocompleteProps<SCCategoryType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCCategoryType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
+    /**
+     * The maximum number of categories that will be visible when not focused.
+     * @default 0
+     */
+    limitCountCategories?: number;
+    /**
+     * If checkbox is selected
+     * @default false
+     */
+    checkboxSelect?: boolean;
+    /**
+     * The props applied to text field
+     * @default {variant: 'outlined, label: categories_label}
+     */
+    TextFieldProps?: TextFieldProps;
+    /**
+     * Callback for change event on poll object
+     * @param value
+     */
+    onChange?: (value: any) => void;
+}
+/**
+ * > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the categories available in the application.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CategoryAutocomplete)
+ *
+ * #### Import
+ *  ```jsx
+ *  import {CategoryAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCCategoryAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCCategoryAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const CategoryAutocomplete: (inProps: CategoryAutocompleteProps) => JSX.Element;
+export default CategoryAutocomplete;

package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -0,0 +1,106 @@
+import { __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import CircularProgress from '@mui/material/CircularProgress';
+import Checkbox from '@mui/material/Checkbox';
+import parse from 'autosuggest-highlight/parse';
+import match from 'autosuggest-highlight/match';
+import { Chip } from '@mui/material';
+import { useSCFetchCategories } from '@selfcommunity/react-core';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+const PREFIX = 'SCCategoryAutocomplete';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Autocomplete, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the categories available in the application.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CategoryAutocomplete)
+ *
+ * #### Import
+ *  ```jsx
+ *  import {CategoryAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCCategoryAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCCategoryAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+const CategoryAutocomplete = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // Props
+    const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
+        variant: 'outlined',
+        label: React.createElement(FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
+    } } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
+    // State
+    const [open, setOpen] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
+    // HOOKS
+    const { categories, isLoading } = useSCFetchCategories();
+    useEffect(() => {
+        if (value === null) {
+            return;
+        }
+        onChange && onChange(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isLoading && typeof defaultValue === 'string') {
+            setValue(multiple ? categories.filter((cat) => cat.id === Number(defaultValue)) : categories.find((cat) => cat.id === Number(defaultValue)));
+        }
+    }, [isLoading]);
+    // Handlers
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChange = (event, value) => {
+        let newValue = null;
+        if (multiple && limitCountCategories > 0) {
+            const [...rest] = value;
+            newValue = rest.slice(-1 * limitCountCategories);
+        }
+        else {
+            newValue = value;
+        }
+        setValue(newValue);
+    };
+    // Render
+    return (React.createElement(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: React.createElement(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
+            return value.map((option, index) => (React.createElement(Chip, Object.assign({ key: option.id, id: option.id, label: option.name, color: option.color }, getTagProps({ index })))));
+        }, renderOption: (props, option, { selected, inputValue }) => {
+            const matches = match(option.name, inputValue);
+            const parts = parse(option.name, matches);
+            return (React.createElement("li", Object.assign({}, props),
+                checkboxSelect && React.createElement(Checkbox, { style: { marginRight: 8 }, checked: selected }),
+                React.createElement(Chip, { label: React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement("span", { key: index, style: { fontWeight: part.highlight ? 700 : 400 } }, part.text)))) })));
+        }, renderInput: (params) => {
+            return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (React.createElement(React.Fragment, null,
+                        isLoading ? React.createElement(CircularProgress, { color: "inherit", size: 20 }) : null,
+                        params.InputProps.endAdornment)) }) })));
+        } }, rest)));
+};
+export default CategoryAutocomplete;

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { SCCategoryType } from '@selfcommunity/types';
+export interface CategoryFollowButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Id of the category
+     * @default null
+     */
+    categoryId?: number;
+    /**
+     * Category Object
+     * @default null
+     */
+    category?: SCCategoryType;
+    /**
+     * onFollow callback
+     * @param user
+     * @param followed
+     */
+    onFollow?: (category: SCCategoryType, followed: boolean) => any;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Follow Category Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CategoryFollowButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCategoryFollowButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoryFollowButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CategoryFollowButton(inProps: CategoryFollowButtonProps): JSX.Element;

package/lib/esm/components/CategoryFollowButton/CategoryFollowButton.js

@@ -0,0 +1,93 @@
+import { __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import { useSCContext, useSCFetchCategory, useSCUser } from '@selfcommunity/react-core';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCCategoryAutoFollowType } from '@selfcommunity/types';
+const PREFIX = 'SCCategoryFollowButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const FollowButton = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Follow Category Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CategoryFollowButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCategoryFollowButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoryFollowButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CategoryFollowButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, categoryId, category, onFollow } = props, rest = __rest(props, ["className", "categoryId", "category", "onFollow"]);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const scCategoriesManager = scUserContext.managers.categories;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scCategory, setSCCategory } = useSCFetchCategory({
+        id: categoryId,
+        category,
+        cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    const [followed, setFollowed] = useState(null);
+    useEffect(() => {
+        /**
+         * Call scCategoriesManager.isFollowed inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setFollowed(scCategoriesManager.isFollowed(scCategory));
+        }
+    }, [authUserId, scCategoriesManager.isFollowed]);
+    const followCategory = () => {
+        scCategoriesManager
+            .follow(scCategory)
+            .then(() => {
+            onFollow && onFollow(scCategory, !followed);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const handleFollowAction = () => {
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            followCategory();
+        }
+    };
+    if (!scCategory || (scCategory && followed && scCategory.auto_follow === SCCategoryAutoFollowType.FORCED)) {
+        return null;
+    }
+    return (React.createElement(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: classNames(classes.root, className) }, rest), followed && scUserContext.user ? (React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" }))));
+}

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

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

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

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

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

@@ -0,0 +1,46 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { SCCategoryType } from '@selfcommunity/types';
+import { ButtonProps } from '@mui/material/Button/Button';
+export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
+    /**
+     * Category Object
+     * @default null
+     */
+    category?: SCCategoryType;
+    /**
+     * Id of category object
+     * @default null
+     */
+    categoryId?: number;
+    /**
+     * Props to spread to followedBy dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CategoryFollowersButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCategoryFollowersButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoryFollowersButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCategoryFollowersButton-dialog-root|Styles applied to the root element.|
+ |endMessage|.SCCategoriesFollowedWidget-end-message|Styles applied to the end message element.|
+
+ * @param inProps
+ */
+export default function CategoryFollowersButton(inProps: CategoryFollowersButtonProps): JSX.Element;

package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -0,0 +1,132 @@
+import { __rest } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage } from 'react-intl';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import User, { UserSkeleton } from '../User';
+import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
+import { useSCFetchCategory } from '@selfcommunity/react-core';
+import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+const PREFIX = 'SCCategoryFollowersButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    endMessage: `${PREFIX}-end-message`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CategoryFollowersButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCategoryFollowersButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoryFollowersButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCategoryFollowersButton-dialog-root|Styles applied to the root element.|
+ |endMessage|.SCCategoriesFollowedWidget-end-message|Styles applied to the end message element.|
+
+ * @param inProps
+ */
+export default function CategoryFollowersButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, categoryId, category, DialogProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "DialogProps"]);
+    // STATE
+    const [loading, setLoading] = useState(true);
+    const [next, setNext] = useState(null);
+    const [offset, setOffset] = useState(null);
+    const [followers, setFollowers] = useState([]);
+    const [open, setOpen] = useState(false);
+    // HOOKS
+    const { scCategory } = useSCFetchCategory({ id: categoryId, category });
+    // FETCH FIRST FOLLOWERS
+    useDeepCompareEffectNoCheck(() => {
+        if (!scCategory) {
+            return;
+        }
+        if (followers.length === 0) {
+            CategoryService.getCategoryFollowers(scCategory.id, { limit: 3 }).then((res) => {
+                setFollowers([...res.results]);
+                setOffset(3);
+                setLoading(false);
+            });
+        }
+        else {
+            setOffset(0);
+        }
+    }, [scCategory]);
+    useEffect(() => {
+        if (open && offset !== null) {
+            setLoading(true);
+            CategoryService.getCategoryFollowers(scCategory.id, { offset, limit: 20 }).then((res) => {
+                setFollowers([...(offset === 0 ? [] : followers), ...res.results]);
+                setNext(res.next);
+                setLoading(false);
+                setOffset(null);
+            });
+        }
+    }, [open, followers, offset]);
+    /**
+     * Memoized fetchFollowers
+     */
+    const fetchFollowers = useMemo(() => () => {
+        if (!next) {
+            return;
+        }
+        http
+            .request({
+            url: next,
+            method: Endpoints.CategoryFollowers.method
+        })
+            .then((res) => {
+            setFollowers([...followers, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => Logger.error(SCOPE_SC_UI, error))
+            .then(() => setLoading(false));
+    }, [followers, scCategory, next]);
+    /**
+     * Opens dialog votes
+     */
+    const handleToggleDialogOpen = useMemo(() => () => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
+    // RENDER
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest), loading || !scCategory ? (React.createElement(AvatarGroupSkeleton, Object.assign({}, rest))) : (React.createElement(AvatarGroup, { total: scCategory.followers_counter }, followers.map((c) => (React.createElement(Avatar, { key: c.id, alt: c.username, src: c.avatar })))))),
+        open && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps),
+            React.createElement(InfiniteScroll, { dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: React.createElement(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
+                    React.createElement(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" })) },
+                React.createElement(List, null, followers.map((follower) => (React.createElement(ListItem, { key: follower.id },
+                    React.createElement(User, { elevation: 0, user: follower }))))))))));
+}

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { FollowCategoryButtonProps } from '../FollowCategoryButton';
-import { BaseDialogProps } from '../../shared/BaseDialog';
+import { CategoryFollowButtonProps } from '../CategoryFollowButton';
 import { SCCategoryType } from '@selfcommunity/types';
+import { CategoryFollowersButtonProps } from '../CategoryFollowersButton';
 export interface CategoryHeaderProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -21,19 +21,23 @@ export interface CategoryHeaderProps {
      * Props to spread category button followed
      * @default {}
      */
-    FollowCategoryButtonProps?: FollowCategoryButtonProps;
+    CategoryFollowButtonProps?: Pick<CategoryFollowButtonProps, Exclude<keyof CategoryFollowButtonProps, 'category' | 'onFollow'>>;
     /**
      * Props to spread to followedBy dialog
      * @default {}
      */
-    FollowedByDialogProps?: BaseDialogProps;
+    CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 /**
- *> API documentation for the Community-JS Category AppBar component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Category AppBar component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the top section for category pages.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CategoryHeader)
  *
  #### Import
  ```jsx
@@ -59,4 +63,3 @@ export interface CategoryHeaderProps {
  * @param inProps
  */
 export default function CategoryHeader(inProps: CategoryHeaderProps): JSX.Element;
-//# sourceMappingURL=CategoryHeader.d.ts.map