From acf4b2944d13a49280d38c5a9d67c31fcdc119f5 Mon Sep 17 00:00:00 2001 From: Philipp Karlsson Date: Fri, 27 Sep 2024 14:54:43 +0200 Subject: [PATCH 1/3] adding initial form-wrapper to ui-kit-ts --- .gitignore | 1 + library/src/components/form/DynamicForm.tsx | 122 +++++++++ .../form/elements/CheckboxFormField.tsx | 58 ++++ .../form/elements/InputFormField.tsx | 47 ++++ .../form/elements/SelectMultiFormField.tsx | 49 ++++ .../form/elements/SelectSingleFormField.tsx | 51 ++++ showcase/public/showcase-sources.txt | 251 ++++++++++++++++++ .../showcase/wrapper/FormShowcase.tsx | 250 +++++++++++++++++ showcase/src/useShowcases.tsx | 2 + 9 files changed, 831 insertions(+) create mode 100644 library/src/components/form/DynamicForm.tsx create mode 100644 library/src/components/form/elements/CheckboxFormField.tsx create mode 100644 library/src/components/form/elements/InputFormField.tsx create mode 100644 library/src/components/form/elements/SelectMultiFormField.tsx create mode 100644 library/src/components/form/elements/SelectSingleFormField.tsx create mode 100644 showcase/src/components/showcase/wrapper/FormShowcase.tsx diff --git a/.gitignore b/.gitignore index 32126ce9..7d685f94 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ /build # misc +.idea .DS_Store .env.local .env.development.local diff --git a/library/src/components/form/DynamicForm.tsx b/library/src/components/form/DynamicForm.tsx new file mode 100644 index 00000000..38dd673b --- /dev/null +++ b/library/src/components/form/DynamicForm.tsx @@ -0,0 +1,122 @@ +import React from "react" +import { + Control, + DefaultValues, + FieldValues, + RegisterOptions, + useForm, + UseFormRegisterReturn, + UseFormWatch, +} from "react-hook-form" +import {twMerge} from "tailwind-merge"; +import {Button} from "../Button"; + +export interface FormProps { + // biome-ignore lint/suspicious/noExplicitAny: + control: Control + watch: UseFormWatch + // biome-ignore lint/suspicious/noExplicitAny: + register: ( + name: any, + options?: RegisterOptions | undefined, + ) => UseFormRegisterReturn + readonly?: boolean +} + +export interface FormField { + objKey: keyof T + title: string + description?: string + required?: boolean + formProps?: FormProps +} + +export interface DynamicFormProps + extends Omit< + React.FormHTMLAttributes, + "children" | "onSubmit" + > { + obj: DefaultValues + children: ( + formProps: FormProps, + reset: (newDefaultValue?: T) => void, + ) => React.JSX.Element + onSubmit: (obj: T) => void + readonly?: boolean + vertical?: boolean + hideReset?: boolean + hideSave?: boolean +} + +export function DynamicForm({ + obj, + children, + onSubmit, + readonly, + vertical, + className, + hideSave, + hideReset, + ...props +}: DynamicFormProps) { + const { + register, + handleSubmit, + formState: { isDirty, isValid }, + control, + reset, + watch, + } = useForm({ + defaultValues: obj, + }) + + const onReset = (e: React.FormEvent) => { + e.preventDefault() + reset() + } + + return ( +
+ {children( + { + control: control, + watch: watch, + register: register, + readonly: readonly, + }, + reset, + )} + +
+ +
+ {!hideReset && ( + + )} + {!hideSave && ( + + )} +
+
+ ) +} diff --git a/library/src/components/form/elements/CheckboxFormField.tsx b/library/src/components/form/elements/CheckboxFormField.tsx new file mode 100644 index 00000000..5a429898 --- /dev/null +++ b/library/src/components/form/elements/CheckboxFormField.tsx @@ -0,0 +1,58 @@ +import React, {useEffect} from "react" +import {FieldValues, Path} from "react-hook-form" +import {FormField} from "../DynamicForm"; +import {Label} from "../../inputs"; +import {Checkbox} from "../../Checkbox"; + +export interface CheckboxFormField + extends FormField { + onChange?: (value: string) => void +} + +export function CheckboxFormField( + props: CheckboxFormField, +) { + console.info("formProps", props.formProps) + const fieldValue = props.formProps?.watch(props.objKey as Path) + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + if (props.onChange) { + // @ts-ignore + props.onChange(fieldValue) + } + }, [fieldValue]) + + const inputProps = props.formProps?.register(props.objKey) + + return ( +
+ + {props.description && ( +

+ {props.description} +

+ )} + { + if (props.onChange) { + props.onChange( + // @ts-ignore + (event.target as HTMLInputElement).checked, + ) + } + }} + /> +
+ ) +} diff --git a/library/src/components/form/elements/InputFormField.tsx b/library/src/components/form/elements/InputFormField.tsx new file mode 100644 index 00000000..c1a93dff --- /dev/null +++ b/library/src/components/form/elements/InputFormField.tsx @@ -0,0 +1,47 @@ +import React, {useEffect} from "react" +import {FieldValues, Path} from "react-hook-form" +import {FormField} from "../DynamicForm"; +import {Input, Label} from "../../inputs"; + +export interface InputFormField + extends FormField { + onChange?: (value: string) => void +} + +export function InputFormField( + props: InputFormField, +) { + console.info("formProps", props.formProps) + const fieldValue = props.formProps?.watch(props.objKey as Path) + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + if (props.onChange) { + // @ts-ignore + props.onChange(fieldValue) + } + }, [fieldValue]) + + const inputProps = props.formProps?.register(props.objKey) + + return ( +
+ + {props.description && ( +

+ {props.description} +

+ )} + )} + disabled={props.formProps?.readonly === true} + /> +
+ ) +} diff --git a/library/src/components/form/elements/SelectMultiFormField.tsx b/library/src/components/form/elements/SelectMultiFormField.tsx new file mode 100644 index 00000000..b8da3845 --- /dev/null +++ b/library/src/components/form/elements/SelectMultiFormField.tsx @@ -0,0 +1,49 @@ +import React, {useEffect} from "react" +import {FieldValues, Path} from "react-hook-form" +import {FormField} from "../DynamicForm"; +import {Label, Select} from "../../inputs"; + +export interface SelectMultiFormField + extends FormField { + options: Array<{ label: string; value: A }> + onChange?: (values: Array) => void +} + +export function SelectMultiFormField( + props: SelectMultiFormField, +) { + const fieldValue = props.formProps?.watch(props.objKey as Path) + + useEffect(() => { + console.info("FieldChange", props.objKey, fieldValue, props.onChange) + if (props.onChange) { + console.info( + "FieldChange EXECUTING", + props.objKey, + fieldValue, + props.onChange, + ) + // @ts-ignore + props.onChange(fieldValue) + } + }, [fieldValue]) + + const inputProps = props.formProps?.register(props.objKey) + + return ( +
+ + + isMulti + id={inputProps?.name} + name={inputProps?.name as Path} + control={props.formProps!.control} + options={props.options} + required + disabled={props.formProps?.readonly === true} + /> +
+ ) +} diff --git a/library/src/components/form/elements/SelectSingleFormField.tsx b/library/src/components/form/elements/SelectSingleFormField.tsx new file mode 100644 index 00000000..f9f5ed4e --- /dev/null +++ b/library/src/components/form/elements/SelectSingleFormField.tsx @@ -0,0 +1,51 @@ +import React, {useEffect} from "react" +import {FieldValues, Path} from "react-hook-form" +import {FormField} from "../DynamicForm"; +import {Label, Select} from "../../inputs"; + +export interface SelectSingleFormField< + T extends FieldValues, + A extends string | number, +> extends FormField { + options: Array<{ label: string; value: A }> + onChange?: (value: string) => void +} + +export function SelectSingleFormField< + T extends FieldValues, + A extends string | number, +>(props: SelectSingleFormField) { + const fieldValue = props.formProps?.watch(props.objKey as Path) + + useEffect(() => { + console.info("FieldChange", props.objKey, fieldValue, props.onChange) + if (props.onChange) { + console.info( + "FieldChange EXECUTING", + props.objKey, + fieldValue, + props.onChange, + ) + // @ts-ignore + props.onChange(fieldValue) + } + }, [fieldValue]) + + const inputProps = props.formProps?.register(props.objKey) + + return ( +
+ + + id={inputProps?.name} + name={inputProps?.name as Path} + control={props.formProps!.control} + options={props.options} + required + disabled={props.formProps?.readonly === true} + /> +
+ ) +} diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt index e7c036c1..5c329c55 100644 --- a/showcase/public/showcase-sources.txt +++ b/showcase/public/showcase-sources.txt @@ -3894,6 +3894,257 @@ function FlagShowcase(props: ShowcaseProps) { export default FlagShowcase +import React from "react" +import ShowcaseWrapperItem, {type ShowcaseProps,} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem" +import {DynamicForm} from "@linked-planet/ui-kit-ts/components/form/DynamicForm" +import {InputFormField} from "@linked-planet/ui-kit-ts/components/form/elements/InputFormField" +import {SelectSingleFormField} from "@linked-planet/ui-kit-ts/components/form/elements/SelectSingleFormField" +import {CheckboxFormField} from "@linked-planet/ui-kit-ts/components/form/elements/CheckboxFormField" +import {Button, ButtonGroup} from "@linked-planet/ui-kit-ts" +import {SelectMultiFormField} from "@linked-planet/ui-kit-ts/components/form/elements/SelectMultiFormField" + +interface TestObject { + firstname: string + lastname: string + language: string + hobbies: string[] + age: number + alive: boolean +} + +const testObject = { + firstname: "Max", + lastname: "Mustermann", + language: "de", + hobbies: ["Football", "Guitar"], + age: 30, + alive: true, +} + +const languages = [ + { label: "German", value: "de" }, + { label: "English", value: "en" }, + { label: "Swedisch", value: "se" }, +] + +const hobbies = [ + { label: "Football", value: "Football" }, + { label: "Guitar", value: "Guitar" }, + { label: "Basketball", value: "Basketball" }, +] + +//#region form-horizontal +function FormHorizontalExample() { + return ( +
+ + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> + + + + console.info("On language change", value) + } + /> + + + + + )} + +
+ ) +} +//#endregion form-horizontal + +//#region form-vertical +function FormVerticalExample() { + return ( +
+ + vertical + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> + + + + console.info("On language change", value) + } + /> + + + + + )} + +
+ ) +} +//#endregion form-vertical + +//#region form-custom +function FormCustomExample() { + return ( +
+ + hideReset + hideSave + className="max-w-4xl mt-3" + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> +
+ + + + + console.info("On language change", value) + } + /> +
+ + + + + + + + + )} + +
+ ) +} +//#endregion form-custom + +export default function FormShowcase(props: ShowcaseProps) { + return ( + , + sourceCodeExampleId: "form-horizontal", + }, + { + title: "Form Vertical", + example: , + sourceCodeExampleId: "form-vertical", + }, + { + title: "Form Custom", + example: , + sourceCodeExampleId: "form-custom", + }, + ]} + /> + ) +} + import React from "react" import ShowcaseWrapperItem, { ShowcaseProps, diff --git a/showcase/src/components/showcase/wrapper/FormShowcase.tsx b/showcase/src/components/showcase/wrapper/FormShowcase.tsx new file mode 100644 index 00000000..9c81be99 --- /dev/null +++ b/showcase/src/components/showcase/wrapper/FormShowcase.tsx @@ -0,0 +1,250 @@ +import React from "react" +import ShowcaseWrapperItem, {type ShowcaseProps,} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem" +import {DynamicForm} from "@linked-planet/ui-kit-ts/components/form/DynamicForm" +import {InputFormField} from "@linked-planet/ui-kit-ts/components/form/elements/InputFormField" +import {SelectSingleFormField} from "@linked-planet/ui-kit-ts/components/form/elements/SelectSingleFormField" +import {CheckboxFormField} from "@linked-planet/ui-kit-ts/components/form/elements/CheckboxFormField" +import {Button, ButtonGroup} from "@linked-planet/ui-kit-ts" +import {SelectMultiFormField} from "@linked-planet/ui-kit-ts/components/form/elements/SelectMultiFormField" + +interface TestObject { + firstname: string + lastname: string + language: string + hobbies: string[] + age: number + alive: boolean +} + +const testObject = { + firstname: "Max", + lastname: "Mustermann", + language: "de", + hobbies: ["Football", "Guitar"], + age: 30, + alive: true, +} + +const languages = [ + { label: "German", value: "de" }, + { label: "English", value: "en" }, + { label: "Swedisch", value: "se" }, +] + +const hobbies = [ + { label: "Football", value: "Football" }, + { label: "Guitar", value: "Guitar" }, + { label: "Basketball", value: "Basketball" }, +] + +//#region form-horizontal +function FormHorizontalExample() { + return ( +
+ + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> + + + + console.info("On language change", value) + } + /> + + + + + )} + +
+ ) +} +//#endregion form-horizontal + +//#region form-vertical +function FormVerticalExample() { + return ( +
+ + vertical + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> + + + + console.info("On language change", value) + } + /> + + + + + )} + +
+ ) +} +//#endregion form-vertical + +//#region form-custom +function FormCustomExample() { + return ( +
+ + hideReset + hideSave + className="max-w-4xl mt-3" + obj={testObject} + onSubmit={(data) => { + console.info("Saving form", data) + }} + > + {(formProps) => ( + <> +
+ + + + + console.info("On language change", value) + } + /> +
+ + + + + + + + + )} + +
+ ) +} +//#endregion form-custom + +export default function FormShowcase(props: ShowcaseProps) { + return ( + , + sourceCodeExampleId: "form-horizontal", + }, + { + title: "Form Vertical", + example: , + sourceCodeExampleId: "form-vertical", + }, + { + title: "Form Custom", + example: , + sourceCodeExampleId: "form-custom", + }, + ]} + /> + ) +} diff --git a/showcase/src/useShowcases.tsx b/showcase/src/useShowcases.tsx index 1f7c0251..4bf33e8c 100644 --- a/showcase/src/useShowcases.tsx +++ b/showcase/src/useShowcases.tsx @@ -50,6 +50,7 @@ import BlanketShowcase from "./components/showcase/wrapper/BlanketShowcase" import BreadcrumbsShowcase from "./components/showcase/wrapper/BreadcrumbsShowcase" import SectionMessageShowcase from "./components/showcase/wrapper/SectionMessageShowcase" import DragAndDropShowcase from "./components/showcase/wrapper/DragAndDropShowcase" +import FormShowcase from "./components/showcase/wrapper/FormShowcase"; export default function useShowcases({ overallSourceCode, }: { @@ -110,6 +111,7 @@ export default function useShowcases({ ), Flag: , Filters: , + Form: , Icon: , "Icon Size Helper": ( From e26ed31a8dbb4e9e45dd3e769ff6a542f66da0c8 Mon Sep 17 00:00:00 2001 From: "Markus T." <19794318+marcus-wishes@users.noreply.github.com> Date: Mon, 30 Sep 2024 15:47:30 +0200 Subject: [PATCH 2/3] WIP time table custom row --- .../src/components/timetable/TimeTable.tsx | 15 +- .../components/timetable/TimeTableHeader.tsx | 57 +++ .../components/timetable/TimeTableRows.tsx | 175 +------ library/src/components/timetable/index.ts | 8 + .../components/timetable/timeTableUtils.ts | 156 ++++++ package-lock.json | 467 +++++++++--------- package.json | 36 +- showcase/public/showcase-sources.txt | 26 + .../showcase/wrapper/TimeTableShowcase.tsx | 26 + 9 files changed, 549 insertions(+), 417 deletions(-) diff --git a/library/src/components/timetable/TimeTable.tsx b/library/src/components/timetable/TimeTable.tsx index 13ce44ca..a69142f9 100644 --- a/library/src/components/timetable/TimeTable.tsx +++ b/library/src/components/timetable/TimeTable.tsx @@ -5,7 +5,12 @@ import { type MutableRefObject, useCallback, useEffect, useRef } from "react" import useResizeObserver from "use-resize-observer" import { InlineMessage } from "../InlineMessage" import type { TimeTableItemProps } from "./ItemWrapper" -import { LPTimeTableHeader, headerText } from "./TimeTableHeader" +import { + type CustomHeaderRowHeaderProps, + type CustomHeaderRowTimeSlotProps, + LPTimeTableHeader, + headerText, +} from "./TimeTableHeader" import { PlaceHolderItemPlaceHolder, type TimeTablePlaceholderItemProps, @@ -181,6 +186,12 @@ export interface LPTimeTableProps< className?: string style?: React.CSSProperties + + /** custom header row */ + customHeaderRow?: { + timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element + header: (props: CustomHeaderRowHeaderProps) => JSX.Element + } } const nowbarUpdateIntervall = 1000 * 60 // 1 minute @@ -238,6 +249,7 @@ const LPTimeTableImpl = ({ disableMessages = false, className, style, + customHeaderRow, }: LPTimeTableProps) => { // if we have viewType of days, we need to round the start and end date to the start and end of the day const { setMessage, translatedMessage } = useTimeTableMessage( @@ -495,6 +507,7 @@ const LPTimeTableImpl = ({ dateHeaderTextFormat={dateHeaderTextFormat} weekStartsOnSunday={weekStartsOnSunday} locale={locale} + customHeaderRow={customHeaderRow} ref={tableHeaderRef} /> diff --git a/library/src/components/timetable/TimeTableHeader.tsx b/library/src/components/timetable/TimeTableHeader.tsx index dd635639..4731e42b 100644 --- a/library/src/components/timetable/TimeTableHeader.tsx +++ b/library/src/components/timetable/TimeTableHeader.tsx @@ -52,6 +52,20 @@ export function headerText( } } +export type CustomHeaderRowTimeSlotProps = { + timeSlot: Dayjs + timeSlotMinutes: number + isLastOfDay: boolean + viewType: TimeTableViewType + timeFrameOfDay: TimeFrameDay +} + +export type CustomHeaderRowHeaderProps = { + slotsArray: readonly Dayjs[] + viewType: TimeTableViewType + timeFrameOfDay: TimeFrameDay +} + type TimeTableHeaderProps = { slotsArray: readonly Dayjs[] groupHeaderColumnWidth: number | string @@ -65,6 +79,11 @@ type TimeTableHeaderProps = { dateHeaderTextFormat?: string weekStartsOnSunday: boolean locale?: "en" | "de" + + customHeaderRow?: { + timeSlot: (props: CustomHeaderRowTimeSlotProps) => JSX.Element + header: (props: CustomHeaderRowHeaderProps) => JSX.Element + } } export const LPTimeTableHeader = forwardRef(function TimeTableHeader( @@ -80,6 +99,7 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader( dateHeaderTextFormat, weekStartsOnSunday, locale, + customHeaderRow, }: TimeTableHeaderProps, tableHeaderRef: React.Ref, ) { @@ -247,6 +267,43 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader( ) })} + {customHeaderRow && ( + + + {customHeaderRow.header({ + slotsArray, + timeFrameOfDay: timeFrameDay, + viewType, + })} + + {slotsArray.map((slot, i) => { + const isLastOfDay = + i === slotsArray.length - 1 || + !slotsArray[i + 1].isSame(slot, "day") + return ( + + {customHeaderRow.timeSlot({ + timeSlot: slot, + timeSlotMinutes: 60, + isLastOfDay, + timeFrameOfDay: timeFrameDay, + viewType, + })} + + ) + })} + + )} ) diff --git a/library/src/components/timetable/TimeTableRows.tsx b/library/src/components/timetable/TimeTableRows.tsx index 20c0e259..9f3e0833 100644 --- a/library/src/components/timetable/TimeTableRows.tsx +++ b/library/src/components/timetable/TimeTableRows.tsx @@ -41,6 +41,7 @@ import { useTimeSlotSelection, } from "./TimeTableSelectionStore" import type { ItemRowEntry } from "./useGoupRows" +import { getLeftAndWidth } from "./timeTableUtils" interface TimeTableRowsProps< G extends TimeTableGroup, @@ -407,16 +408,14 @@ function TableCell({ /> )} {itemsToRender && itemsToRender.length > 0 && ( - <> -
- {itemsToRender} -
- +
+ {itemsToRender} +
)} {afterCount > 0 && !hideOutOfRangeMarkers && (
( storeIdent, ]) } - -/** - * Gets the left and width css properties for an item to be rendered in % - * @param item - * @param startSlot - * @param endSlot - * @param slotsArray - * @param timeSteps - */ -function getLeftAndWidth( - item: TimeSlotBooking, - startSlot: number, - endSlot: number, - slotsArray: readonly Dayjs[], - timeFrameDay: TimeFrameDay, - viewType: TimeTableViewType, - timeSlotMinutes: number, -) { - let itemModStart = item.startDate - const timeFrameStartStart = slotsArray[0] - .startOf("day") - .add(timeFrameDay.startHour, "hours") - .add(timeFrameDay.startMinute, "minutes") - if (item.startDate.isBefore(timeFrameStartStart)) { - itemModStart = timeFrameStartStart - } else if ( - item.startDate.hour() < timeFrameDay.startHour || - (item.startDate.hour() === timeFrameDay.startHour && - item.startDate.minute() < timeFrameDay.startMinute) - ) { - itemModStart = item.startDate - .startOf("day") - .add(timeFrameDay.startHour, "hour") - .add(timeFrameDay.startMinute, "minutes") - } - - let itemModEnd = item.endDate - if (item.endDate.isBefore(item.startDate)) { - console.error( - "LPTimeTable - item with end date before start date found:", - item, - itemModStart, - itemModEnd, - ) - itemModEnd = itemModStart - } else if (item.endDate.isSame(item.startDate)) { - console.error( - "LPTimeTable - item with end date same as start date found:", - item, - itemModStart, - itemModEnd, - ) - itemModEnd = itemModStart - } else { - let timeFrameEndEnd = slotsArray[slotsArray.length - 1] - .startOf("day") - .add(timeFrameDay.endHour, "hour") - .add(timeFrameDay.endMinute, "minutes") - if (viewType !== "hours") { - timeFrameEndEnd = timeFrameEndEnd - .add(1, viewType) - .subtract(1, "day") - } - if (itemModEnd.isAfter(timeFrameEndEnd)) { - itemModEnd = timeFrameEndEnd - } else if (item.endDate.hour() === 0 && item.endDate.minute() === 0) { - itemModEnd = itemModEnd.subtract(1, "minute") - itemModEnd = itemModEnd - .startOf("day") - .add(timeFrameDay.endHour, "hour") - .add(timeFrameDay.endMinute, "minutes") - } else if ( - item.endDate.hour() > timeFrameDay.endHour || - (item.endDate.hour() === timeFrameDay.endHour && - item.endDate.minute() > timeFrameDay.endMinute) - ) { - itemModEnd = itemModEnd - .startOf("day") - .add(timeFrameDay.endHour, "hour") - .add(timeFrameDay.endMinute, "minutes") - } - } - - const dTimeDay = 24 * 60 - timeFrameDay.oneDayMinutes - - let slotStart = slotsArray[startSlot] - if (viewType !== "hours") { - slotStart = slotStart - .add(timeFrameDay.startHour, "hour") - .add(timeFrameDay.startMinute, "minutes") - } - const dstartDays = itemModStart.diff(slotStart, "day") - let dstartMin = itemModStart.diff(slotStart, "minute") - if (dstartDays > 0) { - dstartMin -= dstartDays * dTimeDay - } - let left = dstartMin / timeSlotMinutes - if (left < 0) { - console.error( - "LPTimeTable - item with negative left found:", - left, - item, - startSlot, - endSlot, - slotsArray, - timeSlotMinutes, - ) - // if the start is before the time slot, we need to set the left to 0 - left = 0 - } - - const timeSpanDays = itemModEnd.diff(itemModStart, "day") - let timeSpanMin = itemModEnd.diff(itemModStart, "minute") - if (timeSpanDays > 0) { - timeSpanMin -= timeSpanDays * dTimeDay - } - const width = timeSpanMin / timeSlotMinutes - - /*let dmin = itemModEnd.diff(slotsArray[endSlot], "minute") - // because of the time frame of the day, i need to remove the amount if minutes missing to the days end * the amount of days of the time slot to get the correct end - if (viewType !== "hours") { - const daysCount = Math.floor(dmin / (26 * 60)) - if (daysCount > 0) { - const diffToDayEnd = itemModEnd.diff( - itemModEnd.endOf("day"), - "minute", - ) - dmin -= daysCount * diffToDayEnd - } - } - let width = dmin / timeSteps*/ - - // check if this is the last time slot of the day - //width = endSlot + 1 - startSlot - (left + width) - //width = endSlot - startSlot + width - left - - if (width < 0) { - // this should not happen, but if it does, we need to log it to find the error - console.error( - "LPTimeTable - item with negative width found:", - width, - item, - startSlot, - endSlot, - slotsArray, - timeSlotMinutes, - timeSpanMin, - timeSpanDays, - dTimeDay, - itemModStart, - itemModEnd, - ) - } - - return { left, width } -} diff --git a/library/src/components/timetable/index.ts b/library/src/components/timetable/index.ts index 6871138e..e953b658 100644 --- a/library/src/components/timetable/index.ts +++ b/library/src/components/timetable/index.ts @@ -9,9 +9,14 @@ import type { } from "./TimeTable" import type { TimeTablePlaceholderItemProps } from "./PlaceholderItem" import type { TimeTableItemProps } from "./ItemWrapper" +import type { + CustomHeaderRowHeaderProps as _CustomHeaderRowHeaderProps, + CustomHeaderRowTimeSlotProps as _CustomHeaderRowTimeSlotProps, +} from "./TimeTableHeader" export type { TimeTableItemProps } from "./ItemWrapper" export type { TimeTablePlaceholderItemProps } from "./PlaceholderItem" +import type { TimeFrameDay as _TimeFrameDay } from "./TimeTableConfigStore" //const memoized = React.memo(TimeTable) as typeof TimeTable @@ -20,7 +25,10 @@ export { TimeTable } export namespace TimeTableTypes { export type TimeSlotBooking = _TimeSlotBooking + export type TimeFrameDay = _TimeFrameDay export type TimeTableGroup = _TimeTableGroup + export type CustomHeaderRowHeaderProps = _CustomHeaderRowHeaderProps + export type CustomHeadeRowTimeSlotProps = _CustomHeaderRowTimeSlotProps export type TimeTableEntry< G extends TimeTableGroup, diff --git a/library/src/components/timetable/timeTableUtils.ts b/library/src/components/timetable/timeTableUtils.ts index f6bc7bf3..14f0a55b 100644 --- a/library/src/components/timetable/timeTableUtils.ts +++ b/library/src/components/timetable/timeTableUtils.ts @@ -326,3 +326,159 @@ export function calculateTimeSlotPropertiesForView( timeSlotMinutes, }) } + +/** + * Gets the left and width css properties for an item to be rendered in % + * @param item + * @param startSlot + * @param endSlot + * @param slotsArray + * @param timeSteps + */ +export function getLeftAndWidth( + item: TimeSlotBooking, + startSlot: number, + endSlot: number, + slotsArray: readonly Dayjs[], + timeFrameDay: TimeFrameDay, + viewType: TimeTableViewType, + timeSlotMinutes: number, +) { + let itemModStart = item.startDate + const timeFrameStartStart = slotsArray[0] + .startOf("day") + .add(timeFrameDay.startHour, "hours") + .add(timeFrameDay.startMinute, "minutes") + if (item.startDate.isBefore(timeFrameStartStart)) { + itemModStart = timeFrameStartStart + } else if ( + item.startDate.hour() < timeFrameDay.startHour || + (item.startDate.hour() === timeFrameDay.startHour && + item.startDate.minute() < timeFrameDay.startMinute) + ) { + itemModStart = item.startDate + .startOf("day") + .add(timeFrameDay.startHour, "hour") + .add(timeFrameDay.startMinute, "minutes") + } + + let itemModEnd = item.endDate + if (item.endDate.isBefore(item.startDate)) { + console.error( + "LPTimeTable - item with end date before start date found:", + item, + itemModStart, + itemModEnd, + ) + itemModEnd = itemModStart + } else if (item.endDate.isSame(item.startDate)) { + console.error( + "LPTimeTable - item with end date same as start date found:", + item, + itemModStart, + itemModEnd, + ) + itemModEnd = itemModStart + } else { + let timeFrameEndEnd = slotsArray[slotsArray.length - 1] + .startOf("day") + .add(timeFrameDay.endHour, "hour") + .add(timeFrameDay.endMinute, "minutes") + if (viewType !== "hours") { + timeFrameEndEnd = timeFrameEndEnd + .add(1, viewType) + .subtract(1, "day") + } + if (itemModEnd.isAfter(timeFrameEndEnd)) { + itemModEnd = timeFrameEndEnd + } else if (item.endDate.hour() === 0 && item.endDate.minute() === 0) { + itemModEnd = itemModEnd.subtract(1, "minute") + itemModEnd = itemModEnd + .startOf("day") + .add(timeFrameDay.endHour, "hour") + .add(timeFrameDay.endMinute, "minutes") + } else if ( + item.endDate.hour() > timeFrameDay.endHour || + (item.endDate.hour() === timeFrameDay.endHour && + item.endDate.minute() > timeFrameDay.endMinute) + ) { + itemModEnd = itemModEnd + .startOf("day") + .add(timeFrameDay.endHour, "hour") + .add(timeFrameDay.endMinute, "minutes") + } + } + + const dTimeDay = 24 * 60 - timeFrameDay.oneDayMinutes + + let slotStart = slotsArray[startSlot] + if (viewType !== "hours") { + slotStart = slotStart + .add(timeFrameDay.startHour, "hour") + .add(timeFrameDay.startMinute, "minutes") + } + const dstartDays = itemModStart.diff(slotStart, "day") + let dstartMin = itemModStart.diff(slotStart, "minute") + if (dstartDays > 0) { + dstartMin -= dstartDays * dTimeDay + } + let left = dstartMin / timeSlotMinutes + if (left < 0) { + console.error( + "LPTimeTable - item with negative left found:", + left, + item, + startSlot, + endSlot, + slotsArray, + timeSlotMinutes, + ) + // if the start is before the time slot, we need to set the left to 0 + left = 0 + } + + const timeSpanDays = itemModEnd.diff(itemModStart, "day") + let timeSpanMin = itemModEnd.diff(itemModStart, "minute") + if (timeSpanDays > 0) { + timeSpanMin -= timeSpanDays * dTimeDay + } + const width = timeSpanMin / timeSlotMinutes + + /*let dmin = itemModEnd.diff(slotsArray[endSlot], "minute") + // because of the time frame of the day, i need to remove the amount if minutes missing to the days end * the amount of days of the time slot to get the correct end + if (viewType !== "hours") { + const daysCount = Math.floor(dmin / (26 * 60)) + if (daysCount > 0) { + const diffToDayEnd = itemModEnd.diff( + itemModEnd.endOf("day"), + "minute", + ) + dmin -= daysCount * diffToDayEnd + } + } + let width = dmin / timeSteps*/ + + // check if this is the last time slot of the day + //width = endSlot + 1 - startSlot - (left + width) + //width = endSlot - startSlot + width - left + + if (width < 0) { + // this should not happen, but if it does, we need to log it to find the error + console.error( + "LPTimeTable - item with negative width found:", + width, + item, + startSlot, + endSlot, + slotsArray, + timeSlotMinutes, + timeSpanMin, + timeSpanDays, + dTimeDay, + itemModStart, + itemModEnd, + ) + } + + return { left, width } +} diff --git a/package-lock.json b/package-lock.json index f1fe93e1..f95a868c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "0.10.0", "license": "Apache-2.0", "dependencies": { - "@atlaskit/empty-state": "^7.11.3", - "@atlaskit/icon": "^22.18.0", + "@atlaskit/empty-state": "^7.11.4", + "@atlaskit/icon": "^22.19.0", "@emotion/css": "^11.13.0", "@hello-pangea/dnd": "^17.0.0", "@radix-ui/react-accordion": "^1.2.0", @@ -45,18 +45,18 @@ "use-resize-observer": "^9.1.0" }, "devDependencies": { - "@atlaskit/atlassian-navigation": "^4.7.0", - "@atlaskit/code": "^15.6.0", - "@atlaskit/css-reset": "^6.11.0", - "@atlaskit/lozenge": "^11.10.1", - "@atlaskit/pagination": "^14.9.0", - "@atlaskit/side-navigation": "^3.5.1", - "@atlaskit/table-tree": "^10.0.1", - "@atlaskit/tag": "^12.6.0", + "@atlaskit/atlassian-navigation": "^4.7.1", + "@atlaskit/code": "^15.6.1", + "@atlaskit/css-reset": "^6.11.1", + "@atlaskit/lozenge": "^11.11.0", + "@atlaskit/pagination": "^14.9.1", + "@atlaskit/side-navigation": "^3.5.2", + "@atlaskit/table-tree": "^10.0.2", + "@atlaskit/tag": "^12.6.1", "@atlaskit/tag-group": "^10.6.0", - "@atlaskit/textarea": "^5.6.1", - "@atlaskit/textfield": "^6.5.1", - "@atlaskit/theme": "^13.0.0", + "@atlaskit/textarea": "^5.6.2", + "@atlaskit/textfield": "^6.5.2", + "@atlaskit/theme": "^13.0.1", "@babel/generator": "^7.25.6", "@babel/parser": "^7.25.6", "@babel/traverse": "^7.25.6", @@ -65,16 +65,16 @@ "@formatjs/cli": "^6.2.12", "@monaco-editor/react": "^4.6.0", "@total-typescript/ts-reset": "^0.6.1", - "@types/node": "^22.7.0", - "@types/react": "^18.3.9", + "@types/node": "^22.7.4", + "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^8.7.0", "@typescript-eslint/parser": "^8.7.0", - "@vitejs/plugin-react-swc": "^3.7.0", + "@vitejs/plugin-react-swc": "^3.7.1", "autoprefixer": "^10.4.20", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-react": "^7.36.1", + "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.12", "eslint-plugin-tailwindcss": "^3.17.4", @@ -95,7 +95,7 @@ "typescript": "^5.6.2", "typescript-plugin-css-modules": "^5.1.0", "vite": "^5.4.8", - "vite-plugin-dts": "^4.2.2", + "vite-plugin-dts": "^4.2.3", "vitest": "^2.1.1" }, "peerDependencies": { @@ -171,12 +171,12 @@ } }, "node_modules/@atlaskit/app-provider": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@atlaskit/app-provider/-/app-provider-1.4.0.tgz", - "integrity": "sha512-OheQY4ObKhawVhp2r/tTTL/a1eOa9QTkywaN2YMPEk+HiO3TinSxr3zu162nDlokdPvxo81AyzpAYtWYHBhz0Q==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/app-provider/-/app-provider-1.4.1.tgz", + "integrity": "sha512-nlpRs2umkVhSgc4RBnKO9sT35XoAqJvjy0De/vxw7t7X7bzRAktwk9fOLa9PrNdILJFi0qhJusKFl6S7ewpcJA==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "bind-event-listener": "^3.0.0" }, @@ -185,22 +185,22 @@ } }, "node_modules/@atlaskit/atlassian-navigation": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/@atlaskit/atlassian-navigation/-/atlassian-navigation-4.7.0.tgz", - "integrity": "sha512-2CIFfkQKyh6t4g1mxmq6yc7uiFJHO0a0MAPHlZdzgmXPLhXc+IZrqle7CUJqurdCsQZq6Dx4MbyF39Q3mMKxBw==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@atlaskit/atlassian-navigation/-/atlassian-navigation-4.7.1.tgz", + "integrity": "sha512-iYwtVmUs+c0i/btGE1qm5RE4oOm4xKkgUzJDzHybCpE3r2VFpMLmYOCfu0FzSzAqjzgsDQ5pIgzE9qBoZsrkYA==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-namespaced-context": "^6.12.0", - "@atlaskit/button": "^20.1.0", - "@atlaskit/ds-lib": "^2.5.0", - "@atlaskit/icon": "^22.16.0", + "@atlaskit/button": "^20.2.0", + "@atlaskit/ds-lib": "^2.6.0", + "@atlaskit/icon": "^22.18.0", "@atlaskit/logo": "*", "@atlaskit/platform-feature-flags": "^0.3.0", - "@atlaskit/popup": "^1.25.0", - "@atlaskit/primitives": "^12.1.0", + "@atlaskit/popup": "^1.27.0", + "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@atlaskit/tooltip": "^18.7.0", "@atlaskit/width-detector": "^4.3.0", "@babel/runtime": "^7.0.0", @@ -213,9 +213,9 @@ } }, "node_modules/@atlaskit/button": { - "version": "20.2.0", - "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-20.2.0.tgz", - "integrity": "sha512-Hw2uIdgc1NU0eXWs3tNaJ58eb/O8AwVLSWLqBNHTbiFPgvnutIiTqjJcvH4FcTb+9uMKqGoJPRlYY/WpR49zUQ==", + "version": "20.2.1", + "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-20.2.1.tgz", + "integrity": "sha512-mmcYKgUb8OCIRRaJmqoulfSl/BE7pXa4knVP8KumFH3v26kZzyewifFjEqAksnyzPn9VFZsQCijTdIuLCoWgEA==", "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", @@ -227,7 +227,7 @@ "@atlaskit/primitives": "^12.2.0", "@atlaskit/spinner": "^16.3.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.61.0", + "@atlaskit/tokens": "^2.0.0", "@atlaskit/tooltip": "^18.7.0", "@atlaskit/visually-hidden": "^1.5.0", "@babel/runtime": "^7.0.0", @@ -238,16 +238,16 @@ } }, "node_modules/@atlaskit/code": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/@atlaskit/code/-/code-15.6.0.tgz", - "integrity": "sha512-ePbJbnGKQVbP243kRwvHAhRQdMO2bidZPQhhAreBqK9PVO0bioGaVA3b+x4umzsQ6wJtndHasD3Dw/IeGFoJ3g==", + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/@atlaskit/code/-/code-15.6.1.tgz", + "integrity": "sha512-LXnoD4qxDlnkqIN/Sm/5iMQ/Njzgt8Eov+Orb7QeidzM/QdN7b5qE+iQOcjJEbfowjA9HkGCFnKSRVz/RpRiog==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/codemod-utils": "^4.2.0", "@atlaskit/platform-feature-flags": "^0.3.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@atlaskit/tooltip": "^18.7.0", "@atlaskit/visually-hidden": "^1.5.0", "@babel/runtime": "^7.0.0", @@ -269,12 +269,12 @@ } }, "node_modules/@atlaskit/css": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@atlaskit/css/-/css-0.5.0.tgz", - "integrity": "sha512-WfE1u8c+mgAnoba1wEQfAx3OyiAWUkMrKJPcT66lG4urabaUhozz648Zbxi2JaGrqszZYe8xlqz/GEyb770rsQ==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@atlaskit/css/-/css-0.5.1.tgz", + "integrity": "sha512-PckxWy4CGJtABJRZi3GQZ90bD39RC5YfzztdINf+zlhbhV6rv0X05bmQaWDCiQEzQN73OOdfxL9PD9eL8q4OJA==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/tokens": "^1.60.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@compiled/react": "^0.17.3" }, @@ -283,14 +283,14 @@ } }, "node_modules/@atlaskit/css-reset": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/@atlaskit/css-reset/-/css-reset-6.11.0.tgz", - "integrity": "sha512-ixnhPOsPG1kfg6fWRQFeKP44J9y+OeBo5wO96Zi/mt783aF4eRPHA38bxqDHgWETFRQu/pi/8Vph70MG35x4iA==", + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/@atlaskit/css-reset/-/css-reset-6.11.1.tgz", + "integrity": "sha512-yGHQenpuNe5/oZ8i+6NdqhYvEEhpeUkVG1QNnpBoBWG5QFPKDFPQgab7njcB5YDmGoOG2GQ97rrcoQENv1JZbQ==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.60.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0" }, "peerDependencies": { @@ -313,18 +313,18 @@ } }, "node_modules/@atlaskit/empty-state": { - "version": "7.11.3", - "resolved": "https://registry.npmjs.org/@atlaskit/empty-state/-/empty-state-7.11.3.tgz", - "integrity": "sha512-phYq0RqtVHlu7N6g+S+jwgT6bFsrD3ll5gCPSsFDSCDkXMPJTY/GF67HlnrqiK227l6AUNXobsgIdpWaN5WEhw==", + "version": "7.11.4", + "resolved": "https://registry.npmjs.org/@atlaskit/empty-state/-/empty-state-7.11.4.tgz", + "integrity": "sha512-25gmXEKmUqXZOTfZlTRdN0dPkNsxRRrc0kRuL2sQkJURJPYJT8874iBvfvnlTGsYr24Duv9ig6nk8fj8zWi7NQ==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/button": "^20.1.0", + "@atlaskit/button": "^20.2.0", "@atlaskit/heading": "^2.3.2", "@atlaskit/platform-feature-flags": "^0.3.0", - "@atlaskit/primitives": "^12.0.0", + "@atlaskit/primitives": "^12.2.0", "@atlaskit/spinner": "^16.3.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -333,12 +333,12 @@ } }, "node_modules/@atlaskit/focus-ring": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@atlaskit/focus-ring/-/focus-ring-1.6.0.tgz", - "integrity": "sha512-5lvBUSSwQ892qMUjLNXKQ1MCOcywaDpa3AIVriBOGpzQscEpqwPO7qmr4HrYoHBYhrWQcKQ9XJURfsJAfm0V+A==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@atlaskit/focus-ring/-/focus-ring-1.6.1.tgz", + "integrity": "sha512-WuZL6DFOISPR3RZvaO6Mj47Jq4ClrLJGeSJmwib272VSDou79/4FRjKrIQxyEzsrSAx8beoBUPzEXdgw/vNeVQ==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -347,13 +347,13 @@ } }, "node_modules/@atlaskit/heading": { - "version": "2.4.5", - "resolved": "https://registry.npmjs.org/@atlaskit/heading/-/heading-2.4.5.tgz", - "integrity": "sha512-2DHXYpXXhI6YGVWtxkQS7sAgrUdZCfG7D1tFHLoqMlQEFpv/Z+jotrNpCeSmDVeRUZ3z/lVK7DgkKoQMjBorSA==", + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@atlaskit/heading/-/heading-2.4.6.tgz", + "integrity": "sha512-jMnCjknYWoxoYCdYlNOtmjfows8mZCDoCl3CV6hBQt6ULp2gTi1aEO3u9Aqiou7KhySqaiRVj/Vo5pZymxqr/A==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/primitives": "^12.0.0", - "@atlaskit/tokens": "^1.57.0", + "@atlaskit/primitives": "^12.2.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -362,13 +362,13 @@ } }, "node_modules/@atlaskit/icon": { - "version": "22.18.0", - "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-22.18.0.tgz", - "integrity": "sha512-t1utmsYF3WqImRNDHrO1Y/H69oYrkcfY0o28VX9/+wPqsxzcmsVWephnPlgoMKwXc8mOjZa5QxlrVVG+GtTMtw==", + "version": "22.19.0", + "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-22.19.0.tgz", + "integrity": "sha512-QJRWEmlTZjcgGauFK+ZZ4iqCqCZBVmcfnllVqhOGlpPflhUp9Dc/NZ3tGVuweZE9DwGb/xpLDSqxQu0Cop30OQ==", "license": "Apache-2.0", "dependencies": { "@atlaskit/platform-feature-flags": "^0.3.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -404,15 +404,15 @@ } }, "node_modules/@atlaskit/logo": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/@atlaskit/logo/-/logo-14.3.0.tgz", - "integrity": "sha512-kZwZ/5QtjY+xOv876PQos58ADMUmFv7sAZCW/59sYDF80oAWpcPZyEOsaL+E1WX0wydIU1g53sm5hJkhA1nHgA==", + "version": "14.3.1", + "resolved": "https://registry.npmjs.org/@atlaskit/logo/-/logo-14.3.1.tgz", + "integrity": "sha512-tp8iWr3UEjiHUMDB1jQs5yk4eW3QE4Ja785HpsEoC6W0wRMT9uxOqAhE38y0QGr49Jky9xBAJnPjvBfn+QYNHg==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.61.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -421,18 +421,20 @@ } }, "node_modules/@atlaskit/lozenge": { - "version": "11.10.1", - "resolved": "https://registry.npmjs.org/@atlaskit/lozenge/-/lozenge-11.10.1.tgz", - "integrity": "sha512-FdwMo80oqHY1gs3Ths4QYCI4RaR0O7JfApBhaNFMimlc3mwdeytX5O7dIAsBkrS+ZgWx0i3uxc6BbODYBLillw==", + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@atlaskit/lozenge/-/lozenge-11.11.0.tgz", + "integrity": "sha512-3Y2vYHuay/GXItHdtW952EnNJuSLCKs6N8hRU1mJIdPqS6xS8JGuznyLmxzaryILSO1nfhGLsCFxU3QQFo6fIQ==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/codemod-utils": "^4.2.0", + "@atlaskit/css": "^0.5.0", "@atlaskit/platform-feature-flags": "^0.3.0", - "@atlaskit/primitives": "^12.0.0", + "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", + "@compiled/react": "^0.17.3", "@emotion/react": "^11.7.1" }, "peerDependencies": { @@ -440,19 +442,20 @@ } }, "node_modules/@atlaskit/menu": { - "version": "2.12.3", - "resolved": "https://registry.npmjs.org/@atlaskit/menu/-/menu-2.12.3.tgz", - "integrity": "sha512-bXOPG+l1d0GNtEd/Zqe7kIz0XonPzbRk2QAAiD0S+KAH07iC35GVhnmz1twAJZSIY+nz8uxe1YtMgo1Uo4HHZQ==", + "version": "2.12.5", + "resolved": "https://registry.npmjs.org/@atlaskit/menu/-/menu-2.12.5.tgz", + "integrity": "sha512-H2+WifaVPjkQetXpMfQ+Ka5Y1cSepDLm2gNa2NBe+xSaQvq6676vtclbs7KHhcAt1WRudt/Dx2prkL/Tyh/94Q==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/app-provider": "^1.4.0", "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/focus-ring": "^1.6.0", + "@atlaskit/interaction-context": "^2.1.0", "@atlaskit/platform-feature-flags": "^0.3.0", "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.61.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -462,12 +465,12 @@ } }, "node_modules/@atlaskit/motion": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-1.9.0.tgz", - "integrity": "sha512-z0GrDXJyPSydTNfXA2RPjUJweRAaqK2Z6wtBT907C+NdrusGN4aHH6Lh1IrJY3jhSSRnCKFcK+LOazkH1FNmNA==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-1.9.1.tgz", + "integrity": "sha512-wejVYuMiArBkhnEzUo6Ibah+NdVOPmVvy2FszrLnoU1W+Gtex3NxqwmtJZbMX5Uizc3DTAs5Cswf4depQVr8ZA==", "license": "Apache-2.0", "dependencies": { - "@atlaskit/ds-lib": "^2.4.0", + "@atlaskit/ds-lib": "^2.6.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1", "bind-event-listener": "^3.0.0" @@ -477,9 +480,9 @@ } }, "node_modules/@atlaskit/pagination": { - "version": "14.9.0", - "resolved": "https://registry.npmjs.org/@atlaskit/pagination/-/pagination-14.9.0.tgz", - "integrity": "sha512-fsM8+0QAA1XCUebE9xCXIQJ+enX4oFG+Cp1t6o/FDJOZM8EAkUyjhvh0aJNDx0WVrjECJJlZznauReV8yyNZ+g==", + "version": "14.9.1", + "resolved": "https://registry.npmjs.org/@atlaskit/pagination/-/pagination-14.9.1.tgz", + "integrity": "sha512-1Qe1e4wPTF1iNv7J5mG0Cbmnq7dIGgf8zmZtP2kwmfIB2oBaZ64/Ieha1Q8HkM83ZCzd6bWEQ1uGVnLdsT/2vg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -489,7 +492,7 @@ "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/icon": "^22.18.0", "@atlaskit/primitives": "^12.2.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@atlaskit/visually-hidden": "^1.5.0", "@babel/runtime": "^7.0.0", "memoize-one": "^6.0.0" @@ -522,9 +525,9 @@ } }, "node_modules/@atlaskit/popup": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/@atlaskit/popup/-/popup-1.27.0.tgz", - "integrity": "sha512-LuPriKmEz/YNdI/kMB6NZdOxp0czD/IxcfYSBN69V/t1BI1X3loQ8IQCS6x6ldtjHoOGslH6hhNqYmeGebTn6w==", + "version": "1.27.2", + "resolved": "https://registry.npmjs.org/@atlaskit/popup/-/popup-1.27.2.tgz", + "integrity": "sha512-WCl+qDNWEQH4DCX5c56nzTvuaXb4gRen7024plebB3p6I6NB67y9PQHBlwuDdbXty1NLG+yGGUsiITzE+fTZbA==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -537,7 +540,7 @@ "@atlaskit/portal": "^4.9.0", "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.60.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1", "bind-event-listener": "^3.0.0", @@ -566,9 +569,9 @@ } }, "node_modules/@atlaskit/primitives": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/@atlaskit/primitives/-/primitives-12.2.0.tgz", - "integrity": "sha512-gY7fLFRKKj1dOiumjKwaPhg7AllTHQYSpJm2jnRXW6kh8BmKa00DD79XfQ7CwleFUEhOCxaYIbUjksVdTbncHw==", + "version": "12.2.2", + "resolved": "https://registry.npmjs.org/@atlaskit/primitives/-/primitives-12.2.2.tgz", + "integrity": "sha512-x8Dnvustisff+nDnkNbNEhmNoK4feAhoomQLFbresOWie7RCANksjOyEI+9BZNS0Ogyd2tl1eoNTAof58elBGw==", "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", @@ -576,7 +579,7 @@ "@atlaskit/css": "^0.5.0", "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/interaction-context": "^2.1.0", - "@atlaskit/tokens": "^1.60.0", + "@atlaskit/tokens": "^2.0.0", "@atlaskit/visually-hidden": "^1.5.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1", @@ -589,19 +592,19 @@ } }, "node_modules/@atlaskit/side-navigation": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/@atlaskit/side-navigation/-/side-navigation-3.5.1.tgz", - "integrity": "sha512-ueARafOc7hmKzXm/GKlEB6vrHywV+MVuHvYuXdB4oOANgKgodUQkWwWy8Lgo7YmrcqzZpZLSuqz7QJByQqjw7w==", + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/@atlaskit/side-navigation/-/side-navigation-3.5.2.tgz", + "integrity": "sha512-RmgIjgwsB1Rk3Ujskbx5HtqZX156I2sMTz5ZTtZIVlgZITKDhfy2ew5QrXpPg15cnOK4cYJxrcS21BUCsxivQg==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@atlaskit/ds-lib": "^2.5.0", - "@atlaskit/icon": "^22.17.0", + "@atlaskit/ds-lib": "^2.6.0", + "@atlaskit/icon": "^22.18.0", "@atlaskit/menu": "^2.12.0", "@atlaskit/motion": "^1.9.0", - "@atlaskit/primitives": "^12.1.0", + "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -610,14 +613,14 @@ } }, "node_modules/@atlaskit/spinner": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-16.3.1.tgz", - "integrity": "sha512-z62H6hiMMQNMBa6QiFkpE4hBpodOq2r4BswDMtMK87IydyWbJbYnKHZFeHXpp2UgFQ6ngzr65YMF5b0EMC3jEw==", + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-16.3.2.tgz", + "integrity": "sha512-uzhqnClu8II5GdbvM9RwQ9BSnMlxReIqTZaDNFxss3ev8Li+k2SJG7I1rleU2x84QkFVQFiMj/NuXsb+BxEJoQ==", "license": "Apache-2.0", "dependencies": { "@atlaskit/interaction-context": "^2.1.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -626,19 +629,19 @@ } }, "node_modules/@atlaskit/table-tree": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/@atlaskit/table-tree/-/table-tree-10.0.1.tgz", - "integrity": "sha512-A2US1u7nIAgviGqZllIIGpfN3kErk+zb2TMKx2AugqMk4TG9NucAkjEYgC1ngEKagKD2tKYuF0VqlMmMVQ34mw==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@atlaskit/table-tree/-/table-tree-10.0.2.tgz", + "integrity": "sha512-811N6ltCXX8MF1SVMBRZ3B6Yk5/ehTMVJlHNWD2QAu3FWsxLIUId4xKuCLhrzAcYg7ha6TZWffiMwF/+J9Zpnw==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", - "@atlaskit/button": "^20.1.0", - "@atlaskit/ds-lib": "^2.5.0", + "@atlaskit/button": "^20.2.0", + "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/icon": "^22.18.0", "@atlaskit/spinner": "^16.3.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.60.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1", "lodash": "^4.17.21" @@ -648,20 +651,20 @@ } }, "node_modules/@atlaskit/tag": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/@atlaskit/tag/-/tag-12.6.0.tgz", - "integrity": "sha512-0wNg3QLLG6Y5Jv2aXXnxvJztmF3ifjMJMdGbrSDzl0hnkauW/uGrFhf2EgNRDuInC8b3eKOPwgTrqBMNf3fNOQ==", + "version": "12.6.1", + "resolved": "https://registry.npmjs.org/@atlaskit/tag/-/tag-12.6.1.tgz", + "integrity": "sha512-bJe6aocZrsg6ZexRCfY3ZX1Gcim9oevAJ+s9I1ia7XS1gvksNNaSDFvTATNmp2tkTRrbdE4daq0drW17aQIIOg==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", - "@atlaskit/ds-lib": "^2.5.0", - "@atlaskit/icon": "^22.16.0", + "@atlaskit/ds-lib": "^2.6.0", + "@atlaskit/icon": "^22.18.0", "@atlaskit/motion": "^1.9.0", "@atlaskit/platform-feature-flags": "^0.3.0", - "@atlaskit/primitives": "^12.1.0", + "@atlaskit/primitives": "^12.2.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -684,15 +687,15 @@ } }, "node_modules/@atlaskit/textarea": { - "version": "5.6.1", - "resolved": "https://registry.npmjs.org/@atlaskit/textarea/-/textarea-5.6.1.tgz", - "integrity": "sha512-UcQv1h+zI+l+E54atdpvuQmpvVzdGr4HNlkeLHwbhCSOO/5qhFQ/0uUx6KcrgQqIF30FhFBmMsbRlhIQs9VciA==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@atlaskit/textarea/-/textarea-5.6.2.tgz", + "integrity": "sha512-Kf2MJx/+IpsLxI4IdNF0Vw+zXB2kBzyLT1tjtVksX+ejYYiyxLseLDeZck75bfbMzKx9sw87Fy0Aip7cq6Q0eA==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -701,15 +704,15 @@ } }, "node_modules/@atlaskit/textfield": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@atlaskit/textfield/-/textfield-6.5.1.tgz", - "integrity": "sha512-qeVdE54O3iWPhyRyX/9wamRSjiy2Lv2PtGYGWOOXot0wm3fBLTSr8anEN0jieCTqUIkNLin7W/0Im2K9hkvZHg==", + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@atlaskit/textfield/-/textfield-6.5.2.tgz", + "integrity": "sha512-02JuJuySR9iJCJbT3d+p9XIsJU+pgjCEVqZx2ORdLzs0p1yCWdJiW7mhjjT7m8nsWrvrtL85fT+5llEnBwiN/g==", "dev": true, "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1" }, @@ -718,14 +721,14 @@ } }, "node_modules/@atlaskit/theme": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-13.0.0.tgz", - "integrity": "sha512-tvyFtHrRDvEUvLM8B7f9O6vtqB5Aappev73jsU+Btp5oyDqIh/3SBeDWRR2n/AiROoWqhDBQoesUdNBi0+QB+A==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-13.0.1.tgz", + "integrity": "sha512-2pRrdL5MHxvIsuJSJ4zgFzleOepvhmtGuABdTuugte9//V8aSWZ38nVCaFDfUi+HC6lRIht3hAAhKjFj0cweUw==", "license": "Apache-2.0", "dependencies": { "@atlaskit/codemod-utils": "^4.2.0", - "@atlaskit/ds-lib": "^2.4.0", - "@atlaskit/tokens": "^1.58.0", + "@atlaskit/ds-lib": "^2.6.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0" }, "peerDependencies": { @@ -733,9 +736,9 @@ } }, "node_modules/@atlaskit/tokens": { - "version": "1.61.0", - "resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-1.61.0.tgz", - "integrity": "sha512-gRkBDZOaQffJHg9g+hYFgPjQ0Hz4XIDaK5WEttIGyhi2USsGsvDvUeED8liqcQNwssH/5UFxIFp3FmEwo0DoFA==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-2.0.0.tgz", + "integrity": "sha512-Dx+accT28QyXXhG/TKpO5g5MLm4y7ZU9JY7AIqeNs5aM3CnRhkToMPk61WD6lWPkKyWskLqMHXUn88M7S4DwKg==", "license": "Apache-2.0", "dependencies": { "@atlaskit/ds-lib": "^2.6.0", @@ -750,18 +753,18 @@ } }, "node_modules/@atlaskit/tooltip": { - "version": "18.7.2", - "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-18.7.2.tgz", - "integrity": "sha512-bkE3EgRToDvmYD/y8x1FGdnq3a+7x4k67k4i8xRh5m1Wiavdbr86ROIwpgSTPNzA9pfLUsKPDvo6o9eOkojCIw==", + "version": "18.7.3", + "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-18.7.3.tgz", + "integrity": "sha512-4ypTa0CorzXUwh7jhdpACzm6+C7O0eZYrVP5aq2bF078fw7KbWeiKTa4C2neZfOTzK7Z29Yh13PXPhUNcmKixQ==", "license": "Apache-2.0", "dependencies": { "@atlaskit/analytics-next": "^10.1.0", - "@atlaskit/ds-lib": "^2.5.0", + "@atlaskit/ds-lib": "^2.6.0", "@atlaskit/motion": "^1.9.0", - "@atlaskit/popper": "^6.2.0", + "@atlaskit/popper": "^6.3.0", "@atlaskit/portal": "^4.9.0", "@atlaskit/theme": "^13.0.0", - "@atlaskit/tokens": "^1.59.0", + "@atlaskit/tokens": "^2.0.0", "@babel/runtime": "^7.0.0", "@emotion/react": "^11.7.1", "bind-event-listener": "^3.0.0" @@ -3781,9 +3784,9 @@ } }, "node_modules/@swc/core": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.28.tgz", - "integrity": "sha512-XapcMgsOS0cKh01AFEj+qXOk6KM4NZhp7a5vPicdhkRR8RzvjrCa7DTtijMxfotU8bqaEHguxmiIag2HUlT8QQ==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.26.tgz", + "integrity": "sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", @@ -3799,16 +3802,16 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.7.28", - "@swc/core-darwin-x64": "1.7.28", - "@swc/core-linux-arm-gnueabihf": "1.7.28", - "@swc/core-linux-arm64-gnu": "1.7.28", - "@swc/core-linux-arm64-musl": "1.7.28", - "@swc/core-linux-x64-gnu": "1.7.28", - "@swc/core-linux-x64-musl": "1.7.28", - "@swc/core-win32-arm64-msvc": "1.7.28", - "@swc/core-win32-ia32-msvc": "1.7.28", - "@swc/core-win32-x64-msvc": "1.7.28" + "@swc/core-darwin-arm64": "1.7.26", + "@swc/core-darwin-x64": "1.7.26", + "@swc/core-linux-arm-gnueabihf": "1.7.26", + "@swc/core-linux-arm64-gnu": "1.7.26", + "@swc/core-linux-arm64-musl": "1.7.26", + "@swc/core-linux-x64-gnu": "1.7.26", + "@swc/core-linux-x64-musl": "1.7.26", + "@swc/core-win32-arm64-msvc": "1.7.26", + "@swc/core-win32-ia32-msvc": "1.7.26", + "@swc/core-win32-x64-msvc": "1.7.26" }, "peerDependencies": { "@swc/helpers": "*" @@ -3820,9 +3823,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.28.tgz", - "integrity": "sha512-BNkj6enHo2pdzOpCtQGKZbXT2A/qWIr0CVtbTM4WkJ3MCK/glbFsyO6X59p1r8+gfaZG4bWYnTTu+RuUAcsL5g==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.26.tgz", + "integrity": "sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==", "cpu": [ "arm64" ], @@ -3837,9 +3840,9 @@ } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.28.tgz", - "integrity": "sha512-96zQ+X5Fd6P/RNPkOyikTJgEc2M4TzznfYvjRd2hye5h22jhxCLL/csoauDgN7lYfd7mwsZ/sVXwJTMKl+vZSA==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz", + "integrity": "sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==", "cpu": [ "x64" ], @@ -3854,9 +3857,9 @@ } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.28.tgz", - "integrity": "sha512-l2100Wx6LdXMOmOW3+KoHhBhyZrGdz8ylkygcVOC0QHp6YIATfuG+rRHksfyEWCSOdL3anM9MJZJX26KT/s+XQ==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz", + "integrity": "sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==", "cpu": [ "arm" ], @@ -3871,9 +3874,9 @@ } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.28.tgz", - "integrity": "sha512-03m6iQ5Bv9u2VPnNRyaBmE8eHi056eE39L0gXcqGoo46GAGuoqYHt9pDz8wS6EgoN4t85iBMUZrkCNqFKkN6ZQ==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz", + "integrity": "sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==", "cpu": [ "arm64" ], @@ -3888,9 +3891,9 @@ } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.28.tgz", - "integrity": "sha512-vqVOpG/jc8mvTKQjaPBLhr7tnWyzuztOHsPnJqMWmg7zGcMeQC/2c5pU4uzRAfXMTp25iId6s4Y4wWfPS1EeDw==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz", + "integrity": "sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==", "cpu": [ "arm64" ], @@ -3905,9 +3908,9 @@ } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.28.tgz", - "integrity": "sha512-HGwpWuB83Kr+V0E+zT5UwIIY9OxiS8aLd0UVMRVWuO8SrQyKm9HKJ46+zoAb8tfJrpZftfxvbn2ayZWR7gqosA==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz", + "integrity": "sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==", "cpu": [ "x64" ], @@ -3922,9 +3925,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.28.tgz", - "integrity": "sha512-q2Y2T8y8EgFtIiRyInnAXNe94aaHX74F0ha1Bl9VdRxE0u1/So+3VLbPvtp4V3Z6pj5pOePfCQJKifnllgAQ9A==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz", + "integrity": "sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==", "cpu": [ "x64" ], @@ -3939,9 +3942,9 @@ } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.28.tgz", - "integrity": "sha512-bCqh4uBT/59h3dWK1v91In6qzz8rKoWoFRxCtNQLIK4jP55K0U231ZK9oN7neZD6bzcOUeFvOGgcyMAgDfFWfA==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz", + "integrity": "sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==", "cpu": [ "arm64" ], @@ -3956,9 +3959,9 @@ } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.28.tgz", - "integrity": "sha512-XTHbHrksnrqK3JSJ2sbuMWvdJ6/G0roRpgyVTmNDfhTYPOwcVaL/mSrPGLwbksYUbq7ckwoKzrobhdxvQzPsDA==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz", + "integrity": "sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==", "cpu": [ "ia32" ], @@ -3973,9 +3976,9 @@ } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.7.28", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.28.tgz", - "integrity": "sha512-jyXeoq6nX8abiCy2EpporsC5ywNENs4ocYuvxo1LSxDktWN1E2MTXq3cdJcEWB2Vydxq0rDcsGyzkRPMzFhkZw==", + "version": "1.7.26", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz", + "integrity": "sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==", "cpu": [ "x64" ], @@ -4112,9 +4115,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.7.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.0.tgz", - "integrity": "sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==", + "version": "22.7.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz", + "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==", "dev": true, "license": "MIT", "dependencies": { @@ -4154,9 +4157,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.9", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz", - "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==", + "version": "18.3.10", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz", + "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==", "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4392,13 +4395,13 @@ "license": "ISC" }, "node_modules/@vitejs/plugin-react-swc": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz", - "integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==", + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.1.tgz", + "integrity": "sha512-vgWOY0i1EROUK0Ctg1hwhtC3SdcDjZcdit4Ups4aPkDcB1jYhmo+RMYWY87cmXMhvtD5uf8lV89j2w16vkdSVg==", "dev": true, "license": "MIT", "dependencies": { - "@swc/core": "^1.5.7" + "@swc/core": "^1.7.26" }, "peerDependencies": { "vite": "^4 || ^5" @@ -4558,28 +4561,28 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.8", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz", - "integrity": "sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==", + "version": "3.5.10", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz", + "integrity": "sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==", "dev": true, "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", - "@vue/shared": "3.5.8", + "@vue/shared": "3.5.10", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.8", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz", - "integrity": "sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==", + "version": "3.5.10", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.10.tgz", + "integrity": "sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==", "dev": true, "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.8", - "@vue/shared": "3.5.8" + "@vue/compiler-core": "3.5.10", + "@vue/shared": "3.5.10" } }, "node_modules/@vue/compiler-vue2": { @@ -4619,9 +4622,9 @@ } }, "node_modules/@vue/shared": { - "version": "3.5.8", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.8.tgz", - "integrity": "sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==", + "version": "3.5.10", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.10.tgz", + "integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==", "dev": true, "license": "MIT" }, @@ -5163,9 +5166,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001663", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz", - "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==", + "version": "1.0.30001664", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001664.tgz", + "integrity": "sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==", "dev": true, "funding": [ { @@ -5807,9 +5810,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.28", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz", - "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==", + "version": "1.5.29", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.29.tgz", + "integrity": "sha512-PF8n2AlIhCKXQ+gTpiJi0VhcHDb69kYX4MtCiivctc2QD3XuNZ/XIOlbGzt7WAjjEev0TtaH6Cu3arZExm5DOw==", "dev": true, "license": "ISC" }, @@ -6163,9 +6166,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.36.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.36.1.tgz", - "integrity": "sha512-/qwbqNXZoq+VP30s1d4Nc1C5GTxjJQjk4Jzs4Wq2qzxFM7dSmuG2UkIjg2USMLh3A/aVcUNrK7v0J5U1XEGGwA==", + "version": "7.37.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.0.tgz", + "integrity": "sha512-IHBePmfWH5lKhJnJ7WB1V+v/GolbB0rjS8XYVCSQCZKaQCAUhMoVoOEn1Ef8Z8Wf0a7l8KTJvuZg5/e4qrZ6nA==", "dev": true, "license": "MIT", "dependencies": { @@ -6592,9 +6595,9 @@ "license": "MIT" }, "node_modules/fast-uri": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz", - "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.2.tgz", + "integrity": "sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==", "dev": true, "license": "MIT" }, @@ -9426,9 +9429,9 @@ } }, "node_modules/package-json-from-dist": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", - "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", "dev": true, "license": "BlueOak-1.0.0" }, @@ -10949,9 +10952,9 @@ "optional": true }, "node_modules/sass": { - "version": "1.79.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz", - "integrity": "sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==", + "version": "1.79.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.4.tgz", + "integrity": "sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==", "dev": true, "license": "MIT", "dependencies": { @@ -12390,9 +12393,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", - "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "dev": true, "funding": [ { @@ -12410,8 +12413,8 @@ ], "license": "MIT", "dependencies": { - "escalade": "^3.1.2", - "picocolors": "^1.0.1" + "escalade": "^3.2.0", + "picocolors": "^1.1.0" }, "bin": { "update-browserslist-db": "cli.js" @@ -12647,9 +12650,9 @@ } }, "node_modules/vite-plugin-dts": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.2.2.tgz", - "integrity": "sha512-USwTMReZFf8yXV+cKkm4WOMqmFjbReAvkyxON5xzdnZzJEBnFgax6BBDZIGGr9WMJYvhHdpaIHLrOjXDcla4OA==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.2.3.tgz", + "integrity": "sha512-O5NalzHANQRwVw1xj8KQun3Bv8OSDAlNJXrnqoAz10BOuW8FVvY5g4ygj+DlJZL5mtSPuMu9vd3OfrdW5d4k6w==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index eb099c92..c939069c 100644 --- a/package.json +++ b/package.json @@ -76,8 +76,8 @@ ] }, "dependencies": { - "@atlaskit/empty-state": "^7.11.3", - "@atlaskit/icon": "^22.18.0", + "@atlaskit/empty-state": "^7.11.4", + "@atlaskit/icon": "^22.19.0", "@emotion/css": "^11.13.0", "@hello-pangea/dnd": "^17.0.0", "@radix-ui/react-accordion": "^1.2.0", @@ -112,18 +112,18 @@ "use-resize-observer": "^9.1.0" }, "devDependencies": { - "@atlaskit/atlassian-navigation": "^4.7.0", - "@atlaskit/code": "^15.6.0", - "@atlaskit/css-reset": "^6.11.0", - "@atlaskit/lozenge": "^11.10.1", - "@atlaskit/pagination": "^14.9.0", - "@atlaskit/side-navigation": "^3.5.1", - "@atlaskit/table-tree": "^10.0.1", - "@atlaskit/tag": "^12.6.0", + "@atlaskit/atlassian-navigation": "^4.7.1", + "@atlaskit/code": "^15.6.1", + "@atlaskit/css-reset": "^6.11.1", + "@atlaskit/lozenge": "^11.11.0", + "@atlaskit/pagination": "^14.9.1", + "@atlaskit/side-navigation": "^3.5.2", + "@atlaskit/table-tree": "^10.0.2", + "@atlaskit/tag": "^12.6.1", "@atlaskit/tag-group": "^10.6.0", - "@atlaskit/textarea": "^5.6.1", - "@atlaskit/textfield": "^6.5.1", - "@atlaskit/theme": "^13.0.0", + "@atlaskit/textarea": "^5.6.2", + "@atlaskit/textfield": "^6.5.2", + "@atlaskit/theme": "^13.0.1", "@babel/generator": "^7.25.6", "@babel/parser": "^7.25.6", "@babel/traverse": "^7.25.6", @@ -132,16 +132,16 @@ "@formatjs/cli": "^6.2.12", "@monaco-editor/react": "^4.6.0", "@total-typescript/ts-reset": "^0.6.1", - "@types/node": "^22.7.0", - "@types/react": "^18.3.9", + "@types/node": "^22.7.4", + "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^8.7.0", "@typescript-eslint/parser": "^8.7.0", - "@vitejs/plugin-react-swc": "^3.7.0", + "@vitejs/plugin-react-swc": "^3.7.1", "autoprefixer": "^10.4.20", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-react": "^7.36.1", + "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.12", "eslint-plugin-tailwindcss": "^3.17.4", @@ -162,7 +162,7 @@ "typescript": "^5.6.2", "typescript-plugin-css-modules": "^5.1.0", "vite": "^5.4.8", - "vite-plugin-dts": "^4.2.2", + "vite-plugin-dts": "^4.2.3", "vitest": "^2.1.1" }, "peerDependencies": { diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt index e7c036c1..341e1768 100644 --- a/showcase/public/showcase-sources.txt +++ b/showcase/public/showcase-sources.txt @@ -7367,6 +7367,28 @@ function createMoreTestGroups( const startDateInitial = dayjs().startOf("day").add(-1, "day").add(8, "hours") const endDateInitial = dayjs().startOf("day").add(5, "days").add(20, "hours") +function testCustomHeaderRowTimeSlot({ + timeSlot, + timeSlotMinutes, + isLastOfDay, + timeFrameOfDay, + viewType, +}: TimeTableTypes.CustomHeadeRowTimeSlotProps) { + return
{timeSlot.format()}
+} + +function customHeaderRowHeader({ + slotsArray, + timeFrameOfDay, + viewType, +}: { + slotsArray: readonly Dayjs[] + timeFrameOfDay: TimeTableTypes.TimeFrameDay + viewType: TimeTableTypes.TimeTableViewType +}) { + return
HEADER
+} + function Example() { //#region timetable @@ -7762,6 +7784,10 @@ function Example() { isCellDisabled={isCellDisabled} viewType={viewType} locale={locale} + customHeaderRow={{ + timeSlot: testCustomHeaderRowTimeSlot, + header: customHeaderRowHeader, + }} />