Merge pull request #65 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/Accordion.tsx

@@ -34,7 +34,7 @@ type AccordionMultipleProps = Pick<
 type AccordionContainerProps = (
 	| AccordionSingleProps
 	| AccordionMultipleProps
-) & { 
+) & {
 	"data-testid"?: string
 	"data-id"?: string
 }
@@ -59,7 +59,6 @@ const AccordionItem = React.forwardRef(
 				"border-border overflow-hidden  border-b-2 first:rounded-t last:rounded-b last:border-b-0 focus-within:relative focus-within:z-10",
 				className,
 			)}
-			
 			ref={forwardedRef}
 		>
 			{children}
@@ -81,7 +80,7 @@ const AccordionTrigger = React.forwardRef(
 		<RAccordion.Header className="flex">
 			<RAccordion.Trigger
 				className={twMerge(
-					"text-text bg-surface hover:bg-surface-hovered active:bg-surface-pressed group flex min-h-12 flex-1 cursor-default items-center justify-between px-4 text-base font-bold outline-none",
+					"text-text bg-surface hover:bg-surface-hovered active:bg-surface-pressed group flex min-h-12 flex-1 cursor-pointer disabled:cursor-default items-center justify-between px-4 text-base font-bold outline-none",
 					className,
 				)}
 				{...props}
@@ -110,7 +109,7 @@ const AccordionContent = React.forwardRef(
 	) => (
 		<RAccordion.Content
 			className={twMerge(
-				"data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp border-border bg-surface overflow-hidden border-t",
+				"data-[state=open]:animate-slideDownAccordion data-[state=closed]:animate-slideUpAccordion border-border bg-surface overflow-hidden border-t",
 				className,
 			)}
 			{...props}

library/src/components/Collapsible.tsx

@@ -1,8 +1,10 @@
-import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down"
-import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right"
-import ChevronUpIcon from "@atlaskit/icon/glyph/chevron-up"
 import * as CollapsibleRUI from "@radix-ui/react-collapsible"
-import { forwardRef, type HTMLProps, useCallback, useState } from "react"
+import {
+	ChevronDownIcon,
+	ChevronRightIcon,
+	ChevronUpIcon,
+} from "@radix-ui/react-icons"
+import { forwardRef, type HTMLProps } from "react"
 import { twMerge } from "tailwind-merge"
 
 type CollapsibleProps = {
@@ -47,53 +49,24 @@ export const Collapsible = forwardRef(
 		}: CollapsibleProps,
 		ref: React.ForwardedRef<HTMLDivElement>,
 	) => {
-		const [open, setOpen] = useState(
-			opened === undefined || opened === null ? defaultOpen : opened,
-		)
-
-		if (opened != null && opened !== open) {
-			setOpen(opened)
-		}
-
-		const openCB = useCallback(
-			(opened: boolean) => {
-				setOpen(opened)
-				if (onChanged) onChanged(opened)
-			},
-			[onChanged],
-		)
-
-		const chevron = open ? (
-			<ChevronDownIcon label="close" />
-		) : (
-			<>
-				{openButtonPosition === "left" ? (
-					<ChevronRightIcon label="open" />
-				) : (
-					<ChevronUpIcon label="open" />
-				)}
-			</>
-		)
-
 		return (
 			<CollapsibleRUI.Root
 				{...props}
-				open={open}
-				defaultOpen={defaultOpen}
-				onOpenChange={openCB}
-				className={twMerge("bg-surface-raised rounded", className)}
+				className={twMerge(
+					"bg-surface-raised rounded group",
+					className,
+				)}
 				style={style}
 				data-testid={testId}
 				id={id}
 				ref={ref}
-				
 			>
 				<CollapsibleRUI.Trigger
 					className={twMerge(
-						`flex w-full flex-1 items-center justify-start ${
+						`flex w-full p-1.5 flex-1 items-center hover:bg-surface-raised-hovered active:bg-surface-raised-pressed justify-start select-none ${
 							openButtonPosition === "hidden"
 								? "cursor-default"
-								: ""
+								: "cursor-pointer disabled:cursor-default"
 						}`,
 						triggerClassName,
 					)}
@@ -103,7 +76,14 @@ export const Collapsible = forwardRef(
 					<div>
 						{openButtonPosition === "left" && (
 							<div className="flex h-full flex-none items-center justify-center">
-								{chevron}
+								<ChevronDownIcon
+									aria-label="close"
+									className="group-data-[state=open]:block group-data-[state=closed]:hidden"
+								/>
+								<ChevronRightIcon
+									aria-label="open"
+									className="group-data-[state=closed]:block group-data-[state=open]:hidden"
+								/>
 							</div>
 						)}
 						<div
@@ -117,15 +97,27 @@ export const Collapsible = forwardRef(
 						</div>
 						{openButtonPosition === "right" && (
 							<div className="flex h-full flex-none items-center justify-center">
-								{chevron}
+								<ChevronDownIcon
+									aria-label="close"
+									className="group-data-[state=open]:block group-data-[state=closed]:hidden"
+								/>
+								<ChevronUpIcon
+									aria-label="open"
+									className="group-data-[state=closed]:block group-data-[state=open]:hidden"
+								/>
 							</div>
 						)}
 					</div>
 				</CollapsibleRUI.Trigger>
 
 				<CollapsibleRUI.Content
-					className={contentClassName}
-					style={contentStyle}
+					className={twMerge(
+						"overflow-hidden data-[state=closed]:animate-slideUpCollapsible data-[state=open]:animate-slideDownCollapsible",
+						contentClassName,
+					)}
+					style={{
+						...contentStyle,
+					}}
 				>
 					{children}
 				</CollapsibleRUI.Content>

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

@@ -1,4 +1,3 @@
-import type React from "react"
 import {
 	type Dispatch,
 	type ReactNode,
@@ -125,10 +124,12 @@ function useOptions({
 		}
 
 		// add the value or default value to the top
-		if (_value) {
-			slots.unshift(_value)
-		} else if (_defaultValue) {
-			slots.unshift(_defaultValue)
+		if (!foundValue) {
+			if (_value) {
+				slots.unshift(_value)
+			} else if (_defaultValue) {
+				slots.unshift(_defaultValue)
+			}
 		}
 
 		// create options
@@ -165,8 +166,8 @@ export function TimePicker<FormData extends FieldValues>(
 
 /**
  * The timepicker is a select that opens a list of times.
- * @param param0 
- * @returns 
+ * @param param0
+ * @returns
  */
 export function TimePicker<FormData extends FieldValues>({
 	invalid,
@@ -215,10 +216,15 @@ export function TimePicker<FormData extends FieldValues>({
 		[onChange],
 	)
 
-	const classNameMerged = twMerge("flex flex-1 min-w-28 cursor-pointer", className)
+	const classNameMerged = twMerge(
+		"flex flex-1 min-w-28 cursor-pointer",
+		className,
+	)
 	const ariaLabel = label ?? _ariaLabel ?? "time picker"
 
-	const selectProps: SelectProps<TimeType, false> | SelectInFormProps<FormData, TimeType, false> = {
+	const selectProps:
+		| SelectProps<TimeType, false>
+		| SelectInFormProps<FormData, TimeType, false> = {
 		testId,
 		options,
 		"aria-label": ariaLabel,
@@ -248,19 +254,15 @@ export function TimePicker<FormData extends FieldValues>({
 
 	if (!control) {
 		selectProps satisfies SelectProps<TimeType, false>
-		return (
-			<TimePickerNotInForm
-				{...selectProps}
-			/>
-		)
+		return <TimePickerNotInForm {...selectProps} />
 	}
 
-	const selectInFormProps = {...selectProps, control, name} satisfies SelectInFormProps<FormData, TimeType, false>
-	return (
-		<TimePickerInForm<FormData>
-			{...selectInFormProps}
-		/>
-	)
+	const selectInFormProps = {
+		...selectProps,
+		control,
+		name,
+	} satisfies SelectInFormProps<FormData, TimeType, false>
+	return <TimePickerInForm<FormData> {...selectInFormProps} />
 }
 
 function TimePickerNotInForm(props: SelectProps<TimeType, false>) {
@@ -270,9 +272,5 @@ function TimePickerNotInForm(props: SelectProps<TimeType, false>) {
 function TimePickerInForm<FormData extends FieldValues>({
 	...props
 }: SelectInFormProps<FormData, TimeType, false>) {
-	return (
-		<Select<FormData, TimeType, false>
-			{...props}
-		/>
-	)
+	return <Select<FormData, TimeType, false> {...props} />
 }