@ssa-ui-kit/core 2.9.0-canary-4b2c248-20250414 → 2.9.1

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

@@ -0,0 +1,6 @@
+import { BarGaugeChartProps } from './types';
+export declare const BarGaugeChartComponent: ({ title, widgetCardProps, bars, features, }: BarGaugeChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarGaugeChart: {
+    (props: BarGaugeChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,5 @@
+import { BarGaugeChartHeaderProps } from '../types';
+export declare const FullScreenButton: import("@emotion/styled").StyledComponent<import("../../../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const BarGaugeChartHeader: <F extends string[]>({ features, }: BarGaugeChartHeaderProps<F>) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const Brick: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $width: number;
+    $color: string;
+    $inactive: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,2 @@
+import { GaugeBarProps } from '../types';
+export declare const GaugeBar: ({ title, value, min, max, gap, brickWidth, thresholds, valueFormatter, }: GaugeBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './BarGaugeChartHeader';
+export * from './GaugeBar';
+export * from './Brick';

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

@@ -0,0 +1,2 @@
+export * from './BarGaugeChart';
+export * from './types';

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

@@ -0,0 +1,27 @@
+import { MustInclude } from '@ssa-ui-kit/utils';
+import { WidgetCardProps } from '../../WidgetCard';
+export type BarGaugeChartFeature = 'header' | 'fullscreenMode';
+export type GaugeBarThreshold = {
+    value: number;
+    color: string;
+};
+export type GaugeBarValueFormatter = (value: number, color: string) => React.ReactNode;
+export interface BarGaugeChartHeaderProps<T extends string[]> {
+    features: MustInclude<T, 'fullscreenMode'>;
+}
+export interface GaugeBarProps {
+    value: number;
+    valueFormatter?: GaugeBarValueFormatter;
+    title?: React.ReactNode;
+    thresholds?: GaugeBarThreshold[];
+    gap?: number;
+    brickWidth?: number;
+    min?: number;
+    max?: number;
+}
+export interface BarGaugeChartProps {
+    title?: string;
+    widgetCardProps?: WidgetCardProps;
+    bars?: GaugeBarProps[];
+    features?: BarGaugeChartFeature[];
+}

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

@@ -5,3 +5,4 @@ export * from './TreeMapChart';
 export * from './common';
 export * from './hooks';
 export * from './GaugeChart';
+export * from './BarGaugeChart';

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,18 @@
+import { NumberFormatOptions } from '@react-input/number-format';
+import { InputProps } from '../Input/types';
+import { FieldRootProps } from '../Field/FieldRoot';
+export interface NumberFieldProps extends InputProps {
+    id?: string;
+    value?: number;
+    defaultValue?: number;
+    description?: React.ReactNode;
+    label?: React.ReactNode;
+    success?: React.ReactNode;
+    error?: React.ReactNode;
+    status?: FieldRootProps['status'];
+    numberFormat?: NumberFormatOptions & {
+        locales?: Intl.LocalesArgument;
+    };
+    onChange?: (value: number) => void;
+}
+export declare const NumberField: ({ id, value, defaultValue, description, label, success, error, status, numberFormat, onChange, ...inputProps }: NumberFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberField';

package/dist/components/Typeahead/index.d.ts

@@ -1,4 +1,6 @@
 export * from './Typeahead';
+export * from './types';
+export { useTypeaheadContext } from './Typeahead.context';
 export * from './components/TypeaheadOptions';
 export * from './components/TypeaheadOption';
 export * from './components/TypeaheadItem';

package/dist/components/index.d.ts

@@ -99,6 +99,7 @@ export * from './TableFilters';
 export * from './Tag';
 export * from './Textarea';
 export * from './TextField';
+export * from './NumberField';
 export * from './Tooltip';
 export * from './Typeahead';
 export * from './Typography';

package/dist/index.js

@@ -70,6 +70,8 @@ __webpack_require__.d(__webpack_exports__, {
   AddNewAccountCard: () => (/* reexport */ AddNewAccountCard),
   Avatar: () => (/* reexport */ Avatar_Avatar),
   Badge: () => (/* reexport */ Badge_Badge),
+  BarGaugeChart: () => (/* reexport */ BarGaugeChart),
+  BarGaugeChartComponent: () => (/* reexport */ BarGaugeChartComponent),
   BarLineComplexChart: () => (/* reexport */ BarLineComplexChart),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
@@ -137,6 +139,7 @@ __webpack_require__.d(__webpack_exports__, {
   NestedTableRowProvider: () => (/* reexport */ NestedTableRowProvider),
   NotificationCard: () => (/* reexport */ NotificationCard),
   NotificationMenu: () => (/* reexport */ NotificationMenu),
+  NumberField: () => (/* reexport */ NumberField),
   Pagination: () => (/* reexport */ Pagination_Pagination),
   PaginationContext: () => (/* reexport */ PaginationContext),
   PaginationContextProvider: () => (/* reexport */ PaginationContextProvider),
@@ -254,7 +257,8 @@ __webpack_require__.d(__webpack_exports__, {
   useTabBarContext: () => (/* reexport */ useTabBarContext),
   useTooltip: () => (/* reexport */ useTooltip),
   useTooltipContext: () => (/* reexport */ useTooltipContext),
-  useTranslation: () => (/* reexport */ useTranslation)
+  useTranslation: () => (/* reexport */ useTranslation),
+  useTypeaheadContext: () => (/* reexport */ useTypeaheadContext)
 });
 
 // NAMESPACE OBJECT: ./src/styles/global.ts
@@ -16204,6 +16208,188 @@ const GaugeChartComponent = ({
 const GaugeChart = WithFullscreenMode(GaugeChartComponent);
 ;// ./src/components/Charts/GaugeChart/index.ts
 
+;// ./src/components/Charts/BarGaugeChart/components/BarGaugeChartHeader.tsx
+
+function BarGaugeChartHeader_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)."; }
+
+
+
+
+const BarGaugeChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1kdngqn0"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var BarGaugeChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var BarGaugeChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const BarGaugeChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: BarGaugeChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(BarGaugeChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: BarGaugeChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/BarGaugeChart/components/Brick.tsx
+
+const Brick = /*#__PURE__*/base_default()('div',  true ? {
+  shouldForwardProp: propName => !propName.startsWith('$'),
+  target: "e1v2was00"
+} : 0)("position:relative;height:100%;width:", ({
+  $width
+}) => `${$width}px`, ";background:", ({
+  $color
+}) => $color, ";border-radius:12px;overflow:hidden;opacity:", ({
+  $inactive
+}) => $inactive ? 0.4 : 1, ";&::after{content:'';position:absolute;inset:0;background:rgba(85, 87, 90, 0.1);opacity:", ({
+  $inactive
+}) => $inactive ? 1 : 0, ";transition:opacity 0.2s;}" + ( true ? "" : 0));
+;// ./src/components/Charts/BarGaugeChart/components/GaugeBar.tsx
+function GaugeBar_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)."; }
+
+
+
+
+
+var GaugeBar_ref =  true ? {
+  name: "11upmbz",
+  styles: "flex:1;width:100%;display:flex;flex-direction:column"
+} : 0;
+var GaugeBar_ref2 =  true ? {
+  name: "1iczwj8",
+  styles: "font-weight:500;font-size:12px"
+} : 0;
+var GaugeBar_ref3 =  true ? {
+  name: "1r965ij",
+  styles: "flex:1;gap:10px"
+} : 0;
+var GaugeBar_ref4 =  true ? {
+  name: "xvarew",
+  styles: "font-weight:700;font-size:18px"
+} : 0;
+const GaugeBar = ({
+  title,
+  value,
+  min = 0,
+  max = 100,
+  gap = 2,
+  brickWidth = 6,
+  thresholds = [],
+  valueFormatter
+}) => {
+  const {
+    ref,
+    width
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const {
+    ref: valueRef,
+    width: valueWidth
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const baseThreshold = {
+    value: 0,
+    color: theme.colors.green
+  };
+  const _thresholds = thresholds.slice().sort((a, b) => b.value - a.value);
+  const activeThreshold = _thresholds.find(threshold => value >= threshold.value) || baseThreshold;
+  const totalBricks = Math.max(0, Math.floor((width - valueWidth) / (brickWidth + gap)) - 1);
+  const percentagePerBrick = (max - min) / totalBricks;
+  const bricks = new Array(totalBricks).fill(0).map((_, index) => {
+    const brickValue = min + index * percentagePerBrick;
+    const threshold = _thresholds.find(threshold => brickValue >= threshold.value) || baseThreshold;
+    const inactive = value < brickValue;
+    return (0,jsx_runtime_namespaceObject.jsx)(Brick, {
+      $width: brickWidth,
+      $color: threshold.color,
+      $inactive: inactive
+    }, index);
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: GaugeBar_ref,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: GaugeBar_ref2,
+      children: title
+    }), (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      ref: ref,
+      css: GaugeBar_ref3,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          flex: 1,
+          height: '100%',
+          padding: '10px 0',
+          display: 'flex',
+          gap: `${gap}px`
+        },  true ? "" : 0,  true ? "" : 0),
+        children: bricks
+      }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+        ref: valueRef,
+        style: {
+          color: activeThreshold.color
+        },
+        css: GaugeBar_ref4,
+        children: valueFormatter?.(value, activeThreshold.color) || value
+      })]
+    })]
+  });
+};
+;// ./src/components/Charts/BarGaugeChart/BarGaugeChart.tsx
+function BarGaugeChart_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)."; }
+
+
+
+
+var BarGaugeChart_ref =  true ? {
+  name: "s3tb3c",
+  styles: "height:100%;gap:12px"
+} : 0;
+const BarGaugeChartComponent = ({
+  title,
+  widgetCardProps,
+  bars = [],
+  features = []
+}) => (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+  features: features,
+  cardProps: {
+    title,
+    headerContent: (0,jsx_runtime_namespaceObject.jsx)(BarGaugeChartHeader, {
+      features: features
+    }),
+    ...widgetCardProps
+  },
+  children: (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    direction: "column",
+    alignItems: "start",
+    css: BarGaugeChart_ref,
+    children: bars.map((barProps, index) => (0,jsx_runtime_namespaceObject.jsx)(GaugeBar, {
+      ...barProps
+    }, index))
+  })
+});
+const BarGaugeChart = WithFullscreenMode(BarGaugeChartComponent);
+;// ./src/components/Charts/BarGaugeChart/index.ts
+
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -16212,6 +16398,7 @@ const GaugeChart = WithFullscreenMode(GaugeChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -16366,6 +16553,83 @@ const SearchBox = ({
 
 
 
+;// external "@react-input/number-format"
+const number_format_namespaceObject = require("@react-input/number-format");
+;// ./src/components/NumberField/NumberField.tsx
+function NumberField_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)."; }
+
+
+
+
+var NumberField_ref =  true ? {
+  name: "t1bvca",
+  styles: "padding:0 14px"
+} : 0;
+var NumberField_ref2 =  true ? {
+  name: "chpy5q",
+  styles: "with:auto;border:0 !important;padding:2px 0;height:32px;border-radius:0"
+} : 0;
+const NumberField = ({
+  id,
+  value,
+  defaultValue,
+  description,
+  label,
+  success,
+  error,
+  status,
+  numberFormat,
+  onChange,
+  ...inputProps
+}) => {
+  const {
+    disabled
+  } = inputProps;
+  const formattedValue = value == null ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
+  const formattedDefaultValue = defaultValue == null ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
+  const [_value, setValue] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: formattedValue,
+    defaultValue: formattedDefaultValue,
+    finalValue: undefined,
+    onChange: value => {
+      const number = Number((0,number_format_namespaceObject.unformat)(value, numberFormat?.locales));
+      onChange?.(number);
+    }
+  });
+  const inputRef = (0,number_format_namespaceObject.useNumberFormat)(numberFormat);
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+  return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
+    disabled: disabled,
+    status: status,
+    children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+      htmlFor: id,
+      children: label
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
+      css: NumberField_ref,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+        ref: inputRef,
+        css: NumberField_ref2,
+        inputProps: {
+          autoComplete: 'off',
+          value: _value,
+          onChange: handleChange
+        },
+        status: "custom",
+        ...inputProps
+      })
+    }), description && (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
+      children: description
+    }), success && (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+      children: success
+    }), error && (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+      children: error
+    })]
+  });
+};
+;// ./src/components/NumberField/index.ts
+
 ;// ./src/components/Tooltip/SimpleChartTooltip.tsx
 
 
