@ssa-ui-kit/core 2.19.0 → 2.19.2

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,3 +1,2 @@
 import { ColorPickerProps } from './types';
-import '@rc-component/color-picker/assets/index.css';
 export declare const ColorPicker: ({ color: providedColor, format: providedFormat, colorsPalette, ...rest }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -22,6 +22,20 @@ export type DatePickerProps = {
         mode: 'dateFrom' | 'dateTo';
         otherDate: Date | null;
     };
+    classNames?: {
+        header?: string;
+        trigger?: {
+            input?: string;
+            calendarIcon?: string;
+        };
+        monthsSwitch?: {
+            wrapper?: string;
+            previousMonth?: string;
+            nextMonth?: string;
+        };
+        calendar?: string;
+        label?: string;
+    };
     onChange?: (date?: Date) => void;
     onOpen?: () => void;
     onClose?: () => void;

package/dist/index.js

@@ -8175,12 +8175,13 @@ const AddNewAccountCard = ({
 
 ;// ./src/components/ButtonGroup/styles.ts
 
-const ButtonItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:center;min-width:40px;height:auto;padding:8px;text-align:center;letter-spacing:0em;border-radius:0;box-shadow:none;user-select:none;font-size:0.694rem;line-height:0.938rem;font-style:normal;font-weight:500;&:hover,&:focus,&:active{box-shadow:none;}&:first-of-type{border-radius:6px 0 0 6px;}&:last-child{border-radius:0 6px 6px 0;}&:not(:last-child){margin-right:1px;}&.active{background:", theme.colors.greyFocused, ";}&:disabled{background:", theme.colors.grey, ";color:", theme.colors.grey40, ";}", theme.mediaQueries.md, "{min-width:65px;padding:12px;font-size:13.3px;line-height:15px;}" + ( true ? "" : 0),  true ? "" : 0);
+const ButtonItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:center;min-width:40px;height:auto;padding:8px;text-align:center;letter-spacing:0em;border-radius:0;box-shadow:none;user-select:none;&:hover,&:focus,&:active{box-shadow:none;}&:first-of-type{border-radius:6px 0 0 6px;}&:last-child{border-radius:0 6px 6px 0;}&:not(:last-child){margin-right:1px;}&.active{background:", theme.colors.greyFocused, ";}&:disabled{background:", theme.colors.grey, ";p{color:", theme.colors.grey40, ";}}", theme.mediaQueries.md, "{min-width:65px;padding:12px;p{font-size:13.3px;line-height:15px;}}" + ( true ? "" : 0),  true ? "" : 0);
 ;// ./src/components/ButtonGroup/ButtonGroup.tsx
 
 
 
 
+
 const ButtonGroup = ({
   items,
   buttonStyles,
@@ -8208,7 +8209,10 @@ const ButtonGroup = ({
         onClick: handleClick(item),
         css: [ButtonItem, buttonStyles,  true ? "" : 0,  true ? "" : 0],
         className: isActive ? 'active' : '',
-        children: item.text
+        children: (0,jsx_runtime_namespaceObject.jsx)(Typography_Typography, {
+          variant: "body1",
+          children: item.text
+        })
       }, item.id);
     })
   });
@@ -12251,8 +12255,6 @@ const ColorPickerTrigger = () => {
     })
   });
 };
-;// external "@rc-component/color-picker/assets/index.css"
-const index_css_namespaceObject = require("@rc-component/color-picker/assets/index.css");
 ;// ./src/components/ColorPicker/ColorPicker.tsx
 function ColorPicker_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)."; }
 
@@ -12265,10 +12267,6 @@ function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 var ColorPicker_ref =  true ? {
-  name: "dl37cv",
-  styles: "gap:16px;padding:16px;border-radius:8px;box-shadow:0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)"
-} : 0;
-var ColorPicker_ref2 =  true ? {
   name: "xyzkeb",
   styles: "align-self:flex-start"
 } : 0;
