@atelier-ui/react 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
## 0.1.3 (2026-05-19)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **lint:** satisfy new typescript-eslint + react-hooks v7.1 rules ([e9713f6](https://github.com/DominikPieper/atelier-ui/commit/e9713f6))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Claude Opus 4.7 (1M context)
|
|
10
|
+
- Dominik Pieper @DominikPieper
|
|
11
|
+
|
|
12
|
+
## 0.1.2 (2026-04-30)
|
|
13
|
+
|
|
14
|
+
This was a version bump only for react to align it with other projects, there were no code changes.
|
|
15
|
+
|
|
1
16
|
## 0.1.1 (2026-04-30)
|
|
2
17
|
|
|
3
18
|
This was a version bump only for react to align it with other projects, there were no code changes.
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/llm-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAE5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"llm-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/llm-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAE5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,OAAY,EACZ,WAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,MAAW,GACZ,EAAE,gBAAgB,2CA2MlB"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import './llm-combobox.css';
|
|
4
|
-
let nextId = 0;
|
|
5
4
|
/**
|
|
6
5
|
* Filterable autocomplete combobox. Accepts an `options` array and emits the
|
|
7
6
|
* selected option's `value`. The user types to narrow the list; selecting an
|
|
@@ -23,7 +22,8 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
|
|
|
23
22
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
24
23
|
const inputRef = useRef(null);
|
|
25
24
|
const containerRef = useRef(null);
|
|
26
|
-
const
|
|
25
|
+
const inputId = useId();
|
|
26
|
+
const panelId = useId();
|
|
27
27
|
const selectedLabel = useMemo(() => options.find((o) => o.value === value)?.label ?? '', [options, value]);
|
|
28
28
|
const filteredOptions = useMemo(() => {
|
|
29
29
|
if (!query)
|
|
@@ -31,12 +31,7 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
|
|
|
31
31
|
const q = query.toLowerCase();
|
|
32
32
|
return options.filter((o) => o.label.toLowerCase().includes(q));
|
|
33
33
|
}, [options, query]);
|
|
34
|
-
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
if (!isOpen) {
|
|
37
|
-
setQuery(selectedLabel);
|
|
38
|
-
}
|
|
39
|
-
}, [selectedLabel, isOpen]);
|
|
34
|
+
const displayValue = isOpen ? query : selectedLabel;
|
|
40
35
|
// Outside-click closes panel
|
|
41
36
|
useEffect(() => {
|
|
42
37
|
if (!isOpen)
|
|
@@ -53,6 +48,7 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
|
|
|
53
48
|
function open() {
|
|
54
49
|
if (disabled || readonly)
|
|
55
50
|
return;
|
|
51
|
+
setQuery(selectedLabel);
|
|
56
52
|
setIsOpen(true);
|
|
57
53
|
setActiveIndex(-1);
|
|
58
54
|
}
|
|
@@ -130,8 +126,8 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
|
|
|
130
126
|
]
|
|
131
127
|
.filter(Boolean)
|
|
132
128
|
.join(' ');
|
|
133
|
-
const activeOptionId = activeIndex >= 0 ? `${
|
|
134
|
-
return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "llm-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "llm-combobox-input", type: "text", autoComplete: "off", role: "combobox", id:
|
|
129
|
+
const activeOptionId = activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;
|
|
130
|
+
return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "llm-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "llm-combobox-input", type: "text", autoComplete: "off", role: "combobox", id: inputId, "aria-expanded": isOpen, "aria-controls": panelId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), _jsx("span", { className: "llm-combobox-icon", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsx("ul", { id: panelId, className: "llm-combobox-panel", role: "listbox", "aria-labelledby": inputId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, i) => (_jsxs("li", { id: `${panelId}-option-${i}`, role: "option", className: [
|
|
135
131
|
'llm-combobox-option',
|
|
136
132
|
activeIndex === i && 'is-active',
|
|
137
133
|
option.value === value && 'is-selected',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/llm-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { LlmComboboxOption, LlmComboboxSpec } from '../spec';\nimport './llm-combobox.css';\n\nexport type { LlmComboboxOption };\n\nlet nextId = 0;\n\nexport interface LlmComboboxProps extends LlmComboboxSpec {\n value?: string;\n onValueChange?: (value: string) => void;\n errors?: string[];\n}\n\n/**\n * Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n *\n * Usage:\n * ```tsx\n * <LlmCombobox\n * value={country}\n * onValueChange={setCountry}\n * options={countryOptions}\n * placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function LlmCombobox({\n value = '',\n onValueChange,\n options = [],\n placeholder = '',\n disabled = false,\n readonly = false,\n invalid = false,\n required = false,\n name,\n errors = [],\n}: LlmComboboxProps) {\n const [query, setQuery] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const ids = useRef({ input: `llm-combobox-input-${nextId}`, panel: `llm-combobox-panel-${nextId++}` });\n\n const selectedLabel = useMemo(\n () => options.find((o) => o.value === value)?.label ?? '',\n [options, value],\n );\n\n const filteredOptions = useMemo(() => {\n if (!query) return options;\n const q = query.toLowerCase();\n return options.filter((o) => o.label.toLowerCase().includes(q));\n }, [options, query]);\n\n // Sync display when value changes externally\n useEffect(() => {\n if (!isOpen) {\n setQuery(selectedLabel);\n }\n }, [selectedLabel, isOpen]);\n\n // Outside-click closes panel\n useEffect(() => {\n if (!isOpen) return;\n function handleClick(e: MouseEvent) {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false);\n setQuery(selectedLabel);\n }\n }\n document.addEventListener('click', handleClick);\n return () => document.removeEventListener('click', handleClick);\n }, [isOpen, selectedLabel]);\n\n function open() {\n if (disabled || readonly) return;\n setIsOpen(true);\n setActiveIndex(-1);\n }\n\n function close() {\n setIsOpen(false);\n setActiveIndex(-1);\n }\n\n function selectOption(option: LlmComboboxOption) {\n if (option.disabled || disabled || readonly) return;\n onValueChange?.(option.value);\n setQuery(option.label);\n close();\n inputRef.current?.focus();\n }\n\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const q = e.target.value;\n setQuery(q);\n setActiveIndex(-1);\n if (q === '') onValueChange?.('');\n if (!isOpen) open();\n }\n\n function handleFocus() {\n open();\n }\n\n function handleBlur() {\n setQuery(selectedLabel);\n }\n\n function handleKeydown(e: React.KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n selectOption(filteredOptions[activeIndex]);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n setQuery(selectedLabel);\n close();\n break;\n }\n case 'Tab': {\n close();\n break;\n }\n }\n }\n\n const classes = [\n 'llm-combobox',\n isOpen && 'is-open',\n disabled && 'is-disabled',\n invalid && 'is-invalid',\n ]\n .filter(Boolean)\n .join(' ');\n\n const activeOptionId =\n activeIndex >= 0 ? `${ids.current.panel}-option-${activeIndex}` : undefined;\n\n return (\n <div className={classes} ref={containerRef}>\n <div className=\"llm-combobox-wrapper\">\n <input\n ref={inputRef}\n className=\"llm-combobox-input\"\n type=\"text\"\n autoComplete=\"off\"\n role=\"combobox\"\n id={ids.current.input}\n aria-expanded={isOpen}\n aria-controls={ids.current.panel}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeOptionId}\n aria-invalid={invalid || undefined}\n disabled={disabled}\n readOnly={readonly}\n required={required}\n name={name}\n placeholder={placeholder}\n value={query}\n onChange={handleInput}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeydown}\n />\n <span className=\"llm-combobox-icon\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n\n {isOpen && (\n <ul\n id={ids.current.panel}\n className=\"llm-combobox-panel\"\n role=\"listbox\"\n aria-labelledby={ids.current.input}\n >\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, i) => (\n <li\n key={option.value}\n id={`${ids.current.panel}-option-${i}`}\n role=\"option\"\n className={[\n 'llm-combobox-option',\n activeIndex === i && 'is-active',\n option.value === value && 'is-selected',\n option.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-selected={option.value === value}\n aria-disabled={option.disabled || undefined}\n onMouseDown={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(i)}\n >\n <span>{option.label}</span>\n {option.value === value && (\n <svg className=\"llm-combobox-check\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7l4 4 6-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )}\n </li>\n ))\n ) : (\n <li className=\"llm-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n No results found.\n </li>\n )}\n </ul>\n )}\n\n {invalid && errors.length > 0 && (\n <div className=\"llm-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n {errors.map((e, i) => (\n <p key={i} className=\"llm-combobox-error-message\">{e}</p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"llm-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/llm-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { LlmComboboxOption, LlmComboboxSpec } from '../spec';\nimport './llm-combobox.css';\n\nexport type { LlmComboboxOption };\n\nexport interface LlmComboboxProps extends LlmComboboxSpec {\n value?: string;\n onValueChange?: (value: string) => void;\n errors?: string[];\n}\n\n/**\n * Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n *\n * Usage:\n * ```tsx\n * <LlmCombobox\n * value={country}\n * onValueChange={setCountry}\n * options={countryOptions}\n * placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function LlmCombobox({\n value = '',\n onValueChange,\n options = [],\n placeholder = '',\n disabled = false,\n readonly = false,\n invalid = false,\n required = false,\n name,\n errors = [],\n}: LlmComboboxProps) {\n const [query, setQuery] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const inputId = useId();\n const panelId = useId();\n\n const selectedLabel = useMemo(\n () => options.find((o) => o.value === value)?.label ?? '',\n [options, value],\n );\n\n const filteredOptions = useMemo(() => {\n if (!query) return options;\n const q = query.toLowerCase();\n return options.filter((o) => o.label.toLowerCase().includes(q));\n }, [options, query]);\n\n const displayValue = isOpen ? query : selectedLabel;\n\n // Outside-click closes panel\n useEffect(() => {\n if (!isOpen) return;\n function handleClick(e: MouseEvent) {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false);\n setQuery(selectedLabel);\n }\n }\n document.addEventListener('click', handleClick);\n return () => document.removeEventListener('click', handleClick);\n }, [isOpen, selectedLabel]);\n\n function open() {\n if (disabled || readonly) return;\n setQuery(selectedLabel);\n setIsOpen(true);\n setActiveIndex(-1);\n }\n\n function close() {\n setIsOpen(false);\n setActiveIndex(-1);\n }\n\n function selectOption(option: LlmComboboxOption) {\n if (option.disabled || disabled || readonly) return;\n onValueChange?.(option.value);\n setQuery(option.label);\n close();\n inputRef.current?.focus();\n }\n\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const q = e.target.value;\n setQuery(q);\n setActiveIndex(-1);\n if (q === '') onValueChange?.('');\n if (!isOpen) open();\n }\n\n function handleFocus() {\n open();\n }\n\n function handleBlur() {\n setQuery(selectedLabel);\n }\n\n function handleKeydown(e: React.KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n selectOption(filteredOptions[activeIndex]);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n setQuery(selectedLabel);\n close();\n break;\n }\n case 'Tab': {\n close();\n break;\n }\n }\n }\n\n const classes = [\n 'llm-combobox',\n isOpen && 'is-open',\n disabled && 'is-disabled',\n invalid && 'is-invalid',\n ]\n .filter(Boolean)\n .join(' ');\n\n const activeOptionId =\n activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;\n\n return (\n <div className={classes} ref={containerRef}>\n <div className=\"llm-combobox-wrapper\">\n <input\n ref={inputRef}\n className=\"llm-combobox-input\"\n type=\"text\"\n autoComplete=\"off\"\n role=\"combobox\"\n id={inputId}\n aria-expanded={isOpen}\n aria-controls={panelId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeOptionId}\n aria-invalid={invalid || undefined}\n disabled={disabled}\n readOnly={readonly}\n required={required}\n name={name}\n placeholder={placeholder}\n value={displayValue}\n onChange={handleInput}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeydown}\n />\n <span className=\"llm-combobox-icon\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n\n {isOpen && (\n <ul\n id={panelId}\n className=\"llm-combobox-panel\"\n role=\"listbox\"\n aria-labelledby={inputId}\n >\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, i) => (\n <li\n key={option.value}\n id={`${panelId}-option-${i}`}\n role=\"option\"\n className={[\n 'llm-combobox-option',\n activeIndex === i && 'is-active',\n option.value === value && 'is-selected',\n option.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-selected={option.value === value}\n aria-disabled={option.disabled || undefined}\n onMouseDown={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(i)}\n >\n <span>{option.label}</span>\n {option.value === value && (\n <svg className=\"llm-combobox-check\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7l4 4 6-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )}\n </li>\n ))\n ) : (\n <li className=\"llm-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n No results found.\n </li>\n )}\n </ul>\n )}\n\n {invalid && errors.length > 0 && (\n <div className=\"llm-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n {errors.map((e, i) => (\n <p key={i} className=\"llm-combobox-error-message\">{e}</p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
|