ezr-antd 1.0.0

package/es/config-provider/cssVariables.js

@@ -0,0 +1,75 @@
+import { generate } from '@ant-design/colors';
+import { TinyColor } from '@ctrl/tinycolor';
+import canUseDom from "rc-util/es/Dom/canUseDom";
+import { updateCSS } from "rc-util/es/Dom/dynamicCSS";
+import warning from '../_util/warning';
+const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
+export function getStyle(globalPrefixCls, theme) {
+  const variables = {};
+  const formatColor = (color, updater) => {
+    let clone = color.clone();
+    clone = (updater === null || updater === void 0 ? void 0 : updater(clone)) || clone;
+    return clone.toRgbString();
+  };
+  const fillColor = (colorVal, type) => {
+    const baseColor = new TinyColor(colorVal);
+    const colorPalettes = generate(baseColor.toRgbString());
+    variables[`${type}-color`] = formatColor(baseColor);
+    variables[`${type}-color-disabled`] = colorPalettes[1];
+    variables[`${type}-color-hover`] = colorPalettes[4];
+    variables[`${type}-color-active`] = colorPalettes[6];
+    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
+    variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
+    variables[`${type}-color-deprecated-border`] = colorPalettes[2];
+  };
+  // ================ Primary Color ================
+  if (theme.primaryColor) {
+    fillColor(theme.primaryColor, 'primary');
+    const primaryColor = new TinyColor(theme.primaryColor);
+    const primaryColors = generate(primaryColor.toRgbString());
+    // Legacy - We should use semantic naming standard
+    primaryColors.forEach((color, index) => {
+      variables[`primary-${index + 1}`] = color;
+    });
+    // Deprecated
+    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
+    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
+    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
+    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
+    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c => c.setAlpha(c.getAlpha() * 0.12));
+    const primaryActiveColor = new TinyColor(primaryColors[0]);
+    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setAlpha(c.getAlpha() * 0.3));
+    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c => c.darken(2));
+  }
+  // ================ Success Color ================
+  if (theme.successColor) {
+    fillColor(theme.successColor, 'success');
+  }
+  // ================ Warning Color ================
+  if (theme.warningColor) {
+    fillColor(theme.warningColor, 'warning');
+  }
+  // ================= Error Color =================
+  if (theme.errorColor) {
+    fillColor(theme.errorColor, 'error');
+  }
+  // ================= Info Color ==================
+  if (theme.infoColor) {
+    fillColor(theme.infoColor, 'info');
+  }
+  // Convert to css variables
+  const cssList = Object.keys(variables).map(key => `--${globalPrefixCls}-${key}: ${variables[key]};`);
+  return `
+  :root {
+    ${cssList.join('\n')}
+  }
+  `.trim();
+}
+export function registerTheme(globalPrefixCls, theme) {
+  const style = getStyle(globalPrefixCls, theme);
+  if (canUseDom()) {
+    updateCSS(style, `${dynamicStyleMark}-dynamic-theme`);
+  } else {
+    process.env.NODE_ENV !== "production" ? warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.') : void 0;
+  }
+}

package/es/config-provider/defaultRenderEmpty.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ComponentName = 'Table' | 'Table.filter' | 'List' | 'Select' | 'TreeSelect' | 'Cascader' | 'Transfer' | 'Mentions';
+interface EmptyProps {
+    componentName?: ComponentName;
+}
+declare const DefaultRenderEmpty: React.FC<EmptyProps>;
+export type RenderEmptyHandler = (componentName?: ComponentName) => React.ReactNode;
+export default DefaultRenderEmpty;

package/es/config-provider/defaultRenderEmpty.js

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useContext } from 'react';
+import { ConfigContext } from '.';
+import Empty from '../empty';
+const DefaultRenderEmpty = props => {
+  const {
+    componentName
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigContext);
+  const prefix = getPrefixCls('empty');
+  switch (componentName) {
+    case 'Table':
+    case 'List':
+      return /*#__PURE__*/React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE
+      });
+    case 'Select':
+    case 'TreeSelect':
+    case 'Cascader':
+    case 'Transfer':
+    case 'Mentions':
+      return /*#__PURE__*/React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        className: `${prefix}-small`
+      });
+    /**
+     * This type of component should satisfy the nullish coalescing operator(??) on the left-hand side.
+     * to let the component itself implement the logic.
+     * For example `Table.filter`.
+     */
+    case 'Table.filter':
+      // why `null`? legacy react16 node type `undefined` is not allowed.
+      return null;
+    default:
+      // Should never hit if we take all the component into consider.
+      return /*#__PURE__*/React.createElement(Empty, null);
+  }
+};
+export default DefaultRenderEmpty;

