decentraland-ui2 0.45.2 → 0.45.3-20110676064.commit-a4a3462

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.styled.d.ts

@@ -0,0 +1,26 @@
+declare const SceneRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const SceneThumbnail: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+declare const SceneContentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const SceneName: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const MobileInfoRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const MobileAvatarContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const MobileAvatarName: import("@emotion/styled").StyledComponent<import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses" | "underline"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const MobileLocation: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const MobileLocationText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export { MobileAvatarContainer, MobileAvatarName, MobileInfoRow, MobileLocation, MobileLocationText, SceneContentContainer, SceneName, SceneRowContainer, SceneThumbnail, };

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.styled.js

@@ -0,0 +1,88 @@
+import { Box, Link, Typography, styled } from "@mui/material";
+const SceneRowContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    minWidth: 0,
+    overflow: "hidden",
+}));
+const SceneThumbnail = styled("img")(({ theme }) => ({
+    width: "auto",
+    height: theme.spacing(8.75),
+    borderRadius: `${theme.spacing(2)} 0 0 ${theme.spacing(2)}`,
+    objectFit: "cover",
+    flexShrink: 0,
+    [theme.breakpoints.down("sm")]: {
+        height: 60,
+        width: 60,
+    },
+}));
+const SceneContentContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+}));
+const SceneName = styled(Typography)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightMedium,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    [theme.breakpoints.down("sm")]: {
+        fontSize: "14px",
+    },
+}));
+const MobileInfoRow = styled(Box)(({ theme }) => ({
+    display: "none",
+    [theme.breakpoints.down("sm")]: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: theme.spacing(1),
+        fontSize: "12px",
+        minWidth: 0,
+        overflow: "hidden",
+    },
+}));
+const MobileAvatarContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    minWidth: 0,
+    overflow: "hidden",
+    flexShrink: 1,
+}));
+const MobileAvatarName = styled(Link)(({ theme }) => ({
+    fontSize: "12px",
+    textDecoration: "none",
+    fontWeight: theme.typography.fontWeightBold,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    "&:hover": {
+        textDecoration: "none",
+    },
+}));
+const MobileLocation = styled(Box)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    fontSize: "12px",
+    color: theme.palette.text.secondary,
+    minWidth: 0,
+    overflow: "hidden",
+    flexShrink: 1,
+    "& path:last-child": {
+        fill: theme.palette.text.primary,
+    },
+}));
+const MobileLocationText = styled(Typography)({
+    fontSize: "12px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+export { MobileAvatarContainer, MobileAvatarName, MobileInfoRow, MobileLocation, MobileLocationText, SceneContentContainer, SceneName, SceneRowContainer, SceneThumbnail, };
+//# sourceMappingURL=SceneRow.styled.js.map

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneRow.styled.js","sourceRoot":"","sources":["../../../../../src/components/ScenesTable/rows/SceneRow/SceneRow.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrB,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC,CAAA;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACnD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC3B,YAAY,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;IAC3D,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,CAAC;IACb,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACvB,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC,CAAA;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACnD,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB;IAC7C,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC9B,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC9B,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACrB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACvB,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,CAAC;CACd,CAAC,CAAC,CAAA;AAEH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,QAAQ,EAAE,MAAM;IAChB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc;IAC3C,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE;QACT,cAAc,EAAE,MAAM;KACvB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACvB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;IACnC,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,CAAC;IACb,mBAAmB,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;KACjC;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAA;AAEF,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,cAAc,GACf,CAAA"}

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.types.d.ts

@@ -0,0 +1,8 @@
+import { Avatar } from "@dcl/schemas";
+type SceneRowProps = {
+    name: string;
+    thumbnail: string;
+    creator?: Avatar;
+    location?: string;
+};
+export type { SceneRowProps };

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SceneRow.types.js.map

package/dist/components/ScenesTable/rows/SceneRow/SceneRow.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneRow.types.js","sourceRoot":"","sources":["../../../../../src/components/ScenesTable/rows/SceneRow/SceneRow.types.ts"],"names":[],"mappings":""}

package/dist/components/ScenesTable/rows/SceneRow/index.d.ts

@@ -0,0 +1,2 @@
+export { SceneRow } from "./SceneRow";
+export type { SceneRowProps } from "./SceneRow.types";

package/dist/components/ScenesTable/rows/SceneRow/index.js

@@ -0,0 +1,2 @@
+export { SceneRow } from "./SceneRow";
+//# sourceMappingURL=index.js.map

package/dist/components/ScenesTable/rows/SceneRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ScenesTable/rows/SceneRow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/ScenesTable/rows/index.d.ts

@@ -0,0 +1,8 @@
+export { ActionRow } from "./ActionRow";
+export type { ActionRowProps } from "./ActionRow";
+export { AvatarRow } from "./AvatarRow";
+export type { AvatarRowProps } from "./AvatarRow";
+export { LocationRow } from "./LocationRow";
+export type { LocationRowProps } from "./LocationRow";
+export { SceneRow } from "./SceneRow";
+export type { SceneRowProps } from "./SceneRow";

package/dist/components/ScenesTable/rows/index.js

@@ -0,0 +1,5 @@
+export { ActionRow } from "./ActionRow";
+export { AvatarRow } from "./AvatarRow";
+export { LocationRow } from "./LocationRow";
+export { SceneRow } from "./SceneRow";
+//# sourceMappingURL=index.js.map

package/dist/components/ScenesTable/rows/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ScenesTable/rows/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import { BaseRow, TableProps } from "./Table.types";
+declare const TableComponent: {
+    <T extends BaseRow>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const Table: typeof TableComponent;
+export { Table };

package/dist/components/Table/Table.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { useMobileMediaQuery } from "../Media";
+import { BorderOverlay, StyledTable, StyledTableBody, StyledTableCell, StyledTableContainer, StyledTableHead, StyledTableHeadRow, StyledTableRow, } from "./Table.styled";
+const TableComponent = (props) => {
+    const { columns, rows, hoverEffect = true, onMobileRowClick } = props;
+    const isMobile = useMobileMediaQuery();
+    const visibleColumns = isMobile
+        ? columns.filter((col) => !col.hideOnMobile)
+        : columns;
+    const handleRowClick = useCallback((row, index) => {
+        if (isMobile && onMobileRowClick) {
+            onMobileRowClick(row, index);
+        }
+    }, [isMobile, onMobileRowClick]);
+    return (_jsx(StyledTableContainer, { children: _jsxs(StyledTable, { "aria-label": "table", children: [_jsx(StyledTableHead, { children: _jsx(StyledTableHeadRow, { children: visibleColumns.map((column) => (_jsx(StyledTableCell, { cellWidth: column.width, cellPadding: column.cellPadding, children: column.header }, column.id))) }) }), _jsx(StyledTableBody, { hoverEffect: hoverEffect, children: rows.map((row, index) => (_jsx(StyledTableRow, { mobileClickable: !!onMobileRowClick, withBorder: !!row.borderColor, onClick: () => handleRowClick(row, index), children: visibleColumns.map((column, colIndex) => (_jsxs(StyledTableCell, { cellWidth: column.width, cellPadding: column.cellPadding, children: [colIndex === 0 && row.borderColor && (_jsx(BorderOverlay, { borderColor: row.borderColor })), column.render(row, index)] }, column.id))) }, row.key))) })] }) }));
+};
+TableComponent.displayName = "Table";
+const Table = memo(TableComponent);
+export { Table };
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EACL,aAAa,EACb,WAAW,EACX,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,cAAc,GACf,MAAM,gBAAgB,CAAA;AAEvB,MAAM,cAAc,GAAG,CAAoB,KAAoB,EAAE,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IAErE,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAA;IAEtC,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;QAC5C,CAAC,CAAC,OAAO,CAAA;IAEX,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,GAAM,EAAE,KAAa,EAAE,EAAE;QACxB,IAAI,QAAQ,IAAI,gBAAgB,EAAE,CAAC;YACjC,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAC9B,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAC7B,CAAA;IAED,OAAO,CACL,KAAC,oBAAoB,cACnB,MAAC,WAAW,kBAAY,OAAO,aAC7B,KAAC,eAAe,cACd,KAAC,kBAAkB,cAChB,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,KAAC,eAAe,IAEd,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,WAAW,EAAE,MAAM,CAAC,WAAW,YAE9B,MAAM,CAAC,MAAM,IAJT,MAAM,CAAC,EAAE,CAKE,CACnB,CAAC,GACiB,GACL,EAClB,KAAC,eAAe,IAAC,WAAW,EAAE,WAAW,YACtC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,cAAc,IAEb,eAAe,EAAE,CAAC,CAAC,gBAAgB,EACnC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,YAExC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CACxC,MAAC,eAAe,IAEd,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,WAAW,EAAE,MAAM,CAAC,WAAW,aAE9B,QAAQ,KAAK,CAAC,IAAI,GAAG,CAAC,WAAW,IAAI,CACpC,KAAC,aAAa,IAAC,WAAW,EAAE,GAAG,CAAC,WAAW,GAAI,CAChD,EACA,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,KAPrB,MAAM,CAAC,EAAE,CAQE,CACnB,CAAC,IAhBG,GAAG,CAAC,GAAG,CAiBG,CAClB,CAAC,GACc,IACN,GACO,CACxB,CAAA;AACH,CAAC,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,OAAO,CAAA;AAEpC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAA0B,CAAA;AAE3D,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,17 @@
+import { Table } from "./Table";
+import { BaseRow } from "./Table.types";
+import type { Meta, StoryObj } from "@storybook/react";
+type ExampleRow = BaseRow & {
+    scene: string;
+    creator: string;
+    location: string;
+};
+declare const meta: Meta<typeof Table<ExampleRow>>;
+type Story = StoryObj<typeof Table<ExampleRow>>;
+declare const Default: Story;
+declare const WithBorders: Story;
+declare const WithoutHoverEffect: Story;
+declare const DisabledHoverEffect: Story;
+declare const MobileChangeLayout: Story;
+export default meta;
+export { Default, DisabledHoverEffect, MobileChangeLayout, WithBorders, WithoutHoverEffect, };

package/dist/components/Table/Table.stories.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from "./Table";
+import { gradient } from "../../theme/colors";
+const exampleRows = [
+    {
+        key: "1",
+        scene: "Genesis Plaza",
+        creator: "Decentraland",
+        location: "0,0",
+    },
+    {
+        key: "2",
+        scene: "Metaverse HQ",
+        creator: "DCL Team",
+        location: "-10,15",
+    },
+    {
+        key: "3",
+        scene: "Art Gallery",
+        creator: "CryptoArtist",
+        location: "world.dcl.eth",
+    },
+    {
+        key: "4",
+        scene: "Music Festival",
+        creator: "SoundDAO",
+        location: "25,-30",
+    },
+];
+const exampleRowsWithBorders = [
+    {
+        key: "1",
+        scene: "Genesis Plaza",
+        creator: "Decentraland",
+        location: "0,0",
+        borderColor: gradient.gold,
+    },
+    {
+        key: "2",
+        scene: "Metaverse HQ",
+        creator: "DCL Team",
+        location: "-10,15",
+        borderColor: gradient.silver,
+    },
+    {
+        key: "3",
+        scene: "Art Gallery",
+        creator: "CryptoArtist",
+        location: "world.dcl.eth",
+        borderColor: gradient.bronze,
+    },
+    {
+        key: "4",
+        scene: "Music Festival",
+        creator: "SoundDAO",
+        location: "25,-30",
+    },
+];
+const exampleRowsWithSolidBorder = [
+    {
+        key: "1",
+        scene: "Genesis Plaza",
+        creator: "Decentraland",
+        location: "0,0",
+        borderColor: "#FF2D55",
+    },
+    {
+        key: "2",
+        scene: "Metaverse HQ",
+        creator: "DCL Team",
+        location: "-10,15",
+    },
+    {
+        key: "3",
+        scene: "Art Gallery",
+        creator: "CryptoArtist",
+        location: "world.dcl.eth",
+    },
+    {
+        key: "4",
+        scene: "Music Festival",
+        creator: "SoundDAO",
+        location: "25,-30",
+    },
+];
+const exampleColumns = [
+    {
+        id: "scene",
+        header: "Scene",
+        width: "40%",
+        render: (row) => row.scene,
+    },
+    {
+        id: "creator",
+        header: "Creator",
+        render: (row) => row.creator,
+    },
+    {
+        id: "location",
+        header: "Location",
+        render: (row) => row.location,
+    },
+];
+const mobileColumns = [
+    {
+        id: "scene",
+        header: "Scene",
+        width: "50%",
+        render: (row) => row.scene,
+    },
+    {
+        id: "creator",
+        header: "Creator",
+        hideOnMobile: true,
+        render: (row) => row.creator,
+    },
+    {
+        id: "location",
+        header: "Location",
+        hideOnMobile: true,
+        render: (row) => row.location,
+    },
+    {
+        id: "action",
+        header: "",
+        width: { mobile: 80 },
+        render: () => "Jump In",
+    },
+];
+const meta = {
+    title: "Decentraland UI/Tables/Table",
+    component: Table,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "100%", padding: "16px" }, children: _jsx(Story, {}) })),
+    ],
+};
+const Default = {
+    args: {
+        columns: exampleColumns,
+        rows: exampleRows,
+    },
+};
+const WithBorders = {
+    args: {
+        columns: exampleColumns,
+        rows: exampleRowsWithBorders,
+    },
+};
+const WithoutHoverEffect = {
+    args: {
+        columns: exampleColumns,
+        rows: exampleRows,
+        hoverEffect: false,
+    },
+};
+const DisabledHoverEffect = {
+    args: {
+        columns: exampleColumns,
+        rows: exampleRowsWithSolidBorder,
+        hoverEffect: false,
+    },
+};
+const MobileChangeLayout = {
+    args: {
+        columns: mobileColumns,
+        rows: exampleRows,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "On mobile, Creator and Location columns are hidden. Resize the viewport to see the layout change.",
+            },
+        },
+    },
+};
+// eslint-disable-next-line import/no-default-export
+export default meta;
+export { Default, DisabledHoverEffect, MobileChangeLayout, WithBorders, WithoutHoverEffect, };
+//# sourceMappingURL=Table.stories.js.map

