@carto/meridian-ds 2.5.5-alpha-ellipsis.2 → 2.5.5-alpha-translations.1

package/dist/widgets/index.js

@@ -2,11 +2,11 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect, useCallback, useRef, createContext, useContext, useLayoutEffect, createRef } from "react";
 import { useTheme, styled, Box, Skeleton, Grid, Link, darken, Button, Divider, TextField, InputAdornment, Checkbox, Tooltip, debounce, Slider, TableCell, Table, TableHead, TableRow, TableBody, TableContainer, TableSortLabel, TablePagination, IconButton as IconButton$1, Menu, MenuItem, SvgIcon, Icon, Collapse, LinearProgress, Typography as Typography$1, lighten, ClickAwayListener, ToggleButton, capitalize, ListItem, Chip, List, Paper, Popover, Select, ListItemText, Drawer } from "@mui/material";
 import { useIntl } from "react-intl";
-import { i as getDefaultExportFromCjs, u as useImperativeIntl, T as Typography, S as SPACING, B as BREAKPOINTS, a as TablePaginationActions, e as ellipsisStyles, b as ICON_SIZE_MEDIUM } from "../css-utils-CTJjJR0x.js";
+import { i as getDefaultExportFromCjs, u as useImperativeIntl, T as Typography, S as SPACING, h as IconButton, B as BREAKPOINTS, a as TablePaginationActions, b as ICON_SIZE_MEDIUM } from "../TablePaginationActions-DIFPc_wQ.js";
 import _ReactEcharts from "echarts-for-react";
 import { FixedSizeList } from "react-window";
 import { S as Search, a as SwatchSquare } from "../SwatchSquare-CaaLsjAC.js";