package/es/config-provider/hooks/useCSSVarCls.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This hook is only for cssVar to add root className for components.
+ * If root ClassName is needed, this hook could be refactored with `-root`
+ * @param prefixCls
+ */
+declare const useCSSVarCls: (prefixCls: string) => string;
+export default useCSSVarCls;

package/es/config-provider/hooks/useCSSVarCls.js

@@ -0,0 +1,11 @@
+import { useToken } from '../../theme/internal';
+/**
+ * This hook is only for cssVar to add root className for components.
+ * If root ClassName is needed, this hook could be refactored with `-root`
+ * @param prefixCls
+ */
+const useCSSVarCls = prefixCls => {
+  const [,,,, cssVar] = useToken();
+  return cssVar ? `${prefixCls}-css-var` : '';
+};
+export default useCSSVarCls;

package/es/config-provider/hooks/useConfig.d.ts

@@ -0,0 +1,5 @@
+declare function useConfig(): {
+    componentDisabled: boolean;
+    componentSize: import("../SizeContext").SizeType;
+};
+export default useConfig;

package/es/config-provider/hooks/useConfig.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import DisabledContext from '../DisabledContext';
+import SizeContext from '../SizeContext';
+function useConfig() {
+  const componentDisabled = useContext(DisabledContext);
+  const componentSize = useContext(SizeContext);
+  return {
+    componentDisabled,
+    componentSize
+  };
+}
+export default useConfig;

package/es/config-provider/hooks/useSize.d.ts

@@ -0,0 +1,3 @@
+import type { SizeType } from '../SizeContext';
+declare const useSize: <T>(customSize?: T | ((ctxSize: SizeType) => T)) => T;
+export default useSize;

package/es/config-provider/hooks/useSize.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import SizeContext from '../SizeContext';
+const useSize = customSize => {
+  const size = React.useContext(SizeContext);
+  const mergedSize = React.useMemo(() => {
+    if (!customSize) {
+      return size;
+    }
+    if (typeof customSize === 'string') {
+      return customSize !== null && customSize !== void 0 ? customSize : size;
+    }
+    if (customSize instanceof Function) {
+      return customSize(size);
+    }
+    return size;
+  }, [customSize, size]);
+  return mergedSize;
+};
+export default useSize;

package/es/config-provider/hooks/useTheme.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeConfig } from '../context';
+export default function useTheme(theme?: ThemeConfig, parentTheme?: ThemeConfig, config?: {
+    prefixCls?: string;
+}): ThemeConfig | undefined;

package/es/config-provider/hooks/useTheme.js

