@selfcommunity/react-ui 0.5.6-alpha.9 → 0.5.6

package/lib/cjs/components/Categories/Categories.d.ts

@@ -0,0 +1,75 @@
+import { SCCategoryType } from '@selfcommunity/types';
+import { CategoriesSkeletonProps } from './Skeleton';
+import { CategoryProps } from '../Category';
+export interface CategoriesProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * CategoryComponent component
+     * Usefully to override the single Category render component
+     * @default Category
+     */
+    CategoryComponent?: (inProps: CategoryProps) => JSX.Element;
+    /**
+     * Props to spread to single category object
+     * @default {variant: 'outlined', ButtonBaseProps: {disableRipple: 'true'}}
+     */
+    CategoryComponentProps?: CategoryProps;
+    /**
+     * CategorySkeletonComponent component
+     * Usefully to override the single Category skeleton render component
+     * @default Skeleton
+     */
+    CategoriesSkeletonComponent?: (inProps: any) => JSX.Element;
+    /**
+     * Props to spread to single category skeleton object
+     * @default {variant: 'outlined'}
+     */
+    CategoriesSkeletonProps?: CategoriesSkeletonProps;
+    /**
+     * Show/Hide filters
+     * @default true
+     */
+    showFilters?: boolean;
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
+    /**
+     * Override filter func
+     * @default null
+     */
+    handleFilterCategories?: (categories: SCCategoryType[]) => SCCategoryType[];
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Categories component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {Categories} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCategories` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategories-root|Styles applied to the root element.|
+ |filters|.SCCategories-filter|Styles applied to the filter.|
+ |categories|.SCCategories-categories|Styles applied to the list of categories.|
+ |category|.SCCategories-category|Styles applied to the of category element.|
+ |noResults|.SCCategories-no-results|Styles applied to no results section.|
+
+ * @param inProps
+ */
+export default function CategoriesSuggestion(inProps: CategoriesProps): JSX.Element;
+//# sourceMappingURL=Categories.d.ts.map

package/lib/cjs/components/Categories/Categories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Categories.d.ts","sourceRoot":"","sources":["../../../../src/components/Categories/Categories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAA2B,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AACvE,OAAiB,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAuCpD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;IAE5D;;;OAGG;IACH,sBAAsB,CAAC,EAAE,aAAa,CAAC;IAEvC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC;IAE5D;;;OAGG;IACH,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAElD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,CAAC;IAE5E;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,OAAO,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAyIlF"}

package/lib/cjs/components/Categories/Categories.js

@@ -0,0 +1,188 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const Skeleton_1 = __importDefault(require("./Skeleton"));
+const Category_1 = __importDefault(require("../Category"));
+const react_intl_1 = require("react-intl");
+const classnames_1 = __importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const PREFIX = 'SCCategories';
+const classes = {
+    root: `${PREFIX}-root`,
+    filters: `${PREFIX}-filter`,
+    categories: `${PREFIX}-categories`,
+    category: `${PREFIX}-category`,
+    noResults: `${PREFIX}-no-results`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    [`& .${classes.filters}`]: {
+        marginTop: theme.spacing(),
+        marginBottom: theme.spacing(2)
+    },
+    [`& .${classes.category}`]: {
+        '& > div': {
+            cursor: 'default'
+        },
+        ' .SCCategory-category-image': {
+            minWidth: 56,
+            height: '100%',
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: theme.shape.borderRadius
+        }
+    }
+}));
+/**
+ * > API documentation for the Community-JS Categories component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {Categories} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCategories` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategories-root|Styles applied to the root element.|
+ |filters|.SCCategories-filter|Styles applied to the filter.|
+ |categories|.SCCategories-categories|Styles applied to the list of categories.|
+ |category|.SCCategories-category|Styles applied to the of category element.|
+ |noResults|.SCCategories-no-results|Styles applied to no results section.|
+
+ * @param inProps
+ */
+function CategoriesSuggestion(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CategoryComponent = Category_1.default, CategoryComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: 'true', component: material_1.Box } }, CategoriesSkeletonComponent = Skeleton_1.default, CategoriesSkeletonProps = {}, showFilters = true, filters, handleFilterCategories } = props, rest = __rest(props, ["className", "CategoryComponent", "CategoryComponentProps", "CategoriesSkeletonComponent", "CategoriesSkeletonProps", "showFilters", "filters", "handleFilterCategories"]);
+    // STATE
+    const [categories, setCategories] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [filterName, setFilterName] = (0, react_1.useState)(null);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    /**
+     * Fetches categories list
+     */
+    const fetchCategories = (next = api_services_1.Endpoints.CategoryList.url({})) => __awaiter(this, void 0, void 0, function* () {
+        const data = yield api_services_1.CategoryService.getAllCategories({ active: true }, { url: next });
+        return data.next ? data.results.concat(yield fetchCategories(data.next)) : data.results;
+    });
+    /**
+     * On mount, fetches categories list
+     */
+    (0, react_1.useEffect)(() => {
+        if (scUserContext.user) {
+            fetchCategories()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setCategories(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [authUserId]);
+    /**
+     * Get categories filtered
+     */
+    const getFilteredCategories = () => {
+        if (handleFilterCategories) {
+            return handleFilterCategories(categories);
+        }
+        if (filterName) {
+            return categories.filter((c) => c.name.toLowerCase().includes(filterName.toLowerCase()));
+        }
+        return categories;
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleOnChangeFilterName = (event) => {
+        setFilterName(event.target.value);
+    };
+    /**
+     * Renders categories list
+     */
+    const c = (react_1.default.createElement(material_1.Box, null, !categories.length && !loading ? (react_1.default.createElement(material_1.Typography, { className: classes.noResults, variant: "body2" },
+        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestion.noResults", defaultMessage: "ui.categoriesSuggestion.noResults" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        showFilters && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
+            react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
+        react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, loading ? (react_1.default.createElement(material_1.Grid, { item: true },
+            react_1.default.createElement(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps)))) : (react_1.default.createElement(react_1.default.Fragment, null, getFilteredCategories().map((category) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, key: category.id },
+            react_1.default.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { className: classes.category }))))))))))));
+    /**
+     * Renders root object
+     */
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), c));
+}
+exports.default = CategoriesSuggestion;
+//# sourceMappingURL=Categories.js.map

