@saas-ui/forms 2.0.0-rc.31 → 2.0.0-rc.32

package/src/select/select-context.tsx

@@ -1,5 +1,6 @@
 import {
   HTMLChakraProps,
+  createStylesContext,
   useControllableState,
   useFormControl,
 } from '@chakra-ui/react'
@@ -9,6 +10,9 @@ import { FieldOptions } from '../types'
 import { mapOptions } from '../utils'
 import { SelectOption } from './select'
 
+export const [SelectStylesProvider, useSelectStyles] =
+  createStylesContext('SuiSelect')
+
 export const [SelectProvider, useSelectContext] = createContext<
   ReturnType<typeof useSelect>
 >({

package/src/select/select.stories.tsx

@@ -2,6 +2,7 @@ import {
   Container,
   Icon,
   MenuItemOption,
+  Stack,
   Tag,
   Wrap,
   WrapItem,
@@ -173,3 +174,81 @@ export const WithNativeSelect = {
     <NativeSelect name="select" options={options} aria-label="Select" />
   ),
 }
+
+export const Sizes = {
+  render: () => (
+    <Stack>
+      <Select name="select" defaultValue="1" size="xs">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" size="sm">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" size="md">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" size="lg">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+    </Stack>
+  ),
+}
+
+export const Variants = {
+  render: () => (
+    <Stack>
+      <Select name="select" defaultValue="1" variant="outline">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" variant="flushed">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" variant="filled">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+      <Select name="select" defaultValue="1" variant="unstyled">
+        <SelectButton />
+        <SelectList>
+          <SelectOption value="">None</SelectOption>
+          <SelectOption value="1">Option 1</SelectOption>
+          <SelectOption value="2">Option 2</SelectOption>
+        </SelectList>
+      </Select>
+    </Stack>
+  ),
+}

package/src/select/select.tsx

@@ -5,7 +5,6 @@ import {
   forwardRef,
   Menu,
   MenuProps,
-  MenuButton,
   MenuList,
   MenuListProps,
   MenuItemOption,
@@ -14,9 +13,10 @@ import {
   ButtonProps,
   omitThemingProps,
   useMultiStyleConfig,
-  SystemStyleObject,
   MenuItemOptionProps,
   useFormControlContext,
+  ThemingProps,
+  useMenuButton,
 } from '@chakra-ui/react'
 import { cx, dataAttr } from '@chakra-ui/utils'
 import { ChevronDownIcon } from '@saas-ui/core'
@@ -26,8 +26,10 @@ import { FieldOption } from '../types'
 import {
   SelectOptions,
   SelectProvider,
+  SelectStylesProvider,
   useSelect,
   useSelectContext,
+  useSelectStyles,
 } from './select-context'
 
 export interface SelectOption
@@ -35,10 +37,12 @@ export interface SelectOption
     FieldOption {}
 
 export interface SelectProps
-  extends Omit<MenuProps, 'children'>,
+  extends Omit<MenuProps, 'children' | 'variant' | 'size'>,
+    ThemingProps<'SuiSelect'>,
     SelectOptions {}
 
-export interface SelectButtonProps extends ButtonProps {}
+export interface SelectButtonProps
+  extends Omit<ButtonProps, 'size' | 'variant'> {}
 
 /**
  * Button that opens the select menu and displays the selected value.
@@ -47,8 +51,6 @@ export interface SelectButtonProps extends ButtonProps {}
  */
 export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
   (props, ref) => {
-    const styles = useMultiStyleConfig('SuiSelect', props)
-
     const {
       displayValue,
       renderValue,
@@ -58,6 +60,8 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
 
     const context = useFormControlContext()
 
+    const styles = useSelectStyles()
+
     const {
       isInvalid,
       isReadOnly,
@@ -92,16 +96,19 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
       _expanded: focusStyles,
       _readOnly: readOnlyStyles,
       _invalid: invalid,
+      minW: 0,
       ...styles.field,
       h: 'auto',
     }
 
+    const buttonProps = useMenuButton(rest, ref)
+
     // Using a Button, so we can simply use leftIcon and rightIcon
     return (
-      <MenuButton
-        as={Button}
-        id={id || React.useId()}
+      <Button
+        {...buttonProps}
         {...buttonStyles}
+        id={id || buttonProps.id}
         {...rest}
         onFocus={onFocus}
         onBlur={onBlur}
@@ -111,10 +118,20 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
         data-focus={dataAttr(isFocused)}
         data-required={dataAttr(isRequired)}
         rightIcon={rightIcon}
-        ref={ref}
       >
-        {renderValue(displayValue) || placeholder}
-      </MenuButton>
+        <chakra.span
+          __css={{
+            display: 'block',
+            pointerEvents: 'none',
+            flex: '1 1 auto',
+            minW: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {renderValue(displayValue) || placeholder}
+        </chakra.span>
+      </Button>
     )
   }
 )
@@ -129,6 +146,8 @@ SelectButton.displayName = 'SelectButton'
 export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props
 
+  const styles = useMultiStyleConfig('SuiSelect', props)
+
   const menuProps = omitThemingProps(rest)
 
   const context = useSelect(props)
@@ -137,19 +156,21 @@ export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
 
   return (
     <SelectProvider value={context}>
-      <Menu {...menuProps} closeOnSelect={!multiple}>
-        <chakra.div className={cx('sui-select')}>
-          {children}
-          <chakra.input
-            {...controlProps}
-            ref={ref}
-            name={name}
-            type="hidden"
-            value={value || ''}
-            className="saas-select__input"
-          />
-        </chakra.div>
-      </Menu>
+      <SelectStylesProvider value={styles}>
+        <Menu {...menuProps} closeOnSelect={!multiple}>
+          <chakra.div className={cx('sui-select')}>
+            {children}
+            <chakra.input
+              {...controlProps}
+              ref={ref}
+              name={name}
+              type="hidden"
+              value={value || ''}
+              className="saas-select__input"
+            />
+          </chakra.div>
+        </Menu>
+      </SelectStylesProvider>
     </SelectProvider>
   )
 })