feat(select): unify select approaches (#1594)

packages/components/src/filter/filter-item-check.tsx

@@ -1,10 +1,7 @@
 import React, { forwardRef } from 'react'
 import { IconCheckSmall } from '@vtex/shoreline-icons'
-import type {
-  SelectItemCheckOptions,
-  SelectItemCheckProps,
-} from '@vtex/shoreline-primitives'
-import { useSelectContext, SelectItemCheck } from '@vtex/shoreline-primitives'
+import type { SelectItemCheckOptions, SelectItemCheckProps } from '../select'
+import { useSelectContext, SelectItemCheck } from '../select'
 
 /**
  * Check state of the FilterItem

packages/components/src/filter/filter-item.tsx

@@ -1,10 +1,8 @@
 import React, { forwardRef } from 'react'
 
-import type {
-  SelectItemOptions,
-  SelectItemProps,
-} from '@vtex/shoreline-primitives'
-import { SelectItem, ComboboxItem } from '@vtex/shoreline-primitives'
+import { SelectItem } from '../select'
+import type { SelectItemOptions, SelectItemProps } from '../select'
+import { ComboboxItem } from '@vtex/shoreline-primitives'
 import { useSearchable } from './use-searchable'
 import { FilterItemCheck } from './filter-item-check'
 

packages/components/src/filter/filter-list.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react'
-import type {
-  SelectListOptions,
-  SelectListProps,
-} from '@vtex/shoreline-primitives'
-import { SelectList, ComboboxList } from '@vtex/shoreline-primitives'
+import { SelectList } from '../select'
+import type { SelectListOptions, SelectListProps } from '../select'
+import { ComboboxList } from '@vtex/shoreline-primitives'
 import { useSearchable } from './use-searchable'
 
 /**

packages/components/src/filter/filter-provider.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect } from 'react'
 import type { ReactNode } from 'react'
-import {
-  SelectProvider,
-  useSelectStore,
-  ComboboxProvider,
-} from '@vtex/shoreline-primitives'
+import { ComboboxProvider } from '@vtex/shoreline-primitives'
 
+import { SelectProvider, useSelectStore } from '../select'
 import { PopoverProvider, usePopoverStore } from '../popover'
 import { FilterContext } from './filter-context'
 

packages/components/src/index.ts

@@ -12,20 +12,12 @@ export {
   Compose,
   LinkBox,
   LocaleProvider,
-  SelectItem,
-  SelectItemCheck,
-  SelectList,
-  SelectPopover,
-  SelectProvider,
-  SelectTrigger,
   VisuallyHidden,
   createMessageHook,
   get,
   isComposable,
   navigate,
   useLocale,
-  useSelectContext,
-  useSelectStore,
 } from '@vtex/shoreline-primitives'
 export type {
   AccessibleIconProps,
@@ -40,11 +32,6 @@ export type {
   LinkBoxProps,
   LocaleProviderProps,
   NavigationTarget,
-  SelectItemCheckProps,
-  SelectItemProps,
-  SelectListProps,
-  SelectPopoverProps,
-  SelectTriggerProps,
   VisuallyHiddenProps,
 } from '@vtex/shoreline-primitives'
 export { Alert } from './alert'
@@ -204,8 +191,25 @@ export { Radio, RadioGroup, useRadioState } from './radio'
 export type { RadioGroupProps, RadioGroupState, RadioProps } from './radio'
 export { Search } from './search'
 export type { SearchProps } from './search'
-export { Select } from './select'
-export type { SelectProps } from './select'
+export {
+  Select,
+  SelectItem,
+  SelectItemCheck,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+  useSelectContext,
+  useSelectStore,
+} from './select'
+export type {
+  SelectProps,
+  SelectItemCheckProps,
+  SelectItemProps,
+  SelectListProps,
+  SelectPopoverProps,
+  SelectTriggerProps,
+} from './select'
 export { Skeleton } from './skeleton'
 export type { SkeletonProps } from './skeleton'
 export { Spinner } from './spinner'

packages/components/src/select/index.ts

@@ -1 +1,7 @@
 export * from './select'
+export * from './select-item'
+export * from './select-item-check'
+export * from './select-list'
+export * from './select-popover'
+export * from './select-provider'
+export * from './select-trigger'

packages/components/src/select/messages/bg.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Изберете..."
+}

packages/components/src/select/messages/de.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Wählen..."
+}

packages/components/src/select/messages/en.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Select..."
+}

packages/components/src/select/messages/es.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Seleccionar..."
+}

packages/components/src/select/messages/fr.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Sélectionner..."
+}

packages/components/src/select/messages/index.ts

@@ -0,0 +1,27 @@
+import bg from './bg.json'
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import it from './it.json'
+import ja from './ja.json'
+import ko from './ko.json'
+import nl from './nl.json'
+import pt from './pt.json'
+import ro from './ro.json'
+import th from './th.json'
+
+export const messages = {
+  'en-US': en,
+  'es-AR': es,
+  'fr-FR': fr,
+  'pt-BR': pt,
+  'ja-JP': ja,
+  'ko-KR': ko,
+  'it-IT': it,
+  'nl-NL': nl,
+  'ro-RO': ro,
+  'bg-BG': bg,
+  'th-TH': th,
+  'de-DE': de,
+}

packages/components/src/select/messages/it.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Selezionare..."
+}

packages/components/src/select/messages/ja.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "選択する..."
+}

packages/components/src/select/messages/ko.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "선택하다..."
+}

packages/components/src/select/messages/nl.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Selecteer..."
+}

packages/components/src/select/messages/pt.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Selecionar..."
+}

packages/components/src/select/messages/ro.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "Selectați..."
+}

packages/components/src/select/messages/th.json

@@ -0,0 +1,3 @@
+{
+  "placeholder": "เลือก..."
+}

packages/primitives/src/select/select-item-check.tsx → packages/components/src/select/select-item-check.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { SelectItemCheck as ItemCheck } from '@ariakit/react'
-import { IconCheck } from '@vtex/shoreline-icons'
+import { IconCheckSmall } from '@vtex/shoreline-icons'
 
 /**
  * Check indicator of the SelectItem
@@ -14,7 +14,7 @@ export const SelectItemCheck = forwardRef<
 
   return (
     <ItemCheck data-sl-select-item-check ref={ref} {...domProps}>
-      {children || <IconCheck />}
+      {children || <IconCheckSmall />}
     </ItemCheck>
   )
 })

packages/primitives/src/select/select-popover.tsx → packages/components/src/select/select-popover.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import type { SelectPopoverOptions as PopoverOptions } from '@ariakit/react'
 import { SelectPopover as Popover } from '@ariakit/react'
 
 /**
@@ -22,7 +23,7 @@ export const SelectPopover = forwardRef<HTMLDivElement, SelectPopoverProps>(
   }
 )
 
-export interface SelectPopoverOptions {
+export interface SelectPopoverOptions extends PopoverOptions {
   /**
    * Enable children composition
    * @default false

packages/components/src/select/select-utils.ts

@@ -0,0 +1,9 @@
+import { isStringEmpty } from '@vtex/shoreline-utils'
+
+export function isEmpty(value?: string | string[]) {
+  if (Array.isArray(value)) {
+    return value.length === 0
+  }
+
+  return isStringEmpty(value)
+}

packages/components/src/select/select-value.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useSelectContext } from './select-provider'
+import { isEmpty } from './select-utils'
+
+/**
+ * Renders the value of the select
+ * @status stable
+ */
+export function SelectValue(props: SelectValueProps) {
+  const { placeholder } = props
+  const ctx = useSelectContext()
+
+  if (!ctx) {
+    throw Error('use SelectValue within a SelectProvider or Select')
+  }
+
+  const value = ctx.useState('value')
+
+  if (isEmpty(value)) {
+    return <div data-sl-select-placeholder>{placeholder}</div>
+  }
+
+  return <div data-sl-select-value>{value}</div>
+}
+
+export interface SelectValueOptions {
+  /**
+   * placeholder of the select
+   */
+  placeholder?: string
+}
+
+export type SelectValueProps = SelectValueOptions