react-ui-suite 1.1.5 → 1.1.7

package/dist/{Combobox-UQBN7KFK.css → Combobox-YP4UGGM7.css}

@@ -6,14 +6,18 @@
   border-color: #64748b;
 }
 
-.rui-combobox__listbox {
-  max-height: 16rem;
-  overflow: auto;
-  padding-left: 0.25rem;
-  padding-right: 1rem;
-  margin: 0px;
-  scrollbar-width: none;
-}
+.rui-combobox__listbox {
+  max-height: 16rem;
+  overflow: auto;
+  padding-left: 0.25rem;
+  padding-right: 1rem;
+  margin: 0px;
+  scrollbar-width: none;
+}
+
+.rui-popover[data-scrollbar-visible="false"] .rui-combobox__listbox {
+  padding-right: 0.25rem;
+}
 
 .rui-combobox__listbox::-webkit-scrollbar {
   width: 0;

package/dist/{Select-UA2CM52H.css → Select-HD5HKBTM.css}

@@ -52,14 +52,18 @@
   font-weight: 600;
 }
 
-.rui-select__list {
-  margin: 0;
-  padding: 0rem 1rem 0rem 0.25rem;
-  list-style: none;
-  max-height: 16rem;
-  overflow: auto;
-  scrollbar-width: none;
-}
+.rui-select__list {
+  margin: 0;
+  padding: 0rem 1rem 0rem 0.25rem;
+  list-style: none;
+  max-height: 16rem;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.rui-popover[data-scrollbar-visible="false"] .rui-select__list {
+  padding-right: 0.25rem;
+}
 
 .rui-select__list::-webkit-scrollbar {
   width: 0;

package/dist/index.js

@@ -1062,7 +1062,10 @@ function getAnchorPosition(anchor) {
     width: rect.width
   };
 }
-function Scrollbar({ scrollRef }) {
+function Scrollbar({
+  scrollRef,
+  onVisibilityChange
+}) {
   const [{ visible, size, offset }, setThumbState] = React7.useState({
     visible: false,
     size: MIN_THUMB_SIZE,
@@ -1103,6 +1106,9 @@ function Scrollbar({ scrollRef }) {
       cancelAnimationFrame(raf);
     };
   }, [scrollRef]);
+  React7.useEffect(() => {
+    onVisibilityChange == null ? void 0 : onVisibilityChange(visible);
+  }, [onVisibilityChange, visible]);
   React7.useEffect(() => {
     const handlePointerMove = (event) => {
       const drag = dragState.current;
@@ -1188,6 +1194,7 @@ function Scrollbar({ scrollRef }) {
 }
 function Popover({ className, anchorRef, rootRef, children }) {
   const scrollRef = React7.useRef(null);
+  const [scrollbarVisible, setScrollbarVisible] = React7.useState(false);
   const [position, setPosition] = React7.useState(
     () => {
       var _a;
@@ -1228,10 +1235,11 @@ function Popover({ className, anchorRef, rootRef, children }) {
         shouldPortal && "rui-popover--portal",
         className
       ),
+      "data-scrollbar-visible": scrollbarVisible ? "true" : "false",
       style: popoverStyle,
       children: /* @__PURE__ */ jsxs8("div", { className: "rui-popover__inner", children: [
         children({ scrollRef }),
-        /* @__PURE__ */ jsx9(Scrollbar, { scrollRef })
+        /* @__PURE__ */ jsx9(Scrollbar, { scrollRef, onVisibilityChange: setScrollbarVisible })
       ] })
     }
   );
@@ -1269,7 +1277,7 @@ function useOutsideClick(refs, handler) {
 // components/Combobox/Listbox.tsx
 import * as React8 from "react";
 import clsx9 from "clsx";
-import "./Combobox-UQBN7KFK.css";
+import "./Combobox-YP4UGGM7.css";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Listbox({
   id,
@@ -1343,7 +1351,7 @@ function Listbox({
 
 // components/Combobox/Combobox.tsx
 import clsx10 from "clsx";
-import "./Combobox-UQBN7KFK.css";
+import "./Combobox-YP4UGGM7.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function InnerCombobox({
   options,
@@ -1846,7 +1854,7 @@ import * as React12 from "react";
 // components/Select/Select.tsx
 import * as React11 from "react";
 import clsx12 from "clsx";
-import "./Select-UA2CM52H.css";
+import "./Select-HD5HKBTM.css";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function Select({
   label,
@@ -1866,6 +1874,7 @@ function Select({
   const containerRef = React11.useRef(null);
   const inputRef = React11.useRef(null);
   const chevronRef = React11.useRef(null);
+  const popoverRef = React11.useRef(null);
   const popoverListRef = React11.useRef(null);
   const suppressToggleRef = React11.useRef(false);
   const id = React11.useId();
@@ -1885,10 +1894,14 @@ function Select({
   );
   const activeIndex = activeIndexState;
   const [selected, setSelected] = useControlledState(value, defaultValue != null ? defaultValue : null);
-  useOutsideClick(
-    [containerRef],
-    () => setOpen(false)
+  const outsideClickRefs = React11.useMemo(
+    () => [
+      containerRef,
+      popoverRef
+    ],
+    []
   );
+  useOutsideClick(outsideClickRefs, () => setOpen(false));
   const selectedOption = (_a = options.find((opt) => opt.value === selected)) != null ? _a : null;
   const selectedIndex = React11.useMemo(
     () => options.findIndex((opt) => opt.value === selected),
@@ -2055,7 +2068,7 @@ function Select({
           }
           setOpen((o) => !o);
         },
-        children: open && /* @__PURE__ */ jsx13(Popover, { anchorRef: containerRef, className: listboxHighlight, children: ({ scrollRef }) => {
+        children: open && /* @__PURE__ */ jsx13(Popover, { anchorRef: containerRef, rootRef: popoverRef, className: listboxHighlight, children: ({ scrollRef }) => {
           popoverListRef.current = scrollRef;
           return /* @__PURE__ */ jsx13(
             "ul",