@ssa-ui-kit/core 2.17.1 → 2.18.0

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

@@ -1,2 +1,2 @@
 import { DateRangePickerProps } from './types';
-export declare const DateRangePicker: ({ format, openCalendarMode, showCalendarIcon, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ format, openCalendarMode, showCalendarIcon, showStatusArea, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const TriggerStatusArea: () => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -15,11 +15,16 @@ export type DateRangePickerProps = {
     openCalendarMode?: 'icon' | 'input' | 'both';
     inputProps?: Partial<InputProps>;
     status?: FieldContextValue['status'];
+    showStatusArea?: boolean;
     dateMin?: string;
     dateMax?: string;
     disabled?: boolean;
-    helperText?: string;
     showCalendarIcon?: boolean;
+    messages?: {
+        description?: string;
+        success?: string;
+        error?: string;
+    };
     classNames?: {
         trigger?: {
             root?: string;

package/dist/index.js

@@ -13071,7 +13071,8 @@ const DatePickerCalendar = () => {
       paddingTop: 16,
       width: 346,
       height: 370,
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
+      zIndex: 100
     },  true ? "" : 0,  true ? "" : 0),
     children: [(0,jsx_runtime_namespaceObject.jsx)(DatePickerHeader, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
       as: "div",
@@ -14028,7 +14029,8 @@ const Calendar_DatePickerCalendar = () => {
       width: 346,
       height: 370,
       alignItems: 'flex-start',
-      margin: '14px 0 0 -14px'
+      margin: '14px 0 0 -14px',
+      zIndex: 100
     },  true ? "" : 0,  true ? "" : 0),
     children: [(0,jsx_runtime_namespaceObject.jsx)(Header_Header, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
       as: "div",
@@ -14163,55 +14165,6 @@ const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function F
     children: _children
   });
 });
-;// ./src/components/Field/FieldDescription.tsx
-
-
-
-const FieldDescription = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'basic') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "basic",
-    children: children
-  });
-};
-;// ./src/components/Field/FieldError.tsx
-
-
-
-const FieldError = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'error') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "error",
-    "data-testid": "field-error",
-    children: children
-  });
-};
-;// ./src/components/Field/FieldSuccess.tsx
-
-
-
-const FieldSuccess = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'success') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "success",
-    children: children
-  });
-};
 ;// ./src/components/DateRangePicker/components/TriggerInput.tsx
 function TriggerInput_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)."; }
 
@@ -14247,7 +14200,7 @@ const TriggerInput = ({
     inputToRef,
     inputProps,
     disabled,
-    helperText,
+    messages,
     setLastFocusedElement,
     classNames,
     onBlur: handleBlur
@@ -14301,7 +14254,7 @@ const TriggerInput = ({
       showStatusIcon: false,
       errors: fieldError,
       status: fieldStatus,
-      helperText: helperText,
+      helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
       helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
         name: "lhoo11",
         styles: "&>span::first-letter{text-transform:uppercase;}"
@@ -14310,6 +14263,90 @@ const TriggerInput = ({
     })
   });
 };
+;// ./src/components/Field/FieldDescription.tsx
+
+
+
+const FieldDescription = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'basic') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "basic",
+    "data-testid": "field-description",
+    children: children
+  });
+};
+;// ./src/components/Field/FieldError.tsx
+
+
+
+const FieldError = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'error') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "error",
+    "data-testid": "field-error",
+    children: children
+  });
+};
+;// ./src/components/Field/FieldSuccess.tsx
+
+
+
+const FieldSuccess = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'success') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "success",
+    "data-testid": "field-success",
+    children: children
+  });
+};
+;// ./src/components/DateRangePicker/components/TriggerStatusArea.tsx
+function TriggerStatusArea_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 TriggerStatusArea_ref =  true ? {
+  name: "ud49p1",
+  styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
+} : 0;
+const TriggerStatusArea = () => {
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  const {
+    messages,
+    nameFrom,
+    nameTo
+  } = useDateRangePickerContext();
+  const errorsFrom = formContext.formState.errors[nameFrom]?.message;
+  const errorsTo = formContext.formState.errors[nameTo]?.message;
+  const errorMessage = [errorsFrom, errorsTo].filter(Boolean);
+  return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+    children: [messages?.description && (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
+      children: messages?.description
+    }), (errorMessage.length || messages?.error) && (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+      children: errorMessage.length ? errorMessage.map((error, index) => (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: TriggerStatusArea_ref,
+        children: error
+      }, `error-${index}`)) : messages?.error
+    }), messages?.success && (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+      children: messages?.success
+    })]
+  });
+};
 ;// ./src/components/DateRangePicker/components/Trigger.tsx
 
 function Trigger_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)."; }
@@ -14326,10 +14363,6 @@ var Trigger_ref =  true ? {
   name: "1ldd2k6",
   styles: "margin:0 3px"
 } : 0;
-var Trigger_ref2 =  true ? {
-  name: "ud49p1",
-  styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
-} : 0;
 const Trigger = () => {
   const {
     nameFrom,
@@ -14338,16 +14371,15 @@ const Trigger = () => {
     lastFocusedElement,
     disabled,
     status,
-    helperText,
     openCalendarMode,
     isOpen,
     showCalendarIcon,
+    showStatusArea,
     classNames,
     setIsOpen,
     handleToggleOpen
   } = useDateRangePickerContext();
   const theme = (0,react_namespaceObject.useTheme)();
-  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const wrapperRef = (0,external_react_namespaceObject.useRef)(null);
   (0,hooks_namespaceObject.useClickOutside)(wrapperRef, event => {
     const {
@@ -14358,9 +14390,6 @@ const Trigger = () => {
       setIsOpen(false);
     }
   });
-  const errorsFrom = formContext.formState.errors[nameFrom]?.message;
-  const errorsTo = formContext.formState.errors[nameTo]?.message;
-  const errorMessage = [errorsFrom, errorsTo].filter(Boolean);
   return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
     status: status,
     disabled: disabled,
@@ -14420,16 +14449,7 @@ const Trigger = () => {
           },  true ? "" : 0,  true ? "" : 0)
         })]
       })
-    }), (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
-      children: helperText
-    }), (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
-      children: errorMessage ? errorMessage.map((error, index) => (0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: Trigger_ref2,
-        children: error
-      }, `error-${index}`)) : helperText
-    }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
-      children: helperText
-    })]
+    }), showStatusArea && (0,jsx_runtime_namespaceObject.jsx)(TriggerStatusArea, {})]
   });
 };
 ;// ./src/components/DateRangePicker/components/Content.tsx
@@ -14891,11 +14911,13 @@ const DateRangePicker = ({
   format = constants_DEFAULT_MASK_FORMAT,
   openCalendarMode = 'icon',
   showCalendarIcon = true,
+  showStatusArea = true,
   ...rest
 }) => (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
   format: format,
   openCalendarMode: openCalendarMode,
   showCalendarIcon: showCalendarIcon,
+  showStatusArea: showStatusArea,
   ...rest,
   children: (0,jsx_runtime_namespaceObject.jsx)(Content_DatePickerContent, {})
 });