Merge pull request #73 from solved-ac/realease/v0.6.3

Release

Author: shiftpsh

example/src/stories/Tooltip.stories.tsx

@@ -57,6 +57,11 @@ export default {
         'Whether to activate the tooltip on mouse click - repeated clicks will toggle the tooltip',
       defaultValue: false,
     },
+    zIndex: {
+      control: 'number',
+      description: 'The z-index of the tooltip',
+      defaultValue: 0,
+    },
     noDefaultStyles: {
       control: 'boolean',
       description:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Select.tsx

@@ -27,7 +27,7 @@ import React, {
   useImperativeHandle,
   useLayoutEffect,
   useRef,
-  useState,
+  useState
 } from 'react'
 import { PP, PR } from '../types/PolymorphicElementProps'
 import { Timeout } from '../types/Timeout'
@@ -93,7 +93,7 @@ export interface SelectProps<T extends SelectItemNode> {
   value?: string | null
   zIndex?: number
   onChange?: (value: T) => void
-  render?: (value: T) => ReactNode
+  render?: (value: T, index?: number) => ReactNode
   ListItemProps?: Partial<PP<'div', ListItemProps>>
 }
 
@@ -327,23 +327,25 @@ export const Select = forwardRefWithGenerics(
                               ? theme.color.background.card.main
                               : undefined
                           }
-                          style={{
-                            ...(disableEllipsis
-                              ? {}
-                              : {
-                                  textOverflow: 'ellipsis',
-                                  overflow: 'hidden',
-                                  whiteSpace: 'nowrap',
-                                }),
-                            ...(ListItemProps?.style || {}),
-                            fontWeight: i === selectedIndex ? 'bold' : 'normal',
-                          }}
                           ref={(node) => {
                             listRef.current[i] = node
                             listContentRef.current[i] =
                               typeof item === 'string' ? item : item.value
                           }}
                           {...getItemProps({
+                            ...ListItemProps,
+                            style: {
+                              ...(disableEllipsis
+                                ? {}
+                                : {
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                  }),
+                              ...(ListItemProps?.style || {}),
+                              fontWeight:
+                                i === selectedIndex ? 'bold' : 'normal',
+                            },
                             onTouchStart() {
                               allowSelectRef.current = true
                               allowMouseUpRef.current = false
@@ -374,9 +376,8 @@ export const Select = forwardRefWithGenerics(
                               })
                             },
                           })}
-                          {...ListItemProps}
                         >
-                          {render(item)}
+                          {render(item, i)}
                         </ListItem>
                       )
                     })}

src/components/Tooltip.tsx

@@ -67,12 +67,13 @@ export type TooltipProps = {
   theme?: SolvedTheme
   children?: ReactNode
   arrow?: boolean
-  keepOpen?: boolean
+  open?: boolean
   place?: TooltipPlacement
   interactive?: boolean
   activateOnHover?: boolean
   activateOnClick?: boolean
   noThemeChange?: boolean
+  zIndex?: number
 } & (
   | {
       noDefaultStyles: false
@@ -125,16 +126,17 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     noDefaultStyles: noBackground,
     children,
     arrow: drawArrow = true,
-    keepOpen = false,
+    open,
     place,
     interactive = false,
     activateOnHover = true,
     activateOnClick = false,
     noThemeChange = false,
+    zIndex,
     ...cardProps
   } = props
   const [isOpen, setIsOpen] = useState(false)
-  const renderTooltip = keepOpen || isOpen
+  const renderTooltip = typeof open === 'boolean' ? open : isOpen
 
   const arrowRef = useRef(null)
 
@@ -176,7 +178,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
       enabled: activateOnClick,
     }),
     useDismiss(context, {
-      enabled: activateOnClick && !keepOpen,
+      enabled: activateOnClick,
     }),
   ])
 
@@ -200,14 +202,16 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
                 <RenderComponent
                   ref={refs.setFloating}
                   {...getFloatingProps({
+                    ...(cardProps || {}),
                     style: {
+                      ...('style' in cardProps ? cardProps.style || {} : {}),
                       position: strategy,
                       top: y || 0,
                       left: x || 0,
                       pointerEvents: interactive ? 'auto' : 'none',
+                      zIndex,
                     },
                   })}
-                  {...cardProps}
                   transition={{ duration: 0.2, ease: 'easeInOut' }}
                   initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}