@uva-glass/component-library 3.47.4 → 3.47.5
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.
|
@@ -2,7 +2,7 @@ import { jsxs as x, jsx as s } from "react/jsx-runtime";
|
|
|
2
2
|
import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
|
|
3
3
|
import { c as S } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { ResultOption as D } from "./components/ResultsOption.js";
|
|
5
|
-
import { s as
|
|
5
|
+
import { s as t } from "../../SearchField.module-Be9ZoU-6.js";
|
|
6
6
|
import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
|
|
7
7
|
import { Icon as w } from "../Icon/Icon.js";
|
|
8
8
|
import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
|
|
@@ -15,15 +15,15 @@ const A = ({
|
|
|
15
15
|
children: a,
|
|
16
16
|
resultCountRow: h
|
|
17
17
|
}) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
18
|
+
const n = y(null), [_, f] = k(!1), p = y(null), R = () => {
|
|
19
|
+
n.current && (n.current.value = "", n.current.focus());
|
|
20
20
|
}, v = (e) => {
|
|
21
21
|
const o = e.target, r = o.value;
|
|
22
22
|
o.setSelectionRange(r.length, r.length), r && c(r);
|
|
23
23
|
}, g = (e) => {
|
|
24
24
|
switch (e.key) {
|
|
25
25
|
case "Escape":
|
|
26
|
-
e.preventDefault(), c(""),
|
|
26
|
+
e.preventDefault(), c(""), n.current && (n.current.value = ""), l && (f(!1), n.current?.blur());
|
|
27
27
|
break;
|
|
28
28
|
case "ArrowDown": {
|
|
29
29
|
e.preventDefault();
|
|
@@ -39,32 +39,32 @@ const A = ({
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
return F(() => {
|
|
42
|
-
m.count(a) ||
|
|
43
|
-
}, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className:
|
|
42
|
+
m.count(a) || f(!1);
|
|
43
|
+
}, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: t["search-field__input-wrapper"], children: [
|
|
44
44
|
l && /* @__PURE__ */ s(
|
|
45
45
|
"button",
|
|
46
46
|
{
|
|
47
47
|
type: "button",
|
|
48
|
-
className:
|
|
48
|
+
className: t["search-field__compact-button"],
|
|
49
49
|
onClick: () => f(!0),
|
|
50
50
|
"aria-label": u,
|
|
51
|
-
children: /* @__PURE__ */ s(w, { name: "Magnify", className:
|
|
51
|
+
children: /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
|
|
52
52
|
}
|
|
53
53
|
),
|
|
54
54
|
/* @__PURE__ */ x(
|
|
55
55
|
"div",
|
|
56
56
|
{
|
|
57
|
-
className: S(
|
|
58
|
-
[
|
|
59
|
-
[
|
|
57
|
+
className: S(t["search-field__input-container"], {
|
|
58
|
+
[t["search-field__input-container--hidden"]]: l && !_,
|
|
59
|
+
[t["search-field__input-container--visible"]]: l && _
|
|
60
60
|
}),
|
|
61
61
|
children: [
|
|
62
|
-
/* @__PURE__ */ s(w, { name: "Magnify", className:
|
|
62
|
+
/* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
|
|
63
63
|
/* @__PURE__ */ s(
|
|
64
64
|
"input",
|
|
65
65
|
{
|
|
66
66
|
type: "text",
|
|
67
|
-
className:
|
|
67
|
+
className: t["search-field__input-field"],
|
|
68
68
|
placeholder: u,
|
|
69
69
|
id: d,
|
|
70
70
|
onChange: (e) => c(e.target.value),
|
|
@@ -77,7 +77,7 @@ const A = ({
|
|
|
77
77
|
"aria-haspopup": "listbox",
|
|
78
78
|
"aria-label": u,
|
|
79
79
|
autoComplete: "off",
|
|
80
|
-
ref:
|
|
80
|
+
ref: n
|
|
81
81
|
}
|
|
82
82
|
)
|
|
83
83
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n /** Unique identifier for the search field. */\r\n id: string;\r\n /** Placeholder text for the search input. */\r\n placeholder: string;\r\n /** Indicates if the search field is in a loading state. */\r\n isLoading?: boolean;\r\n /** If true, the search field is displayed in a compact style. */\r\n isCompact?: boolean;\r\n /** Callback function triggered when the input value changes. */\r\n onChange: (query: string) => void;\r\n /** The children elements, typically ResultOption components. */\r\n children: ReactNode;\r\n /** Optional row to display the count of results. */\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n id,\r\n placeholder,\r\n isLoading = false,\r\n isCompact,\r\n onChange,\r\n children,\r\n resultCountRow,\r\n}: SearchFieldProps) => {\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [showField, setShowField] = useState<boolean>(false);\r\n const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleReset = () => {\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n const target = event.target;\r\n const value = target.value;\r\n target.setSelectionRange(value.length, value.length);\r\n if (value) {\r\n onChange(value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n onChange('');\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n if (isCompact) {\r\n setShowField(false);\r\n inputRef.current?.blur();\r\n }\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n const container = optionListRef.current;\r\n const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n if (firstFocusable) {\r\n let currentOption: HTMLElement | null = firstFocusable;\r\n while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n currentOption = currentOption.nextElementSibling as HTMLElement;\r\n }\r\n currentOption?.focus();\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (!Children.count(children)) {\r\n setShowField(false);\r\n
|
|
1
|
+
{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n /** Unique identifier for the search field. */\r\n id: string;\r\n /** Placeholder text for the search input. */\r\n placeholder: string;\r\n /** Indicates if the search field is in a loading state. */\r\n isLoading?: boolean;\r\n /** If true, the search field is displayed in a compact style. */\r\n isCompact?: boolean;\r\n /** Callback function triggered when the input value changes. */\r\n onChange: (query: string) => void;\r\n /** The children elements, typically ResultOption components. */\r\n children: ReactNode;\r\n /** Optional row to display the count of results. */\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n id,\r\n placeholder,\r\n isLoading = false,\r\n isCompact,\r\n onChange,\r\n children,\r\n resultCountRow,\r\n}: SearchFieldProps) => {\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [showField, setShowField] = useState<boolean>(false);\r\n const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleReset = () => {\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n inputRef.current.focus();\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n const target = event.target;\r\n const value = target.value;\r\n target.setSelectionRange(value.length, value.length);\r\n if (value) {\r\n onChange(value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n onChange('');\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n if (isCompact) {\r\n setShowField(false);\r\n inputRef.current?.blur();\r\n }\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n const container = optionListRef.current;\r\n const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n if (firstFocusable) {\r\n let currentOption: HTMLElement | null = firstFocusable;\r\n while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n currentOption = currentOption.nextElementSibling as HTMLElement;\r\n }\r\n currentOption?.focus();\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (!Children.count(children)) {\r\n setShowField(false);\r\n }\r\n }, [children]);\r\n\r\n useOnClickOutside(optionListRef as RefObject<HTMLElement>, onChange.bind(null, ''));\r\n\r\n return (\r\n <div className={styles['search-field__input-wrapper']}>\r\n {isCompact && (\r\n <button\r\n type=\"button\"\r\n className={styles['search-field__compact-button']}\r\n onClick={() => setShowField(true)}\r\n aria-label={placeholder}\r\n >\r\n <Icon name=\"Magnify\" className={styles['search-field__compact-icon']} aria-hidden=\"true\" />\r\n </button>\r\n )}\r\n <div\r\n className={clsx(styles['search-field__input-container'], {\r\n [styles['search-field__input-container--hidden']]: isCompact && !showField,\r\n [styles['search-field__input-container--visible']]: isCompact && showField,\r\n })}\r\n >\r\n <Icon name=\"Magnify\" className={styles['search-field__icon']} aria-hidden=\"true\" />\r\n <input\r\n type=\"text\"\r\n className={styles['search-field__input-field']}\r\n placeholder={placeholder}\r\n id={id}\r\n onChange={(event) => onChange(event.target.value)}\r\n onFocus={handleFocus}\r\n onKeyDown={handleKeyDown}\r\n role=\"combobox\"\r\n aria-expanded={Boolean(Children.count(children)) || isLoading}\r\n aria-controls={`${id}-results`}\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-label={placeholder}\r\n autoComplete=\"off\"\r\n ref={inputRef}\r\n />\r\n </div>\r\n {(children || isLoading) && (\r\n <ResultOptionBox resultCountRow={resultCountRow ? resultCountRow : null} ref={optionListRef}>\r\n {Children.map(children, (child, index) => {\r\n if (isValidElement<ResultOptionProps>(child)) {\r\n return cloneElement(child, {\r\n key: index,\r\n onReset: handleReset,\r\n });\r\n }\r\n return child;\r\n })}\r\n </ResultOptionBox>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nSearchField.ResultOption = ResultOption;\r\n"],"names":["SearchField","id","placeholder","isLoading","isCompact","onChange","children","resultCountRow","inputRef","useRef","showField","setShowField","useState","optionListRef","handleReset","handleFocus","event","target","value","handleKeyDown","firstFocusable","currentOption","useEffect","Children","useOnClickOutside","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.47.
|
|
5
|
+
"version": "3.47.5",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-dom": "^19.1.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@commitlint/cli": "^20.
|
|
46
|
+
"@commitlint/cli": "^20.1.0",
|
|
47
47
|
"@commitlint/config-conventional": "^20.0.0",
|
|
48
48
|
"@react-aria/button": "^3.14.1",
|
|
49
49
|
"@react-aria/dialog": "^3.5.30",
|
|
@@ -52,16 +52,16 @@
|
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
53
|
"@semantic-release/gitlab": "^13.2.8",
|
|
54
54
|
"@semantic-release/npm": "^12.0.2",
|
|
55
|
-
"@storybook/addon-a11y": "^9.1.
|
|
56
|
-
"@storybook/addon-docs": "^9.1.
|
|
57
|
-
"@storybook/addon-links": "^9.1.
|
|
58
|
-
"@storybook/react": "^9.1.
|
|
59
|
-
"@storybook/react-vite": "^9.1.
|
|
55
|
+
"@storybook/addon-a11y": "^9.1.9",
|
|
56
|
+
"@storybook/addon-docs": "^9.1.9",
|
|
57
|
+
"@storybook/addon-links": "^9.1.9",
|
|
58
|
+
"@storybook/react": "^9.1.9",
|
|
59
|
+
"@storybook/react-vite": "^9.1.9",
|
|
60
60
|
"@testing-library/jest-dom": "^6.8.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
63
63
|
"@types/node": "^22.18.7",
|
|
64
|
-
"@types/react": "^19.1.
|
|
64
|
+
"@types/react": "^19.1.16",
|
|
65
65
|
"@types/react-dom": "^19.1.9",
|
|
66
66
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
67
67
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-dom": "^19.1.1",
|
|
83
83
|
"react-router": "^7.9.3",
|
|
84
84
|
"semantic-release": "^24.2.9",
|
|
85
|
-
"storybook": "^9.1.
|
|
85
|
+
"storybook": "^9.1.9",
|
|
86
86
|
"style-dictionary": "^5.0.4",
|
|
87
87
|
"stylelint": "^16.24.0",
|
|
88
88
|
"stylelint-config-recommended": "^17.0.0",
|