package/dist/components/Table/Table.stories.js.map

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

package/dist/components/Table/Table.styled.d.ts

@@ -0,0 +1,41 @@
+declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("@mui/material").TableContainerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const StyledTable: import("@emotion/styled").StyledComponent<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
+}, "padding" | "className" | "style" | "classes" | "children" | "sx" | "size" | "stickyHeader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const StyledTableHead: import("@emotion/styled").StyledComponent<import("@mui/material").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const StyledTableHeadRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, "hover" | "selected" | "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+type StyledTableBodyProps = {
+    hoverEffect?: boolean;
+};
+declare const StyledTableBody: import("@emotion/styled").StyledComponent<import("@mui/material").TableBodyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledTableBodyProps, {}, {}>;
+type ResponsiveWidth = string | number | {
+    mobile?: string | number;
+    desktop?: string | number;
+};
+type StyledTableCellProps = {
+    cellWidth?: ResponsiveWidth;
+    cellPadding?: number | string;
+};
+declare const StyledTableCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledTableCellProps, {}, {}>;
+type StyledTableRowProps = {
+    mobileClickable?: boolean;
+    withBorder?: boolean;
+};
+declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, "hover" | "selected" | "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledTableRowProps, {}, {}>;
+type BorderOverlayProps = {
+    borderColor?: string;
+};
+declare const BorderOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & BorderOverlayProps, {}, {}>;
+export { BorderOverlay, StyledTable, StyledTableBody, StyledTableCell, StyledTableContainer, StyledTableHead, StyledTableHeadRow, StyledTableRow, };

