TimeTable - fixed missing bottom blue border when row had no items

Author: marcus-wishes

library/src/components/timetable/TimeTableRows.tsx

@@ -967,14 +967,15 @@ function TableCell<G extends TimeTableGroup, I extends TimeSlotBooking>({
 			)}
 			{isFocused && (
 				<div
+					data-test={`${groupItemRows?.length}_${rowNumber}`}
 					className={twJoin(
 						"absolute inset-0 z-1",
 						isFocused &&
 							"border-l-3 border-r-3 border-brand-bold border-solid",
 						rowNumber === 0 &&
 							timeSlotSelectionDisabled &&
 							"border-t-3",
-						rowNumber === (groupItemRows?.length ?? 0) - 1 &&
+						rowNumber === (groupItemRows?.length || 1) - 1 &&
 							"border-b-3",
 					)}
 				/>
@@ -1042,7 +1043,7 @@ function PlaceholderTableCell<
 	}
 
 	const timeSlotSelectedIndex = selectedTimeSlots
-		? selectedTimeSlots?.findIndex((it) => it === timeSlotNumber)
+		? selectedTimeSlots?.indexOf(timeSlotNumber)
 		: -1
 
 	const isFirstOfSelection =

showcase/public/showcase-sources.txt

@@ -6229,22 +6229,13 @@ function MenuShowcase(props: ShowcaseProps) {
 
 export default MenuShowcase
 
-/*import {
-	default as AKModal,
-	ModalBody as AKModalBody,
-	ModalFooter as AKModalFooter,
-	ModalHeader as AKModalHeader,
-	ModalTitle as AKModalTitle,
-	ModalTransition as AKModalTransition,
-} from "@atlaskit/modal-dialog"*/
 import {
 	Button,
 	Collapsible,
 	Dropdown,
 	Modal,
 	Select,
 } from "@linked-planet/ui-kit-ts"
-//import { default as AKSelect } from "@atlaskit/select"
 import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu"
 import { XIcon } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
@@ -6254,122 +6245,6 @@ import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
 
-function AKExample() {
-	const [isAKModalActive, setIsAKModalActive] = useState(false)
-
-	const selectOptions = []
-	for (let i = 0; i < 100; i++) {
-		selectOptions.push({
-			label: i.toString(),
-			value: i.toString(),
-		})
-	}
-
-	return (
-		<>
-			<div>AKModal: {isAKModalActive.toString()}</div>
-			<Button onClick={() => setIsAKModalActive(true)}>
-				Show AK Modal
-			</Button>
-
-			{/*isAKModalActive && (
-				<AKModalTransition>
-					<AKModal onClose={() => setIsAKModalActive(false)}>
-						<AKModalHeader>
-							<AKModalTitle>Sample Modal</AKModalTitle>
-							<Button
-								appearance="link"
-								onClick={() => setIsAKModalActive(false)}
-							>
-								<CrossIcon label="Close popup" />
-							</Button>
-						</AKModalHeader>
-
-						<AKModalBody>
-							<p>This is the body of the AK modal.</p>
-							<AKSelect options={selectOptions} />
-							<Select
-								placeholder="Choose"
-								options={selectOptions}
-								className="z-10"
-							/>
-							Lorem, ipsum dolor sit amet consectetur adipisicing
-							elit. Distinctio ipsam harum rerum quia, nam, autem
-							non, commodi expedita dolore quisquam saepe odit
-							maiores id alias reiciendis. Aut aperiam minus eum.
-							Lorem ipsum dolor sit amet consectetur adipisicing
-							elit. Illum quos dolorum officia id porro illo sit
-							voluptates error doloremque? Iste deserunt amet illo
-							incidunt modi. Facilis reiciendis ratione at
-							veritatis. Lorem ipsum dolor sit amet consectetur,
-							adipisicing elit. Deserunt non, perspiciatis
-							voluptate cumque vel eveniet ratione sequi ullam
-							facilis! Beatae, voluptatem aperiam consequatur
-							assumenda consectetur possimus accusantium maxime
-							similique labore! Lorem ipsum dolor sit amet
-							consectetur, adipisicing elit. Ullam, possimus
-							facere ut odit mollitia vel consectetur earum
-							reiciendis beatae inventore fugiat, quo eaque ipsum
-							soluta facilis doloremque, voluptatibus odio
-							officiis. Lorem ipsum dolor sit amet consectetur
-							adipisicing elit. Laudantium voluptatum aut
-							voluptates distinctio nam neque dolore, maiores
-							autem impedit, doloribus eveniet laborum
-							necessitatibus ex! Possimus odit in commodi nulla
-							architecto. Lorem ipsum dolor sit amet consectetur
-							adipisicing elit. Officia, facere reiciendis
-							incidunt obcaecati aut corrupti tempora commodi nam
-							aspernatur et quas beatae delectus perspiciatis
-							alias quia inventore molestias quis exercitationem?
-							Lorem, ipsum dolor sit amet consectetur adipisicing
-							elit. Blanditiis temporibus doloremque nam molestiae
-							quidem, repellendus eligendi ex magnam quasi. Est
-							doloribus quam accusantium? Consequuntur, vel
-							sapiente alias repudiandae nisi soluta. Lorem ipsum
-							dolor sit amet consectetur adipisicing elit.
-							Reiciendis, quibusdam maxime. Numquam, explicabo! At
-							vero eligendi cupiditate vel molestias eos sint,
-							obcaecati minus suscipit ducimus libero
-							reprehenderit, itaque debitis atque? Lorem ipsum
-							dolor sit amet, consectetur adipisicing elit.
-							Repellendus vero consequatur velit dolores neque
-							distinctio harum tempore. Vitae, doloribus
-							perferendis! Deserunt reprehenderit dolor tempora
-							atque amet officiis ea, velit iste. Lorem ipsum
-							dolor sit, amet consectetur adipisicing elit. Est
-							nemo accusamus, inventore assumenda et nulla. Eius,
-							consequuntur repudiandae ea corrupti eos magni
-							itaque temporibus blanditiis aspernatur, earum quam
-							ut. Laudantium. Lorem ipsum dolor sit amet
-							consectetur adipisicing elit. Doloremque recusandae,
-							distinctio in fuga vero ullam tempora nisi laborum
-							unde architecto, doloribus dicta fugiat itaque
-							voluptatibus dolorum vel aspernatur, inventore nemo?
-							Lorem ipsum dolor sit amet consectetur adipisicing
-							elit. Error, corporis animi. Praesentium voluptate,
-							optio tenetur harum odio sequi eos possimus officiis
-							dignissimos. Laboriosam voluptates fuga est.
-							Deserunt quod officia harum!
-						</AKModalBody>
-
-						<AKModalFooter>
-							<ButtonGroup>
-								<Button
-									autoFocus={true}
-									appearance="primary"
-									onClick={() => setIsAKModalActive(false)}
-								>
-									Close
-								</Button>
-							</ButtonGroup>
-						</AKModalFooter>
-					</AKModal>
-				</AKModalTransition>
-			)*/}
-		</>
-	)
-}
-
 function ControlledExample() {
 	const selectOptions = []
 	for (let i = 0; i < 100; i++) {
@@ -6551,12 +6426,7 @@ function ModalTest() {
 }
 
 function ModalShowcase(props: ShowcaseProps) {
-	const example = (
-		<>
-			<AKExample />
-			<ControlledExample />
-		</>
-	)
+	const example = <ControlledExample />
 
 	return (
 		<ShowcaseWrapperItem