@rescui/dropdown 0.9.7 → 0.10.1-RUI-293-Update-menu-component-7a032357e.20

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 (15) hide show
  1. package/README.md +3 -1
  2. package/lib/css-vars-utils.d.ts +3 -3
  3. package/lib/custom-modifiers.d.ts +12 -12
  4. package/lib/dropdown.d.ts +44 -43
  5. package/lib/dropdown.js +1 -1
  6. package/lib/dropdown.p.module.css.js +12 -12
  7. package/lib/index.css +78 -46
  8. package/lib/index.d.ts +7 -8
  9. package/lib/index.js +2 -2
  10. package/lib/use-dropdown-state.d.ts +7 -7
  11. package/lib/use-scrollable-container.d.ts +13 -14
  12. package/lib/use-scrollable-container.js +5 -5
  13. package/llm/components/dropdown.md +72 -0
  14. package/llm/index.md +2 -0
  15. package/package.json +8 -7
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # Dropdown
2
2
 
3
- * [Usage examples](./docs/demo.md)
3
+ ## LLM
4
+
5
+ To get the docs for the LLM, check out [this index](./llm/index.md).
package/lib/css-vars-utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
2
- /** Check out `@rescui/colors/src/public-api.p.css` file */
3
- export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";
1
+ export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
2
+ /** Check out `@rescui/colors/src/public-api.p.css` file */
3
+ export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";
package/lib/custom-modifiers.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import type { Modifier } from 'react-popper';
2
- import { Property } from 'csstype';
3
- export declare type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
4
- export declare type DropdownMinWidth = 'trigger' | Property.MinWidth;
5
- export declare const sameWidthModifier: Modifier<'sameWidth', {
6
- maxWidth: DropdownMaxWidth;
7
- minWidth: DropdownMinWidth;
8
- }>;
9
- export declare const applyMaxSize: Modifier<'applyMaxSize', {
10
- leastMaxHeight: number;
11
- maxHeight: number;
12
- }>;
1
+ import type { Modifier } from 'react-popper';
2
+ import { Property } from 'csstype';
3
+ export type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
4
+ export type DropdownMinWidth = 'trigger' | Property.MinWidth;
5
+ export declare const sameWidthModifier: Modifier<'sameWidth', {
6
+ maxWidth: DropdownMaxWidth;
7
+ minWidth: DropdownMinWidth;
8
+ }>;
9
+ export declare const applyMaxSize: Modifier<'applyMaxSize', {
10
+ leastMaxHeight: number;
11
+ maxHeight: number;
12
+ }>;
package/lib/dropdown.d.ts CHANGED
@@ -1,43 +1,44 @@
1
- import React, { ReactNode } from 'react';
2
- import type { ReferenceChildrenProps } from 'react-popper';
3
- import { Theme } from '@rescui/ui-contexts';
4
- import type { Placement } from '@popperjs/core';
5
- import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
6
- export declare type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
7
- export interface DropdownProps {
8
- trigger: DropdownTrigger;
9
- isOpen: boolean;
10
- onRequestClose?: () => void;
11
- theme?: Theme;
12
- maxHeight?: number;
13
- /** Least possible maxHeight value, even if there is less space let on the screen. It's not the same thing as minHeight because actual height still depends on dropdown content which can be smaller. Eg. leastMaxHeight equals to item height at DropdownMenu */
14
- leastMaxHeight?: number;
15
- /**
16
- * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
17
- * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
18
- * @type 'trigger' | MinWidthProperty<string | number>;
19
- * */
20
- minWidth?: DropdownMinWidth;
21
- /**
22
- * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
23
- * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
24
- * @type 'trigger' | MaxWidthProperty<string | number>;
25
- * */
26
- maxWidth?: DropdownMaxWidth;
27
- className?: string;
28
- mode?: 'classic' | 'rock';
29
- placement?: Placement;
30
- /** @ignore */
31
- cancelCloseAnimation?: boolean;
32
- children?: ReactNode;
33
- closeOnEsc?: boolean;
34
- closeOnTab?: boolean;
35
- disableFocusLock?: boolean;
36
- /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
37
- renderInTrigger?: boolean;
38
- }
39
- export interface DropdownImperativeHandle {
40
- scheduleUpdate: () => void;
41
- }
42
- export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownImperativeHandle>>;
43
- export default Dropdown;
1
+ import React from 'react';
2
+ import type { ReactNode, JSX } from 'react';
3
+ import type { ReferenceChildrenProps } from 'react-popper';
4
+ import { Theme } from '@rescui/ui-contexts';
5
+ import type { Placement } from '@popperjs/core';
6
+ import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
7
+ export type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
8
+ export interface DropdownProps {
9
+ trigger: DropdownTrigger;
10
+ isOpen: boolean;
11
+ onRequestClose?: () => void;
12
+ theme?: Theme;
13
+ maxHeight?: number;
14
+ /** Least possible maxHeight value, even if there is less space let on the screen. It's not the same thing as minHeight because actual height still depends on dropdown content which can be smaller. Eg. leastMaxHeight equals to item height at DropdownMenu */
15
+ leastMaxHeight?: number;
16
+ /**
17
+ * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
18
+ * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
19
+ * @type 'trigger' | MinWidthProperty<string | number>;
20
+ * */
21
+ minWidth?: DropdownMinWidth;
22
+ /**
23
+ * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
24
+ * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
25
+ * @type 'trigger' | MaxWidthProperty<string | number>;
26
+ * */
27
+ maxWidth?: DropdownMaxWidth;
28
+ className?: string;
29
+ mode?: 'classic' | 'rock';
30
+ placement?: Placement;
31
+ /** @ignore */
32
+ cancelCloseAnimation?: boolean;
33
+ children?: ReactNode;
34
+ closeOnEsc?: boolean;
35
+ closeOnTab?: boolean;
36
+ disableFocusLock?: boolean;
37
+ /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
38
+ renderInTrigger?: boolean;
39
+ }
40
+ export interface DropdownImperativeHandle {
41
+ scheduleUpdate: () => void;
42
+ }
43
+ export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownImperativeHandle>>;
44
+ export default Dropdown;
package/lib/dropdown.js CHANGED
@@ -258,7 +258,7 @@ const DropdownRender = (_ref5, externalRef) => {
258
258
  }, /*#__PURE__*/React.createElement(FocusLock, {
259
259
  className: THEME_STYLES[childrenTheme],
260
260
  ref: setContentEl,
261
- disabled: dropdownState !== DROPDOWN_STATES.OPEN || disableFocusLock,
261
+ disabled: dropdownState === DROPDOWN_STATES.CLOSING || disableFocusLock,
262
262
  returnFocus: {
263
263
  preventScroll: true
264
264
  },
package/lib/dropdown.p.module.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_12nx94k_60",
3
- "themeDark": "_themeDark_12nx94k_63",
4
- "dropdown": "_dropdown_12nx94k_67",
5
- "triggerWrapper": "_triggerWrapper_12nx94k_74",
6
- "contentWrapper": "_contentWrapper_12nx94k_78",
7
- "fadeInBottomToTop": "_fadeInBottomToTop_12nx94k_1",
8
- "fadeInTopToBottom": "_fadeInTopToBottom_12nx94k_1",
9
- "fadeInLeftToRight": "_fadeInLeftToRight_12nx94k_1",
10
- "fadeInRightToLeft": "_fadeInRightToLeft_12nx94k_1",
11
- "wrapperHidden": "_wrapperHidden_12nx94k_109",
12
- "modeClassic": "_modeClassic_12nx94k_129",
13
- "modeRock": "_modeRock_12nx94k_133"
2
+ "themeLight": "_themeLight_1nvnz7j_59",
3
+ "themeDark": "_themeDark_1nvnz7j_62",
4
+ "dropdown": "_dropdown_1nvnz7j_66",
5
+ "triggerWrapper": "_triggerWrapper_1nvnz7j_73",
6
+ "contentWrapper": "_contentWrapper_1nvnz7j_77",
7
+ "fadeInBottomToTop": "_fadeInBottomToTop_1nvnz7j_1",
8
+ "fadeInTopToBottom": "_fadeInTopToBottom_1nvnz7j_1",
9
+ "fadeInLeftToRight": "_fadeInLeftToRight_1nvnz7j_1",
10
+ "fadeInRightToLeft": "_fadeInRightToLeft_1nvnz7j_1",
11
+ "wrapperHidden": "_wrapperHidden_1nvnz7j_110",
12
+ "modeClassic": "_modeClassic_1nvnz7j_130",
13
+ "modeRock": "_modeRock_1nvnz7j_134"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes _fadeInTopToBottom_12nx94k_1{
1
+ @keyframes _fadeInTopToBottom_1nvnz7j_1{
2
2
  0%{
3
3
  opacity:0;
4
4
 
@@ -10,7 +10,7 @@
10
10
  transform:none;
11
11
  }
12
12
  }
13
- @keyframes _fadeInBottomToTop_12nx94k_1{
13
+ @keyframes _fadeInBottomToTop_1nvnz7j_1{
14
14
  0%{
15
15
  opacity:0;
16
16
 
@@ -22,7 +22,7 @@
22
22
  transform:none;
23
23
  }
24
24
  }
25
- @keyframes _fadeInLeftToRight_12nx94k_1{
25
+ @keyframes _fadeInLeftToRight_1nvnz7j_1{
26
26
  0%{
27
27
  opacity:0;
28
28
 
@@ -34,7 +34,7 @@
34
34
  transform:none;
35
35
  }
36
36
  }
37
- @keyframes _fadeInRightToLeft_12nx94k_1{
37
+ @keyframes _fadeInRightToLeft_1nvnz7j_1{
38
38
  0%{
39
39
  opacity:0;
40
40
 
@@ -46,13 +46,13 @@
46
46
  transform:none;
47
47
  }
48
48
  }
49
- ._themeLight_12nx94k_60{
49
+ ._themeLight_1nvnz7j_59{
50
50
  --rs-theme-dark:0;
51
51
  }
52
- ._themeDark_12nx94k_63{
52
+ ._themeDark_1nvnz7j_62{
53
53
  --rs-theme-dark:1;
54
54
  }
55
- ._dropdown_12nx94k_67{
55
+ ._dropdown_1nvnz7j_66{
56
56
  --_rs-theme-dark:var(
57
57
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
58
58
  var(--rs-theme-dark, 0)
@@ -62,7 +62,7 @@
62
62
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
63
63
  }
64
64
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
65
- ._dropdown_12nx94k_67{
65
+ ._dropdown_1nvnz7j_66{
66
66
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
67
67
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
68
68
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -71,7 +71,7 @@
71
71
  }
72
72
  }
73
73
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
74
- ._dropdown_12nx94k_67{
74
+ ._dropdown_1nvnz7j_66{
75
75
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
76
76
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
77
77
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -79,14 +79,14 @@
79
79
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
80
80
  }
81
81
  }
82
- ._dropdown_12nx94k_67 {
82
+ ._dropdown_1nvnz7j_66 {
83
83
  display:flex;
84
84
  flex-direction:column;
85
85
  }
86
- ._triggerWrapper_12nx94k_74{
86
+ ._triggerWrapper_1nvnz7j_73{
87
87
  display:inline-block;
88
88
  }
89
- ._contentWrapper_12nx94k_78{
89
+ ._contentWrapper_1nvnz7j_77{
90
90
  position:relative;
91
91
 
92
92
  display:block;
@@ -98,64 +98,96 @@
98
98
  background-clip:padding-box;
99
99
  box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
100
100
 
101
- transition:opacity linear 200ms, transform linear 200ms;
101
+ transition:opacity var(--rs-transition-function, linear) 200ms, transform var(--rs-transition-function, linear) 200ms;
102
102
  }
103
- [data-popper-placement^="top" ] ._contentWrapper_12nx94k_78{
104
- animation:_fadeInBottomToTop_12nx94k_1 ease 200ms;
103
+ [data-popper-placement^='top'] ._contentWrapper_1nvnz7j_77{
104
+ animation:_fadeInBottomToTop_1nvnz7j_1 var(--rs-transition-function, ease) 200ms;
105
105
  }
106
- [data-popper-placement^="bottom" ] ._contentWrapper_12nx94k_78{
107
- animation:_fadeInTopToBottom_12nx94k_1 ease 200ms;
106
+ [data-popper-placement^='bottom'] ._contentWrapper_1nvnz7j_77{
107
+ animation:_fadeInTopToBottom_1nvnz7j_1 var(--rs-transition-function, ease) 200ms;
108
108
  }
109
- [data-popper-placement^="right"] ._contentWrapper_12nx94k_78{
110
- animation:_fadeInLeftToRight_12nx94k_1 ease 200ms;
109
+ [data-popper-placement^='right'] ._contentWrapper_1nvnz7j_77{
110
+ animation:_fadeInLeftToRight_1nvnz7j_1 var(--rs-transition-function, ease) 200ms;
111
111
  }
112
- [data-popper-placement^="left"] ._contentWrapper_12nx94k_78{
113
- animation:_fadeInRightToLeft_12nx94k_1 ease 200ms;
112
+ [data-popper-placement^='left'] ._contentWrapper_1nvnz7j_77{
113
+ animation:_fadeInRightToLeft_1nvnz7j_1 var(--rs-transition-function, ease) 200ms;
114
114
  }
115
- ._wrapperHidden_12nx94k_109{
115
+ ._wrapperHidden_1nvnz7j_110{
116
116
  opacity:0;
117
117
  }
118
- [data-popper-placement^="top" ] ._wrapperHidden_12nx94k_109{
118
+ [data-popper-placement^='top'] ._wrapperHidden_1nvnz7j_110{
119
119
  transform:translateY(10px);
120
120
  }
121
- [data-popper-placement^="bottom" ] ._wrapperHidden_12nx94k_109{
121
+ [data-popper-placement^='bottom'] ._wrapperHidden_1nvnz7j_110{
122
122
  transform:translateY(-10px);
123
123
  }
124
- [data-popper-placement^="right"] ._wrapperHidden_12nx94k_109{
124
+ [data-popper-placement^='right'] ._wrapperHidden_1nvnz7j_110{
125
125
  transform:translateX(-10px);
126
126
  }
127
- [data-popper-placement^="left"] ._wrapperHidden_12nx94k_109{
127
+ [data-popper-placement^='left'] ._wrapperHidden_1nvnz7j_110{
128
128
  transform:translateX(10px);
129
129
  }
130
- ._modeClassic_12nx94k_129 ._contentWrapper_12nx94k_78{
130
+ ._modeClassic_1nvnz7j_130 ._contentWrapper_1nvnz7j_77{
131
131
  background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
132
132
  }
133
- ._modeRock_12nx94k_133 ._contentWrapper_12nx94k_78{
133
+ ._modeRock_1nvnz7j_134 ._contentWrapper_1nvnz7j_77{
134
134
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
135
135
  }
136
- ._modeRock_12nx94k_133{
136
+ ._modeRock_1nvnz7j_134{
137
137
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
138
- --rs-parent-color-primary-dim-light-theme:var(--rs-color-primary-dim-light-theme);
139
- --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
140
- --rs-parent-color-primary-t-dim-light-theme:var(--rs-color-primary-t-dim-light-theme);
141
- --rs-parent-color-primary-t-fog-light-theme:var(--rs-color-primary-t-fog-light-theme);
138
+ --rs-parent-color-primary-dim-light-theme:var(
139
+ --rs-color-primary-dim-light-theme
140
+ );
141
+ --rs-parent-color-primary-fog-light-theme:var(
142
+ --rs-color-primary-fog-light-theme
143
+ );
144
+ --rs-parent-color-primary-t-dim-light-theme:var(
145
+ --rs-color-primary-t-dim-light-theme
146
+ );
147
+ --rs-parent-color-primary-t-fog-light-theme:var(
148
+ --rs-color-primary-t-fog-light-theme
149
+ );
142
150
 
143
151
  --rs-parent-color-primary-dark-theme:var(--rs-color-primary-dark-theme);
144
- --rs-parent-color-primary-dim-dark-theme:var(--rs-color-primary-dim-dark-theme);
145
- --rs-parent-color-primary-fog-dark-theme:var(--rs-color-primary-fog-dark-theme);
146
- --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
147
- --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
152
+ --rs-parent-color-primary-dim-dark-theme:var(
153
+ --rs-color-primary-dim-dark-theme
154
+ );
155
+ --rs-parent-color-primary-fog-dark-theme:var(
156
+ --rs-color-primary-fog-dark-theme
157
+ );
158
+ --rs-parent-color-primary-t-dim-dark-theme:var(
159
+ --rs-color-primary-t-dim-dark-theme
160
+ );
161
+ --rs-parent-color-primary-t-fog-dark-theme:var(
162
+ --rs-color-primary-t-fog-dark-theme
163
+ );
148
164
  }
149
- ._modeRock_12nx94k_133 > *{
165
+ ._modeRock_1nvnz7j_134 > *{
150
166
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
151
- --rs-color-primary-dim-dark-theme:var(--rs-parent-color-primary-dim-light-theme);
152
- --rs-color-primary-fog-dark-theme:var(--rs-parent-color-primary-fog-light-theme);
153
- --rs-color-primary-t-dim-dark-theme:var(--rs-parent-color-primary-t-dim-light-theme);
154
- --rs-color-primary-t-fog-dark-theme:var(--rs-parent-color-primary-t-fog-light-theme);
167
+ --rs-color-primary-dim-dark-theme:var(
168
+ --rs-parent-color-primary-dim-light-theme
169
+ );
170
+ --rs-color-primary-fog-dark-theme:var(
171
+ --rs-parent-color-primary-fog-light-theme
172
+ );
173
+ --rs-color-primary-t-dim-dark-theme:var(
174
+ --rs-parent-color-primary-t-dim-light-theme
175
+ );
176
+ --rs-color-primary-t-fog-dark-theme:var(
177
+ --rs-parent-color-primary-t-fog-light-theme
178
+ );
155
179
 
156
180
  --rs-color-primary-light-theme:var(--rs-parent-color-primary-dark-theme);
157
- --rs-color-primary-dim-light-theme:var(--rs-parent-color-primary-dim-dark-theme);
158
- --rs-color-primary-fog-light-theme:var(--rs-parent-color-primary-fog-dark-theme);
159
- --rs-color-primary-t-dim-light-theme:var(--rs-parent-color-primary-t-dim-dark-theme);
160
- --rs-color-primary-t-fog-light-theme:var(--rs-parent-color-primary-t-fog-dark-theme);
181
+ --rs-color-primary-dim-light-theme:var(
182
+ --rs-parent-color-primary-dim-dark-theme
183
+ );
184
+ --rs-color-primary-fog-light-theme:var(
185
+ --rs-parent-color-primary-fog-dark-theme
186
+ );
187
+ --rs-color-primary-t-dim-light-theme:var(
188
+ --rs-parent-color-primary-t-dim-dark-theme
189
+ );
190
+ --rs-color-primary-t-fog-light-theme:var(
191
+ --rs-parent-color-primary-t-fog-dark-theme
192
+ );
161
193
  }
package/lib/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- /// <reference types="react" />
2
- /**
3
- * @deprecated use named import instead
4
- */
5
- declare const DefaultDropdown: import("react").ForwardRefExoticComponent<import("./dropdown").DropdownProps & import("react").RefAttributes<import("./dropdown").DropdownImperativeHandle>>;
6
- export default DefaultDropdown;
7
- export { Dropdown } from './dropdown';
8
- export type { DropdownProps, DropdownImperativeHandle } from './dropdown';
1
+ /**
2
+ * @deprecated use named import instead
3
+ */
4
+ declare const DefaultDropdown: import("react").ForwardRefExoticComponent<import("./dropdown").DropdownProps & import("react").RefAttributes<import("./dropdown").DropdownImperativeHandle>>;
5
+ export default DefaultDropdown;
6
+ export { Dropdown } from './dropdown';
7
+ export type { DropdownProps, DropdownImperativeHandle } from './dropdown';
package/lib/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import './index.css';
2
2
  import { Dropdown } from './dropdown.js';
3
3
  export { Dropdown } from './dropdown.js';
4
- /**
5
- * @deprecated use named import instead
4
+ /**
5
+ * @deprecated use named import instead
6
6
  */
7
7
 
8
8
  const DefaultDropdown = Dropdown;
package/lib/use-dropdown-state.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- export declare enum DROPDOWN_STATES {
2
- OPENING = "OPENING",
3
- OPEN = "OPEN",
4
- CLOSING = "CLOSING",
5
- CLOSE = "CLOSE"
6
- }
7
- export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
1
+ export declare enum DROPDOWN_STATES {
2
+ OPENING = "OPENING",
3
+ OPEN = "OPEN",
4
+ CLOSING = "CLOSING",
5
+ CLOSE = "CLOSE"
6
+ }
7
+ export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
package/lib/use-scrollable-container.d.ts CHANGED
@@ -1,14 +1,13 @@
1
- /// <reference types="react" />
2
- import { Property } from 'csstype';
3
- /**
4
- * Hack for firefox and old safari.
5
- * Set "overflowY: scroll" for scrollable container when there is something to scroll.
6
- * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
7
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
8
- */
9
- export declare const useScrollableContainer: () => {
10
- setContentEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement>>;
11
- scrollableStyles: {
12
- overflowY: Property.OverflowY;
13
- };
14
- };
1
+ import { Property } from 'csstype';
2
+ /**
3
+ * Hack for firefox and old safari.
4
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
5
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
6
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
7
+ */
8
+ export declare const useScrollableContainer: () => {
9
+ setContentEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement>>;
10
+ scrollableStyles: {
11
+ overflowY: Property.OverflowY;
12
+ };
13
+ };
package/lib/use-scrollable-container.js CHANGED
@@ -4,11 +4,11 @@ import { useState, useEffect } from 'react';
4
4
  function isOverflown(element) {
5
5
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
6
6
  }
7
- /**
8
- * Hack for firefox and old safari.
9
- * Set "overflowY: scroll" for scrollable container when there is something to scroll.
10
- * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
11
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
7
+ /**
8
+ * Hack for firefox and old safari.
9
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
10
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
11
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
12
12
  */
13
13
 
14
14
 
package/llm/components/dropdown.md ADDED
@@ -0,0 +1,72 @@
1
+ # Dropdown
2
+
3
+ Dropdown components allow you to display content in an overlay beneath a trigger component.
4
+
5
+ ## Usage
6
+
7
+ ### Features showcase
8
+
9
+ #### Fixed width example
10
+
11
+ ```tsx
12
+ import { useState } from 'react';
13
+ import { Dropdown } from '@rescui/dropdown';
14
+ import { Button } from '@rescui/button';
15
+ import { Input } from '@rescui/input';
16
+ import { DownOutlineIcon } from '@rescui/icons';
17
+ import { textCn } from '@rescui/typography';
18
+ import { Tab, TabList } from '@rescui/tab-list';
19
+
20
+ const getDefaultInputValue = tab =>
21
+ tab === 'HTTPS'
22
+ ? 'https://github.com/JetBrains/webteam-ui.git'
23
+ : 'git@github.com:JetBrains/webteam-ui.git';
24
+
25
+ const Demo = () => {
26
+ const [showDropdown, setShowDropdown] = React.useState(false);
27
+ const [openTab, setOpenTab] = React.useState('HTTPS');
28
+ const [inputValue, setInputValue] = useState(getDefaultInputValue(openTab));
29
+
30
+ const handleTabSwitch = newTab => {
31
+ setOpenTab(newTab);
32
+ setInputValue(getDefaultInputValue(newTab));
33
+ };
34
+
35
+ const handleCloseDropdown = () => setShowDropdown(false);
36
+ const handleClick = () => setShowDropdown(showDropdown => !showDropdown);
37
+
38
+ return (
39
+ <Dropdown
40
+ isOpen={showDropdown}
41
+ minWidth={420}
42
+ onRequestClose={handleCloseDropdown}
43
+ trigger={
44
+ <Button icon={<DownOutlineIcon />} onClick={handleClick} iconPosition="right">
45
+ Get Code
46
+ </Button>
47
+ }
48
+ >
49
+ <div style={{ padding: '16px' }}>
50
+ <h3 className={textCn('rs-h3')}>Clone</h3>
51
+ <TabList
52
+ value={openTab}
53
+ short
54
+ onChange={handleTabSwitch}
55
+ className={'rs-offset-top-24'}
56
+ >
57
+ <Tab value={'HTTPS'}>HTTPS</Tab>
58
+ <Tab value={'SSH'}>SSH</Tab>
59
+ </TabList>
60
+ <Input
61
+ className={'rs-docs-offset-top-12'}
62
+ note={`Clone using ${openTab}`}
63
+ value={inputValue}
64
+ onChange={e => setInputValue(e.target.value)}
65
+ />
66
+ </div>
67
+ </Dropdown>
68
+ );
69
+ };
70
+
71
+ render(<Demo />);
72
+ ```
package/llm/index.md ADDED
@@ -0,0 +1,2 @@
1
+ - Components and Hooks
2
+ - [Dropdown](./components/dropdown.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.9.7",
3
+ "version": "0.10.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -9,6 +9,7 @@
9
9
  "src:main": "src/index.ts",
10
10
  "files": [
11
11
  "lib",
12
+ "llm",
12
13
  "LICENSE.txt"
13
14
  ],
14
15
  "publishConfig": {
@@ -29,15 +30,15 @@
29
30
  "react-dom": ">=16.8.0 <20"
30
31
  },
31
32
  "devDependencies": {
32
- "@rescui/colors": "^0.3.0",
33
- "@rescui/icons": "^1.7.5",
34
- "@rescui/scripts": "^0.5.1",
35
- "@rescui/typography": "^0.26.0",
36
- "@rescui/visual-regression": "^0.1.4"
33
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
34
+ "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
35
+ "@rescui/scripts": "0.5.2",
36
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
37
+ "@rescui/visual-regression": "0.1.4"
37
38
  },
38
39
  "scripts": {
39
40
  "build": "rescui-scripts build"
40
41
  },
41
42
  "nx": {},
42
- "gitHead": "fcf55336342c842c02c07a178e9bacb9a033ef83"
43
+ "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
43
44
  }