@orderly.network/ui 2.11.0 → 3.0.0-beta.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React71 from 'react';
-import React71__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useImperativeHandle, useContext, useReducer } from 'react';
+import React71__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useImperativeHandle, useContext, useReducer, createElement } from 'react';
 import { createTV, tv as tv$1, cnBase, cn } from 'tailwind-variants';
 export { cnBase as cn } from 'tailwind-variants';
 import { Slot } from '@radix-ui/react-slot';
@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { isValid, format } from 'date-fns';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import makeBlockie from 'ethereum-blockies-base64';
-import { findLongestCommonSubString, Decimal, getPrecisionByNumber, numberToHumanStyle, commify, getGlobalObject, todpIfNeed, formatNum } from '@orderly.network/utils';
+import { findLongestCommonSubString, Decimal, getPrecisionByNumber, numberToHumanStyle, commify, todpIfNeed, formatNum } from '@orderly.network/utils';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { SelectItem as SelectItem$1, SelectItemText, ItemIndicator } from '@radix-ui/react-select';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -17,7 +17,8 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useReactTable, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, getCoreRowModel, getPaginationRowModel, createColumnHelper, flexRender } from '@tanstack/react-table';
 import { enUS } from 'date-fns/locale';
-import { ErrorBoundary } from 'react-error-boundary';
+import { injectable, positionToPath, OrderlyPluginRegistry } from '@orderly.network/plugin-core';
+export { ExtensionPositionEnum, ExtensionProvider, ExtensionSlot, OrderlyExtensionRegistry, OrderlyPluginProvider, OrderlyPluginRegistry, PluginErrorBoundary, PluginScopeContext, PluginScopeProvider, createInterceptor, createOrderlySDK, injectable, installExtension, positionToPath, setExtensionBuilder, useExtensionContext, useInjectedComponent, useOrderlyPluginContext, usePluginScope } from '@orderly.network/plugin-core';
 import { DayPicker } from 'react-day-picker';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -7431,139 +7432,26 @@ var TablePagination = (props) => {
     }
   ) });
 };
-var OrderlyExtensionRegistry = class _OrderlyExtensionRegistry {
-  // private static _instance: OrderlyExtensionRegistry;
-  static getInstance() {
-    const globalObject = getGlobalObject();
-    if (!globalObject.__ORDERLY_EXTENSION_REGISTRY__) {
-      globalObject.__ORDERLY_EXTENSION_REGISTRY__ = new _OrderlyExtensionRegistry();
-    }
-    return globalObject.__ORDERLY_EXTENSION_REGISTRY__;
-  }
-  extensionMap = /* @__PURE__ */ new Map();
-  // private formatterMap: Map<string, Function> = new Map();
-  register(plugin3) {
-    if (!plugin3.builder) ;
-    for (let index = 0; index < plugin3.positions.length; index++) {
-      if (typeof plugin3.builder !== "function") {
-        const builder = this.extensionMap.get(plugin3.positions[index])?.builder;
-        plugin3.builder = typeof builder === "undefined" ? (
-          // ? DEFAULT_BUILDER
-          void 0
-        ) : builder;
-      }
-      const pos = plugin3.positions[index];
-      this.registerToPosition(pos, plugin3);
-    }
-  }
-  registerToPosition(position, plugin3) {
-    if (this.extensionMap.has(position)) {
-      const existingPlugin = this.extensionMap.get(position);
-      if (!existingPlugin?.__isInternal) {
-        if (!existingPlugin?.builder && plugin3.__isInternal) {
-          this.setBuilder(position, plugin3.builder);
-        }
-        return;
-      }
-      if (!plugin3.builder) {
-        plugin3.builder = existingPlugin.builder;
-      }
-    }
-    this.extensionMap.set(position, plugin3);
-  }
-  setBuilder(position, builder) {
-    const plugin3 = this.extensionMap.get(position);
-    if (plugin3) {
-      plugin3.builder = builder;
-    }
-  }
-  unregister(plugin3) {
-    for (let index = 0; index < plugin3.positions.length; index++) {
-      const pos = plugin3.positions[index];
-      this.unregisterFromPosition(pos);
-    }
-  }
-  unregisterFromPosition(position) {
-    this.extensionMap.delete(position);
-  }
-  getPluginsByPosition(position) {
-    return this.extensionMap.get(position);
-  }
-  /**
-   * get the registered formatter by position
-   * @param position
-   */
-  getFormatterByPosition(position) {
-    return this.extensionMap.get(position);
-  }
-};
-
-// src/plugin/install.tsx
-var installExtension = (options) => {
-  return (component) => {
-    const registry = OrderlyExtensionRegistry.getInstance();
-    registry.register({
-      name: options.name,
-      positions: options.positions,
-      __isInternal: !!options.__isInternal,
-      builder: options.builder,
-      render: component
-    });
-  };
-};
-var setExtensionBuilder = (position, builder) => {
-  const registry = OrderlyExtensionRegistry.getInstance();
-  registry.setBuilder(position, builder);
-};
-var NotFound = (props) => {
-  const { position } = props;
-  return /* @__PURE__ */ jsxs("div", { className: "oui-text-danger", children: [
-    /* @__PURE__ */ jsx("strong", { children: `[${position}] ` }),
-    /* @__PURE__ */ jsx("span", { children: "Not found!" })
-  ] });
-};
-
-// src/plugin/useBuilder.ts
-var useBuilder = (position, props) => {
-  const registry = OrderlyExtensionRegistry.getInstance();
-  const plugin3 = registry.getPluginsByPosition(position);
-  return () => {
-    return plugin3?.builder?.(props) || props;
-  };
-};
-
-// src/plugin/useExtensionBuilder.ts
-var useExtensionBuilder = (position, props) => {
-  const builder = useBuilder(position, props);
-  return builder();
-};
-var ExtensionSlot = (props) => {
-  const { position, scope, defaultWidget: defaultValue, ...rest } = props;
-  const elementProps = useExtensionBuilder(position, rest);
-  const Ele = useMemo(() => {
-    const registry = OrderlyExtensionRegistry.getInstance();
-    const plugin3 = registry.getPluginsByPosition(position);
-    return plugin3?.render ?? defaultValue ?? NotFound;
-  }, []);
-  return /* @__PURE__ */ jsx(
-    ErrorBoundary,
+var EmptyDataState = (props) => {
+  const [locale] = useLocale("empty");
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
-      fallback: /* @__PURE__ */ jsx("div", { children: `Component: [${position}] went wrong` }),
-      children: /* @__PURE__ */ jsx(Slot, { ...elementProps, position, children: /* @__PURE__ */ jsx(Ele, {}) })
+      itemAlign: "center",
+      direction: "column",
+      gapY: 4,
+      className: props.className,
+      children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(emptyData_default, {}) }),
+        /* @__PURE__ */ jsx(Text2, { as: "div", intensity: 36, size: "2xs", children: props.title ?? locale.description })
+      ]
     }
   );
 };