@@ -16564,7 +16828,7 @@ const useTypeahead = ({
       setInputValue('');
       setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : undefined, {
+      setValue?.(name, selected.length ? selected[0] : [], {
         shouldDirty: !isFirstRender
       });
     }
@@ -16588,26 +16852,25 @@ const useTypeahead = ({
     }
   }, [error]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    const keyedOptions = {};
-    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
-      keyedOptions[child.props.value] = {
-        ...child.props
-      };
-      return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
-        ...child.props
-      });
+    processChildren({
+      selectedLocal: selected
     });
-    setOptionsWithKey(keyedOptions);
-    setItems(childItems);
-    setFirstRender(false);
-  }, [selectedItems, children]);
+  }, [children]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setSelected(selectedItems || []);
-    if (!selectedItems?.length) {
+    if (selectedItems?.length) {
+      if (!isMultiple) {
+        const currentOption = optionsWithKey[selectedItems[0]];
+        const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+        setInputValue(`${optionText}`);
+      }
+    } else {
       setInputValue('');
       setFirstSuggestion('');
     }
+    processChildren({
+      selectedLocal: selectedItems || []
+    });
   }, [selectedItems]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
@@ -16651,17 +16914,16 @@ const useTypeahead = ({
         setSelected([]);
       }
       if (foundItem && !selected.includes(foundItem?.value)) {
-        setSelected([foundItem?.value]);
+        setSelected([foundItem.value]);
       }
     }
   }, [optionsWithKey, inputValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (!isMultiple && selected.length && Object.keys(optionsWithKey).length) {
-      const currentOption = optionsWithKey[selected[0]];
-      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
-      setInputValue(`${optionText}`);
-    }
-  }, [selected, optionsWithKey]);
+    processSingleSelected({
+      optionsWithKeyLocal: optionsWithKey,
+      selectedLocal: selected
+    });
+  }, [selected]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (inputValue) {
       const newFirstSuggestion = Object.values(optionsWithKey)?.find(item => {
@@ -16678,12 +16940,41 @@ const useTypeahead = ({
       }
     }
   }, [inputValue, items, selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    onEmptyChange?.(isEmpty);
-  }, [isEmpty]);
+  const processSingleSelected = ({
+    optionsWithKeyLocal = {},
+    selectedLocal = []
+  }) => {
+    if (!isMultiple && selectedLocal.length && Object.keys(optionsWithKeyLocal).length) {
+      const currentOption = optionsWithKeyLocal[selectedLocal[0]];
+      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+      setInputValue(`${optionText}`);
+    }
+  };
+  const processChildren = ({
+    selectedLocal
+  }) => {
+    const keyedOptions = {};
+    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
+      keyedOptions[child.props.value] = {
+        ...child.props
+      };
+      return /*#__PURE__*/external_react_default().cloneElement(child, {
+        index,
+        ...child.props
+      });
+    });
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+    processSingleSelected({
+      optionsWithKeyLocal: keyedOptions,
+      selectedLocal
+    });
+    setFirstRender(false);
+  };
   const handleOnEmptyChange = newIsEmptyValue => {
     if (newIsEmptyValue !== isEmpty) {
       setIsEmpty(newIsEmptyValue);
+      onEmptyChange?.(newIsEmptyValue);
     }
   };
   const handleOpenChange = open => {
@@ -16947,6 +17238,7 @@ const MultipleTrigger = () => {
         name: context.inputName,
         status: 'custom',
         disabled: context.isDisabled,
+        validationSchema: context.validationSchema,
         inputProps: {
           onClick: context.handleInputClick,
           onKeyDown: context.handleInputKeyDown,
@@ -17007,6 +17299,7 @@ const SingleTrigger = () => {
       name: context.inputName,
       status: 'custom',
       disabled: context.isDisabled,
+      validationSchema: context.validationSchema,
       inputProps: {
         onClick: context.handleInputClick,
         onKeyDown: context.handleInputKeyDown,
@@ -17291,6 +17584,8 @@ const highlightInputMatch = (item, keyword) => {
 
 
 
+
+
 ;// ./src/components/UserProfile/styles.ts
 function UserProfile_styles_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)."; }
 
@@ -18604,6 +18899,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts