@jetbrains/ring-ui 7.0.0-beta.7 → 7.0.0-beta.9

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 (12) hide show
  1. package/components/breadcrumbs/breadcrumbs.js +2 -3
  2. package/components/button/button.css +5 -1
  3. package/components/global/theme.d.ts +4 -2
  4. package/components/global/theme.js +6 -3
  5. package/components/icon/icon.css +1 -1
  6. package/components/input/input.css +1 -1
  7. package/components/select/select.css +0 -2
  8. package/components/table/header.d.ts +1 -8
  9. package/components/tag/tag.css +1 -1
  10. package/components/tooltip/tooltip.d.ts +4 -1
  11. package/components/tooltip/tooltip.js +7 -3
  12. package/package.json +31 -33
package/components/breadcrumbs/breadcrumbs.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import classNames from 'classnames';
2
- import flattenChildren from 'react-keyed-flatten-children';
3
- import { Fragment } from 'react';
2
+ import { Children, Fragment } from 'react';
4
3
  import styles from './breadcrumbs.css';
5
4
  export default function Breadcrumbs({ separatorClassName, children }) {
6
- return flattenChildren(children).map((child, index) => (
5
+ return Children.toArray(children).map((child, index) => (
7
6
  // eslint-disable-next-line react/no-array-index-key
8
7
  <Fragment key={index}>
9
8
  {index > 0 && <span className={classNames(styles.separator, separatorClassName)}>{'/'}</span>}
package/components/button/button.css CHANGED
@@ -117,6 +117,10 @@
117
117
  line-height: var(--ring-button-icon-line-height);
118
118
  }
119
119
 
120
+ .block .icon {
121
+ margin-top: -1px;
122
+ }
123
+
120
124
  .inline .icon {
121
125
  color: var(--ring-main-color);
122
126
  }
@@ -251,7 +255,7 @@
251
255
  }
252
256
 
253
257
  & .icon {
254
- margin: 0;
258
+ margin-right: 0;
255
259
  }
256
260
 
257
261
  &.block {
package/components/global/theme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { HTMLAttributes, ReactElement } from 'react';
1
+ import { HTMLAttributes, ReactElement, FunctionComponent } from 'react';
2
2
  declare enum Theme {
3
3
  AUTO = "auto",
4
4
  LIGHT = "light",
@@ -16,10 +16,12 @@ export interface WithThemeClassesProps {
16
16
  }
17
17
  export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
18
18
  export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
19
+ type WrapperType = FunctionComponent<HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
19
20
  export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
20
21
  theme?: Theme;
21
22
  passToPopups?: boolean;
23
+ WrapperComponent?: WrapperType;
22
24
  target?: HTMLElement;
23
25
  }
24
- export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLDivElement>>;
26
+ export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLElement>>;
25
27
  export default Theme;
package/components/global/theme.js CHANGED
@@ -49,7 +49,10 @@ export function applyTheme(theme, container) {
49
49
  container.classList.add(defaultStyles.light);
50
50
  }
51
51
  }
52
- export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, target, ...restProps }, ref) {
52
+ const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
53
+ return <div {...props} ref={ref}/>;
54
+ });
55
+ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
53
56
  const systemTheme = useTheme();
54
57
  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
55
58
  const id = useMemo(() => getUID('popups-with-theme-'), []);
@@ -62,7 +65,7 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
62
65
  const themeClasses = useThemeClasses(theme);
63
66
  const parentTarget = useContext(PopupTargetContext);
64
67
  return (<ThemeContext.Provider value={themeValue}>
65
- <div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
68
+ <WrapperComponent ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
66
69
  ? (<PopupTarget id={id}>
67
70
  {popupTarget => (<>
68
71
  {children}
@@ -70,7 +73,7 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
70
73
  </>)}
71
74
  </PopupTarget>)
72
75
  : children}
73
- </div>
76
+ </WrapperComponent>
74
77
  </ThemeContext.Provider>);
75
78
  });
76
79
  export default Theme;
package/components/icon/icon.css CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  &[width="12"] {
19
- vertical-align: -2px;
19
+ vertical-align: -1px;
20
20
  }