-
-// src/plugin/types.ts
-var ExtensionPositionEnum = /* @__PURE__ */ ((ExtensionPositionEnum2) => {
-  ExtensionPositionEnum2["DepositForm"] = "depositForm";
-  ExtensionPositionEnum2["WithdrawForm"] = "withdrawForm";
-  ExtensionPositionEnum2["AccountMenu"] = "accountMenu";
-  ExtensionPositionEnum2["MobileAccountMenu"] = "mobileAccountMenu";
-  ExtensionPositionEnum2["MainMenus"] = "mainMenus";
-  ExtensionPositionEnum2["EmptyDataIdentifier"] = "emptyDataIdentifier";
-  return ExtensionPositionEnum2;
-})(ExtensionPositionEnum || {});
+var InjectableEmptyDataState = injectable(
+  EmptyDataState,
+  "Table.EmptyDataIdentifier"
+);
 var TablePlaceholder = (props) => {
   const { visible, loading, emptyView, className } = props;
   if (!visible) {
@@ -7581,7 +7469,7 @@ var TablePlaceholder = (props) => {
         "oui-flex oui-items-center oui-justify-center",
         className
       ),
-      children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : emptyView || /* @__PURE__ */ jsx(ExtensionSlot, { position: "emptyDataIdentifier" /* EmptyDataIdentifier */ })
+      children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : emptyView || /* @__PURE__ */ jsx(InjectableEmptyDataState, {})
     }
   );
 };
@@ -9842,26 +9730,6 @@ var usePagination = (initial) => {
     parsePagination
   };
 };
-var EmptyDataState = (props) => {
-  const [locale] = useLocale("empty");
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      itemAlign: "center",
-      direction: "column",
-      gapY: 4,
-      className: props.className,
-      children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(emptyData_default, {}) }),
-        /* @__PURE__ */ jsx(Text2, { as: "div", intensity: 36, size: "2xs", children: props.title ?? locale.description })
-      ]
-    }
-  );
-};
-installExtension({
-  name: "emptyDataIdentifier",
-  positions: ["emptyDataIdentifier" /* EmptyDataIdentifier */]
-})(EmptyDataState);
 
 // src/table/features/index.ts
 var features_exports = {};
@@ -11556,19 +11424,23 @@ var SimpleDropdownMenu = (props) => {
     ) })
   ] });
 };
+
+// src/provider/componentProvider.tsx
+var COMPONENTS_PLUGIN_ID = "orderly-components-provider-overrides";
 var ComponentsProvider = (props) => {
   useEffect(() => {
     if (props.components && Object.keys(props.components).length) {
-      for (const position in props.components) {
-        const Element = props.components[position];
-        installExtension({
-          name: Element.displayName ?? `custom-component-${position}`,
-          positions: [position],
-          __isInternal: false
-        })((props2) => {
-          return /* @__PURE__ */ jsx(Element, { ...props2 });
-        });
-      }
+      const interceptors = Object.entries(props.components).map(
+        ([position, Element]) => ({
+          target: positionToPath(position),
+          component: (_Original, slotProps) => createElement(Element, slotProps)
+        })
+      );
+      OrderlyPluginRegistry.register({
+        id: COMPONENTS_PLUGIN_ID,
+        name: "ComponentsProvider",
+        interceptors
+      });
     }
   }, [props.components]);
   return props.children;
@@ -11926,6 +11798,6 @@ var LIGHT_THEME_CSS_VARS = {
   "--oui-spacing-xl": "33.75rem"
 };
 
-export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, ExtensionPositionEnum, ExtensionSlot, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, IconButton, InfoCircleIcon, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, iconButtonVariants, formatter_exports as inputFormatter, installExtension, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, setExtensionBuilder, startViewTransition, statisticVariants, textVariants, tv, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
+export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, IconButton, InfoCircleIcon, InjectableEmptyDataState, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, iconButtonVariants, formatter_exports as inputFormatter, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, startViewTransition, statisticVariants, textVariants, tv, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map