@@ -0,0 +1,46 @@
+import useMemo from "rc-util/es/hooks/useMemo";
+import isEqual from "rc-util/es/isEqual";
+import { devUseWarning } from '../../_util/warning';
+import { defaultConfig } from '../../theme/internal';
+import useThemeKey from './useThemeKey';
+export default function useTheme(theme, parentTheme, config) {
+  var _a, _b;
+  const warning = devUseWarning('ConfigProvider');
+  const themeConfig = theme || {};
+  const parentThemeConfig = themeConfig.inherit === false || !parentTheme ? Object.assign(Object.assign({}, defaultConfig), {
+    hashed: (_a = parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.hashed) !== null && _a !== void 0 ? _a : defaultConfig.hashed,
+    cssVar: parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.cssVar
+  }) : parentTheme;
+  const themeKey = useThemeKey();
+  if (process.env.NODE_ENV !== 'production') {
+    const cssVarEnabled = themeConfig.cssVar || parentThemeConfig.cssVar;
+    const validKey = !!(typeof themeConfig.cssVar === 'object' && ((_b = themeConfig.cssVar) === null || _b === void 0 ? void 0 : _b.key) || themeKey);
+    process.env.NODE_ENV !== "production" ? warning(!cssVarEnabled || validKey, 'breaking', 'Missing key in `cssVar` config. Please upgrade to React 18 or set `cssVar.key` manually in each ConfigProvider inside `cssVar` enabled ConfigProvider.') : void 0;
+  }
+  return useMemo(() => {
+    var _a, _b;
+    if (!theme) {
+      return parentTheme;
+    }
+    // Override
+    const mergedComponents = Object.assign({}, parentThemeConfig.components);
+    Object.keys(theme.components || {}).forEach(componentName => {
+      mergedComponents[componentName] = Object.assign(Object.assign({}, mergedComponents[componentName]), theme.components[componentName]);
+    });
+    const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
+    const mergedCssVar = ((_a = themeConfig.cssVar) !== null && _a !== void 0 ? _a : parentThemeConfig.cssVar) && Object.assign(Object.assign(Object.assign({
+      prefix: config === null || config === void 0 ? void 0 : config.prefixCls
+    }, typeof parentThemeConfig.cssVar === 'object' ? parentThemeConfig.cssVar : {}), typeof themeConfig.cssVar === 'object' ? themeConfig.cssVar : {}), {
+      key: typeof themeConfig.cssVar === 'object' && ((_b = themeConfig.cssVar) === null || _b === void 0 ? void 0 : _b.key) || cssVarKey
+    });
+    // Base token
+    return Object.assign(Object.assign(Object.assign({}, parentThemeConfig), themeConfig), {
+      token: Object.assign(Object.assign({}, parentThemeConfig.token), themeConfig.token),
+      components: mergedComponents,
+      cssVar: mergedCssVar
+    });
+  }, [themeConfig, parentThemeConfig], (prev, next) => prev.some((prevTheme, index) => {
+    const nextTheme = next[index];
+    return !isEqual(prevTheme, nextTheme, true);
+  }));
+}

package/es/config-provider/hooks/useThemeKey.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const useThemeKey: typeof React.useId;
+export default useThemeKey;

package/es/config-provider/hooks/useThemeKey.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+const fullClone = Object.assign({}, React);
+const {
+  useId
+} = fullClone;
+const useEmptyId = () => '';
+const useThemeKey = typeof useId === 'undefined' ? useEmptyId : useId;
+export default useThemeKey;

