@broxus/react-uikit 0.9.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cjs/components/Accordion/Item.d.ts +2 -1
  2. package/dist/cjs/components/Alert/index.d.ts +2 -2
  3. package/dist/cjs/components/Align/Align.d.ts +2 -2
  4. package/dist/cjs/components/Article/context.js +1 -0
  5. package/dist/cjs/components/Card/Card.js +4 -4
  6. package/dist/cjs/components/Card/context.d.ts +2 -2
  7. package/dist/cjs/components/Card/context.js +1 -0
  8. package/dist/cjs/components/ConfigProvider/index.js +1 -0
  9. package/dist/cjs/components/Control/Checkbox/CheckboxGroupContext.js +1 -0
  10. package/dist/cjs/components/Control/Radio/RadioGroupContext.js +1 -0
  11. package/dist/cjs/components/Control/Select/index.d.ts +1 -1
  12. package/dist/cjs/components/Flex/Flex.d.ts +2 -2
  13. package/dist/cjs/components/Flex/Flex.js +2 -2
  14. package/dist/cjs/components/Flex/context.js +1 -0
  15. package/dist/cjs/components/Form/context.js +1 -0
  16. package/dist/cjs/components/Nav/context/IdContext.js +1 -0
  17. package/dist/cjs/components/Nav/context/NavContext.js +1 -0
  18. package/dist/cjs/components/Nav/context/PathContext.js +1 -0
  19. package/dist/cjs/components/Nav/context/PrivateContext.js +1 -0
  20. package/dist/cjs/components/Section/index.js +3 -3
  21. package/dist/cjs/components/Tabs/hooks/index.d.ts +0 -1
  22. package/dist/cjs/components/Tabs/hooks/index.js +0 -1
  23. package/dist/cjs/components/Tabs/hooks/useAnimateConfig.d.ts +1 -1
  24. package/dist/cjs/components/Tabs/index.d.ts +22 -5
  25. package/dist/cjs/components/Tabs/index.js +7 -3
  26. package/dist/cjs/components/Text/index.js +7 -7
  27. package/dist/cjs/components/Tile/index.js +3 -3
  28. package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
  29. package/dist/esm/components/Accordion/Item.d.ts +2 -1
  30. package/dist/esm/components/Alert/index.d.ts +2 -2
  31. package/dist/esm/components/Align/Align.d.ts +2 -2
  32. package/dist/esm/components/Article/context.js +1 -0
  33. package/dist/esm/components/Card/Card.js +4 -4
  34. package/dist/esm/components/Card/context.d.ts +2 -2
  35. package/dist/esm/components/Card/context.js +1 -0
  36. package/dist/esm/components/ConfigProvider/index.js +1 -0
  37. package/dist/esm/components/Control/Checkbox/CheckboxGroupContext.js +1 -0
  38. package/dist/esm/components/Control/Radio/RadioGroupContext.js +1 -0
  39. package/dist/esm/components/Control/Select/index.d.ts +1 -1
  40. package/dist/esm/components/Flex/Flex.d.ts +2 -2
  41. package/dist/esm/components/Flex/Flex.js +2 -2
  42. package/dist/esm/components/Flex/context.js +1 -0
  43. package/dist/esm/components/Form/context.js +1 -0
  44. package/dist/esm/components/Nav/context/IdContext.js +1 -0
  45. package/dist/esm/components/Nav/context/NavContext.js +1 -0
  46. package/dist/esm/components/Nav/context/PathContext.js +1 -0
  47. package/dist/esm/components/Nav/context/PrivateContext.js +1 -0
  48. package/dist/esm/components/Section/index.js +3 -3
  49. package/dist/esm/components/Tabs/hooks/index.d.ts +0 -1
  50. package/dist/esm/components/Tabs/hooks/index.js +0 -1
  51. package/dist/esm/components/Tabs/hooks/useAnimateConfig.d.ts +1 -1
  52. package/dist/esm/components/Tabs/index.d.ts +22 -5
  53. package/dist/esm/components/Tabs/index.js +8 -4
  54. package/dist/esm/components/Text/index.js +7 -7
  55. package/dist/esm/components/Tile/index.js +3 -3
  56. package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
  57. package/package.json +13 -13
  58. package/dist/cjs/components/Tabs/hooks/useLegacyItems.d.ts +0 -4
  59. package/dist/cjs/components/Tabs/hooks/useLegacyItems.js +0 -56
  60. package/dist/esm/components/Tabs/hooks/useLegacyItems.d.ts +0 -4
  61. package/dist/esm/components/Tabs/hooks/useLegacyItems.js +0 -26
@@ -1,6 +1,7 @@
1
1
  import { type CollapsePanelProps } from 'rc-collapse';
2
2
  import * as React from 'react';
