Merge branch 'main' into input-clear-button-outline

package.json

@@ -108,7 +108,7 @@
     "nx": "^16.5.0",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.12",
+    "prettier-plugin-tailwindcss": "0.5.14",
     "react": "18.2.0",
     "react-dom": "18.3.1",
     "react-live": "3.2.0",

packages/components/combobox/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.2](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-05-06)
+
+### Bug Fixes
+
+- **combobox:** clear internal input value on escape ([3bb5c69](https://github.com/adevinta/spark/commit/3bb5c6915669b3eacbe2627900862b025d2c7ddb))
+- **combobox:** combobox content overflow on smaller screens ([9e1d55b](https://github.com/adevinta/spark/commit/9e1d55b5b3b73074d233c92aef72ef21236c1de4))
+- **combobox:** missing padding in combobox empty view ([1d76dfc](https://github.com/adevinta/spark/commit/1d76dfc742bc1c9b35414cadc02fd4d6cfb90ba2))
+- **combobox:** preserve combobox cursor position upon change ([4ba34da](https://github.com/adevinta/spark/commit/4ba34da2a5a8dbec9d48f735b624783d4df5f2fe))
+
+## [0.12.1](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-05-03)
+
+### Bug Fixes
+
+- **combobox:** fix combobox highligh index while typing ([adf4c8b](https://github.com/adevinta/spark/commit/adf4c8b137d89ca3d6c5b6ace85a14bc37b64e43))
+
 # [0.12.0](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-05-02)
 
 ### Features

packages/components/combobox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/combobox",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "An input that behaves similarly to a select, with the addition of a free text input to filter options.",
   "publishConfig": {
     "access": "public"

packages/components/combobox/src/ComboboxContext.tsx

@@ -346,6 +346,7 @@ export const ComboboxProvider = ({
           allowCustomValue,
           setSelectedItems: onInternalSelectedItemsChange,
           triggerAreaRef,
+          items: itemsMap,
         })
       : singleSelectionReducer({
           allowCustomValue,

packages/components/combobox/src/ComboboxEmpty.tsx

@@ -1,3 +1,4 @@
+import { cx } from 'class-variance-authority'
 import { forwardRef, type ReactNode, type Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
@@ -13,7 +14,7 @@ export const Empty = forwardRef(
     const hasNoItemVisible = ctx.filteredItemsMap.size === 0
 
     return hasNoItemVisible ? (
-      <div ref={forwardedRef} className={className}>
+      <div ref={forwardedRef} className={cx('px-lg py-md', className)}>
         {children}
       </div>
     ) : null

packages/components/combobox/src/ComboboxInput.tsx

@@ -63,6 +63,15 @@ export const Input = forwardRef(
         multiselectInputProps.onKeyDown?.(event)
         ctx.setLastInteractionType('keyboard')
       },
+      /**
+       *
+       * Important:
+       * - without this, the input cursor is moved to the end after every change.
+       * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
+       */
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+        ctx.setInputValue(e.target.value)
+      },
       ref: inputRef,
     })
 
@@ -79,7 +88,8 @@ export const Input = forwardRef(
             type="text"
             placeholder={placeholder}
             className={cx(
-              'h-sz-28 shrink-0 flex-grow basis-[80px] text-ellipsis bg-surface px-sm text-body-1 outline-none',
+              'max-w-full shrink-0 grow basis-[80px]',
+              'h-sz-28 text-ellipsis bg-surface px-sm text-body-1 outline-none',
               'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-on-surface/dim-3',
               'read-only:cursor-default read-only:bg-transparent read-only:text-on-surface',
               className

packages/components/combobox/src/ComboboxItem.tsx

@@ -70,6 +70,7 @@ const ItemContent = forwardRef(
       item: itemCtx.itemData,
       index: itemCtx.index,
     })
+
     const ref = useMergeRefs(forwardedRef, downshiftRef)
 
     if (!isVisible) return null

packages/components/combobox/src/ComboboxTrigger.tsx

@@ -92,14 +92,16 @@ export const Trigger = forwardRef(
             <div
               ref={scrollableAreaRef}
               className={cx(
-                'inline-flex grow items-start gap-sm py-md',
+                'inline-flex min-w-none grow items-start gap-sm py-md',
                 ctx.wrap ? 'flex-wrap' : 'overflow-x-auto p-[2px] u-no-scrollbar'
               )}
             >
               {selectedItems}
               {input}
             </div>
+
             {hasClearButton && clearButton}
+
             {disclosure}
           </div>
         </PopoverAnchor>

packages/components/combobox/src/useCombobox/multipleSelectionReducer.ts

@@ -1,10 +1,12 @@
 import { useCombobox, UseComboboxProps, UseMultipleSelectionReturnValue } from 'downshift'
 import React from 'react'
 
-import { ComboboxItem } from '../types'
+import { ComboboxItem, ItemsMap } from '../types'
+import { getIndexByKey } from '../utils'
 
 interface Props {
   allowCustomValue?: boolean
+  items: ItemsMap
   selectedItems: ComboboxItem[]
   multiselect: UseMultipleSelectionReturnValue<ComboboxItem>
   setSelectedItems: (items: ComboboxItem[]) => void
@@ -17,8 +19,9 @@ export const multipleSelectionReducer = ({
   allowCustomValue = false,
   setSelectedItems,
   triggerAreaRef,
+  items,
 }: Props) => {
-  const reducer: UseComboboxProps<ComboboxItem>['stateReducer'] = (state, { changes, type }) => {
+  const reducer: UseComboboxProps<ComboboxItem>['stateReducer'] = (_, { changes, type }) => {
     const isFocusInsideTriggerArea = triggerAreaRef.current?.contains?.(document.activeElement)
 
     switch (type) {
@@ -34,7 +37,10 @@ export const multipleSelectionReducer = ({
         if (changes.selectedItem != null) {
           newState.inputValue = '' // keep input value after selection
           newState.isOpen = true // keep menu opened after selection
-          newState.highlightedIndex = state.highlightedIndex // preserve highlighted item index after selection
+
+          const highlightedIndex = getIndexByKey(items, changes.selectedItem.value)
+
+          newState.highlightedIndex = highlightedIndex // preserve highlighted item index after selection
 
           const isAlreadySelected = multiselect.selectedItems.some(
             selectedItem => selectedItem.value === changes.selectedItem?.value
@@ -55,6 +61,11 @@ export const multipleSelectionReducer = ({
           ...changes,
           inputValue: allowCustomValue ? changes.inputValue : '',
         }
+      case useCombobox.stateChangeTypes.InputChange:
+        return {
+          ...changes,
+          selectedItem: changes.highlightedIndex === -1 ? null : changes.selectedItem,
+        }
       case useCombobox.stateChangeTypes.InputBlur:
         return {
           ...changes,

packages/components/combobox/src/useCombobox/singleSelectionReducer.ts

@@ -19,6 +19,12 @@ export const singleSelectionReducer = ({
     )
 
     switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEscape:
+        if (!changes.selectedItem) {
+          setSelectedItem(null)
+        }
+
+        return changes
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
         if (changes.selectedItem) {

packages/utils/cli/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.13.1](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-05-06)
+
+### Bug Fixes
+
+- wrong chmod on new ci script ([7b47919](https://github.com/adevinta/spark/commit/7b479196b0fcf5be21f2f067fdcb63e1d77c3496))
+
+# [2.13.0](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-05-03)
+
+### Features
+
+- **cli-utils:** add scan adoption script ([203e05e](https://github.com/adevinta/spark/commit/203e05e02285be18e5d0c6211f3ec04e4322837d))
+
 ## [2.12.10](https://github.com/adevinta/spark/compare/@spark-ui/[email protected]...@spark-ui/[email protected]) (2024-04-29)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

packages/utils/cli/bin/spark-scan.mjs

@@ -0,0 +1,15 @@
+#! /usr/bin/env node
+
+import { Command } from 'commander'
+import { adoption } from '../src/scan/index.mjs'
+
+const program = new Command()
+
+program
+  .command('adoption')
+  .description('Scan @spark-ui adoption for .tsx files with given imports')
+  .option('-c, --configuration <path>', 'configuration file route', '.spark-ui.cjs')
+  .option('-o, --output <path>', 'output file route')
+  .action(adoption)
+
+program.parse(process.argv)

packages/utils/cli/bin/spark.mjs

@@ -9,6 +9,6 @@ const { version } = require('../package.json')
 program.version(version, '--version')
 
 program.command('generate', 'Generate a component scaffolding').alias('g')
-program.command('setup-themes', 'Set up Spark theming configuration')
+program.command('scan', 'Scan a directory for components').alias('s')
 
 program.parse(process.argv)

packages/utils/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.12.10",
+  "version": "2.13.1",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,8 @@
   ],
   "bin": {
     "spark": "./bin/spark.mjs",
-    "spark-generate": "./bin/spark-generate.mjs"
+    "spark-generate": "./bin/spark-generate.mjs",
+    "spark-scan": "./bin/spark-scan.mjs"
   },
   "type": "module",
   "repository": {