List refactor, Dropdown refactor, ComboBox refactor, Tabs refactor, T…

…oolbar refactor, Tree component (finos#10)
junaidzm13 · Jan 5, 2024 · c69f54c · c69f54c
1 parent 7ce74ab
commit c69f54c
Showing 1 changed file with 26 additions and 28 deletions.
diff --git a/internal/CalendarNavigation.tsx b/internal/CalendarNavigation.tsx
@@ -16,7 +16,8 @@ import {
   SyntheticEvent,
 } from "react";
 import { Dropdown, DropdownProps } from "../../dropdown";
-import { IndexedListItemProps, ListItemBase, useListItem } from "../../list";
+import { ListItem, ListItemProps, ListItemType } from "../../list";
+
 import { useCalendarContext } from "./CalendarContext";
 import dayjs from "./dayjs";
 
@@ -114,42 +115,31 @@ function useCalendarNavigation() {
 
 const ListItemWithTooltip = forwardRef<
   HTMLDivElement,
-  IndexedListItemProps<DropdownItem>
+  ListItemProps<DropdownItem>
 >((props, ref) => {
-  const { item, itemProps, itemToString } = useListItem<DropdownItem>(props);
+  const { item, label } = props;
 
   const { getTooltipProps, getTriggerProps } = useTooltip({
     placement: "right",
-    disabled: !item.disabled,
+    disabled: !item?.disabled,
   });
 
   const { ref: triggerRef, ...triggerProps } =
-    getTriggerProps<typeof ListItemBase>(itemProps);
+    getTriggerProps<typeof ListItem>(props);
 
   const handleRef = useForkRef(triggerRef, ref);
 
   return (
-    <>
-      <ListItemBase ref={handleRef} {...triggerProps}>
-        <label
-          style={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          {itemToString(item)}
-        </label>
-      </ListItemBase>
+    <ListItem ref={handleRef} {...triggerProps}>
+      {label}
       <Tooltip
         {...getTooltipProps({
           title: "Out of range",
         })}
       />
-    </>
+    </ListItem>
   );
-});
+}) as ListItemType<DropdownProps>;
 
 export const CalendarNavigation = forwardRef<
   HTMLDivElement,
@@ -186,13 +176,19 @@ export const CalendarNavigation = forwardRef<
     moveToNextMonth(event);
   };
 
-  const handleMonthSelect: dateDropdownProps["onChange"] = (event, month) => {
+  const handleMonthSelect: dateDropdownProps["onSelectionChange"] = (
+    event,
+    month
+  ) => {
     if (month) {
       moveToMonth(event, month.value);
     }
   };
 
-  const handleYearSelect: dateDropdownProps["onChange"] = (event, year) => {
+  const handleYearSelect: dateDropdownProps["onSelectionChange"] = (
+    event,
+    year
+  ) => {
     if (year) {
       moveToMonth(event, year.value);
     }
@@ -201,12 +197,14 @@ export const CalendarNavigation = forwardRef<
   const monthDropdownId = useId(MonthDropdownProps?.id);
   const monthDropdownLabelledBy = cx(
     MonthDropdownProps?.["aria-labelledby"],
-    monthDropdownId
+    // TODO need a prop on Dropdown to aloow buttonId to be passed, should not make assumptions about internal
+    // id assignment like this
+    `${monthDropdownId}-control`
   );
   const yearDropdownId = useId(YearDropdownProps?.id);
   const yearDropdownLabelledBy = cx(
     YearDropdownProps?.["aria-labelledby"],
-    yearDropdownId
+    `${yearDropdownId}-control`
   );
 
   const defaultItemToMonth = (date: DropdownItem) => {
@@ -249,9 +247,9 @@ export const CalendarNavigation = forwardRef<
         aria-label="Month Dropdown"
         {...MonthDropdownProps}
         ListItem={ListItemWithTooltip}
-        selectedItem={selectedMonth}
+        selected={selectedMonth}
         itemToString={defaultItemToMonth}
-        onChange={handleMonthSelect}
+        onSelectionChange={handleMonthSelect}
         fullWidth
       />
       {!hideYearDropdown && (
@@ -262,8 +260,8 @@ export const CalendarNavigation = forwardRef<
           aria-label="Year Dropdown"
           {...YearDropdownProps}
           ListItem={ListItemWithTooltip}
-          selectedItem={selectedYear}
-          onChange={handleYearSelect}
+          selected={selectedYear}
+          onSelectionChange={handleYearSelect}
           itemToString={defaultItemToYear}
           fullWidth
         />