@rescui/dropdown 0.10.2 → 0.11.0

package/README.md

@@ -1,3 +1,5 @@
 # Dropdown
 
-* [Usage examples](./docs/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/dropdown.d.ts

@@ -34,8 +34,14 @@ export interface DropdownProps {
     closeOnEsc?: boolean;
     closeOnTab?: boolean;
     disableFocusLock?: boolean;
-    /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
+    /**
+     * Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout.
+     * */
     renderInTrigger?: boolean;
+    /**
+     * Disable dropdown flip behavior. By default dropdown will flip its position if it's not fully visible.
+     * */
+    disableFlip?: boolean;
 }
 export interface DropdownImperativeHandle {
     scheduleUpdate: () => void;

package/lib/dropdown.js

@@ -19,7 +19,8 @@ function getPopperOptions(_ref) {
     maxHeight,
     leastMaxHeight,
     maxWidth,
-    minWidth
+    minWidth,
+    disableFlip = false
   } = _ref;
   return {
     placement,
@@ -28,7 +29,7 @@ function getPopperOptions(_ref) {
       enabled: false
     }, {
       name: 'flip',
-      enabled: true
+      enabled: !disableFlip
     }, {
       name: 'offset',
       enabled: true,
@@ -52,7 +53,7 @@ function getPopperOptions(_ref) {
 const Portal = _ref2 => {
   let {
     children,
-    target = typeof window !== 'undefined' ? document.body : undefined
+    target
   } = _ref2;
   return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
@@ -61,7 +62,8 @@ function useOnOutsideClick(_ref3) {
   let {
     onOutsideClick,
     isEnabled,
-    ignoreElements = []
+    ignoreElements = [],
+    ownerDocument
   } = _ref3;
   const ignoreElementRefsExists = ignoreElements.length > 0 && ignoreElements.every(Boolean);
   const handleDocumentClick = useCallback(e => {
@@ -75,21 +77,22 @@ function useOnOutsideClick(_ref3) {
   }, [onOutsideClick, ...ignoreElements]); // eslint-disable-next-line consistent-return
 
   useEffect(() => {
-    if (isEnabled && ignoreElementRefsExists) {
-      document.addEventListener('click', handleDocumentClick, true);
-      return () => document.removeEventListener('click', handleDocumentClick, true);
+    if (isEnabled && ignoreElementRefsExists && ownerDocument) {
+      ownerDocument.addEventListener('click', handleDocumentClick, true);
+      return () => ownerDocument.removeEventListener('click', handleDocumentClick, true);
     }
-  }, [handleDocumentClick, isEnabled, ignoreElementRefsExists]);
+  }, [handleDocumentClick, ignoreElementRefsExists, isEnabled, ownerDocument]);
 }
 
 function useKeyPress(_ref4) {
   let {
     key,
     onKeyPress,
-    isEnabled
+    isEnabled,
+    ownerDocument
   } = _ref4;
   useEffect(() => {
-    if (!isEnabled) {
+    if (!isEnabled || !ownerDocument) {
       return;
     }
 
@@ -100,12 +103,12 @@ function useKeyPress(_ref4) {
       }
     };
 
-    document.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
+    ownerDocument.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
 
     return () => {
-      document.removeEventListener('keydown', keyDownHandler, true);
+      ownerDocument.removeEventListener('keydown', keyDownHandler, true);
     };
-  }, [key, onKeyPress, isEnabled]);
+  }, [isEnabled, key, onKeyPress, ownerDocument]);
 }
 
 const THEME_STYLES = {
@@ -136,7 +139,8 @@ const DropdownRender = (_ref5, externalRef) => {
     closeOnEsc = true,
     closeOnTab = false,
     disableFocusLock = false,
-    renderInTrigger = false
+    renderInTrigger = false,
+    disableFlip = false
   } = _ref5;
   const [popperRef, setPopperRef] = useState(null);
   const [triggerRef, setTriggerRef] = useState(null);
@@ -154,20 +158,24 @@ const DropdownRender = (_ref5, externalRef) => {
     setIsFirstRender(false);
   }, []);
   const isOpen = isFirstRender && !renderInTrigger ? false : isOpenFromProps;
+  const ownerDocument = triggerRef?.ownerDocument;
   useOnOutsideClick({
     isEnabled: isOpen,
     onOutsideClick: onRequestClose,
-    ignoreElements: [popperRef, triggerRef]
+    ignoreElements: [popperRef, triggerRef],
+    ownerDocument
   });
   useKeyPress({
     key: 'Escape',
     isEnabled: isOpen && closeOnEsc,
-    onKeyPress: onRequestClose
+    onKeyPress: onRequestClose,
+    ownerDocument
   });
   useKeyPress({
     key: 'Tab',
     isEnabled: isOpen && closeOnTab,
-    onKeyPress: onRequestClose
+    onKeyPress: onRequestClose,
+    ownerDocument
   });
   const [handleAnimationEnd, dropdownState] = useDropdownState(isOpen, cancelCloseAnimation);
   const {
@@ -179,7 +187,8 @@ const DropdownRender = (_ref5, externalRef) => {
     maxHeight,
     leastMaxHeight,
     minWidth,
-    maxWidth
+    maxWidth,
+    disableFlip
   }));
   useImperativeHandle(externalRef, () => ({
     scheduleUpdate: () => {
@@ -208,9 +217,12 @@ const DropdownRender = (_ref5, externalRef) => {
     // But in this specific context, because of the nature of the state-ref "triggerRef",
     // we are sure that the dropdown wouldn't be rendered on the first client render.
     // Therefore, the first render on the client will be the same as on the server.
-    const triggerStyles = getComputedStyle(triggerRef);
-    themeFromCss = extractThemeFromCss(triggerStyles);
-    primaryColors = extractPrimaryColors(triggerStyles);
+    const triggerStyles = ownerDocument?.defaultView?.getComputedStyle(triggerRef);
+
+    if (triggerStyles) {
+      themeFromCss = extractThemeFromCss(triggerStyles);
+      primaryColors = extractPrimaryColors(triggerStyles);
+    }
   }
 
   const {
@@ -223,7 +235,8 @@ const DropdownRender = (_ref5, externalRef) => {
 
   useEffect(() => {
     if (dropdownShouldBeRendered && scrollableRef.current) {
-      const isTransitionDisabled = window.getComputedStyle(scrollableRef.current).transitionDuration === '0s';
+      const ownerWindow = scrollableRef.current.ownerDocument.defaultView;
+      const isTransitionDisabled = ownerWindow?.getComputedStyle(scrollableRef.current).transitionDuration === '0s';
 
       if (isTransitionDisabled) {
         handleAnimationEnd();
@@ -231,7 +244,7 @@ const DropdownRender = (_ref5, externalRef) => {
     }
   }, [handleAnimationEnd, dropdownShouldBeRendered]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
-    target: renderInTrigger ? triggerRef : undefined
+    target: renderInTrigger ? triggerRef : ownerDocument?.body
   }, /*#__PURE__*/React.createElement("div", {
     ref: setPopperRef,
     style: {
@@ -281,6 +294,8 @@ Dropdown.propTypes = {
   minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   maxHeight: PropTypes.number,
-  leastMaxHeight: PropTypes.number
+  leastMaxHeight: PropTypes.number,
+  renderInTrigger: PropTypes.bool,
+  disableFlip: PropTypes.bool
 };
 export { Dropdown, Dropdown as default };

package/lib/dropdown.p.module.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_1lbffnb_59",
-  "themeDark": "_themeDark_1lbffnb_62",
-  "dropdown": "_dropdown_1lbffnb_66",
-  "triggerWrapper": "_triggerWrapper_1lbffnb_73",
-  "contentWrapper": "_contentWrapper_1lbffnb_77",
-  "fadeInBottomToTop": "_fadeInBottomToTop_1lbffnb_1",
-  "fadeInTopToBottom": "_fadeInTopToBottom_1lbffnb_1",
-  "fadeInLeftToRight": "_fadeInLeftToRight_1lbffnb_1",
-  "fadeInRightToLeft": "_fadeInRightToLeft_1lbffnb_1",
-  "wrapperHidden": "_wrapperHidden_1lbffnb_110",
-  "modeClassic": "_modeClassic_1lbffnb_130",
-  "modeRock": "_modeRock_1lbffnb_134"
+  "themeLight": "_themeLight_1ibsugm_59",
+  "themeDark": "_themeDark_1ibsugm_62",
+  "dropdown": "_dropdown_1ibsugm_66",
+  "triggerWrapper": "_triggerWrapper_1ibsugm_73",
+  "contentWrapper": "_contentWrapper_1ibsugm_77",
+  "fadeInBottomToTop": "_fadeInBottomToTop_1ibsugm_1",
+  "fadeInTopToBottom": "_fadeInTopToBottom_1ibsugm_1",
+  "fadeInLeftToRight": "_fadeInLeftToRight_1ibsugm_1",
+  "fadeInRightToLeft": "_fadeInRightToLeft_1ibsugm_1",
+  "wrapperHidden": "_wrapperHidden_1ibsugm_110",
+  "modeClassic": "_modeClassic_1ibsugm_130",
+  "modeRock": "_modeRock_1ibsugm_134"
 };
 export { styles as default };

package/lib/index.css

@@ -1,4 +1,4 @@
-@keyframes _fadeInTopToBottom_1lbffnb_1{
+@keyframes _fadeInTopToBottom_1ibsugm_1{
   0%{
     opacity:0;
 
@@ -10,7 +10,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInBottomToTop_1lbffnb_1{
+@keyframes _fadeInBottomToTop_1ibsugm_1{
   0%{
     opacity:0;
 
@@ -22,7 +22,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInLeftToRight_1lbffnb_1{
+@keyframes _fadeInLeftToRight_1ibsugm_1{
   0%{
     opacity:0;
 
@@ -34,7 +34,7 @@
     transform:none;
   }
 }
-@keyframes _fadeInRightToLeft_1lbffnb_1{
+@keyframes _fadeInRightToLeft_1ibsugm_1{
   0%{
     opacity:0;
 
@@ -46,13 +46,13 @@
     transform:none;
   }
 }
-._themeLight_1lbffnb_59{
+._themeLight_1ibsugm_59{
   --rs-theme-dark:0;
 }
-._themeDark_1lbffnb_62{
+._themeDark_1ibsugm_62{
   --rs-theme-dark:1;
 }
-._dropdown_1lbffnb_66{
+._dropdown_1ibsugm_66{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -62,7 +62,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1lbffnb_66{
+._dropdown_1ibsugm_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)));
     --_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)));
     --_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 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._dropdown_1lbffnb_66{
+._dropdown_1ibsugm_66{
     --_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);
     --_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));
     --_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 @@
     --_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));
 }
   }
-._dropdown_1lbffnb_66 {
+._dropdown_1ibsugm_66 {
   display:flex;
   flex-direction:column;
 }
-._triggerWrapper_1lbffnb_73{
+._triggerWrapper_1ibsugm_73{
   display:inline-block;
 }
-._contentWrapper_1lbffnb_77{
+._contentWrapper_1ibsugm_77{
   position:relative;
 
   display:block;
@@ -100,40 +100,40 @@
 
   transition:opacity var(--rs-transition-function, linear) 200ms, transform var(--rs-transition-function, linear) 200ms;
 }
-[data-popper-placement^='top'] ._contentWrapper_1lbffnb_77{
-  animation:_fadeInBottomToTop_1lbffnb_1 var(--rs-transition-function, ease) 200ms;
+[data-popper-placement^='top'] ._contentWrapper_1ibsugm_77{
+  animation:_fadeInBottomToTop_1ibsugm_1 var(--rs-transition-function, ease) 200ms;
 }
-[data-popper-placement^='bottom'] ._contentWrapper_1lbffnb_77{
-  animation:_fadeInTopToBottom_1lbffnb_1 var(--rs-transition-function, ease) 200ms;
+[data-popper-placement^='bottom'] ._contentWrapper_1ibsugm_77{
+  animation:_fadeInTopToBottom_1ibsugm_1 var(--rs-transition-function, ease) 200ms;
 }
-[data-popper-placement^='right'] ._contentWrapper_1lbffnb_77{
-  animation:_fadeInLeftToRight_1lbffnb_1 var(--rs-transition-function, ease) 200ms;
+[data-popper-placement^='right'] ._contentWrapper_1ibsugm_77{
+  animation:_fadeInLeftToRight_1ibsugm_1 var(--rs-transition-function, ease) 200ms;
 }
-[data-popper-placement^='left'] ._contentWrapper_1lbffnb_77{
-  animation:_fadeInRightToLeft_1lbffnb_1 var(--rs-transition-function, ease) 200ms;
+[data-popper-placement^='left'] ._contentWrapper_1ibsugm_77{
+  animation:_fadeInRightToLeft_1ibsugm_1 var(--rs-transition-function, ease) 200ms;
 }
-._wrapperHidden_1lbffnb_110{
+._wrapperHidden_1ibsugm_110{
   opacity:0;
 }
-[data-popper-placement^='top'] ._wrapperHidden_1lbffnb_110{
+[data-popper-placement^='top'] ._wrapperHidden_1ibsugm_110{
   transform:translateY(10px);
 }
-[data-popper-placement^='bottom'] ._wrapperHidden_1lbffnb_110{
+[data-popper-placement^='bottom'] ._wrapperHidden_1ibsugm_110{
   transform:translateY(-10px);
 }
-[data-popper-placement^='right'] ._wrapperHidden_1lbffnb_110{
+[data-popper-placement^='right'] ._wrapperHidden_1ibsugm_110{
   transform:translateX(-10px);
 }
-[data-popper-placement^='left'] ._wrapperHidden_1lbffnb_110{
+[data-popper-placement^='left'] ._wrapperHidden_1ibsugm_110{
   transform:translateX(10px);
 }
-._modeClassic_1lbffnb_130 ._contentWrapper_1lbffnb_77{
+._modeClassic_1ibsugm_130 ._contentWrapper_1ibsugm_77{
   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));
 }
-._modeRock_1lbffnb_134 ._contentWrapper_1lbffnb_77{
+._modeRock_1ibsugm_134 ._contentWrapper_1ibsugm_77{
   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));
 }
-._modeRock_1lbffnb_134{
+._modeRock_1ibsugm_134{
   --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
   --rs-parent-color-primary-dim-light-theme:var(
     --rs-color-primary-dim-light-theme
@@ -162,7 +162,7 @@
     --rs-color-primary-t-fog-dark-theme
   );
 }
-._modeRock_1lbffnb_134 > *{
+._modeRock_1ibsugm_134 > *{
   --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
   --rs-color-primary-dim-dark-theme:var(
     --rs-parent-color-primary-dim-light-theme

package/lib/use-scrollable-container.js

@@ -1,5 +1,6 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
 
 function isOverflown(element) {
   return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
@@ -15,28 +16,13 @@ function isOverflown(element) {
 const useScrollableContainer = () => {
   const [contentEl, setContentEl] = useState(null);
   const [isScrollable, setIsScrollable] = useState(false);
-  useEffect(() => {
-    if (contentEl && typeof ResizeObserver !== 'undefined') {
-      const containerEl = contentEl.parentElement;
-      const resizeObserver = new ResizeObserver(entries => {
-        // @see https://stackoverflow.com/a/58701523
-        window.requestAnimationFrame(() => {
-          if (!Array.isArray(entries) || !entries.length) {
-            return;
-          }
+  useResizeObserver(contentEl, () => {
+    const containerEl = contentEl.parentElement;
 
-          setIsScrollable(isOverflown(containerEl));
-        });
-      });
-      resizeObserver.observe(contentEl);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-    return () => {};
-  }, [contentEl]);
+    if (containerEl) {
+      setIsScrollable(isOverflown(containerEl));
+    }
+  });
   const scrollableStyles = {
     overflowY: isScrollable ? 'scroll' : 'auto'
   };

package/llm/components/dropdown.md

@@ -0,0 +1,72 @@
+# Dropdown
+
+Dropdown components allow you to display content in an overlay beneath a trigger component.
+
+## Usage
+
+### Features showcase
+
+#### Fixed width example
+
+```tsx
+import { useState } from 'react';
+import { Dropdown } from '@rescui/dropdown';
+import { Button } from '@rescui/button';
+import { Input } from '@rescui/input';
+import { DownOutlineIcon } from '@rescui/icons';
+import { textCn } from '@rescui/typography';
+import { Tab, TabList } from '@rescui/tab-list';
+
+const getDefaultInputValue = tab =>
+  tab === 'HTTPS'
+    ? 'https://github.com/JetBrains/webteam-ui.git'
+    : 'git@github.com:JetBrains/webteam-ui.git';
+
+const Demo = () => {
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const [openTab, setOpenTab] = React.useState('HTTPS');
+  const [inputValue, setInputValue] = useState(getDefaultInputValue(openTab));
+
+  const handleTabSwitch = newTab => {
+    setOpenTab(newTab);
+    setInputValue(getDefaultInputValue(newTab));
+  };
+
+  const handleCloseDropdown = () => setShowDropdown(false);
+  const handleClick = () => setShowDropdown(showDropdown => !showDropdown);
+
+  return (
+    <Dropdown
+      isOpen={showDropdown}
+      minWidth={420}
+      onRequestClose={handleCloseDropdown}
+      trigger={
+        <Button icon={<DownOutlineIcon />} onClick={handleClick} iconPosition="right">
+          Get Code
+        </Button>
+      }
+    >
+      <div style={{ padding: '16px' }}>
+        <h3 className={textCn('rs-h3')}>Clone</h3>
+        <TabList
+          value={openTab}
+          short
+          onChange={handleTabSwitch}
+          className={'rs-offset-top-24'}
+        >
+          <Tab value={'HTTPS'}>HTTPS</Tab>
+          <Tab value={'SSH'}>SSH</Tab>
+        </TabList>
+        <Input
+          className={'rs-docs-offset-top-12'}
+          note={`Clone using ${openTab}`}
+          value={inputValue}
+          onChange={e => setInputValue(e.target.value)}
+        />
+      </div>
+    </Dropdown>
+  );
+};
+
+render(<Demo />);
+```

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Dropdown](./components/dropdown.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -17,6 +18,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.11.8",
+    "@rescui/use-resize-observer": "^0.3.3",
     "classnames": "^2.2.6",
     "popper-max-size-modifier": "^0.2.0",
     "react-focus-lock": "^2.8.1",
@@ -29,15 +31,15 @@
     "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.1",
-    "@rescui/icons": "^1.8.1",
+    "@rescui/colors": "^0.3.2",
+    "@rescui/icons": "^1.8.2",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1",
+    "@rescui/typography": "^0.27.2",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "7aade8fced69c4a1ac61078a1daf2c1cd4f5a1c9"
 }