fix(Select): updates Select for radix v1

Update Select for addition of Portal component

Adds placeholder props to component.

see #286

Author: stuarthendren

package-lock.json

@@ -50,11 +50,11 @@
   "size-limit": [
     {
       "path": "dist/index.cjs.js",
-      "limit": "85 KB"
+      "limit": "90 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "85 KB"
+      "limit": "90 KB"
     }
   ],
   "lint-staged": {
@@ -145,7 +145,7 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
-    "@committed/hooks": "^0.5.0",
+    "@committed/hooks": "^0.8.0",
     "@mdi/js": "^6.6.96",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.0.0",
@@ -173,4 +173,4 @@
     "@radix-ui/react-visually-hidden": "^1.0.0",
     "@stitches/react": "^1.2.7"
   }
-}
+}

package.json

@@ -90,7 +90,7 @@ export const ComponentsProvider: FC<
         )}
       >
         <>
-          <Isolate css={css as any} isolated={isolated}>
+          <Isolate css={css} isolated={isolated}>
             {children}
           </Isolate>
           {viewport && <ToastViewport {...viewport} />}

src/components/ComponentsProvider/ComponentsProvider.tsx

@@ -126,6 +126,22 @@ export const Scrollable: Story = () => (
 export const WithLabel = Template.bind({})
 WithLabel.args = { label: 'Label' }
 
+/**
+ * The Select component support a placeholder.
+ *
+ * A html select would normally have a `value`, if controlled, or `defaultValue` in an uncontrolled state.
+ * However, if a default value is not supplied a placeholder should be used.
+ */
+export const Placeholder: Story = () => {
+  return (
+    <Select label="Demo" name="demo" placeholder="Select an item...">
+      <SelectItem value="1">Item 1</SelectItem>
+      <SelectItem value="2">Item 2</SelectItem>
+      <SelectItem value="3">Item 3</SelectItem>
+    </Select>
+  )
+}
+
 /** Using `<SelectRoot>` and `<SelectRootItem>` gives further access to the underlying Radix implementation, allowing for more customization */
 export const Customization: Story = () => (
   <SelectRoot defaultValue="19">

src/components/Select/Select.stories.tsx

@@ -5,6 +5,7 @@ import {
   Item,
   ItemIndicator,
   ItemText,
+  Portal,
   Root,
   ScrollDownButton,
   ScrollUpButton,
@@ -29,6 +30,7 @@ const StyledTrigger = styled(Trigger, defaultStyles, inputStyles, {
   justifyContent: 'space-between',
   cursor: 'pointer',
   alignContent: 'center',
+  '&[data-placeholder] span:first-child': { color: '$grey8' },
 })
 
 const StyledValue = styled(Value, {
@@ -38,6 +40,9 @@ const StyledValue = styled(Value, {
 const StyledContent = styled(Content, paperStyles, {
   overflow: 'hidden',
   boxShadow: '$2',
+  '&::before': {
+    boxShadow: 'none',
+  },
 })
 
 const StyledViewport = styled(Viewport, {
@@ -109,27 +114,75 @@ const StyledScrollUpButton = styled(ScrollUpButton, scrollButtonStyles)
 
 const StyledScrollDownButton = styled(ScrollDownButton, scrollButtonStyles)
 
+type SelectContentProps = ComponentProps<typeof StyledContent> &
+  CSSProps & {
+    /** By default, portals your content parts into the body, set false to add at dom location. */
+    portalled?: boolean
+    /** Specify a container element to portal the content into. */
+    container?: ComponentProps<typeof Portal>['container']
+  }
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof StyledContent>,
+  SelectContentProps
+>(({ container, portalled = true, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledContent {...props} ref={forwardedRef}>
+      {children}
+    </StyledContent>
+  </ConditionalWrapper>
+))
+SelectContent.toString = () => `.${StyledContent.className}`
+
 type SelectProps = ComponentProps<typeof Root> &
   UseFormControlProps & {
     /** Add a label to the select */
     label?: string
+    /** By default, portals your content parts into the body, set false to add at dom location. */
+    portalled?: boolean
+    /** Specify a placeholder if no value of defaultValue supplied. */
+    placeholder?: ComponentProps<typeof Value>['placeholder']
+    /** Specify a container element to portal the content into. */
+    container?: ComponentProps<typeof Portal>['container']
   } & CSSProps
 
+/**
+ * Select component
+ *
+ * Displays a dropdown list of options to the user - usually triggered by clicking a button.
+ *
+ *
+ * Based on [Radix Select](https://www.radix-ui.com/docs/primitives/components/select).
+ */
 export const Select = forwardRef<ElementRef<typeof Root>, SelectProps>(
-  ({ label, css, children, ...props }, forwardedRef) => {
+  (
+    {
+      label,
+      css,
+      container,
+      portalled = true,
+      placeholder,
+      children,
+      ...props
+    },
+    forwardedRef
+  ) => {
     const [id, { state, disabled, required }, remainingProps] = useFormControl(
       props
     )
     return (
       <ConditionalWrapper
         condition={label}
-        wrapper={(children) => (
+        wrapper={(child) => (
           <Label variant="wrapping">
             <span>
               {label}
               {required === false && <LabelOptional />}
             </span>
-            {children}
+            {child}
           </Label>
         )}
       >
@@ -141,18 +194,20 @@ export const Select = forwardRef<ElementRef<typeof Root>, SelectProps>(
             css={css}
             ref={forwardedRef}
           >
-            <StyledValue />
-            <ChevronDown />
+            <StyledValue placeholder={placeholder} />
+            <Icon>
+              <ChevronDown />
+            </Icon>
           </StyledTrigger>
-          <StyledContent>
+          <SelectContent portalled={portalled} container={container}>
             <StyledScrollUpButton>
               <ChevronUp />
             </StyledScrollUpButton>
             <StyledViewport>{children}</StyledViewport>
             <StyledScrollDownButton>
               <ChevronDown />
             </StyledScrollDownButton>
-          </StyledContent>
+          </SelectContent>
         </Root>
       </ConditionalWrapper>
     )
@@ -175,18 +230,9 @@ export const SelectItem = forwardRef<
   )
 })
 
-/**
- * Select component
- *
- * Displays a dropdown list of options to the user - usually triggered by clicking a button.
- *
- *
- * Based on [Radix Select](https://www.radix-ui.com/docs/primitives/components/select).
- */
 export const SelectTrigger = StyledTrigger
 export const SelectValue = StyledValue
 export const SelectIcon = Icon
-export const SelectContent = StyledContent
 export const SelectViewport = StyledViewport
 export const SelectGroup = Group
 export const SelectItemText = ItemText

src/components/Select/Select.tsx

@@ -1,4 +1,5 @@
-import { useHover } from '@committed/hooks'
+import { useHover, useMergedRefs } from '@committed/hooks'
+import { Arrow, Content, Portal } from '@radix-ui/react-popover'
 import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
@@ -12,7 +13,9 @@ import React, {
 } from 'react'
 import type { CSSProps, VariantProps } from '../../stitches.config'
 import { styled } from '../../stitches.config'
-import { Tooltip } from '../Tooltip'
+import { ConditionalWrapper } from '../../utils'
+import { Popover, PopoverAnchor } from '../Popover'
+import { Tooltip, tooltipArrowStyles, tooltipContentStyles } from '../Tooltip'
 
 type LabelStyle = 'always' | 'hover' | 'none'
 type LabelSide = React.ComponentProps<typeof Tooltip>['side']
@@ -130,41 +133,54 @@ export const StyledSlider = styled(Root, {
 })
 
 type SliderThumbProps = ComponentProps<typeof Thumb> & {
-  labelStyle: LabelStyle
+  showLabel?: boolean
   value: number | string
   labelSide: LabelSide
   portalled: boolean
 }
 
+const StyledPopoverContent = styled(Content, tooltipContentStyles)
+const StyledPopoverArrow = styled(Arrow, tooltipArrowStyles)
+
+type ThumbPopoverContentProps = ComponentProps<typeof Content> & {
+  /** By default, portals your content parts into the body, set false to add at dom location. */
+  portalled?: boolean
+  /** Specify a container element to portal the content into. */
+  container?: ComponentProps<typeof Portal>['container']
+}
+
+const ThumbPopoverContent = forwardRef<
+  ElementRef<typeof StyledPopoverContent>,
+  ThumbPopoverContentProps
+>(({ portalled = true, container, children, ...props }, forwardedRef) => (
+  <ConditionalWrapper
+    condition={portalled}
+    wrapper={(child) => <Portal container={container}>{child}</Portal>}
+  >
+    <StyledPopoverContent {...props} ref={forwardedRef}>
+      <StyledPopoverArrow offset={-1} />
+      {children}
+    </StyledPopoverContent>
+  </ConditionalWrapper>
+))
+ThumbPopoverContent.toString = () => `.${StyledPopoverContent.className}`
+
 export const SliderThumb: FC<SliderThumbProps> = ({
   value,
-  labelStyle,
+  showLabel,
   labelSide,
-  portalled,
+  portalled = true,
   ...props
 }) => {
-  const trackRef = useRef<HTMLSpanElement>(null)
-  const [isHovered] = useHover(trackRef)
-
-  const isOpen = useMemo(() => {
-    if (labelStyle == 'always') {
-      return true
-    }
-    if (labelStyle == 'none') {
-      return false
-    }
-    return isHovered
-  }, [isHovered, labelStyle])
-
   return (
-    <Tooltip
-      open={isOpen}
-      side={labelSide}
-      content={value}
-      portalled={portalled}
-    >
-      <StyledThumb {...props} ref={trackRef} />
-    </Tooltip>
+    <Popover open={showLabel}>
+      <PopoverAnchor>
+        <StyledThumb {...props} />
+      </PopoverAnchor>
+      <ThumbPopoverContent side={labelSide} portalled={portalled}>
+        {value}
+      </ThumbPopoverContent>
+    </Popover>
   )
 }
 
@@ -181,13 +197,14 @@ type SliderProps = ComponentProps<typeof Root> &
     /** Set `false` to turn off the use of portals for labels */
     portalled?: boolean
   }
+type SliderRef = ElementRef<typeof StyledSlider>
 
 /**
  * Sliders can be used for selection from a (numeric) range of values.
  *
  * Based on [Radix Slider](https://radix-ui.com/primitives/docs/components/slider).
  */
-export const Slider = forwardRef<ElementRef<typeof StyledSlider>, SliderProps>(
+export const Slider = forwardRef<SliderRef, SliderProps>(
   (
     {
       min = 0,
@@ -219,13 +236,27 @@ export const Slider = forwardRef<ElementRef<typeof StyledSlider>, SliderProps>(
       labelFunction(val)
     )
 
+    const internalRef = useRef<SliderRef>(null)
+    const [isHovered] = useHover(internalRef)
+    const mergedRef = useMergedRefs<SliderRef>(internalRef, forwardedRef)
+
+    const showLabels = useMemo(() => {
+      if (labelStyle == 'always') {
+        return true
+      }
+      if (labelStyle == 'none') {
+        return false
+      }
+      return isHovered //hover.reduce((acc, cur) => acc || cur, false)
+    }, [isHovered, labelStyle])
+
     return (
       <StyledSlider
         {...props}
         min={min}
         value={values}
         onValueChange={setValues}
-        ref={forwardedRef}
+        ref={mergedRef}
       >
         <SliderTrack>
           <SliderRange />
@@ -234,7 +265,7 @@ export const Slider = forwardRef<ElementRef<typeof StyledSlider>, SliderProps>(
           <SliderThumb
             key={i}
             value={handleLabelFunction(val)}
-            labelStyle={labelStyle}
+            showLabel={showLabels}
             labelSide={labelSide}
             portalled={portalled}
           />