@dtjoy/dt-design 1.0.6 → 1.0.8

package/esm/table/style/sticky.less

@@ -0,0 +1,55 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+@table-scroll-thumb-bg: #c1c1c1;
+@table-scroll-thumb-bg-hover: #a8a8a8;
+@table-scroll-thumb-size: 6px;
+@table-scroll-bg: #fafafa;
+@sticky-scroll-bar-border-radius: @border-radius-base;
+@opacity-loading: 0.6;
+
+@motion-duration-slow: 0.3s;
+
+.@{table-prefix-cls}-wrapper {
+    .@{table-prefix-cls}-sticky {
+        &-holder {
+            position: sticky;
+
+            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
+            background: @background-color-base;
+        }
+
+        &-scroll {
+            position: sticky;
+            bottom: 0;
+
+            height: @table-scroll-thumb-size !important;
+            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
+            display: flex;
+            align-items: center;
+            background: @table-scroll-bg;
+            border-top: @border-width-base @border-style-base @border-color-base;
+            opacity: @opacity-loading;
+
+            &:hover {
+                transform-origin: center bottom;
+            }
+
+            &-bar {
+                height: @table-scroll-thumb-size;
+                background-color: @table-scroll-thumb-bg;
+                border-radius: @sticky-scroll-bar-border-radius;
+
+                transition: all @motion-duration-slow, transform 0s;
+                position: absolute;
+                bottom: 0;
+
+                &:hover,
+                &-active {
+                    background-color: @table-scroll-thumb-bg-hover;
+                }
+            }
+        }
+    }
+}

package/esm/table/style/virtual.less

@@ -0,0 +1,65 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+.@{table-prefix-cls}-wrapper {
+    .@{table-prefix-cls}-tbody-virtual {
+        .@{table-prefix-cls}-tbody-virtual-holder-inner {
+            & > .@{table-prefix-cls}-row,
+            & > div:not(.@{table-prefix-cls}-row) > .@{table-prefix-cls}-row {
+                display: flex;
+                box-sizing: border-box;
+                width: 100%;
+            }
+        }
+
+        .@{table-prefix-cls}-cell {
+            border-bottom: @border-width-base @border-style-base @border-color-base;
+            transition: background 0.2s;
+        }
+
+        .@{table-prefix-cls}-expanded-row {
+            .@{table-prefix-cls}-expanded-row-cell.@{table-prefix-cls}-expanded-row-cell-fixed {
+                position: sticky;
+                left: 0;
+                overflow: hidden;
+
+                width: calc(var(--virtual-width) - @border-width-base);
+                border-right: none;
+            }
+        }
+    }
+
+    .@{table-prefix-cls}-bordered {
+        .@{table-prefix-cls}-tbody-virtual {
+            &:after {
+                content: '';
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-bottom: @border-width-base @border-style-base @border-color-base;
+                position: absolute;
+            }
+
+            .@{table-prefix-cls}-cell {
+                border-right: @border-width-base @border-style-base @border-color-base;
+
+                &.@{table-prefix-cls}-cell-fix-right-first:before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: calc(-@border-width-base);
+                    border-left: @border-width-base @border-style-base @border-color-base;
+                }
+            }
+        }
+
+        &.@{table-prefix-cls}-virtual {
+            .@{table-prefix-cls}-placeholder .@{table-prefix-cls}-cell {
+                border-right: @border-width-base @border-style-base @border-color-base;
+                border-bottom: @border-width-base @border-style-base @border-color-base;
+            }
+        }
+    }
+}

package/esm/table/util.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { AnyObject } from '../_util/type';
+import type { ColumnTitle, ColumnTitleProps, ColumnType, Key } from './interface';
+export declare const getColumnKey: <RecordType extends AnyObject = AnyObject>(column: ColumnType<RecordType>, defaultKey: string) => Key;
+export declare function getColumnPos(index: number, pos?: string): string;
+export declare const renderColumnTitle: <RecordType extends AnyObject = AnyObject>(title: ColumnTitle<RecordType>, props: ColumnTitleProps<RecordType>) => import("react").ReactNode;
+/**
+ * Safe get column title
+ *
+ * Should filter [object Object]
+ *
+ * @param title
+ */
+export declare const safeColumnTitle: <RecordType extends AnyObject = AnyObject>(title: ColumnTitle<RecordType>, props: ColumnTitleProps<RecordType>) => import("react").ReactNode;

