sag_components 2.0.0-beta352 → 2.0.0-beta353

package/dist/index.esm.js

@@ -24884,12 +24884,23 @@ const SelectedOptionItem = styled.div`
   height: 20px;
   white-space: nowrap;
   flex-shrink: 0;
-  width: 88px;
-  max-width: 88px;
-  min-width: 88px;
+  width: 65px;
+  max-width: 65px;
+  min-width: 65px;
   overflow: hidden;
   text-overflow: ellipsis;
   box-sizing: border-box;
+
+  /* The label shrinks with ellipsis so the X never gets clipped. */
+  & > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  & > svg {
+    flex-shrink: 0;
+  }
 `;
 const SelectedOptionCount = styled.div`
   display: flex;
@@ -25066,7 +25077,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
               inputRef?.current?.focus();
             }
           }
-        }, option.label && option.label?.length > 8 ? `${option.label?.substring(0, 8)}...` : option.label, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+        }, /*#__PURE__*/React$1.createElement("span", null, option.label && option.label?.length > 8 ? `${option.label?.substring(0, 8)}...` : option.label), /*#__PURE__*/React$1.createElement(CloseXIcon, {
           width: "8px",
           height: "8px",
           fill: "#212121"
@@ -40977,7 +40988,8 @@ const RangePop = props => {
       isValid
     },
     trigger,
-    setValue
+    setValue,
+    getValues
   } = useForm({
     mode: "onChange",
     // Validate on change
@@ -41065,8 +41077,8 @@ const RangePop = props => {
           return true;
         },
         rangeValidation: value => {
-          if (!isCustomRange || !value || param.label !== "To") return true;
-          const fromValue = watchedFields[`field_0`];
+          if (!isCustomRange || !value || idx !== 1) return true;
+          const fromValue = getValues("field_0");
           if (fromValue && fromValue !== "") {
             const numFrom = Number(fromValue);
             const numTo = Number(value);
@@ -41107,7 +41119,7 @@ const RangePop = props => {
   }, /*#__PURE__*/React$1.createElement(Controller, {
     name: `field_${idx}`,
     control: control,
-    rules: getValidationRules(param),
+    rules: getValidationRules(param, idx),
     render: _ref => {
       let {
         field
@@ -41118,8 +41130,7 @@ const RangePop = props => {
         error: !!errors[`field_${idx}`],
         onChange: e => {
           field.onChange(e.target.value);
-          // Trigger validation on the "To" field when "From" changes
-          if (param.label === "From") {
+          if (idx === 0) {
             trigger(`field_1`);
           }
         },