@uva-glass/component-library 3.57.3 → 3.57.4

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 (36) hide show
  1. package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js → AddCatalogueLinkForm-CvJoaUFz.js} +2 -2
  2. package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js.map → AddCatalogueLinkForm-CvJoaUFz.js.map} +1 -1
  3. package/dist/{DataTable-Cgn_RKTA.js → DataTable-Guuh0GZc.js} +53 -49
  4. package/dist/DataTable-Guuh0GZc.js.map +1 -0
  5. package/dist/{FeedbackBar-DEDpoNy7.js → FeedbackBar-DsOWAAGt.js} +2 -2
  6. package/dist/{FeedbackBar-DEDpoNy7.js.map → FeedbackBar-DsOWAAGt.js.map} +1 -1
  7. package/dist/Repeater-DUo13Mq6.js +23 -0
  8. package/dist/Repeater-DUo13Mq6.js.map +1 -0
  9. package/dist/assets/DataTable.css +1 -1
  10. package/dist/assets/Repeater.css +1 -1
  11. package/dist/components/DataTable/DataTable.d.ts +3 -1
  12. package/dist/components/DataTable/DataTable.js +1 -1
  13. package/dist/components/DataTable/DataTable.stories.js +47 -56
  14. package/dist/components/DataTable/DataTable.stories.js.map +1 -1
  15. package/dist/components/DataTable/index.js +1 -1
  16. package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.js +1 -1
  17. package/dist/components/FeedbackBar/FeedbackBar.js +1 -1
  18. package/dist/components/FeedbackBar/FeedbackBar.stories.js +2 -2
  19. package/dist/components/FeedbackBar/FeedbackBar.test.js +1 -1
  20. package/dist/components/FeedbackBar/index.js +1 -1
  21. package/dist/components/FeedbackBox/FeedbackBox.stories.js +1 -1
  22. package/dist/components/PageOverlay/PageOverlay.stories.js +1 -1
  23. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
  24. package/dist/components/Repeater/Repeater.d.ts +1 -1
  25. package/dist/components/Repeater/Repeater.js +1 -1
  26. package/dist/components/Repeater/Repeater.stories.js +1 -1
  27. package/dist/components/Repeater/index.js +1 -1
  28. package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.js +1 -1
  29. package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/index.js +1 -1
  30. package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js +1 -1
  31. package/dist/components/index.js +3 -3
  32. package/dist/index.js +3 -3
  33. package/package.json +8 -8
  34. package/dist/DataTable-Cgn_RKTA.js.map +0 -1
  35. package/dist/Repeater-BAEfOMZI.js +0 -22
  36. package/dist/Repeater-BAEfOMZI.js.map +0 -1
package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js → AddCatalogueLinkForm-CvJoaUFz.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { Button as e } from "./components/Buttons/Button.js";
2
2
  import { t } from "./Label-52ny6d06.js";
3
- import { t as n } from "./Repeater-BAEfOMZI.js";
3
+ import { t as n } from "./Repeater-DUo13Mq6.js";
4
4
  import { t as r } from "./FormField-ByjTkKKq.js";
5
5
  import { t as i } from "./InputField-asFsxHvx.js";
6
6
  import { useLanguage as a } from "./components/RteEditor/Providers/LanguageProvider.js";
