@ssa-ui-kit/core 1.1.55-canary-dbf4f10-20250224 → 2.0.0-canary-1cc9a72-20250305

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 SSA Group
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 SSA Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,4 +1,5 @@
 import { PieChartProps } from './types';
+export declare const PieChartComponent: (props: PieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const PieChart: {
     (props: PieChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,2 +1,6 @@
 import { SegmentedPieChartProps } from './types';
-export declare const SegmentedPieChart: ({ data, pieChartProps, pieChartLegendProps, legendBackgrounds, pieChartColors, currency, otherLabel, totalAmount, totalDimension, legendValueRoundingDigits, legendPercentageRoundingDigits, showDimensions, showPercentage, titleTooltipOptions, tooltipConfig, renderTitleTooltipContent, }: SegmentedPieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SegmentedPieChartComponent: ({ data, pieChartProps, pieChartLegendProps, legendBackgrounds, pieChartColors, currency, otherLabel, totalAmount, totalDimension, legendValueRoundingDigits, legendPercentageRoundingDigits, showDimensions, showPercentage, titleTooltipOptions, tooltipConfig, renderTitleTooltipContent, }: SegmentedPieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SegmentedPieChart: {
+    (props: SegmentedPieChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Charts/SegmentedPieChart/hooks/useData.d.ts

@@ -1,5 +1,6 @@
 import { BalanceDataForGraph, SegmentedPieChartProps } from '../types';
-export declare const useData: ({ data, pieChartColors, legendValueRoundingDigits, }: Pick<SegmentedPieChartProps, "data" | "pieChartColors" | "legendValueRoundingDigits">) => {
+export declare const useData: ({ data, pieChartColors, legendValueRoundingDigits, legendBackgrounds, }: Pick<SegmentedPieChartProps, "data" | "pieChartColors" | "legendValueRoundingDigits" | "legendBackgrounds">) => {
     balanceDataForTheGraph: BalanceDataForGraph[];
     balanceDataForTheLegend: BalanceDataForGraph[];
+    legendColors: string[];
 };

package/dist/contexts/Translation/TranslationContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { JSONObject } from '@global-types/json';
+import { JSONObject } from '../../types/json';
 import { TranslationContextContent } from './types';
 export declare const TranslationContext: import("react").Context<TranslationContextContent>;
 export declare const TranslationProvider: ({ children, defaultTranslations, }: {

package/dist/contexts/Translation/types.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { JSONObject } from '@global-types/json';
+import { JSONObject } from '../../types/json';
 export type TranslationContextContent = {
     language: string;
     t: (translationKey: string) => string;

package/dist/index.js

@@ -129,6 +129,7 @@ __webpack_require__.d(__webpack_exports__, {
   PaginationContext: () => (/* reexport */ PaginationContext),
   PaginationContextProvider: () => (/* reexport */ PaginationContextProvider),
   PieChart: () => (/* reexport */ PieChart),
+  PieChartComponent: () => (/* reexport */ PieChartComponent),
   PieChartLegend: () => (/* reexport */ PieChartLegend),
   Popover: () => (/* reexport */ Popover),
   PopoverClose: () => (/* reexport */ PopoverClose),
@@ -154,6 +155,7 @@ __webpack_require__.d(__webpack_exports__, {
   SearchBoxInput: () => (/* reexport */ SearchBoxInput),
   SearchBoxWrapper: () => (/* reexport */ SearchBoxWrapper),
   SegmentedPieChart: () => (/* reexport */ SegmentedPieChart),
+  SegmentedPieChartComponent: () => (/* reexport */ SegmentedPieChartComponent),
   SimpleChartTooltip: () => (/* reexport */ SimpleChartTooltip),
   Step: () => (/* reexport */ Step_Step),
   StepConnector: () => (/* reexport */ StepConnector_StepConnector),
@@ -3857,16 +3859,16 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
-/**
- * The structure of the component:
- *
- * Dropdown
- *   DropdownToggle
- *   DropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
@@ -4970,16 +4972,16 @@ const DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
   styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
 } : 0);
 
-/**
- * The structure of the component:
- *
- * MultipleDropdown
- *   DropdownToggle
- *   MultipleDropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * MultipleDropdown
+ *   DropdownToggle
+ *   MultipleDropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 function MultipleDropdownInner({
   selectedItems = [],
@@ -5224,8 +5226,8 @@ const NavToggle = ({
 
 
 
-/**
- * UI Component that shows the navigation bar
+/**
+ * UI Component that shows the navigation bar
  */
 const NavBar = ({
   items
@@ -5673,8 +5675,8 @@ const PieChartBase = /*#__PURE__*/base_default()("div",  true ? {
 const PieChartTextBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eq9zdmm0"
 } : 0)( true ? {
-  name: "boy8rj",
-  styles: "position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;width:calc(100% - 34px);height:calc(100% - 34px);left:17px;top:17px;border-radius:50%"
+  name: "1e5nn9x",
+  styles: "position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;width:calc(100% - 34px);height:calc(100% - 34px);left:17px;top:17px;border-radius:50%;pointer-events:none"
 } : 0);
 ;// ./src/components/Charts/PieChart/styles.ts
 
@@ -6475,12 +6477,12 @@ const ProgressVertical = ({
 /* harmony default export */ const ProgressVertical_ProgressVertical = (ProgressVertical);
 ;// ./src/components/ResponsiveImage/ResponsiveImage.tsx
 
-/**
- * A simple wrapper over the `<img />` tag.
- *
- * Don't forget to adjust Device Pixel Ratio in DevTools
- * when testing srcSet, and use Hard Reload to force the
- * browser to load an image of another resolution.
+/**
+ * A simple wrapper over the `<img />` tag.
+ *
+ * Don't forget to adjust Device Pixel Ratio in DevTools
+ * when testing srcSet, and use Hard Reload to force the
+ * browser to load an image of another resolution.
  * */
 const ResponsiveImage = ({
   src,
@@ -6891,12 +6893,12 @@ const TabBarBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1hg26v10"
 } : 0)( true ? "" : 0);
 
-/**
- * This component doesn't show contents of the selected tab,
- * however it accepts a required `renderContent()` render
- * prop and stores it into the Context. This lets the parent
- * component to decide where to render the contents of the
- * selected tab.
+/**
+ * This component doesn't show contents of the selected tab,
+ * however it accepts a required `renderContent()` render
+ * prop and stores it into the Context. This lets the parent
+ * component to decide where to render the contents of the
+ * selected tab.
  * */
 const TabBar = ({
   children
@@ -7213,13 +7215,13 @@ const useTooltipContext = () => {
 
 
 
-/*
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button />
- *   </TooltipTrigger>
- *   <TooltipContent>Tooltip</TooltipContent>
- * </Tooltip>
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
  * */
 const Tooltip = ({
   children,
@@ -7693,9 +7695,9 @@ var CardList_ref =  true ? {
   name: "1fgo50s",
   styles: "list-style:none;padding:0;li{margin-bottom:15px;}"
 } : 0;
-/**
- *
- * UI Component that renders a list of items with a custom render function
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
  */
 const CardList = ({
   title,
@@ -8519,6 +8521,7 @@ const NavBarItemWithoutSubMenu = ({
   return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavBarItem, {
     children: (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBar_CollapsibleNavBarLink, {
       to: isExternalLink ? path : '/' + path,
+      end: true,
       onClick: onClick,
       navbartheme: theme,
       "data-customicon": !!CustomIcon,
@@ -8564,8 +8567,8 @@ const SCREEN_SIZES = {
 
 
 
-/**
- * UI Component that shows the collapsible navigation bar
+/**
+ * UI Component that shows the collapsible navigation bar
  */
 
 const CollapsibleNavBar = ({
@@ -11642,62 +11645,79 @@ const LegendItem = ({
 ;// ./src/components/Charts/SegmentedPieChart/hooks/useData.ts
 
 
+
 const useData = ({
   data,
   pieChartColors = defaultPieChartColors,
-  legendValueRoundingDigits
+  legendValueRoundingDigits,
+  legendBackgrounds
 }) => {
-  let calculatedTotalAmount = 0;
-  const dataLocal = Array.isArray(data) ? data : [];
-  const pieChartColorsLocal = Array.isArray(pieChartColors) ? pieChartColors : [[]];
-  dataLocal?.forEach(item => {
-    calculatedTotalAmount += Number(item.value);
-  });
+  const {
+    isFullscreenMode
+  } = useFullscreenMode();
+  const safeData = Array.isArray(data) ? data : [];
+  const safeColors = Array.isArray(pieChartColors) ? pieChartColors : [[]];
+  const totalAmount = safeData.reduce((acc, item) => acc + Number(item.value), 0);
+  const getRoundingDigits = item => (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item);
   const balanceDataForTheGraph = [];
   const balanceDataForTheLegend = [];
-  dataLocal?.forEach((item, itemIndex) => {
-    const mainPercentage = Number(item.value) * 100 / calculatedTotalAmount;
-    const newMainItem = {
-      value: item.value,
+  safeData.forEach((item, itemIndex) => {
+    const mainValue = Number(item.value);
+    const mainPercentage = totalAmount ? mainValue * 100 / totalAmount : 0;
+    const mainSlice = {
+      value: mainValue,
       label: item.label,
       percentage: mainPercentage,
       mainId: Number(item.id),
-      mainValue: item.value,
+      mainValue,
       legendLabel: item.legendLabel,
       legendValue: item.legendValue,
-      legendValueRoundingDigits: (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item),
-      color: pieChartColorsLocal?.[itemIndex]?.[0],
+      legendValueRoundingDigits: getRoundingDigits(item),
+      color: safeColors?.[itemIndex]?.[0],
       id: `${itemIndex}0`
     };
-    balanceDataForTheLegend.push(newMainItem);
-    if (item.parts?.length) {
-      item.parts?.filter(part => !!part.value).forEach((part, partIndex) => {
-        const partPercentage = part.value * 100 / calculatedTotalAmount;
-        balanceDataForTheGraph.push({
-          value: part.value,
-          label: item.label,
-          percentage: mainPercentage,
-          mainId: Number(item.id),
-          mainValue: item.value,
-          legendLabel: item.legendLabel,
-          legendValue: item.legendValue,
-          legendValueRoundingDigits: (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item),
-          color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
-          id: `${itemIndex}${partIndex}`,
-          partIndex,
-          partLabel: part.label,
-          partPercentage: Number(partPercentage),
-          partValue: part.value,
-          partLegendValue: part.legendValue
-        });
-      });
+    const partedSlices = (item.parts || []).filter(part => !!part.value).map((part, partIndex) => {
+      const partValue = Number(part.value);
+      const partPercentage = totalAmount ? partValue * 100 / totalAmount : 0;
+      return {
+        value: partValue,
+        label: `${item.label}, ${part.label}`,
+        percentage: partPercentage,
+        mainId: Number(item.id),
+        mainValue: Number(item.value),
+        legendLabel: item.legendLabel,
+        legendValue: part.legendValue,
+        legendValueRoundingDigits: getRoundingDigits(item),
+        color: safeColors?.[itemIndex]?.[partIndex],
+        id: `${itemIndex}${partIndex}`,
+        partIndex,
+        partLabel: part.label,
+        partPercentage,
+        partValue,
+        partLegendValue: part.legendValue
+      };
+    });
+    if (partedSlices.length) {
+      balanceDataForTheGraph.push(...partedSlices);
     } else {
-      balanceDataForTheGraph.push(newMainItem);
+      balanceDataForTheGraph.push(mainSlice);
+    }
+    if (isFullscreenMode && partedSlices.length) {
+      balanceDataForTheLegend.push(...partedSlices);
+    } else {
+      balanceDataForTheLegend.push(mainSlice);
     }
   });
+  let legendColors;
+  if (isFullscreenMode) {
+    legendColors = balanceDataForTheLegend.map(item => item.color);
+  } else {
+    legendColors = legendBackgrounds || [];
+  }
   return {
     balanceDataForTheGraph,
-    balanceDataForTheLegend
+    balanceDataForTheLegend,
+    legendColors
   };
 };
 ;// ./src/components/Charts/SegmentedPieChart/SegmentedPieChart.tsx
@@ -11709,6 +11729,7 @@ function SegmentedPieChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 
+
 var SegmentedPieChart_ref =  true ? {
   name: "1h72o96",
   styles: "h6{font-weight:700;}"
@@ -11717,11 +11738,7 @@ var SegmentedPieChart_ref2 =  true ? {
   name: "fddz1h",
   styles: "width:10px;height:10px"
 } : 0;
-var SegmentedPieChart_ref3 =  true ? {
-  name: "14q9ynm",
-  styles: "width:400px;margin:40px 120px"
-} : 0;
-const SegmentedPieChart = ({
+const SegmentedPieChartComponent = ({
   data,
   pieChartProps,
   pieChartLegendProps,
@@ -11740,13 +11757,18 @@ const SegmentedPieChart = ({
   renderTitleTooltipContent
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    isFullscreenMode
+  } = useFullscreenMode();
   const {
     balanceDataForTheGraph,
-    balanceDataForTheLegend
+    balanceDataForTheLegend,
+    legendColors
   } = useData({
     data,
     legendValueRoundingDigits,
-    pieChartColors
+    pieChartColors,
+    legendBackgrounds
   });
   return (0,jsx_runtime_namespaceObject.jsx)(SegmentedPieChartProvider, {
     legendPercentageRoundingDigits: legendPercentageRoundingDigits,
@@ -11760,10 +11782,16 @@ const SegmentedPieChart = ({
     currency: currency,
     renderTitleTooltipContent: renderTitleTooltipContent,
     tooltipConfig: tooltipConfig,
-    children: (0,jsx_runtime_namespaceObject.jsx)(PieChart, {
+    children: (0,jsx_runtime_namespaceObject.jsx)(PieChartComponent, {
       data: balanceDataForTheGraph,
       animate: true,
-      css: SegmentedPieChart_ref3,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        ...(isFullscreenMode ? {
+          padding: '20px'
+        } : {
+          margin: '40px 120px'
+        })
+      },  true ? "" : 0,  true ? "" : 0),
       isInteractive: true,
       activeInnerRadiusOffset: 0,
       activeOuterRadiusOffset: 0,
@@ -11774,7 +11802,7 @@ const SegmentedPieChart = ({
       ...pieChartProps,
       children: (0,jsx_runtime_namespaceObject.jsx)(PieChartLegend, {
         data: balanceDataForTheLegend,
-        backgroundColors: legendBackgrounds,
+        backgroundColors: legendColors,
         renderValue: props => (0,jsx_runtime_namespaceObject.jsx)(LegendItem, {
           ...props,
           legendValueRoundingDigits: props.legendValueRoundingDigits
@@ -11787,6 +11815,7 @@ const SegmentedPieChart = ({
     })
   });
 };
+const SegmentedPieChart = WithFullscreenMode(SegmentedPieChartComponent);
 ;// ./src/components/Charts/SegmentedPieChart/index.ts
 
 ;// ./src/components/Charts/BarLineComplexChart/colorPalette.ts
@@ -12269,29 +12298,29 @@ const BarLineComplexChartView = ({
     debouncedFn();
   };
   const handleHover = () => {
-    /**
-     * Show tooltip on hover
-     * event: Readonly<Plotly.PlotHoverEvent>
-     * - event = {}
-     * - points:
-     * Array<{
-     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
-     *   curveNumber: number;
-     *   data: Plotly.Data;
-     *   fullData: Plotly.Data;
-     *   label: number;
-     *   pointIndex: number;
-     *   pointNumber: number;
-     *   value: number;
-     *   x: number;
-     *   y: number;
-     *   xaxis: string;
-     *   yaxis: string;
-     * }>
-     * - xaxes: Array<{}>
-     * - xvals: Array<number>
-     * - yaxes: Array<{}>
-     * - yvals: Array<number>
+    /**
+     * Show tooltip on hover
+     * event: Readonly<Plotly.PlotHoverEvent>
+     * - event = {}
+     * - points:
+     * Array<{
+     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
+     *   curveNumber: number;
+     *   data: Plotly.Data;
+     *   fullData: Plotly.Data;
+     *   label: number;
+     *   pointIndex: number;
+     *   pointNumber: number;
+     *   value: number;
+     *   x: number;
+     *   y: number;
+     *   xaxis: string;
+     *   yaxis: string;
+     * }>
+     * - xaxes: Array<{}>
+     * - xvals: Array<number>
+     * - yaxes: Array<{}>
+     * - yvals: Array<number>
      */
     setIsOpen(false);
   };
@@ -12359,18 +12388,18 @@ const BarLineComplexChartView = ({
         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
         },
-        titlefont: {
-          size: isFullscreenMode ? 24 : (0,utils_namespaceObject.propOr)(TITLE_FONT_SIZE.other, deviceType)(TITLE_FONT_SIZE),
-          weight: 700,
-          family: FONT_FAMILY,
-          ...titlefont
-        },
         barmode: 'group',
         autosize: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -13467,14 +13496,14 @@ var Typeahead_ref =  true ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : 0;
-/**
- * The structure of the component:
- * - TypeaheadTrigger
- * - TypeaheadOptions
- * - FormHelperText
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  **/
 const Typeahead = ({
   name = 'typeahead-search',