21
21
 
22
22
  &[width="16"] {
package/components/input/input.css CHANGED
@@ -121,7 +121,7 @@
121
121
 
122
122
  .clear {
123
123
  position: absolute;
124
- top: var(--ring-input-padding-block);
124
+ top: calc(var(--ring-input-padding-block) + 1px);
125
125
  right: var(--ring-input-padding-inline);
126
126
 
127
127
  height: auto;
package/components/select/select.css CHANGED
@@ -85,8 +85,6 @@
85
85
  .clearIcon {
86
86
  margin-top: -1px;
87
87
  padding: 0 2px;
88
-
89
- vertical-align: 1px;
90
88
  }
91
89
 
92
90
  .sizeS {
package/components/table/header.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
1
+ import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
2
2
  import { Column, SortParams } from './header-cell';
3
3
  export interface HeaderProps {
4
4
  columns: readonly Column[];
@@ -15,13 +15,6 @@ export interface HeaderProps {
15
15
  checkboxDisabled?: boolean | undefined;
16
16
  maxColSpan?: number;
17
17
  }
18
- declare module 'react-waypoint' {
19
- namespace Waypoint {
20
- interface WaypointProps {
21
- children?: ReactNode;
22
- }
23
- }
24
- }
25
18
  export default class Header extends PureComponent<HeaderProps> {
26
19
  static defaultProps: {
27
20
  selectable: boolean;
package/components/tag/tag.css CHANGED
@@ -81,7 +81,7 @@
81
81
  .remove {
82
82
  position: absolute;
83
83
  z-index: 1;
84
- top: 1px;
84
+ top: 2px;
85
85
  right: 0;
86
86
 
87
87
  height: auto;
package/components/tooltip/tooltip.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import { AllHTMLAttributes, Component, ReactNode } from 'react';
2
1
  import * as React from 'react';
2
+ import { AllHTMLAttributes, Component, ReactNode } from 'react';
3
3
  import Popup, { PopupAttrs } from '../popup/popup';
4
4
  import { Listeners } from '../global/dom';
5
+ import Theme from '../global/theme';
5
6
  interface Context {
6
7
  onNestedTooltipShow: () => void;
7
8
  onNestedTooltipHide: () => void;
@@ -12,6 +13,7 @@ export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, '
12
13
  selfOverflowOnly?: boolean | null | undefined;
13
14
  popupProps?: Partial<PopupAttrs> | null | undefined;
14
15
  title?: ReactNode | null | undefined;
16
+ theme?: Theme;
15
17
  'data-test'?: string | null | undefined;
16
18
  long?: boolean | null | undefined;
17
19
  }
@@ -22,6 +24,7 @@ export default class Tooltip extends Component<TooltipProps> {
22
24
  static defaultProps: {
23
25
  title: string;
24
26
  selfOverflowOnly: boolean;
27
+ theme: Theme;
25
28
  popupProps: {};
26
29
  };
27
30
  state: {
package/components/tooltip/tooltip.js CHANGED
@@ -1,10 +1,11 @@
1
- import { Component, createContext } from 'react';
2
1
  import * as React from 'react';
2
+ import { Component, createContext } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import Popup from '../popup/popup';
5
5
  import { Listeners } from '../global/dom';
6
6
  import dataTests from '../global/data-tests';
7
7
  import scheduleRAF from '../global/schedule-raf';
8
+ import Theme, { ThemeProvider } from '../global/theme';
8
9
  import styles from './tooltip.css';
9
10
  const scheduleScroll = scheduleRAF();
10
11
  const TooltipContext = createContext(undefined);
@@ -15,6 +16,7 @@ export default class Tooltip extends Component {
15
16
  static defaultProps = {
16
17
  title: '',
17
18
  selfOverflowOnly: false,
19
+ theme: Theme.DARK,
18
20
  popupProps: {}
19
21
  };
20
22
  state = {
@@ -103,7 +105,7 @@ export default class Tooltip extends Component {
103
105
  this.setState({ showNestedPopup: false });
104
106
  };
105
107
  render() {
106
- const { children, 'data-test': dataTest, title, delay, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
108
+ const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
107
109
  const ariaProps = typeof title === 'string' && !!title
108
110
  ? { 'aria-label': title, role: 'tooltip' }
109
111
  : {};
@@ -111,7 +113,9 @@ export default class Tooltip extends Component {
111
113
  return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
112
114
  <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
113
115
  {children}
114
- <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
116
+ <ThemeProvider theme={theme} passToPopups WrapperComponent={props => <span {...props}/>}>
117
+ <Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
118
+ </ThemeProvider>
115
119
  </span>
116
120
  </TooltipContext.Provider>);
117
121
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "7.0.0-beta.7",
3
+ "version": "7.0.0-beta.9",
4
4
  "description": "JetBrains UI library",
5
5
  "author": "JetBrains",
6
6
  "license": "Apache-2.0",
@@ -86,42 +86,42 @@
86
86
  "@primer/octicons": "^19.11.0",
87
87
  "@rollup/plugin-babel": "^6.0.4",
88
88
  "@rollup/plugin-json": "^6.1.0",
89
- "@rollup/plugin-node-resolve": "^15.2.3",
90
- "@rollup/plugin-replace": "^5.0.7",
91
- "@storybook/addon-a11y": "8.3.0",
92
- "@storybook/addon-docs": "8.3.0",
93
- "@storybook/addon-essentials": "8.3.0",
94
- "@storybook/addon-themes": "^8.3.0",
95
- "@storybook/components": "8.3.0",
89
+ "@rollup/plugin-node-resolve": "^15.3.0",
90
+ "@rollup/plugin-replace": "^6.0.1",
91
+ "@storybook/addon-a11y": "8.3.3",
92
+ "@storybook/addon-docs": "8.3.3",
93
+ "@storybook/addon-essentials": "8.3.3",
94
+ "@storybook/addon-themes": "^8.3.3",
95
+ "@storybook/components": "8.3.3",
96
96
  "@storybook/csf": "^0.1.11",
97
- "@storybook/manager-api": "8.3.0",
98
- "@storybook/preview-api": "8.3.0",
99
- "@storybook/react": "8.3.0",
100
- "@storybook/react-webpack5": "8.3.0",
97
+ "@storybook/manager-api": "8.3.3",
98
+ "@storybook/preview-api": "8.3.3",
99
+ "@storybook/react": "8.3.3",
100
+ "@storybook/react-webpack5": "8.3.3",
101
101
  "@storybook/test-runner": "^0.19.1",
102
- "@storybook/theming": "8.3.0",
102
+ "@storybook/theming": "8.3.3",
103
103
  "@testing-library/dom": "^10.4.0",
104
104
  "@testing-library/react": "^16.0.1",
105
105
  "@testing-library/user-event": "^14.5.2",
106
- "@types/chai": "^4.3.19",
107
- "@types/chai-as-promised": "^8.0.0",
106
+ "@types/chai": "^5.0.0",
107
+ "@types/chai-as-promised": "^8.0.1",
108
108
  "@types/chai-dom": "0.0.10",
109
109
  "@types/chai-enzyme": "^0.6.13",
110
110
  "@types/enzyme": "^3.10.18",
111
111
  "@types/markdown-it": "^14.1.2",
112
- "@types/react": "^18.3.6",
112
+ "@types/react": "^18.3.9",
113
113
  "@types/react-dom": "^18.3.0",
114
114
  "@types/sinon": "^17.0.3",
115
- "@types/sinon-chai": "^3.2.12",
115
+ "@types/sinon-chai": "^4.0.0",
116
116
  "@types/webpack-env": "^1.18.5",
117
- "@typescript-eslint/eslint-plugin": "^8.5.0",
118
- "@typescript-eslint/parser": "^8.5.0",
117
+ "@typescript-eslint/eslint-plugin": "^8.7.0",
118
+ "@typescript-eslint/parser": "^8.7.0",
119
119
  "@vitejs/plugin-react": "^4.3.1",
120
120
  "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
121
121
  "acorn": "^8.12.1",
122
- "axe-playwright": "^2.0.2",
122
+ "axe-playwright": "^2.0.3",
123
123
  "babel-plugin-require-context-hook": "^1.0.0",
124
- "caniuse-lite": "^1.0.30001660",
124
+ "caniuse-lite": "^1.0.30001664",
125
125
  "chai": "^5.1.1",
126
126
  "chai-as-promised": "^8.0.0",
127
127
  "chai-dom": "^1.10.0",
@@ -135,9 +135,9 @@
135
135
  "eslint-plugin-bdd": "^2.1.1",
136
136
  "eslint-plugin-import": "^2.30.0",
137
137
  "eslint-plugin-jsx-a11y": "^6.10.0",
138
- "eslint-plugin-react": "^7.36.1",
138
+ "eslint-plugin-react": "^7.37.0",
139
139
  "eslint-plugin-react-hooks": "^4.6.2",
140
- "eslint-plugin-storybook": "^0.8.0",
140
+ "eslint-plugin-storybook": "^0.9.0",
141
141
  "events": "^3.3.0",
142
142
  "glob": "^11.0.0",
143
143
  "html-webpack-plugin": "^5.6.0",
@@ -158,22 +158,22 @@
158
158
  "react-test-renderer": "^18.3.1",
159
159
  "regenerator-runtime": "^0.14.1",
160
160
  "rimraf": "^6.0.1",
161
- "rollup": "^4.21.3",
161
+ "rollup": "^4.22.4",
162
162
  "rollup-plugin-clear": "^2.0.7",
163
163
  "rollup-plugin-styles": "^4.0.0",
164
164
  "sinon": "^19.0.2",
165
165
  "sinon-chai": "^4.0.0",
166
166
  "storage-mock": "^2.1.0",
167
- "storybook": "8.3.0",
167
+ "storybook": "8.3.3",
168
168
  "stylelint": "^16.9.0",
169
169
  "svg-inline-loader": "^0.8.2",
170
170
  "teamcity-service-messages": "^0.1.14",
171
171
  "terser-webpack-plugin": "^5.3.10",
172
- "typescript": "~5.5.4",
172
+ "typescript": "~5.6.2",
173
173
  "vitest": "^2.1.1",
174
174
  "vitest-teamcity-reporter": "^0.3.1",
175
175
  "wallaby-webpack": "^3.9.16",
176
- "webpack": "^5.94.0",
176
+ "webpack": "^5.95.0",
177
177
  "webpack-cli": "^5.1.4",
178
178
  "xmlappend": "^1.0.4"
179
179
  },
@@ -206,16 +206,15 @@
206
206
  "@types/element-resize-detector": "^1.1.6",
207
207
  "@types/react-virtualized": "9.21.30",
208
208
  "@types/util-deprecate": "^1.0.3",
209
- "@ungap/url-search-params": "^0.2.2",
210
- "babel-loader": "9.1.3",
209
+ "babel-loader": "9.2.1",
211
210
  "babel-plugin-transform-define": "^2.1.4",
212
- "browserslist": "^4.23.3",
211
+ "browserslist": "^4.24.0",
213
212
  "change-case": "^4.1.1",
214
213
  "classnames": "^2.5.1",
215
214
  "combokeys": "^3.0.1",
216
215
  "css-loader": "^7.1.2",
217
216
  "csstype": "^3.1.3",
218
- "date-fns": "^4.0.0",
217
+ "date-fns": "^4.1.0",
219
218
  "dequal": "^2.0.3",
220
219
  "element-resize-detector": "^1.2.4",
221
220
  "es6-error": "^4.1.1",
@@ -231,8 +230,7 @@
231
230
  "postcss-font-family-system-ui": "^5.0.0",
232
231
  "postcss-loader": "^8.1.1",
233
232
  "postcss-modules-values-replace": "^4.2.0",
234
- "postcss-preset-env": "^10.0.3",
235
- "react-keyed-flatten-children": "^3.0.2",
233
+ "postcss-preset-env": "^10.0.5",
236
234
  "react-movable": "^3.3.1",
237
235
  "react-virtualized": "^9.22.5",
238
236
  "react-waypoint": "^10.3.0",