@@ -113,4 +113,4 @@ import './assets/AddCatalogueLinkForm.css';var f = {
113
113
  //#endregion
114
114
  export { p as t };
115
115
 
116
- //# sourceMappingURL=AddCatalogueLinkForm-Di0xm7Ep.js.map
116
+ //# sourceMappingURL=AddCatalogueLinkForm-CvJoaUFz.js.map
package/dist/{AddCatalogueLinkForm-Di0xm7Ep.js.map → AddCatalogueLinkForm-CvJoaUFz.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"AddCatalogueLinkForm-Di0xm7Ep.js","names":[],"sources":["../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.module.css","../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.tsx"],"sourcesContent":[".courselinkform {\n font-family: inherit;\n font-size: inherit;\n width: 30rem;\n}\n\n.courselinkform__input-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.courselinkform__footer {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin-top: 1rem;\n}\n\n.courselinkform__results-wrapper {\n position: relative;\n}\n\n.courselinkform__results-header {\n align-items: center;\n display: flex;\n font-size: var(--font-size-text-base);\n gap: 0.5rem;\n padding: 0.5rem;\n text-align: left;\n width: 100%;\n}\n\n.courselinkform__results {\n border: 1px solid var(--color-grey-300);\n border-radius: 0.25rem;\n max-height: 10rem;\n overflow-y: auto;\n}\n\n.courselinkform__result-message {\n align-items: center;\n color: var(--color-grey-600);\n display: flex;\n font-size: var(--font-size-text-non-essential);\n height: 2rem;\n justify-content: flex-start;\n padding: 0 0.5rem;\n}\n\n.courselinkform__result-item {\n align-items: center;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-text-base);\n gap: 0.5rem;\n min-height: 2.5rem;\n padding: 0.5rem;\n text-align: left;\n width: 100%;\n}\n\n.courselinkform__results-header span,\n.courselinkform__result-item span {\n line-height: 1.4;\n width: calc(100% - 9rem);\n}\n\n.courselinkform__results-header span:first-child,\n.courselinkform__result-item span:first-child {\n width: 9rem;\n}\n\n.courselinkform__result-item:focus-visible {\n background-color: var(--color-grey-300);\n outline: none;\n}\n\n.courselinkform__result-item:hover,\n.courselinkform__result-item:focus-visible {\n background-color: var(--color-grey-300);\n}\n\n.courselinkform__result-item:not(:last-child) {\n border-bottom: 1px solid var(--color-grey-300);\n}\n","import { useEffect, useId, useRef } from 'react';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\n\r\nimport styles from './AddCatalogueLinkForm.module.css';\r\n\r\nimport { Button } from 'components/Buttons';\r\nimport { FormField } from 'components/FormField';\r\nimport { Label } from 'components/Label';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport { InputField } from 'components/InputField';\r\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\r\nimport { Repeater } from 'components/Repeater';\r\n\r\ntype SearchResult = {\r\n code: string;\r\n id: string;\r\n name: {\r\n EN: string;\r\n NL: string;\r\n };\r\n programmeType: string;\r\n};\r\n\r\nexport type SearchResponse = {\r\n state: 'idle' | 'pending' | 'ready';\r\n results: SearchResult[];\r\n};\r\n\r\ninterface AddCatalogueLinkFormProps {\r\n linkType: 'course' | 'programme';\r\n onCloseHandler: () => void;\r\n onSearchHandler: (query: string, type: 'course' | 'programme') => void;\r\n searchResponse?: SearchResponse;\r\n onSelect?: (code: string, label: string, type: 'course' | 'programme') => void;\r\n}\r\n\r\nexport const AddCatalogueLinkForm = ({\r\n linkType,\r\n onCloseHandler,\r\n onSearchHandler,\r\n searchResponse,\r\n onSelect,\r\n}: AddCatalogueLinkFormProps) => {\r\n const t = useTranslation();\r\n const searchId = `search_${useId()}`;\r\n const searchFieldRef = useRef<HTMLInputElement>(null);\r\n const resultListRef = useRef<HTMLDivElement>(null);\r\n const { currentLanguage } = useLanguage();\r\n\r\n const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const query = event.target.value;\r\n if (onSearchHandler) {\r\n onSearchHandler(query, linkType);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n onCloseHandler();\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n const container = resultListRef.current;\r\n const firstFocusable = container?.querySelector<HTMLElement>('button');\r\n firstFocusable?.focus();\r\n }\r\n };\r\n\r\n const onResultKeyDown = (\r\n event: KeyboardEvent<HTMLButtonElement>,\r\n code: string,\r\n name: string,\r\n linkType: 'course' | 'programme'\r\n ) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n event.stopPropagation();\r\n handleClose();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n onSelect && onSelect(code, name, linkType);\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const nextElement = event.currentTarget.nextElementSibling;\r\n (nextElement as HTMLButtonElement)?.focus();\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const previousElement = event.currentTarget.previousElementSibling;\r\n (previousElement as HTMLButtonElement)?.focus();\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n handleClose();\r\n break;\r\n default:\r\n event.preventDefault();\r\n break;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (searchFieldRef.current) {\r\n onSearchHandler('', linkType);\r\n searchFieldRef.current.value = '';\r\n searchFieldRef.current.focus();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return (\r\n <div className={styles['courselinkform']}>\r\n <Repeater gap=\"050\">\r\n <FormField className={styles['courselinkform__input-field']}>\r\n <Label htmlFor={searchId}>\r\n {t.cataloguelinks[linkType === 'course' ? 'searchCourseFieldLabel' : 'searchProgrammeFieldLabel']}\r\n </Label>\r\n <div className={styles['linkform__input-url-wrapper']}>\r\n <InputField\r\n id={searchId}\r\n placeholder={t.cataloguelinks.searchFieldPlaceholder}\r\n onChange={handleSearch}\r\n onKeyDown={handleKeyDown}\r\n ref={searchFieldRef}\r\n aria-label={t.aria.labels.searchField}\r\n />\r\n </div>\r\n </FormField>\r\n {searchResponse && searchResponse.state === 'pending' && (\r\n <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.loading}</div>\r\n )}\r\n {searchResponse && searchResponse.results.length === 0 && searchResponse.state === 'ready' && (\r\n <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.noResults}</div>\r\n )}\r\n {searchResponse && searchResponse.results.length > 0 && (\r\n <div className={styles['courselinkform__results-wrapper']}>\r\n <div className={styles['courselinkform__results-header']}>\r\n <span>\r\n {\r\n t.cataloguelinks[\r\n linkType === 'course' ? 'resultCourseListCatalogNumber' : 'resultProgrammeListCatalogNumber'\r\n ]\r\n }\r\n </span>\r\n <span>{t.cataloguelinks.resultListName}</span>\r\n </div>\r\n <div className={styles['courselinkform__results']} ref={resultListRef}>\r\n {searchResponse.results.map(({ id, code, name }) => (\r\n <button\r\n key={id}\r\n type=\"button\"\r\n className={styles['courselinkform__result-item']}\r\n onClick={() => onSelect && onSelect(code, name[currentLanguage], linkType)}\r\n onKeyDown={(event) => onResultKeyDown(event, code, name[currentLanguage], linkType)}\r\n tabIndex={0}\r\n aria-label={`${code} ${name[currentLanguage]}`}\r\n >\r\n <span>{code}</span>\r\n <span>{name[currentLanguage]}</span>\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </Repeater>\r\n <div className={styles['courselinkform__footer']}>\r\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\r\n {t.common.cancel}\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"AddCatalogueLinkForm-CvJoaUFz.js","names":[],"sources":["../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.module.css","../src/components/RteEditor/Plugins/CourseCataloguePlugin/AddCatalogueLinkForm/AddCatalogueLinkForm.tsx"],"sourcesContent":[".courselinkform {\n font-family: inherit;\n font-size: inherit;\n width: 30rem;\n}\n\n.courselinkform__input-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.courselinkform__footer {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin-top: 1rem;\n}\n\n.courselinkform__results-wrapper {\n position: relative;\n}\n\n.courselinkform__results-header {\n align-items: center;\n display: flex;\n font-size: var(--font-size-text-base);\n gap: 0.5rem;\n padding: 0.5rem;\n text-align: left;\n width: 100%;\n}\n\n.courselinkform__results {\n border: 1px solid var(--color-grey-300);\n border-radius: 0.25rem;\n max-height: 10rem;\n overflow-y: auto;\n}\n\n.courselinkform__result-message {\n align-items: center;\n color: var(--color-grey-600);\n display: flex;\n font-size: var(--font-size-text-non-essential);\n height: 2rem;\n justify-content: flex-start;\n padding: 0 0.5rem;\n}\n\n.courselinkform__result-item {\n align-items: center;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-text-base);\n gap: 0.5rem;\n min-height: 2.5rem;\n padding: 0.5rem;\n text-align: left;\n width: 100%;\n}\n\n.courselinkform__results-header span,\n.courselinkform__result-item span {\n line-height: 1.4;\n width: calc(100% - 9rem);\n}\n\n.courselinkform__results-header span:first-child,\n.courselinkform__result-item span:first-child {\n width: 9rem;\n}\n\n.courselinkform__result-item:focus-visible {\n background-color: var(--color-grey-300);\n outline: none;\n}\n\n.courselinkform__result-item:hover,\n.courselinkform__result-item:focus-visible {\n background-color: var(--color-grey-300);\n}\n\n.courselinkform__result-item:not(:last-child) {\n border-bottom: 1px solid var(--color-grey-300);\n}\n","import { useEffect, useId, useRef } from 'react';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\n\r\nimport styles from './AddCatalogueLinkForm.module.css';\r\n\r\nimport { Button } from 'components/Buttons';\r\nimport { FormField } from 'components/FormField';\r\nimport { Label } from 'components/Label';\r\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\r\nimport { InputField } from 'components/InputField';\r\nimport { useLanguage } from 'components/RteEditor/Providers/LanguageProvider';\r\nimport { Repeater } from 'components/Repeater';\r\n\r\ntype SearchResult = {\r\n code: string;\r\n id: string;\r\n name: {\r\n EN: string;\r\n NL: string;\r\n };\r\n programmeType: string;\r\n};\r\n\r\nexport type SearchResponse = {\r\n state: 'idle' | 'pending' | 'ready';\r\n results: SearchResult[];\r\n};\r\n\r\ninterface AddCatalogueLinkFormProps {\r\n linkType: 'course' | 'programme';\r\n onCloseHandler: () => void;\r\n onSearchHandler: (query: string, type: 'course' | 'programme') => void;\r\n searchResponse?: SearchResponse;\r\n onSelect?: (code: string, label: string, type: 'course' | 'programme') => void;\r\n}\r\n\r\nexport const AddCatalogueLinkForm = ({\r\n linkType,\r\n onCloseHandler,\r\n onSearchHandler,\r\n searchResponse,\r\n onSelect,\r\n}: AddCatalogueLinkFormProps) => {\r\n const t = useTranslation();\r\n const searchId = `search_${useId()}`;\r\n const searchFieldRef = useRef<HTMLInputElement>(null);\r\n const resultListRef = useRef<HTMLDivElement>(null);\r\n const { currentLanguage } = useLanguage();\r\n\r\n const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const query = event.target.value;\r\n if (onSearchHandler) {\r\n onSearchHandler(query, linkType);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n onCloseHandler();\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n const container = resultListRef.current;\r\n const firstFocusable = container?.querySelector<HTMLElement>('button');\r\n firstFocusable?.focus();\r\n }\r\n };\r\n\r\n const onResultKeyDown = (\r\n event: KeyboardEvent<HTMLButtonElement>,\r\n code: string,\r\n name: string,\r\n linkType: 'course' | 'programme'\r\n ) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n event.stopPropagation();\r\n handleClose();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n onSelect && onSelect(code, name, linkType);\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const nextElement = event.currentTarget.nextElementSibling;\r\n (nextElement as HTMLButtonElement)?.focus();\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const previousElement = event.currentTarget.previousElementSibling;\r\n (previousElement as HTMLButtonElement)?.focus();\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n handleClose();\r\n break;\r\n default:\r\n event.preventDefault();\r\n break;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (searchFieldRef.current) {\r\n onSearchHandler('', linkType);\r\n searchFieldRef.current.value = '';\r\n searchFieldRef.current.focus();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return (\r\n <div className={styles['courselinkform']}>\r\n <Repeater gap=\"050\">\r\n <FormField className={styles['courselinkform__input-field']}>\r\n <Label htmlFor={searchId}>\r\n {t.cataloguelinks[linkType === 'course' ? 'searchCourseFieldLabel' : 'searchProgrammeFieldLabel']}\r\n </Label>\r\n <div className={styles['linkform__input-url-wrapper']}>\r\n <InputField\r\n id={searchId}\r\n placeholder={t.cataloguelinks.searchFieldPlaceholder}\r\n onChange={handleSearch}\r\n onKeyDown={handleKeyDown}\r\n ref={searchFieldRef}\r\n aria-label={t.aria.labels.searchField}\r\n />\r\n </div>\r\n </FormField>\r\n {searchResponse && searchResponse.state === 'pending' && (\r\n <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.loading}</div>\r\n )}\r\n {searchResponse && searchResponse.results.length === 0 && searchResponse.state === 'ready' && (\r\n <div className={styles['courselinkform__result-message']}>{t.cataloguelinks.noResults}</div>\r\n )}\r\n {searchResponse && searchResponse.results.length > 0 && (\r\n <div className={styles['courselinkform__results-wrapper']}>\r\n <div className={styles['courselinkform__results-header']}>\r\n <span>\r\n {\r\n t.cataloguelinks[\r\n linkType === 'course' ? 'resultCourseListCatalogNumber' : 'resultProgrammeListCatalogNumber'\r\n ]\r\n }\r\n </span>\r\n <span>{t.cataloguelinks.resultListName}</span>\r\n </div>\r\n <div className={styles['courselinkform__results']} ref={resultListRef}>\r\n {searchResponse.results.map(({ id, code, name }) => (\r\n <button\r\n key={id}\r\n type=\"button\"\r\n className={styles['courselinkform__result-item']}\r\n onClick={() => onSelect && onSelect(code, name[currentLanguage], linkType)}\r\n onKeyDown={(event) => onResultKeyDown(event, code, name[currentLanguage], linkType)}\r\n tabIndex={0}\r\n aria-label={`${code} ${name[currentLanguage]}`}\r\n >\r\n <span>{code}</span>\r\n <span>{name[currentLanguage]}</span>\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </Repeater>\r\n <div className={styles['courselinkform__footer']}>\r\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\r\n {t.common.cancel}\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"mappings":"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"}
package/dist/{DataTable-Cgn_RKTA.js → DataTable-Guuh0GZc.js} RENAMED
@@ -4,27 +4,28 @@ import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState a
4
4
  import { jsx as s, jsxs as c } from "react/jsx-runtime";
5
5
  import './assets/DataTable.css';//#region src/components/DataTable/DataTable.module.css
6
6
  var l = {
7
- "data-table__container": "_data-table__container_rlt5w_1",
8
- "data-table__spacer": "_data-table__spacer_rlt5w_8",
9
- "data-table": "_data-table_rlt5w_1",
10
- "data-table--virtualized": "_data-table--virtualized_rlt5w_21",
11
- "data-table__row": "_data-table__row_rlt5w_30",
12
- "data-table__header-row": "_data-table__header-row_rlt5w_31",
13
- "data-table__row--active": "_data-table__row--active_rlt5w_40",
14
- "data-table__cell": "_data-table__cell_rlt5w_48",
15
- "data-table__sticky-header": "_data-table__sticky-header_rlt5w_56",
16
- "data-table__empty-state": "_data-table__empty-state_rlt5w_75"
17
- }, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display" }) => {
18
- let _ = a(null), v = a(null), y = a(null), b = a(null), { visibleItems: x, totalHeight: S, offsetTop: C, onScroll: w, setContainerHeight: T } = t({
7
+ "data-table__container": "_data-table__container_16fjc_1",
8
+ "data-table__spacer": "_data-table__spacer_16fjc_8",
9
+ "data-table": "_data-table_16fjc_1",
10
+ "data-table--virtualized": "_data-table--virtualized_16fjc_21",
11
+ "data-table__row": "_data-table__row_16fjc_30",
12
+ "data-table__header-row": "_data-table__header-row_16fjc_31",
13
+ "data-table__row--hoverable": "_data-table__row--hoverable_16fjc_46",
14
+ "data-table__row--active": "_data-table__row--active_16fjc_50",
15
+ "data-table__cell": "_data-table__cell_16fjc_58",
16
+ "data-table__sticky-header": "_data-table__sticky-header_16fjc_65",
17
+ "data-table__empty-state": "_data-table__empty-state_16fjc_84"
18
+ }, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display", noHover: _ = !1 }) => {
19
+ let v = a(null), y = a(null), b = a(null), x = a(null), { visibleItems: S, totalHeight: C, offsetTop: w, onScroll: T, setContainerHeight: E } = t({
19
20
  rowHeight: m?.rowHeight ?? 0,
20
21
  buffer: m?.buffer ?? u,
21
22
  totalItems: d.length
22
- }), E = a(!1), D = a(!1), [O, k] = o([]), A = i(() => {
23
+ }), D = a(!1), O = a(!1), [k, A] = o([]), j = i(() => {
23
24
  if (!f) return {
24
25
  visibleRows: d,
25
26
  rowsToRender: d
26
27
  };
27
- let e = m ? x.map((e) => d[e]) : d;
28
+ let e = m ? S.map((e) => d[e]) : d;
28
29
  return {
29
30
  visibleRows: e.map((e) => {
30
31
  let t = {};
@@ -38,44 +39,44 @@ var l = {
38
39
  f,
39
40
  d,
40
41
  m,
41
- x
42
- ]), j = n((e) => {
42
+ S
43
+ ]), M = n((e) => {
43
44
  if (!m) return;
44
45
  let t = e.currentTarget.scrollTop;
45
- E.current || (E.current = !0, requestAnimationFrame(() => {
46
- w({ currentTarget: { scrollTop: t } }), E.current = !1;
46
+ D.current || (D.current = !0, requestAnimationFrame(() => {
47
+ T({ currentTarget: { scrollTop: t } }), D.current = !1;
47
48
  }));
48
- }, [m, w]), M = (e, t) => typeof e == "function" ? e(t) : e;
49
+ }, [m, T]), N = (e, t) => typeof e == "function" ? e(t) : e;
49
50
  return r(() => {
50
- if (!m || !_.current) return;
51
+ if (!m || !v.current) return;
51
52
  let e = () => {
52
- let e = _.current?.parentElement?.clientHeight ?? 0;
53
- D.current || (D.current = !0, requestAnimationFrame(() => {
54
- T(e), D.current = !1;
53
+ let e = v.current?.parentElement?.clientHeight ?? 0;
54
+ O.current || (O.current = !0, requestAnimationFrame(() => {
55
+ E(e), O.current = !1;
55
56
  }));
56
57
  };
57
58
  return window.addEventListener("resize", e), () => {
58
59
  window.removeEventListener("resize", e);
59
60
  };
60
- }, [m, T]), r(() => {
61
- _.current && T(_.current.parentElement?.clientHeight ?? 0);
62
- }, [T]), r(() => {
63
- _.current?.scrollTo({ top: 0 });
61
+ }, [m, E]), r(() => {
62
+ v.current && E(v.current.parentElement?.clientHeight ?? 0);
63
+ }, [E]), r(() => {
64
+ v.current?.scrollTo({ top: 0 });
64
65
  }, [d]), r(() => {
65
- if (!p || !b.current) return;
66
+ if (!p || !x.current) return;
66
67
  let e = () => {
67
- let e = b.current?.querySelector("tr");
68
+ let e = x.current?.querySelector("tr");
68
69
  if (!e) return;
69
70
  let t = e.querySelectorAll("td");
70
- k(Array.from(t).map((e) => e.getBoundingClientRect().width));
71
+ A(Array.from(t).map((e) => e.getBoundingClientRect().width));
71
72
  }, t = new ResizeObserver(() => {
72
73
  requestAnimationFrame(e);
73
74
  });
74
- return t.observe(b.current), e(), () => t.disconnect();
75
- }, [p, A.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
75
+ return t.observe(x.current), e(), () => t.disconnect();
76
+ }, [p, j.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
76
77
  className: l["data-table__container"],
77
- onScroll: j,
78
- ref: _,
78
+ onScroll: M,
79
+ ref: v,
79
80
  children: [
80
81
  m && p && f && /* @__PURE__ */ s("table", {
81
82
  className: l["data-table--virtualized"],
@@ -83,9 +84,9 @@ var l = {
83
84
  className: l["data-table__sticky-header"],
84
85
  children: /* @__PURE__ */ s("tr", {
85
86
  className: l["data-table__header-row"],
86
- ref: y,
87
+ ref: b,
87
88
  children: f && f.map((e, t) => {
88
- let n = O[t] ? `${O[t]}px` : e.fixedWidth;
89
+ let n = k[t] ? `${k[t]}px` : e.fixedWidth;
89
90
  return /* @__PURE__ */ s("th", {
90
91
  className: l["data-table__cell"],
91
92
  style: {
@@ -93,7 +94,7 @@ var l = {
93
94
  minWidth: n,
94
95
  maxWidth: n
95
96
  },
96
- children: M(e?.label)
97
+ children: N(e?.label)
97
98
  }, e.key);
98
99
  })
99
100
  })
@@ -101,32 +102,35 @@ var l = {
101
102
  }),
102
103
  /* @__PURE__ */ s("div", {
103
104
  className: l["data-table__spacer"],
104
- style: { height: S }
105
+ style: { height: C }
105
106
  }),
106
107
  /* @__PURE__ */ c("table", {
107
108
  className: l["data-table"],
108
- style: m ? { transform: `translateY(${C}px)` } : void 0,
109
+ style: m ? { transform: `translateY(${w}px)` } : void 0,
109
110
  children: [/* @__PURE__ */ s("thead", {
110
111
  className: e({ [l["data-table__sticky-header"]]: p }),
111
- ref: v,
112
+ ref: y,
112
113
  children: /* @__PURE__ */ s("tr", {
113
114
  className: l["data-table__header-row"],
114
115
  children: !m || !p ? f && f.map((e, t) => {
115
- let n = O[t] ? `${O[t]}px` : e.fixedWidth;
116
+ let n = k[t] ? `${k[t]}px` : e.fixedWidth;
116
117
  return /* @__PURE__ */ s("th", {
117
118
  className: l["data-table__cell"],
118
119
  style: { width: n },
119
- children: M(e?.label)
120
+ children: N(e?.label)
120
121
  }, e.key);
121
122
  }) : /* @__PURE__ */ s("th", {
122
123
  colSpan: f?.length,
123
- style: { height: y.current?.clientHeight }
124
+ style: { height: b.current?.clientHeight }
124
125
  })
125
126
  })
126
127
  }), /* @__PURE__ */ s("tbody", {
127
- ref: b,
128
- children: A.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
129
- className: e(l["data-table__row"], { [l["data-table__row--active"]]: h?.includes(A.rowsToRender[n].id) }),
128
+ ref: x,
129
+ children: j.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
130
+ className: e(l["data-table__row"], {
131
+ [l["data-table__row--active"]]: h.includes(j.rowsToRender[n].id),
132
+ [l["data-table__row--hoverable"]]: !_
133
+ }),
130
134
  children: Object.entries(t).map(([e]) => {
131
135
  let t = f?.find((t) => t.key === e);
132
136
  return /* @__PURE__ */ s("td", {
@@ -136,10 +140,10 @@ var l = {
136
140
  height: m ? m.rowHeight : void 0,
137
141
  maxHeight: m ? m.rowHeight : void 0
138
142
  },
139
- children: M(t?.cell, A.rowsToRender[n])
143
+ children: N(t?.cell, j.rowsToRender[n])
140
144
  }, e);
141
145
  })
142
- }, A.rowsToRender[n].id))
146
+ }, j.rowsToRender[n].id))
143
147
  })]
144
148
  })
145
149
  ]
@@ -151,4 +155,4 @@ var l = {
151
155
  //#endregion
152
156
  export { d as t };
153
157
 
154
- //# sourceMappingURL=DataTable-Cgn_RKTA.js.map
158
+ //# sourceMappingURL=DataTable-Guuh0GZc.js.map
package/dist/DataTable-Guuh0GZc.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTable-Guuh0GZc.js","names":[],"sources":["../src/components/DataTable/DataTable.module.css","../src/components/DataTable/DataTable.tsx"],"sourcesContent":[".data-table__container {\n height: 100%;\n overflow-y: auto;\n position: relative;\n width: 100%;\n}\n\n.data-table__spacer {\n background-color: transparent;\n width: 0.0625rem;\n}\n\n.data-table {\n border-collapse: collapse;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.data-table--virtualized {\n border-collapse: collapse;\n left: 0;\n position: sticky;\n top: 0;\n width: 100%;\n z-index: 10;\n}\n\n.data-table__row,\n.data-table__header-row {\n background-color: var(--color-uva-white);\n border-bottom: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__header-row {\n border-left: 0.0625rem solid transparent;\n border-right: 0.0625rem solid transparent;\n}\n\n.data-table__row {\n border-left: 0.0625rem solid var(--color-grey-300);\n border-right: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row--hoverable:hover {\n background-color: var(--color-grey-200);\n}\n\n.data-table__row--active {\n background-color: var(--color-navy-100);\n}\n\n.data-table__row--active.data-table__row--hoverable:hover {\n background-color: var(--color-navy-200);\n}\n\n.data-table__cell {\n overflow: hidden;\n padding: 0.6875rem 0.75rem;\n text-align: left;\n vertical-align: baseline;\n}\n\n.data-table__sticky-header {\n background-color: var(--color-uva-white);\n left: 0;\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.data-table__sticky-header::after {\n border-bottom: 0.0625rem solid var(--color-grey-300);\n content: \"\";\n display: block;\n height: 0.0625rem;\n left: 0;\n position: absolute;\n top: 100%;\n width: 100%;\n}\n\n.data-table__empty-state {\n color: var(--color-grey-600);\n font-size: 1rem;\n padding: 2rem;\n text-align: center;\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport styles from './DataTable.module.css';\r\nimport { useVirtualScroll } from './hooks/useVirtualScroll';\r\n\r\ntype DataTablePrimitive = string | number | boolean | null | undefined;\r\ntype DataTableRow = Record<string, DataTablePrimitive>;\r\nexport type DataTableColumnContent<TRow extends object> = ReactNode | ((row: TRow) => ReactNode);\r\ntype DataTableColumn<TRow extends object> = {\r\n key: Extract<keyof TRow, string>;\r\n label?: ReactNode | ((row: TRow) => ReactNode);\r\n cell?: ReactNode | ((row: TRow) => ReactNode);\r\n fixedWidth?: string;\r\n};\r\ntype DataRow<TRow extends object> = { visibleRows: Partial<TRow>[]; rowsToRender: TRow[] };\r\n\r\nexport type DataTableProps<TRow extends { id: string | number } = DataTableRow & { id: string | number }> = {\r\n /** The data to be displayed in the table */\r\n data: TRow[];\r\n /** The columns configuration for the table */\r\n columns?: DataTableColumn<TRow>[];\r\n /** Whether the table header should be sticky */\r\n stickyHeader?: boolean;\r\n /** Virtualization settings for the table */\r\n virtualize?: {\r\n /** The height of each row in pixels */\r\n rowHeight: number;\r\n /** The number of additional rows to render above and below the visible area for smoother scrolling */\r\n buffer?: number;\r\n } | null;\r\n /** The keys in the data objects that indicate whether a row is active (for styling purposes) */\r\n activeKeys?: (string | number)[];\r\n /** Message to display when there is no data */\r\n noDataMessage?: string;\r\n /** Disable hover styling on rows */\r\n noHover?: boolean;\r\n};\r\n\r\nconst DEFAULT_BUFFER = 4;\r\n\r\nexport const DataTable = <TRow extends { id: string | number } = DataTableRow & { id: string | number }>({\r\n data,\r\n columns,\r\n stickyHeader = false,\r\n virtualize = null,\r\n activeKeys = [],\r\n noDataMessage = 'No data to display',\r\n noHover = false,\r\n}: DataTableProps<TRow>) => {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const headerRef = useRef<HTMLTableSectionElement>(null);\r\n const headerRowRef = useRef<HTMLTableRowElement>(null);\r\n const tbodyRef = useRef<HTMLTableSectionElement>(null);\r\n const { visibleItems, totalHeight, offsetTop, onScroll, setContainerHeight } = useVirtualScroll({\r\n rowHeight: virtualize?.rowHeight ?? 0,\r\n buffer: virtualize?.buffer ?? DEFAULT_BUFFER,\r\n totalItems: data.length,\r\n });\r\n const throttling = useRef(false);\r\n const resizeThrottling = useRef(false);\r\n const [columnWidths, setColumnWidths] = useState<number[]>([]);\r\n\r\n const tableData: DataRow<TRow> = useMemo(() => {\r\n if (!columns) return { visibleRows: data, rowsToRender: data };\r\n const rowsToRender = virtualize ? visibleItems.map((index) => data[index]) : data;\r\n const visibleRows = rowsToRender.map((row) => {\r\n const newRow: Partial<TRow> = {};\r\n columns.forEach((col) => {\r\n newRow[col.key] = row[col.key];\r\n });\r\n return newRow;\r\n });\r\n return { visibleRows, rowsToRender };\r\n }, [columns, data, virtualize, visibleItems]);\r\n\r\n const handleScroll = useCallback(\r\n (event: UIEvent<HTMLDivElement>) => {\r\n if (!virtualize) return;\r\n\r\n const scrollTop = event.currentTarget.scrollTop;\r\n\r\n if (!throttling.current) {\r\n throttling.current = true;\r\n\r\n requestAnimationFrame(() => {\r\n onScroll({ currentTarget: { scrollTop } } as UIEvent<HTMLElement>);\r\n throttling.current = false;\r\n });\r\n }\r\n },\r\n [virtualize, onScroll]\r\n );\r\n\r\n const onRenderValue = (value: ((row: TRow) => ReactNode) | ReactNode, row?: TRow) =>\r\n typeof value === 'function' ? value(row!) : value;\r\n\r\n useEffect(() => {\r\n if (!virtualize || !containerRef.current) {\r\n return;\r\n }\r\n\r\n const handleResize = () => {\r\n const containerHeight = containerRef.current?.parentElement?.clientHeight ?? 0;\r\n\r\n if (!resizeThrottling.current) {\r\n resizeThrottling.current = true;\r\n\r\n requestAnimationFrame(() => {\r\n setContainerHeight(containerHeight);\r\n resizeThrottling.current = false;\r\n });\r\n }\r\n };\r\n window.addEventListener('resize', handleResize);\r\n\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, [virtualize, setContainerHeight]);\r\n\r\n useEffect(() => {\r\n if (containerRef.current) {\r\n setContainerHeight(containerRef.current.parentElement?.clientHeight ?? 0);\r\n }\r\n }, [setContainerHeight]);\r\n\r\n useEffect(() => {\r\n containerRef.current?.scrollTo({ top: 0 });\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (!stickyHeader || !tbodyRef.current) return;\r\n\r\n const measureWidths = () => {\r\n const firstRow = tbodyRef.current?.querySelector('tr');\r\n if (!firstRow) return;\r\n\r\n const cells = firstRow.querySelectorAll('td');\r\n const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\r\n\r\n setColumnWidths(widths);\r\n };\r\n\r\n const observer = new ResizeObserver(() => {\r\n requestAnimationFrame(measureWidths);\r\n });\r\n\r\n observer.observe(tbodyRef.current);\r\n\r\n measureWidths();\r\n\r\n return () => observer.disconnect();\r\n }, [stickyHeader, tableData.visibleRows]);\r\n\r\n return data.length ? (\r\n <div className={styles['data-table__container']} onScroll={handleScroll} ref={containerRef}>\r\n {/* sticky header if virtualized */}\r\n {virtualize && stickyHeader && columns && (\r\n <table className={styles['data-table--virtualized']}>\r\n <thead className={styles['data-table__sticky-header']}>\r\n <tr className={styles['data-table__header-row']} ref={headerRowRef}>\r\n {columns &&\r\n columns.map((column, index) => {\r\n const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n return (\r\n <th\r\n key={column.key}\r\n className={styles['data-table__cell']}\r\n style={{\r\n width: forcedWidth,\r\n minWidth: forcedWidth,\r\n maxWidth: forcedWidth,\r\n }}\r\n >\r\n {onRenderValue(column?.label)}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n </table>\r\n )}\r\n\r\n <div className={styles['data-table__spacer']} style={{ height: totalHeight }} />\r\n <table\r\n className={styles['data-table']}\r\n style={virtualize ? { transform: `translateY(${offsetTop}px)` } : undefined}\r\n >\r\n {/* header */}\r\n <thead className={clsx({ [styles['data-table__sticky-header']]: stickyHeader })} ref={headerRef}>\r\n <tr className={styles['data-table__header-row']}>\r\n {!virtualize || !stickyHeader ? (\r\n columns &&\r\n columns.map((column, index) => {\r\n const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n return (\r\n <th key={column.key} className={styles['data-table__cell']} style={{ width: forcedWidth }}>\r\n {onRenderValue(column?.label)}\r\n </th>\r\n );\r\n })\r\n ) : (\r\n <th colSpan={columns?.length} style={{ height: headerRowRef.current?.clientHeight }} />\r\n )}\r\n </tr>\r\n </thead>\r\n\r\n {/* data rows */}\r\n <tbody ref={tbodyRef}>\r\n {tableData.visibleRows.map((row, index) => (\r\n <tr\r\n key={tableData.rowsToRender[index].id}\r\n className={clsx(styles['data-table__row'], {\r\n [styles['data-table__row--active']]: activeKeys.includes(tableData.rowsToRender[index].id),\r\n [styles['data-table__row--hoverable']]: !noHover,\r\n })}\r\n >\r\n {Object.entries(row as Record<string, unknown>).map(([key]) => {\r\n const column = columns?.find((col) => col.key === key);\r\n return (\r\n <td\r\n key={key}\r\n className={styles['data-table__cell']}\r\n style={{\r\n width: column?.fixedWidth,\r\n height: virtualize ? virtualize.rowHeight : undefined,\r\n maxHeight: virtualize ? virtualize.rowHeight : undefined,\r\n }}\r\n >\r\n {onRenderValue(column?.cell, tableData.rowsToRender[index])}\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n ) : (\r\n <div className={styles['data-table__empty-state']}>{noDataMessage}</div>\r\n );\r\n};\r\n"],"mappings":"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"}
package/dist/{FeedbackBar-DEDpoNy7.js → FeedbackBar-DsOWAAGt.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { t as e } from "./clsx-C67XSbzZ.js";
2
2
  import { Icon as t } from "./components/Icon/Icon.js";
3
- import { t as n } from "./Repeater-BAEfOMZI.js";
3
+ import { t as n } from "./Repeater-DUo13Mq6.js";
4
4
  import { useEffect as r, useState as i } from "react";
5
5
  import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
6
  import './assets/FeedbackBar.css';//#region src/components/FeedbackBar/FeedbackBar.module.css
@@ -40,4 +40,4 @@ var s = {
40
40
  //#endregion
41
41
  export { c as t };
42
42
 
43
- //# sourceMappingURL=FeedbackBar-DEDpoNy7.js.map
43
+ //# sourceMappingURL=FeedbackBar-DsOWAAGt.js.map
package/dist/{FeedbackBar-DEDpoNy7.js.map → FeedbackBar-DsOWAAGt.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"FeedbackBar-DEDpoNy7.js","names":[],"sources":["../src/components/FeedbackBar/FeedbackBar.module.css","../src/components/FeedbackBar/FeedbackBar.tsx"],"sourcesContent":[".feedback-bar {\n background-color: var(--color-forest-100);\n border: 1px solid var(--color-forest-800);\n border-radius: 0.5rem;\n display: flex;\n font-weight: var(--semibold);\n gap: 0.5rem;\n justify-content: space-between;\n max-height: 0;\n opacity: 0;\n padding: 0 1rem;\n transition: all 0.5s;\n}\n\n.feedback-bar--visible {\n max-height: 6.625rem;\n opacity: 1;\n padding: 1rem;\n}\n\n.feedback-bar__icon {\n color: var(--color-forest-800);\n}\n\n.feedback-bar__close-button {\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n color: var(--color-uva-black);\n display: inline-flex;\n height: 1.5rem;\n justify-content: center;\n transition: var(--transition-colors);\n width: 1.5rem;\n}\n\n.feedback-bar__close-button:focus-visible {\n outline: 0.125rem dotted var(--color-navy-600);\n outline-offset: 0.125rem;\n}\n\n.feedback-bar__close-button:hover {\n background-color: var(--color-forest-600);\n cursor: pointer;\n outline: 0;\n}\n\n/* make the clickable area of the overlay close button 42x42px simmilar to a regular button */\n\n.feedback-bar__close-button::after {\n content: \" \";\n height: 2.625rem;\n position: absolute;\n width: 2.625rem;\n}\n","import classNames from 'clsx';\nimport { useEffect, useState, type PropsWithChildren } from 'react';\n\nimport styles from './FeedbackBar.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Repeater } from 'components/Repeater';\n\n/** Represents a component to show feedback within a Page. */\nexport const FeedbackBar = ({ children }: PropsWithChildren) => {\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n setIsVisible(true);\n }, []);\n\n const close = () => {\n setIsVisible(false);\n };\n\n return (\n <div className={classNames(styles['feedback-bar'], { [styles['feedback-bar--visible']]: isVisible })} role=\"alert\">\n <Repeater flexDirection=\"row\">\n <Icon className={classNames(styles['feedback-bar__icon'])} name=\"CheckCircle\" />\n {children}\n </Repeater>\n <button className={classNames(styles['feedback-bar__close-button'])} type=\"button\" onClick={close}>\n <Icon name=\"Cross\" size={24} />\n </button>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;GCSa,KAAe,EAAE,kBAAkC;CAC9D,IAAM,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,QAAgB;EACd,EAAa,EAAI;CACnB,GAAG,CAAC,CAAC;CAEL,IAAM,UAAc;EAClB,EAAa,EAAK;CACpB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW,EAAO,iBAAiB,GAAG,EAAO,2BAA2B,EAAU,CAAC;EAAG,MAAK;YAA3G,CACE,kBAAC,GAAD;GAAU,eAAc;aAAxB,CACE,kBAAC,GAAD;IAAM,WAAW,EAAW,EAAO,qBAAqB;IAAG,MAAK;GAAe,CAAA,GAC9E,CACO;MACV,kBAAC,UAAD;GAAQ,WAAW,EAAW,EAAO,6BAA6B;GAAG,MAAK;GAAS,SAAS;aAC1F,kBAAC,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA,CACL;;AAET"}
1
+ {"version":3,"file":"FeedbackBar-DsOWAAGt.js","names":[],"sources":["../src/components/FeedbackBar/FeedbackBar.module.css","../src/components/FeedbackBar/FeedbackBar.tsx"],"sourcesContent":[".feedback-bar {\n background-color: var(--color-forest-100);\n border: 1px solid var(--color-forest-800);\n border-radius: 0.5rem;\n display: flex;\n font-weight: var(--semibold);\n gap: 0.5rem;\n justify-content: space-between;\n max-height: 0;\n opacity: 0;\n padding: 0 1rem;\n transition: all 0.5s;\n}\n\n.feedback-bar--visible {\n max-height: 6.625rem;\n opacity: 1;\n padding: 1rem;\n}\n\n.feedback-bar__icon {\n color: var(--color-forest-800);\n}\n\n.feedback-bar__close-button {\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n color: var(--color-uva-black);\n display: inline-flex;\n height: 1.5rem;\n justify-content: center;\n transition: var(--transition-colors);\n width: 1.5rem;\n}\n\n.feedback-bar__close-button:focus-visible {\n outline: 0.125rem dotted var(--color-navy-600);\n outline-offset: 0.125rem;\n}\n\n.feedback-bar__close-button:hover {\n background-color: var(--color-forest-600);\n cursor: pointer;\n outline: 0;\n}\n\n/* make the clickable area of the overlay close button 42x42px simmilar to a regular button */\n\n.feedback-bar__close-button::after {\n content: \" \";\n height: 2.625rem;\n position: absolute;\n width: 2.625rem;\n}\n","import classNames from 'clsx';\nimport { useEffect, useState, type PropsWithChildren } from 'react';\n\nimport styles from './FeedbackBar.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Repeater } from 'components/Repeater';\n\n/** Represents a component to show feedback within a Page. */\nexport const FeedbackBar = ({ children }: PropsWithChildren) => {\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n setIsVisible(true);\n }, []);\n\n const close = () => {\n setIsVisible(false);\n };\n\n return (\n <div className={classNames(styles['feedback-bar'], { [styles['feedback-bar--visible']]: isVisible })} role=\"alert\">\n <Repeater flexDirection=\"row\">\n <Icon className={classNames(styles['feedback-bar__icon'])} name=\"CheckCircle\" />\n {children}\n </Repeater>\n <button className={classNames(styles['feedback-bar__close-button'])} type=\"button\" onClick={close}>\n <Icon name=\"Cross\" size={24} />\n </button>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;GCSa,KAAe,EAAE,kBAAkC;CAC9D,IAAM,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,QAAgB;EACd,EAAa,EAAI;CACnB,GAAG,CAAC,CAAC;CAEL,IAAM,UAAc;EAClB,EAAa,EAAK;CACpB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW,EAAO,iBAAiB,GAAG,EAAO,2BAA2B,EAAU,CAAC;EAAG,MAAK;YAA3G,CACE,kBAAC,GAAD;GAAU,eAAc;aAAxB,CACE,kBAAC,GAAD;IAAM,WAAW,EAAW,EAAO,qBAAqB;IAAG,MAAK;GAAe,CAAA,GAC9E,CACO;MACV,kBAAC,UAAD;GAAQ,WAAW,EAAW,EAAO,6BAA6B;GAAG,MAAK;GAAS,SAAS;aAC1F,kBAAC,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA,CACL;;AAET"}
package/dist/Repeater-DUo13Mq6.js ADDED
@@ -0,0 +1,23 @@
1
+ import { t as e } from "./clsx-C67XSbzZ.js";
2
+ import { jsx as t } from "react/jsx-runtime";
3
+ import './assets/Repeater.css';var n = {
4
+ repeater: "_repeater_1emt8_1",
5
+ "repeater--row": "_repeater--row_1emt8_5",
6
+ "repeater--row-reverse": "_repeater--row-reverse_1emt8_9",
7
+ "repeater--column": "_repeater--column_1emt8_13",
8
+ "repeater--column-reverse": "_repeater--column-reverse_1emt8_17",
9
+ "repeater--gap-000": "_repeater--gap-000_1emt8_21",
10
+ "repeater--gap-025": "_repeater--gap-025_1emt8_25",
11
+ "repeater--gap-050": "_repeater--gap-050_1emt8_29",
12
+ "repeater--gap-075": "_repeater--gap-075_1emt8_33",
13
+ "repeater--gap-100": "_repeater--gap-100_1emt8_37",
14
+ "repeater--gap-150": "_repeater--gap-150_1emt8_41",
15
+ "repeater--gap-200": "_repeater--gap-200_1emt8_45"
16
+ }, r = ({ children: r, flexDirection: i = "column", gap: a = "050" }) => /* @__PURE__ */ t("div", {
17
+ className: e(n.repeater, n[`repeater--${i}`], n[`repeater--gap-${a}`]),
18
+ children: r
19
+ });
20
+ //#endregion
21
+ export { r as t };
22
+
23
+ //# sourceMappingURL=Repeater-DUo13Mq6.js.map
package/dist/Repeater-DUo13Mq6.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Repeater-DUo13Mq6.js","names":[],"sources":["../src/components/Repeater/Repeater.module.css","../src/components/Repeater/Repeater.tsx"],"sourcesContent":[".repeater {\n display: flex;\n}\n\n.repeater--row {\n flex-direction: row;\n}\n\n.repeater--row-reverse {\n flex-direction: row-reverse;\n}\n\n.repeater--column {\n flex-direction: column;\n}\n\n.repeater--column-reverse {\n flex-direction: column-reverse;\n}\n\n.repeater--gap-000 {\n gap: 0rem;\n}\n\n.repeater--gap-025 {\n gap: 0.25rem;\n}\n\n.repeater--gap-050 {\n gap: 0.5rem;\n}\n\n.repeater--gap-075 {\n gap: 0.75rem;\n}\n\n.repeater--gap-100 {\n gap: 1rem;\n}\n\n.repeater--gap-150 {\n gap: 1.5rem;\n}\n\n.repeater--gap-200 {\n gap: 2rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n /** The direction of the items. */\n flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n /** The gap between the items. */\n gap?: '000' | '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n return (\n <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;GCca,KAAY,EAAE,aAAU,mBAAgB,UAAU,SAAM,YAEjE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,UAAa,EAAO,aAAa,MAAkB,EAAO,iBAAiB,IAAM;CAC1G;AACE,CAAA"}
package/dist/assets/DataTable.css CHANGED
@@ -1 +1 @@
1
- ._data-table__container_rlt5w_1{width:100%;height:100%;position:relative;overflow-y:auto}._data-table__spacer_rlt5w_8{background-color:#0000;width:.0625rem}._data-table_rlt5w_1{border-collapse:collapse;width:100%;position:absolute;top:0;left:0}._data-table--virtualized_rlt5w_21{border-collapse:collapse;z-index:10;width:100%;position:sticky;top:0;left:0}._data-table__row_rlt5w_30,._data-table__header-row_rlt5w_31{background-color:var(--color-uva-white);border-bottom:.0625rem solid var(--color-grey-300)}._data-table__row_rlt5w_30:hover{background-color:var(--color-grey-200)}._data-table__row--active_rlt5w_40{background-color:var(--color-navy-100)}._data-table__row--active_rlt5w_40:hover{background-color:var(--color-navy-200)}._data-table__cell_rlt5w_48{text-align:left;vertical-align:baseline;white-space:nowrap;padding:.6875rem .75rem;overflow:hidden}._data-table__sticky-header_rlt5w_56{background-color:var(--color-uva-white);z-index:1;position:sticky;top:0;left:0}._data-table__sticky-header_rlt5w_56:after{border-bottom:.0625rem solid var(--color-grey-300);content:"";width:100%;height:.0625rem;display:block;position:absolute;top:100%;left:0}._data-table__empty-state_rlt5w_75{color:var(--color-grey-600);text-align:center;padding:2rem;font-size:1rem}
1
+ ._data-table__container_16fjc_1{width:100%;height:100%;position:relative;overflow-y:auto}._data-table__spacer_16fjc_8{background-color:#0000;width:.0625rem}._data-table_16fjc_1{border-collapse:collapse;width:100%;position:absolute;top:0;left:0}._data-table--virtualized_16fjc_21{border-collapse:collapse;z-index:10;width:100%;position:sticky;top:0;left:0}._data-table__row_16fjc_30,._data-table__header-row_16fjc_31{background-color:var(--color-uva-white);border-bottom:.0625rem solid var(--color-grey-300)}._data-table__header-row_16fjc_31{border-left:.0625rem solid #0000;border-right:.0625rem solid #0000}._data-table__row_16fjc_30{border-left:.0625rem solid var(--color-grey-300);border-right:.0625rem solid var(--color-grey-300)}._data-table__row--hoverable_16fjc_46:hover{background-color:var(--color-grey-200)}._data-table__row--active_16fjc_50{background-color:var(--color-navy-100)}._data-table__row--active_16fjc_50._data-table__row--hoverable_16fjc_46:hover{background-color:var(--color-navy-200)}._data-table__cell_16fjc_58{text-align:left;vertical-align:baseline;padding:.6875rem .75rem;overflow:hidden}._data-table__sticky-header_16fjc_65{background-color:var(--color-uva-white);z-index:1;position:sticky;top:0;left:0}._data-table__sticky-header_16fjc_65:after{border-bottom:.0625rem solid var(--color-grey-300);content:"";width:100%;height:.0625rem;display:block;position:absolute;top:100%;left:0}._data-table__empty-state_16fjc_84{color:var(--color-grey-600);text-align:center;padding:2rem;font-size:1rem}
package/dist/assets/Repeater.css CHANGED
@@ -1 +1 @@
1
- ._repeater_12czp_1{display:flex}._repeater--row_12czp_5{flex-direction:row}._repeater--row-reverse_12czp_9{flex-direction:row-reverse}._repeater--column_12czp_13{flex-direction:column}._repeater--column-reverse_12czp_17{flex-direction:column-reverse}._repeater--gap-025_12czp_21{gap:.25rem}._repeater--gap-050_12czp_25{gap:.5rem}._repeater--gap-075_12czp_29{gap:.75rem}._repeater--gap-100_12czp_33{gap:1rem}._repeater--gap-150_12czp_37{gap:1.5rem}._repeater--gap-200_12czp_41{gap:2rem}
1
+ ._repeater_1emt8_1{display:flex}._repeater--row_1emt8_5{flex-direction:row}._repeater--row-reverse_1emt8_9{flex-direction:row-reverse}._repeater--column_1emt8_13{flex-direction:column}._repeater--column-reverse_1emt8_17{flex-direction:column-reverse}._repeater--gap-000_1emt8_21{gap:0}._repeater--gap-025_1emt8_25{gap:.25rem}._repeater--gap-050_1emt8_29{gap:.5rem}._repeater--gap-075_1emt8_33{gap:.75rem}._repeater--gap-100_1emt8_37{gap:1rem}._repeater--gap-150_1emt8_41{gap:1.5rem}._repeater--gap-200_1emt8_45{gap:2rem}
package/dist/components/DataTable/DataTable.d.ts CHANGED
@@ -30,10 +30,12 @@ export type DataTableProps<TRow extends {
30
30
  activeKeys?: (string | number)[];
31
31
  /** Message to display when there is no data */
32
32
  noDataMessage?: string;
33
+ /** Disable hover styling on rows */
34
+ noHover?: boolean;
33
35
  };
34
36
  export declare const DataTable: <TRow extends {
35
37
  id: string | number;
36
38
  } = DataTableRow & {
37
39
  id: string | number;
38
- }>({ data, columns, stickyHeader, virtualize, activeKeys, noDataMessage, }: DataTableProps<TRow>) => import("react").JSX.Element;
40
+ }>({ data, columns, stickyHeader, virtualize, activeKeys, noDataMessage, noHover, }: DataTableProps<TRow>) => import("react").JSX.Element;
39
41
  export {};
package/dist/components/DataTable/DataTable.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "../../DataTable-Cgn_RKTA.js";
1
+ import { t as e } from "../../DataTable-Guuh0GZc.js";
2
2
  export { e as DataTable };
package/dist/components/DataTable/DataTable.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "../../Checkbox-sAt4To2B.js";
2
- import { t } from "../../DataTable-Cgn_RKTA.js";
2
+ import { t } from "../../DataTable-Guuh0GZc.js";
3
3
  import { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
4
4
  import { jsx as o, jsxs as s } from "react/jsx-runtime";
5
5
  //#region src/components/DataTable/mockDataTableData.js
@@ -40019,42 +40019,42 @@ var c = [
40019
40019
  columns: { control: !1 },
40020
40020
  stickyHeader: { control: !1 },
40021
40021
  virtualize: { control: !1 },
40022
- activeKey: { control: !1 }
40022
+ activeKeys: { control: !1 }
40023
40023
  },
40024
40024
  parameters: {
40025
40025
  inspectComponent: t,
40026
40026
  codeString: "<DataTable<DataProps> \n data={Array of data objects} \n columns={columns} \n stickyHeader={boolean}\n virtualize={\n { \n rowHeight: {number}\n buffer: {number}\n }\n }\n />"
40027
40027
  }
40028
- }, p = (() => {
40029
- let [f, p] = a(c), m = i(null), [h, g] = a([]), _ = i(null), v = (() => {
40030
- let e = f?.every((e) => h.includes(e.id)), t = f?.some((e) => h.includes(e.id));
40028
+ }, p = ((f) => {
40029
+ let [p, m] = a(c), h = i(null), [g, _] = a([]), v = i(null), y = (() => {
40030
+ let e = p?.every((e) => g.includes(e.id)), t = p?.some((e) => g.includes(e.id));
40031
40031
  return e ? !0 : !e && t ? "indeterminate" : !1;
40032
- })(), y = (e, t) => {
40033
- if (e.nativeEvent.shiftKey && _.current) {
40034
- let [e, n] = [f?.findIndex((e) => e.id === _.current) ?? -1, f?.findIndex((e) => e.id === t) ?? -1].sort((e, t) => e - t), r = f?.slice(e, n + 1).map((e) => e.id) ?? [];
40035
- g((e) => {
40032
+ })(), b = (e, t) => {
40033
+ if (e.nativeEvent.shiftKey && v.current) {
40034
+ let [e, n] = [p?.findIndex((e) => e.id === v.current) ?? -1, p?.findIndex((e) => e.id === t) ?? -1].sort((e, t) => e - t), r = p?.slice(e, n + 1).map((e) => e.id) ?? [];
40035
+ _((e) => {
40036
40036
  let t = /* @__PURE__ */ new Set([...e, ...r]);
40037
40037
  return Array.from(t);
40038
- }), _.current = t;
40039
- } else g((e) => e.includes(t) ? e.filter((e) => e !== t) : [...e, t]), _.current = t;
40038
+ }), v.current = t;
40039
+ } else _((e) => e.includes(t) ? e.filter((e) => e !== t) : [...e, t]), v.current = t;
40040
40040
  };
40041
40041
  n(() => {
40042
- m.current && (m.current.indeterminate = v === "indeterminate");
40043
- }, [v]);
40044
- let b = r(() => [
40042
+ h.current && (h.current.indeterminate = y === "indeterminate");
40043
+ }, [y]);
40044
+ let x = r(() => [
40045
40045
  {
40046
40046
  key: "id",
40047
40047
  label: () => /* @__PURE__ */ o(e, {
40048
- ref: m,
40049
- checked: v === !0,
40048
+ ref: h,
40049
+ checked: y === !0,
40050
40050
  onChange: () => {
40051
- g(v === !0 ? [] : f?.map((e) => e.id) ?? []);
40051
+ _(y === !0 ? [] : p?.map((e) => e.id) ?? []);
40052
40052
  }
40053
40053
  }),
40054
40054
  cell: (t) => /* @__PURE__ */ o(e, {
40055
- checked: t ? !!h.includes(t.id) : !1,
40055
+ checked: t ? !!g.includes(t.id) : !1,
40056
40056
  onChange: (e) => {
40057
- t && y(e, t.id);
40057
+ t && b(e, t.id);
40058
40058
  }
40059
40059
  }),
40060
40060
  fixedWidth: "2rem"
@@ -40124,9 +40124,9 @@ var c = [
40124
40124
  }
40125
40125
  }
40126
40126
  ], [
40127
- v,
40128
- f,
40129
- h
40127
+ y,
40128
+ p,
40129
+ g
40130
40130
  ]);
40131
40131
  return /* @__PURE__ */ s("div", {
40132
40132
  style: {
@@ -40144,9 +40144,9 @@ var c = [
40144
40144
  },
40145
40145
  onChange: (e) => {
40146
40146
  let t = e.target.value;
40147
- p(c.slice(0, d).filter((e) => e.university.includes(t) || e.first_name.includes(t) || e.last_name.includes(t)));
40147
+ m(c.slice(0, d).filter((e) => e.university.includes(t) || e.first_name.includes(t) || e.last_name.includes(t)));
40148
40148
  },
40149
- disabled: h.length !== 0
40149
+ disabled: g.length !== 0
40150
40150
  }),
40151
40151
  /* @__PURE__ */ s("span", {
40152
40152
  style: {
@@ -40157,34 +40157,32 @@ var c = [
40157
40157
  "This is a preview of ",
40158
40158
  d,
40159
40159
  " rows. Filtered ",
40160
- f?.length ?? 0,
40160
+ p?.length ?? 0,
40161
40161
  " rows. Selected ",
40162
- h.length,
40162
+ g.length,
40163
40163
  " ",
40164
40164
  "rows."
40165
40165
  ]
40166
40166
  }),
40167
- /* @__PURE__ */ o("div", {
40168
- style: {
40169
- border: "1px dashed gray",
40170
- height: "calc(100% - 5rem)",
40171
- overflow: "hidden"
40172
- },
40173
- children: /* @__PURE__ */ o(t, {
40174
- data: f ?? [],
40175
- columns: b,
40176
- stickyHeader: !0,
40177
- virtualize: {
40178
- rowHeight: 90,
40179
- buffer: 6
40180
- },
40181
- activeKeys: h,
40182
- noDataMessage: "No records found"
40183
- })
40167
+ /* @__PURE__ */ o(t, {
40168
+ ...f,
40169
+ data: p ?? [],
40170
+ columns: x,
40171
+ activeKeys: g
40184
40172
  })
40185
40173
  ]
40186
40174
  });
40187
- }).bind({}), m = (() => {
40175
+ }).bind({});
40176
+ p.args = {
40177
+ stickyHeader: !0,
40178
+ virtualize: {
40179
+ rowHeight: 90,
40180
+ buffer: 6
40181
+ },
40182
+ noHover: !1,
40183
+ noDataMessage: "No records found"
40184
+ };
40185
+ var m = (() => {
40188
40186
  let [f, p] = a(c), m = i(null), [h, g] = a([]), _ = i(null), v = (() => {
40189
40187
  let e = f?.every((e) => h.includes(e.id)), t = f?.some((e) => h.includes(e.id));
40190
40188
  return e ? !0 : !e && t ? "indeterminate" : !1;
@@ -40327,18 +40325,11 @@ var c = [
40327
40325
  "rows."
40328
40326
  ]
40329
40327
  }),
40330
- /* @__PURE__ */ o("div", {
40331
- style: {
40332
- border: "1px dashed gray",
40333
- height: "calc(100% - 5rem)",
40334
- overflow: "hidden"
40335
- },
40336
- children: /* @__PURE__ */ o(t, {
40337
- data: f ?? [],
40338
- columns: b,
40339
- stickyHeader: !1,
40340
- noDataMessage: "No records found"
40341
- })
40328
+ /* @__PURE__ */ o(t, {
40329
+ data: f ?? [],
40330
+ columns: b,
40331
+ stickyHeader: !1,
40332
+ noDataMessage: "No records found"
40342
40333
  })
40343
40334
  ]
40344
40335
  });