@ssa-ui-kit/core 3.4.0 → 3.5.0

package/dist/components/Charts/BarGaugeChart/types.d.ts

@@ -21,7 +21,7 @@ export interface GaugeBarProps {
     max?: number;
 }
 export interface BarGaugeChartProps {
-    title?: string;
+    title?: React.ReactNode;
     widgetCardProps?: WidgetCardProps;
     bars?: GaugeBarProps[];
     features?: BarGaugeChartFeature[];

package/dist/components/Charts/BarLineComplexChart/constants.d.ts

@@ -1,16 +1 @@
 export declare const FONT_FAMILY = "Manrope, sans-serif";
-export declare const TITLE_PADDING_LEFT: {
-    mobile: number;
-    md: number;
-    other: number;
-};
-export declare const TITLE_PADDING_TOP: {
-    mobile: number;
-    md: number;
-    other: number;
-};
-export declare const TITLE_FONT_SIZE: {
-    mobile: number;
-    md: number;
-    other: number;
-};

package/dist/components/Charts/BarLineComplexChart/types.d.ts

@@ -15,7 +15,7 @@ export interface BarLineComplexChartProps extends Omit<PlotParams, 'layout'> {
     lineShape?: Plotly.ScatterLine['shape'];
     width?: string;
     height?: string;
-    title?: string;
+    title?: React.ReactNode;
     maxVisibleBars?: number;
     maxVisibleLines?: number;
     container?: Element | DocumentFragment;

package/dist/components/Charts/BigNumberChart/BigNumberChart.d.ts

@@ -6,7 +6,7 @@ type Datum = LineSeries['data'][number];
 export interface BigNumberChartProps {
     data: Datum[];
     interactive?: boolean;
-    title?: string;
+    title?: React.ReactNode;
     widgetCardProps?: WidgetCardProps;
     trendLineProps?: Omit<TrendLineProps, 'data' | 'height' | 'width'>;
     features?: BigNumberChartFeatures[];

package/dist/components/Charts/CandlestickChart/CandlestickChart.d.ts

@@ -5,7 +5,7 @@ export type CandlestickChartFeatures = 'header' | 'fullscreenMode';
 export interface CandlestickChartProps extends Partial<Omit<PlotParams, 'data' | 'style'>> {
     data: CandlestickChartData;
     style?: CandlestickStyle;
-    title?: string;
+    title?: React.ReactNode;
     features?: CandlestickChartFeatures[];
     widgetCardProps?: WidgetCardProps;
 }

package/dist/components/Charts/GaugeChart/GaugeChart.d.ts

@@ -5,7 +5,7 @@ export interface GaugeChartProps extends Pick<GaugeChartLabelsProps, 'maxLabel'
     minValue: number;
     maxValue: number;
     value: number;
-    title?: string;
+    title?: React.ReactNode;
     segments?: {
         value: number;
         id?: string;

package/dist/components/Charts/RadarChart/RadarChart.d.ts

@@ -4,7 +4,7 @@ declare const ResponsiveRadar: <D extends Record<string, unknown>>(props: import
 export type RadarChartFeatures = 'header' | 'fullscreenMode';
 type ResponsiveRadarProps<D extends Record<string, unknown>> = ComponentProps<typeof ResponsiveRadar<D>>;
 export interface RadarChartProps<D extends Record<string, unknown>> extends Omit<ResponsiveRadarProps<D>, 'legends'> {
-    title?: string;
+    title?: React.ReactNode;
     legends?: Partial<NonNullable<ResponsiveRadarProps<D>['legends']>[number]>[];
     features?: RadarChartFeatures[];
     widgetCardProps?: WidgetCardProps;

package/dist/components/Charts/TreeMapChart/TreeMapChart.d.ts

@@ -10,7 +10,7 @@ export type TreeMapChartFeature = 'header' | 'fullscreenMode';
 type NivoTreeMapChartProps = React.ComponentProps<typeof ResponsiveTreeMap<TreeNode>>;
 export interface TreeMapChartProps extends Omit<NivoTreeMapChartProps, 'data'> {
     data: TreeNode;
-    title?: string;
+    title?: React.ReactNode;
     fullScreen?: boolean;
     features?: TreeMapChartFeature[];
     widgetCardProps?: WidgetCardProps;

package/dist/index.js

@@ -15239,7 +15239,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   status = 'basic'
 }) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
   theme
 }) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
@@ -15247,7 +15247,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   theme
 }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";&::placeholder{color:", ({
+}) => theme.colors.greyLighter, ";resize:none;&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){box-shadow:", ({
   theme,
@@ -15357,7 +15357,8 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
   onPaste,
   register,
   setCountChar,
-  status = 'basic'
+  status = 'basic',
+  ...rest
 }, ref) {
   (0,external_react_namespaceObject.useEffect)(() => {
     if (!register) {
@@ -15376,6 +15377,7 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
     onPaste: onPaste,
     title: title,
     status: status,
+    ...rest,
     ...registerResult,
     onChange: (0,utils_namespaceObject.callAll)(setCountChar, onChange),
     ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([registerResult?.ref, ref])
@@ -40385,21 +40387,6 @@ const BarLineComplexChartTooltip = /*#__PURE__*/(0,external_react_namespaceObjec
 });
 ;// ./src/components/Charts/BarLineComplexChart/constants.ts
 const FONT_FAMILY = 'Manrope, sans-serif';
-const TITLE_PADDING_LEFT = {
-  mobile: 10,
-  md: 10,
-  other: 20
-};
-const TITLE_PADDING_TOP = {
-  mobile: 13,
-  md: 18,
-  other: 20
-};
-const TITLE_FONT_SIZE = {
-  mobile: 16,
-  md: 16,
-  other: 20
-};
 ;// ./src/components/Charts/hooks/usePlotlyDefaultConfig.ts
 
 const usePlotlyDefaultConfig = () => {
@@ -40444,6 +40431,7 @@ function BarLineComplexChartView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You
 
 
 
+
 var BarLineComplexChartView_ref =  true ? {
   name: "sj7adp",
   styles: "background:#fff;border-radius:8px;box-shadow:-2px 2px 8px 0px rgba(43, 45, 49, 0.24);padding:4px 8px"
@@ -40462,7 +40450,6 @@ const BarLineComplexChartView = ({
   const theme = (0,react_namespaceObject.useTheme)();
   const plotlyWrapperRef = (0,external_react_namespaceObject.useRef)(null);
   const plotlyDefaultLayoutConfig = usePlotlyDefaultConfig();
-  const deviceType = (0,hooks_namespaceObject.useDeviceType)();
   const {
     data
   } = useBarLineComplexChartContext();
@@ -40477,6 +40464,9 @@ const BarLineComplexChartView = ({
   const {
     setIsOpen
   } = useTooltipContext();
+  const {
+    features
+  } = useBarLineComplexChartContext();
   const {
     layout = {},
     config = {},
@@ -40484,8 +40474,6 @@ const BarLineComplexChartView = ({
   } = props;
   const {
     margin = {},
-    title = {},
-    titlefont = {},
     yaxis = {},
     yaxis2 = {},
     xaxis = {},
@@ -40498,9 +40486,6 @@ const BarLineComplexChartView = ({
     size: isFullscreenMode ? 16 : 12,
     weight: 500
   };
-  if (typeof props.cardProps?.title === 'string' && typeof title !== 'string' && typeof title.text !== 'string') {
-    title.text = props.cardProps.title;
-  }
   const formattedTicks = timestamps.map((timestamp, index) => {
     const dateTime = new Date(timestamp);
     const monthYear = dateTime.toLocaleDateString('en-US', {
@@ -40570,11 +40555,15 @@ const BarLineComplexChartView = ({
       window.removeEventListener('resize', handleDebouncedFn, false);
     };
   }, []);
+  // title is rendered as an absolutely positioned overlay so it shares the same
+  // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+  // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+  // The Wrapper is kept `position: relative` so the overlay coordinates are relative to the chart.
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
     className: "bar-line-complex-chart-wrapper",
     ref: plotlyWrapperRef,
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      position: isFullscreenMode ? 'fixed' : 'static',
+      position: isFullscreenMode ? 'fixed' : 'relative',
       top: isFullscreenMode ? '2.5%' : 'unset',
       left: isFullscreenMode ? '2.5%' : 'unset',
       width: isFullscreenMode ? '95%' : width,
@@ -40582,6 +40571,7 @@ const BarLineComplexChartView = ({
       borderRadius: 20,
       zIndex: isFullscreenMode ? 2 : 1,
       overflow: 'hidden',
+      background: theme.colors.white,
       boxShadow: 'rgba(42, 48, 57, 0.08) 0px 10px 40px 0px',
       '& .plotly': {
         '& > div': isFullscreenMode && {
@@ -40595,7 +40585,28 @@ const BarLineComplexChartView = ({
         }
       }
     },  true ? "" : 0,  true ? "" : 0),
-    children: [(0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+    children: [features?.includes('header') && props.cardProps?.title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        position: 'absolute',
+        top: isFullscreenMode ? '13px' : '10px',
+        left: '10px',
+        width: 'auto',
+        marginBottom: 0,
+        zIndex: 1
+      },  true ? "" : 0,  true ? "" : 0),
+      children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+        variant: "h3",
+        weight: "bold",
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          flexDirection: 'row',
+          fontSize: isFullscreenMode ? '24px' : '12px',
+          [theme.mediaQueries.md]: {
+            fontSize: isFullscreenMode ? '24px' : '16px'
+          }
+        },  true ? "" : 0,  true ? "" : 0),
+        children: props.cardProps.title
+      })
+    }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
       divId: 'bar-line-complex-chart-graph',
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         width: isFullscreenMode ? '100%' : width,
@@ -40615,27 +40626,12 @@ const BarLineComplexChartView = ({
         orientation: 1,
         margin: {
           b: isFullscreenMode ? 15 : 0,
-          l: orientation === 'v' ? (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT) : isFullscreenMode ? 30 : 15,
+          l: orientation === 'v' ? 10 : isFullscreenMode ? 30 : 15,
           r: orientation === 'v' ? 40 : 0,
-          t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP) + 25,
+          t: features?.includes('header') && props.cardProps?.title ? isFullscreenMode ? 45 : 43 : 10,
           pad: 10,
           ...margin
         },
-        title: typeof title === 'string' ? title : {
-          x: 0,
-          y: 1,
-          font: {
-            size: isFullscreenMode ? 24 : (0,utils_namespaceObject.propOr)(TITLE_FONT_SIZE.other, deviceType)(TITLE_FONT_SIZE),
-            weight: 700,
-            family: FONT_FAMILY,
-            ...titlefont
-          },
-          pad: {
-            l: (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT),
-            t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP)
-          },
-          ...title
-        },
         barmode: 'group',
         autosize: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -40785,6 +40781,8 @@ const BarLineComplexChartComponent = ({
   onFullscreenModeChange,
   ...rest
 }) => {
+  const effectiveTitle = cardProps?.title ?? title;
+  const effectiveFeatures = effectiveTitle && !features.includes('header') ? [...features, 'header'] : features;
   const tooltip = useTooltip();
   const {
     isFullscreenMode,
@@ -40807,14 +40805,14 @@ const BarLineComplexChartComponent = ({
     lineShape: lineShape,
     maxVisibleBars: maxVisibleBars,
     maxVisibleLines: maxVisibleLines,
-    features: features,
+    features: effectiveFeatures,
     children: (0,jsx_runtime_namespaceObject.jsx)(TooltipContext.Provider, {
       value: tooltip,
       children: (0,jsx_runtime_namespaceObject.jsx)(BarLineComplexChartInternal, {
         ...rest,
         cardProps: {
           ...cardProps,
-          title: cardProps?.title || title
+          title: effectiveTitle
         }
       })
     })
@@ -47802,6 +47800,7 @@ const getCandlestickPlotData = (style, data, increasingColor, decreasingColor) =
   }];
 };
 ;// ./src/components/Charts/CandlestickChart/CandlestickChart.tsx
+
 function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -47812,14 +47811,23 @@ function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+
 var CandlestickChart_ref =  true ? {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%"
+} : 0;
+var CandlestickChart_ref2 =  true ? {
+  name: "1j8nx2m",
+  styles: "position:absolute;top:1px;left:10px;width:auto;margin-bottom:0;z-index:1"
+} : 0;
+var CandlestickChart_ref3 =  true ? {
   name: "w1atjl",
   styles: "width:100%;height:100%"
 } : 0;
 const CandlestickChartComponent = ({
   title,
   data,
-  features,
+  features = [],
   widgetCardProps,
   style = 'hollow',
   ...plotParams
@@ -47851,57 +47859,66 @@ const CandlestickChartComponent = ({
       gravity: '1'
     });
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
-    features: features,
-    cardProps: {
-      ...widgetCardProps
-    },
-    children: (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
-      layout: {
-        ...plotlyDefaultLayoutConfig.layout,
-        title: {
-          text: title,
-          x: 0,
-          y: 1,
-          pad: {
-            l: 10,
-            t: 5
-          },
-          font: {
-            size: 24,
-            weight: 700,
-            family: 'Manrope, sans-serif'
-          }
-        },
-        dragmode: 'zoom',
-        xaxis: {
-          rangeslider: {
-            visible: false
-          }
-        },
-        yaxis: {
-          side: 'right'
-        },
-        margin: {
-          t: 20,
-          b: 40,
-          l: 20,
-          r: 20
-        },
-        showlegend: false,
-        ...layout
-      },
-      css: CandlestickChart_ref,
-      useResizeHandler: true,
-      data: plotData,
-      config: {
-        ...plotlyDefaultLayoutConfig.config,
-        modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
-        ...config
+  return (
+    // title is rendered as an absolutely positioned overlay so it shares the same
+    // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+    // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+    (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+      features: features,
+      cardProps: {
+        ...widgetCardProps
       },
-      ...restPlotParams
+      children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: CandlestickChart_ref,
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+          css: CandlestickChart_ref2,
+          children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+            variant: "h3",
+            weight: "bold",
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              flexDirection: 'row',
+              lineHeight: 1,
+              fontSize: '24px',
+              [theme.mediaQueries.md]: {
+                fontSize: '24px'
+              }
+            },  true ? "" : 0,  true ? "" : 0),
+            children: title
+          })
+        }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+          layout: {
+            ...plotlyDefaultLayoutConfig.layout,
+            dragmode: 'zoom',
+            xaxis: {
+              rangeslider: {
+                visible: false
+              }
+            },
+            yaxis: {
+              side: 'right'
+            },
+            margin: {
+              t: 20,
+              b: 40,
+              l: 20,
+              r: 20
+            },
+            showlegend: false,
+            ...layout
+          },
+          css: CandlestickChart_ref3,
+          useResizeHandler: true,
+          data: plotData,
+          config: {
+            ...plotlyDefaultLayoutConfig.config,
+            modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
+            ...config
+          },
+          ...restPlotParams
+        })]
+      })
     })
-  });
+  );
 };
 const CandlestickChart = WithFullscreenMode(CandlestickChartComponent);
 ;// ./src/components/Charts/CandlestickChart/index.ts