@officesdk/design 0.2.13 → 0.2.15

package/dist/components/cjs/index.d.ts

@@ -1604,6 +1604,10 @@ interface LoadingProps {
      * Whether to use fullscreen overlay mode
      */
     fullscreen?: boolean;
+    /**
+     * Whether overlay background should be transparent
+     */
+    transparent?: boolean;
     /**
      * Custom className
      */
@@ -1659,6 +1663,11 @@ interface LoadingProps {
  */
 declare const Loading: React$1.FC<LoadingProps>;
 
+interface LoadingOverlayProps extends Pick<LoadingProps, 'size' | 'spinning' | 'delay' | 'tip' | 'className' | 'indicator'> {
+    transparent?: boolean;
+}
+declare const LoadingOverlay: React$1.FC<LoadingOverlayProps>;
+
 type DeepPartial<T extends object> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
@@ -1945,4 +1954,4 @@ declare const styled: ThemedStyledInterface<Theme>;
 
 declare const getGlobalTheme: () => Theme;
 
-export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, Dropdown, DropdownButton, type DropdownButtonProps, DropdownGlobalStyles, type DropdownProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, Loading, type LoadingProps, Menu, type MenuDivider, MenuGlobalStyles, type MenuGroup, type MenuItem, type MenuItemType, type MenuProps, Modal, ModalGlobalStyles, type ModalProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, UnderlinedInput, type InputProps as UnderlinedInputProps, type ZIndexConfig, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
+export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, Dropdown, DropdownButton, type DropdownButtonProps, DropdownGlobalStyles, type DropdownProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, Menu, type MenuDivider, MenuGlobalStyles, type MenuGroup, type MenuItem, type MenuItemType, type MenuProps, Modal, ModalGlobalStyles, type ModalProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, UnderlinedInput, type InputProps as UnderlinedInputProps, type ZIndexConfig, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };

package/dist/components/cjs/index.js

@@ -1067,37 +1067,43 @@ var init_Slider = __esm({
   position: absolute;
   background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
   border-radius: 1000px;
-  ${({ $direction, theme: theme2 }) => $direction === "vertical" ? `
-        top: 0;
-        bottom: 0;
+  ${({ $direction, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        top: 50%;
         width: ${theme2.components.slider.track.height};
+        height: calc(100% - ${thumbSize});
         left: 50%;
-        transform: translateX(-50%);
+        transform: translate(-50%, -50%);
       ` : `
-        left: 0;
-        right: 0;
+        left: 50%;
+        width: calc(100% - ${thumbSize});
         height: ${theme2.components.slider.track.height};
         top: 50%;
-        transform: translateY(-50%);
-      `}
+        transform: translate(-50%, -50%);
+      `;
+    }}
 `;
     SliderFill = exports.styled.div`
   position: absolute;
   border-radius: ${({ theme: theme2 }) => theme2.components.slider.track.borderRadius};
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.track.filledBackgroundDisabled : theme2.components.slider.track.filledBackground};
-  ${({ $direction, $percentage, theme: theme2 }) => $direction === "vertical" ? `
-        bottom: 0;
+  ${({ $direction, $percentage, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        bottom: calc(${thumbSize} / 2);
         width: ${theme2.components.slider.track.height};
         left: 50%;
         transform: translateX(-50%);
-        height: ${$percentage}%;
+        height: calc((100% - ${thumbSize}) * ${$percentage / 100});
       ` : `
-        left: 0;
+        left: calc(${thumbSize} / 2);
         height: ${theme2.components.slider.track.height};
         top: 50%;
         transform: translateY(-50%);
-        width: ${$percentage}%;
-      `}
+        width: calc((100% - ${thumbSize}) * ${$percentage / 100});
+      `;
+    }}
 `;
     SliderThumb = exports.styled.div`
   position: absolute;
@@ -1107,17 +1113,20 @@ var init_Slider = __esm({
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.thumb.backgroundDisabled : theme2.components.slider.thumb.background};
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
   box-shadow: ${({ theme: theme2 }) => theme2.components.slider.thumb.boxShadow};
-  ${({ $direction, $percentage, $isDragging }) => $direction === "vertical" ? `
-        bottom: ${$percentage}%;
+  ${({ $direction, $percentage, $isDragging, theme: theme2 }) => {
+      const thumbSize = theme2.components.slider.large.thumbSize;
+      return $direction === "vertical" ? `
+        bottom: calc((100% - ${thumbSize}) * ${$percentage / 100} + ${thumbSize} / 2);
         left: 50%;
         transform: translate(-50%, 50%);
         transition: ${$isDragging ? "none" : "bottom 0.1s ease"};
       ` : `
-        left: ${$percentage}%;
+        left: calc((100% - ${thumbSize}) * ${$percentage / 100} + ${thumbSize} / 2);
         top: 50%;
         transform: translate(-50%, -50%);
         transition: ${$isDragging ? "none" : "left 0.1s ease"};
-      `}
+      `;
+    }}
 
   ${({ $disabled, theme: theme2 }) => !$disabled && `
     &:hover {
@@ -1153,24 +1162,27 @@ var init_Slider = __esm({
       }, [valueMapProp, min, max, step]);
       const effectiveMin = extendedValueMap.start;
       const effectiveMax = extendedValueMap.end;
-      const [internalValue, setInternalValue] = React3.useState(
-        controlledValue ?? defaultValue
-      );
+      const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
       const [isDragging, setIsDragging] = React3.useState(false);
       const containerRef = React3.useRef(null);
+      const thumbRef = React3.useRef(null);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
       const percentage = valueToVisualPercentage(value, extendedValueMap) * 100;
       const updateValue = React3.useCallback(
         (clientX, clientY) => {
           if (!containerRef.current || disabled) return;
           const rect = containerRef.current.getBoundingClientRect();
+          const thumbRect = thumbRef.current?.getBoundingClientRect();
+          const thumbLength = direction === "vertical" ? thumbRect?.height ?? 0 : thumbRect?.width ?? 0;
+          const containerLength = direction === "vertical" ? rect.height : rect.width;
+          const trackLength = Math.max(containerLength - thumbLength, 0);
           let visualPercent;
           if (direction === "vertical") {
-            const offsetY = rect.bottom - clientY;
-            visualPercent = Math.max(0, Math.min(1, offsetY / rect.height));
+            const offsetY = rect.bottom - clientY - thumbLength / 2;
+            visualPercent = trackLength === 0 ? 0 : Math.max(0, Math.min(1, offsetY / trackLength));
           } else {
-            const offsetX = clientX - rect.left;
-            visualPercent = Math.max(0, Math.min(1, offsetX / rect.width));
+            const offsetX = clientX - rect.left - thumbLength / 2;
+            visualPercent = trackLength === 0 ? 0 : Math.max(0, Math.min(1, offsetX / trackLength));
           }
           const rawValue = visualPercentToValue(visualPercent, extendedValueMap);
           const snappedValue = snapToStep(rawValue, extendedValueMap);
@@ -1271,6 +1283,7 @@ var init_Slider = __esm({
         /* @__PURE__ */ React3__default.default.createElement(
           SliderThumb,
           {
+            ref: thumbRef,
             $percentage: percentage,
             $disabled: disabled,
             $isDragging: isDragging,
@@ -4601,6 +4614,8 @@ var MenuContainer = exports.styled.div`
   flex-direction: column;
   box-sizing: border-box;
   min-width: 220px;
+  max-height: 100%;
+  overflow: hidden;
 
   ${({ theme: theme2 }) => {
   const dropdownConfig = theme2.components?.dropdown;
@@ -4628,9 +4643,20 @@ var MenuContainer = exports.styled.div`
   }
 `;
 var SearchBoxContainer = exports.styled.div`
+  flex-shrink: 0;
   padding: 8px 12px;
   border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors?.palettes?.transparency?.["10"]};
 `;
+var MenuScrollContainer = exports.styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+var VirtualListContainer = exports.styled.div`
+  max-height: 100%;
+  overflow: hidden;
+`;
 var MenuItemContent = exports.styled.div`
   display: flex;
   align-items: center;
@@ -4854,7 +4880,7 @@ var Menu = ({
   };
   const itemHeight = size === "medium" ? 28 : 36;
   const menuKey = openKeys?.join(",") || "menu";
-  return /* @__PURE__ */ React3__default.default.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3__default.default.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React3__default.default.createElement(MenuContainer, { className, style: { maxHeight, ...style } }, searchable && /* @__PURE__ */ React3__default.default.createElement(SearchBoxContainer, { "data-testid": "menu-search-container" }, /* @__PURE__ */ React3__default.default.createElement(
     Input,
     {
       lineType: "underlined",
@@ -4866,7 +4892,7 @@ var Menu = ({
       onClear: () => handleSearch(""),
       prefixNode: /* @__PURE__ */ React3__default.default.createElement(icons.SearchIcon, null)
     }
-  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React3__default.default.createElement(MenuScrollContainer, { "data-testid": "menu-scroll-container" }, virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3__default.default.createElement(VirtualListContainer, null, /* @__PURE__ */ React3__default.default.createElement(
     VirtualList__default.default,
     {
       data: filteredItems,
@@ -4895,7 +4921,7 @@ var Menu = ({
       },
       renderItem(item)
     )
-  ) : /* @__PURE__ */ React3__default.default.createElement(
+  )) : /* @__PURE__ */ React3__default.default.createElement(
     RcMenu__default.default,
     {
       key: menuKey,
@@ -4912,7 +4938,7 @@ var Menu = ({
       }
     },
     filteredItems.map(renderItem)
-  ));
+  )));
 };
 Menu.displayName = "Menu";
 var Dropdown = ({
@@ -5110,6 +5136,7 @@ var Modal = ({
   maskType = "light",
   title,
   width,
+  height,
   okText,
   cancelText,
   footer,
@@ -5140,9 +5167,8 @@ var Modal = ({
   const modalWidth = width ?? modalConfig[variant].defaultWidth;
   const classNames = {
     ...maskType === "dark" && { mask: `${prefixCls}-mask-dark` },
-    content: `${prefixCls}-content-${variant}`
+    ...width === void 0 && height === void 0 && { content: `${prefixCls}-content-${variant}` }
   };
-  const styles = width !== void 0 ? { content: { width } } : void 0;
   const renderFooter = () => {
     if (footer !== void 0) return footer;
     return /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, cancelText !== null && /* @__PURE__ */ React3__default.default.createElement(exports.Button, { key: "cancel", variant: "outlined", colorType: "default", onClick: handleClose }, cancelText ?? "Cancel"), okText !== null && /* @__PURE__ */ React3__default.default.createElement(
@@ -5163,14 +5189,14 @@ var Modal = ({
       ...restProps,
       visible,
       title,
-      width: width === void 0 ? modalWidth : void 0,
+      width: modalWidth,
+      height,
       prefixCls,
       closable,
       closeIcon: closeIcon ?? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { size: 19.2 }, /* @__PURE__ */ React3__default.default.createElement(icons.CloseIcon, null)),
       mask,
       maskClosable,
       classNames,
-      styles,
       className,
       onClose: handleClose,
       footer: renderFooter()
@@ -5227,19 +5253,23 @@ var CSSSpinner = exports.styled.div`
     `;
 }}
 `;
-var LoadingContainer = exports.styled.div`
+var LoadingInlineContainer = exports.styled.span`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: ${({ $hasTip, theme: theme2 }) => $hasTip ? theme2.components.loading.indicator.gap : "0"};
-
-  ${({ $fullscreen, theme: theme2 }) => $fullscreen && `
-      position: fixed;
-      inset: 0;
-      z-index: ${theme2.components.loading.fullscreen.zIndex};
-      background: ${theme2.components.loading.fullscreen.background};
-    `}
+`;
+var LoadingFullscreenContainer = exports.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ $hasTip, theme: theme2 }) => $hasTip ? theme2.components.loading.indicator.gap : "0"};
+  position: fixed;
+  inset: 0;
+  z-index: ${({ theme: theme2 }) => theme2.components.loading.fullscreen.zIndex};
+  background: ${({ $transparent, theme: theme2 }) => $transparent ? "transparent" : theme2.components.loading.fullscreen.background};
 `;
 var Tip = exports.styled.span`
   font-size: 14px;
@@ -5271,6 +5301,7 @@ var Loading = ({
   delay = 0,
   tip,
   fullscreen = false,
+  transparent = false,
   className,
   children,
   indicator
@@ -5316,10 +5347,125 @@ var Loading = ({
     return /* @__PURE__ */ React3__default.default.createElement(Wrapper, { className }, /* @__PURE__ */ React3__default.default.createElement(WrapperContent, { $spinning: shouldShow }, children), shouldShow && /* @__PURE__ */ React3__default.default.createElement(WrapperOverlay, { $hasTip: !!tip }, renderSpinner()));
   }
   if (!shouldShow) return null;
-  return /* @__PURE__ */ React3__default.default.createElement(LoadingContainer, { $fullscreen: fullscreen, $hasTip: !!tip, className }, renderSpinner());
+  if (fullscreen) {
+    return /* @__PURE__ */ React3__default.default.createElement(LoadingFullscreenContainer, { $hasTip: !!tip, $transparent: transparent, className }, renderSpinner());
+  }
+  return /* @__PURE__ */ React3__default.default.createElement(LoadingInlineContainer, { $hasTip: !!tip, className }, renderSpinner());
 };
 Loading.displayName = "Loading";
 
+// src/Loading/LoadingOverlay.tsx
+init_styled();
+init_loading();
+init_context();
+var getIndicatorSize2 = (size, theme2) => {
+  const sizeConfig = theme2.components.loading[size || "medium"];
+  return `
+    width: ${sizeConfig.size};
+    height: ${sizeConfig.size};
+  `;
+};
+var SpinnerImage2 = exports.styled.img`
+  display: inline-block;
+  ${({ $size, theme: theme2 }) => getIndicatorSize2($size, theme2)}
+  object-fit: contain;
+`;
+var CustomIndicatorWrapper2 = exports.styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  ${({ $size, theme: theme2 }) => getIndicatorSize2($size, theme2)}
+`;
+var CSSSpinner2 = exports.styled.div`
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  ${({ $size, theme: theme2 }) => {
+  const loadingConfig = theme2.components.loading;
+  const sizeConfig = loadingConfig[$size || "medium"];
+  const { color, animation } = loadingConfig.indicator;
+  const sizeValue = Number.parseFloat(sizeConfig.size);
+  const borderWidth = Math.max(2, Math.round((Number.isNaN(sizeValue) ? 24 : sizeValue) / 12));
+  return `
+      width: ${sizeConfig.size};
+      height: ${sizeConfig.size};
+      border: ${borderWidth}px solid rgba(0, 0, 0, 0.1);
+      border-top-color: ${color};
+      animation: loading-spin ${animation.duration} ${animation.timingFunction} infinite;
+
+      @keyframes loading-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+    `;
+}}
+`;
+var OverlayContainer = exports.styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  background: ${({ $transparent, theme: theme2 }) => $transparent ? "transparent" : theme2.components.loading.wrapper.overlayBackground};
+  gap: ${({ $hasTip, theme: theme2 }) => $hasTip ? theme2.components.loading.indicator.gap : "0"};
+`;
+var Tip2 = exports.styled.span`
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${({ theme: theme2 }) => theme2.components.loading.tipColor};
+`;
+var LoadingOverlay = ({
+  size = "medium",
+  spinning = true,
+  delay = 0,
+  tip,
+  className,
+  indicator,
+  transparent = false
+}) => {
+  const [shouldShow, setShouldShow] = React3.useState(delay === 0 && spinning);
+  React3.useEffect(() => {
+    if (!spinning) {
+      setShouldShow(false);
+      return;
+    }
+    if (delay <= 0) {
+      setShouldShow(true);
+      return;
+    }
+    const timer = setTimeout(() => setShouldShow(true), delay);
+    return () => clearTimeout(timer);
+  }, [spinning, delay]);
+  const renderIndicator = () => {
+    const a11yProps = { role: "status", "aria-label": "Loading" };
+    if (typeof indicator === "string") {
+      return /* @__PURE__ */ React3__default.default.createElement(SpinnerImage2, { $size: size, src: indicator, alt: "Loading", ...a11yProps });
+    }
+    if (indicator) {
+      return /* @__PURE__ */ React3__default.default.createElement(CustomIndicatorWrapper2, { $size: size, ...a11yProps }, indicator);
+    }
+    const { indicator: indicatorConfig } = exports.getGlobalTheme().components.loading;
+    if (indicatorConfig.defaultType === "css") {
+      return /* @__PURE__ */ React3__default.default.createElement(CSSSpinner2, { $size: size, ...a11yProps });
+    }
+    return /* @__PURE__ */ React3__default.default.createElement(
+      SpinnerImage2,
+      {
+        $size: size,
+        src: indicatorConfig.defaultImage || loading_default,
+        alt: "Loading",
+        ...a11yProps
+      }
+    );
+  };
+  if (!shouldShow) return null;
+  return /* @__PURE__ */ React3__default.default.createElement(OverlayContainer, { $hasTip: !!tip, $transparent: transparent, className }, renderIndicator(), tip && /* @__PURE__ */ React3__default.default.createElement(Tip2, null, tip));
+};
+LoadingOverlay.displayName = "LoadingOverlay";
+
 // src/index.ts
 init_UIConfigProvider2();
 init_styled();
@@ -5331,6 +5477,7 @@ exports.DropdownButton = DropdownButton2;
 exports.DropdownGlobalStyles = DropdownGlobalStyles;
 exports.Input = Input;
 exports.Loading = Loading;
+exports.LoadingOverlay = LoadingOverlay;
 exports.Menu = Menu;
 exports.MenuGlobalStyles = MenuGlobalStyles;
 exports.Modal = Modal;