@cerberus-design/react 0.16.0-next-1e5283a → 0.16.0-next-004ae01

package/src/components/combobox/primitives.tsx

@@ -0,0 +1,209 @@
+import {
+  Combobox,
+  type ComboboxClearTriggerProps,
+  type ComboboxContentProps,
+  type ComboboxControlProps,
+  type ComboboxInputProps,
+  type ComboboxItemGroupLabelProps,
+  type ComboboxItemGroupProps,
+  type ComboboxItemIndicatorProps,
+  type ComboboxItemProps,
+  type ComboboxItemTextProps,
+  type ComboboxLabelProps,
+  type ComboboxPositionerProps,
+  type ComboboxRootProps,
+  type ComboboxTriggerProps,
+} from '@ark-ui/react/combobox'
+import { ark } from '@ark-ui/react/factory'
+import type { SelectCollectionItem } from '../select/select'
+import {
+  combobox,
+  type ComboboxVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import type { PropsWithChildren } from 'react'
+
+/**
+ * This module contains the primitives of the Combobox.
+ * @module 'combobox/primitives'
+ */
+
+/**
+ * The ComboboxRoot component is the context provider for the Combobox
+ * component.
+ */
+export function ComboboxRoot(
+  props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps,
+) {
+  const { size, ...rootProps } = props
+  const styles = combobox({ size })
+  return (
+    <Combobox.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The label that appears above the combobox input.
+ */
+export function ComboboxLabel(props: ComboboxLabelProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Label {...props} className={cx(styles.label, props.className)} />
+  )
+}
+
+/**
+ * The control that wraps the combobox input.
+ */
+export function ComboboxControl(props: ComboboxControlProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The input of the combobox.
+ */
+export function ComboboxInput(props: ComboboxInputProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Input {...props} className={cx(styles.input, props.className)} />
+  )
+}
+
+/**
+ * The trigger that opens the dropdown.
+ */
+export function ComboboxTrigger(props: ComboboxTriggerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger to clear the combobox input.
+ */
+export function ComboboxClearTrigger(props: ComboboxClearTriggerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ClearTrigger
+      {...props}
+      className={cx(styles.clearTrigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The positioner that wraps the content.
+ */
+export function ComboboxPositioner(props: ComboboxPositionerProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Positioner
+      {...props}
+      className={cx(styles.positioner, props.className)}
+    />
+  )
+}
+
+/**
+ * The content of the combobox component.
+ */
+export function ComboboxContent(
+  props: ComboboxContentProps & ComboboxVariantProps,
+) {
+  const { size, ...contentProps } = props
+  const styles = combobox({ size })
+  return (
+    <Combobox.Content
+      {...contentProps}
+      className={cx(styles.content, contentProps.className)}
+    />
+  )
+}
+
+/**
+ * A group of items in the combobox component.
+ */
+export function ComboboxItemGroup(props: ComboboxItemGroupProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemGroup
+      {...props}
+      className={cx(styles.itemGroup, props.className)}
+    />
+  )
+}
+
+/**
+ * The label for a group of items in the combobox component.
+ */
+export function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemGroupLabel
+      {...props}
+      className={cx(styles.itemGroupLabel, props.className)}
+    />
+  )
+}
+
+/**
+ * An individual item in the combobox component.
+ */
+export function ComboboxItem(props: ComboboxItemProps) {
+  const styles = combobox()
+  return (
+    <Combobox.Item {...props} className={cx(styles.item, props.className)} />
+  )
+}
+
+/**
+ * The text that labels a single item of the combobox.
+ */
+export function ComboboxItemText(props: ComboboxItemTextProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemText
+      {...props}
+      className={cx(styles.itemText, props.className)}
+    />
+  )
+}
+
+/**
+ * The indicator that appears when the item has been selected.
+ */
+export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
+  const styles = combobox()
+  return (
+    <Combobox.ItemIndicator
+      {...props}
+      className={cx(styles.itemIndicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The icon that appears at the start of the combobox input.
+ */
+export function ComboboxStartIcon(props: PropsWithChildren) {
+  const styles = combobox()
+  return <ark.span {...props} className={styles.startIcon} />
+}
+
+// We are only doing this to make the API consistent
+export const ComboItemText = ComboboxItemText
+
+export type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails

package/src/components/combobox/use-stateful-collection.ts

@@ -0,0 +1,65 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import type { ComboboxInputValueChangeDetails } from '@ark-ui/react/combobox'
+import type { SelectCollectionItem } from '../select/select'
+import { createSelectCollection } from '../select/primitives'
+
+/**
+ * This module contains a custom hook that provides a stateful collection for
+ * the Combobox component.
+ */
+
+export interface StatefulCollectionReturn {
+  /**
+   * The collection of items.
+   */
+  collection: ReturnType<typeof createSelectCollection>
+  /**
+   * The filter value split into an array of characters.
+   */
+  filterChars: string[]
+  /**
+   * The function to handle input changes.
+   */
+  handleInputChange: (details: ComboboxInputValueChangeDetails) => void
+}
+
+/**
+ * This hook provides a stateful collection for the Combobox component.
+ * It returns a collection of items and a function to handle input changes.
+ * @param initialItems - The initial collection of items.
+ * @return An object containing the collection and a function to handle input changes.
+ */
+export function useStatefulCollection(
+  initialItems: SelectCollectionItem[] = [],
+): StatefulCollectionReturn {
+  const [items, setItems] = useState(initialItems)
+  const [filterValue, setFilterValue] = useState<string[]>([])
+
+  const collection = useMemo(() => createSelectCollection(items), [items])
+
+  const handleInputChange = useCallback(
+    (details: ComboboxInputValueChangeDetails) => {
+      if (details.inputValue === '') {
+        return setItems(initialItems)
+      }
+      setItems((prev) =>
+        prev.filter((item) =>
+          item.value.includes(details.inputValue.toLowerCase()),
+        ),
+      )
+      setFilterValue(details.inputValue.split(''))
+    },
+    [initialItems],
+  )
+
+  return useMemo(
+    () => ({
+      collection,
+      filterChars: filterValue,
+      handleInputChange,
+    }),
+    [collection, filterValue, handleInputChange],
+  )
+}

package/src/components/select/select.tsx

@@ -79,6 +79,7 @@ export type SelectProps = SelectRootProps<SelectCollectionItem> &
  */
 export function Select(props: SelectProps) {
   const { collection, placeholder, ...rootProps } = props
+
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
 

package/src/index.ts

@@ -29,6 +29,7 @@ export * from './components/Avatar'
 export * from './components/button/index'
 export * from './components/checkbox/index'
 export * from './components/CircularProgress'
+export * from './components/combobox/index'
 export * from './components/cta-dialog/index'
 export * from './components/DatePicker.client'
 export * from './components/DatePicker.server'

package/build/modern/chunk-6ICNCCPD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/select/select.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectItemProps, SelectRootProps } from '@ark-ui/react/select'\nimport { type SelectVariantProps } from '@cerberus/styled-system/recipes'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Portal } from '../Portal'\nimport { Show } from '../Show'\nimport { SelectParts } from './parts'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n  /**\n   * What is displayed in the dropdown list.\n   */\n  label: string\n  /**\n   * The value of the selected item used in the form.\n   */\n  value: string\n  /**\n   * If the item is disabled.\n   */\n  disabled?: boolean\n}\n\nexport interface SelectCollection {\n  /**\n   * The items to be displayed in the dropdown list.\n   */\n  items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n  /**\n   * The placeholder text when no option is selected.\n   */\n  placeholder?: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n  BaseSelectProps &\n  SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n *  const collection = createListCollection({\n *   items: [\n *    { label: 'Hades', value: 'hades' },\n *    { label: 'Persephone', value: 'persephone' },\n *    { label: 'Zeus', value: 'zeus', disabled: true },\n *   ]\n *  })\n *\n *  return (\n *   <Select\n *    collection={collection}\n *    label=\"Select Relative\"\n *    placeholder=\"Choose option\"\n *   >\n *   {collection.items.map((item) => (\n *    <Option key={item.value} item={item} />\n *   ))}\n *  </Select>\n *  )\n * }\n */\nexport function Select(props: SelectProps) {\n  const { collection, placeholder, ...rootProps } = props\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n  return (\n    <SelectParts.Root collection={collection} {...rootProps}>\n      <SelectParts.Control>\n        <SelectParts.Trigger>\n          <SelectParts.ValueText placeholder={placeholder} />\n\n          <HStack>\n            <Show when={props.invalid}>\n              <InvalidIcon data-part=\"invalid-icon\" />\n            </Show>\n            <SelectParts.Indicator>\n              <SelectArrow />\n            </SelectParts.Indicator>\n          </HStack>\n        </SelectParts.Trigger>\n      </SelectParts.Control>\n\n      <Portal>\n        <SelectParts.Positioner>\n          <SelectParts.Content size={rootProps.size}>\n            {props.children}\n          </SelectParts.Content>\n        </SelectParts.Positioner>\n      </Portal>\n\n      <SelectParts.HiddenSelect />\n    </SelectParts.Root>\n  )\n}\n\nexport interface OptionProps extends SelectItemProps {\n  /**\n   * The CollectionListItem to be displayed in the dropdown list.\n   */\n  item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n  const { item, ...itemProps } = props\n  const { icons } = useCerberusContext()\n  const { selectChecked: CheckedIcon } = icons\n\n  return (\n    <SelectParts.Item {...itemProps} item={item}>\n      <SelectParts.ItemText>{item?.label}</SelectParts.ItemText>\n      <SelectParts.ItemIndicator>\n        <CheckedIcon />\n      </SelectParts.ItemIndicator>\n    </SelectParts.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAIA,SAAS,cAAc;AAoFb,cAEA,YAFA;AATH,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,YAAY,aAAa,GAAG,UAAU,IAAI;AAClD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,SAAS,YAAY,IAAI;AAE3D,SACE,qBAAC,YAAY,MAAZ,EAAiB,YAAyB,GAAG,WAC5C;AAAA,wBAAC,YAAY,SAAZ,EACC,+BAAC,YAAY,SAAZ,EACC;AAAA,0BAAC,YAAY,WAAZ,EAAsB,aAA0B;AAAA,MAEjD,qBAAC,UACC;AAAA,4BAAC,QAAK,MAAM,MAAM,SAChB,8BAAC,eAAY,aAAU,gBAAe,GACxC;AAAA,QACA,oBAAC,YAAY,WAAZ,EACC,8BAAC,eAAY,GACf;AAAA,SACF;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,UACC,8BAAC,YAAY,YAAZ,EACC,8BAAC,YAAY,SAAZ,EAAoB,MAAM,UAAU,MAClC,gBAAM,UACT,GACF,GACF;AAAA,IAEA,oBAAC,YAAY,cAAZ,EAAyB;AAAA,KAC5B;AAEJ;AASO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,YAAY,IAAI;AAEvC,SACE,qBAAC,YAAY,MAAZ,EAAkB,GAAG,WAAW,MAC/B;AAAA,wBAAC,YAAY,UAAZ,EAAsB,gBAAM,OAAM;AAAA,IACnC,oBAAC,YAAY,eAAZ,EACC,8BAAC,eAAY,GACf;AAAA,KACF;AAEJ;","names":[]}