@rescui/dropdown 0.10.0 → 0.10.1-RUI-293-Update-menu-component-6ca9d26d3.22

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 +29 -29
  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_1rn0hhb_59",
3
- "themeDark": "_themeDark_1rn0hhb_62",
4
- "dropdown": "_dropdown_1rn0hhb_66",
5
- "triggerWrapper": "_triggerWrapper_1rn0hhb_73",
6
- "contentWrapper": "_contentWrapper_1rn0hhb_77",
7
- "fadeInBottomToTop": "_fadeInBottomToTop_1rn0hhb_1",
8
- "fadeInTopToBottom": "_fadeInTopToBottom_1rn0hhb_1",
9
- "fadeInLeftToRight": "_fadeInLeftToRight_1rn0hhb_1",
10
- "fadeInRightToLeft": "_fadeInRightToLeft_1rn0hhb_1",
11
- "wrapperHidden": "_wrapperHidden_1rn0hhb_110",
12
- "modeClassic": "_modeClassic_1rn0hhb_130",
13
- "modeRock": "_modeRock_1rn0hhb_134"
2
+ "themeLight": "_themeLight_3gutxv_59",
3
+ "themeDark": "_themeDark_3gutxv_62",
4
+ "dropdown": "_dropdown_3gutxv_66",
5
+ "triggerWrapper": "_triggerWrapper_3gutxv_73",
6
+ "contentWrapper": "_contentWrapper_3gutxv_77",
7
+ "fadeInBottomToTop": "_fadeInBottomToTop_3gutxv_1",
8
+ "fadeInTopToBottom": "_fadeInTopToBottom_3gutxv_1",
9
+ "fadeInLeftToRight": "_fadeInLeftToRight_3gutxv_1",
10
+ "fadeInRightToLeft": "_fadeInRightToLeft_3gutxv_1",
11
+ "wrapperHidden": "_wrapperHidden_3gutxv_110",
12
+ "modeClassic": "_modeClassic_3gutxv_130",
13
+ "modeRock": "_modeRock_3gutxv_134"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes _fadeInTopToBottom_1rn0hhb_1{
1
+ @keyframes _fadeInTopToBottom_3gutxv_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_1rn0hhb_1{
13
+ @keyframes _fadeInBottomToTop_3gutxv_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_1rn0hhb_1{
25
+ @keyframes _fadeInLeftToRight_3gutxv_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_1rn0hhb_1{
37
+ @keyframes _fadeInRightToLeft_3gutxv_1{
38
38
  0%{
39
39
  opacity:0;
40
40
 
@@ -46,13 +46,13 @@
46
46
  transform:none;
47
47
  }
48
48
  }
49
- ._themeLight_1rn0hhb_59{
49
+ ._themeLight_3gutxv_59{
50
50
  --rs-theme-dark:0;
51
51
  }
52
- ._themeDark_1rn0hhb_62{
52
+ ._themeDark_3gutxv_62{
53
53
  --rs-theme-dark:1;
54
54
  }
55
- ._dropdown_1rn0hhb_66{
55
+ ._dropdown_3gutxv_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_1rn0hhb_66{
65
+ ._dropdown_3gutxv_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_1rn0hhb_66{
74
+ ._dropdown_3gutxv_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_1rn0hhb_66 {
82
+ ._dropdown_3gutxv_66 {
83
83
  display:flex;
84
84
  flex-direction:column;
85
85
  }
86
- ._triggerWrapper_1rn0hhb_73{
86
+ ._triggerWrapper_3gutxv_73{
87
87
  display:inline-block;
88
88
  }
89
- ._contentWrapper_1rn0hhb_77{
89
+ ._contentWrapper_3gutxv_77{
90
90
  position:relative;
91
91
 
92
92
  display:block;
@@ -100,40 +100,40 @@
100
100
 
101
101
  transition:opacity var(--rs-transition-function, linear) 200ms, transform var(--rs-transition-function, linear) 200ms;
102
102
  }
103
- [data-popper-placement^='top'] ._contentWrapper_1rn0hhb_77{
104
- animation:_fadeInBottomToTop_1rn0hhb_1 var(--rs-transition-function, ease) 200ms;
103
+ [data-popper-placement^='top'] ._contentWrapper_3gutxv_77{
104
+ animation:_fadeInBottomToTop_3gutxv_1 var(--rs-transition-function, ease) 200ms;
105
105
  }
106
- [data-popper-placement^='bottom'] ._contentWrapper_1rn0hhb_77{
107
- animation:_fadeInTopToBottom_1rn0hhb_1 var(--rs-transition-function, ease) 200ms;
106
+ [data-popper-placement^='bottom'] ._contentWrapper_3gutxv_77{
107
+ animation:_fadeInTopToBottom_3gutxv_1 var(--rs-transition-function, ease) 200ms;
108
108
  }
109
- [data-popper-placement^='right'] ._contentWrapper_1rn0hhb_77{
110
- animation:_fadeInLeftToRight_1rn0hhb_1 var(--rs-transition-function, ease) 200ms;
109
+ [data-popper-placement^='right'] ._contentWrapper_3gutxv_77{
110
+ animation:_fadeInLeftToRight_3gutxv_1 var(--rs-transition-function, ease) 200ms;
111
111
  }
112
- [data-popper-placement^='left'] ._contentWrapper_1rn0hhb_77{
113
- animation:_fadeInRightToLeft_1rn0hhb_1 var(--rs-transition-function, ease) 200ms;
112
+ [data-popper-placement^='left'] ._contentWrapper_3gutxv_77{
113
+ animation:_fadeInRightToLeft_3gutxv_1 var(--rs-transition-function, ease) 200ms;
114
114
  }
115
- ._wrapperHidden_1rn0hhb_110{
115
+ ._wrapperHidden_3gutxv_110{
116
116
  opacity:0;
117
117
  }
118
- [data-popper-placement^='top'] ._wrapperHidden_1rn0hhb_110{
118
+ [data-popper-placement^='top'] ._wrapperHidden_3gutxv_110{
119
119
  transform:translateY(10px);
120
120
  }
121
- [data-popper-placement^='bottom'] ._wrapperHidden_1rn0hhb_110{
121
+ [data-popper-placement^='bottom'] ._wrapperHidden_3gutxv_110{
122
122
  transform:translateY(-10px);
123
123
  }
124
- [data-popper-placement^='right'] ._wrapperHidden_1rn0hhb_110{
124
+ [data-popper-placement^='right'] ._wrapperHidden_3gutxv_110{
125
125
  transform:translateX(-10px);
126
126
  }
127
- [data-popper-placement^='left'] ._wrapperHidden_1rn0hhb_110{
127
+ [data-popper-placement^='left'] ._wrapperHidden_3gutxv_110{
128
128
  transform:translateX(10px);
129
129
  }
130
- ._modeClassic_1rn0hhb_130 ._contentWrapper_1rn0hhb_77{
130
+ ._modeClassic_3gutxv_130 ._contentWrapper_3gutxv_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_1rn0hhb_134 ._contentWrapper_1rn0hhb_77{
133
+ ._modeRock_3gutxv_134 ._contentWrapper_3gutxv_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_1rn0hhb_134{
136
+ ._modeRock_3gutxv_134{
137
137
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
138
138
  --rs-parent-color-primary-dim-light-theme:var(
139
139
  --rs-color-primary-dim-light-theme
@@ -162,7 +162,7 @@
162
162
  --rs-color-primary-t-fog-dark-theme
163
163
  );
164
164
  }
165
- ._modeRock_1rn0hhb_134 > *{
165
+ ._modeRock_3gutxv_134 > *{
166
166
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
167
167
  --rs-color-primary-dim-dark-theme:var(
168
168
  --rs-parent-color-primary-dim-light-theme
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.10.0",
3
+ "version": "0.10.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
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.6",
34
- "@rescui/scripts": "^0.5.1",
35
- "@rescui/typography": "^0.27.0",
36
- "@rescui/visual-regression": "^0.1.4"
33
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.57+6ca9d26d3",
34
+ "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
35
+ "@rescui/scripts": "0.5.2",
36
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
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": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
43
+ "gitHead": "6ca9d26d30da536dc5a10fdd86222129e2832efa"
43
44
  }