@jetbrains/ring-ui 5.0.1 → 5.0.4

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 (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/global/theme.d.ts +1 -0
  3. package/components/global/theme.js +8 -0
  4. package/components/select/select.d.ts +3 -1
  5. package/dist/_helpers/theme.js +8 -1
  6. package/dist/global/theme.d.ts +1 -0
  7. package/dist/global/theme.js +1 -1
  8. package/dist/select/select.d.ts +3 -1
  9. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -36,6 +36,13 @@
36
36
 
37
37
  <ThemeProvider theme={Theme.DARK}>{children}</ThemeProvider>
38
38
  ```
39
+
40
+ If you still need to apply theme to the global scope, here is a solution:
41
+ ```js
42
+ import Theme, {applyTheme} from '@jetbrains/ring-ui/components/global/theme';
43
+
44
+ applyTheme(Theme.DARK, document.body);
45
+ ```
39
46
  You can also pass `Theme.AUTO` to use the user-defined system theme.
40
47
  The only exceptions are the components that provide dark context by default: Alert, Header, Message. Those still accept a `theme` prop.
41
48
  - `--ring-dark-*` CSS custom properties are removed, `--ring-dark-text-color` is renamed to `--ring-white-text-color`
package/components/global/theme.d.ts CHANGED
@@ -5,6 +5,7 @@ declare enum Theme {
5
5
  DARK = "dark"
6
6
  }
7
7
  export declare function useTheme(): Theme.LIGHT | Theme.DARK;
8
+ export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
8
9
  export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
9
10
  theme?: Theme;
10
11
  passToPopups?: boolean;
package/components/global/theme.js CHANGED
@@ -21,6 +21,14 @@ export function useTheme() {
21
21
  }, []);
22
22
  return dark ? Theme.DARK : Theme.LIGHT;
23
23
  }
24
+ export function applyTheme(theme, container) {
25
+ if (theme === Theme.DARK) {
26
+ container.classList.add(styles.dark);
27
+ }
28
+ else {
29
+ container.classList.remove(styles.dark);
30
+ }
31
+ }
24
32
  export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, ...restProps }, ref) {
25
33
  const systemTheme = useTheme();
26
34
  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
package/components/select/select.d.ts CHANGED
@@ -42,7 +42,9 @@ export interface CustomAnchorProps {
42
42
  wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {
43
43
  ref: RefCallback<HTMLElement>;
44
44
  };
45
- buttonProps: ButtonHTMLAttributes<HTMLButtonElement> & DataTestProps;
45
+ buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> & {
46
+ onClick: () => void;
47
+ } & DataTestProps;
46
48
  popup: ReactNode;
47
49
  }
48
50
  export declare type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
package/dist/_helpers/theme.js CHANGED
@@ -28,6 +28,13 @@ function useTheme() {
28
28
  }, []);
29
29
  return dark ? Theme.DARK : Theme.LIGHT;
30
30
  }
31
+ function applyTheme(theme, container) {
32
+ if (theme === Theme.DARK) {
33
+ container.classList.add(modules_59717246.dark);
34
+ } else {
35
+ container.classList.remove(modules_59717246.dark);
36
+ }
37
+ }
31
38
  const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref, ref) {
32
39
  let {
33
40
  theme = Theme.AUTO,
@@ -52,4 +59,4 @@ const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref, ref)
52
59
  });
53
60
  var Theme$1 = Theme;
54
61
 
55
- export { Theme$1 as T, ThemeProvider as a, modules_59717246 as m, useTheme as u };
62
+ export { Theme$1 as T, ThemeProvider as a, applyTheme as b, modules_59717246 as m, useTheme as u };
package/dist/global/theme.d.ts CHANGED
@@ -5,6 +5,7 @@ declare enum Theme {
5
5
  DARK = "dark"
6
6
  }
7
7
  export declare function useTheme(): Theme.LIGHT | Theme.DARK;
8
+ export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
8
9
  export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
9
10
  theme?: Theme;
10
11
  passToPopups?: boolean;
package/dist/global/theme.js CHANGED
@@ -5,7 +5,7 @@ import 'classnames';
5
5
  import 'react-dom';
6
6
  import '../popup/popup.target.js';
7
7
  import '../popup/popup.js';
8
- export { a as ThemeProvider, T as default, u as useTheme } from '../_helpers/theme.js';
8
+ export { a as ThemeProvider, b as applyTheme, T as default, u as useTheme } from '../_helpers/theme.js';
9
9
  import './get-uid.js';
10
10
  import 'prop-types';
11
11
  import 'core-js/modules/es.string.replace.js';
package/dist/select/select.d.ts CHANGED
@@ -42,7 +42,9 @@ export interface CustomAnchorProps {
42
42
  wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {
43
43
  ref: RefCallback<HTMLElement>;
44
44
  };
45
- buttonProps: ButtonHTMLAttributes<HTMLButtonElement> & DataTestProps;
45
+ buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> & {
46
+ onClick: () => void;
47
+ } & DataTestProps;
46
48
  popup: ReactNode;
47
49
  }
48
50
  export declare type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "5.0.1",
3
+ "version": "5.0.4",
4
4
  "description": "JetBrains UI library",
5
5
  "author": "JetBrains",
6
6
  "license": "Apache-2.0",
@@ -76,21 +76,21 @@
76
76
  "@rollup/plugin-babel": "^5.3.1",
77
77
  "@rollup/plugin-node-resolve": "^13.0.6",
78
78
  "@rollup/plugin-replace": "^4.0.0",
79
- "@storybook/addon-a11y": "6.5.0-alpha.63",
80
- "@storybook/addon-docs": "6.5.0-alpha.63",
81
- "@storybook/addon-essentials": "6.4.20",
82
- "@storybook/addon-storyshots": "6.5.0-alpha.63",
83
- "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.63",
84
- "@storybook/addon-storysource": "6.5.0-alpha.63",
85
- "@storybook/addons": "6.5.0-alpha.63",
86
- "@storybook/builder-webpack5": "6.5.0-alpha.63",
87
- "@storybook/client-api": "6.5.0-alpha.63",
88
- "@storybook/core": "6.5.0-alpha.63",
89
- "@storybook/html": "6.5.0-alpha.63",
90
- "@storybook/manager-webpack5": "6.5.0-alpha.63",
91
- "@storybook/react": "6.5.0-alpha.63",
92
- "@storybook/source-loader": "6.5.0-alpha.63",
93
- "@storybook/theming": "6.5.0-alpha.63",
79
+ "@storybook/addon-a11y": "6.5.4",
80
+ "@storybook/addon-docs": "6.5.4",
81
+ "@storybook/addon-essentials": "6.5.4",
82
+ "@storybook/addon-storyshots": "6.5.4",
83
+ "@storybook/addon-storyshots-puppeteer": "6.5.4",
84
+ "@storybook/addon-storysource": "6.5.4",
85
+ "@storybook/addons": "6.5.4",
86
+ "@storybook/builder-webpack5": "6.5.4",
87
+ "@storybook/client-api": "6.5.4",
88
+ "@storybook/core": "6.5.4",
89
+ "@storybook/html": "6.5.4",
90
+ "@storybook/manager-webpack5": "6.5.4",
91
+ "@storybook/react": "6.5.4",
92
+ "@storybook/source-loader": "6.5.4",
93
+ "@storybook/theming": "6.5.4",
94
94
  "@testing-library/react": "^13.0.0",
95
95
  "@testing-library/user-event": "^14.1.0",
96
96
  "@types/chai": "^4.2.21",
@@ -140,7 +140,7 @@
140
140
  "karma-teamcity-reporter": "^2.0.0",
141
141
  "karma-webpack": "^5.0.0",
142
142
  "lerna": "^4.0.0",
143
- "lint-staged": "^12.3.6",
143
+ "lint-staged": "^12.4.1",
144
144
  "merge-options": "^3.0.4",
145
145
  "mocha": "^9.2.2",
146
146
  "pinst": "^3.0.0",
@@ -203,7 +203,7 @@
203
203
  "@types/react-virtualized": "9.21.20",
204
204
  "@types/util-deprecate": "^1.0.0",
205
205
  "@ungap/url-search-params": "^0.2.2",
206
- "babel-loader": "^8.2.4",
206
+ "babel-loader": "^8.2.5",
207
207
  "babel-plugin-transform-define": "^2.0.1",
208
208
  "browserslist": "^4.16.6",
209
209
  "change-case": "^4.1.1",
@@ -254,5 +254,5 @@
254
254
  "node": ">=7.4",
255
255
  "npm": ">=6.0.0"
256
256
  },
257
- "gitHead": "43443d83aa1980c1400fbb2aaa764fa02a9bd708"
257
+ "gitHead": "db0d947c03a2ae7735c5e3f48712fbd22709010b"
258
258
  }