@uva-glass/component-library 3.45.0 → 3.45.2

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.
Files changed (11) hide show
  1. package/dist/SearchField.module-BEOH-3TV.js +17 -0
  2. package/dist/SearchField.module-BEOH-3TV.js.map +1 -0
  3. package/dist/assets/SearchField.css +1 -1
  4. package/dist/components/SearchField/SearchField.js +1 -1
  5. package/dist/components/SearchField/SearcheField.stories.js +19 -19
  6. package/dist/components/SearchField/SearcheField.stories.js.map +1 -1
  7. package/dist/components/SearchField/components/ResultOptionBox.js +1 -1
  8. package/dist/components/SearchField/components/ResultsOption.js +1 -1
  9. package/package.json +3 -3
  10. package/dist/SearchField.module-fyOzyOPm.js +0 -17
  11. package/dist/SearchField.module-fyOzyOPm.js.map +0 -1
package/dist/SearchField.module-BEOH-3TV.js ADDED
@@ -0,0 +1,17 @@
1
+ import './assets/SearchField.css';const _ = {
2
+ "search-field__input-wrapper": "_search-field__input-wrapper_hkbsl_1",
3
+ "search-field__input-field": "_search-field__input-field_hkbsl_8",
4
+ "search-field__icon": "_search-field__icon_hkbsl_35",
5
+ "search-field__result-wrapper": "_search-field__result-wrapper_hkbsl_43",
6
+ "search-field__input-container": "_search-field__input-container_hkbsl_58",
7
+ "search-field__input-container--hidden": "_search-field__input-container--hidden_hkbsl_63",
8
+ "search-field__input-container--visible": "_search-field__input-container--visible_hkbsl_67",
9
+ "search-field__compact-button": "_search-field__compact-button_hkbsl_77",
10
+ "search-field__compact-icon": "_search-field__compact-icon_hkbsl_93",
11
+ "search-field__result-list": "_search-field__result-list_hkbsl_97",
12
+ "search-field__result-item": "_search-field__result-item_hkbsl_110"
13
+ };
14
+ export {
15
+ _ as s
16
+ };
17
+ //# sourceMappingURL=SearchField.module-BEOH-3TV.js.map
package/dist/SearchField.module-BEOH-3TV.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchField.module-BEOH-3TV.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
package/dist/assets/SearchField.css CHANGED
@@ -1 +1 @@
1
- ._search-field__input-wrapper_5fm8z_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_5fm8z_8{appearance:none;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_5fm8z_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_5fm8z_8:disabled{color:var(--new-color-grey-500)}._search-field__input-field_5fm8z_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_5fm8z_39{color:var(--new-color-grey-700);position:absolute;right:.6rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_5fm8z_47{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;display:flex;flex-direction:column;left:0;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_5fm8z_61{position:relative;width:100%}._search-field__input-container--hidden_5fm8z_66{display:none}._search-field__input-container--visible_5fm8z_70{display:block;max-width:20rem;position:absolute;right:0;top:0;width:20rem;z-index:10}._search-field__compact-button_5fm8z_80{align-items:center;appearance:none;background-color:transparent;border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.75rem;justify-content:center;margin:0;text-align:inherit;width:2.75rem}._search-field__compact-icon_5fm8z_96{color:var(--new-color-grey-700)}._search-field__result-list_5fm8z_100{border-bottom:1px solid var(--new-color-grey-700);max-height:10rem;overflow-y:auto}._search-field__result-list_5fm8z_100:empty{display:none}._search-field__result-item_5fm8z_110{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_5fm8z_110:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_5fm8z_110:hover,._search-field__result-item_5fm8z_110:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_5fm8z_128{background-color:var(--new-color-uva-white);border-radius:0 0 .25rem .25rem;border-top:1px solid var(--new-color-grey-700);font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}
1
+ ._search-field__input-wrapper_hkbsl_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_hkbsl_8{appearance:none;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;color:var(--new-color-uva-black);flex:1;font-family:inherit;font-size:inherit;height:2.4rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_hkbsl_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_hkbsl_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_hkbsl_35{color:var(--new-color-grey-700);position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_hkbsl_43{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;display:flex;flex-direction:column;left:0;max-width:22rem;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_hkbsl_58{position:relative;width:100%}._search-field__input-container--hidden_hkbsl_63{display:none}._search-field__input-container--visible_hkbsl_67{display:block;max-width:20rem;position:absolute;right:0;top:0;width:20rem;z-index:10}._search-field__compact-button_hkbsl_77{align-items:center;appearance:none;background-color:transparent;border:1px solid var(--new-color-grey-400);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.5rem;justify-content:center;margin:0;text-align:inherit;width:2.5rem}._search-field__compact-icon_hkbsl_93{color:var(--new-color-grey-700)}._search-field__result-list_hkbsl_97{border-bottom:1px solid var(--new-color-grey-700);list-style:none;margin:0;max-height:10rem;overflow-y:auto;padding:0}._search-field__result-list_hkbsl_97:empty{display:none}._search-field__result-item_hkbsl_110{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_hkbsl_110:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_hkbsl_110:hover,._search-field__result-item_hkbsl_110:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_hkbsl_128{background-color:var(--new-color-uva-white);border-radius:0 0 .25rem .25rem;border-top:1px solid var(--new-color-grey-400);font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}
package/dist/components/SearchField/SearchField.js CHANGED
@@ -2,7 +2,7 @@ import { jsxs as h, jsx as r } from "react/jsx-runtime";
2
2
  import { useRef as y, useState as N, useEffect as R, Children as l, isValidElement as v, cloneElement as S } from "react";
3
3
  import { c as F } from "../../clsx-OuTLNxxd.js";
4
4
  import { ResultOption as w } from "./components/ResultsOption.js";
5
- import { s as t } from "../../SearchField.module-fyOzyOPm.js";
5
+ import { s as t } from "../../SearchField.module-BEOH-3TV.js";
6
6
  import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
7
7
  import { Icon as _ } from "../Icon/Icon.js";
8
8
  const O = ({
package/dist/components/SearchField/SearcheField.stories.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsx as n, jsxs as E } from "react/jsx-runtime";
2
- import { useState as m } from "react";
1
+ import { jsx as n, jsxs as w } from "react/jsx-runtime";
2
+ import { useState as h } from "react";
3
3
  import { SearchField as l } from "./SearchField.js";
4
- import { MOCK_DATA as L } from "./mockData.js";
5
- const v = `
4
+ import { MOCK_DATA as E } from "./mockData.js";
5
+ const L = `
6
6
  // Has all HTMLInputElement props available except "className" and "style"
7
7
  <SearchField
8
8
  id={string}
@@ -18,8 +18,8 @@ const v = `
18
18
  <SearchField.ResultOption>
19
19
  {loop custom options here}
20
20
  </SearchField.ResultOption>
21
- </SearchField>`, w = 4, c = 12, T = 1e3;
22
- var h = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(h || {});
21
+ </SearchField>`, v = 4, i = 12, T = 1e3;
22
+ var m = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(m || {});
23
23
  const M = {
24
24
  title: "Molecules/SearchField",
25
25
  component: l,
@@ -58,22 +58,22 @@ const M = {
58
58
  },
59
59
  parameters: {
60
60
  inspectComponent: l,
61
- codeString: v
61
+ codeString: L
62
62
  }
63
- }, I = (t) => {
64
- const [i, d] = m(!1), [u, r] = m(), g = "2026", p = "NL", f = (e, o, s, a) => `education-preparation/${h[o]}/${e}/${s}/${a}`, C = (e) => {
65
- if (e.length < w) {
63
+ }, x = (t) => {
64
+ const [c, d] = h(!1), [p, r] = h(), g = "2026", u = "NL", f = (e, o, s, a) => `education-preparation/${m[o]}/${e}/${s}/${a}`, C = (e) => {
65
+ if (e.length < v) {
66
66
  r(null);
67
67
  return;
68
68
  }
69
69
  d(!0);
70
- const o = e.toLowerCase(), s = L.filter(
70
+ const o = e.toLowerCase(), s = E.filter(
71
71
  (a) => a.name.NL.toLowerCase().includes(o) || a.code.toLowerCase().includes(o)
72
72
  );
73
73
  setTimeout(() => {
74
74
  r(s), d(!1);
75
75
  }, T);
76
- }, S = (e) => e.length > c ? `${e.length} resultaten gevonden, alleen de ${c} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= c ? `${e.length} resultaten gevonden.` : i ? "Zoeken..." : "Geen resultaten gevonden.", b = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem" }, children: S(e) }, "result-count") : null, R = (e) => {
76
+ }, S = (e) => e.length > i ? `${e.length} resultaten gevonden, alleen de ${i} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= i ? `${e.length} resultaten gevonden.` : c ? "Zoeken..." : "Geen resultaten gevonden.", b = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem", fontWeight: "600" }, children: S(e) }, "result-count") : null, R = (e) => {
77
77
  r(null), t.onSelect?.(e);
78
78
  };
79
79
  return /* @__PURE__ */ n("div", { style: { width: "20rem", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(
@@ -81,31 +81,31 @@ const M = {
81
81
  {
82
82
  placeholder: "Zoek...",
83
83
  id: "search-field-1",
84
- isLoading: i,
84
+ isLoading: c,
85
85
  isCompact: t.isCompact,
86
86
  onChange: (e) => C(e),
87
87
  onSelect: (e) => R(e),
88
- resultCountRow: b(u || []),
89
- children: u?.map((e) => /* @__PURE__ */ n(
88
+ resultCountRow: b(p || []),
89
+ children: p?.map((e) => /* @__PURE__ */ n(
90
90
  l.ResultOption,
91
91
  {
92
- ariaLabel: `${e.code}, ${e.name[p]}`,
92
+ ariaLabel: `${e.code}, ${e.name[u]}`,
93
93
  value: f(
94
94
  g,
95
95
  e.programmeType,
96
96
  e.programmeCode,
97
97
  e.code
98
98
  ),
99
- children: /* @__PURE__ */ E("div", { style: { display: "flex", gap: "1rem" }, children: [
99
+ children: /* @__PURE__ */ w("div", { style: { display: "flex", gap: "1rem" }, children: [
100
100
  /* @__PURE__ */ n("span", { children: e.code }),
101
- /* @__PURE__ */ n("span", { children: e.name[p] })
101
+ /* @__PURE__ */ n("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: e.name[u] })
102
102
  ] })
103
103
  },
104
104
  e.id
105
105
  ))
106
106
  }
107
107
  ) });
108
- }, N = I.bind({});
108
+ }, N = x.bind({});
109
109
  export {
110
110
  N as InputExample,
111
111
  M as default
package/dist/components/SearchField/SearcheField.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearcheField.stories.js","sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n id={string} \r\n queryLength?={number}\r\n placeholder?={string} \r\n isLoading?={boolean} \r\n isCompact?={boolean} \r\n onChange?={function}\r\n onSelect?={function}\r\n children={ReactNode}\r\n resultCountRow?={ReactNode}\r\n>\r\n <SearchField.ResultOption>\r\n {loop custom options here}\r\n </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n DEGREE = 'degree-programme',\r\n CERTIFICATE = 'certificate-programme',\r\n ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n __typename: string;\r\n id: string;\r\n code: string;\r\n name: {\r\n EN: string;\r\n NL: string;\r\n };\r\n programmeType: string;\r\n programmeCode: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/SearchField',\r\n component: SearchField,\r\n args: {},\r\n argTypes: {\r\n onSelect: {\r\n action: 'selected url',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n onChange: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n children: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n id: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n resultCountRow: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n isCompact: {\r\n control: 'boolean',\r\n default: false,\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: SearchField,\r\n codeString: codeString,\r\n },\r\n} as Meta<SearchFieldProps>;\r\n\r\nconst Template: StoryFn<SearchFieldProps> = (args) => {\r\n const [loading, setLoading] = useState(false);\r\n const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n const academicYear = '2026';\r\n const currentLanguage = 'NL';\r\n\r\n const createUrl = (\r\n academicYear: string,\r\n programmeType: keyof typeof ProgrammeType,\r\n programmeCode: string,\r\n code: string\r\n ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n const searchInMockData = (query: string) => {\r\n if (query.length < MIN_QUERY_LENGTH) {\r\n setSearchResults(null);\r\n return;\r\n }\r\n setLoading(true);\r\n\r\n const lowerCaseQuery = query.toLowerCase();\r\n\r\n const mockResults = MOCK_DATA.filter(\r\n (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n );\r\n\r\n setTimeout(() => {\r\n setSearchResults(mockResults);\r\n setLoading(false);\r\n }, QUERY_SPEED);\r\n };\r\n\r\n const getResultMessage = (results: SearchResult[]) => {\r\n if (results.length > MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden.`;\r\n } else if (loading) {\r\n return 'Zoeken...';\r\n } else {\r\n return 'Geen resultaten gevonden.';\r\n }\r\n };\r\n\r\n const resultBar = (results: SearchResult[]) =>\r\n results ? (\r\n <div key={'result-count'} style={{ padding: '0.5rem 1rem' }}>\r\n {getResultMessage(results)}\r\n </div>\r\n ) : null;\r\n\r\n const handleSelect = (value: string | number) => {\r\n setSearchResults(null);\r\n args.onSelect?.(value);\r\n };\r\n\r\n return (\r\n <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n <SearchField\r\n placeholder=\"Zoek...\"\r\n id=\"search-field-1\"\r\n isLoading={loading}\r\n isCompact={args.isCompact}\r\n onChange={(event) => searchInMockData(event)}\r\n onSelect={(event) => handleSelect(event)}\r\n resultCountRow={resultBar(searchResults || [])}\r\n >\r\n {searchResults?.map((result) => (\r\n <SearchField.ResultOption\r\n key={result.id}\r\n ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n value={createUrl(\r\n academicYear,\r\n result.programmeType as keyof typeof ProgrammeType,\r\n result.programmeCode,\r\n result.code\r\n )}\r\n >\r\n <div style={{ display: 'flex', gap: '1rem' }}>\r\n <span>{result.code}</span>\r\n <span>{result.name[currentLanguage]}</span>\r\n </div>\r\n </SearchField.ResultOption>\r\n ))}\r\n </SearchField>\r\n </div>\r\n );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"names":["codeString","MIN_QUERY_LENGTH","MAX_RESULTS","QUERY_SPEED","ProgrammeType","SearcheField_stories","SearchField","Template","args","loading","setLoading","useState","searchResults","setSearchResults","academicYear","currentLanguage","createUrl","programmeType","programmeCode","code","searchInMockData","query","lowerCaseQuery","mockResults","MOCK_DATA","item","getResultMessage","results","resultBar","handleSelect","value","jsx","event","result","jsxs","InputExample"],"mappings":"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"}
1
+ {"version":3,"file":"SearcheField.stories.js","sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n id={string} \r\n queryLength?={number}\r\n placeholder?={string} \r\n isLoading?={boolean} \r\n isCompact?={boolean} \r\n onChange?={function}\r\n onSelect?={function}\r\n children={ReactNode}\r\n resultCountRow?={ReactNode}\r\n>\r\n <SearchField.ResultOption>\r\n {loop custom options here}\r\n </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n DEGREE = 'degree-programme',\r\n CERTIFICATE = 'certificate-programme',\r\n ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n __typename: string;\r\n id: string;\r\n code: string;\r\n name: {\r\n EN: string;\r\n NL: string;\r\n };\r\n programmeType: string;\r\n programmeCode: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/SearchField',\r\n component: SearchField,\r\n args: {},\r\n argTypes: {\r\n onSelect: {\r\n action: 'selected url',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n onChange: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n children: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n id: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n resultCountRow: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n isCompact: {\r\n control: 'boolean',\r\n default: false,\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: SearchField,\r\n codeString: codeString,\r\n },\r\n} as Meta<SearchFieldProps>;\r\n\r\nconst Template: StoryFn<SearchFieldProps> = (args) => {\r\n const [loading, setLoading] = useState(false);\r\n const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n const academicYear = '2026';\r\n const currentLanguage = 'NL';\r\n\r\n const createUrl = (\r\n academicYear: string,\r\n programmeType: keyof typeof ProgrammeType,\r\n programmeCode: string,\r\n code: string\r\n ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n const searchInMockData = (query: string) => {\r\n if (query.length < MIN_QUERY_LENGTH) {\r\n setSearchResults(null);\r\n return;\r\n }\r\n setLoading(true);\r\n\r\n const lowerCaseQuery = query.toLowerCase();\r\n\r\n const mockResults = MOCK_DATA.filter(\r\n (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n );\r\n\r\n setTimeout(() => {\r\n setSearchResults(mockResults);\r\n setLoading(false);\r\n }, QUERY_SPEED);\r\n };\r\n\r\n const getResultMessage = (results: SearchResult[]) => {\r\n if (results.length > MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden.`;\r\n } else if (loading) {\r\n return 'Zoeken...';\r\n } else {\r\n return 'Geen resultaten gevonden.';\r\n }\r\n };\r\n\r\n const resultBar = (results: SearchResult[]) =>\r\n results ? (\r\n <div key={'result-count'} style={{ padding: '0.5rem 1rem', fontWeight: '600' }}>\r\n {getResultMessage(results)}\r\n </div>\r\n ) : null;\r\n\r\n const handleSelect = (value: string | number) => {\r\n setSearchResults(null);\r\n args.onSelect?.(value);\r\n };\r\n\r\n return (\r\n <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n <SearchField\r\n placeholder=\"Zoek...\"\r\n id=\"search-field-1\"\r\n isLoading={loading}\r\n isCompact={args.isCompact}\r\n onChange={(event) => searchInMockData(event)}\r\n onSelect={(event) => handleSelect(event)}\r\n resultCountRow={resultBar(searchResults || [])}\r\n >\r\n {searchResults?.map((result) => (\r\n <SearchField.ResultOption\r\n key={result.id}\r\n ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n value={createUrl(\r\n academicYear,\r\n result.programmeType as keyof typeof ProgrammeType,\r\n result.programmeCode,\r\n result.code\r\n )}\r\n >\r\n <div style={{ display: 'flex', gap: '1rem' }}>\r\n <span>{result.code}</span>\r\n <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n {result.name[currentLanguage]}\r\n </span>\r\n </div>\r\n </SearchField.ResultOption>\r\n ))}\r\n </SearchField>\r\n </div>\r\n );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"names":["codeString","MIN_QUERY_LENGTH","MAX_RESULTS","QUERY_SPEED","ProgrammeType","SearcheField_stories","SearchField","Template","args","loading","setLoading","useState","searchResults","setSearchResults","academicYear","currentLanguage","createUrl","programmeType","programmeCode","code","searchInMockData","query","lowerCaseQuery","mockResults","MOCK_DATA","item","getResultMessage","results","resultBar","jsx","handleSelect","value","event","result","jsxs","InputExample"],"mappings":";;;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAkBbC,IAAmB,GACnBC,IAAc,IACdC,IAAc;AAEpB,IAAKC,sBAAAA,OACHA,EAAA,SAAS,oBACTA,EAAA,cAAc,yBACdA,EAAA,iBAAiB,4BAHdA,IAAAA,KAAA,CAAA,CAAA;AAmBL,MAAAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,MAAM,CAAA;AAAA,EACN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,IAAI;AAAA,MACF,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,gBAAgB;AAAA,MACd,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAN;AAAA,EAAA;AAEJ,GAEMO,IAAsC,CAACC,MAAS;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAeC,CAAgB,IAAIF,EAAA,GACpCG,IAAe,QACfC,IAAkB,MAElBC,IAAY,CAChBF,GACAG,GACAC,GACAC,MACG,yBAAyBf,EAAca,CAAa,CAAC,IAAIH,CAAY,IAAII,CAAa,IAAIC,CAAI,IAE7FC,IAAmB,CAACC,MAAkB;AAC1C,QAAIA,EAAM,SAASpB,GAAkB;AACnC,MAAAY,EAAiB,IAAI;AACrB;AAAA,IACF;AACA,IAAAH,EAAW,EAAI;AAEf,UAAMY,IAAiBD,EAAM,YAAA,GAEvBE,IAAcC,EAAU;AAAA,MAC5B,CAACC,MAASA,EAAK,KAAK,GAAG,YAAA,EAAc,SAASH,CAAc,KAAKG,EAAK,KAAK,YAAA,EAAc,SAASH,CAAc;AAAA,IAAA;AAGlH,eAAW,MAAM;AACf,MAAAT,EAAiBU,CAAW,GAC5Bb,EAAW,EAAK;AAAA,IAClB,GAAGP,CAAW;AAAA,EAChB,GAEMuB,IAAmB,CAACC,MACpBA,EAAQ,SAASzB,IACZ,GAAGyB,EAAQ,MAAM,mCAAmCzB,CAAW,0CAC7DyB,EAAQ,SAAS,KAAKA,EAAQ,UAAUzB,IAC1C,GAAGyB,EAAQ,MAAM,0BACflB,IACF,cAEA,6BAILmB,IAAY,CAACD,MACjBA,IACE,gBAAAE,EAAC,SAAyB,OAAO,EAAE,SAAS,eAAe,YAAY,MAAA,GACpE,YAAiBF,CAAO,EAAA,GADjB,cAEV,IACE,MAEAG,IAAe,CAACC,MAA2B;AAC/C,IAAAlB,EAAiB,IAAI,GACrBL,EAAK,WAAWuB,CAAK;AAAA,EACvB;AAEA,SACE,gBAAAF,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,SAAS,QAAQ,gBAAgB,WAAA,GAC7D,UAAA,gBAAAA;AAAA,IAACvB;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,IAAG;AAAA,MACH,WAAWG;AAAA,MACX,WAAWD,EAAK;AAAA,MAChB,UAAU,CAACwB,MAAUZ,EAAiBY,CAAK;AAAA,MAC3C,UAAU,CAACA,MAAUF,EAAaE,CAAK;AAAA,MACvC,gBAAgBJ,EAAUhB,KAAiB,EAAE;AAAA,MAE5C,UAAAA,GAAe,IAAI,CAACqB,MACnB,gBAAAJ;AAAA,QAACvB,EAAY;AAAA,QAAZ;AAAA,UAEC,WAAW,GAAG2B,EAAO,IAAI,KAAKA,EAAO,KAAKlB,CAAe,CAAC;AAAA,UAC1D,OAAOC;AAAA,YACLF;AAAA,YACAmB,EAAO;AAAA,YACPA,EAAO;AAAA,YACPA,EAAO;AAAA,UAAA;AAAA,UAGT,UAAA,gBAAAC,EAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,UAClC,UAAA;AAAA,YAAA,gBAAAL,EAAC,QAAA,EAAM,YAAO,KAAA,CAAK;AAAA,YACnB,gBAAAA,EAAC,QAAA,EAAK,OAAO,EAAE,YAAY,UAAU,UAAU,UAAU,cAAc,WAAA,GACpE,UAAAI,EAAO,KAAKlB,CAAe,EAAA,CAC9B;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAdKkB,EAAO;AAAA,MAAA,CAgBf;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,GAEaE,IAAe5B,EAAS,KAAK,CAAA,CAAE;"}
package/dist/components/SearchField/components/ResultOptionBox.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs as l, jsx as s } from "react/jsx-runtime";
2
2
  import { Fragment as i } from "react";
3
- import { s as e } from "../../../SearchField.module-fyOzyOPm.js";
3
+ import { s as e } from "../../../SearchField.module-BEOH-3TV.js";
4
4
  const c = ({ children: t, resultCountRow: r }) => /* @__PURE__ */ l("div", { className: e["search-field__result-wrapper"], children: [
5
5
  /* @__PURE__ */ s("ul", { className: e["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
6
6
  r && /* @__PURE__ */ s(i, { children: r }, "result-count")
package/dist/components/SearchField/components/ResultsOption.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
- import { s as c } from "../../../SearchField.module-fyOzyOPm.js";
2
+ import { s as c } from "../../../SearchField.module-BEOH-3TV.js";
3
3
  const f = ({ value: o, key: a, children: s, onSelect: r, ariaLabel: l }) => {
4
4
  const t = (e) => {
5
5
  e.stopPropagation(), r && r(o);
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.45.0",
5
+ "version": "3.45.2",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -60,7 +60,7 @@
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
- "@types/node": "^22.18.5",
63
+ "@types/node": "^22.18.6",
64
64
  "@types/react": "^19.1.13",
65
65
  "@types/react-dom": "^19.1.9",
66
66
  "@uva-glass/eslint-config": "^1.3.11",
@@ -90,7 +90,7 @@
90
90
  "stylelint-order": "^7.0.0",
91
91
  "ts-node": "^10.9.2",
92
92
  "typescript": "^5.9.2",
93
- "vite": "^7.1.5",
93
+ "vite": "^7.1.6",
94
94
  "vite-plugin-dts": "^4.5.4",
95
95
  "vite-plugin-lib-inject-css": "^2.2.2",
96
96
  "vite-plugin-static-copy": "^3.1.2",
package/dist/SearchField.module-fyOzyOPm.js DELETED
@@ -1,17 +0,0 @@
1
- import './assets/SearchField.css';const _ = {
2
- "search-field__input-wrapper": "_search-field__input-wrapper_5fm8z_1",
3
- "search-field__input-field": "_search-field__input-field_5fm8z_8",
4
- "search-field__icon": "_search-field__icon_5fm8z_39",
5
- "search-field__result-wrapper": "_search-field__result-wrapper_5fm8z_47",
6
- "search-field__input-container": "_search-field__input-container_5fm8z_61",
7
- "search-field__input-container--hidden": "_search-field__input-container--hidden_5fm8z_66",
8
- "search-field__input-container--visible": "_search-field__input-container--visible_5fm8z_70",
9
- "search-field__compact-button": "_search-field__compact-button_5fm8z_80",
10
- "search-field__compact-icon": "_search-field__compact-icon_5fm8z_96",
11
- "search-field__result-list": "_search-field__result-list_5fm8z_100",
12
- "search-field__result-item": "_search-field__result-item_5fm8z_110"
13
- };
14
- export {
15
- _ as s
16
- };
17
- //# sourceMappingURL=SearchField.module-fyOzyOPm.js.map
package/dist/SearchField.module-fyOzyOPm.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchField.module-fyOzyOPm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}