package/lib/cjs/components/Categories/Categories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Categories.js","sourceRoot":"","sources":["../../../../src/components/Categories/Categories.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/Categories/Skeleton.d.ts

@@ -0,0 +1,35 @@
+export interface CategoriesSkeletonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    CategorySkeletonProps?: any;
+}
+/**
+ * > API documentation for the Community-JS Categories Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CategoriesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCategoriesSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoriesSkeleton-root|Styles applied to the root element.|
+ |categories|.SCCategoriesSkeleton-categories|Styles applied to the categories element.|
+ *
+ */
+export default function CategoriesSkeleton(inProps: CategoriesSkeletonProps): JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/lib/cjs/components/Categories/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Categories/Skeleton.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,GAAG,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,OAAO,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAcxF"}

package/lib/cjs/components/Categories/Skeleton.js

@@ -0,0 +1,71 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("../Category/Skeleton"));
+const classnames_1 = __importDefault(require("classnames"));
+const PREFIX = 'SCCategoriesSkeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    categories: `${PREFIX}-categories`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    [`& .${classes.categories}`]: {
+        ' .SCBaseItem-image': {
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            '& > span': {
+                width: '56px !important',
+                height: '56px !important'
+            }
+        }
+    }
+}));
+/**
+ * > API documentation for the Community-JS Categories Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CategoriesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCategoriesSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCategoriesSkeleton-root|Styles applied to the root element.|
+ |categories|.SCCategoriesSkeleton-categories|Styles applied to the categories element.|
+ *
+ */
+function CategoriesSkeleton(inProps) {
+    const { className, CategorySkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "CategorySkeletonProps"]);
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
+        react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, [...Array(15)].map((category, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, key: index },
+            react_1.default.createElement(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps))))))));
+}
+exports.default = CategoriesSkeleton;
+//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/Categories/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Categories/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iDAA4C;AAC5C,4CAAwC;AACxC,oEAAoD;AACpD,4DAAoC;AAEpC,MAAM,MAAM,GAAG,sBAAsB,CAAC;AAEtC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,UAAU,EAAE,GAAG,MAAM,aAAa;CACnC,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,cAAG,EAAE;IACvB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IACf,CAAC,MAAM,OAAO,CAAC,UAAU,EAAE,CAAC,EAAE;QAC5B,oBAAoB,EAAE;YACpB,mBAAmB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;YAC7C,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;YAChD,UAAU,EAAE;gBACV,KAAK,EAAE,iBAAiB;gBACxB,MAAM,EAAE,iBAAiB;aAC1B;SACF;KACF;CACF,CAAC,CAAC,CAAC;AAgBJ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,kBAAkB,CAAC,OAAgC;IACzE,MAAM,EAAC,SAAS,EAAE,qBAAqB,GAAG,EAAE,KAAa,OAAO,EAAf,IAAI,UAAI,OAAO,EAA1D,sCAAgD,CAAU,CAAC;IAEjE,OAAO,CACL,8BAAC,IAAI,kBAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,IAAI;QAC5D,8BAAC,eAAI,IAAC,SAAS,QAAC,OAAO,EAAE,EAAC,EAAE,EAAE,CAAC,EAAC,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,IAC5D,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,8BAAC,eAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK;YACzC,8BAAC,kBAAgB,kBAAC,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,IAAM,qBAAqB,EAAI,CAC7E,CACR,CAAC,CACG,CACF,CACR,CAAC;AACJ,CAAC;AAdD,qCAcC"}

