@orderly.network/ui 2.8.10-alpha.0 → 2.8.11-alpha.0

package/dist/index.d.mts

@@ -3886,6 +3886,7 @@ type DatePickerProps = {
     dateFormat?: string;
     size?: SizeType;
     className?: string;
+    children?: React.ReactNode;
 } & CalendarProps;
 declare const DatePicker$1: FC<DatePickerProps>;
 

package/dist/index.d.ts

@@ -3886,6 +3886,7 @@ type DatePickerProps = {
     dateFormat?: string;
     size?: SizeType;
     className?: string;
+    children?: React.ReactNode;
 } & CalendarProps;
 declare const DatePicker$1: FC<DatePickerProps>;
 

package/dist/index.js

@@ -725,8 +725,7 @@ var BaseButton = React68__namespace.default.forwardRef(
       }) : null;
     }, [size, icon]);
     const content = React68.useMemo(() => {
-      if (!leading && !trailing && !iconElement)
-        return children;
+      if (!leading && !trailing && !iconElement) return children;
       return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
         leading,
         iconElement,
@@ -4267,12 +4266,9 @@ var Numeral = (props) => {
   } = props;
   const num = Number(props.children);
   const child = React68.useMemo(() => {
-    if (props.children === "-")
-      return props.children;
-    if (isNaN(num))
-      return placeholder ?? "--";
-    if (typeof visible !== "undefined" && !visible)
-      return masking ?? "*****";
+    if (props.children === "-") return props.children;
+    if (isNaN(num)) return placeholder ?? "--";
+    if (typeof visible !== "undefined" && !visible) return masking ?? "*****";
     if (ignoreDP) {
       if (!!props.showIdentifier) {
         return Math.abs(num).toString();
@@ -4290,31 +4286,23 @@ var Numeral = (props) => {
   }, [num, visible, tick, dp]);
   const defaultColor = rest.color || "inherit";
   const colorName = React68.useMemo(() => {
-    if (!coloring)
-      return defaultColor;
-    if (typeof visible !== "undefined" && !visible)
-      return defaultColor;
+    if (!coloring) return defaultColor;
+    if (typeof visible !== "undefined" && !visible) return defaultColor;
     if (Number.isNaN(num)) {
       return defaultColor;
     }
-    if (num === 0)
-      return "neutral";
-    if (num < 0)
-      return "lose";
+    if (num === 0) return "neutral";
+    if (num < 0) return "lose";
     return "profit";
   }, [coloring, num, rest.color, props.visible]);
   const identifier = React68.useMemo(() => {
-    if (!showIdentifier || Number.isNaN(num) || num === 0)
-      return null;
-    if (typeof visible !== "undefined" && !visible)
-      return null;
+    if (!showIdentifier || Number.isNaN(num) || num === 0) return null;
+    if (typeof visible !== "undefined" && !visible) return null;
     if (num < 0) {
-      if (identifiers?.loss)
-        return identifiers.loss;
+      if (identifiers?.loss) return identifiers.loss;
       return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "-" });
     }
-    if (identifiers?.profit)
-      return identifiers.profit;
+    if (identifiers?.profit) return identifiers.profit;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" });
   }, [num, props.visible, showIdentifier]);
   const childWithUnit = React68.useMemo(() => {
@@ -4490,8 +4478,7 @@ var BaseInput = React68.forwardRef(
       return formatters ?? [];
     }, [formatters]);
     React68.useEffect(() => {
-      if (!ref)
-        return;
+      if (!ref) return;
       if (typeof ref === "function") {
         ref(innerInputRef.current);
       } else {
@@ -4502,8 +4489,7 @@ var BaseInput = React68.forwardRef(
       (value2) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
-        if (value2 === null || value2 === void 0)
-          return "";
+        if (value2 === null || value2 === void 0) return "";
         let index = 0;
         while (index < innerFormatters.length) {
           value2 = innerFormatters[index].onRenderBefore(value2, {
@@ -4519,8 +4505,7 @@ var BaseInput = React68.forwardRef(
       (value2, originValue) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
-        if (value2 === null || value2 === void 0)
-          return "";
+        if (value2 === null || value2 === void 0) return "";
         let index = innerFormatters.length - 1;
         while (index > -1) {
           value2 = innerFormatters[index].onSendBefore(value2, {
@@ -4534,13 +4519,11 @@ var BaseInput = React68.forwardRef(
       [innerFormatters]
     );
     const formattedValue = React68.useMemo(() => {
-      if (typeof value === "undefined" || value === null)
-        return "";
+      if (typeof value === "undefined" || value === null) return "";
       return formatToRender(value);
     }, [value, formatToRender]);
     React68.useEffect(() => {
-      if (document.activeElement !== innerInputRef.current)
-        return;
+      if (document.activeElement !== innerInputRef.current) return;
       const nextValueLen = `${formattedValue}`.length;
       const prevValueLen = prevInputValue.current?.length || 0;
       const next = cursor ? cursor + (nextValueLen - prevValueLen) : 0;
@@ -5709,13 +5692,11 @@ __export(formatter_exports, {
 });
 var currencyFormatter = {
   onRenderBefore: function(value, options) {
-    if (value === null || value === void 0)
-      return "";
+    if (value === null || value === void 0) return "";
     return utils.commify(value);
   },
   onSendBefore: function(value, options) {
-    if (value === null || value === void 0)
-      return "";
+    if (value === null || value === void 0) return "";
     value = value.replace(/,/g, "");
     return value;
   }
@@ -5727,10 +5708,8 @@ var numberFormatter = {
     return "" + value;
   },
   onSendBefore: function(value, options) {
-    if (value.startsWith("."))
-      return `0${value}`;
-    if (value === "00")
-      return "0";
+    if (value.startsWith(".")) return `0${value}`;
+    if (value === "00") return "0";
     value = value.replace(/[^\d.]/g, "").replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
     return value;
   }
@@ -5753,10 +5732,8 @@ var createRegexInputFormatter = (regex, onSendBefore) => ({
 // src/input/formatter/dp.ts
 var dpFormatter = (dp, config) => {
   const onBefore = (value, options) => {
-    if (typeof value === "number")
-      value = value.toString();
-    if (!value || value.endsWith("."))
-      return value;
+    if (typeof value === "number") value = value.toString();
+    if (!value || value.endsWith(".")) return value;
     return truncateNumber(value, dp);
   };
   return {
@@ -5776,12 +5753,9 @@ function truncateNumber(numStr, decimalPlaces) {
 // src/input/formatter/range.ts
 var rangeFormatter = (props) => {
   const onBefore = (value, options) => {
-    if (typeof value === "number")
-      value = value.toString();
-    if (value === ".")
-      return "0.";
-    if (!value || value.endsWith("."))
-      return value;
+    if (typeof value === "number") value = value.toString();
+    if (value === ".") return "0.";
+    if (!value || value.endsWith(".")) return value;
     const { max, min, dp } = props;
     const numValue = Number(value);
     if (isNaN(numValue)) {
@@ -5811,28 +5785,21 @@ var identifierFormatter = () => {
   const negative = "-";
   return {
     onRenderBefore: (value, options) => {
-      if (typeof value === "number")
-        value = value.toString();
-      if (!value || value.endsWith("."))
-        return value;
+      if (typeof value === "number") value = value.toString();
+      if (!value || value.endsWith(".")) return value;
       const _value = Number(value);
       if (_value) {
-        if (_value > 0 && !value.startsWith(integer))
-          return integer + value;
-        if (_value < 0 && !value.startsWith(negative))
-          return negative + value;
+        if (_value > 0 && !value.startsWith(integer)) return integer + value;
+        if (_value < 0 && !value.startsWith(negative)) return negative + value;
       }
       return value;
     },
     onSendBefore: (value, options) => {
-      if (typeof value === "number")
-        value = value.toString();
-      if (!value || value.endsWith("."))
-        return value;
+      if (typeof value === "number") value = value.toString();
+      if (!value || value.endsWith(".")) return value;
       const _value = Number(value);
       if (_value) {
-        if (_value > 0)
-          return value.replace(integer, "");
+        if (_value > 0) return value.replace(integer, "");
       }
       return value;
     }
@@ -5843,14 +5810,12 @@ var decimalPointFormatter = {
     return String(value);
   },
   onSendBefore: function(value, options) {
-    if (value === null || value === void 0)
-      return "";
+    if (value === null || value === void 0) return "";
     return replaceComma(value, options?.originValue);
   }
 };
 var replaceComma = (value, originValue) => {
-  if (value === null || value === void 0)
-    return "";
+  if (value === null || value === void 0) return "";
   if (value.endsWith(",")) {
     return value.slice(0, -1) + ".";
   }
@@ -6266,8 +6231,7 @@ function useInit(params) {
   const { dataSource, loading, ignoreLoadingCheck } = params;
   const [initialized, setInitialized] = React68.useState(false);
   React68.useEffect(() => {
-    if (initialized)
-      return;
+    if (initialized) return;
     if (ignoreLoadingCheck || loading || Array.isArray(dataSource)) {
       setInitialized(true);
     }
@@ -6361,8 +6325,7 @@ function useSort(props) {
 function useWrap(deps) {
   const wrapRef = React68.useRef(null);
   React68.useEffect(() => {
-    if (!wrapRef.current)
-      return;
+    if (!wrapRef.current) return;
     const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
     wrapRef.current.style.setProperty("--oui-table-background-color", bgColor);
   }, deps);
@@ -7194,12 +7157,9 @@ var TablePlaceholder = (props) => {
   );
 };
 var compareValues = (aValue, bValue) => {
-  if (aValue == null && bValue == null)
-    return 0;
-  if (aValue == null)
-    return 1;
-  if (bValue == null)
-    return -1;
+  if (aValue == null && bValue == null) return 0;
+  if (aValue == null) return 1;
+  if (bValue == null) return -1;
   const aStr = String(aValue).trim();
   const bStr = String(bValue).trim();
   const aNum = Number(aStr);
@@ -7239,12 +7199,9 @@ var createMultiSortComparator = (sortId, isDesc) => {
     };
     const aValue = getNestedValue(a, sortId) ?? a[sortId];
     const bValue = getNestedValue(b, sortId) ?? b[sortId];
-    if (aValue == null && bValue == null)
-      return 0;
-    if (aValue == null)
-      return 1;
-    if (bValue == null)
-      return -1;
+    if (aValue == null && bValue == null) return 0;
+    if (aValue == null) return 1;
+    if (bValue == null) return -1;
     const aNum = Number(aValue);
     const bNum = Number(bValue);
     if (!isNaN(aNum) && !isNaN(bNum)) {
@@ -7273,8 +7230,7 @@ var Transform = {
           multiSort: {
             ...multiSort,
             onSort: (fieldKey, sortOrder) => {
-              if (!setSorting)
-                return;
+              if (!setSorting) return;
               if (!sortOrder) {
                 setSorting([]);
               } else {
@@ -7688,10 +7644,8 @@ var DateRangePicker = (props) => {
       return placeholder ?? locale.selectDate;
     }
     const arr = [];
-    if (dateRange.from)
-      arr.push(dateFns.format(dateRange.from, formatString));
-    if (dateRange.to)
-      arr.push(dateFns.format(dateRange.to, formatString));
+    if (dateRange.from) arr.push(dateFns.format(dateRange.from, formatString));
+    if (dateRange.to) arr.push(dateFns.format(dateRange.to, formatString));
     return `${arr.join(" - ")}`;
   }, [dateRange, placeholder, locale]);
   const onOpenChange = (nextOpen) => {
@@ -7793,16 +7747,18 @@ var DatePicker = (props) => {
     value,
     size,
     className,
+    children,
     ...calendarProps
   } = props;
   const [locale] = useLocale("picker");
-  const { trigger } = selectVariants({ size, className });
+  const { trigger } = selectVariants({ size });
   const [open, setOpen] = React68.useState(false);
   const formattedValue = React68.useMemo(() => {
     if (typeof value === "undefined") {
       return placeholder ?? locale.selectDate;
     }
-  }, [value, placeholder, locale]);
+    return dateFns.format(value, dateFormat ?? "yyyy/MM/dd");
+  }, [value, placeholder, locale, dateFormat]);
   const onSelect = (day, selectedDay, activeModifiers, e) => {
     calendarProps.onSelect?.(day, selectedDay, activeModifiers, e);
     if (day) {
@@ -7818,21 +7774,38 @@ var DatePicker = (props) => {
       contentProps: {
         className: "oui-w-auto oui-p-0"
       },
-      content: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { onSelect, ...calendarProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      content: /* @__PURE__ */ jsxRuntime.jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: value,
+          onSelect,
+          ...calendarProps
+        }
+      ),
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           className: trigger({
-            className: "orderly-datepicker-trigger oui-group"
+            className: tailwindVariants.cnBase("oui-datepicker-trigger oui-group", className)
           }),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orderly-datepicker-trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 14, className: "oui-text-inherit", opacity: 1 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedValue }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-datepicker-trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarIcon,
+                {
+                  size: 14,
+                  className: "oui-text-inherit",
+                  opacity: 1
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedValue })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               CaretDownIcon,
               {
                 size: 12,
-                className: "orderly-datepicker-trigger-arrow oui-text-inherit oui-transition-transform group-data-[state=open]:oui-rotate-180 group-data-[state=closed]:oui-rotate-0",
+                className: "oui-datepicker-trigger-arrow oui-text-inherit oui-transition-transform group-data-[state=closed]:oui-rotate-0 group-data-[state=open]:oui-rotate-180",
                 opacity: 1
               }
             )
@@ -8004,12 +7977,11 @@ var SheetDescription = React68__namespace.forwardRef(({ className, ...props }, r
 SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 
 // src/modal/utils.ts
-var symModalId = Symbol("modalId");
+var symModalId = /* @__PURE__ */ Symbol("modalId");
 var uidSeed = 0;
 var getUid = () => `__modal_${uidSeed++}`;
 var getModalId = (modal2) => {
-  if (typeof modal2 === "string")
-    return modal2;
+  if (typeof modal2 === "string") return modal2;
   if (!modal2[symModalId]) {
     modal2[symModalId] = getUid();
   }
@@ -8124,8 +8096,7 @@ var create = (Comp) => {
       };
     }, [id, show2, defaultVisible]);
     React68.useEffect(() => {
-      if (keepMounted)
-        modalActions.setStates(id, { keepMounted: true });
+      if (keepMounted) modalActions.setStates(id, { keepMounted: true });
     }, [id, keepMounted]);
     const delayVisible = modals[id]?.delayVisible;
     React68.useEffect(() => {
@@ -8133,8 +8104,7 @@ var create = (Comp) => {
         show2(args);
       }
     }, [delayVisible, args, show2]);
-    if (!shouldMount)
-      return null;
+    if (!shouldMount) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(ModalIdContext.Provider, { value: id, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, ...args }) });
   };
 };
@@ -8702,8 +8672,7 @@ var SimpleDialogFooter = (props) => {
       setPrimaryLoading(false);
     };
   }, [actions?.primary?.loading]);
-  if (!actions)
-    return null;
+  if (!actions) return null;
   const buttons = React68.useMemo(() => {
     const buttons2 = [];
     if (actions.secondary && typeof actions.secondary.onClick === "function") {
@@ -8743,8 +8712,7 @@ var SimpleDialogFooter = (props) => {
             ...rest,
             "data-testid": actions.primary?.["data-testid"],
             onClick: async (event) => {
-              if (primaryLoading)
-                return;
+              if (primaryLoading) return;
               try {
                 setPrimaryLoading(true);
                 await onClick(event);
@@ -8888,8 +8856,7 @@ function useLongPress(callback, longPressTime = 600) {
   );
   const handleMouseDown = React68.useCallback(
     (e) => {
-      if (e.button !== 0)
-        return;
+      if (e.button !== 0) return;
       startLongPress(e);
     },
     [startLongPress]
@@ -8899,8 +8866,7 @@ function useLongPress(callback, longPressTime = 600) {
   }, [clearLongPress]);
   const handleMouseMove = React68.useCallback(
     (e) => {
-      if (isLongPressTriggeredRef.current)
-        return;
+      if (isLongPressTriggeredRef.current) return;
       if (startPositionRef.current) {
         const deltaX = Math.abs(e.clientX - startPositionRef.current.x);
         const deltaY = Math.abs(e.clientY - startPositionRef.current.y);
@@ -8935,8 +8901,7 @@ function useLongPress(callback, longPressTime = 600) {
       if (timeoutRef.current) {
         e.preventDefault();
       }
-      if (isLongPressTriggeredRef.current)
-        return;
+      if (isLongPressTriggeredRef.current) return;
       if (startPositionRef.current && e.touches[0]) {
         const deltaX = Math.abs(
           e.touches[0].clientX - startPositionRef.current.x
@@ -9889,15 +9854,13 @@ function useDrag(containerRef) {
   const [startX, setStartX] = React68.useState(0);
   const [scrollLeft, setScrollLeft] = React68.useState(0);
   const handleMouseDown = (e) => {
-    if (!containerRef.current)
-      return;
+    if (!containerRef.current) return;
     setIsDragging(true);
     setStartX(e.pageX - containerRef.current.offsetLeft);
     setScrollLeft(containerRef.current.scrollLeft);
   };
   const handleMouseMove = (e) => {
-    if (!isDragging || !containerRef.current)
-      return;
+    if (!isDragging || !containerRef.current) return;
     e.preventDefault();
     const x = e.pageX - containerRef.current.offsetLeft;
     const walk = x - startX;
@@ -9918,12 +9881,10 @@ function useScroll2() {
   const [tailingVisible, setTailingVisible] = React68.useState(false);
   const containerRef = React68.useRef(null);
   React68.useEffect(() => {
-    if (!containerRef.current)
-      return;
+    if (!containerRef.current) return;
     const handleScroll = () => {
       const container2 = containerRef.current;
-      if (!container2)
-        return;
+      if (!container2) return;
       setLeadingVisible(container2.scrollLeft > 0);
       setTailingVisible(
         container2.scrollLeft + container2.clientWidth < container2.scrollWidth
@@ -9945,8 +9906,7 @@ function useScroll2() {
     };
   }, []);
   React68.useEffect(() => {
-    if (!containerRef.current)
-      return;
+    if (!containerRef.current) return;
     const intersectionObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) ;
@@ -10879,8 +10839,7 @@ var ListViewInner = (props, ref) => {
     return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React68__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
   }, [emptyDataSouce, props.dataSource, props.extraData, props.emptyView]);
   const loadingViewElement = React68.useMemo(() => {
-    if ((props.dataSource?.length || 0) === 0)
-      return null;
+    if ((props.dataSource?.length || 0) === 0) return null;
     if (!props.isLoading) {
       return null;
     }
@@ -11345,8 +11304,7 @@ var Either = React68.memo((props) => {
 
 // src/utils/string.ts
 var capitalizeFirstLetter = (str, fallback) => {
-  if (typeof str === "undefined" || str === null)
-    return fallback ?? void 0;
+  if (typeof str === "undefined" || str === null) return fallback ?? void 0;
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
@@ -11724,5 +11682,5 @@ Object.keys(emblaCarouselAutoplay).forEach(function (k) {
     get: function () { return emblaCarouselAutoplay[k]; }
   });
 });
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map