@arcblock/ux 2.13.70 → 3.0.0

package/lib/Locale/context.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import type { Locale } from '../type';
+import { Locale } from '../type';
 declare const getLocale: (languages?: {
     code: string;
 }[]) => string;
@@ -26,8 +26,8 @@ export interface LocaleContextType {
         name: string;
     }[];
 }
-declare const LocaleContext: import("react").Context<LocaleContextType>;
-declare const Consumer: import("react").Consumer<LocaleContextType>;
+declare const LocaleContext: import('react').Context<LocaleContextType>;
+declare const Consumer: import('react').Consumer<LocaleContextType>;
 declare function LocaleProvider({ children, locale, fallbackLocale, translations, onLoadingTranslation, languages, ...rest }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useLocaleContext(): LocaleContextType;
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/lib/Locale/context.js

@@ -1,133 +1,81 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
-import get from 'lodash/get';
-import Cookie from 'js-cookie';
-import browserLang from './browser-lang';
-import { translate } from './util';
-import { getCookieOptions, resolveRootDomain } from '../Util';
-const cookieName = 'nf_lang';
-
-// 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
-const getLocaleFromSearchParams = (languages, url = window.location.href) => {
-  const locale = new URL(url).searchParams.get('locale');
-  if (languages.find(x => x.code === locale)) {
-    return locale;
-  }
-  return null;
-};
-const setLocaleParam = (locale, url = window.location.href) => {
-  const urlObj = new URL(url);
-  const hasLocaleParam = urlObj.searchParams.has('locale');
-  if (hasLocaleParam) {
-    urlObj.searchParams.set('locale', locale);
-    window.history.replaceState({}, '', urlObj.href);
-  }
-};
-const getLocale = (languages = []) => {
-  const langParams = {
-    languages: languages.map(item => item.code),
+import { jsx as v } from "react/jsx-runtime";
+import { createContext as x, use as k, useState as p, useRef as A, useEffect as R, useCallback as b } from "react";
+import j from "lodash/get";
+import f from "js-cookie";
+import S from "./browser-lang.js";
+import { translate as U } from "./util.js";
+import { getCookieOptions as D, resolveRootDomain as E } from "../Util/index.js";
+const l = "nf_lang", F = (e, o = window.location.href) => {
+  const t = new URL(o).searchParams.get("locale");
+  return e.find((r) => r.code === t) ? t : null;
+}, O = (e, o = window.location.href) => {
+  const t = new URL(o);
+  t.searchParams.has("locale") && (t.searchParams.set("locale", e), window.history.replaceState({}, "", t.href));
+}, L = (e = []) => {
+  var t;
+  const o = {
+    languages: e.map((r) => r.code),
     // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
-    fallback: languages?.[0]?.code || 'en'
+    fallback: ((t = e == null ? void 0 : e[0]) == null ? void 0 : t.code) || "en"
   };
-  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
-};
-const setLocale = locale => {
-  const opts = getCookieOptions();
-
-  // @compatibility 移除历史上使用根域名的旧 cookie
-  if (!opts.domain) {
-    const rootDomain = resolveRootDomain();
-    if (rootDomain) {
-      Cookie.remove(cookieName, {
-        path: opts.path || '/',
-        domain: rootDomain
-      });
-    }
+  return F(e) || f.get(l) || S(o);
+}, z = (e) => {
+  const o = D();
+  if (!o.domain) {
+    const t = E();
+    t && f.remove(l, { path: o.path || "/", domain: t });
   }
-  Cookie.set(cookieName, locale, opts);
-  setLocaleParam(locale);
-};
-const getLanguages = arg => {
-  const env = get(window, 'blocklet.languages');
-  if (Array.isArray(env) && env.length) {
-    return env;
-  }
-  if (Array.isArray(arg) && arg.length) {
-    return arg;
-  }
-  return [{
-    code: 'en',
-    name: 'English'
-  }, {
-    code: 'zh',
-    name: '简体中文'
-  }];
-};
-// FIXME: @wangshijun revert this before release
-const LocaleContext = /*#__PURE__*/createContext(null);
-const {
-  Provider,
-  Consumer
-} = LocaleContext;
-function LocaleProvider({
-  children,
-  locale,
-  fallbackLocale,
-  translations,
-  onLoadingTranslation,
-  languages = [],
-  ...rest
+  f.set(l, e, o), O(e);
+}, N = (e) => {
+  const o = j(window, "blocklet.languages");
+  return Array.isArray(o) && o.length ? o : Array.isArray(e) && e.length ? e : [
+    { code: "en", name: "English" },
+    { code: "zh", name: "简体中文" }
+  ];
+}, d = x(null), { Provider: _, Consumer: M } = d;
+function Q({
+  children: e,
+  locale: o,
+  fallbackLocale: t,
+  translations: r,
+  onLoadingTranslation: m,
+  languages: P = [],
+  ...C
 }) {
-  const langs = getLanguages(languages);
-  // eslint-disable-next-line prefer-const
-  let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
-  const lastCurrentLocale = useRef(fallbackLocale || '');
-  const [, setForceUpdate] = useState(0);
-  const changeLocale = newLocale => {
-    setCurrentLocale(newLocale);
-    setLocale(newLocale);
+  const a = N(P);
+  let [n, w] = p(o || L(a));
+  const i = A(t || ""), [, y] = p(0), u = (c) => {
+    w(c), z(c);
   };
-  useEffect(() => {
-    const tmpLocale = locale || getLocale(langs);
-    if (tmpLocale !== currentLocale) {
-      changeLocale(tmpLocale);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locale]);
-
-  // handle async loading of translations
-  if (currentLocale && translations[currentLocale] && typeof translations[currentLocale] === 'function') {
-    const tmpLocale = currentLocale;
+  if (R(() => {
+    const c = o || L(a);
+    c !== n && u(c);
+  }, [o]), n && r[n] && typeof r[n] == "function") {
+    const c = n;
     try {
-      Promise.resolve(translations[tmpLocale]()).then(res => {
-        if (res && typeof res === 'object') {
-          translations[tmpLocale] = res;
-          setForceUpdate(x => x > 999 ? 0 : x + 1);
-        }
+      Promise.resolve(r[c]()).then((s) => {
+        s && typeof s == "object" && (r[c] = s, y((h) => h > 999 ? 0 : h + 1));
       });
-    } catch (err) {
-      console.error(err);
+    } catch (s) {
+      console.error(s);
     }
-    onLoadingTranslation?.(tmpLocale, langs);
-    currentLocale = lastCurrentLocale.current;
-  } else {
-    lastCurrentLocale.current = currentLocale;
-  }
-  const t = useCallback((key, data) => translate(translations, key, currentLocale, fallbackLocale, data), [translations, currentLocale, fallbackLocale]);
-  return /*#__PURE__*/_jsx(Provider, {
-    value: {
-      locale: currentLocale,
-      changeLocale,
-      t,
-      languages: langs,
-      ...rest
-    },
-    children: children
-  });
+    m == null || m(c, a), n = i.current;
+  } else
+    i.current = n;
+  const g = b(
+    (c, s) => U(r, c, n, t, s),
+    [r, n, t]
+  );
+  return /* @__PURE__ */ v(_, { value: { locale: n, changeLocale: u, t: g, languages: a, ...C }, children: e });
 }
-function useLocaleContext() {
-  const context = useContext(LocaleContext);
-  return context;
+function V() {
+  return k(d);
 }
-export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };
+export {
+  M as LocaleConsumer,
+  d as LocaleContext,
+  Q as LocaleProvider,
+  L as getLocale,
+  z as setLocale,
+  V as useLocaleContext
+};

package/lib/Locale/languages.js

@@ -1,60 +1,58 @@
-// from: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
-const languages = {
+const e = {
   ar: {
-    name: 'Arabic',
-    nativeName: 'اَلْعَرَبِيَّةُ'
+    name: "Arabic",
+    nativeName: "اَلْعَرَبِيَّةُ"
   },
   de: {
-    name: 'German',
-    nativeName: 'Deutsch'
+    name: "German",
+    nativeName: "Deutsch"
   },
   en: {
-    name: 'English',
-    nativeName: 'English'
+    name: "English",
+    nativeName: "English"
   },
   es: {
-    name: 'Spanish',
-    nativeName: 'Español'
+    name: "Spanish",
+    nativeName: "Español"
   },
   fr: {
-    name: 'French',
-    nativeName: 'Français'
+    name: "French",
+    nativeName: "Français"
   },
   it: {
-    name: 'Italian',
-    nativeName: 'Italiano'
+    name: "Italian",
+    nativeName: "Italiano"
   },
   ja: {
-    name: 'Japanese',
-    nativeName: '日本語'
+    name: "Japanese",
+    nativeName: "日本語"
   },
   ko: {
-    name: 'Korean',
-    nativeName: '한국어'
+    name: "Korean",
+    nativeName: "한국어"
   },
   mn: {
-    name: 'Mongolian',
-    nativeName: 'Монгол хэл'
+    name: "Mongolian",
+    nativeName: "Монгол хэл"
   },
   pt: {
-    name: 'Portuguese',
-    nativeName: 'Português'
+    name: "Portuguese",
+    nativeName: "Português"
   },
   ru: {
-    name: 'Russian',
-    nativeName: 'Русский'
+    name: "Russian",
+    nativeName: "Русский"
   },
   zh: {
-    name: 'Simplified Chinese',
-    nativeName: '简体中文'
+    name: "Simplified Chinese",
+    nativeName: "简体中文"
   },
-  'zh-TW': {
-    name: 'Traditional Chinese',
-    nativeName: '繁體中文'
+  "zh-TW": {
+    name: "Traditional Chinese",
+    nativeName: "繁體中文"
   }
+}, n = Object.keys(e).map((a) => ({ code: a, ...e[a] }));
+export {
+  n as default,
+  e as map
 };
-export default Object.keys(languages).map(code => ({
-  code,
-  ...languages[code]
-}));
-export { languages as map };

package/lib/Locale/selector.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { Locale } from '../type';
+import { default as React } from 'react';
+import { Locale } from '../type';
 export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     showText?: true | false;
     popperProps?: React.HTMLAttributes<HTMLDivElement>;

package/lib/Locale/selector.js

@@ -1,147 +1,111 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/jsx-no-bind */
-import React, { useState, useContext, useRef, useMemo } from 'react';
-import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener, Paper } from '@mui/material';
-import { Icon as IconifyIcon } from '@iconify/react';
-import CheckIcon from '@iconify-icons/material-symbols/check';
-import LanguageIcon from 'iconify-icons-material-symbols-400/language';
-import noop from 'lodash/noop';
-import { LocaleContext } from './context';
-import { styled, useTheme } from '../Theme';
-import { mergeSx } from '../Util/style';
-export default function LocaleSelector(props) {
-  const {
-    showText = true,
-    popperProps = {},
-    popperType = 'click',
-    icon: Icon,
-    size = 24,
-    onChange = noop,
-    ...rest
-  } = props;
-  const {
-    locale,
-    changeLocale,
-    languages
-  } = useContext(LocaleContext);
-  const anchorEl = useRef(null);
-  const [open, setOpen] = useState(false);
-  const theme = useTheme();
-  const dark = theme?.palette?.mode === 'dark';
-  const onSelect = newLocale => {
-    changeLocale(newLocale);
-    setOpen(false);
-    if (typeof props.onChange === 'function') {
-      props.onChange(newLocale);
-    }
-  };
-  const onClose = e => {
-    if (anchorEl.current?.contains(e.target)) {
-      return;
-    }
-    setOpen(false);
-  };
-  const ButtonComponent = showText ? Button : IconButton;
-  const handleEventProps = popperType === 'hover' ? {
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { use as z, useRef as L, useState as M, useMemo as N } from "react";
+import { Box as m, Button as w, IconButton as B, Typography as E, Popper as j, Paper as A, ClickAwayListener as R, MenuList as T, MenuItem as P } from "@mui/material";
+import { Icon as h } from "@iconify/react";
+import $ from "@iconify-icons/material-symbols/check";
+import H from "iconify-icons-material-symbols-400/language";
+import { LocaleContext as O } from "./context.js";
+import { styled as W } from "../Theme/index.js";
+import { mergeSx as q } from "../Util/style.js";
+function Z(t) {
+  var g;
+  const { showText: p = !0, popperProps: r = {}, popperType: d = "click", icon: c, size: f = 24, ...y } = t, { locale: l, changeLocale: I, languages: u } = z(O), a = L(null), [x, o] = M(!1), k = (e) => {
+    I(e), o(!1), typeof t.onChange == "function" && t.onChange(e);
+  }, C = (e) => {
+    var i;
+    (i = a.current) != null && i.contains(e.target) || o(!1);
+  }, S = p ? w : B, b = d === "hover" ? {
     onMouseEnter: () => {
-      setOpen(true);
+      o(!0);
     },
     onMouseLeave: () => {
-      setOpen(false);
+      o(!1);
     }
   } : {
     onClick: () => {
-      setOpen(!open);
-    }
-  };
-  const renderIcon = useMemo(() => {
-    if (Icon) {
-      return /*#__PURE__*/_jsx(Icon, {});
+      o(!x);
     }
-    return /*#__PURE__*/_jsx(IconifyIcon, {
-      icon: LanguageIcon,
-      fontSize: size,
-      style: {
-        transform: 'scale(1.10)'
-      }
-    });
-  }, [Icon, size]);
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    ...rest,
-    ...handleEventProps,
-    children: [/*#__PURE__*/_jsx(ButtonComponent, {
-      ref: anchorEl,
-      className: "trigger",
-      role: "button",
-      "aria-label": "Locale selector button",
-      children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        children: [renderIcon, showText ? /*#__PURE__*/_jsx(Typography, {
-          component: "strong",
-          className: "trigger-text",
-          children: languages.find(x => x.code === locale)?.name
-        }) : '']
-      })
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: open,
-      anchorEl: anchorEl.current,
-      ...popperProps,
-      // @ts-ignore
-      sx: mergeSx(
-      // @ts-ignore
-      {
-        zIndex: _theme => _theme.zIndex.tooltip + 10
-      },
-      // @ts-ignore
-      popperProps?.sx),
-      children: /*#__PURE__*/_jsx(Paper, {
-        variant: "outlined",
-        className: "locales",
-        sx: {
-          borderRadius: 1
-        },
-        children: /*#__PURE__*/_jsx(ClickAwayListener, {
-          onClickAway: onClose,
-          children: /*#__PURE__*/_jsx(MenuList, {
-            children: languages.map(({
-              code,
-              name
-            }) => {
-              return /*#__PURE__*/_jsxs(MenuItem, {
-                className: "locale-item",
-                onClick: () => onSelect(code),
-                sx: {
-                  fontSize: 16,
-                  fontStyle: 'normal',
-                  fontStretch: 'normal',
-                  lineHeight: 'normal',
-                  letterSpacing: '2px',
-                  textAlign: 'center',
-                  color: 'text.primary',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  padding: '16px',
-                  alignItems: 'center'
-                },
-                children: [/*#__PURE__*/_jsx(Box, {
-                  component: IconifyIcon,
-                  icon: CheckIcon,
-                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
+  }, v = N(() => c ? /* @__PURE__ */ n(c, {}) : /* @__PURE__ */ n(h, { icon: H, fontSize: f, style: { transform: "scale(1.10)" } }), [c, f]);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ s(D, { ...y, ...b, children: [
+      /* @__PURE__ */ n(S, { ref: a, className: "trigger", role: "button", "aria-label": "Locale selector button", children: /* @__PURE__ */ s(
+        m,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [
+            v,
+            p ? /* @__PURE__ */ n(E, { component: "strong", className: "trigger-text", children: (g = u.find((e) => e.code === l)) == null ? void 0 : g.name }) : ""
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ n(
+        j,
+        {
+          open: x,
+          anchorEl: a.current,
+          ...r,
+          sx: q(
+            // @ts-ignore
+            { zIndex: (e) => e.zIndex.tooltip + 10 },
+            // @ts-ignore
+            r == null ? void 0 : r.sx
+          ),
+          children: /* @__PURE__ */ n(
+            A,
+            {
+              variant: "outlined",
+              className: "locales",
+              sx: {
+                borderRadius: 1
+              },
+              children: /* @__PURE__ */ n(R, { onClickAway: C, children: /* @__PURE__ */ n(T, { children: u.map(({ code: e, name: i }) => /* @__PURE__ */ s(
+                P,
+                {
+                  className: "locale-item",
+                  onClick: () => k(e),
                   sx: {
-                    marginRight: 1,
-                    visibility: code === locale ? 'visible' : 'hidden'
-                  }
-                }), name]
-              }, code);
-            })
-          })
-        })
-      })
-    })]
-  });
+                    fontSize: 16,
+                    fontStyle: "normal",
+                    fontStretch: "normal",
+                    lineHeight: "normal",
+                    letterSpacing: "2px",
+                    textAlign: "center",
+                    color: "text.primary",
+                    cursor: "pointer",
+                    display: "flex",
+                    padding: "16px",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ n(
+                      m,
+                      {
+                        component: h,
+                        icon: $,
+                        className: e === l ? "check-icon check-icon-visible" : "check-icon",
+                        sx: {
+                          marginRight: 1,
+                          visibility: e === l ? "visible" : "hidden"
+                        }
+                      }
+                    ),
+                    i
+                  ]
+                },
+                e
+              )) }) })
+            }
+          )
+        }
+      )
+    ] })
+  );
 }
-const Wrapper = styled(Box)`
+const D = W(m)`
   display: inline-block;
 
   .trigger {
@@ -154,9 +118,10 @@ const Wrapper = styled(Box)`
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
-      color: ${({
-  theme
-}) => theme.palette.text.primary};
+      color: ${({ theme: t }) => t.palette.text.primary};
     }
   }
-`;
+`;
+export {
+  Z as default
+};

package/lib/Locale/util.d.ts

@@ -1,4 +1,4 @@
-import type { Locale, Translations } from '../type';
+import { Locale, Translations } from '../type';
 export declare const replace: (template: string | Function, data: Record<string, any>) => any;
 export declare const translate: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => any;
 export declare const t: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => any;

package/lib/Locale/util.js

@@ -1,25 +1,10 @@
-import get from 'lodash/get';
-/* eslint-disable no-prototype-builtins */
-export const replace = (template, data) => {
-  if (typeof template === 'function') {
-    return template(data);
-  }
-  return template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+import s from "lodash/get";
+const e = (n, r) => typeof n == "function" ? n(r) : n.replace(/{(\w*)}/g, (t, o) => r.hasOwnProperty(o) ? r[o] : ""), p = (n, r, t, o = "en", f = {}) => {
+  const i = n[t], c = s(i, r), u = s(n[o], r);
+  return !i || !c ? (console.warn(`Warning: no ${r} translation of ${t}`), o && u ? e(u, f) : r) : typeof n[t] == "function" || n[t].then ? e(u, f) : e(c, f);
+}, w = p;
+export {
+  e as replace,
+  w as t,
+  p as translate
 };
-export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
-  const translation = translations[locale];
-  const translationValue = get(translation, key);
-  const fallbackValue = get(translations[fallbackLocale], key);
-  if (!translation || !translationValue) {
-    console.warn(`Warning: no ${key} translation of ${locale}`);
-    if (fallbackLocale && fallbackValue) {
-      return replace(fallbackValue, data);
-    }
-    return key;
-  }
-  if (typeof translations[locale] === 'function' || translations[locale].then) {
-    return replace(fallbackValue, data);
-  }
-  return replace(translationValue, data);
-};
-export const t = translate;

package/lib/Logo/Logo.stories.d.ts

@@ -0,0 +1,22 @@
+export { default as DarkMode } from './demo/dark-mode';
+export { default as DarkModeLogoOnly } from './demo/dark-mode-logo-only';
+export { default as DarkModeHorizontal } from './demo/dark-mode-horizontal';
+export { default as WithStyling } from './demo/with-styling';
+export { default as LightMode } from './demo/light-mode';
+export { default as LightModeLogoOnly } from './demo/light-mode-logo-only';
+export { default as LightModeHorizontal } from './demo/light-mode-horizontal';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+        namespace design {
+            let type: string;
+            let url: string;
+        }
+    }
+}
+export default _default;