package/es/config-provider/index.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import type { WarningContextProps } from '../_util/warning';
+import type { Locale } from '../locale';
+import type { AlertConfig, BadgeConfig, ButtonConfig, CardConfig, CascaderConfig, CollapseConfig, ComponentStyleConfig, ConfigConsumerProps, CSPConfig, DatePickerConfig, DirectionType, DrawerConfig, FlexConfig, FloatButtonGroupConfig, FormConfig, ImageConfig, InputConfig, InputNumberConfig, ListConfig, MentionsConfig, MenuConfig, ModalConfig, NotificationConfig, PaginationConfig, PopupOverflow, RangePickerConfig, SelectConfig, SpaceConfig, SpinConfig, TableConfig, TabsConfig, TagConfig, TextAreaConfig, Theme, ThemeConfig, TimePickerConfig, TourConfig, TransferConfig, TreeSelectConfig, Variant, WaveConfig } from './context';
+import { ConfigConsumer, ConfigContext, defaultIconPrefixCls, defaultPrefixCls, Variants } from './context';
+import type { RenderEmptyHandler } from './defaultRenderEmpty';
+import useConfig from './hooks/useConfig';
+import type { SizeType } from './SizeContext';
+import SizeContext from './SizeContext';
+export type { Variant };
+export { Variants };
+export declare const warnContext: (componentName: string) => void;
+export { ConfigConsumer, ConfigContext, defaultPrefixCls, defaultIconPrefixCls, type ConfigConsumerProps, type CSPConfig, type DirectionType, type RenderEmptyHandler, type ThemeConfig, };
+export declare const configConsumerProps: string[];
+export interface ConfigProviderProps {
+    getTargetContainer?: () => HTMLElement | Window;
+    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+    prefixCls?: string;
+    iconPrefixCls?: string;
+    children?: React.ReactNode;
+    renderEmpty?: RenderEmptyHandler;
+    csp?: CSPConfig;
+    /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
+    autoInsertSpaceInButton?: boolean;
+    variant?: Variant;
+    form?: FormConfig;
+    input?: InputConfig;
+    inputNumber?: InputNumberConfig;
+    textArea?: TextAreaConfig;
+    select?: SelectConfig;
+    pagination?: PaginationConfig;
+    /**
+     * @descCN 语言包配置，语言包可到 `antd/locale` 目录下寻找。
+     * @descEN Language package setting, you can find the packages in `antd/locale`.
+     */
+    locale?: Locale;
+    componentSize?: SizeType;
+    componentDisabled?: boolean;
+    /**
+     * @descCN 设置布局展示方向。
+     * @descEN Set direction of layout.
+     * @default ltr
+     */
+    direction?: DirectionType;
+    space?: SpaceConfig;
+    splitter?: ComponentStyleConfig;
+    /**
+     * @descCN 设置 `false` 时关闭虚拟滚动。
+     * @descEN Close the virtual scrolling when setting `false`.
+     * @default true
+     */
+    virtual?: boolean;
+    /** @deprecated Please use `popupMatchSelectWidth` instead */
+    dropdownMatchSelectWidth?: boolean;
+    popupMatchSelectWidth?: boolean;
+    popupOverflow?: PopupOverflow;
+    theme?: ThemeConfig;
+    warning?: WarningContextProps;
+    alert?: AlertConfig;
+    anchor?: ComponentStyleConfig;
+    button?: ButtonConfig;
+    calendar?: ComponentStyleConfig;
+    carousel?: ComponentStyleConfig;
+    cascader?: CascaderConfig;
+    treeSelect?: TreeSelectConfig;
+    collapse?: CollapseConfig;
+    divider?: ComponentStyleConfig;
+    drawer?: DrawerConfig;
+    typography?: ComponentStyleConfig;
+    skeleton?: ComponentStyleConfig;
+    spin?: SpinConfig;
+    segmented?: ComponentStyleConfig;
+    statistic?: ComponentStyleConfig;
+    steps?: ComponentStyleConfig;
+    image?: ImageConfig;
+    layout?: ComponentStyleConfig;
+    list?: ListConfig;
+    mentions?: MentionsConfig;
+    modal?: ModalConfig;
+    progress?: ComponentStyleConfig;
+    result?: ComponentStyleConfig;
+    slider?: ComponentStyleConfig;
+    breadcrumb?: ComponentStyleConfig;
+    menu?: MenuConfig;
+    floatButtonGroup?: FloatButtonGroupConfig;
+    checkbox?: ComponentStyleConfig;
+    descriptions?: ComponentStyleConfig;
+    empty?: ComponentStyleConfig;
+    badge?: BadgeConfig;
+    radio?: ComponentStyleConfig;
+    rate?: ComponentStyleConfig;
+    switch?: ComponentStyleConfig;
+    transfer?: TransferConfig;
+    avatar?: ComponentStyleConfig;
+    message?: ComponentStyleConfig;
+    tag?: TagConfig;
+    table?: TableConfig;
+    card?: CardConfig;
+    tabs?: TabsConfig;
+    timeline?: ComponentStyleConfig;
+    timePicker?: TimePickerConfig;
+    upload?: ComponentStyleConfig;
+    notification?: NotificationConfig;
+    tree?: ComponentStyleConfig;
+    colorPicker?: ComponentStyleConfig;
+    datePicker?: DatePickerConfig;
+    rangePicker?: RangePickerConfig;
+    dropdown?: ComponentStyleConfig;
+    flex?: FlexConfig;
+    /**
+     * Wave is special component which only patch on the effect of component interaction.
+     */
+    wave?: WaveConfig;
+    tour?: TourConfig;
+}
+type holderRenderType = (children: React.ReactNode) => React.ReactNode;
+declare function getGlobalIconPrefixCls(): string;
+interface GlobalConfigProps {
+    prefixCls?: string;
+    iconPrefixCls?: string;
+    theme?: Theme | ThemeConfig;
+    holderRender?: holderRenderType;
+}
+declare const setGlobalConfig: (props: GlobalConfigProps) => void;
+export declare const globalConfig: () => {
+    getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
+    getIconPrefixCls: typeof getGlobalIconPrefixCls;
+    getRootPrefixCls: () => string;
+    getTheme: () => ThemeConfig;
+    holderRender: holderRenderType | undefined;
+};
+declare const ConfigProvider: React.FC<ConfigProviderProps> & {
+    /** @private internal Usage. do not use in your production */
+    ConfigContext: typeof ConfigContext;
+    /** @deprecated Please use `ConfigProvider.useConfig().componentSize` instead */
+    SizeContext: typeof SizeContext;
+    config: typeof setGlobalConfig;
+    useConfig: typeof useConfig;
+};
+export default ConfigProvider;