-import { A as Alert, I as IconButton, L as Link$1 } from "../Alert-wE4A0ify.js";
+import { A as Alert, L as Link$1 } from "../Alert-CRVceJ9N.js";
 import { ChevronLeft, ChevronRight, ExpandLess, ExpandMore, MoreVert, KeyboardArrowDown, ErrorOutline, Cancel, VisibilityOutlined, VisibilityOffOutlined, Close, LayersOutlined } from "@mui/icons-material";
 import { a as getColorByCategory, c as commonPalette, b as getPalette } from "../palette-utils-BHqJlHm9.js";
 function detectTouchscreen() {
@@ -2967,7 +2967,9 @@ const TableCellStyled = styled(TableCell)(() => ({
   overflow: "hidden",
   "& p": {
     maxWidth: "100%",
-    ...ellipsisStyles
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }
 }));
 const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
@@ -4915,7 +4917,10 @@ const Text = styled(Typography$1, {
     WebkitLineClamp: 2,
     WebkitBoxOrient: "vertical"
   },
-  ...!expanded && ellipsisStyles
+  ...!expanded && {
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  }
 }));
 const HeaderItems = styled(Grid)(({ theme }) => ({
   display: "flex",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.5.5-alpha-ellipsis.2",
+  "version": "2.5.5-alpha-translations.1",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.d.ts

@@ -1,117 +0,0 @@
-import { default as React, ReactNode, MutableRefObject } from 'react';
-import { TooltipProps } from '@mui/material';
-/**
- * Props for the EllipsisWithTooltip component.
- *
- * @interface EllipsisWithTooltipProps
- * @extends Omit<TooltipProps, 'title' | 'children'>
- */
-export type EllipsisWithTooltipProps = Omit<TooltipProps, 'title' | 'children'> & {
-    /**
-     * The content to be wrapped with ellipsis and tooltip functionality.
-     * Can be any ReactNode (text, components, etc.).
-     *
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip>
-     *   <Typography>Long text that might overflow</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    children: ReactNode;
-    /**
-     * Custom tooltip text. If not provided, uses the text content of children.
-     *
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip tooltipText="Custom tooltip text">
-     *   <Typography>Some content</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    tooltipText?: string;
-    /**
-     * Content display mode for styling.
-     *
-     * @default 'block'
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip content="flex">
-     *   <div>Flex content</div>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    content?: 'block' | 'flex';
-    /**
-     * Always show the tooltip, regardless of overflow detection.
-     * Useful for testing or when you always want to display the tooltip.
-     *
-     * @default false
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip alwaysShowTooltip={true}>
-     *   <Typography>Always show tooltip</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    alwaysShowTooltip?: boolean;
-    /**
-     * Controls which children should have ellipsis applied.
-     * - 'first-child': Apply ellipsis only to the first child element
-     * - 'all': Apply ellipsis to all children (default behavior)
-     *
-     * This is useful for layouts where you want to preserve the visibility of
-     * secondary elements while truncating the primary content.
-     *
-     * @default 'all'
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip ellipsisTarget="first-child">
-     *   <Typography>This long text will be ellipsed</Typography>
-     *   <Typography>This secondary text remains fully visible</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    ellipsisTarget?: 'first-child' | 'all';
-    /**
-     * Number of lines to display before showing ellipsis.
-     * When greater than 1, uses CSS line-clamp for multi-line ellipsis.
-     *
-     * @default 1
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip lines={3}>
-     *   <Typography>Long text that can wrap to multiple lines</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    lines?: number;
-    /**
-     * Additional props to pass to the content wrapper element.
-     * Useful for styling or adding custom attributes.
-     *
-     * @example
-     * ```tsx
-     * <EllipsisWithTooltip contentProps={{ className: 'custom-class' }}>
-     *   <Typography>Content</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    contentProps?: object;
-    /**
-     * Ref to the text element for manual overflow detection.
-     * Useful when you need to control which element is used for overflow detection.
-     *
-     * @example
-     * ```tsx
-     * const textRef = useRef<HTMLElement>(null);
-     * <EllipsisWithTooltip textRef={textRef}>
-     *   <Typography ref={textRef}>Content</Typography>
-     * </EllipsisWithTooltip>
-     * ```
-     */
-    textRef?: MutableRefObject<HTMLElement | null>;
-};
-declare const EllipsisWithTooltip: React.ForwardRefExoticComponent<Omit<EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default EllipsisWithTooltip;
-//# sourceMappingURL=EllipsisWithTooltip.d.ts.map

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipsisWithTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/EllipsisWithTooltip/EllipsisWithTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACT,gBAAgB,EACjB,MAAM,OAAO,CAAA;AACd,OAAO,EAAW,YAAY,EAAU,MAAM,eAAe,CAAA;AAG7D;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,YAAY,EACZ,OAAO,GAAG,UAAU,CACrB,GAAG;IACF;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAE1B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;;;;;;;;;;;;OAgBG;IACH,cAAc,CAAC,EAAE,aAAa,GAAG,KAAK,CAAA;IAEtC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC/C,CAAA;AA6LD,QAAA,MAAM,mBAAmB,8GAAmC,CAAA;AAE5D,eAAe,mBAAmB,CAAA"}

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.stories.d.ts

@@ -1,66 +0,0 @@
-import { default as React } from 'react';
-declare const options: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    argTypes: {
-        ellipsisTarget: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
-        content: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
-        alwaysShowTooltip: {
-            control: "boolean";
-            description: string;
-        };
-        lines: {
-            control: "number";
-            description: string;
-        };
-        tooltipText: {
-            control: "text";
-        };
-        children: {
-            control: "text";
-            description: string;
-        };
-    };
-    args: {
-        children: import("react/jsx-runtime").JSX.Element;
-    };
-};
-export default options;
-export declare const Playground: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-export declare const EllipsisTarget: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-export declare const Lines: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    argTypes: {
-        ellipsisTarget: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-};
-export declare const Content: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-export declare const AlwaysShowTooltip: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    args: {
-        alwaysShowTooltip: boolean;
-        children: import("react/jsx-runtime").JSX.Element;
-    };
-};
-export declare const Composition: {
-    render: import('@storybook/core/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Omit<import('..').EllipsisWithTooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-//# sourceMappingURL=EllipsisWithTooltip.stories.d.ts.map

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipsisWithTooltip.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EllipsisWithTooltip/EllipsisWithTooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAUrC,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCG,CAAA;AA8OhB,eAAe,OAAO,CAAA;AAEtB,eAAO,MAAM,UAAU;;CAEtB,CAAA;AAED,eAAO,MAAM,cAAc;;CAE1B,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;CAMjB,CAAA;AAED,eAAO,MAAM,OAAO;;CAEnB,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;;;CAU7B,CAAA;AAED,eAAO,MAAM,WAAW;;CAEvB,CAAA"}

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=EllipsisWithTooltip.test.d.ts.map

package/dist/types/components/EllipsisWithTooltip/EllipsisWithTooltip.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipsisWithTooltip.test.d.ts","sourceRoot":"","sources":["../../../../src/components/EllipsisWithTooltip/EllipsisWithTooltip.test.tsx"],"names":[],"mappings":""}

package/dist/types/components/EllipsisWithTooltip/index.d.ts

@@ -1,3 +0,0 @@
-export { default as EllipsisWithTooltip } from './EllipsisWithTooltip';
-export type * from './EllipsisWithTooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/EllipsisWithTooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EllipsisWithTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,mBAAmB,uBAAuB,CAAA"}

package/dist/types/utils/css-utils.d.ts

@@ -1,14 +0,0 @@
-/**
- * Common CSS utility styles for the design system.
- * These styles can be reused across components to ensure consistency.
- */
-/**
- * Standard ellipsis styles for text truncation.
- * Used for single-line text overflow with ellipsis.
- */
-export declare const ellipsisStyles: {
-    readonly textOverflow: "ellipsis";
-    readonly overflow: "hidden";
-    readonly whiteSpace: "nowrap";
-};
-//# sourceMappingURL=css-utils.d.ts.map

package/dist/types/utils/css-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/css-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAA"}