package/esm/table/util.js

@@ -0,0 +1,33 @@
+export var getColumnKey = function getColumnKey(column, defaultKey) {
+  if ('key' in column && column.key !== undefined && column.key !== null) {
+    return column.key;
+  }
+  if (column.dataIndex) {
+    return Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex;
+  }
+  return defaultKey;
+};
+export function getColumnPos(index, pos) {
+  return pos ? "".concat(pos, "-").concat(index) : "".concat(index);
+}
+export var renderColumnTitle = function renderColumnTitle(title, props) {
+  if (typeof title === 'function') {
+    return title(props);
+  }
+  return title;
+};
+
+/**
+ * Safe get column title
+ *
+ * Should filter [object Object]
+ *
+ * @param title
+ */
+export var safeColumnTitle = function safeColumnTitle(title, props) {
+  var res = renderColumnTitle(title, props);
+  if (Object.prototype.toString.call(res) === '[object Object]') {
+    return '';
+  }
+  return res;
+};

package/lib/_util/easings.d.ts

@@ -0,0 +1 @@
+export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;

package/lib/_util/easings.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.easeInOutCubic = easeInOutCubic;
+function easeInOutCubic(t, b, c, d) {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  }
+  // biome-ignore lint: it is a common easing function
+  return cc / 2 * ((t -= 2) * t * t + 2) + b;
+}

package/lib/_util/extendsObject.d.ts

@@ -0,0 +1,4 @@
+declare function mergeProps<A, B>(a: A, b: B): B & A;
+declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+export default mergeProps;

package/lib/_util/extendsObject.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function mergeProps(...items) {
+  const ret = {};
+  items.forEach(item => {
+    if (item) {
+      Object.keys(item).forEach(key => {
+        if (item[key] !== undefined) {
+          ret[key] = item[key];
+        }
+      });
+    }
+  });
+  return ret;
+}
+var _default = exports.default = mergeProps;

package/lib/_util/gapSize.d.ts

@@ -1,3 +1,3 @@
-import { SizeType } from 'antd/es/config-provider/SizeContext';
-export declare function isPresetSize(size?: SizeType | string | number): size is SizeType;
-export declare function isValidGapNumber(size?: SizeType | string | number): size is number;
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+export declare function isPresetSize(size?: SizeType | string | number): size is SizeType;
+export declare function isValidGapNumber(size?: SizeType | string | number): size is number;

package/lib/_util/getScroll.d.ts

@@ -0,0 +1,3 @@
+export declare function isWindow(obj: any): obj is Window;
+declare const getScroll: (target: HTMLElement | Window | Document | null) => number;
+export default getScroll;

