@ssa-ui-kit/core 2.17.2 → 2.18.1

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,6 +15,7 @@ export type DateRangePickerProps = {
     openCalendarMode?: 'icon' | 'input' | 'both';
     inputProps?: Partial<InputProps>;
     status?: FieldContextValue['status'];
+    showStatusArea?: boolean;
     dateMin?: string;
     dateMax?: string;
     disabled?: boolean;

package/dist/index.js

@@ -1309,7 +1309,7 @@ const Avatar = /*#__PURE__*/base_default()("div",  true ? {
   size
 }) => size, "px;background:", ({
   image
-}) => `url(${image})`, " center no-repeat;" + ( true ? "" : 0));
+}) => `url(${image})`, " center/contain no-repeat;" + ( true ? "" : 0));
 /* harmony default export */ const Avatar_Avatar = (Avatar);
 ;// external "react"
 const external_react_namespaceObject = require("react");
@@ -14165,57 +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",
-    "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/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)."; }
 
@@ -14314,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)."; }
@@ -14330,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,
@@ -14342,16 +14371,15 @@ const Trigger = () => {
     lastFocusedElement,
     disabled,
     status,
-    messages,
     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 {
@@ -14362,15 +14390,12 @@ 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,
     "data-testid": "daterangepicker",
     className: classNames?.trigger?.root,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+    children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
       htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
       className: classNames?.label,
       children: label
@@ -14424,16 +14449,7 @@ const Trigger = () => {
           },  true ? "" : 0,  true ? "" : 0)
         })]
       })
-    }), 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: Trigger_ref2,
-        children: error
-      }, `error-${index}`)) : messages?.error
-    }), messages?.success && (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
-      children: messages?.success
-    })]
+    }), showStatusArea && (0,jsx_runtime_namespaceObject.jsx)(TriggerStatusArea, {})]
   });
 };
 ;// ./src/components/DateRangePicker/components/Content.tsx
@@ -14895,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, {})
 });