@@ -12278,6 +12276,7 @@ const ColorPicker = ({
   colorsPalette = COLORS_PALETTE,
   ...rest
 }) => {
+  const theme = (0,react_namespaceObject.useTheme)();
   const tabsConfig = {
     colorPalette: {
       tabId: 'color-palette',
@@ -12306,10 +12305,17 @@ const ColorPicker = ({
         interactionsEnabled: 'click',
         placement: 'top-start',
         children: [(0,jsx_runtime_namespaceObject.jsx)(ColorPickerTrigger, {}), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-          css: ColorPicker_ref,
+          css: /*#__PURE__*/(0,react_namespaceObject.css)({
+            gap: 16,
+            padding: 16,
+            borderRadius: 8,
+            backgroundColor: theme.colors.white,
+            zIndex: 10,
+            boxShadow: '0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)'
+          },  true ? "" : 0,  true ? "" : 0),
           className: rest.classnames?.content,
           children: [(0,jsx_runtime_namespaceObject.jsxs)(TabBar_TabBar, {
-            css: ColorPicker_ref2,
+            css: ColorPicker_ref,
             children: [(0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
               ...tabsConfig.colorPalette
             }), (0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
@@ -13166,6 +13172,7 @@ const DatePickerMonthsSwitch = () => {
     calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
+    classNames,
     setCalendarViewDateTime,
     onMonthChange
   } = useDatePickerContext();
@@ -13196,6 +13203,7 @@ const DatePickerMonthsSwitch = () => {
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
     css: DatePickerMonthsSwitch_ref,
+    className: classNames?.monthsSwitch?.wrapper,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-left",
@@ -13203,6 +13211,7 @@ const DatePickerMonthsSwitch = () => {
         tooltip: "Previous month",
         color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
+      className: classNames?.monthsSwitch?.previousMonth,
       variant: 'tertiary',
       "aria-label": "Previous month",
       "data-testid": "previous-month",
@@ -13223,6 +13232,7 @@ const DatePickerMonthsSwitch = () => {
         tooltip: "Next month",
         color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
+      className: classNames?.monthsSwitch?.nextMonth,
       variant: 'tertiary',
       onClick: handleNextMonth,
       isDisabled: isMaxMonthReached,
@@ -13257,7 +13267,8 @@ const DatePickerHeader = () => {
   const {
     calendarType,
     setCalendarType,
-    calendarViewDateTime
+    calendarViewDateTime,
+    classNames
   } = useDatePickerContext();
   const handleCalendarTypeChange = () => {
     if (calendarType === 'days') {
@@ -13268,6 +13279,7 @@ const DatePickerHeader = () => {
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverHeading, {
     css: DatePickerHeader_ref,
+    className: classNames?.header,
     as: 'div',
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
@@ -13302,11 +13314,12 @@ const DatePickerCalendar = () => {
     years: YearsView
   };
   const {
-    calendarType
+    calendarType,
+    classNames
   } = useDatePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-    className: "popover",
+    className: ['popover', classNames?.calendar].filter(Boolean).join(' '),
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
       background: theme.colors.white,
       boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
@@ -13340,6 +13353,7 @@ const DatePickerTrigger = () => {
     format,
     name,
     label,
+    classNames,
     openCalendarMode,
     inputRef,
     inputProps,
@@ -13380,6 +13394,7 @@ const DatePickerTrigger = () => {
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [label && (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
       htmlFor: name,
+      className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
       asChild: true,
@@ -13388,6 +13403,7 @@ const DatePickerTrigger = () => {
         placeholder: format,
         ref: inputRef,
         disabled: disabled,
+        className: classNames?.trigger?.input,
         register: register,
         inputProps: {
           onBlur: handleBlur,
@@ -13415,6 +13431,7 @@ const DatePickerTrigger = () => {
           variant: "tertiary",
           "aria-label": "Calendar",
           isDisabled: disabled,
+          className: classNames?.trigger?.calendarIcon,
           css: /*#__PURE__*/(0,react_namespaceObject.css)({
             padding: 0,
             cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
@@ -18457,7 +18474,7 @@ const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e1vig1dw5"
-} : 0)("display:flex;align-items:center;padding:8px 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:12px;height:40px;background:", ({
+} : 0)("display:flex;align-items:center;padding:0 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:10px 12px;min-height:40px;line-height:20px;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;background:", ({
   isActive,
   theme
 }) => isActive ? theme.colors.blueRoyal12 : 'none', ";&:hover{background:rgba(72, 125, 225, 0.06);}" + ( true ? "" : 0));
@@ -18480,16 +18497,16 @@ const TypeaheadItem = /*#__PURE__*/base_default()("div",  true ? {
 }) => theme.colors.grey, ";color:", ({
   theme,
   isDisabled
-}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-weight:500;font-size:14px;height:32px;align-items:center;padding:6px;user-select:none;" + ( true ? "" : 0));
+}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-weight:500;font-size:14px;min-height:20px;align-items:center;padding:6px;user-select:none;overflow:hidden;" + ( true ? "" : 0));
 const TypeaheadItemLabel = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1vig1dw3"
 } : 0)("color:", ({
   theme,
   isDisabled
-}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center;cursor:default;" + ( true ? "" : 0));
+}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:block;gap:6px;align-items:center;cursor:default;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
 const TypeaheadItemCross = /*#__PURE__*/base_default()(Button_Button,  true ? {
   target: "e1vig1dw2"
-} : 0)("background:none;padding:0;padding-right:5;&:active,&:focus,&:hover{cursor:", ({
+} : 0)("background:none;padding:0;padding-right:5;height:auto;&:active,&:focus,&:hover{cursor:", ({
   isDisabled
 }) => isDisabled ? 'default' : 'pointer', ";background:none;box-shadow:none;}&:disabled{background:none;}" + ( true ? "" : 0));
 const TypeaheadInputsGroupWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
@@ -18865,19 +18882,35 @@ function TypeaheadOption_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 
 
+
 var TypeaheadOption_ref =  true ? {
-  name: "1o3nkn",
-  styles: "margin-left:auto"
+  name: "1gz2b5f",
+  styles: "overflow:hidden;text-overflow:ellipsis"
+} : 0;
+var TypeaheadOption_ref2 =  true ? {
+  name: "1kqn2f4",
+  styles: "height:auto;padding:0"
+} : 0;
+var TypeaheadOption_ref3 =  true ? {
+  name: "abxjv3",
+  styles: "margin-left:auto;min-width:10px"
 } : 0;
 const TypeaheadOption_TypeaheadOption = ({
   children,
   ...rest
 }) => (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadOption, {
   ...rest,
-  children: [children, ' ', rest.isActive && (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-    name: "check",
-    size: 10,
-    css: TypeaheadOption_ref
+  children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: TypeaheadOption_ref,
+    children: [children, ' ']
+  }), rest.isActive && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+    variant: "tertiary",
+    css: TypeaheadOption_ref2,
+    startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: "check",
+      size: 10,
+      css: TypeaheadOption_ref3
+    })
   })]
 });
 ;// ./src/components/Typeahead/components/TypeaheadItem.ts
@@ -18893,8 +18926,8 @@ const TypeaheadItemImage = /*#__PURE__*/base_default()("img",  true ? {
 const TypeaheadItemIcon = /*#__PURE__*/base_default()(Icon_Icon,  true ? {
   target: "e1rxxx7l0"
 } : 0)( true ? {
-  name: "1hziu2d",
-  styles: "width:18px;height:18px;border-radius:50%"
+  name: "ebppw3",
+  styles: "width:18px;height:18px;border-radius:50%;margin-right:6px;vertical-align:middle"
 } : 0);
 ;// ./src/components/Typeahead/utils.tsx