@evergis/react 3.1.76 → 3.1.78

package/dist/react.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, LinearProgress, H2, defaultTheme, Preview, Blank, Popover, Expander, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, LinearProgress, H2, defaultTheme, Preview, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useContext, useMemo, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -5161,7 +5161,8 @@ const Container = styled(Flex) `
   
   ${({ isColumn }) => isColumn
     ? css `
-        > * {
+        &&& > * {
+          justify-content: flex-start;
           width: 100%;
 
           :not(:last-child) {
@@ -5679,7 +5680,7 @@ const OneColumnContainer = memo(({ elementConfig, renderElement }) => {
     const hasUnits = elementConfig?.children?.some(({ id }) => id === "units");
     if (!value && hideEmpty)
         return null;
-    return (jsxs(Container, { id: id, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
+    return (jsxs(Container, { id: id, isColumn: true, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
 });
 
 const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement }) => {
@@ -7749,10 +7750,11 @@ const ElementChart = memo(({ type, elementConfig, renderElement }) => {
 const ElementChips = memo(({ type, elementConfig }) => {
     const { attributes } = useWidgetContext(type);
     const { attributeName, options, style } = elementConfig || {};
-    const { separator, bgColor, fontColor, fontSize } = options || {};
-    const attribute = getAttributeByName(attributeName, attributes);
-    const tags = attribute?.value?.split(separator || ",");
-    return (jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsx(DashboardChip$1, { text: tag, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": true }, tag))) }));
+    const { separator, bgColor, fontColor, fontSize, colorAttribute } = options || {};
+    const valueAttr = getAttributeByName(attributeName, attributes);
+    const colorAttr = getAttributeByName(colorAttribute, attributes);
+    const tags = valueAttr?.value?.split(separator || ",");
+    return (jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsx(DashboardChip$1, { text: tag, "$bgColor": colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !colorAttr?.value }, tag))) }));
 });
 
 const StyledIconFontSizeMixin = css `
@@ -8011,37 +8013,6 @@ const MarkdownWrapper = styled.div `
     display: none;
   }
 `;
-styled(Flex) `
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1rem;
-`;
-styled.span `
-  display: block;
-  font-size: 0.75rem;
-  line-height: 0.875rem;
-  opacity: 0.36;
-  margin: 0 0 0.5rem 0;
-`;
-styled.div `
-  width: 1.25rem;
-  height: 1.25rem;
-  cursor: pointer;
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  img, svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`;
-const ExpandButton = styled(IconButton) `
-  margin-bottom: 1rem;
-`;
 
 const ElementMarkdown = memo(({ elementConfig, type }) => {
     const { attributes } = useWidgetContext(type);
@@ -8065,14 +8036,14 @@ const ElementMarkdown = memo(({ elementConfig, type }) => {
     if (!shouldShowExpand) {
         return (jsx(MarkdownWrapper, { children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }) }));
     }
-    // Truncated content for collapsed state
-    const truncatedContent = markdownString.substring(0, expandLength);
     // Collapsed state
     if (!expanded) {
-        return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: false }), onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent })] }));
+        // Truncated content for collapsed state
+        const truncatedContent = markdownString.substring(0, expandLength);
+        return (jsxs(MarkdownWrapper, { children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent }), jsx(LegendToggler, { onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
     }
     // Expanded state
-    return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: true }), onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString })] }));
+    return (jsxs(MarkdownWrapper, { children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }), jsx(LegendToggler, { toggled: true, onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) })] }));
 });
 
 const SmallPreviewContainer = styled.div `