@zendeskgarden/react-theming 8.49.2 → 8.49.3

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.
package/dist/index.cjs.js CHANGED
@@ -726,6 +726,11 @@ function menuStyles(position) {
726
726
  return styledComponents.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg("".concat(theme.space.base * 5, "px"), "".concat(theme.space.base * 7.5, "px"), getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
727
727
  }
728
728
 
729
+ var ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
730
+ var MENU_POSITION = ['top', 'right', 'bottom', 'left'];
731
+
732
+ exports.ARRAY_ARROW_POSITION = ARROW_POSITION;
733
+ exports.ARRAY_MENU_POSITION = MENU_POSITION;
729
734
  exports.DEFAULT_THEME = DEFAULT_THEME;
730
735
  exports.PALETTE = PALETTE;
731
736
  exports.ThemeProvider = ThemeProvider;
package/dist/index.esm.js CHANGED
@@ -718,4 +718,7 @@ function menuStyles(position) {
718
718
  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg("".concat(theme.space.base * 5, "px"), "".concat(theme.space.base * 7.5, "px"), getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
719
719
  }
720
720
 
721
- export { DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, withTheme };
721
+ var ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
722
+ var MENU_POSITION = ['top', 'right', 'bottom', 'left'];
723
+
724
+ export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, withTheme };
@@ -4,27 +4,11 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { PropsWithChildren } from 'react';
8
- import { ThemeProps } from 'styled-components';
9
- import { IGardenTheme } from './theme';
10
- export interface IThemeProviderProps extends Partial<ThemeProps<IGardenTheme>> {
11
- /**
12
- * Provides values for component styling. See styled-components
13
- * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
14
- * for details.
15
- */
16
- theme?: IGardenTheme;
17
- /**
18
- * Provides a reference to the DOM node used to scope a `:focus-visible`
19
- * polyfill. If left `undefined`, a scoping `<div>` will be rendered.
20
- * Assigning `null` (on a nested `ThemeProvider`, for example) prevents the
21
- * added polyfill and scoping `<div>`.
22
- */
23
- focusVisibleRef?: React.RefObject<HTMLElement> | null;
24
- }
7
+ import { PropsWithChildren } from 'react';
8
+ import { IThemeProviderProps } from '../types';
25
9
  export declare const ThemeProvider: {
26
10
  ({ theme, focusVisibleRef, children, ...other }: PropsWithChildren<IThemeProviderProps>): JSX.Element;
27
11
  defaultProps: {
28
- theme: IGardenTheme;
12
+ theme: import("../types").IGardenTheme;
29
13
  };
30
14
  };
@@ -4,102 +4,7 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- declare type Hue = Record<number | string, string> | string;
8
- export interface IGardenTheme {
9
- rtl: boolean;
10
- document?: any;
11
- borders: {
12
- sm: string;
13
- md: string;
14
- };
15
- borderRadii: {
16
- sm: string;
17
- md: string;
18
- };
19
- borderStyles: {
20
- solid: string;
21
- };
22
- borderWidths: {
23
- sm: string;
24
- md: string;
25
- };
26
- breakpoints: {
27
- xs: string;
28
- sm: string;
29
- md: string;
30
- lg: string;
31
- xl: string;
32
- };
33
- colors: {
34
- base: 'light' | 'dark';
35
- background: string;
36
- foreground: string;
37
- primaryHue: string;
38
- dangerHue: string;
39
- warningHue: string;
40
- successHue: string;
41
- neutralHue: string;
42
- chromeHue: string;
43
- };
44
- components: Record<string, any>;
45
- fonts: {
46
- mono: string;
47
- system: string;
48
- };
49
- fontSizes: {
50
- xs: string;
51
- sm: string;
52
- md: string;
53
- lg: string;
54
- xl: string;
55
- xxl: string;
56
- xxxl: string;
57
- };
58
- fontWeights: {
59
- thin: number;
60
- extralight: number;
61
- light: number;
62
- regular: number;
63
- medium: number;
64
- semibold: number;
65
- bold: number;
66
- extrabold: number;
67
- black: number;
68
- };
69
- iconSizes: {
70
- sm: string;
71
- md: string;
72
- lg: string;
73
- };
74
- lineHeights: {
75
- sm: string;
76
- md: string;
77
- lg: string;
78
- xl: string;
79
- xxl: string;
80
- xxxl: string;
81
- };
82
- shadowWidths: {
83
- sm: string;
84
- md: string;
85
- };
86
- shadows: {
87
- sm: (color: string) => string;
88
- md: (color: string) => string;
89
- lg: (offsetY: string, blurRadius: string, color: string) => string;
90
- };
91
- space: {
92
- base: number;
93
- xxs: string;
94
- xs: string;
95
- sm: string;
96
- md: string;
97
- lg: string;
98
- xl: string;
99
- xxl: string;
100
- };
101
- palette: Record<string, Hue>;
102
- }
7
+ import { IGardenTheme } from '../../types';
103
8
  declare const DEFAULT_THEME: IGardenTheme;
104
9
  /** @component */
105
10
  export default DEFAULT_THEME;
@@ -5,9 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export { ThemeProvider } from './elements/ThemeProvider';
8
- export type { IThemeProviderProps } from './elements/ThemeProvider';
9
8
  export { default as DEFAULT_THEME } from './elements/theme';
10
- export type { IGardenTheme } from './elements/theme';
11
9
  export { default as PALETTE } from './elements/palette';
12
10
  export { default as isRtl } from './utils/isRtl';
13
11
  export { default as retrieveComponentStyles,
@@ -19,7 +17,7 @@ export { default as getColor } from './utils/getColor';
19
17
  export { default as getLineHeight } from './utils/getLineHeight';
20
18
  export { default as mediaQuery } from './utils/mediaQuery';
21
19
  export { default as arrowStyles } from './utils/arrowStyles';
22
- export type { ARROW_POSITION } from './utils/arrowStyles';
23
20
  export { useDocument } from './utils/useDocument';
24
21
  export { default as menuStyles } from './utils/menuStyles';
25
- export type { MENU_POSITION } from './utils/menuStyles';
22
+ export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION } from './types';
23
+ export type { IGardenTheme, IThemeProviderProps, ArrowPosition as ARROW_POSITION, MenuPosition as MENU_POSITION } from './types';
@@ -0,0 +1,123 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { ThemeProps } from 'styled-components';
8
+ export declare const ARROW_POSITION: readonly ["top", "top-left", "top-right", "right", "right-top", "right-bottom", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom"];
9
+ export declare type ArrowPosition = typeof ARROW_POSITION[number];
10
+ export declare const MENU_POSITION: readonly ["top", "right", "bottom", "left"];
11
+ export declare type MenuPosition = typeof MENU_POSITION[number];
12
+ declare type Hue = Record<number | string, string> | string;
13
+ export interface IGardenTheme {
14
+ rtl: boolean;
15
+ document?: any;
16
+ borders: {
17
+ sm: string;
18
+ md: string;
19
+ };
20
+ borderRadii: {
21
+ sm: string;
22
+ md: string;
23
+ };
24
+ borderStyles: {
25
+ solid: string;
26
+ };
27
+ borderWidths: {
28
+ sm: string;
29
+ md: string;
30
+ };
31
+ breakpoints: {
32
+ xs: string;
33
+ sm: string;
34
+ md: string;
35
+ lg: string;
36
+ xl: string;
37
+ };
38
+ colors: {
39
+ base: 'light' | 'dark';
40
+ background: string;
41
+ foreground: string;
42
+ primaryHue: string;
43
+ dangerHue: string;
44
+ warningHue: string;
45
+ successHue: string;
46
+ neutralHue: string;
47
+ chromeHue: string;
48
+ };
49
+ components: Record<string, any>;
50
+ fonts: {
51
+ mono: string;
52
+ system: string;
53
+ };
54
+ fontSizes: {
55
+ xs: string;
56
+ sm: string;
57
+ md: string;
58
+ lg: string;
59
+ xl: string;
60
+ xxl: string;
61
+ xxxl: string;
62
+ };
63
+ fontWeights: {
64
+ thin: number;
65
+ extralight: number;
66
+ light: number;
67
+ regular: number;
68
+ medium: number;
69
+ semibold: number;
70
+ bold: number;
71
+ extrabold: number;
72
+ black: number;
73
+ };
74
+ iconSizes: {
75
+ sm: string;
76
+ md: string;
77
+ lg: string;
78
+ };
79
+ lineHeights: {
80
+ sm: string;
81
+ md: string;
82
+ lg: string;
83
+ xl: string;
84
+ xxl: string;
85
+ xxxl: string;
86
+ };
87
+ shadowWidths: {
88
+ sm: string;
89
+ md: string;
90
+ };
91
+ shadows: {
92
+ sm: (color: string) => string;
93
+ md: (color: string) => string;
94
+ lg: (offsetY: string, blurRadius: string, color: string) => string;
95
+ };
96
+ space: {
97
+ base: number;
98
+ xxs: string;
99
+ xs: string;
100
+ sm: string;
101
+ md: string;
102
+ lg: string;
103
+ xl: string;
104
+ xxl: string;
105
+ };
106
+ palette: Record<string, Hue>;
107
+ }
108
+ export interface IThemeProviderProps extends Partial<ThemeProps<IGardenTheme>> {
109
+ /**
110
+ * Provides values for component styling. See styled-components
111
+ * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
112
+ * for details.
113
+ */
114
+ theme?: IGardenTheme;
115
+ /**
116
+ * Provides a reference to the DOM node used to scope a `:focus-visible`
117
+ * polyfill. If left `undefined`, a scoping `<div>` will be rendered.
118
+ * Assigning `null` (on a nested `ThemeProvider`, for example) prevents the
119
+ * added polyfill and scoping `<div>`.
120
+ */
121
+ focusVisibleRef?: React.RefObject<HTMLElement> | null;
122
+ }
123
+ export {};
@@ -4,8 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- export declare type ARROW_POSITION = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom';
8
- export declare type ARROW_OPTIONS = {
7
+ import { ArrowPosition } from '../types';
8
+ declare type ArrowOptions = {
9
9
  size?: string;
10
10
  inset?: string;
11
11
  animationModifier?: string;
@@ -58,4 +58,5 @@ export declare const exponentialSymbols: {
58
58
  *
59
59
  * @component
60
60
  */
61
- export default function arrowStyles(position: ARROW_POSITION, options?: ARROW_OPTIONS): import("styled-components").FlattenSimpleInterpolation;
61
+ export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").FlattenSimpleInterpolation;
62
+ export {};
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
- export declare type MENU_POSITION = 'top' | 'right' | 'bottom' | 'left';
9
- export declare type MENU_OPTIONS = {
8
+ import { MenuPosition } from '../types';
9
+ declare type MenuOptions = {
10
10
  theme?: DefaultTheme;
11
11
  hidden?: boolean;
12
12
  margin?: string;
@@ -33,4 +33,5 @@ export declare type MENU_OPTIONS = {
33
33
  * @param {string} [options.animationModifier] A CSS class or attribute selector
34
34
  * which, when applied, animates the menu's appearance.
35
35
  */
36
- export default function menuStyles(position: MENU_POSITION, options?: MENU_OPTIONS): import("styled-components").FlattenSimpleInterpolation;
36
+ export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenSimpleInterpolation;
37
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-theming",
3
- "version": "8.49.2",
3
+ "version": "8.49.3",
4
4
  "description": "Theming utilities and components within the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -41,5 +41,5 @@
41
41
  "access": "public"
42
42
  },
43
43
  "zendeskgarden:src": "src/index.ts",
44
- "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
44
+ "gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
45
45
  }