chore:select add label

actifyjs · Oct 31, 2024 · c8c3b7b · c8c3b7b
1 parent 16b26bc
commit c8c3b7b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 361 deletions.
diff --git a/apps/docs/src/usages/select.tsx b/apps/docs/src/usages/select.tsx
@@ -12,10 +12,10 @@ export default () => {
 
   return (
     <div className="max-sm:flex-wrap flex gap-4">
-      <Select items={options}>
+      <Select label="Select Project" items={options}>
         {(item) => <SelectOption>{item.name}</SelectOption>}
       </Select>
-      <Select variant="outlined" items={options}>
+      <Select label="Select Project" variant="outlined" items={options}>
         {(item) => <SelectOption>{item.name}</SelectOption>}
       </Select>
     </div>

diff --git a/packages/actify/src/components/Select/Select.tsx b/packages/actify/src/components/Select/Select.tsx
@@ -23,16 +23,9 @@ const Select = <T extends object>(props: SelectProps<T>) => {
   const state = useSelectState(props)
   const ref = React.useRef(null)
 
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
-    props,
-    state,
-    ref
-  )
+  const { triggerProps, valueProps, menuProps } = useSelect(props, state, ref)
 
   const { variant = 'filled' } = props
-  const label = state.selectedItem
-    ? state.selectedItem.rendered
-    : 'Select an option'
 
   let Tag = FilledField
   if (variant == 'filled') {
@@ -44,10 +37,9 @@ const Select = <T extends object>(props: SelectProps<T>) => {
 
   return (
     <div
-      style={{ display: 'inline-flex', ...props.style }}
-      className={clsx(styles['outlined-select'], props.className)}
+      style={props.style}
+      className={clsx(styles['select'], props.className)}
     >
-      {props.label && <Label {...labelProps}>{props.label}</Label>}
       <HiddenSelect
         state={state}
         triggerRef={ref}
@@ -57,12 +49,8 @@ const Select = <T extends object>(props: SelectProps<T>) => {
       />
 
       <Tag ref={ref} {...triggerProps}>
-        <Label
-          aria-label={label?.toString()}
-          {...valueProps}
-          style={{ lineHeight: '24px' }}
-        >
-          {label}
+        <Label {...valueProps} style={{ lineHeight: '24px' }}>
+          {state.selectedItem ? state.selectedItem.rendered : props.label}
         </Label>
         <TrailingIcon isOpen={state.isOpen} />
       </Tag>