@shoplflow/base 0.31.11 → 0.31.13

package/dist/index.cjs

@@ -4720,31 +4720,6 @@ var DatePickerWrapper = styled6__default.default.div`
     }
   }
 `;
-styled6__default.default.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 32px;
-  gap: 8px;
-`;
-styled6__default.default.p`
-  font-size: 18px;
-  color: ${exports.colorTokens.neutral700};
-  cursor: pointer;
-`;
-styled6__default.default.div`
-  position: absolute;
-  z-index: 10;
-  top: 3rem;
-
-  border: 1px solid #eaeaea;
-  box-shadow: 0px 10px 30px 0px rgba(51, 51, 51, 0.2);
-  .react-datepicker {
-    border: 1px solid #eaeaea;
-  }
-`;
 var Container5 = styled6__default.default.div`
   border-radius: 4px;
   background-color: ${exports.colorTokens.neutral0};
@@ -4754,6 +4729,7 @@ var Container5 = styled6__default.default.div`
   position: relative;
   top: 0px;
   left: 0px;
+  width: 60px;
 
   & .simplebar-placeholder {
     height: 0px !important;
@@ -4784,8 +4760,14 @@ var OptionListItem = styled6__default.default.li`
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
-  text-align: left;
-  white-space: break-spaces;
+  text-align: center;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
   cursor: pointer;
   border-radius: 4px;
   background-color: ${({ isActive }) => isActive && exports.colorTokens.primary300};
@@ -4796,6 +4778,7 @@ var OptionListItem = styled6__default.default.li`
   }
 `;
 var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeight, onClick }) => {
+  var _a, _b;
   const optionListRef = React3.useRef([]);
   const parentRef = React3.useRef(null);
   const [isAllRefMounted, setIsAllRefMounted] = React3.useState(false);
@@ -4805,23 +4788,25 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
   React3.useEffect(() => {
     setIsOpened(isOpened);
   }, []);
+  const height = Math.min((_b = (_a = parentRef.current) == null ? void 0 : _a.scrollHeight) != null ? _b : 0, Number(maxHeight));
   React3.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b2, _c, _d, _e, _f;
     if (!isAllRefMounted || !activeValue || !maxHeight) {
       return;
     }
     const selectedOptionIndex = optionList.findIndex((option) => (option == null ? void 0 : option.value) === activeValue);
-    const heightPerOption = (_b = (_a = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
+    const heightPerOption = (_b2 = (_a2 = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _a2.offsetHeight) != null ? _b2 : 0;
     const parentHeight = (_e = (_d = (_c = optionListRef.current[selectedOptionIndex]) == null ? void 0 : _c.closest("ul")) == null ? void 0 : _d.clientHeight) != null ? _e : 0;
     if (heightPerOption * (selectedOptionIndex + 1) >= parentHeight) {
       (_f = parentRef.current) == null ? void 0 : _f.scrollTo({ top: heightPerOption * selectedOptionIndex });
     }
   }, [isAllRefMounted, activeValue, maxHeight]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Container5, { className: `${parentClassName} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptionList, { ref: parentRef, maxHeight, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
     SimpleBarReact__default.default,
     {
       style: {
-        maxHeight
+        maxHeight,
+        height
       },
       placeholder: void 0,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(