package/lib/_util/getScroll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.isWindow = isWindow;
+var _isNonNullable = _interopRequireDefault(require("./isNonNullable"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isWindow(obj) {
+  return (0, _isNonNullable.default)(obj) && obj === obj.window;
+}
+const getScroll = target => {
+  if (typeof window === 'undefined') {
+    /* istanbul ignore next */
+    return 0;
+  }
+  let result = 0;
+  if (isWindow(target)) {
+    result = target.pageYOffset;
+  } else if (target instanceof Document) {
+    result = target.documentElement.scrollTop;
+  } else if (target instanceof HTMLElement) {
+    result = target.scrollTop;
+  } else if (target) {
+    // According to the type inference, the `target` is `never` type.
+    // Since we configured the loose mode type checking, and supports mocking the target with such shape below::
+    //    `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
+    //    the program may falls into this branch.
+    // Check the corresponding tests for details. Don't sure what is the real scenario this happens.
+    /* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
+    result = target['scrollTop'];
+  }
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = (target.ownerDocument ?? target).documentElement?.scrollTop;
+  }
+  return result;
+};
+var _default = exports.default = getScroll;

package/lib/_util/hooks/index.d.ts

@@ -1 +1,4 @@
-export * from './useOrientation';
+export * from './useForceUpdate';
+export * from './useOrientation';
+export * from './useProxyImperativeHandle';
+export * from './useSyncState';

package/lib/_util/hooks/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useForceUpdate = require("./useForceUpdate");
+Object.keys(_useForceUpdate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useForceUpdate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useForceUpdate[key];
+    }
+  });
+});
 var _useOrientation = require("./useOrientation");
 Object.keys(_useOrientation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -13,4 +24,26 @@ Object.keys(_useOrientation).forEach(function (key) {
       return _useOrientation[key];
     }
   });
+});
+var _useProxyImperativeHandle = require("./useProxyImperativeHandle");
+Object.keys(_useProxyImperativeHandle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useProxyImperativeHandle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useProxyImperativeHandle[key];
+    }
+  });
+});
+var _useSyncState = require("./useSyncState");
+Object.keys(_useSyncState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSyncState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSyncState[key];
+    }
+  });
 });

package/lib/_util/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useForceUpdate: () => [any, React.DispatchWithoutAction];

package/lib/_util/hooks/useForceUpdate.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useForceUpdate = () => {
+  return _react.default.useReducer(ori => ori + 1, 0);
+};
+exports.useForceUpdate = useForceUpdate;

package/lib/_util/hooks/useOrientation.d.ts

@@ -1,2 +1,2 @@
-export declare type Orientation = 'horizontal' | 'vertical';
-export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];
+export type Orientation = 'horizontal' | 'vertical';
+export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];

package/lib/_util/hooks/useProxyImperativeHandle.d.ts

@@ -0,0 +1,4 @@
+import type { Ref } from 'react';
+export declare const useProxyImperativeHandle: <NativeELementType extends HTMLElement, ReturnRefType extends {
+    nativeElement: NativeELementType;
+}>(ref: Ref<any> | undefined, init: () => ReturnRefType) => void;

package/lib/_util/hooks/useProxyImperativeHandle.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProxyImperativeHandle = void 0;
+var _react = require("react");
+const fillProxy = (element, handler) => {
+  element._dtProxy = element._dtProxy || {};
+  Object.keys(handler).forEach(key => {
+    if (!(key in element._dtProxy)) {
+      const ori = element[key];
+      element._dtProxy[key] = ori;
+      element[key] = handler[key];
+    }
+  });
+  return element;
+};
+const useProxyImperativeHandle = (ref, init) => {
+  return (0, _react.useImperativeHandle)(ref, () => {
+    const refObj = init();
+    const {
+      nativeElement
+    } = refObj;
+    if (typeof Proxy !== 'undefined') {
+      return new Proxy(nativeElement, {
+        get(obj, prop) {
+          if (refObj[prop]) {
+            return refObj[prop];
+          }
+          return Reflect.get(obj, prop);
+        }
+      });
+    }
+
+    // Fallback of IE
+    return fillProxy(nativeElement, refObj);
+  });
+};
+exports.useProxyImperativeHandle = useProxyImperativeHandle;

package/lib/_util/hooks/useSyncState.d.ts

@@ -0,0 +1,3 @@
+type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
+export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
+export {};

package/lib/_util/hooks/useSyncState.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSyncState = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useForceUpdate = require("./useForceUpdate");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useSyncState = initialValue => {
+  const ref = React.useRef(initialValue);
+  const [, forceUpdate] = (0, _useForceUpdate.useForceUpdate)();
+  return [() => ref.current, newValue => {
+    ref.current = newValue;
+    forceUpdate();
+  }];
+};
+exports.useSyncState = useSyncState;

package/lib/_util/index.d.ts

@@ -1,3 +1,3 @@
-import { TooltipProps } from 'antd';
-export declare type LabelTooltipType = TooltipProps | TooltipProps['title'];
-export declare function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null;
+import type { TooltipProps } from 'antd';
+export type LabelTooltipType = TooltipProps | TooltipProps['title'];
+export declare function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null;

package/lib/_util/isNonNullable.d.ts

@@ -1,2 +1,2 @@
-declare const isNonNullable: <T>(val: T) => val is NonNullable<T>;
-export default isNonNullable;
+declare const isNonNullable: <T>(val: T) => val is NonNullable<T>;
+export default isNonNullable;

package/lib/_util/scrollTo.d.ts

@@ -0,0 +1,10 @@
+interface ScrollToOptions {
+    /** Scroll container, default as window */
+    getContainer?: () => HTMLElement | Window | Document;
+    /** Scroll end callback */
+    callback?: () => void;
+    /** Animation duration, default as 450 */
+    duration?: number;
+}
+export default function scrollTo(y: number, options?: ScrollToOptions): () => void;
+export {};

package/lib/_util/scrollTo.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = scrollTo;
+var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
+var _easings = require("./easings");
+var _getScroll = _interopRequireWildcard(require("./getScroll"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function scrollTo(y, options = {}) {
+  const {
+    getContainer = () => window,
+    callback,
+    duration = 450
+  } = options;
+  const container = getContainer();
+  const scrollTop = (0, _getScroll.default)(container);
+  const startTime = Date.now();
+  let rafId;
+  const frameFunc = () => {
+    const timestamp = Date.now();
+    const time = timestamp - startTime;
+    const nextScrollTop = (0, _easings.easeInOutCubic)(time > duration ? duration : time, scrollTop, y, duration);
+    if ((0, _getScroll.isWindow)(container)) {
+      container.scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof Document || container.constructor.name === 'HTMLDocument') {
+      container.documentElement.scrollTop = nextScrollTop;
+    } else {
+      container.scrollTop = nextScrollTop;
+    }
+    if (time < duration) {
+      rafId = (0, _raf.default)(frameFunc);
+    } else if (typeof callback === 'function') {
+      callback();
+    }
+  };
+  rafId = (0, _raf.default)(frameFunc);
+  return () => {
+    _raf.default.cancel(rafId);
+  };
+}

package/lib/_util/type.d.ts

@@ -1,52 +1,52 @@
-import type React from 'react';
-export declare type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-/** https://github.com/Microsoft/TypeScript/issues/29729 */
-export declare type LiteralUnion<T, U extends Primitive = string> = T | (U & Record<never, never>);
-export declare type AnyObject = Record<string, any>;
-export declare type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
-/**
- * Get component props
- * @example
- * ```ts
- * import { Checkbox } from '@dtjoy/dt-design'
- * import type { GetProps } from '@dtjoy/dt-design';
- *
- * type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
- * ```
- */
-export declare type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
-/**
- * Get component props by component name
- * @example
- * ```ts
- * import { Select } from '@dtjoy/dt-design';
- * import type { GetProp, SelectProps } from '@dtjoy/dt-design';
- *
- * type SelectOption1 = GetProp<SelectProps, 'options'>[number];
- * // or
- * type SelectOption2 = GetProp<typeof Select, 'options'>[number];
- *
- * const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
- *  // Do something
- * };
- * ```
- */
-export declare type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
-declare type ReactRefComponent<Props extends {
-    ref?: React.Ref<any> | string;
-}> = (props: Props) => React.ReactNode;
-declare type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
-/**
- * Get component ref
- * @example
- * ```ts
- * import { Input } from '@dtjoy/dt-design';
- * import type { GetRef } from '@dtjoy/dt-design';
- *
- * type InputRef = GetRef<typeof Input>;
- * ```
- */
-export declare type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
-export declare type GetContextProps<T> = T extends React.Context<infer P> ? P : never;
-export declare type GetContextProp<T extends React.Context<any>, PropName extends keyof GetContextProps<T>> = NonNullable<GetContextProps<T>[PropName]>;
-export {};
+import type React from 'react';
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export type LiteralUnion<T, U extends Primitive = string> = T | (U & Record<never, never>);
+export type AnyObject = Record<PropertyKey, any>;
+export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+/**
+ * Get component props
+ * @example
+ * ```ts
+ * import { Checkbox } from '@dtjoy/dt-design'
+ * import type { GetProps } from '@dtjoy/dt-design';
+ *
+ * type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
+ * ```
+ */
+export type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
+/**
+ * Get component props by component name
+ * @example
+ * ```ts
+ * import { Select } from '@dtjoy/dt-design';
+ * import type { GetProp, SelectProps } from '@dtjoy/dt-design';
+ *
+ * type SelectOption1 = GetProp<SelectProps, 'options'>[number];
+ * // or
+ * type SelectOption2 = GetProp<typeof Select, 'options'>[number];
+ *
+ * const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
+ *  // Do something
+ * };
+ * ```
+ */
+export type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
+type ReactRefComponent<Props extends {
+    ref?: React.Ref<any> | string;
+}> = (props: Props) => React.ReactNode;
+type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+/**
+ * Get component ref
+ * @example
+ * ```ts
+ * import { Input } from '@dtjoy/dt-design';
+ * import type { GetRef } from '@dtjoy/dt-design';
+ *
+ * type InputRef = GetRef<typeof Input>;
+ * ```
+ */
+export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
+export type GetContextProps<T> = T extends React.Context<infer P> ? P : never;
+export type GetContextProp<T extends React.Context<any>, PropName extends keyof GetContextProps<T>> = NonNullable<GetContextProps<T>[PropName]>;
+export {};