@ssa-ui-kit/core 2.19.1 → 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

@@ -12255,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)."; }
 
@@ -12269,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;
@@ -12282,6 +12276,7 @@ const ColorPicker = ({
   colorsPalette = COLORS_PALETTE,
   ...rest
 }) => {
+  const theme = (0,react_namespaceObject.useTheme)();
   const tabsConfig = {
     colorPalette: {
       tabId: 'color-palette',
@@ -12310,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, {
@@ -13170,6 +13172,7 @@ const DatePickerMonthsSwitch = () => {
     calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
+    classNames,
     setCalendarViewDateTime,
     onMonthChange
   } = useDatePickerContext();
@@ -13200,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",
@@ -13207,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",
@@ -13227,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,
@@ -13261,7 +13267,8 @@ const DatePickerHeader = () => {
   const {
     calendarType,
     setCalendarType,
-    calendarViewDateTime
+    calendarViewDateTime,
+    classNames
   } = useDatePickerContext();
   const handleCalendarTypeChange = () => {
     if (calendarType === 'days') {
@@ -13272,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, {
@@ -13306,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}`,
@@ -13344,6 +13353,7 @@ const DatePickerTrigger = () => {
     format,
     name,
     label,
+    classNames,
     openCalendarMode,
     inputRef,
     inputProps,
@@ -13384,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,
@@ -13392,6 +13403,7 @@ const DatePickerTrigger = () => {
         placeholder: format,
         ref: inputRef,
         disabled: disabled,
+        className: classNames?.trigger?.input,
         register: register,
         inputProps: {
           onBlur: handleBlur,
@@ -13419,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',
@@ -18461,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));
@@ -18484,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 ? {
@@ -18869,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
@@ -18897,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