package/lib/cjs/components/Categories/index.d.ts

@@ -0,0 +1,5 @@
+import Categories, { CategoriesProps } from './Categories';
+import CategoriesSkeleton, { CategoriesSkeletonProps } from './Skeleton';
+export default Categories;
+export { CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/Categories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Categories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,EAAE,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,kBAAkB,EAAE,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AACvE,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAE,kBAAkB,EAAE,uBAAuB,EAAC,CAAC"}

package/lib/cjs/components/Categories/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoriesSkeleton = void 0;
+const Categories_1 = __importDefault(require("./Categories"));
+const Skeleton_1 = __importDefault(require("./Skeleton"));
+exports.CategoriesSkeleton = Skeleton_1.default;
+exports.default = Categories_1.default;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Categories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Categories/index.tsx"],"names":[],"mappings":";;;;;;AAAA,8DAAyD;AACzD,0DAAuE;AAE9C,6BAFlB,kBAAkB,CAEkB;AAD3C,kBAAe,oBAAU,CAAC"}

package/lib/cjs/components/Category/Category.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../../src/components/Category/Category.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAEpD,OAAqB,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAKhF,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAC;AAwBtC,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IACtD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA+CpE"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../../src/components/Category/Category.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAEpD,OAAqB,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAKhF,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAC;AAgCtC,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IACtD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA+CpE"}

package/lib/cjs/components/Category/Category.js

