@kvell-group/ui 1.19.6 → 1.19.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.19.6",
+  "version": "1.19.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kvell-group/ui.git"

package/src/components/Inputs/AutocompleteSelect/AutocompleteSelect.module.css

@@ -0,0 +1,3 @@
+.root .section {
+  --right-section-end: rem(3px);
+}

package/src/components/Inputs/AutocompleteSelect/AutocompleteSelect.stories.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+import { Text } from '@/components/Text'
+
+import { theme } from '@/theme'
+import { AutocompleteSelect as AutocompleteSelectComponent } from '@/components/Inputs/AutocompleteSelect'
+
+const data = ['React', 'Angular', 'Vue', 'Svelte', 'Solid', 'Ember']
+
+const options: { value: string; label: string }[] = [
+  { value: 'react', label: 'React' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'svelte', label: 'Svelte' },
+]
+
+const AutocompleteSelectWithLabelValueWrapper = () => {
+  const [label, setLabel] = useState('')
+  const [value, setValue] = useState<string | null>(null)
+
+  const handleChange = (nextLabel: string) => {
+    setLabel(nextLabel)
+    setValue(options.find((option) => option.label === nextLabel)?.value ?? null)
+  }
+
+  return (
+    <div style={{ maxWidth: '465px' }}>
+      <AutocompleteSelectComponent
+        label='Фреймворк'
+        placeholder='Выберите или введите значение'
+        data={options.map((option) => option.label)}
+        value={label}
+        onChange={handleChange}
+      />
+      <Text
+        variant='caption-l-regular'
+        mt='sm'
+        display='block'
+      >
+        Выбранное value: {value ?? '—'}
+      </Text>
+    </div>
+  )
+}
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/AutocompleteSelect',
+  component: AutocompleteSelectComponent,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof AutocompleteSelectComponent>
+
+type Story = StoryObj<typeof AutocompleteSelectComponent>
+
+// ----------------------------------------------------------------------
+
+export const AutocompleteSelect: Story = {
+  args: {
+    placeholder: 'Выберите или введите значение',
+    label: 'Фреймворк',
+    data,
+  },
+}
+
+export const AutocompleteSelectError: Story = {
+  args: {
+    placeholder: 'Выберите или введите значение',
+    label: 'Фреймворк',
+    data,
+    error: 'Значение не найдено в списке',
+  },
+}
+
+export const AutocompleteSelectWithLabelValue: Story = {
+  render: () => <AutocompleteSelectWithLabelValueWrapper />,
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/AutocompleteSelect/AutocompleteSelect.tsx

@@ -0,0 +1,20 @@
+import { Autocomplete as MantineAutocomplete } from '@mantine/core'
+import clsx from 'clsx'
+import inputClassNames from '../Input/Input.module.css'
+import autocompleteSelectClassNames from './AutocompleteSelect.module.css'
+
+// ----------------------------------------------------------------------
+
+const classNames = {
+  ...inputClassNames,
+  root: clsx(autocompleteSelectClassNames.root, inputClassNames.root),
+  section: clsx(autocompleteSelectClassNames.section, inputClassNames.section),
+}
+
+// ----------------------------------------------------------------------
+
+export const AutocompleteSelect = MantineAutocomplete.withProps({
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
+  comboboxProps: { floatingStrategy: 'fixed' },
+})

package/src/components/Inputs/AutocompleteSelect/index.ts

@@ -0,0 +1 @@
+export { AutocompleteSelect } from './AutocompleteSelect'

package/src/index.ts

@@ -14,6 +14,7 @@ export { CardExpireDateInput } from './components/Inputs/CardExpireDateInput'
 export { Checkbox } from './components/Inputs/Checkbox'
 export { Switch } from './components/Inputs/Switch'
 export { Select } from './components/Inputs/Select'
+export { AutocompleteSelect } from './components/Inputs/AutocompleteSelect'
 export { Textarea } from './components/Inputs/Textarea'
 export { DatesProvider } from './components/DatesProvider'
 export * from './components/Inputs/DatePickerInput'