fix(Underlay): z-index

.changeset/forty-onions-exercise.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix RangeSlider to avoid getting stuck at max or min values.

.changeset/soft-laws-camp.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix Underlay's zIndex so modal dialogs can be stackable.

src/components/fields/Slider/SliderThumb.tsx

@@ -21,7 +21,7 @@ export interface SliderThumbProps extends AriaSliderThumbOptions {
 }
 
 export function SliderThumb(props: SliderThumbProps) {
-  let { state, inputRef, isDisabled } = props;
+  let { state, index, inputRef, isDisabled } = props;
 
   const backupRef = useRef<HTMLInputElement>(null);
 
@@ -37,14 +37,21 @@ export function SliderThumb(props: SliderThumbProps) {
 
   const { hoverProps, isHovered } = useHover({ isDisabled });
 
+  const isCollapsed = state.step === 2 && state.values[0] === state.values[1];
+  const isStuck =
+    state.values[index] === state.getThumbMaxValue(index) &&
+    state.values[index] === state.getThumbMinValue(index);
+
   const mods = useMemo(() => {
     return {
       hovered: isHovered,
       dragged: isDragging,
       focused: !isDragging && isFocused,
       disabled: isDisabled,
+      collapsed: isCollapsed,
+      stuck: isStuck,
     };
-  }, [isHovered, isDragging, isFocused, isDisabled]);
+  }, [isHovered, isCollapsed, isStuck, isDragging, isFocused, isDisabled]);
 
   return (
     <SliderThumbElement

src/components/fields/Slider/elements.ts

@@ -16,6 +16,10 @@ export const SliderThumbElement = tasty({
     boxShadow: '@focus-shadow, @dragged-shadow, @drop-shadow',
     radius: '50%',
     transition: 'theme',
+    zIndex: {
+      '': 0,
+      'collapsed & !stuck': 1,
+    },
 
     '@drop-shadow': '0px 2px 4px #dark.2',
     '@focus-shadow': {

src/components/overlays/Modal/Underlay.tsx

@@ -13,7 +13,7 @@ const UnderlayElement = tasty({
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 9,
+    zIndex: 10,
     transitionDelay: '0ms',
     opacity: {
       '': 0,

src/components/portal/Portal.tsx

@@ -21,7 +21,7 @@ import { usePortal } from './usePortal';
  *    Portal will be rendered outside me!
  *
  *    <Portal>
- *      <div>some content will be showed outside of parent container</div>
+ *      <div>some content will be shown outside the parent container</div>
  *    </Portal>
  *  </div>
  * ```