package/dist/components/Table/Table.styled.js

@@ -0,0 +1,121 @@
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, styled, } from "@mui/material";
+import { hexToRgba } from "../../utils/colors";
+const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
+    padding: theme.spacing(1.5),
+    backgroundImage: "none",
+}));
+const StyledTable = styled(Table)(({ theme }) => ({
+    width: "100%",
+    tableLayout: "fixed",
+    borderCollapse: "separate",
+    borderSpacing: `0 ${theme.spacing(1)}`,
+}));
+const StyledTableHead = styled(TableHead)(({ theme }) => ({
+    "& .MuiTableCell-root": {
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        textAlign: "left",
+        ...theme.typography.overline,
+        fontSize: "12px",
+        color: theme.palette.text.primary,
+    },
+    "& .MuiTableCell-root:first-of-type": {
+        borderRadius: theme.spacing(2, 0, 0, 2),
+    },
+    "& .MuiTableCell-root:last-of-type": {
+        borderRadius: theme.spacing(0, 2, 2, 0),
+    },
+    [theme.breakpoints.down("sm")]: {
+        display: "none",
+    },
+}));
+const StyledTableHeadRow = styled(TableRow)(({ theme }) => ({
+    height: "20px",
+    "& .MuiTableCell-root": {
+        padding: theme.spacing(0.5, 2),
+        borderBottom: "none",
+    },
+}));
+const StyledTableBody = styled(TableBody, {
+    shouldForwardProp: (prop) => prop !== "hoverEffect",
+})(({ theme, hoverEffect = true }) => ({
+    borderTop: `${theme.spacing(1)} solid transparent`,
+    "& .MuiTableCell-root": {
+        backgroundColor: hoverEffect ? "rgba(0, 0, 0, 0.4)" : "rgba(0, 0, 0, 0.7)",
+        borderBottom: "none",
+        textAlign: "left",
+    },
+    "& tr td:first-of-type, & tr th:first-of-type": {
+        borderRadius: theme.spacing(2, 0, 0, 2),
+    },
+    "& tr td:last-of-type, & tr th:last-of-type": {
+        borderRadius: theme.spacing(0, 2, 2, 0),
+    },
+    "& tr": {
+        borderRadius: theme.spacing(2),
+        transition: theme.transitions.create("box-shadow", {
+            duration: theme.transitions.duration.shorter,
+        }),
+        ...(hoverEffect && {
+            "&:hover": {
+                boxShadow: `0px 0px 20px 6px ${hexToRgba("#DD56FF", 0.37)}`,
+            },
+        }),
+    },
+    [theme.breakpoints.down("sm")]: {
+        "& tr:hover": {
+            boxShadow: "none",
+        },
+    },
+}));
+const isResponsiveWidth = (value) => typeof value === "object" && ("mobile" in value || "desktop" in value);
+const StyledTableCell = styled(TableCell, {
+    shouldForwardProp: (prop) => prop !== "cellWidth" && prop !== "cellPadding",
+})(({ theme, cellWidth, cellPadding }) => {
+    const desktopWidth = cellWidth && isResponsiveWidth(cellWidth) ? cellWidth.desktop : cellWidth;
+    const mobileWidth = cellWidth && isResponsiveWidth(cellWidth) ? cellWidth.mobile : undefined;
+    return {
+        overflow: "hidden",
+        ...(desktopWidth && { width: desktopWidth }),
+        ...(cellPadding !== undefined && { padding: cellPadding }),
+        [theme.breakpoints.down("sm")]: {
+            width: mobileWidth ?? "auto",
+        },
+    };
+});
+const StyledTableRow = styled(TableRow, {
+    shouldForwardProp: (prop) => prop !== "mobileClickable" && prop !== "withBorder",
+})(({ theme, mobileClickable, withBorder }) => ({
+    ...(mobileClickable && {
+        [theme.breakpoints.down("sm")]: {
+            cursor: "pointer",
+            "&:active": {
+                opacity: 0.7,
+            },
+        },
+    }),
+    ...(withBorder && {
+        position: "relative",
+    }),
+}));
+const BorderOverlay = styled(Box, {
+    shouldForwardProp: (prop) => prop !== "borderColor",
+})(({ theme, borderColor }) => ({
+    position: "absolute",
+    inset: 0,
+    borderRadius: theme.spacing(2),
+    pointerEvents: "none",
+    zIndex: 1,
+    "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: theme.spacing(2),
+        padding: "3px",
+        background: borderColor,
+        mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+        maskComposite: "exclude",
+        pointerEvents: "none",
+    },
+}));
+export { BorderOverlay, StyledTable, StyledTableBody, StyledTableCell, StyledTableContainer, StyledTableHead, StyledTableHeadRow, StyledTableRow, };
+//# sourceMappingURL=Table.styled.js.map

package/dist/components/Table/Table.styled.js.map

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