Merge pull request #97 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/inputs/datetimepicker/DatePicker.tsx

@@ -274,51 +274,51 @@ const DatePickerBase = forwardRef(
 					readOnly={readOnly}
 					onChange={onInputChange}
 					iconAfter={
-						<>
-							{!hideIcon && (
-								<>
-									{value && !readOnly && (
-										<div className="pointer-events-none">
-											<Button
-												appearance="link"
-												className="text-disabled-text hover:text-text pointer-events-auto m-0 h-full w-8 px-1 py-0"
-												onClick={(e) => {
-													e.stopPropagation()
-													setOpen(false)
-													setValue("")
-													onChange?.(null)
-												}}
-												label={clearButtonLabel}
-											>
-												<IconSizeHelper
-													size="medium"
-													className=""
-												>
-													<SelectClearIcon
-														label=""
-														size="small"
-													/>
-												</IconSizeHelper>
-											</Button>
-										</div>
-									)}
-									{!value && !readOnly && (
-										<IconSizeHelper
-											size="medium"
-											className="w-8"
+						!hideIcon && (
+							<>
+								{value && !readOnly && (
+									<div className="pointer-events-none">
+										<Button
+											appearance="link"
+											className="text-disabled-text hover:text-text pointer-events-auto m-0 h-full w-8 px-1 py-0"
+											onClick={(e) => {
+												e.stopPropagation()
+												setOpen(false)
+												setValue("")
+												onChange?.(null)
+											}}
+											label={clearButtonLabel}
 										>
-											<CalendarIcon label="calendar" />
-										</IconSizeHelper>
-									)}
-								</>
-							)}
-						</>
+											<IconSizeHelper
+												size="medium"
+												className=""
+											>
+												<SelectClearIcon
+													label=""
+													size="small"
+												/>
+											</IconSizeHelper>
+										</Button>
+									</div>
+								)}
+								{!value && !readOnly && (
+									<IconSizeHelper
+										size="medium"
+										className="w-8"
+									>
+										<CalendarIcon label="calendar" />
+									</IconSizeHelper>
+								)}
+							</>
+						)
 					}
 					ref={ref}
 				/>
 			</div>
 		)
 
+		console.log("DISABLED", disabled)
+
 		return (
 			<Popover.Root
 				triggerComponent={trigger}

library/src/components/inputs/datetimepicker/DateTimePicker.tsx

@@ -58,7 +58,9 @@ type TimePickerPropsPart = Pick<
 
 type DateTimePickerAdditionalProps = {
 	dateOpen?: boolean
+	dateDisabled?: boolean
 	timeOpen?: boolean
+	timeDisabled?: boolean
 	defaultDateOpen?: boolean
 	defaultTimeOpen?: boolean
 	onDateChange?: (date: DateType | null) => void
@@ -153,6 +155,9 @@ function DateTimeNotInFormPicker({
 	weekStartsOn,
 	datePlaceholder,
 	timePlaceholder,
+	disabled,
+	timeDisabled,
+	dateDisabled,
 	onClearButtonClick,
 	defaultDate: _defaultDate,
 	defaultTime: _defaultTime,
@@ -283,6 +288,7 @@ function DateTimeNotInFormPicker({
 		value: timeVal,
 		onChange: onTimeChangedCB,
 		onClearButtonClick: onClearButtonClickCB,
+		disabled: timeDisabled || disabled,
 		...props,
 		...timePickerOptionProps,
 	}
@@ -308,12 +314,13 @@ function DateTimeNotInFormPicker({
 		disabledDateFilter,
 		disabledDates,
 		label: props.label ?? props["aria-label"] ?? "Date and Time",
+		disabled: dateDisabled || disabled,
 		...props,
 	}
 
 	return (
 		<div
-			data-disabled={props.disabled}
+			data-disabled={disabled}
 			className={twJoin("flex", className)}
 			style={style}
 		>
@@ -326,7 +333,8 @@ function DateTimeNotInFormPicker({
 			/>
 			<TimePicker
 				className={twMerge(
-					"rounded-l-none border-l-0 border-l-transparent before:rounded-l-none",
+					!dateDisabled && "border-l-0 border-l-transparent",
+					"before:rounded-l-none rounded-l-none",
 					timePickerClassName,
 				)}
 				value={timeVal}

library/src/components/timetable/TimeTable.tsx

@@ -674,7 +674,7 @@ function moveNowBar(
 	const diffPerc = diffNow / timeSlotMinutes
 	nowBar.style.left = `${diffPerc * 100}%`
 	nowBar.style.top = "100%"
-	nowBar.style.height = `${tableBody.getBoundingClientRect().bottom - nowTimeSlotCell.getBoundingClientRect().top}px`
+	nowBar.style.height = `${tableBody.getBoundingClientRect().bottom - nowTimeSlotCell.getBoundingClientRect().top - nowTimeSlotCell.clientHeight}px`
 
 	nowTimeSlotCell.classList.remove(
 		"border-b-border-bold",