@ssa-ui-kit/core 2.16.2-canary-1c17e94-20250507 → 2.16.3-canary-be61b75-20250507

package/dist/components/DateRangePicker/styles.d.ts

@@ -32,3 +32,13 @@ export declare const MonthsViewCell: import("@emotion/styled").StyledComponent<{
     isCalendarSecondDateSelected?: boolean;
     isHighlighted: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+} & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/index.js

@@ -10551,9 +10551,10 @@ const DatesListWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
 }) => theme.colors.greyLighter, ";}" + ( true ? "" : 0));
 ;// ./src/components/DateRangePicker/styles.ts
 
+function DateRangePicker_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)."; }
 
 const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
-  target: "e19l41fq2"
+  target: "e19l41fq3"
 } : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:", ({
   isHighlighted
 }) => isHighlighted ? 0 : '6px', ";border:", ({
@@ -10589,7 +10590,7 @@ const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ?
   isCalendarDateNow
 }) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
 const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq1"
+  target: "e19l41fq2"
 } : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:70px;height:40px;border-radius:", ({
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
@@ -10622,7 +10623,7 @@ const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   theme
 }) => theme.colors.blueRoyal16, ";}" + ( true ? "" : 0));
 const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq0"
+  target: "e19l41fq1"
 } : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:99px;height:40px;border-radius:", ({
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
@@ -10659,6 +10660,12 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 }) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
   theme
 }) => theme.colors.blueRoyal16, ";}}" + ( true ? "" : 0));
+const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e19l41fq0"
+} : 0)( true ? {
+  name: "1utaypi",
+  styles: "padding:14px"
+} : 0);
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
 const dates_getDaysForCalendarMonth = date => {
@@ -11384,7 +11391,7 @@ const FieldLabel = ({
 
 const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1lr2tz0"
-} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
+} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:16px;overflow:hidden;border:1px solid ", ({
   status,
   theme
 }) => {
@@ -11577,6 +11584,7 @@ const TriggerInput = ({
       disabled: disabled,
       register: register,
       className: className,
+      wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
       inputProps: {
         onBlur: handleBlur,
         onClick: handleOpen,
@@ -11585,8 +11593,8 @@ const TriggerInput = ({
         'data-testid': `daterangepicker-input-${datepickerType}`,
         autoComplete: 'off',
         className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "150iz59",
-          styles: "border:none!important"
+          name: "15obm9d",
+          styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
         } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
         ...inputElementProps
       },
@@ -11613,9 +11621,10 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 
+
 var Trigger_ref =  true ? {
-  name: "jpxugn",
-  styles: "margin:0 14px"
+  name: "1ldd2k6",
+  styles: "margin:0 3px"
 } : 0;
 var Trigger_ref2 =  true ? {
   name: "ud49p1",
@@ -11662,7 +11671,7 @@ const Trigger = () => {
       className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
-      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      children: (0,jsx_runtime_namespaceObject.jsxs)(TriggerWrapper, {
         ref: wrapperRef,
         className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
@@ -11676,8 +11685,8 @@ const Trigger = () => {
           }
         }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
           name: "carrot-right",
-          size: 18,
-          color: theme.colors.greyDarker80,
+          size: 16,
+          color: disabled ? theme.colors.grey : theme.colors.greyDarker,
           className: classNames?.trigger?.arrowIcon,
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
@@ -11702,7 +11711,8 @@ const Trigger = () => {
           className: classNames?.trigger?.calendarIcon,
           css: /*#__PURE__*/(0,react_namespaceObject.css)({
             padding: 0,
-            margin: '0 8px 0 14px',
+            margin: '0 0 0 10px',
+            height: 'auto',
             cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
             '&:focus::before': {
               display: 'none'
@@ -17209,7 +17219,7 @@ const SearchBoxWrapper = /*#__PURE__*/base_default()("div",  true ? {
 
 const SearchBoxInput = /*#__PURE__*/base_default()(Input_Input,  true ? {
   target: "e1kaxfzq0"
-} : 0)("height:30px;font-size:12px;border-radius:5px;background-color:", ({
+} : 0)("height:30px;font-size:12px;border-radius:12px;background-color:", ({
   theme
 }) => theme.colors.greyLighter, ";border:1px solid #dee0e8;color:", ({
   theme
@@ -17627,6 +17637,7 @@ const useTypeahead = ({
   } = (0,hooks_namespaceObject.useElementSize)();
   const triggerRef = (0,external_react_namespaceObject.useRef)(null);
   (0,external_react_hook_form_namespaceObject.useController)({
+    control: form.control,
     name,
     rules: validationSchema,
     defaultValue: isMultiple ? selectedItems : selectedItems[0]
@@ -17641,6 +17652,18 @@ const useTypeahead = ({
     });
     return opts;
   }, [children]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const validSelected = selectedItems.filter(item => optionsWithKey[item]);
+    if (validSelected.length !== selectedItems.length) {
+      setSelected(validSelected);
+      const fieldValue = isMultiple ? validSelected : undefined;
+      setValue?.(name, fieldValue);
+      setRawInput(null);
+      form.clearErrors(name);
+      form.trigger(name);
+      onEmptyChange?.(validSelected.length === 0);
+    }
+  }, [optionsWithKey, selectedItems]);
   const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
     if (isMultiple) return rawInput ?? '';
     if (rawInput != null) return rawInput;
@@ -17925,7 +17948,7 @@ const TypeaheadInputsGroupWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,
 }) => isOpen ? '50px' : 'auto', ";flex-direction:column!important;" + ( true ? "" : 0));
 const TypeaheadTrigger = /*#__PURE__*/base_default()(PopoverTrigger,  true ? {
   target: "e1vig1dw0"
-} : 0)("position:relative;border-radius:8px;border:1px solid ", ({
+} : 0)("position:relative;border-radius:12px;border:1px solid ", ({
   status,
   theme
 }) => status === 'basic' ? theme.colors.grey : status === 'error' ? theme.colors.red : theme.colors.greenLighter, ";min-height:44px;height:auto;background:#fff;gap:8px;padding:5px 28px 5px 8px;width:100%;flex-wrap:wrap;border-color:", ({