@ssa-ui-kit/core 2.15.0 → 2.16.1

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

@@ -1,6 +1,7 @@
 import { MouseEventHandler } from 'react';
-export declare const TriggerInput: ({ datepickerType, withPopover, onClick, }: {
+export declare const TriggerInput: ({ datepickerType, withPopover, className, onClick, }: {
     datepickerType: "from" | "to";
     withPopover?: boolean;
+    className?: string;
     onClick: MouseEventHandler<HTMLInputElement>;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -20,8 +20,17 @@ export type DateRangePickerProps = {
     disabled?: boolean;
     helperText?: string;
     showCalendarIcon?: boolean;
-    triggerClassname?: string;
-    calendarClassname?: string;
+    classNames?: {
+        trigger?: {
+            root?: string;
+            controlsWrapper?: string;
+            inputFrom?: string;
+            inputTo?: string;
+            icon?: string;
+        };
+        calendar?: string;
+        label?: string;
+    };
     onChange?: (dates?: [Date | null, Date | null]) => void;
     onOpen?: () => void;
     onClose?: () => void;

package/dist/components/Field/FieldLabel.d.ts

@@ -1,5 +1,6 @@
 import { LabelProps } from '../Label/types';
 export interface FieldLabelProps extends LabelProps {
     children: React.ReactNode;
+    className?: string;
 }
 export declare const FieldLabel: ({ children, ...props }: FieldLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -11307,11 +11307,11 @@ const Calendar_DatePickerCalendar = () => {
   };
   const {
     calendarType,
-    calendarClassname
+    classNames
   } = useDateRangePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-    className: ['popover', calendarClassname].filter(Boolean).join(' '),
+    className: ['popover', classNames?.calendar].filter(Boolean).join(' '),
     "data-testid": "daterangepicker-calendar",
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
       background: theme.colors.white,
@@ -11529,6 +11529,7 @@ const WithTriggerPopover = ({
 const TriggerInput = ({
   datepickerType,
   withPopover = false,
+  className,
   onClick
 }) => {
   const {
@@ -11541,6 +11542,7 @@ const TriggerInput = ({
     disabled,
     helperText,
     setLastFocusedElement,
+    classNames,
     onBlur: handleBlur
   } = useDateRangePickerContext();
   const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
@@ -11574,6 +11576,7 @@ const TriggerInput = ({
       ref: datepickerType === 'from' ? inputFromRef : inputToRef,
       disabled: disabled,
       register: register,
+      className: className,
       inputProps: {
         onBlur: handleBlur,
         onClick: handleOpen,
@@ -11581,10 +11584,10 @@ const TriggerInput = ({
         id: inputProps?.inputProps?.id || currentName,
         'data-testid': `daterangepicker-input-${datepickerType}`,
         autoComplete: 'off',
-        className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+        className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
           name: "150iz59",
           styles: "border:none!important"
-        } : 0),
+        } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
         ...inputElementProps
       },
       showStatusIcon: false,
@@ -11630,7 +11633,7 @@ const Trigger = () => {
     openCalendarMode,
     isOpen,
     showCalendarIcon,
-    triggerClassname,
+    classNames,
     setIsOpen,
     handleToggleOpen
   } = useDateRangePickerContext();
@@ -11653,16 +11656,19 @@ const Trigger = () => {
     status: status,
     disabled: disabled,
     "data-testid": "daterangepicker",
-    className: triggerClassname,
+    className: classNames?.trigger?.root,
     children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
       htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
+      className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
       children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
         ref: wrapperRef,
+        className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           withPopover: true,
           datepickerType: "from",
+          className: classNames?.trigger?.inputFrom,
           onClick: () => {
             if (!isOpen) {
               setIsOpen(true);
@@ -11672,9 +11678,11 @@ const Trigger = () => {
           name: "carrot-right",
           size: 18,
           color: theme.colors.greyDarker80,
+          className: classNames?.trigger?.icon,
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
+          className: classNames?.trigger?.inputTo,
           onClick: () => {
             if (!isOpen) {
               setIsOpen(true);