@@ -117,12 +145,41 @@ export function CreateDataset({
/>
)}
+ {datasetTypes.length > 0 && selectedType && (
+ <>
+ {datasetTypes.length === 1 ? (
+
+
+
+
+
+
+
+
+ {selectedType.displayName}
+
+
{selectedType.description}
+
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
diff --git a/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.module.scss b/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.module.scss
new file mode 100644
index 000000000..160336305
--- /dev/null
+++ b/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.module.scss
@@ -0,0 +1,110 @@
+@use 'sass:color';
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.dataset-type-select {
+ position: relative;
+
+ .toggle {
+ position: relative;
+ display: grid;
+ background-color: #fff;
+
+ // Chevron icon
+ &::after {
+ position: absolute;
+ top: 50%;
+ right: 1rem;
+ display: inline-block;
+ width: 0.45em;
+ height: 0.45em;
+ border-color: rgb(0 0 0 / 75%);
+ border-style: solid;
+ border-width: 2px 2px 0 0;
+ transform: translateY(-60%) rotate(-225deg);
+ content: '';
+ }
+
+ > input[type='button'] {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ grid-area: 1 / 1;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ padding: var(--toggle-padding);
+ background-color: transparent;
+ border: solid 1px $dv-secondary-color;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+ &::after {
+ display: none;
+ }
+
+ &:focus-within,
+ &:focus {
+ border-color: color.adjust($dv-primary-color, $alpha: -0.4);
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem color.adjust($dv-primary-color, $alpha: -0.7);
+ }
+ }
+
+ > span {
+ position: relative;
+ z-index: 2;
+ grid-area: 1 / 1;
+ padding: var(--toggle-padding);
+ pointer-events: none;
+
+ .single-selected-option {
+ margin: 0;
+ }
+ }
+ }
+
+ .menu {
+ position: absolute;
+ top: calc(100% + 5px);
+ left: 0;
+ z-index: 120;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ width: 100%;
+ background: #fff;
+ max-width: 100%;
+ max-height: 300px;
+ padding: 0.5rem;
+ overflow-x: hidden;
+ overflow-y: auto;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ box-shadow: 0 5px 10px rgb(0 0 0 / 15%);
+ opacity: 0;
+ transform: translateY(-6px) scale(0.98);
+ pointer-events: none;
+
+ &.open {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ pointer-events: auto;
+ }
+
+ .type-option {
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover,
+ &.selected {
+ background: color.adjust($dv-primary-color, $alpha: -0.9);
+ border: solid 1px $dv-primary-color;
+ }
+
+ &:active {
+ background: color.adjust($dv-primary-color, $alpha: -0.6);
+ }
+ }
+ }
+}
diff --git a/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.tsx b/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.tsx
new file mode 100644
index 000000000..94a0def74
--- /dev/null
+++ b/src/sections/create-dataset/dataset-type-select/DatasetTypeSelect.tsx
@@ -0,0 +1,111 @@
+import { useState, useRef, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { Card, Col, Form } from '@iqss/dataverse-design-system'
+import { DatasetType } from '@/dataset/domain/models/DatasetType'
+import styles from './DatasetTypeSelect.module.scss'
+
+interface DatasetTypeSelectProps {
+ datasetTypes: DatasetType[]
+ onChange: (selectedTypeId: string) => void
+ selectedType: DatasetType
+ disabled?: boolean
+}
+
+export const DatasetTypeSelect = ({
+ datasetTypes,
+ onChange,
+ selectedType,
+ disabled = false
+}: DatasetTypeSelectProps) => {
+ const { t } = useTranslation('createDataset')
+ const [isOpen, setIsOpen] = useState(false)
+ const dropdownRef = useRef
(null)
+
+ const handleSelectType = (typeId: number) => {
+ onChange(typeId.toString())
+ setIsOpen(false)
+ }
+
+ const handleToggle = () => {
+ if (!disabled) {
+ setIsOpen((prev) => !prev)
+ }
+ }
+
+ const handleKeyDown = (event: KeyboardEvent, typeId: number) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ handleSelectType(typeId)
+ } else if (event.key === 'Escape') {
+ setIsOpen(false)
+ }
+ }
+
+ // Close menu when clicking outside, focusing outside, or pressing Escape
+ useEffect(() => {
+ const handleClose = (event: MouseEvent | FocusEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setIsOpen(false)
+ }
+ }
+ const handleDocKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') setIsOpen(false)
+ }
+
+ document.addEventListener('mousedown', handleClose)
+ document.addEventListener('focusin', handleClose)
+ document.addEventListener('keydown', handleDocKeyDown)
+ return () => {
+ document.removeEventListener('mousedown', handleClose)
+ document.removeEventListener('focusin', handleClose)
+ document.removeEventListener('keydown', handleDocKeyDown)
+ }
+ }, [])
+
+ return (
+
+
+ {t('datasetType.label')}
+
+
+ {t('datasetType.helpText')}
+
+
+
+
+ {selectedType.displayName}
+
+
+
+ {datasetTypes.map((dt) => (
+ !disabled && handleSelectType(dt.id)}
+ onKeyDown={(e) => !disabled && handleKeyDown(e as unknown as KeyboardEvent, dt.id)}
+ tabIndex={disabled ? -1 : 0}
+ role="menuitem"
+ key={dt.id}>
+
+
+ {dt.displayName}
+
+ {dt.description}
+
+
+
+ ))}
+
+
+
+ {t('datasetType.label')}
+
+
+ {datasetType}
+
+
+ )}
)
}
diff --git a/src/sections/edit-dataset-metadata/EditDatasetMetadata.tsx b/src/sections/edit-dataset-metadata/EditDatasetMetadata.tsx
index 80f78a7e5..15d7b20ff 100644
--- a/src/sections/edit-dataset-metadata/EditDatasetMetadata.tsx
+++ b/src/sections/edit-dataset-metadata/EditDatasetMetadata.tsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
-import { Alert, Tabs } from '@iqss/dataverse-design-system'
+import { Alert, Col, Form, Tabs } from '@iqss/dataverse-design-system'
import { MetadataBlockInfoRepository } from '../../metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
import { useDataset } from '../dataset/DatasetContext'
import { useLoading } from '../../shared/contexts/loading/LoadingContext'
@@ -54,6 +54,18 @@ export const EditDatasetMetadata = ({ metadataBlockInfoRepository }: EditDataset
{t('infoAlert.text')}
+
+
+ {t('datasetType.label')}
+
+
+
+
+
@@ -65,6 +77,7 @@ export const EditDatasetMetadata = ({ metadataBlockInfoRepository }: EditDataset
datasetPersistentID={dataset.persistentId}
datasetMetadaBlocksCurrentValues={dataset.metadataBlocks}
datasetLastUpdateTime={dataset.version.lastUpdateTime}
+ datasetTypeName={dataset.datasetType}
/>