3
- export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
3
+ export interface AccordionItemProps extends React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>> {
4
+ }
4
5
  /**
5
6
  * Use Accordion items props instead
6
7
  * @deprecated
@@ -9,7 +9,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
9
9
  onClose?: VoidFunction;
10
10
  onClosed?: MotionEndEventHandler;
11
11
  }
12
- export type AlertRef = {
12
+ export interface AlertRef {
13
13
  close: VoidFunction;
14
- };
14
+ }
15
15
  export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { type PolymorphicProps } from '../../components/Component';
3
3
  import { type Direction } from '../../types';
4
- export type AlignOwnProps = {
4
+ export interface AlignOwnProps {
5
5
  direction?: Direction;
6
6
  prefixCls?: string;
7
7
  side?: 'left' | 'right';
8
- };
8
+ }
9
9
  export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
10
10
  declare const defaultElement = "div";
11
11
  export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): React.JSX.Element;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -36,7 +36,7 @@ const ConfigProvider_1 = require("../../components/ConfigProvider");
36
36
  const defaultElement = 'div';
37
37
  function Card(props) {
38
38
  const config = (0, ConfigProvider_1.useConfig)();
39
- const { asBody, className, kind, colorMode = kind !== 'default' && kind !== undefined
39
+ const { asBody, className, kind, colorMode = kind && kind !== 'default'
40
40
  // @ts-ignore
41
41
  ? config[`card${(0, js_utils_1.capitalizeFirstLetter)(kind)}ColorMode`]
42
42
  : undefined, hoverable, prefixCls = config.prefixCls, size, ...restProps } = props;
@@ -48,11 +48,11 @@ function Card(props) {
48
48
  }), [rootCls]);
49
49
  return (React.createElement(context_1.CardContext.Provider, { value: context },
50
50
  React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
51
- [`${rootCls}-${kind}`]: kind !== undefined,
52
- [`${rootCls}-${size}`]: size !== undefined,
51
+ [`${rootCls}-${kind}`]: kind && ['default', 'primary', 'secondary', 'tertiary'].includes(kind),
52
+ [`${rootCls}-${size}`]: size && ['small', 'large'].includes(size),
53
53
  [`${rootCls}-body`]: asBody,
54
54
  [`${rootCls}-hover`]: hoverable,
55
- [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
55
+ [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
56
56
  }, className), component: defaultElement, ...restProps })));
57
57
  }
58
58
  exports.Card = Card;
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- export type CardContextConsumerProps = {
2
+ export interface CardContextConsumerProps {
3
3
  getRootCls(): string | undefined;
4
- };
4
+ }
5
5
  export declare const CardContext: React.Context<CardContextConsumerProps>;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -15,7 +15,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
15
15
  showArrow?: boolean;
16
16
  }
17
17
  export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
18
- ref?: React.Ref<BaseSelectRef> | undefined;
18
+ ref?: React.Ref<BaseSelectRef>;
19
19
  }) => React.ReactElement) & {
20
20
  SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
21
21
  Option: typeof Option;
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { type PolymorphicProps } from '../../components/Component';
3
3
  import { type BreakpointsConfig } from '../../types';
4
- export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'middle' | 'end';
5
- export type FlexAlignItems = 'stretch' | 'start' | 'middle' | 'end';
4
+ export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'center' | 'end';
5
+ export type FlexAlignItems = 'stretch' | 'start' | 'center' | 'end';
6
6
  export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
7
7
  export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
8
8
  export type FlexJustifyContent = 'start' | 'center' | 'end' | 'between' | 'around';
@@ -38,13 +38,13 @@ const alignContentMap = new Map([
38
38
  ['around', 'around'],
39
39
  ['between', 'between'],
40
40
  ['end', 'right'],
41
- ['middle', 'middle'],
41
+ ['center', 'middle'],
42
42
  ['start', 'left'],
43
43
  ['stretch', 'stretch'],
44
44
  ]);
45
45
  const alignItemsMap = new Map([
46
46
  ['end', 'bottom'],
47
- ['middle', 'middle'],
47
+ ['center', 'middle'],
48
48
  ['start', 'top'],
49
49
  ['stretch', 'stretch'],
50
50
  ]);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
4
  if (k2 === undefined) k2 = k;
4
5
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -35,11 +35,11 @@ require("./index.scss");
35
35
  const defaultElement = 'section';
36
36
  function Section(props) {
37
37
  const config = (0, ConfigProvider_1.useConfig)();
38
- const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
38
+ const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
39
39
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
40
40
  return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
41
- [`${rootCls}-${size}`]: size !== undefined,
42
- [`${rootCls}-${kind}`]: kind !== undefined,
41
+ [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
42
+ [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
43
43
  [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
44
44
  }, className), component: defaultElement, ...restProps }));
45
45
  }
@@ -1,2 +1 @@
1
1
  export * from '../../../components/Tabs/hooks/useAnimateConfig';
2
- export * from '../../../components/Tabs/hooks/useLegacyItems';
@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("../../../components/Tabs/hooks/useAnimateConfig"), exports);
18
- __exportStar(require("../../../components/Tabs/hooks/useLegacyItems"), exports);
@@ -1,3 +1,3 @@
1
- import { type AnimatedConfig } from 'rc-tabs/lib/interface';
1
+ import { type AnimatedConfig } from 'rc-tabs/es/interface';
2
2
  import { type TabsProps } from '../../../components/Tabs';
3
3
  export declare function useAnimateConfig(prefixCls: string, animated?: TabsProps['animated']): AnimatedConfig;
@@ -1,16 +1,33 @@
1
1
  import { type TabsProps as RcTabsProps } from 'rc-tabs';
2
- import { type Tab, type TabPosition as TabsPosition } from 'rc-tabs/lib/interface';
3
2
  import * as React from 'react';
4
3
  import './index.scss';
5
- export { type Tab };
4
+ export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
5
+ export interface Tab {
6
+ active?: boolean;
7
+ animated?: boolean;
8
+ children?: React.ReactNode;
9
+ className?: string;
10
+ closable?: boolean;
11
+ closeIcon?: React.ReactNode;
12
+ destroyInactiveTabPane?: boolean;
13
+ disabled?: boolean;
14
+ forceRender?: boolean;
15
+ icon?: React.ReactNode;
16
+ id?: string;
17
+ key: string;
18
+ label: React.ReactNode;
19
+ prefixCls?: string;
20
+ style?: React.CSSProperties;
21
+ tabKey?: string;
22
+ }
6
23
  export type TabType = 'line' | 'card' | 'editable-card';
7
- export { type TabsPosition };
8
- export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
24
+ export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | 'tabPosition'> {
9
25
  addIcon?: React.ReactNode;
10
26
  centered?: boolean;
11
- children?: React.ReactNode;
12
27
  hideAdd?: boolean;
28
+ items?: Tab[];
13
29
  size?: 'medium' | 'large';
30
+ tabPosition?: TabsPosition;
14
31
  type?: TabType;
15
32
  onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
16
33
  }
@@ -37,7 +37,7 @@ const utils_1 = require("../../utils");
37
37
  require("./index.scss");
38
38
  function Tabs(props) {
39
39
  const config = (0, ConfigProvider_1.useConfig)();
40
- const { addIcon, animated, centered, children, className, direction, hideAdd, items, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
40
+ const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
41
41
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
42
42
  const editable = React.useMemo(() => (type === 'editable-card'
43
43
  ? {
@@ -51,11 +51,15 @@ function Tabs(props) {
51
51
  },
52
52
  }
53
53
  : undefined), [addIcon, hideAdd, onEdit, type]);
54
- return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: (0, hooks_1.useLegacyItems)(items, children), moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
54
+ return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: items, ...restProps, className: (0, classnames_1.default)({
55
55
  [`${rootCls}-${size}`]: size,
56
56
  [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
57
57
  [`${rootCls}-editable-card`]: type === 'editable-card',
58
58
  [`${rootCls}-centered`]: centered,
59
- }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
59
+ }, className), editable: editable, more: {
60
+ icon: React.createElement(Icon_1.Icon, { icon: "more_horizontal" }),
61
+ transitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
62
+ ...more,
63
+ }, prefixCls: rootCls }));
60
64
  }
61
65
  exports.Tabs = Tabs;
@@ -45,13 +45,13 @@ function Text(props) {
45
45
  : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'column-1', column)), [column, config.prefixCls, prefixCls]);
46
46
  return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(columnClassName, alignClassName, {
47
47
  [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
48
- [`${rootCls}-${color}`]: color !== undefined,
49
- [`${rootCls}-${kind}`]: kind !== undefined,
50
- [`${rootCls}-${size}`]: size !== undefined,
51
- [`${rootCls}-${transform}`]: transform !== undefined,
52
- [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,
53
- [`${rootCls}-${weight}`]: weight !== undefined,
54
- [`${rootCls}-${wrap}`]: wrap !== undefined,
48
+ [`${rootCls}-${color}`]: color && ['muted', 'emphasis', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(color),
49
+ [`${rootCls}-${kind}`]: kind && ['meta', 'lead', 'base'].includes(kind),
50
+ [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large'].includes(size),
51
+ [`${rootCls}-${transform}`]: transform && ['capitalize', 'uppercase', 'lowercase'].includes(transform),
52
+ [`${rootCls}-${verticalAlign}`]: verticalAlign && ['top', 'middle', 'bottom', 'baseline'].includes(verticalAlign),
53
+ [`${rootCls}-${weight}`]: weight && ['thin', 'light', 'normal', 'medium', 'semibold', 'bold', 'lighter', 'bolder'].includes(weight),
54
+ [`${rootCls}-${wrap}`]: wrap && ['truncate', 'break', 'nowrap'].includes(wrap),
55
55
  [`${rootCls}-decoration-none`]: decoration === 'none',
56
56
  [`${rootCls}-italic`]: italic,
57
57
  }, className), component: defaultElement, ...restProps }));
@@ -35,11 +35,11 @@ require("./index.scss");
35
35
  const defaultElement = 'div';
36
36
  function Tile(props) {
37
37
  const config = (0, ConfigProvider_1.useConfig)();
38
- const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
38
+ const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
39
39
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
40
40
  return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
41
- [`${rootCls}-${size}`]: size !== undefined,
42
- [`${rootCls}-${kind}`]: kind !== undefined,
41
+ [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
42
+ [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
43
43
  [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
44
44
  }, className), component: defaultElement, ...restProps }));
45
45
  }