@@ -41,7 +41,15 @@ const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+})(({ theme }) => ({
+    '& .SCBaseItemButton-primary, & .SCBaseItemButton-secondary': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: 'block',
+        width: '44%'
+    }
+}));
 /**
  * > API documentation for the Community-JS Category component. Learn about the available props and the CSS API.
  *
@@ -81,7 +89,7 @@ function Category(inProps) {
     }
     // RENDER
     if (!autoHide) {
-        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(FollowCategoryButton_1.default, Object.assign({ category: scCategory }, followCategoryButtonProps)) })));
+        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(FollowCategoryButton_1.default, Object.assign({ category: scCategory }, followCategoryButtonProps)) }, rest)));
     }
     return null;
 }

package/lib/cjs/components/Category/Category.js.map

@@ -1 +1 @@
-{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../../src/components/Category/Category.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../../src/components/Category/Category.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/Category/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Category/Skeleton.tsx"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,KAAA,GAAG,GAAG,CAAC,OAAO,CAe3D"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Category/Skeleton.tsx"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,KAAA,GAAG,GAAG,CAAC,OAAO,CAe3D"}

package/lib/cjs/components/Category/Skeleton.js

@@ -10,9 +10,27 @@ const material_1 = require("@mui/material");
 const BaseItem_1 = __importDefault(require("../../shared/BaseItem"));
 const PREFIX = 'SCCategorySkeleton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    image: `${PREFIX}-image`,
+    primary: `${PREFIX}-primary`,
+    secondary: `${PREFIX}-secondary`,
+    button: `${PREFIX}-button`,
+    action: `${PREFIX}-action`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({
+    [`& .${classes.primary}`]: {
+        marginBottom: theme.spacing()
+    },
+    [`& .${classes.secondary}`]: {
+        marginBottom: theme.spacing()
+    },
+    [`& .${classes.button}`]: {
+        margin: theme.spacing()
+    },
+    [`& .${classes.action}`]: {
+        margin: theme.spacing()
+    }
+}));
 /**
  * > API documentation for the Community-JS Category Skeleton component. Learn about the available props and the CSS API.
 
@@ -34,8 +52,8 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
  *
  */
 function CategorySkeleton(props) {
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: 40, height: 40 }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 50, style: { marginTop: 5, marginBottom: 5 } })) })));
+    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: 40, height: 40, className: classes.image }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true, className: classes.button },
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 50, className: classes.action })) })));
 }
 exports.default = CategorySkeleton;
 //# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/Category/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Category/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA4C;AAC5C,sEAA8C;AAC9C,4CAAqC;AACrC,qEAA6C;AAE7C,MAAM,MAAM,GAAG,oBAAoB,CAAC;AAEpC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,kBAAQ,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,gBAAgB,CAAC,KAAK;IAC5C,OAAO,CACL,8BAAC,IAAI,kBACH,SAAS,EAAE,OAAO,CAAC,IAAI,IACnB,KAAK,IACT,KAAK,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACjF,OAAO,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAC,YAAY,EAAE,EAAE,EAAC,GAAI,EACzF,SAAS,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAC,YAAY,EAAE,EAAE,EAAC,GAAI,EAC1F,OAAO,EACL,8BAAC,iBAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,QAAQ;YAC9C,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAC,GAAI,CACrF,IAEX,CACH,CAAC;AACJ,CAAC;AAfD,mCAeC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Category/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA4C;AAC5C,sEAA8C;AAC9C,4CAAqC;AACrC,qEAA6C;AAE7C,MAAM,MAAM,GAAG,oBAAoB,CAAC;AAEpC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,KAAK,EAAE,GAAG,MAAM,QAAQ;IACxB,OAAO,EAAE,GAAG,MAAM,UAAU;IAC5B,SAAS,EAAE,GAAG,MAAM,YAAY;IAChC,MAAM,EAAE,GAAG,MAAM,SAAS;IAC1B,MAAM,EAAE,GAAG,MAAM,SAAS;CAC3B,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,kBAAQ,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IAC1C,CAAC,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE;QACzB,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE;KAC9B;IACD,CAAC,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE;KAC9B;IACD,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE;QACxB,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE;KACxB;IACD,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE;QACxB,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE;KACxB;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,gBAAgB,CAAC,KAAK;IAC5C,OAAO,CACL,8BAAC,IAAI,kBACH,SAAS,EAAE,OAAO,CAAC,IAAI,IACnB,KAAK,IACT,KAAK,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,GAAI,EAC3G,OAAO,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,GAAI,EAC1F,SAAS,EAAE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,GAAI,EAC7F,OAAO,EACL,8BAAC,iBAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,QAAC,SAAS,EAAE,OAAO,CAAC,MAAM;YACxE,8BAAC,kBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,GAAI,CACxE,IAEX,CACH,CAAC;AACJ,CAAC;AAfD,mCAeC"}

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -519,7 +519,7 @@ function CommentObject(inProps) {
         }
         return (react_1.default.createElement(react_1.default.Fragment, { key: comment.id },
             editComment && editComment.id === comment.id ? (react_1.default.createElement(material_1.Box, { className: classes.comment },
-                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, readOnly: isReplying || isSavingComment }, ReplyCommentObjectProps)))) : (react_1.default.createElement(BaseItem_1.default, { elevation: 0, className: classes.comment, image: react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
+                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, ReplyCommentObjectProps)))) : (react_1.default.createElement(BaseItem_1.default, { elevation: 0, className: classes.comment, image: react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
                     react_1.default.createElement(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar })), disableTypography: true, primary: react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest),
                         react_1.default.createElement(material_1.CardContent, { className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) },
@@ -537,7 +537,7 @@ function CommentObject(inProps) {
                         renderVotes(comment))) })),
             comment.comment_count > 0 && react_1.default.createElement(material_1.Box, { className: classes.nestedComments }, renderLatestComment(comment)),
             scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (react_1.default.createElement(material_1.Box, { className: classes.nestedComments },
-                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, readOnly: isReplying }, ReplyCommentObjectProps))))));
+                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, ReplyCommentObjectProps))))));
     }
     /**
      * Render Latest Comment